/* ==========================================================================
   Groove Engineer — sistema de diseño
   Paleta tomada de los archivos de marca: violeta #1B0341, lima #E0FF18,
   naranja #EE8F19.
   ========================================================================== */

:root {
  /* Marca */
  --violeta:      #1B0341;
  --violeta-900:  #11012B;
  --violeta-800:  #16023A;
  --violeta-700:  #250750;
  --violeta-600:  #331066;
  --lima:         #E0FF18;
  --naranja:      #EE8F19;

  --tinta:        #FFFFFF;
  --tinta-suave:  #B9AFD4;
  --tinta-tenue:  #7D71A0;
  --linea:        color-mix(in srgb, var(--lima) 18%, transparent);
  --linea-suave:  color-mix(in srgb, var(--tinta) 12%, transparent);

  --exito:        #6EE7A8;
  --error:        #FF7A7A;
  --wa:           #25D366;

  /* Tipografía */
  --display: "Archivo", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Escala fluida */
  --t-xs:  clamp(.72rem, .7rem + .1vw, .78rem);
  --t-sm:  clamp(.85rem, .82rem + .15vw, .92rem);
  --t-md:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --t-lg:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-xl:  clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  --t-3xl: clamp(2.6rem, 1.5rem + 5vw, 5.6rem);

  /* Ritmo */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2.5rem; --sp-5: 4rem;   --sp-6: clamp(4rem, 10vw, 8rem);

  --radio:   4px;
  --radio-g: 12px;
  --ancho:   min(100% - 2.5rem, 74rem);
  --ancho-txt: 42rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--violeta);
  color: var(--tinta);
  font-family: var(--display);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

::selection { background: var(--lima); color: var(--violeta); }

:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

.wrap    { width: var(--ancho); margin-inline: auto; }
.wrap--centrado { max-width: 42rem; text-align: center; }
.wrap--centrado .form { margin-inline: auto; text-align: left; }
.wrap--centrado .seccion-cab .lead { margin-inline: auto; }
.medida  { max-width: var(--ancho-txt); }

/* --- Tipografía ------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.02;
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); font-stretch: 88%; letter-spacing: 0; }
h4 { font-size: var(--t-md); font-stretch: 88%; letter-spacing: 0; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--lima); text-underline-offset: .2em; }

strong { font-weight: 700; color: var(--tinta); }

.kicker {
  margin: 0 0 var(--sp-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lima);
}
.kicker--naranja { color: var(--naranja); }

.lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--tinta-suave);
}

.mono { font-family: var(--mono); }

.suave { color: var(--tinta-suave); }

/* --- Circuitos decorativos -------------------------------------------- */

.circuito {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--lima);
  opacity: .5;
}
.circuito path, .circuito line, .circuito polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.circuito circle { fill: currentColor; stroke: none; }

/* Trazado que se dibuja al entrar en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .circuito polyline, .circuito path {
    stroke-dasharray: var(--largo, 1200);
    stroke-dashoffset: var(--largo, 1200);
    animation: trazar 2.4s ease-out .2s forwards;
  }
  .circuito circle { opacity: 0; animation: aparecer .4s ease-out 2s forwards; }
}
@keyframes trazar   { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }

/* --- Navegación -------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--violeta) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea-suave);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  min-height: 4.6rem;
}
.nav-logo { display: block; text-decoration: none; transition: opacity .15s ease; }
.nav-logo:hover { opacity: .8; }
.nav-logo img { width: 4.6rem; }
.nav-links { display: flex; align-items: center; gap: var(--sp-3); }
.nav-links a {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave); text-decoration: none;
}
.nav-links a:hover { color: var(--tinta); }
.nav-links a.activo { color: var(--lima); }
@media (max-width: 44rem) { .nav-links .oculto-movil { display: none; } }

/* --- Botones ----------------------------------------------------------- */

.btn {
  --btn-bg: var(--lima);
  --btn-fg: var(--violeta);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem;
  border: 1px solid var(--btn-bg);
  border-radius: var(--radio);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--btn-bg) 30%, transparent); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }

.btn--fantasma { --btn-bg: transparent; --btn-fg: var(--tinta); border-color: var(--linea); }
.btn--fantasma:hover { --btn-bg: color-mix(in srgb, var(--lima) 10%, transparent); border-color: var(--lima); }

.btn--naranja { --btn-bg: var(--naranja); --btn-fg: var(--violeta-900); }

.acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --- Secciones --------------------------------------------------------- */

/* Las animaciones laterales de sal corren los bloques fuera del viewport
   mientras entran. Se recorta acá y no en <body> para no tocar el
   comportamiento pegajoso de la cabecera; "clip" no crea contenedor de scroll. */
.seccion {
  position: relative;
  padding: var(--sp-6) 0;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  .seccion { overflow-x: clip; }
}
.seccion--linea { border-top: 1px solid var(--linea-suave); }
.seccion--alt { background: var(--violeta-800); }

.seccion-cab { margin-bottom: var(--sp-4); }

/* --- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) 0 var(--sp-6);
  overflow: hidden;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
  align-items: center;
}
/* Desde tablet ya conviene la foto al costado: a todo el ancho queda más
   alta que la pantalla. Sigue achicándose con el viewport. */
@media (min-width: 44rem) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: var(--sp-4); }
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.25fr .75fr; gap: var(--sp-5); }
}
.hero h1 { margin-bottom: var(--sp-2); }
.hero .lead { margin-bottom: var(--sp-4); max-width: 34rem; }

.hero-marca {
  color: var(--naranja);
  display: block;
}

.hero-foto {
  position: relative;
  border-radius: var(--radio-g);
  overflow: hidden;
  border: 1px solid var(--linea);
}
.hero-foto img { width: 100%; }

/* --- Portada (home) ---------------------------------------------------- */

.hero--portada {
  min-height: 100svh;
  display: grid;
  align-items: center;
  text-align: center;
}

.portada-logo {
  width: min(14.4rem, 44vw);
  margin: 0 auto var(--sp-4);
}

/* Bajada de marca: los dos mundos que el proyecto integra, cada uno con el
   color que le corresponde en la paleta. */
.portada-lema {
  margin: 0 0 .6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  font-weight: 500;
  font-stretch: 88%;
  color: var(--tinta-suave);
}
.lema-arte { color: var(--naranja); font-weight: 700; }

/* El bloque toma el ancho de su línea más larga —el lema— y las otras dos se
   justifican hasta ese ancho, así las tres miden igual. */
.portada-lockup {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--sp-5);
}
.portada-lockup > p {
  text-align: justify;
  text-align-last: justify;
}

.portada-roles {
  margin: 0 0 .5rem;
  font-family: var(--mono);
  font-size: var(--t-sm); font-weight: 500;
  text-transform: uppercase;
  color: var(--lima);
}

.portada-sub {
  margin: .5rem 0 0;
  font-family: var(--mono);
  font-size: var(--t-xs); font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* Justificado necesita una sola línea por renglón: si el lema se parte en
   celular, las tres se centran y listo. */
@media (max-width: 34rem) {
  .portada-lockup { width: auto; }
  .portada-lockup > p { text-align: center; text-align-last: center; }
}

.opciones {
  display: grid;
  gap: var(--sp-3);
  max-width: 52rem;
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 48rem) {
  .opciones { grid-template-columns: 1fr 1fr; align-items: start; }
}

.opcion-col { display: grid; gap: .8rem; }

.opcion {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  height: 100%;
  padding: var(--sp-3);
  background: var(--violeta-800);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-g);
  text-decoration: none;
  color: var(--tinta);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.opcion:hover {
  border-color: var(--lima);
  transform: translateY(-3px);
  background: var(--violeta-700);
}

.opcion--destacada { border-color: color-mix(in srgb, var(--lima) 45%, transparent); }

.opcion-titulo {
  font-size: var(--t-xl); font-weight: 800; font-stretch: 78%;
  line-height: 1.02; text-transform: uppercase;
  text-wrap: balance;
}
.opcion-desc { font-size: var(--t-sm); color: var(--tinta-suave); }

.opcion-cta {
  margin-top: auto; padding-top: .4rem;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--lima);
}
.opcion-cta::after { content: " →"; }

.opcion-pie {
  margin: 0;
  padding: .7rem 0 0;
  border-top: 1px solid var(--linea-suave);
  font-size: var(--t-xs); line-height: 1.6;
  letter-spacing: .04em; color: var(--tinta-tenue);
}

/* --- Datos duros ------------------------------------------------------- */

/* Columnas desiguales: el dato con más texto se lleva el ancho que necesita
   para entrar en un solo renglón. */
.datos {
  display: grid; gap: 1px;
  background: var(--linea-suave);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-g);
  overflow: hidden;
}
/* Mitad y mitad. Por debajo de 60rem no entra el valor más largo en media
   columna, así que van uno arriba del otro a todo el ancho. */
@media (min-width: 60rem) {
  .datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.dato { padding: var(--sp-3); background: var(--violeta); }
.dato dt {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-tenue);
}
.dato dd {
  margin: .3rem 0 0;
  /* Calibrado para que "Warm-up · Main · Sunset · Coffee Rave" —el valor más
     largo— entre en un renglón dentro de media columna, en todo el rango. */
  font-size: clamp(1.05rem, .54rem + 1.67vw, 1.9rem);
  font-weight: 800; font-stretch: 78%;
  line-height: 1.05; color: var(--lima);
  text-wrap: balance;
}
.dato dd small { display: block; font-size: var(--t-sm); font-weight: 400; font-stretch: 100%; color: var(--tinta-suave); margin-top: .35rem; }

/* --- Módulos del temario ----------------------------------------------- */

.clase-cab {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--display);
  font-size: var(--t-xl); font-weight: 800; font-stretch: 78%;
  line-height: 1.05; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--naranja);
}
.clase-cab::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--linea), transparent);
}

.modulos { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.modulo {
  position: relative;
  padding: var(--sp-3);
  background: var(--violeta-800);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-g);
  transition: border-color .2s ease, transform .2s ease;
}
.modulo:hover { border-color: var(--lima); transform: translateY(-3px); }
.modulo-num {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; color: var(--lima);
}
.modulo h3 { margin: .5rem 0 .6rem; }
.modulo p { font-size: var(--t-sm); color: var(--tinta-suave); }

/* --- Listas ------------------------------------------------------------ */

.check { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.check li { position: relative; padding-left: 2rem; color: var(--tinta-suave); }
/* Tilde real: lados corto y largo, girado 45°. */
.check li::before {
  content: "";
  position: absolute; left: .2rem; top: .45em;
  width: .45rem; height: .8rem;
  border: 2px solid var(--lima);
  border-left: 0; border-top: 0;
  transform: rotate(42deg);
}
.check--cruz li::before {
  border: 0; left: 0; width: .8rem; height: .8rem; top: .55em;
  transform: none;
  background:
    linear-gradient(45deg, transparent 44%, var(--tinta-tenue) 44%, var(--tinta-tenue) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--tinta-tenue) 44%, var(--tinta-tenue) 56%, transparent 56%);
}

.dos-columnas { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

/* --- Video ------------------------------------------------------------- */

/* En computadora el video va al lado del texto; en celular, uno debajo del otro. */
.video-fila { display: grid; gap: var(--sp-4); }
@media (min-width: 62rem) {
  .video-fila {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;   /* ambos bloques arrancan arriba, no centrados */
  }
}
.video-col { min-width: 0; }
.video-col h2 { margin-bottom: var(--sp-3); }

.video-caja {
  max-width: 20rem;
  margin-inline: auto;
  border-radius: var(--radio-g);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--violeta-900);
}
.video-caja video { width: 100%; display: block; }

/* --- Precio ------------------------------------------------------------ */

.precio-caja {
  position: relative;
  padding: var(--sp-4);
  border: 1px solid var(--lima);
  border-radius: var(--radio-g);
  background: linear-gradient(160deg, var(--violeta-700), var(--violeta-800));
  overflow: hidden;
}
.precio-monto {
  font-size: var(--t-3xl); font-weight: 800; font-stretch: 78%;
  line-height: 1; color: var(--lima); margin: 0;
}
.precio-monto small {
  display: block; margin-top: .6rem;
  font-size: var(--t-sm); font-weight: 400; font-stretch: 100%;
  text-transform: none; letter-spacing: 0; color: var(--tinta-suave);
}
.precio-senia {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm); color: var(--tinta-suave);
}
.precio-senia b { color: var(--tinta); }

/* --- FAQ --------------------------------------------------------------- */

/* Dos columnas en computadora: la lista queda la mitad de larga y se barre
   de un vistazo. align-items:start evita que abrir una respuesta estire a su
   compañera de fila. */
.faq { display: grid; gap: .6rem; }
@media (min-width: 62rem) {
  .faq {
    grid-template-columns: 1fr 1fr;
    gap: .6rem var(--sp-2);
    align-items: start;
  }
}
.faq details {
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-g);
  background: var(--violeta-800);
  overflow: hidden;
}
.faq details[open] { border-color: var(--linea); }
.faq summary {
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-weight: 700; font-stretch: 88%;
  list-style: none;
  display: flex; align-items: center; gap: var(--sp-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--mono); font-size: 1.3rem; color: var(--lima);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--lima); }
.faq-cuerpo { padding: 0 var(--sp-3) var(--sp-3); color: var(--tinta-suave); font-size: var(--t-sm); }

/* --- Galería ----------------------------------------------------------- */

.galeria {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.galeria img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3/4;
  border-radius: var(--radio);
  border: 1px solid var(--linea-suave);
}
.galeria--ancha img { aspect-ratio: 4/3; }

/* --- Fechas / créditos ------------------------------------------------- */

.pistas { list-style: none; padding: 0; margin: 0; display: grid; }
.pistas li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--linea-suave);
}
.pistas .lugar { font-weight: 700; font-stretch: 88%; }
.pistas .veces {
  margin-left: auto;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--lima);
}

.fichas { display: flex; flex-wrap: wrap; gap: .5rem; }
.ficha {
  padding: .4rem .9rem;
  border: 1px solid var(--linea-suave);
  border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .06em; color: var(--tinta-suave);
}

/* --- Formulario --------------------------------------------------------- */

.form { max-width: 36rem; display: grid; gap: var(--sp-2); }
.campo { display: grid; gap: .4rem; }
.campo label {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
}
.hint { text-transform: none; letter-spacing: 0; color: var(--tinta-tenue); }

.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form select, .form textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--violeta-900);
  color: var(--tinta);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  font: inherit; font-size: var(--t-md);
  transition: border-color .15s ease;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--linea); }
.form .invalido { border-color: var(--error); }

.error { min-height: 1.15em; font-size: var(--t-xs); color: var(--error); font-family: var(--mono); }
.form-error { min-height: 1.3em; color: var(--error); font-size: var(--t-sm); }

.form-nota {
  margin: .3rem 0 0;
  font-size: var(--t-xs); line-height: 1.6;
  color: var(--tinta-tenue);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- WhatsApp flotante --------------------------------------------------- */

.wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--wa); color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 26px rgb(0 0 0 / .45);
  transition: transform .15s ease;
}
.wa:hover { transform: scale(1.08); }

/* --- Pasos (página de gracias) ------------------------------------------ */

.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.paso {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--violeta-800);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-g);
}
.paso-num {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--violeta-600);
  font-family: var(--mono); font-weight: 600;
}
.paso--activo { border-color: var(--lima); }
.paso--activo .paso-num { background: var(--lima); color: var(--violeta); }
.paso--hecho .paso-num { background: var(--exito); color: var(--violeta); }
.paso--pendiente { opacity: .45; }
.paso h3 { margin: .2rem 0 .3rem; }
.paso p { font-size: var(--t-sm); color: var(--tinta-suave); }

/* --- Pie ---------------------------------------------------------------- */

.pie {
  padding: var(--sp-5) 0 var(--sp-4);
  border-top: 1px solid var(--linea-suave);
  background: var(--violeta-900);
}
.pie-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.pie-logo img { width: 4rem; }
.pie a { color: var(--tinta-suave); text-decoration: none; }
.pie a:hover { color: var(--lima); }
.pie-nota {
  margin-top: var(--sp-4); padding-top: var(--sp-2);
  border-top: 1px solid var(--linea-suave);
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--tinta-tenue);
}

/* --- Aparición al hacer scroll ------------------------------------------ */

/* --- Animaciones al hacer scroll (sal.js) ------------------------------- */

/* sal.css deja los elementos en opacity 0 esperando que el JS los revele.
   Si el JS no corre, el contenido tiene que verse igual: esta regla lo
   garantiza y la clase "js" se agrega en el <head>, antes de pintar. */
html:not(.js) [data-sal] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Quien pidió menos movimiento ve todo quieto, sin perderse nada. */
@media (prefers-reduced-motion: reduce) {
  [data-sal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Portada del video -------------------------------------------------- */

.video-portada {
  position: relative;
  display: block;
  width: 100%;
  padding: 0; border: 0; margin: 0;
  background: var(--violeta-900);
  cursor: pointer;
  line-height: 0;
}
.video-portada img { width: 100%; opacity: .92; transition: opacity .2s ease, transform .4s ease; }
.video-portada:hover img { opacity: 1; transform: scale(1.02); }

.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 4.5rem; height: 4.5rem;
  display: grid; place-items: center;
  background: var(--lima); color: var(--violeta);
  border-radius: 50%;
  box-shadow: 0 8px 30px rgb(0 0 0 / .45);
  transition: transform .2s ease;
}
.video-portada:hover .video-play { transform: scale(1.08); }
.video-play svg { margin-left: .18rem; }

.video-dur {
  position: absolute; right: .8rem; bottom: .8rem;
  padding: .25rem .6rem;
  background: color-mix(in srgb, var(--violeta-900) 80%, transparent);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  font-size: var(--t-xs); line-height: 1.6; color: var(--tinta);
}

/* --- Avisos ------------------------------------------------------------- */

.aviso {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  border-radius: var(--radio-g);
  border: 1px solid var(--linea-suave);
  font-size: var(--t-sm);
  color: var(--tinta-suave);
}
.aviso--espera { border-color: var(--naranja); }
.aviso--error  { border-color: var(--error); }
.aviso b { color: var(--tinta); }

/* --- Calendly ----------------------------------------------------------- */

.calendly {
  margin-top: var(--sp-2);
  min-height: 40rem;
  border-radius: var(--radio-g);
  overflow: hidden;
  background: #fff;   /* el widget viene con fondo claro propio */
}

/* --- Producciones propias ----------------------------------------------- */

.producciones {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.produccion {
  overflow: hidden;
  background: var(--violeta-800);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-g);
  transition: border-color .2s ease, transform .2s ease;
}
.produccion:hover { border-color: var(--lima); transform: translateY(-3px); }
.produccion img { width: 100%; display: block; }

.produccion-pie { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.produccion-pie h3 { margin: 0 0 .25rem; font-size: var(--t-md); }
.produccion-pie p  { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); }

/* B10B: la marca del formato al lado de su explicación */
.b10b { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 56rem) {
  .b10b { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--sp-5); }
}

/* Sin recuadro: el logo ya tiene su propia forma cerrada por el anillo. */
/* Centrado cuando va solo; con aire a la derecha y abajo cuando comparte fila
   con el texto, para que no queden pegados. */
.b10b-marca {
  width: 100%; max-width: 11.2rem; display: block;
  margin: 0 auto var(--sp-4);
}
@media (min-width: 56rem) {
  .b10b-marca { margin: 0 var(--sp-5) var(--sp-4) 0; }
}

/* --- Enlaces a redes y recaps ------------------------------------------- */

.social {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color .15s ease;
}
.social:hover { color: var(--lima); }
.social svg { flex: none; }

/* Enlace al recap de una fecha, dentro de la lista de ediciones */
.recap {
  margin-left: auto;
  padding: .3rem .8rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.recap::after { content: " ↗"; }
.recap:hover { background: var(--lima); color: var(--violeta); border-color: var(--lima); }

/* La portada no lleva pie: su enlace a redes va debajo de las tarjetas. */
.portada-social {
  margin: var(--sp-4) 0 0;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
}
.portada-social .social { justify-content: center; }

/* --- Subtítulo de segundo nivel ----------------------------------------- */

/* Dentro de un bloque encabezado por .clase-cab, para no competir con él. */
.sub-cab {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) 0 .7rem;
  font-family: var(--display);
  font-size: var(--t-lg); font-weight: 800; font-stretch: 82%;
  line-height: 1.1; letter-spacing: 0;
  text-transform: uppercase;
  color: var(--lima);
}
.sub-cab::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--linea), transparent);
}

/* --- Video de YouTube --------------------------------------------------- */

.video-yt {
  border-radius: var(--radio-g);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--violeta-900);
}
/* El iframe reemplaza a la portada y hereda su lugar: hay que fijarle alto. */
.video-yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

.social-lista { display: grid; justify-items: start; gap: .5rem; }

/* --- Planes ------------------------------------------------------------- */

.planes {
  display: grid; gap: var(--sp-2);
  align-items: start;
}
@media (min-width: 50rem) {
  .planes { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
}

.plan {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--violeta-800);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-g);
  transition: border-color .2s ease, transform .2s ease;
}
.plan:hover { transform: translateY(-3px); }

.plan--destacado {
  border-color: var(--lima);
  background: linear-gradient(160deg, var(--violeta-700), var(--violeta-800));
}

.plan-sello {
  position: absolute; top: -.75rem; left: var(--sp-3);
  padding: .25rem .8rem;
  background: var(--lima); color: var(--violeta);
  border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}

.plan-nombre {
  margin: 0;
  font-size: var(--t-lg); font-weight: 800; font-stretch: 78%;
  text-transform: uppercase; line-height: 1;
}
.plan-bajada {
  margin: .3rem 0 0;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
}

.plan-precio {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; font-stretch: 78%;
  line-height: 1; color: var(--lima);
}
.plan-moneda {
  margin-left: .3rem;
  font-family: var(--mono);
  font-size: var(--t-sm); font-weight: 500; font-stretch: 100%;
  letter-spacing: .06em; color: var(--tinta-suave);
}
.plan-nota {
  margin-left: .6rem;
  font-family: var(--mono);
  font-size: var(--t-xs); font-weight: 400; font-stretch: 100%;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue);
  white-space: nowrap;
}

.plan-puntos { margin-bottom: var(--sp-3); }
.plan-puntos li { font-size: var(--t-sm); }

.plan-senia {
  margin: auto 0 var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--t-sm); color: var(--tinta-suave);
}
.plan-senia b { color: var(--tinta); }

.plan-btn { align-self: flex-start; }

/* Marca brevemente el selector cuando se elige un plan desde su tarjeta. */
.form select.resaltado {
  border-color: var(--lima);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lima) 22%, transparent);
}

/* Detalle bajo un campo, para lo que no entra en su etiqueta. */
.campo-nota {
  margin: .1rem 0 0;
  font-size: var(--t-xs); line-height: 1.5;
  color: var(--tinta-tenue);
}
.campo-nota:empty { display: none; }

/* --- Recaps de B10B ------------------------------------------------------ */

.recaps {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* Los reels son verticales y entran más angostos. */
.recaps--verticales { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 46rem) {
  .recaps--dos { grid-template-columns: 1fr 1fr; }
}

.recap-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--violeta-800);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-g);
  transition: border-color .2s ease, transform .2s ease;
}
.recap-card:hover { border-color: var(--lima); transform: translateY(-3px); }

/* Cada familia mantiene su forma: los recaps de YouTube en 16:9, los reels
   verticales en 9:16, que es como fueron grabados. */
.recap-card .video-portada img { width: 100%; height: 100%; object-fit: cover; }
.recap-card .video-play { width: 3.2rem; height: 3.2rem; }

.recap-card--ancha .video-portada,
.recap-card--ancha iframe { aspect-ratio: 16 / 9; }

.recap-card--vertical .video-portada { aspect-ratio: 9 / 16; }


.recap-card iframe { width: 100%; border: 0; display: block; }

.recap-cuerpo { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.recap-cuerpo h3 { margin: 0 0 .2rem; font-size: var(--t-md); color: var(--lima); }
.recap-lugar {
  margin: 0 0 .5rem !important;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .06em; color: var(--tinta-tenue);
}
.recap-cuerpo p  { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); }

.recap-links {
  margin-top: auto !important; padding-top: var(--sp-2);
  font-family: var(--mono); font-size: var(--t-xs);
}
.recap-links a { text-decoration: none; }
.recap-links a:hover { text-decoration: underline; }

/* Sello sobre la portada: avisa que el recap se abre fuera del sitio. */
.video-sello {
  position: absolute; left: .6rem; bottom: .6rem;
  padding: .22rem .6rem;
  background: color-mix(in srgb, var(--violeta-900) 82%, transparent);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  font-size: var(--t-xs); line-height: 1.6;
  letter-spacing: .04em; color: var(--tinta);
}

/* --- Separador de circuito entre secciones ------------------------------- */

.separador {
  width: 100%;
  height: clamp(3rem, 7vw, 5.5rem);
  color: var(--lima);
  opacity: .55;
  overflow: hidden;
}
.separador svg { width: 100%; height: 100%; display: block; }
.separador polyline { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.separador circle  { fill: currentColor; }

/* Quieto hasta que la sección entra en pantalla: sal.js agrega .sal-animate
   y recién ahí se dibuja el trazo. */
@media (prefers-reduced-motion: no-preference) {
  .js .separador polyline {
    stroke-dasharray: var(--largo, 1200);
    stroke-dashoffset: var(--largo, 1200);
  }
  .js .separador circle { opacity: 0; }

  .js .separador.sal-animate polyline {
    animation: trazar 1.6s ease-out var(--demora, 0s) forwards;
  }
  .js .separador.sal-animate circle {
    animation: aparecer .4s ease-out var(--demora, 0s) forwards;
  }
}

/* Ficha que además es enlace: a un perfil, a una cuenta. */
.ficha--link {
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.ficha--link::after { content: " ↗"; opacity: .6; }
.ficha--link:hover { border-color: var(--lima); color: var(--lima); }

/* --- Hero compacto -------------------------------------------------------
   En la página de gracias lo importante son los pasos, no el saludo: el
   encabezado ocupa menos para que la secuencia entre sin scrollear. */
.hero--compacto { padding-top: var(--sp-4); padding-bottom: var(--sp-3); }
.hero--compacto h1 { margin-bottom: .35rem; }
.hero--compacto .lead { margin-bottom: 0; }