/* =========================
   FULL SCREEN — Apple Music vibe
   ========================= */

#aliato-stories-css{
  --muted: rgba(255,255,255,.72);
  --stroke: rgba(255,255,255,.12);
  --green: #1DB954;
  --pad: clamp(18px, 4vw, 54px);
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  user-select: none;
}

/* Si WP mete padding al contenedor del bloque, esto ayuda */
#aliato-stories-css,
#aliato-stories-css *{box-sizing:border-box}

/* Oculta radios */
#aliato-stories-css .as-r{position:absolute; left:-9999px}

/* Stage ahora ocupa toda la pantalla */
#aliato-stories-css .as-stage{
  width: 100vw;
  height: 100vh;
  min-height: 100svh;   /* mejor en móvil moderno */
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: #0b0b0b;
  border: none;
  box-shadow: none;
}

/* Barra de progreso (dots) full width */
#aliato-stories-css .as-top{
  position:absolute;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 10;
  display:flex;
  justify-content:center;
  pointer-events:none;
  padding: 0 var(--pad);
}
#aliato-stories-css .as-dots{
  width: 100%;
  display:flex;
  gap: 8px;
}
#aliato-stories-css .as-dots .d{
  flex:1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
#aliato-stories-css .as-dots .d.on{background: rgba(255,255,255,.92)}

/* Stories */
#aliato-stories-css .as-story{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:flex-start;
  padding: var(--pad);
  opacity:0;
}

/* Animación premium de entrada */
@keyframes asInPremium{
  0%{opacity:0; transform: translateY(10px) scale(.992)}
  100%{opacity:1; transform: translateY(0) scale(1)}
}
#as1:checked ~ .as-stage .s1,
#as2:checked ~ .as-stage .s2,
#as3:checked ~ .as-stage .s3,
#as4:checked ~ .as-stage .s4,
#as5:checked ~ .as-stage .s5,
#as6:checked ~ .as-stage .s6,
#as7:checked ~ .as-stage .s7,
#as8:checked ~ .as-stage .s8,
#as9:checked ~ .as-stage .s9{
  display:flex;
  opacity:1;
  animation: asInPremium .38s cubic-bezier(.22,.9,.22,1) both;
}

/* Card pasa a ser “contenedor invisible” */
#aliato-stories-css .as-card{
  width: min(900px, 92vw);
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* Tipografías editorial */
#aliato-stories-css h1,
#aliato-stories-css h2{
  color:#fff !important;
  margin: 0 0 10px;
  letter-spacing: -0.03em;
}

#aliato-stories-css h1{
  font-size: clamp(2.3rem, 6vw, 4.2rem) !important;
  line-height: 1.02 !important;
  max-width: 16ch;
}

#aliato-stories-css h2{
  font-size: clamp(2rem, 5.4vw, 3.6rem) !important;
  line-height: 1.05 !important;
  max-width: 18ch;
}

/* Números grandes y protagonistas */
#aliato-stories-css .as-number{
  font-size: clamp(3.6rem, 9vw, 6.2rem) !important;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-top: 14px !important;
  color:#fff;
}
#aliato-stories-css .as-number.green{
  color: var(--green);
  text-shadow: 0 0 18px rgba(29,185,84,.18);
}

/* Texto */
#aliato-stories-css p,
#aliato-stories-css .as-muted{
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 44ch;
  margin: 10px 0 0;
}

/* Labels / badges */
#aliato-stories-css .as-badge{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 850;
  letter-spacing: .10em;
  font-size: .75rem;
  margin-bottom: 14px;
}

#aliato-stories-css .as-eyebrow{
  color: rgba(255,255,255,.78);
  font-weight: 750;
  font-size: 1rem;
  margin-bottom: 8px;
}

/* Pills */
#aliato-stories-css .as-grid{
  display:flex; flex-wrap:wrap;
  gap: 12px;
  margin-top: 18px;
}
#aliato-stories-css .as-pill{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color:#fff;
  font-weight: 750;
  font-size: 1rem;
}

/* Botón */
#aliato-stories-css .as-btn{
  display:inline-block;
  margin-top: 18px;
  background: var(--green);
  color:#041607;
  text-decoration:none;
  font-weight: 900;
  padding: 14px 20px;
  border-radius: 999px;
}

/* Tap zones (click izq/der) */
#aliato-stories-css .as-nav{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  z-index:20;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
#aliato-stories-css .as-nav.left{left:0}
#aliato-stories-css .as-nav.right{right:0}

/* Haptic premium: micro feedback sutil */
@keyframes asTapPremium{
  0%{transform:scale(1)}
  55%{transform:scale(.997)}
  100%{transform:scale(1)}
}
#aliato-stories-css .as-stage:active{
  animation: asTapPremium .16s cubic-bezier(.2,.8,.2,1) both;
}

/* Sheen ultra sutil al tap */
@keyframes asSheen{
  0%{opacity:0}
  35%{opacity:.05}
  100%{opacity:0}
}
#aliato-stories-css .as-nav::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(900px 600px at 50% 50%, rgba(255,255,255,.12), transparent 62%);
}
#aliato-stories-css .as-nav:active::after{animation: asSheen .22s ease-out both;}

/* Fondos (se quedan igual, solo que ahora en full screen) */
#aliato-stories-css .s1{background:
  radial-gradient(1200px 700px at 12% 12%, rgba(29,185,84,.18), transparent 60%),
  radial-gradient(1100px 650px at 88% 14%, rgba(112,82,226,.18), transparent 60%),
  linear-gradient(180deg, #0b0b0b, #070707)}
#aliato-stories-css .s2,
#aliato-stories-css .s3,
#aliato-stories-css .s4,
/* =========================
   Fade-in premium de textos
   ========================= */

/* Estado inicial: textos invisibles */
#aliato-stories-css .as-card > *{
  opacity: 0;
  transform: translateY(8px);
}

/* Animación suave */
@keyframes textFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cuando una story entra (radio activo), animamos el contenido */
#as1:checked ~ .as-stage .s1 .as-card > *,
#as2:checked ~ .as-stage .s2 .as-card > *,
#as3:checked ~ .as-stage .s3 .as-card > *,
#as4:checked ~ .as-stage .s4 .as-card > *,
#as5:checked ~ .as-stage .s5 .as-card > *,
#as6:checked ~ .as-stage .s6 .as-card > *,
#as7:checked ~ .as-stage .s7 .as-card > *,
#as8:checked ~ .as-stage .s8 .as-card > *,
#as9:checked ~ .as-stage .s9 .as-card > *{
  animation: textFadeIn .55s cubic-bezier(.22,.9,.22,1) forwards;
}

/* Escalonado sutil (jerarquía visual) */
#aliato-stories-css .as-card > *:nth-child(1){ animation-delay: .05s; }
#aliato-stories-css .as-card > *:nth-child(2){ animation-delay: .12s; }
#aliato-stories-css .as-card > *:nth-child(3){ animation-delay: .20s; }
#aliato-stories-css .as-card > *:nth-child(4){ animation-delay: .28s; }
#aliato-stories-css .as-card > *:nth-child(5){ animation-delay: .36s; }
#aliato-stories-css .s6{background:
  radial-gradient(1100px 650px at 60% 20%, rgba(255,255,255,.055), transparent 60%),
  linear-gradient(180deg, #0b0b0b, #070707)}
#aliato-stories-css .s5{background:
  radial-gradient(1100px 650px at 20% 20%, rgba(112,82,226,.26), transparent 55%),
  linear-gradient(180deg, #0b0b0b, #06060a)}
#aliato-stories-css .s7{background:
  radial-gradient(1100px 650px at 50% 25%, rgba(29,185,84,.24), transparent 55%),
  linear-gradient(180deg, #0b0b0b, #050805)}
#aliato-stories-css .s8{background:
  radial-gradient(1100px 650px at 10% 20%, rgba(29,185,84,.13), transparent 60%),
  radial-gradient(1100px 650px at 90% 30%, rgba(112,82,226,.13), transparent 60%),
  linear-gradient(180deg, #0b0b0b, #070707)}
#aliato-stories-css .s9{background:
  radial-gradient(1100px 650px at 50% 18%, rgba(29,185,84,.15), transparent 60%),
  linear-gradient(180deg, #0b0b0b, #050505)}
/* ===== Barra de progreso (auto-advance) ===== */
#aliato-stories-css .as-progress{
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}

#aliato-stories-css .as-progress span{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  transform: translateZ(0);
}