/* Héroes a pantalla completa (/h1 /h2 /h3): imagen a sangre, 100svh, de borde a borde.
   Gloock fija (data-font="b7"). El menú superior y la barra de envíos flotan encima;
   en móvil el menú inferior también (sin huecos). */
:root{--topbar:calc(var(--ann) + var(--proto) + var(--head))}

/* barra superior fija: envíos + selector de prototipo + cabecera */
.topbar{position:fixed;inset:0 0 auto 0;z-index:30}
.topbar .head{position:relative;background:transparent;transition:background-color .25s}
.topbar.is-solid .head{background:var(--bg)}
/* logo: claro sobre la foto, oscuro sobre fondos claros (H3 y diapositivas claras), color al bajar */
.topbar:not(.is-solid) .logo .logo__c{display:none}
.topbar:not(.is-solid) .logo .logo__l{display:block}
.topbar[data-tone="light"]:not(.is-solid) .logo .logo__l,html[data-hero="h3"] .topbar:not(.is-solid) .logo .logo__l{display:none}
.topbar[data-tone="light"]:not(.is-solid) .logo .logo__d,html[data-hero="h3"] .topbar:not(.is-solid) .logo .logo__d{display:block}
.topbar .proto{background:rgb(42 26 31 / .86)}

/* ---- base común ---- */
.hx{position:relative;height:100svh;min-height:560px;overflow:hidden;color:#fff;background:var(--ink)}
.hx__pic,.hx__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hx__text{position:absolute;left:0;right:0;z-index:2;bottom:calc(var(--tab) + var(--safe) + 26px);padding:0 20px;display:grid;gap:12px;justify-items:start}
.hx h1,.hx h2{font-size:clamp(38px,11.4vw,64px);line-height:1.02;color:#fff;text-wrap:balance}
.hx em{color:var(--blush);font-style:var(--em)}
.hx__lead{font-size:15px;line-height:1.45;max-width:30em;color:#fff}
.hx .pill{background:var(--bg);color:var(--ink)}
.hx__cta{min-height:52px;width:100%}

/* velo: degradado suave del color de la marca, lo justo para leer (sin sombras en el texto) */
.hx1::after,.hx2 .slide::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgb(42 26 31 / .88) 0%,rgb(42 26 31 / .74) 26%,rgb(42 26 31 / .34) 48%,transparent 68%)}

/* ---- H2: carrusel a sangre ---- */
.hx2__track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hx2__track::-webkit-scrollbar{display:none}
.hx2 .slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start}
.hx2__dots{position:absolute;z-index:3;left:0;right:0;bottom:calc(var(--tab) + var(--safe) + 4px);display:flex;justify-content:center}
.hx2__dots button{position:relative;width:28px;height:22px;border:0;background:none;padding:0;cursor:pointer}
.hx2__dots button::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:999px;background:rgb(255 249 247 / .55);transform:translate(-50%,-50%);transition:width .25s,background-color .25s}
.hx2__dots button[aria-selected="true"]::after{width:24px;background:#fff}
.hx2__arrow{display:none}

/* ---- H3: composición dividida ---- */
.hx3{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);background:var(--blush);color:var(--ink)}
.hx3__text{grid-column:1/-1;padding:calc(var(--topbar) + 16px) 20px 22px;display:grid;gap:12px;justify-items:start;background:var(--blush)}
.hx3 h1{color:var(--ink);font-size:clamp(34px,9.6vw,60px)}
.hx3 em{color:var(--accent)}
.hx3 .hx__lead{display:none;color:#4d3439}
.hx3 .pill{background:var(--bg)}
.hx3__photo{position:relative;display:block;overflow:hidden;min-height:0;text-decoration:none}
.hx3__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx3__photo .pill{position:absolute;left:12px;bottom:calc(var(--tab) + var(--safe) + 12px);z-index:1}

/* el resto de la home arranca sin hueco bajo el héroe */
.shop{padding-top:56px}

/* ---- escritorio ---- */
@media (min-width:900px){
  .hx{min-height:620px}
  .hx__text{top:calc(var(--topbar) + 20px);bottom:0;left:max(48px,calc((100vw - 1240px) / 2));right:auto;width:min(620px,52vw);padding:0 0 40px;align-content:center;gap:18px}
  .hx h1,.hx h2{font-size:clamp(56px,6vw,96px)}
  .hx__lead{font-size:18px}
  .hx__cta{width:auto;padding:0 38px}
  .hx1::after,.hx2 .slide::after{background:linear-gradient(90deg,rgb(42 26 31 / .8) 0%,rgb(42 26 31 / .66) 34%,rgb(42 26 31 / .22) 60%,transparent 76%)}
  .hx2__dots{bottom:30px}
  .hx2__arrow{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:52px;height:52px;margin-top:26px;border:0;border-radius:50%;background:var(--bg);color:var(--ink);font-size:20px;cursor:pointer}
  .hx2__arrow--prev{left:24px}.hx2__arrow--next{right:24px}
  .hx2__arrow:hover{background:var(--accent);color:var(--accent-ink)}
  .hx3{grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:1fr}
  .hx3__text{grid-column:auto;padding:calc(var(--topbar) + 20px) clamp(32px,4vw,64px) 48px;align-content:center;gap:20px}
  .hx3 h1{font-size:clamp(46px,4.6vw,78px)}
  .hx3 .hx__lead{display:block;font-size:17px}
  .hx3__photo .pill{bottom:28px;left:20px}
  .shop{padding-top:88px}
}
@media (max-width:899px){.hx3__text{padding-top:calc(var(--topbar) + 12px)}}
@media (prefers-reduced-motion:reduce){.topbar .head{transition:none}}