/* ============================================================
   estilos.css — DIRECCIÓN VISUAL
   Se carga DESPUÉS de styles.css y sobrescribe las variables de
   marca según html[data-style]. Aquí viven también las reglas del
   modo Diapositivas (html[data-slides="on"]).

   Alberto eligió "HISTORIAL" (s2) + Diapositivas (jul 2026), así que
   este archivo YA NO es provisional: s2 es el estilo de producción.
   Lo que sí es provisional es el selector flotante y las direcciones
   s1/s3, que solo se ven en los dominios de prueba (el guard de
   index.html borra el selector en albertoentrena.com).
   Al limpiar: se pueden fusionar las variables de s2 en styles.css y
   borrar s1/s3 + el selector.
   ============================================================ */

/* ---- Selector flotante (solo en dominios de prueba) ---- */
.styleswitch{
  position:fixed; z-index:200; left:50%; bottom:1rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:.35rem;
  background:#0d1512f2; color:#e8ede9; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid #2a3a33; border-radius:999px; padding:.38rem .5rem .38rem .5rem;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.6);
  font-family:var(--mono),ui-monospace,monospace;
}
.styleswitch__lbl{
  opacity:.62; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  font-size:.58rem; padding:0 .35rem 0 .5rem;
}
.styleswitch button{
  appearance:none; border:0; cursor:pointer; font:inherit; font-size:.76rem; font-weight:600;
  color:#9db3aa; background:transparent; padding:.34rem .72rem; border-radius:999px;
  transition:background .15s ease,color .15s ease; white-space:nowrap;
}
.styleswitch button:hover{color:#fff}
.styleswitch button.on{background:#12a06a; color:#04130c}
.styleswitch button:focus-visible{outline:2px solid #12a06a; outline-offset:2px}
@media(max-width:560px){
  .styleswitch{flex-wrap:wrap; justify-content:center; max-width:calc(100% - 1.4rem); bottom:.7rem}
  .styleswitch__lbl{width:100%; text-align:center; padding:.1rem 0 .15rem}
}
/* El selector va fijo al fondo, así que tapaba el crédito del footer. Se le
   reserva sitio SOLO en los dominios de prueba: en albertoentrena.com el guard
   por hostname lo saca del DOM y --switch-h nunca se fija, así que el respaldo
   de 0px deja el padding original.
   La altura la mide el JS de index.html (mideSelector) porque no es constante:
   al estrechar la ventana el selector se parte en más filas y crece. */
html:not([data-prod]) .foot{
  padding-bottom:calc(3rem + var(--switch-h, 0px) + 1.5rem);
}

/* ===========================================================
   DIRECCIÓN 2 · HISTORIAL  (editorial clínico, azul-teal, nítido)
   =========================================================== */
html[data-style="s2"]{
  --paper:#f4f7f5; --paper-deep:#e8efeb; --surface:#ffffff;
  --pine:#134a52; --pine-lit:#1a6f74; --pine-deep:#0f3b42;
  --emerald:#0e6b7a; --emerald-text:#0b5563; --emerald-lit:#1394a8; --emerald-soft:#d9edf1;
  --sage:#dce9ea; --sage-line:#c2d9db; --line:#d3ddd9;
  --r:4px; --r-sm:3px;
}
/* toque editorial: regla fina bajo los títulos de sección y eyebrows */
html[data-style="s2"] .section-title{padding-bottom:1rem;position:relative}
html[data-style="s2"] .section-title::after{
  content:""; position:absolute; left:50%; bottom:0; width:44px; height:2px;
  transform:translateX(-50%); background:var(--emerald);
}
html[data-style="s2"] .eyebrow{padding-bottom:.55rem; border-bottom:1px solid var(--line)}
html[data-style="s2"] .eyebrow--center{display:inline-flex; border-bottom:0; padding-bottom:0}

/* ===========================================================
   DIRECCIÓN 3 · EN MOVIMIENTO  (verde bosque oscuro, inmersivo)
   =========================================================== */
html[data-style="s3"]{
  --paper:#0e2a20; --paper-deep:#0a2118; --surface:#123a2c;
  --ink:#eaf1ea; --ink-soft:#a7c5b5;
  --pine:#0c3527; --pine-lit:#1c7150; --pine-deep:#07231a;
  --emerald:#15b877; --emerald-text:#7cf0b3; --emerald-lit:#3fd694; --emerald-soft:#123f2e;
  --sage:#173f2f; --sage-line:#2b5a45; --line:#22493a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 40px 70px -22px rgba(0,0,0,.85);
}
html[data-style="s3"] body{
  background:radial-gradient(125% 55% at 82% -8%, #1a4e3a 0%, var(--paper) 55%);
}
/* arreglos puntuales (donde el componente reutiliza --ink/--paper/--pine
   de forma que el volcado de variables no basta) */
html[data-style="s3"] .foot{background:#07211a}
html[data-style="s3"] .quote{color:#eef0ea}
html[data-style="s3"] .lead--muted{color:var(--emerald-text)}
html[data-style="s3"] .chip{color:var(--ink)}
html[data-style="s3"] .chip b{color:var(--emerald-text)}
html[data-style="s3"] .svc__icn{background:var(--emerald-soft); color:var(--emerald-text)}
html[data-style="s3"] .plan__price .n{color:var(--ink)}
html[data-style="s3"] .plan__list li::before{color:var(--emerald-text)}
html[data-style="s3"] .plan--featured{box-shadow:0 0 0 1px var(--emerald), var(--shadow-lg)}
html[data-style="s3"] .brand__badge{box-shadow:0 0 0 1px #ffffff18}
html[data-style="s3"] .btn--ghost{color:var(--emerald-text); border-color:var(--line)}
html[data-style="s3"] .btn--ghost:hover{background:var(--surface); border-color:var(--emerald); color:var(--emerald-text)}
/* .btn--light asume que --emerald-soft es CLARO (lo es en s1 y s2). En s3, que es
   tema oscuro, vale #123f2e y el boton salia oscuro sobre fondo oscuro: 1.14:1. */
html[data-style="s3"] .btn--light{background:var(--emerald-lit); color:var(--pine-deep)}
html[data-style="s3"] .btn--light:hover{background:var(--emerald-text); color:var(--pine-deep)}

/* ===========================================================
   MOVIMIENTO · animación real, SOLO en "En movimiento" (s3)
   Orquestado en torno al motivo de marca: la rampa / progresión.
   =========================================================== */

/* A. Glow ambiental que respira (movimiento visible sin hacer scroll) */
html[data-style="s3"] body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(48% 40% at 82% 6%, #1f6048b3 0%, transparent 62%),
    radial-gradient(46% 40% at 12% 96%, #12514199 0%, transparent 62%);
  animation:mv-breathe 13s ease-in-out infinite;
}
@keyframes mv-breathe{
  0%,100%{opacity:.5; transform:scale(1) translateY(0)}
  50%{opacity:.95; transform:scale(1.09) translateY(-1.5%)}
}

/* B. Apariciones más marcadas (el "se va presentando") */
html[data-style="s3"] .reveal{
  transform:translateY(30px) scale(.985);
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
html[data-style="s3"] .reveal.in{transform:none}

/* C. Las barras de la rampa CRECEN al revelarse su sección */
html[data-style="s3"] .reveal .ramp i{transform:scaleY(0); transform-origin:bottom}
html[data-style="s3"] .reveal.in .ramp i{animation:mv-rise .6s cubic-bezier(.2,.85,.2,1) forwards}
html[data-style="s3"] .reveal.in .ramp i:nth-child(2){animation-delay:.11s}
html[data-style="s3"] .reveal.in .ramp i:nth-child(3){animation-delay:.22s}
@keyframes mv-rise{to{transform:scaleY(1)}}

/* CTA primario: latido sutil de energía */
html[data-style="s3"] .hero__cta .btn:not(.btn--ghost){animation:mv-pulse 3.4s ease-in-out infinite}
@keyframes mv-pulse{
  0%,100%{box-shadow:0 8px 26px -10px var(--emerald)}
  50%{box-shadow:0 10px 34px -8px var(--emerald-lit)}
}

/* D. Raíl de progreso tipo rampa (se llena según bajas) */
.mv-progress{display:none}
html[data-style="s3"] .mv-progress{
  display:flex; position:fixed; right:clamp(.55rem,1.5vw,1.3rem); top:50%;
  transform:translateY(-50%); z-index:150; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; pointer-events:none;
}
html[data-style="s3"] .mv-progress i{
  width:6px; border-radius:3px; background:#ffffff1c;
  transition:background .35s ease, box-shadow .35s ease;
}
html[data-style="s3"] .mv-progress i:nth-child(1){height:15px}
html[data-style="s3"] .mv-progress i:nth-child(2){height:24px}
html[data-style="s3"] .mv-progress i:nth-child(3){height:34px}
html[data-style="s3"] .mv-progress[data-level="1"] i:nth-child(1),
html[data-style="s3"] .mv-progress[data-level="2"] i:nth-child(-n+2),
html[data-style="s3"] .mv-progress[data-level="3"] i{
  background:var(--emerald-lit); box-shadow:0 0 12px -1px var(--emerald)
}

@media (prefers-reduced-motion:reduce){
  html[data-style="s3"] body::before{animation:none}
  html[data-style="s3"] .reveal .ramp i,
  html[data-style="s3"] .reveal.in .ramp i{animation:none; transform:none}
  html[data-style="s3"] .hero__cta .btn{animation:none}
  html[data-style="s3"] .reveal{transform:none; transition:opacity .3s ease}
}

/* ===========================================================
   MODO DIAPOSITIVAS (activable, independiente del color)
   Cada sección ocupa la pantalla y el scroll salta entre ellas.
   Solo en pantallas anchas; en móvil el sitio scrollea normal.
   Se usa "proximity" (no "mandatory") para que las secciones
   largas —FAQ, precios— se puedan leer sin quedar atrapadas.
   =========================================================== */
@media (min-width:820px){
  html[data-slides="on"]{ scroll-snap-type:y proximity; scroll-padding-top:4.5rem; overscroll-behavior:none; }
  html[data-slides="on"] main>section{
    min-height:100dvh; scroll-snap-align:start;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
  }
  html[data-slides="on"] main>section>.wrap{ width:min(1140px,100% - 2.5rem); }
  /* La última diapositiva absorbe el footer: sección + footer = una pantalla exacta.
     El controlador JS fija --slides-foot con la altura real del footer, de modo que
     el fondo del documento coincide con el punto de anclaje y el scroll para en seco. */
  html[data-slides="on"] main>section:last-of-type{
    min-height:calc(100dvh - var(--slides-foot, 0px));
    padding-top:clamp(1.5rem, 4vh, 3rem); padding-bottom:clamp(1.5rem, 4vh, 3rem);
  }
  /* Cuando el controlador JS pilota el scroll (html.slides-ctl), el snap CSS se apaga:
     con "proximity" activo el navegador reajustaba la posición tras cada scrollTo suave
     (scroll-padding-top ≠ offsetTop) y se percibía como un pequeño scroll residual. */
  html[data-slides="on"].slides-ctl{ scroll-snap-type:none; }
  /* pista sutil de "sigue bajando" en cada diapositiva */
  html[data-slides="on"] main>section{ position:relative; }
  html[data-slides="on"] main>section:not(:last-of-type)::after{
    content:""; position:absolute; left:50%; bottom:4rem; width:20px; height:20px;
    margin-left:-10px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
    transform:rotate(45deg); opacity:.35; animation:mv-bob 1.8s ease-in-out infinite;
  }
  @keyframes mv-bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}}
}

/* separador + toggle en el selector */
.styleswitch__sep{ width:1px; align-self:stretch; margin:.15rem .25rem; background:#2a3a33; }
.styleswitch__toggle::before{ content:"▦"; margin-right:.35rem; opacity:.85; }

@media (prefers-reduced-motion:reduce){
  html[data-slides="on"] main>section::after{ animation:none; }
}

/* ===========================================================
   DIAPOSITIVAS · entrada escalonada del contenido al activarse
   la sección (tipo deck). Solo cuando el controlador JS está
   activo (desktop + sin reduced-motion), para no ocultar nada
   a quien no lo tiene.
   =========================================================== */
@media (min-width:820px) and (prefers-reduced-motion:no-preference){
  /* Gate en .slides-ctl (la pone fit() solo cuando el controlador gobierna de
     verdad): si el JS peta o tarda, no se oculta nada y el contenido cae al
     reveal normal por IntersectionObserver. Nunca página en blanco por el deck. */
  html[data-slides="on"].slides-ctl .reveal,
  html[data-slides="on"].slides-ctl .reveal.in{
    opacity:0; transform:translateY(28px);
    transition:opacity .55s ease, transform .72s cubic-bezier(.2,.8,.2,1);
  }
  html[data-slides="on"].slides-ctl section.slide-active .reveal,
  html[data-slides="on"].slides-ctl section.slide-active .reveal.in{
    opacity:1; transform:none;
  }
}