/* Home principal: carrusel compacto a sangre + categorías en formato stories.
   Cabecera y barra de envíos en flujo (sin superponerse); el menú inferior solo en móvil. */
html[data-hero="home"]{--topbar:0px;--stories:112px}
@media (min-width:900px){html[data-hero="home"]{--stories:140px}}

/* sin cabecera flotante: todo en el flujo y la cabecera pegajosa */
html[data-hero="home"] .topbar{display:contents}
html[data-hero="home"] .topbar .head{position:sticky;top:0;z-index:30;background:var(--bg)}
html[data-hero="home"] .topbar:not(.is-solid) .logo .logo__c,html[data-hero="home"] .topbar .logo .logo__c{display:block}
html[data-hero="home"] .topbar:not(.is-solid) .logo .logo__l,html[data-hero="home"] .topbar:not(.is-solid) .logo .logo__d{display:none}

/* carrusel compacto: ≈65svh en móvil y ≈70vh en escritorio, sin pasarse del hueco que dejan el resto */
html[data-hero="home"] .hx2--compact{height:min(65svh,calc(100svh - var(--ann) - var(--head) - var(--stories) - var(--tab) - var(--safe)));min-height:340px}
html[data-hero="home"] .hx2--compact .hx__text{top:auto;bottom:34px;padding:0 20px}
html[data-hero="home"] .hx2--compact .hx__lead{display:none}
html[data-hero="home"] .hx2--compact .hx2__dots{bottom:6px}
html[data-hero="home"] .hx2--compact h1,html[data-hero="home"] .hx2--compact h2{font-size:clamp(32px,9.4vw,52px)}
html[data-hero="home"] .hx2--compact .hx__cta{min-height:48px}
html[data-hero="home"] .hx2--compact .slide::after{background:linear-gradient(0deg,rgb(42 26 31 / .88) 0%,rgb(42 26 31 / .74) 30%,rgb(42 26 31 / .3) 56%,transparent 76%)}

/* stories */
.stories{height:var(--stories);display:flex;align-items:center;background:var(--bg)}
.stories__row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:8px 20px;width:100%;scroll-padding-inline:20px}
.stories__row::-webkit-scrollbar{display:none}
.story{flex:none;width:76px;display:grid;justify-items:center;gap:6px;text-decoration:none;color:var(--muted);font:600 12px/1.2 var(--font-body);text-align:center;scroll-snap-align:start}
.story__ring{display:block;width:68px;height:68px;padding:3px;border-radius:50%;background:conic-gradient(from 200deg,var(--accent),var(--rose),var(--blush),var(--mauve),var(--accent));transition:transform .2s}
.story__in{display:block;width:100%;height:100%;padding:3px;border-radius:50%;background:var(--bg)}
.story__ph{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--surface)}
.story__ph img{width:74%;height:74%;object-fit:contain}
.story__ph svg{width:30px;height:30px;fill:var(--accent)}
.story__ph--2{background:var(--oat)}.story__ph--3{background:var(--mauve-l)}.story__ph--4{background:var(--blush)}.story__ph--5{background:var(--mauve-l)}
.story[aria-selected="true"]{color:var(--ink)}
.story[aria-selected="true"] .story__ring{background:var(--accent)}
.story:active .story__ring{transform:scale(.94)}
.story:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}

/* en la home las stories hacen de filtros: se acorta el aire sobre la tienda */
html[data-hero="home"] .shop{padding-top:32px}
html[data-hero="home"] .shop .chips{display:none}

@media (min-width:900px){
  html[data-hero="home"] .hx2--compact{height:min(70vh,calc(100vh - var(--ann) - var(--head) - var(--stories)));min-height:420px}
  html[data-hero="home"] .hx2--compact .hx__text{top:0;bottom:0;align-content:center;padding:0 0 28px}
  html[data-hero="home"] .hx2--compact .hx__lead{display:block}
  html[data-hero="home"] .hx2--compact h1,html[data-hero="home"] .hx2--compact h2{font-size:clamp(46px,5vw,80px)}
  html[data-hero="home"] .hx2--compact .hx2__dots{bottom:16px}
  html[data-hero="home"] .hx2--compact .slide::after{background:linear-gradient(90deg,rgb(42 26 31 / .82) 0%,rgb(42 26 31 / .68) 34%,rgb(42 26 31 / .22) 60%,transparent 76%)}
  html[data-hero="home"] .stories__row{justify-content:center;gap:34px;padding:10px 40px}
  .story{width:104px;font-size:13px}
  .story__ring{width:88px;height:88px}
  html[data-hero="home"] .shop{padding-top:56px}
}
@media (max-width:899px){html[data-hero="home"] .hx2--compact .hx2__arrow{display:none}}