/* Sección HERO (encabezado principal, óvalo verde, buscador,
   categorías) del home. Copiado tal cual de index.html, incluyendo
   los 2 ajustes finos reales que vivían al final del archivo (color
   morado de la cinta de palabras, y tamaño especial de la foto del
   bálsamo en categorías).

   El header de esta sección reutiliza las mismas clases del header
   global (.site-header .nav .logo .links .tools .cart-wrap, ver
   chrome.css) con el modificador .en-hero encima — así es EXACTAMENTE
   el mismo componente, solo repintado de blanco-sobre-verde en vez de
   negro-sobre-blanco. No es un header aparte. */
#s-hero .grain{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:1;opacity:.5;}

/* ══ FRAME DEL HERO — el óvalo de fondo ══ */
/* El recorte del óvalo (que mide 205%/187% a propósito, para que
   sobre por todos lados y no se le vean las esquinas) ya NO vive en
   .frame: un padre con overflow:hidden le corta el "position:sticky"
   a cualquier hijo (mismo problema documentado en el CSS de "Dónde
   encontrarnos"), y el header de aquí abajo necesita quedar sticky
   para no irse con el scroll. Se recorta en su propio .oval-clip
   (mismo tamaño y posición que .frame, por el inset:0), así el óvalo
   se sigue viendo idéntico pero .frame queda libre de overflow. */
.frame{position:relative;}
.oval-clip{position:absolute;inset:0;overflow:hidden;z-index:1;}
#s-hero .oval{position:absolute;left:-98%;top:-93%;width:205%;height:187%;background:var(--verde);border-radius:50%;transition:background .5s;}

/* — header en modo hero: arranca transparente sobre el óvalo, con
   texto/iconos blancos, y queda sticky (top:40px = el alto del
   cintillo, igual que el header de las páginas interiores en
   chrome.css) para que ya no se vaya con el scroll. Al pasar el
   óvalo verde, home-hero.js agrega .solido y se repinta blanco con
   texto oscuro — si no, el texto blanco quedaría invisible sobre el
   crema del resto de la página. z-index:40 para igualar al header
   interior: así la tarjeta de Delta-8 (z-index:45, ver home-d8.css)
   lo sigue tapando al tomar toda la pantalla. */
.site-header.en-hero{position:sticky;top:40px;background:transparent;border-bottom:none;z-index:40;transition:background .25s,border-color .25s;}
.site-header.en-hero .nav .links a{color:#fff;opacity:.94;}
.site-header.en-hero .nav .links a::after{background:#fff;}
.site-header.en-hero .nav .links a:hover,
.site-header.en-hero .nav .links a.on{opacity:1;color:#fff;}
.site-header.en-hero .nav .tools button,
.site-header.en-hero .nav .tools a.hd-cuenta,
.site-header.en-hero .nav .tools .cart-wrap>a{color:#fff;}
.site-header.en-hero .nav .tools button:hover,
.site-header.en-hero .nav .tools a.hd-cuenta:hover,
.site-header.en-hero .nav .tools .cart-wrap>a:hover{background:rgba(255,255,255,.14);}

.site-header.en-hero.solido{background:#fff;border-bottom:1.5px solid var(--borde);}
.site-header.en-hero.solido .nav .links a{color:var(--tinta);opacity:.75;}
.site-header.en-hero.solido .nav .links a::after{background:var(--resalte);}
.site-header.en-hero.solido .nav .links a:hover,
.site-header.en-hero.solido .nav .links a.on{opacity:1;color:var(--resalte-hondo);}
.site-header.en-hero.solido .nav .tools button,
.site-header.en-hero.solido .nav .tools a.hd-cuenta,
.site-header.en-hero.solido .nav .tools .cart-wrap>a{color:var(--tinta);}
.site-header.en-hero.solido .nav .tools button:hover,
.site-header.en-hero.solido .nav .tools a.hd-cuenta:hover,
.site-header.en-hero.solido .nav .tools .cart-wrap>a:hover{background:var(--crema);}

/* El panel de búsqueda de la lupa (.buscador/.velo) ya no vive aquí:
   usa las mismas clases .site-header .nav .tools que este header
   comparte con el de las demás páginas (ver el comentario de arriba),
   así que su CSS se movió a chrome.css para no duplicarlo — ahí
   funciona igual en el home y en el resto del sitio. */

/* ══ CONTENIDO DEL HERO — título, mascota, tarjetas ══ */
#s-hero .hero-in{max-width:1240px;margin:0 auto;padding:22px 32px 168px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;position:relative;z-index:3;min-height:460px;}
#s-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);color:#fff;font-family:'Poppins';font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;border-radius:999px;padding:8px 17px;margin-bottom:22px;}
#s-hero .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--cta);}
#s-hero h1{font-family:'Poppins';font-weight:800;font-size:clamp(42px,5.8vw,74px);line-height:.94;letter-spacing:-2.3px;color:#fff;}
#s-hero h1 .cursi{display:block;font-family:'Caveat';font-weight:700;font-size:.66em;letter-spacing:0;margin-top:8px;transform:rotate(-2deg);transform-origin:left;opacity:.97;}
#s-hero .lead{color:rgba(255,255,255,.9);font-size:17.5px;margin:22px 0 30px;max-width:390px;}
#s-hero .acciones{display:flex;gap:13px;align-items:center;flex-wrap:wrap;}
#s-hero .btn{font-family:'Poppins';font-weight:700;font-size:16px;border:none;border-radius:999px;padding:16px 32px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:transform .18s,box-shadow .18s,background .2s,color .2s;}
#s-hero .btn-cta{background:var(--cta);color:var(--cta-txt);box-shadow:0 12px 30px rgba(0,0,0,.18);}
#s-hero .btn-cta:hover{background:var(--cta-hover);transform:translateY(-3px);}
#s-hero .btn-cta.blanco{background:#fff;}
#s-hero .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.62);}
#s-hero .btn-ghost:hover{background:rgba(255,255,255,.13);transform:translateY(-3px);}
#s-hero .escena{position:relative;min-height:380px;display:grid;place-items:center;}
#s-hero .escena .masco{width:min(480px,100%);height:auto;position:relative;z-index:3;filter:drop-shadow(0 26px 36px rgba(0,0,0,.3));animation:hero_flota 6s ease-in-out infinite;}
@keyframes hero_flota{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}
#s-hero .card{position:absolute;z-index:4;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 22px 50px rgba(0,0,0,.2);display:flex;align-items:center;gap:11px;animation:hero_flota 7s ease-in-out infinite;}
#s-hero .card .cc{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex-shrink:0;}
#s-hero .card b{font-family:'Poppins';font-size:14.5px;display:block;line-height:1.15;}
#s-hero .card small{font-size:11px;color:var(--tinta-suave);}
#s-hero .card-rev{top:4%;right:20%;animation-delay:.6s;}
#s-hero .card-rev .cc{background:#FEF0DD;color:var(--durazno);}
#s-hero .card-rev .stars{color:var(--cta);font-size:11px;letter-spacing:1px;}
#s-hero .card-env{bottom:6%;right:-2%;animation-delay:1.4s;}
#s-hero .card-env .cc{background:var(--crema-honda);color:var(--morado);}

/* ══ CINTA DE PALABRAS (marquee) ══ */
#s-hero .cintas{position:relative;z-index:6;margin-top:-64px;padding:14px 0 10px;height:74px;}
#s-hero .cinta{overflow:hidden;padding:13px 0;position:absolute;width:112%;left:-6%;}
#s-hero .cinta-a{background:var(--resalte);transform:rotate(-2deg);top:6px;z-index:2;box-shadow:0 12px 34px rgba(0,165,149,.3);}
#s-hero .track{display:flex;width:max-content;}
#s-hero .cinta-a .track{animation:hero_mqx 48s linear infinite;}
#s-hero .seg{display:inline-flex;align-items:center;flex-shrink:0;}
#s-hero .seg span{white-space:nowrap;display:inline-flex;align-items:baseline;gap:22px;padding:0 11px;color:#fff;}
#s-hero .w-a{font-family:'Poppins';font-weight:800;font-size:19px;letter-spacing:.14em;text-transform:uppercase;}
#s-hero .w-b{font-family:'Caveat';font-weight:700;font-size:30px;}
#s-hero .w-sep{font-size:14px;opacity:.75;}
#s-hero .cinta:hover .track{animation-play-state:paused;}
@keyframes hero_mqx{to{transform:translateX(-50%);}}

/* ══ SECCIÓN CATEGORÍAS ══ */
.cat-sec{max-width:1240px;margin:0 auto;padding:52px 32px 70px;position:relative;z-index:2;}
.cat-sec::before{content:"";position:absolute;width:620px;height:620px;border-radius:44% 56% 62% 38% / 50% 42% 58% 50%;background:radial-gradient(circle,rgba(0,165,149,.1),transparent 70%);left:-260px;bottom:-200px;z-index:0;animation:cat_morf 18s ease-in-out infinite alternate;}
@keyframes cat_morf{to{border-radius:56% 44% 40% 60% / 44% 56% 44% 56%;}}
#s-hero .c-eb{display:inline-flex;align-items:center;gap:7px;background:var(--crema-honda);color:var(--resalte-hondo);font-family:'Poppins';font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:7px 16px;margin-bottom:16px;}
#s-hero .c-head{text-align:center;max-width:640px;margin:0 auto 165px;}
#s-hero .c-head h2{font-family:'Poppins';font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-1px;color:var(--tinta);}
#s-hero .c-head h2 .cur{font-family:'Caveat';font-weight:700;color:var(--resalte);font-size:1.15em;}
#s-hero .c-head p{color:var(--tinta-suave);font-size:15px;margin-top:14px;}
#s-hero .c-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
#s-hero .c-card{position:relative;border-radius:26px;padding:190px 24px 28px;min-height:340px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:visible;border:1.5px solid;transition:transform .28s cubic-bezier(.2,.8,.25,1),box-shadow .28s;cursor:pointer;text-decoration:none;color:inherit;}
#s-hero .c-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 30px 60px rgba(30,43,39,.15);}
#s-hero .c-halo{position:absolute;top:-110px;left:50%;transform:translateX(-50%);width:260px;height:260px;border-radius:50%;filter:blur(2px);z-index:0;}
#s-hero .c-prod-img{position:absolute;top:-130px;left:50%;transform:translateX(-50%);width:auto;height:300px;max-width:none;filter:drop-shadow(0 16px 20px rgba(0,0,0,.18));z-index:1;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.25,1);}
#s-hero .c-card:hover .c-prod-img{transform:translateX(-50%) translateY(-8px) scale(1.06) rotate(2deg);}
#s-hero .c-card h3{font-family:'Poppins';font-weight:700;font-size:21px;margin-bottom:5px;position:relative;z-index:2;}
#s-hero .c-card p{font-size:13px;line-height:1.5;margin-bottom:18px;max-width:220px;position:relative;z-index:2;}
#s-hero .c-go{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:700;font-size:12.5px;margin-top:auto;position:relative;z-index:2;}
#s-hero .c-go .circ{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;transition:transform .2s;}
#s-hero .c-card:hover .c-go .circ{transform:translateX(4px);}
#s-hero .c-gomitas{background:#FEF4E6;border-color:var(--cta);}
#s-hero .c-gomitas .c-halo{background:radial-gradient(circle,rgba(245,148,31,.35),transparent 70%);}
#s-hero .c-gomitas h3{color:#B4640A;}
#s-hero .c-gomitas p{color:#8A5214;}
#s-hero .c-gomitas .c-go{color:#B4640A;}
#s-hero .c-gomitas .circ{background:var(--cta);color:#fff;}
#s-hero .c-aceites{background:#E7F1F8;border-color:var(--azul-500);}
#s-hero .c-aceites .c-halo{background:radial-gradient(circle,rgba(55,144,200,.32),transparent 70%);}
#s-hero .c-aceites h3{color:#1D4F73;}
#s-hero .c-aceites p{color:#2C6690;}
#s-hero .c-aceites .c-go{color:#1D4F73;}
#s-hero .c-aceites .circ{background:var(--azul-500);color:#fff;}
#s-hero .c-balsamo{background:#F0FAF6;border-color:var(--resalte);}
#s-hero .c-balsamo .c-halo{background:radial-gradient(circle,rgba(0,165,149,.3),transparent 70%);}
#s-hero .c-balsamo h3{color:#00655C;}
#s-hero .c-balsamo p{color:#0A7266;}
#s-hero .c-balsamo .c-go{color:#00655C;}
#s-hero .c-balsamo .circ{background:var(--resalte);color:#fff;}
#s-hero .c-pets{background:#FAF3E9;border-color:#7A4B1F;}
#s-hero .c-pets .c-halo{background:radial-gradient(circle,rgba(122,75,31,.28),transparent 70%);}
#s-hero .c-pets h3{color:#5C3814;}
#s-hero .c-pets p{color:#7A4B1F;}
#s-hero .c-pets .c-go{color:#7A4B1F;}
#s-hero .c-pets .circ{background:#7A4B1F;color:#fff;}
#s-hero .nota{max-width:1240px;margin:0 auto;padding:0 32px 60px;text-align:center;color:var(--tinta-suave);font-size:13.5px;line-height:1.7;}

@media(max-width:900px){
  #s-hero .frame{aspect-ratio:auto;}
  #s-hero .hero-in{grid-template-columns:1fr;padding-bottom:40px;min-height:0;position:relative;}
  /* El bloque de texto (eyebrow, título, párrafo, botones) pasa a
     tener su propio contexto de apilamiento, para que sus botones
     siempre pinten ENCIMA de la mascota, aunque se toquen. */
  #s-hero .hero-in>div:first-child{position:relative;z-index:2;}
  #s-hero .card-rev,#s-hero .card-env{display:none;}

  /* La mascota ya no empuja al bloque de texto hacia abajo (eso
     dejaba aire verde vacío antes del óvalo blanco). Ahora flota en
     posición absoluta, pegada a la esquina inferior derecha del
     bloque de texto — justo el espacio libre que queda a un lado del
     botón "Hacer el quiz" cuando no llena todo el ancho. Si su lado
     izquierdo queda tapado por el botón no pasa nada: el botón pinta
     encima (ver regla de arriba). Y como ya no ocupa espacio real,
     libera del todo a la cinta de palabras morada de abajo. */
  #s-hero .escena{
    position:absolute;
    right:0;
    bottom:36px;
    min-height:0;
    margin-top:0;
    width:auto;
    z-index:1;
  }
  #s-hero .escena .masco{width:min(148px,40%);display:block;margin-left:auto;}
  #s-hero h1{font-size:40px;}
  #s-hero .c-row{grid-template-columns:1fr;gap:150px;}

  #s-hero .cintas{margin-top:10px;}
  .cat-sec{padding-top:28px;}
}
@media(prefers-reduced-motion:reduce){
  #s-hero *{animation:none !important;}
  #s-hero .btn:hover,#s-hero .card,#s-hero .c-card:hover{transform:none;}
}

/* — ajustes finos reales (vivían al final del archivo) —
   la cinta de palabras usa morado en vez de verde para que contraste
   con el óvalo (que también es verde) y no se pierda contra el
   fondo; y la foto del bálsamo en categorías es un poco más chica
   que las demás porque su frasco es más ancho. */
#s-hero .cinta-a{background:var(--morado);box-shadow:0 12px 34px rgba(55,35,94,.35);}
#s-hero .c-balsamo .c-prod-img{height:290px;top:-115px;}