/* ════════════════════════════════════════════════════════
   Jon Arenas — hoja de estilos única
   Paleta y tipografía del sistema de marca Motink.
   Todo sale de las variables de :root.
   ════════════════════════════════════════════════════════ */

:root{
  /* ── Paleta Motink ── */
  --negro:        #0E0E0E;   /* fondo de bloques fuertes */
  --negro-2:      #1C1A17;   /* tarjetas sobre negro */
  --crema:        #F3EFE9;   /* fondo de lectura */
  --crema-2:      #EBE4DA;   /* chips y superficies sobre crema */
  --blush:        #E4C5BC;   /* bloque cálido */
  --blush-linea:  #D3ADA3;
  --blush-texto:  #5A4A45;
  --gris:         #56504A;   /* texto secundario sobre claro */
  --gris-claro:   #C2BAB1;   /* texto secundario sobre negro */
  --gris-tenue:   #8A827B;   /* solo para notas legales y pies */
  --linea-clara:  #DED6CC;
  --linea-oscura: #3A3630;
  --amarillo:     #FFDB01;   /* la oferta y los botones. Nada más compite */
  --amarillo-osc: #E6C400;
  --whatsapp:     #25D366;   /* el verde oficial: el botón se reconoce solo */

  /* ── Contexto por defecto: sobre negro ──
     Cada sección puede redefinir estas cuatro y todo se recolorea solo. */
  --texto:      var(--crema);
  --texto-2:    var(--gris-claro);
  --superficie: var(--negro-2);
  --linea:      var(--linea-oscura);

  /* Grano: un SVG de ruido, sin imagen que descargar */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ── Tipografía ── */
  --fuente:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Fraunces", Georgia, "Times New Roman", serif;

  /* ── Medidas ── */
  --ancho: 1200px;
  --ancho-estrecho: 780px;
  --gutter: 20px;
  --radio: 3px;
  --nav-h: 76px;
  --marquesina-h: 56px;
}

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

/* El atributo hidden lo pisa cualquier regla que ponga display (a .alta le
   toca display:grid), y el formulario seguía a la vista bajo el mensaje de
   gracias. Con esto, hidden vuelve a significar oculto. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }

body{
  margin:0;
  font-family:var(--fuente);
  font-size:17px;
  line-height:1.6;
  color:var(--texto);
  background:var(--negro);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grano sobre toda la página. Fija, para que no se mueva al bajar. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999;
  pointer-events:none; opacity:.085;
  background-image:var(--grano);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{ margin:0 0 .5em; line-height:1.08; letter-spacing:-.025em; font-weight:700; }
h1{ font-size:clamp(2.2rem, 4.6vw, 3.5rem); text-wrap:balance; }
h2{ font-size:clamp(1.8rem, 3.6vw, 2.7rem); text-wrap:balance; }
h3{ font-size:1.16rem; letter-spacing:-.015em; }
p{ margin:0 0 1em; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--amarillo); color:var(--negro); padding:12px 18px; font-weight:700;
}
.skip:focus{ left:8px; top:8px; }

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

/* La palabra clave va en serif cursiva. Es la marca de la casa. */
.sub{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.005em;
}

/* ── Contenedores ───────────────────────────────────── */
.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.contenedor--estrecho{ max-width:var(--ancho-estrecho); }

.seccion{ padding-block:clamp(72px, 9vw, 130px); background:var(--negro); color:var(--texto); }

/* Sobre crema solo cambian las cuatro variables de contexto */
.seccion--crema{
  --texto:      var(--negro);
  --texto-2:    var(--gris);
  --superficie: #FFFFFF;
  --linea:      var(--linea-clara);
  background:var(--crema);
}

.seccion__head{ max-width:820px; margin:0 auto 60px; text-align:center; }
.seccion__sub{ color:var(--texto-2); font-size:1.05rem; max-width:62ch; margin-inline:auto; }
/* Cuando va suelto, fuera de la cabecera de sección, necesita su aire. */
.seccion__sub--suelto{ margin-bottom:38px; text-align:center; }

.eyebrow{
  font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amarillo); margin-bottom:16px;
}
/* Sobre crema el amarillo no se lee: ahí va negro. */
.seccion--crema .eyebrow,
.cita .eyebrow{ color:var(--negro); }

.lead{ font-size:1.02rem; color:var(--texto-2); max-width:52ch; }
.centrado{ text-align:center; margin-top:56px; }

/* Titular tipo cartel, con una parte sobre amarillo */
.display{
  font-size:clamp(2.4rem, 7vw, 5rem); font-weight:800; line-height:.98;
  letter-spacing:-.04em; text-transform:uppercase; text-align:center;
  margin:0 0 .35em;
}
.display em{ font-style:normal; background:var(--amarillo); color:var(--negro); padding:0 .16em; }
.display .apagado{ color:var(--texto-2); }

/* ── Botones ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; border-radius:40px;
  background:var(--amarillo); color:var(--negro); border:1.5px solid var(--amarillo);
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease;
}
.btn:hover{ background:var(--amarillo-osc); border-color:var(--amarillo-osc); transform:translateY(-2px); }
.btn--lg{ padding:19px 42px; font-size:1.02rem; }
.btn--linea{ background:transparent; border-color:var(--texto); color:var(--texto); }
.btn--linea:hover{ background:var(--texto); border-color:var(--texto); color:var(--crema); }

/* ── Navegación ─────────────────────────────────────── */
.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:100;
  background:rgba(14,14,14,0); transition:background-color .25s ease;
}
.nav.is-scroll{ background:rgba(14,14,14,.96); }
.nav__inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--nav-h); gap:20px; }
.nav__lado{ display:flex; gap:34px; }
.nav__lado--der{ justify-content:flex-end; }
.nav__lado a{
  text-decoration:none; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--crema);
  transition:color .16s ease;
}
.nav__lado a:hover{ color:var(--amarillo); }

.marca{
  font-weight:700; letter-spacing:.28em; font-size:1rem; text-transform:uppercase;
  text-decoration:none; text-align:center; white-space:nowrap; color:var(--crema);
}

.hamburguesa{
  display:none; width:42px; height:42px; justify-self:end;
  background:none; border:1px solid var(--linea-oscura); border-radius:var(--radio);
  flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer;
}
.hamburguesa span{ display:block; width:18px; height:2px; background:var(--crema); transition:.2s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu-movil{ display:none; }

/* ── Portada ────────────────────────────────────────── */
.hero{
  /* Ocupa la pantalla entera menos la marquesina, que queda justo debajo:
     sin bajar, se ve la portada completa y nada más. svh en vez de vh
     porque en el móvil vh se cuela por detrás de las barras del navegador. */
  position:relative; min-height:calc(100svh - var(--marquesina-h));
  display:flex; align-items:center;
  margin-top:calc(var(--nav-h) * -1); padding:calc(var(--nav-h) + 40px) 0 56px;
  background:var(--negro); overflow:hidden;
}
/* Foto a sangre: la cara queda a la derecha y el hueco de la izquierda
   es donde cae el texto. */
.hero__media{ position:absolute; inset:0; margin:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:76% 34%;
  filter:grayscale(1) contrast(1.16) brightness(.74);
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(95deg,
    rgba(14,14,14,.97) 0%, rgba(14,14,14,.95) 16%, rgba(14,14,14,.88) 28%,
    rgba(14,14,14,.76) 38%, rgba(14,14,14,.6) 48%, rgba(14,14,14,.44) 58%,
    rgba(14,14,14,.26) 70%, rgba(14,14,14,.15) 84%, rgba(14,14,14,.24) 100%);
}
.hero__media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(76% 62% at 60% 36%, rgba(255,255,255,.075), transparent 72%),
    linear-gradient(to bottom,
    var(--negro) 0%, rgba(14,14,14,.55) 9%, transparent 22%,
    transparent 74%, rgba(14,14,14,.6) 91%, var(--negro) 100%);
}
/* Grano extra sobre la portada: le da cuerpo al fondo y disimula las bandas
   que salen al degradar negros. Va sobre la foto y bajo el texto. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grano); opacity:.14;
}
.hero__inner{ position:relative; z-index:2; }
.hero__texto{ max-width:560px; }
.hero h1{ margin-bottom:.55em; }
.hero .btn{ margin-top:26px; }

/* ── Marquesina ─────────────────────────────────────── */
.marquesina{
  --hueco:clamp(28px, 3.4vw, 56px);   /* separación entre palabra y punto */
  background:var(--amarillo); color:var(--negro); overflow:hidden;
  height:var(--marquesina-h); display:flex; align-items:center;
  font-size:.92rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.marquesina__pista{
  display:flex; gap:var(--hueco); width:max-content;
  animation:desfile 42s linear infinite;
}
.marquesina__grupo{
  display:flex; align-items:center; gap:var(--hueco);
  list-style:none; margin:0; padding:0;
}
/* El punto es un elemento más de la fila, así queda centrado entre las dos
   palabras en vez de pegado a una de ellas. */
.marquesina__grupo li{ display:flex; align-items:center; gap:var(--hueco); white-space:nowrap; }
.marquesina__grupo li::after{ content:"·"; opacity:.5; }
@keyframes desfile{ to{ transform:translateX(-50%); } }

/* ── Marcas propias ─────────────────────────────────── */
.logos{
  list-style:none; margin:0 0 76px; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(34px, 5.5vw, 80px);
}
.logos li{ display:flex; flex-direction:column; align-items:center; gap:6px; }

/* Marcas sin logotipo todavía: se componen como si lo fueran */
.logos__texto{
  font-weight:700; font-size:clamp(1rem, 1.4vw, 1.18rem);
  letter-spacing:.02em; white-space:nowrap;
}

/* Alturas por logotipo: igualadas a ojo, no por píxeles.
   Un logotipo apilado necesita más alto que uno de una sola línea. */
.logos img{ width:auto; }
.logo-kimikimi{ height:clamp(34px, 3.8vw, 46px); }
.logo-jarenas { height:clamp(46px, 4.8vw, 60px); }
.logo-motink  { height:clamp(28px, 3vw, 37px); }
.logo-academy { height:clamp(32px, 3.4vw, 42px); }

/* El rótulo de las ciudades va fuera del flujo: si no, estira su marca y
   los logotipos dejan de alinearse entre sí. */
.logos__sede{ position:relative; }
.logos__sede span{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-2); white-space:nowrap;
}

/* ── Cifras ─────────────────────────────────────────── */
.cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center; }
.cifra{ display:flex; flex-direction:column; gap:6px; }
.cifra__num{
  font-size:clamp(2.6rem, 5.4vw, 4rem); font-weight:700; line-height:.95;
  letter-spacing:-.04em; color:var(--amarillo); font-variant-numeric:tabular-nums;
}
.seccion--crema .cifra__num{ color:var(--negro); }
.cifra__txt{ font-size:.9rem; color:var(--texto-2); }

/* ── Galería de trabajos ────────────────────────────── */
/* Cuadrículas de cuadrados iguales. El auto-fit reparte las piezas que
   haya: cuatro caben en una fila y a partir de ahí va bajando solo. */
.galeria{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.galeria img{
  width:100%; height:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radio); background:var(--negro-2);
}

/* ── Tarjetas de servicio ───────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.card{
  padding:34px 30px 30px; background:var(--superficie);
  border:1px solid var(--linea); border-radius:var(--radio);
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--amarillo); transform:translateY(-3px); }
.card__n{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.2em;
  color:var(--texto-2); margin-bottom:14px; font-variant-numeric:tabular-nums;
}
.card p{ color:var(--texto-2); font-size:.97rem; }

.lista{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:9px; }
.lista li{ position:relative; padding-left:22px; font-size:.97rem; color:var(--texto-2); }
.lista li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:7px; height:7px; background:var(--texto-2);
}
.lista--check li::before{ background:var(--amarillo); }
.seccion--crema .lista--check li::before{ background:var(--negro); }
.lista--cross li::before{ background:var(--texto-2); opacity:.45; }

/* ── Cita ───────────────────────────────────────────── */
.cita{
  --texto:      var(--negro);
  --texto-2:    var(--blush-texto);
  background:var(--blush); color:var(--texto);
  padding-block:clamp(52px, 6vw, 84px);
}
.cita__inner{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px, 4vw, 60px); align-items:center; }
.cita__foto{ margin:0; width:clamp(200px, 22vw, 300px); }
.cita__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.cita__comillas{ font-family:var(--serif); font-style:italic; font-size:3.4rem; line-height:.6; margin:0 0 .25em; }
.cita blockquote{
  margin:0 0 26px; font-size:clamp(1.3rem, 2.5vw, 1.95rem); line-height:1.24;
  font-weight:700; letter-spacing:-.025em; text-wrap:balance;
}
.cita__quien{ font-size:1.2rem; font-weight:700; margin:0 0 4px; }
.cita__rol{ font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-2); margin:0; }

/* ── Mi historia ────────────────────────────────────── */
.historia{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px, 4.5vw, 64px); align-items:center; }
.historia__foto{ margin:0; }
.historia__foto img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radio); }
.historia__texto h3{ font-size:clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom:.7em; }
.historia__texto p{ color:var(--texto-2); }
.destacado{ color:var(--texto) !important; font-weight:700; margin-top:1.6em; }

/* ── Datos de la clase ──────────────────────────────── */
/* Fecha, hora, formato y precio juntos: son los cuatro datos que
   convierten "déjame tu correo" en "reservo mi plaza". */
.datos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin:0 0 34px; background:var(--linea-oscura);
  border:1px solid var(--linea-oscura); border-radius:var(--radio); overflow:hidden;
}
.datos > div{ background:var(--negro-2); padding:18px 12px; }
.datos dt{
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amarillo); margin-bottom:7px;
}
.datos dd{ margin:0; font-weight:700; font-size:1.04rem; color:#fff; }

/* Línea de datos bajo cada botón: repetirla es lo que hace que la
   clase se recuerde sin tener que volver arriba. */
.cta__datos{
  margin:14px 0 0; font-size:.82rem; font-weight:600;
  letter-spacing:.04em; color:var(--texto-2);
}

/* ── Golpes cortos ──────────────────────────────────── */
/* Frases de una línea, en el tono en que lo piensa el lector. */
.golpes{
  font-size:clamp(1.1rem, 2vw, 1.4rem); font-weight:600; line-height:1.55;
  color:var(--texto-2); margin:0 0 20px;
  padding-left:clamp(18px, 2.4vw, 30px); border-left:4px solid var(--amarillo);
}
/* El remate no es una frase más: es el golpe. Va en grande y en negro. */
.golpes--remate{
  font-size:clamp(1.6rem, 3.4vw, 2.4rem); font-weight:800; line-height:1.15;
  letter-spacing:-.025em; color:var(--texto); margin-bottom:48px;
}
.subtitulo{ font-size:1.15rem; margin:0 0 4px; }

/* ── Pasos ──────────────────────────────────────────── */
.pasos{ list-style:none; margin:0 0 72px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pasos--tres{ grid-template-columns:repeat(3,1fr); margin-bottom:0; }
.paso{ padding:30px 26px; border:1px solid var(--linea); border-radius:var(--radio); background:var(--superficie); }
.paso__n{
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:18px;
  border-radius:50%; background:var(--amarillo); color:var(--negro); font-weight:700;
}
.paso p{ color:var(--texto-2); font-size:.93rem; margin:0; }

/* ── Encajamos / no encajamos ───────────────────────── */
.paraquien{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.panel{ padding:34px 30px; border-radius:var(--radio); border:1px solid var(--linea); background:var(--superficie); }
.panel h3{ margin-bottom:18px; }

/* ── Opiniones ──────────────────────────────────────── */
/* Auto-fit: sirve igual para uno, dos o tres testimonios. Se irán
   añadiendo a medida que los alumnos den su permiso. */
.testimonios{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  max-width:1000px; margin-inline:auto;
}
/* Mientras solo haya uno, que no se estire a lo ancho: una línea de texto
   de 1000px no se lee. En cuanto entren más, la rejilla vuelve a mandar. */
.testi:only-child{ max-width:520px; margin-inline:auto; }
.testi{
  margin:0; padding:28px 26px; background:var(--crema); color:var(--negro);
  border-radius:var(--radio); display:flex; flex-direction:column; gap:18px;
}
.estrellas{ display:flex; gap:3px; }
.estrellas span{ width:18px; height:18px; background:var(--amarillo); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.testi blockquote{ margin:0; font-size:.95rem; color:var(--gris); line-height:1.55; }
.testi blockquote strong{ display:block; color:var(--negro); font-size:1.02rem; margin-bottom:8px; }
.testi figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.avatar{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:50%; background:var(--amarillo); color:var(--negro); font-weight:700;
}
/* Si hay foto ocupa el sitio del círculo. Una cara real convierte más
   que una inicial, pero no todos quieren salir. */
.testi__foto{
  width:44px; height:44px; flex:0 0 44px; margin:0;
  border-radius:50%; overflow:hidden;
}
.testi__foto img{ width:100%; height:100%; object-fit:cover; }
.testi figcaption strong{ display:block; font-size:.95rem; }
.testi__meta{ font-size:.82rem; color:var(--gris); }

/* ── Preguntas ──────────────────────────────────────── */
.faq{ display:grid; gap:10px; }
.faq details{ border:1px solid var(--linea); border-radius:var(--radio); background:var(--superficie); padding:2px 22px; }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 0;
  font-weight:700; font-size:1.02rem; display:flex; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:400; font-size:1.6rem; line-height:1; transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 18px; color:var(--texto-2); font-size:.96rem; }

/* ── Cierre ─────────────────────────────────────────── */
.cta{ padding-block:clamp(72px, 9vw, 120px); background:var(--negro); text-align:center; }
.cta__inner p:not(.eyebrow){ color:var(--texto-2); font-size:1.05rem; margin-bottom:32px; }

/* ── Formulario de alta ─────────────────────────────── */
.alta{ display:grid; gap:18px; text-align:left; margin-top:8px; }
.alta__fila{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.campo{ display:grid; gap:7px; }
.campo label{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-claro);
}
.campo .opcional{ letter-spacing:0; text-transform:none; font-weight:400; }
.campo input{
  font-family:inherit; font-size:1rem; color:var(--negro);
  background:var(--crema); border:1.5px solid var(--crema); border-radius:var(--radio);
  padding:14px 16px; width:100%;
}
.campo input::placeholder{ color:#9A928A; }
.campo input:focus-visible{ border-color:var(--amarillo); outline:none; }

.acepto{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--gris-claro); }
.acepto input{ margin-top:.28em; accent-color:var(--amarillo); width:16px; height:16px; flex:none; }
.acepto a{ color:var(--crema); }

.alta .btn{ justify-self:start; }
.alta__nota{ font-size:.8rem; color:var(--gris-tenue); margin:0; }
/* Aviso de que el alta no ha entrado. Tiene que verse: alguien que cree
   estar apuntado y no lo está es peor que un error a la vista. */
.alta__error{
  margin:0; padding:14px 16px; font-size:.92rem; font-weight:600;
  color:#FFD7D0; background:rgba(180,50,35,.22);
  border:1px solid rgba(220,90,70,.55); border-radius:var(--radio);
}

.alta__gracias{
  text-align:left; border:1px solid var(--linea-oscura); border-radius:var(--radio);
  padding:30px 28px; margin-top:8px;
}
.alta__gracias h3{ margin-bottom:.5em; }
.alta__gracias p{ color:var(--gris-claro); }

@media (max-width:620px){
  .alta__fila{ grid-template-columns:1fr; }
  .alta .btn{ justify-self:stretch; }
}

/* ── Páginas legales ────────────────────────────────── */
/* Texto largo y sobrio: aquí nadie viene a que le vendan nada. */
.legal{
  --texto:      var(--negro);
  --texto-2:    var(--gris);
  --superficie: var(--crema-2);
  --linea:      var(--linea-clara);
  background:var(--crema); color:var(--texto);
  padding-block:clamp(44px, 5vw, 72px);
}
.legal h1{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom:.3em; }
.legal__fecha{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--texto-2); margin-bottom:44px;
}
.legal h2{
  font-size:1.2rem; margin:44px 0 .6em;
  padding-top:22px; border-top:1px solid var(--linea);
}
.legal h3{ font-size:1rem; margin:26px 0 .5em; }
.legal p, .legal li{ color:var(--texto-2); font-size:.97rem; }
.legal a{ color:var(--negro); }
.legal ul{ margin:0 0 1em; padding-left:20px; }
.legal li{ margin-bottom:.4em; }
.legal table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.92rem; }
.legal th, .legal td{
  text-align:left; padding:10px 12px; border:1px solid var(--linea);
  vertical-align:top; color:var(--texto-2);
}
.legal th{ background:var(--superficie); color:var(--texto); font-weight:700; }

/* ── Pie ────────────────────────────────────────────── */
.pie{ position:relative; overflow:hidden; background:var(--negro); color:var(--crema); padding:72px 0 28px; }
.pie__inner{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:44px; justify-content:space-between; }
.pie__reclamo{ max-width:460px; }
.pie__reclamo h2{ font-size:clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom:28px; }
.pie__nav{ display:flex; flex-direction:column; gap:11px; }
.pie__nav a{ text-decoration:none; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gris-claro); }
.pie__nav a:hover{ color:var(--crema); }
.pie__legal{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin-top:52px; padding-top:22px; border-top:1px solid var(--linea-oscura);
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-tenue);
}
.pie__legal p{ margin:0; }

/* Marca a pincel */
.pie__pincel{
  position:absolute; right:-1%; bottom:62px;
  width:min(600px, 50%); height:auto;
  color:var(--crema); opacity:.1; pointer-events:none;
}
.pie__pincel text{ font-family:"Permanent Marker", var(--fuente), cursive; }
.pie__pincel-1{ font-size:150px; }
.pie__pincel-2{ font-size:104px; }

/* ── WhatsApp flotante ──────────────────────────────── */
.wa-flotante{
  position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:var(--whatsapp); display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  transition:transform .18s ease;
}
.wa-flotante:hover{ transform:scale(1.07); }
.wa-flotante svg{ width:28px; height:28px; fill:#FFFFFF; }

/* ── Animación de entrada ───────────────────────────── */
/* Por defecto visible. Solo se esconde si el JS ha podido marcar .anima. */
.revelar{ transition:opacity .55s ease, transform .55s ease; }
.anima .revelar{ opacity:0; transform:translateY(18px); }
.anima .revelar.visible{ opacity:1; transform:none; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:1000px){
  .hero{ min-height:0; padding-bottom:56px; flex-direction:column; align-items:stretch; }
  .hero__media{ position:relative; inset:auto; width:100%; max-width:480px; margin:36px auto 0; }
  .hero__media img{ aspect-ratio:4/3; object-position:74% 34%; }
  .hero__media::after{ background:linear-gradient(to top, rgba(14,14,14,.55), transparent 45%); }
  .hero__inner{ order:-1; }
  .hero__texto{ max-width:none; }

  .galeria{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .historia{ grid-template-columns:1fr; }
  .historia__foto{ max-width:380px; margin-inline:auto; }
  .pasos{ grid-template-columns:repeat(2,1fr); }
  .pasos--tres{ grid-template-columns:1fr; }
  .datos{ grid-template-columns:repeat(2,1fr); }
  .testimonios{ grid-template-columns:1fr; }
  .cifras{ grid-template-columns:repeat(2,1fr); gap:34px 24px; }
  .cita__inner{ grid-template-columns:1fr; }
  .cita__foto{ width:min(260px, 60%); }
}

@media (max-width:760px){
  .nav__inner{ grid-template-columns:1fr auto; }
  .nav__lado{ display:none; }
  .marca{ text-align:left; }
  .hamburguesa{ display:flex; }

  .menu-movil{
    display:flex; flex-direction:column;
    position:fixed; inset:var(--nav-h) 0 auto 0;
    background:var(--negro); border-bottom:1px solid var(--linea-oscura);
    padding:8px var(--gutter) 20px;
    transform:translateY(-120%); transition:transform .25s ease;
  }
  .menu-movil.abierto{ transform:none; }
  .menu-movil a{
    padding:15px 0; border-bottom:1px solid var(--linea-oscura); text-decoration:none;
    font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  }

  .cards{ grid-template-columns:1fr; }
  .pasos{ grid-template-columns:1fr; }
  .paraquien{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .nav .btn, .pie .btn{ width:auto; }
  .pie__inner{ flex-direction:column; gap:30px; }
  .pie__pincel{ width:78%; right:-8%; bottom:auto; top:8px; opacity:.08; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .anima .revelar{ opacity:1; transform:none; }
  .marquesina__pista{ animation:none; }
}

/* ════════════════════════════════════════════════════════
   Página de captación (empezar.html)
   Sin menú ni enlaces que distraigan: solo la oferta,
   el formulario y quién te lo cuenta.
   ════════════════════════════════════════════════════════ */

.cap-barra{ position:relative; z-index:2; padding:26px 0; }

.cap-hero{
  position:relative; overflow:hidden;
  margin-top:-84px; padding:calc(84px + 64px) 0 clamp(56px, 7vw, 96px);
  background:var(--negro);
}
.cap-hero__fondo{ position:absolute; inset:0; }
.cap-hero__fondo img{
  width:100%; height:100%; object-fit:cover; object-position:70% 26%;
  filter:grayscale(1) contrast(1.22) brightness(.52);
}
.cap-hero__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(14,14,14,.74) 38%, rgba(14,14,14,.95) 78%),
    linear-gradient(to bottom, var(--negro) 0%, transparent 18%, transparent 80%, var(--negro) 100%);
}
.cap-hero__inner{ position:relative; z-index:2; text-align:center; }
.cap-hero h1{ font-size:clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom:.4em; }
.cap-sub{ color:var(--crema); opacity:.88; font-size:1.06rem; margin-bottom:34px; }

.cap-puntos{
  list-style:none; margin:0 0 38px; padding:0;
  display:grid; gap:14px; text-align:left;
}
.cap-puntos li{ position:relative; padding-left:32px; font-size:.98rem; color:var(--gris-claro); }
.cap-puntos strong{ color:var(--crema); }
/* Marca de verificación dibujada, para no depender de un icono */
.cap-puntos li::before{
  content:""; position:absolute; left:4px; top:.34em;
  width:13px; height:8px; border-left:2.5px solid var(--amarillo); border-bottom:2.5px solid var(--amarillo);
  transform:rotate(-45deg);
}

/* El formulario aquí va centrado y a todo el ancho de la columna */
.cap-hero .alta{ text-align:left; }
.cap-hero .alta .btn{ justify-self:stretch; }
.cap-hero .alta__nota{ text-align:center; }

/* ── Quién te enseña ────────────────────────────────── */
.cap-bio{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px, 4vw, 56px); align-items:center; }
.cap-bio__foto{ margin:0; width:clamp(190px, 22vw, 280px); }
.cap-bio__foto img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radio); }
.cap-bio h2{ margin-bottom:.1em; }
.cap-bio__rol{
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amarillo); margin-bottom:1.2em;
}
.cap-bio p{ color:var(--gris-claro); }
.cap-bio .btn{ margin-top:10px; }

/* ── Pie ────────────────────────────────────────────── */
.cap-pie{ background:var(--negro); border-top:1px solid var(--linea-oscura); padding:26px 0 30px; }
.cap-pie__inner{
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris);
}
.cap-pie__inner p{ margin:0; }

@media (max-width:760px){
  .cap-bio{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .cap-bio__foto{ width:min(240px, 65%); }
  .cap-puntos li{ font-size:.94rem; }
}