/* ============================================================
   Yoga y crecimiento: viaje al interior
   Hoja de estilos principal (todo lo que queda por debajo del
   primer pantallazo; el CSS crítico va en línea en cada HTML).
   Orden: utilidades > secciones > formulario > pie > páginas sueltas
   ============================================================ */

:root{
  /* --- canales base: permiten variantes con alfa sin repetir el color --- */
  --rgb-crema:247 240 230;
  --rgb-salvia:150 130 104;
  --rgb-oscuro:38 31 24;
  --rgb-acento:196 164 101;
  --rgb-tinta:51 40 31;

  /* --- paleta --- */
  --crema:#F7F0E6; --arena:#EDE0CE; --salvia:#8E8069; --salvia-oscuro:#3C332A;
  --tinta:#33281F; --tinta-suave:#6A5B4B;
  --acento:#C4A465; --acento-hover:#D3B57C; --acento-texto:#2A231A;
  /* El acento cumple tres papeles y no puede ser el mismo color en los tres:
     --acento    relleno del boton
     --enlace    el acento como TINTA sobre fondo claro (enlaces, bordes,
                 anillos de foco): el dorado de relleno ahi no se leeria
     --hero-foco anillo de foco dentro del hero, que va sobre fondo oscuro */
  --enlace:#7E6026; --foco:#7E6026; --hero-foco:#D9BE86;
  --blanco:#FFFCF6; --borde:#E0D2BC;

  /* --- superficies --- */
  --fondo-pagina:var(--crema);
  --fondo-alterno:var(--arena);
  --fondo-tarjeta:var(--blanco);
  --fondo-campo:var(--crema);
  --titulo:var(--salvia-oscuro);
  --placeholder:#A2937F;
  --icono-fondo:rgb(var(--rgb-salvia)/.16);
  --velo-seccion:rgb(var(--rgb-salvia)/.14);
  --opcion-activa:#F7EEDC;
  --foco-anillo:rgb(var(--rgb-acento)/.22);
  --acento-velo:rgb(var(--rgb-acento)/.12);
  --sombra:0 8px 30px rgb(var(--rgb-tinta)/.08);
  --sombra-btn:0 6px 18px rgb(var(--rgb-acento)/.24);
  --sombra-foto:0 12px 34px rgb(var(--rgb-tinta)/.16);
  --sombra-form:0 18px 50px rgb(var(--rgb-tinta)/.10);

  /* --- hero --- */
  --hero-base:var(--salvia-oscuro);
  /* Halo mas claro que el fondo y reforzado: sobre marron calido el pelo
     cobrizo de la profesora se fundia con el, y la silueta caia a 1,31:1 de
     mediana. Este foco levanta el fondo justo por detras de ella. */
  --hero-halo:rgb(198 176 144/.74);
  --hero-halo-medio:rgb(198 176 144/.38);
  --hero-halo-cero:rgb(198 176 144/0);
  --hero-luz:rgb(186 164 132/.28);
  --hero-velo-alto:rgb(60 51 42/.10);
  --hero-velo-bajo:rgb(var(--rgb-oscuro)/.72);
  --hero-velo-cero:rgb(var(--rgb-oscuro)/0);
  --hero-velo-pie:rgb(var(--rgb-oscuro)/.45);
  --hero-velo-pie-medio:rgb(var(--rgb-oscuro)/.58);
  --hero-velo-pie-alto:rgb(var(--rgb-oscuro)/.76);
  --hero-texto:var(--crema);
  --hero-texto-suave:rgb(var(--rgb-crema)/.95);
  --hero-texto-tenue:rgb(var(--rgb-crema)/.88);
  --hero-apoyo:rgb(var(--rgb-crema)/.85);
  --hero-eyebrow-fondo:rgb(var(--rgb-crema)/.16);
  --hero-eyebrow-borde:rgb(var(--rgb-crema)/.45);
  --marquesina:rgb(201 174 121/.88);
  --hero-linea:#C9AE79;
  --hero-linea-opacidad:.55;
  --hero-sombra-figura:rgb(var(--rgb-oscuro)/.55);
  --retrato-sombra:drop-shadow(-20px 24px 30px var(--hero-sombra-figura));
  --retrato-filtro:saturate(.92) brightness(.97);

  /* --- pie --- */
  --pie-fondo:#332A22;
  --pie-texto:rgb(var(--rgb-crema)/.86);
  --pie-enlace:rgb(var(--rgb-crema)/.90);
  --pie-enlace-hover:#fff;
  --pie-sep:rgb(var(--rgb-crema)/.5);
  --pie-foco:var(--crema);

  /* --- estados --- */
  --error:#A4342A; --error-fondo:#FBF0EE;
  --whatsapp:#157F42; --whatsapp-hover:#106936;
  --sombra-whatsapp:0 8px 24px rgb(21 127 66/.30);
  --spinner-pista:rgb(255 255 255/.4);
  --spinner-punta:#fff;

  /* --- tipografia y medidas --- */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --radio:16px; --ancho:1120px; --gutter:clamp(20px,5vw,32px);
}

/* ============================================================
   1. UTILIDADES Y RITMO
   ============================================================ */

.titulo-centrado{
  text-align:center;
  max-width:20ch;
  margin:0 auto clamp(36px,7vw,56px);
  text-wrap:balance;
}

.cierre-bloque{
  margin:clamp(36px,7vw,52px) auto 0;
  max-width:34ch;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.25rem,5vw,1.6rem);
  line-height:1.4;
  color:var(--salvia-oscuro);
  text-wrap:balance;
}

.seccion--arena{background:var(--fondo-alterno)}

/* Filo suave entre bloques de distinto color */
.seccion--arena + .seccion,
.seccion + .seccion--arena{position:relative}

/* ============================================================
   2. BLOQUE "¿TE RECONOCES EN ESTO?"
   ============================================================ */

.tarjetas{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(14px,3vw,20px);
  grid-template-columns:1fr;
}

.tarjeta{
  position:relative;
  background:var(--fondo-tarjeta);
  border-radius:var(--radio);
  border:1px solid var(--borde);
  padding:clamp(22px,5vw,28px) clamp(22px,5vw,28px) clamp(22px,5vw,28px) clamp(26px,6vw,32px);
  box-shadow:var(--sombra);
}

.tarjeta::before{
  content:"";
  position:absolute;
  left:0;
  top:clamp(22px,5vw,28px);
  bottom:clamp(22px,5vw,28px);
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--salvia);
}

.tarjeta p{
  margin:0;
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--tinta);
}

@media (min-width:600px){
  .tarjetas{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .tarjetas{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   3. BLOQUE "QUÉ VAS A ENCONTRAR"
   ============================================================ */

.puntos{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(40px,8vw,32px);
  grid-template-columns:1fr;
}

.punto{
  text-align:center;
  max-width:38ch;
  margin:0 auto;
}

.punto__icono{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin:0 auto 22px;
  border-radius:50%;
  background:var(--icono-fondo);
  color:var(--salvia-oscuro);
}

.punto__icono svg{width:30px;height:30px}

.punto h3{margin-bottom:.4em}

.punto p{
  margin:0;
  color:var(--tinta-suave);
  font-size:1.0625rem;
}

@media (min-width:860px){
  .puntos{grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,44px)}
}

/* ============================================================
   4. FORMULARIO
   ============================================================ */

.seccion--reserva{
  background:
    radial-gradient(120% 60% at 50% 0%, var(--velo-seccion) 0%, var(--hero-halo-cero) 70%),
    var(--fondo-alterno);
  scroll-margin-top:0;
}

.reserva__intro{
  text-align:center;
  margin-bottom:clamp(30px,6vw,44px);
}

.reserva__intro h2{margin-bottom:.35em;text-wrap:balance}

.reserva__intro p{
  margin:0 auto;
  max-width:42ch;
  color:var(--tinta-suave);
}

.form{
  background:var(--fondo-tarjeta);
  border:1px solid var(--borde);
  border-radius:clamp(18px,4vw,26px);
  padding:clamp(24px,6vw,44px);
  box-shadow:var(--sombra-form);
}

/* --- Campos --- */

.campo{
  margin:0 0 26px;
  border:0;
  padding:0;
}

/* :not(.check) deja fuera la etiqueta del consentimiento, que es una fila
   flexible con su propia caja y no una etiqueta de campo normal. */
.campo > label:not(.check),
.campo legend{
  display:block;
  margin-bottom:8px;
  padding:0;
  font-weight:700;
  font-size:1.0625rem;
  color:var(--tinta);
}

.campo legend{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.5rem;
  line-height:1.25;
  color:var(--salvia-oscuro);
  margin-bottom:16px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"]{
  width:100%;
  min-height:54px;
  padding:14px 16px;
  border:1.5px solid var(--borde);
  border-radius:12px;
  background:var(--fondo-campo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.4;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.campo input::placeholder{color:var(--placeholder)}

.campo input[type="text"]:focus,
.campo input[type="email"]:focus,
.campo input[type="tel"]:focus{
  outline:none;
  background:var(--blanco);
  border-color:var(--foco);
  box-shadow:0 0 0 3px var(--foco-anillo);
}

/* Foco por teclado: además del anillo suave, contorno bien visible */
.campo input:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

.ayuda{
  margin:7px 0 0;
  font-size:.9375rem;
  color:var(--tinta-suave);
}

.error{
  margin:7px 0 0;
  font-size:.9375rem;
  font-weight:600;
  line-height:1.4;
  color:var(--error);
}

.error:empty{display:none}

.campo--invalido input[type="text"],
.campo--invalido input[type="email"],
.campo--invalido input[type="tel"]{
  border-color:var(--error);
  background:var(--error-fondo);
}

/* --- Tarjetas de selección única (♡) --- */

.campo--opciones{margin-bottom:28px}

.opciones{
  display:grid;
  gap:12px;
}

.opcion{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:60px;
  padding:16px 18px;
  border:1.5px solid var(--borde);
  border-radius:14px;
  background:var(--fondo-campo);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.opcion:hover{border-color:var(--salvia);background:var(--fondo-tarjeta)}

.opcion input[type="radio"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none;
}

.opcion__corazon{
  flex-shrink:0;
  font-size:0;              /* ocultamos el ♡ del HTML y lo pintamos aquí */
  line-height:1;
  color:var(--salvia);
  transition:color .18s ease, transform .18s ease;
}

.opcion__corazon::before{
  content:"\2661";          /* ♡ */
  font-size:1.6rem;
  line-height:1;
}

.opcion__texto{
  font-size:1.0625rem;
  line-height:1.45;
  color:var(--tinta);
}

/* Seleccionada */
.opcion:has(input:checked){
  border-color:var(--foco);
  background:var(--opcion-activa);
  box-shadow:0 0 0 1px var(--foco) inset;
}

.opcion:has(input:checked) .opcion__corazon{
  color:var(--enlace);
  transform:scale(1.06);
}

.opcion:has(input:checked) .opcion__corazon::before{content:"\2665"} /* ♥ */

/* Respaldo para navegadores sin :has() — la clase la pone script.js */
.opcion.seleccionada{
  border-color:var(--foco);
  background:var(--opcion-activa);
  box-shadow:0 0 0 1px var(--foco) inset;
}
.opcion.seleccionada .opcion__corazon{color:var(--enlace);transform:scale(1.06)}
.opcion.seleccionada .opcion__corazon::before{content:"\2665"}

/* Foco por teclado sobre la tarjeta */
.opcion:focus-within{
  outline:3px solid var(--foco);
  outline-offset:3px;
}

.campo--invalido .opcion{border-color:var(--error)}

@media (min-width:620px){
  .opciones{gap:14px}
}

/* --- Checkbox de consentimiento --- */

.campo--consentimiento{margin-bottom:30px}

.check{
  position:relative;   /* ancla el input oculto dentro de la etiqueta */
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:44px;
  cursor:pointer;
}

.check input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none;
}

.check__caja{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-top:1px;
  border:1.5px solid var(--salvia);
  border-radius:8px;
  background:var(--fondo-campo);
  color:var(--acento-texto);
  transition:background .18s ease, border-color .18s ease;
}

.check__caja svg{width:17px;height:17px;opacity:0;transition:opacity .15s ease}

.check input:checked + .check__caja{
  background:var(--acento);
  border-color:var(--acento);
}

.check input:checked + .check__caja svg{opacity:1}

.check input:focus-visible + .check__caja{
  outline:3px solid var(--foco);
  outline-offset:3px;
}

.check__texto{
  font-size:1rem;
  line-height:1.5;
  color:var(--tinta-suave);
}

.check__texto a{color:var(--enlace);text-underline-offset:2px}

.campo--invalido .check__caja{border-color:var(--error);background:var(--error-fondo)}

/* --- Trampa antispam --- */

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

/* --- Botón de envío y estados --- */

.btn--enviar{
  width:100%;
  min-height:62px;
  font-size:1.125rem;
  padding:18px 28px;
}

.btn--enviar[disabled]{
  cursor:progress;
  background:var(--acento);
  opacity:.72;
}

.btn__spinner{
  display:none;
  width:20px;
  height:20px;
  border:2.5px solid var(--spinner-pista);
  border-top-color:var(--spinner-punta);
  border-radius:50%;
  animation:girar .7s linear infinite;
}

.btn--enviar.enviando .btn__spinner{display:block}

@keyframes girar{to{transform:rotate(360deg)}}

.form__estado{
  margin:16px 0 0;
  padding:0;
  font-size:1rem;
  line-height:1.5;
  text-align:center;
}

.form__estado:empty{display:none}

.form__estado.estado--error{
  padding:14px 16px;
  border:1.5px solid var(--error);
  border-radius:12px;
  background:var(--error-fondo);
  color:var(--error);
  font-weight:600;
}

.form__legal{
  margin:18px 0 0;
  font-size:.9375rem;
  line-height:1.5;
  text-align:center;
  color:var(--tinta-suave);
}

@media (prefers-reduced-motion:reduce){
  .opcion,.check__caja,.campo input,.check__caja svg{transition:none}
  .btn__spinner{animation-duration:2.4s}
}

/* ============================================================
   5. PIE
   ============================================================ */

.pie{
  background:var(--pie-fondo);
  color:var(--pie-texto);
  padding:clamp(36px,8vw,52px) 0;
}

.pie__interior{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}

.pie__nombre{
  margin:0;
  font-family:var(--serif);
  font-size:1.35rem;
  color:var(--crema);
}

.pie__enlaces{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:.9375rem;
}

.pie__enlaces a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 4px;
  color:var(--pie-enlace);
  text-decoration:underline;
  text-underline-offset:3px;
}

.pie__enlaces a:hover{color:var(--pie-enlace-hover)}

.pie__enlaces a:focus-visible{outline:3px solid var(--pie-foco);outline-offset:2px}

.pie__sep{color:var(--pie-sep)}

@media (min-width:700px){
  .pie__interior{flex-direction:row;justify-content:space-between;text-align:left}
}

/* ============================================================
   6. PÁGINA DE GRACIAS
   ============================================================ */

.gracias{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(48px,10vw,90px) 0;
  background:
    radial-gradient(110% 55% at 50% 0%, var(--velo-seccion) 0%, var(--hero-halo-cero) 68%),
    var(--fondo-pagina);
}

.gracias__caja{
  max-width:600px;
  margin:0 auto;
  text-align:center;
}

.gracias__marca{
  display:flex;
  align-items:center;
  justify-content:center;
  width:82px;
  height:82px;
  margin:0 auto clamp(24px,5vw,32px);
  border-radius:50%;
  background:var(--icono-fondo);
  color:var(--salvia-oscuro);
}

.gracias__marca svg{width:40px;height:40px}

.gracias h1{
  font-size:clamp(2rem,7.5vw,3.1rem);
  margin-bottom:.35em;
  text-wrap:balance;
}

.gracias__entrada{
  font-size:clamp(1.0625rem,4.4vw,1.25rem);
  color:var(--tinta-suave);
  max-width:34ch;
  margin:0 auto clamp(32px,7vw,44px);
}

.btn--whatsapp{
  width:100%;
  max-width:460px;
  min-height:72px;
  font-size:1.1875rem;
  padding:20px 28px;
  /* Verde WhatsApp rebajado hasta 5:1 de contraste con el texto blanco (AA). */
  background:var(--whatsapp);
  box-shadow:var(--sombra-whatsapp);
}

.btn--whatsapp:hover{background:var(--whatsapp-hover)}

.btn--whatsapp svg{width:26px;height:26px;flex-shrink:0}

.gracias__aviso{
  margin:22px auto 0;
  max-width:40ch;
  font-size:1rem;
  line-height:1.55;
  color:var(--tinta-suave);
}

.gracias__volver{
  margin:clamp(32px,7vw,46px) 0 0;
  font-size:.9375rem;
}

.gracias__volver a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--tinta-suave);
}

/* ============================================================
   7. PÁGINAS LEGALES
   ============================================================ */

.legal{padding:clamp(48px,9vw,80px) 0 clamp(56px,10vw,90px)}

.legal__contenido{max-width:720px;margin:0 auto}

.legal__volver{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin-bottom:22px;
  font-size:.9375rem;
  font-weight:600;
  text-decoration:none;
}

.legal__volver:hover{text-decoration:underline}

.legal h1{
  font-size:clamp(1.9rem,6.5vw,2.7rem);
  margin-bottom:.3em;
}

.legal__fecha{
  margin-bottom:2.4em;
  font-size:.9375rem;
  color:var(--tinta-suave);
}

.legal h2{
  font-size:clamp(1.35rem,4.5vw,1.7rem);
  margin-top:2em;
  margin-bottom:.5em;
}

.legal h3{
  font-size:1.15rem;
  margin-top:1.5em;
  margin-bottom:.4em;
}

.legal p,
.legal li{
  color:var(--tinta-suave);
  font-size:1.0625rem;
}

.legal ul{padding-left:1.3em;margin:0 0 1.1em}
.legal li{margin-bottom:.5em}

.legal strong{color:var(--tinta)}

.legal .pendiente{
  display:inline-block;
  padding:1px 7px;
  border-radius:5px;
  background:var(--acento-velo);
  color:var(--enlace);
  font-weight:700;
  font-size:.95em;
}

.legal__tabla{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.4em;
  font-size:1rem;
}

.legal__tabla th,
.legal__tabla td{
  border:1px solid var(--borde);
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
  color:var(--tinta-suave);
}

.legal__tabla th{
  background:var(--arena);
  color:var(--tinta);
  font-weight:700;
}

.legal__envoltorio-tabla{overflow-x:auto;margin-bottom:1.4em}