/* Sección Delta-8 (tarjeta negra, takeover por scroll) del home.
   Copiado tal cual de index.html. El ancho/alto/radio de la tarjeta
   los anima el JS (home-d8.js) según el scroll, no esta hoja.
   z-index agregado (no estaba en el original): ahora el header y la
   franja quedan fijos en TODAS las páginas — antes no competían con
   esta tarjeta. Sin esto, tapaban el aviso "18+" mientras la tarjeta
   crecía. Con "toma la pantalla completa" el efecto queda mejor:
   se abre encima de todo, no a medias. */
/* Pista más larga (230vh → 280vh) y meseta de pantalla completa más
   ancha (el JS la abre en raw 0.28–0.72 en vez de 0.35–0.65): la
   tarjeta negra tarda más en llegar a pantalla completa, se queda
   así más tiempo y tarda más en encogerse — para que la atmósfera se
   note, no sea un parpadeo. Aplica igual en escritorio y en móvil. */
#s-d8 .d8track{position:relative;height:280vh;}
/* 100vh en celular no siempre coincide con lo que en verdad se ve
   (la barra de direcciones del navegador se achica/agranda al hacer
   scroll, y esta sección se activa justo scrolleando) — con 100vh
   fijo, la tarjeta a veces quedaba un poco corta arriba, mostrando
   una rendija de la sección anterior. 100dvh sigue el alto real
   visible en cada momento; el 100vh de respaldo es solo para
   navegadores viejos que no entienden dvh. */
#s-d8 .d8sticky{position:sticky;top:0;height:100vh;height:100dvh;display:grid;place-items:center;overflow:hidden;z-index:45;}
#s-d8 .d8card{position:relative;width:92%;height:78vh;border-radius:40px;background:#000;overflow:hidden;display:flex;align-items:center;}
#s-d8 .d8card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;z-index:1;}
#s-d8 .orbe{position:absolute;width:min(50vw,560px);height:min(50vw,560px);border-radius:50%;right:4%;top:50%;transform:translateY(-50%);background:conic-gradient(from 90deg,#B79CE0,#6B4FA8,#DD374B,#B79CE0);filter:blur(50px);opacity:.5;animation:d8_d8girar 10s linear infinite,d8_d8pulsa 6s ease-in-out infinite;z-index:1;}
@keyframes d8_d8girar{to{transform:translateY(-50%) rotate(360deg);}}
@keyframes d8_d8pulsa{
  0%,100%{transform:translateY(-50%) scale(1);}
  50%{transform:translateY(-50%) scale(1.08);}
}
#s-d8 .d8in{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:0 32px;max-width:1240px;margin:0 auto;width:100%;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s;}
#s-d8 .d8in.on{opacity:1;transform:none;}
#s-d8 .badge18{display:inline-flex;align-items:center;gap:7px;font-family:'Poppins';font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--rojo);color:#fff;border-radius:999px;padding:7px 15px;margin-bottom:16px;}
#s-d8 .d8in h2{font-family:'Poppins';font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-1px;line-height:1.08;color:#fff;margin-bottom:10px;}
#s-d8 .d8in h2 .cur{font-family:'Caveat';font-weight:700;color:#B79CE0;font-size:1.1em;display:block;}
#s-d8 .d8in p{color:rgba(255,255,255,.75);font-size:14.5px;max-width:420px;margin-bottom:22px;}
#s-d8 .d8btn{font-family:'Poppins';font-weight:700;font-size:14px;background:#fff;color:#000;border:none;border-radius:999px;padding:14px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:transform .18s;}
#s-d8 .d8btn:hover{transform:translateY(-2px);}
#s-d8 .d8avisos{display:flex;flex-direction:column;gap:6px;margin-top:22px;}
#s-d8 .d8avisos span{font-size:11.5px;color:rgba(255,255,255,.55);}
#s-d8 .d8visual{position:relative;display:grid;place-items:center;min-height:400px;}
#s-d8 .d8prod{position:relative;width:min(310px,72%);height:auto;filter:drop-shadow(0 40px 90px rgba(0,0,0,.65));z-index:2;animation:d8_d8flotar 4.5s ease-in-out infinite;}
@keyframes d8_d8flotar{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-16px) rotate(2deg);}
}
@media(max-width:820px){
  #s-d8 .d8in{grid-template-columns:1fr;text-align:center;padding:0 22px;gap:10px;}
  #s-d8 .d8visual{min-height:260px;margin-top:26px;}
  #s-d8 .d8visual picture{display:block;width:min(310px,72%);margin:0 auto;}
  #s-d8 .d8prod{width:100%;}
  #s-d8 .d8in > div:not(.d8visual){display:contents;}
  #s-d8 .badge18{justify-self:center;}
  #s-d8 .d8btn{justify-self:center;}
  #s-d8 .d8visual{order:2;}
  #s-d8 .d8avisos{order:3;}
}

/* — ajuste fino de tipografía (vivía al final del archivo; ganan la
   cascada): todo el bloque de texto se agranda un 25%, y el aviso
   18+ se vuelve a achicar solo en móvil, donde ese tamaño le daba
   demasiado protagonismo — */
#s-d8 .badge18{font-size:13.75px;gap:8.75px;padding:8.75px 18.75px;margin-bottom:20px;}
#s-d8 .d8in h2{font-size:clamp(35px,4.5vw,55px);letter-spacing:-1.25px;margin-bottom:12.5px;}
#s-d8 .d8in p{font-size:18.125px;max-width:525px;margin-bottom:27.5px;}
#s-d8 .d8btn{font-size:17.5px;padding:17.5px 32.5px;gap:11.25px;}
#s-d8 .d8avisos{gap:7.5px;margin-top:27.5px;}
#s-d8 .d8avisos span{font-size:14.375px;}
@media(max-width:820px){
  #s-d8 .badge18{font-size:10px;letter-spacing:.06em;padding:6px 13px;gap:5px;}

  /* El bloque de arriba agranda todo un 25% para escritorio, pero en
     celular ese tamaño no cabía: el botón se veía enorme, la imagen
     del empaque ocupaba casi la pantalla completa y el párrafo se
     comía varias líneas. Se regresan estos tres al tamaño normal del
     resto de la sección (no al de escritorio agrandado) para que
     todo entre en pantalla sin scroll. */
  #s-d8 .d8in p{font-size:14px;margin-bottom:16px;}
  #s-d8 .d8btn{font-size:14px;padding:13px 24px;gap:8px;}
  #s-d8 .d8avisos{gap:5px;margin-top:16px;}
  #s-d8 .d8avisos span{font-size:11px;}

  #s-d8 .d8visual{min-height:200px;margin-top:16px;}
  #s-d8 .d8visual picture{width:min(190px,52%);}
}