/* ═══════════════════════════════════════════════════════════
   Judith Ramos · entrenadora personal y nutrición
   Rosas y blanco, como su cuestionario de Google: fondo rosa
   muy claro, titulares en Fraunces con cursiva para los
   acentos y para las frases destacadas, y texto en Manrope.
   Una sola hoja de estilos.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Claros */
  --blanco:#FFFFFF;
  --crema:#FFF9FB;
  --nube:#FCEFF3;
  --nube-2:#F8E3EA;

  /* Rosas */
  --rosa:#E9A9BD;
  --rosa-piel:#F6DCE4;
  --rosa-fuerte:#C2436A;
  --vino:#8E2E4C;
  --vino-hondo:#2E1B22;
  --negro:#141013;
  --rosa-linea:linear-gradient(90deg,#F6DCE4,#E9A9BD,#C2436A);

  /* Tintas */
  --tinta:#2E2529;
  --tinta-2:#4E4247;
  --gris:#847A7E;
  --linea:#F0DDE4;

  /* Tipografías */
  --display:"Fraunces",Georgia,serif;
  --texto:"Manrope",-apple-system,Segoe UI,sans-serif;

  --curva:26px;
  --sombra:0 28px 60px -42px rgba(142,46,76,.45);
  --sombra-suave:0 18px 40px -34px rgba(142,46,76,.32);
  --transicion:.35s cubic-bezier(.22,1,.36,1);
}

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

html{scroll-behavior:smooth;scroll-padding-top:5.5rem}

body{
  font-family:var(--texto);
  font-weight:300;
  color:var(--tinta-2);
  background:var(--crema);
  line-height:1.75;
  font-size:1.07rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.lista-limpia{list-style:none}

.contenedor{width:min(1180px,100% - 2.6rem);margin-inline:auto}

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

/* ─────────── Piezas comunes ─────────── */

.cejilla{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--rosa-fuerte);
  margin-bottom:1.1rem;
}

h1,.titulo{
  font-family:var(--display);
  font-weight:300;
  color:var(--tinta);
  line-height:1.12;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.6rem,6vw,4.7rem);letter-spacing:-.03em}
.titulo{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.025em}
h1 em,.titulo em{font-style:italic;color:var(--rosa-fuerte)}

.entradilla{max-width:58ch;margin-top:1.3rem;font-size:1.09rem}

.regla{
  width:74px;height:2px;border:0;border-radius:2px;
  background:var(--rosa-linea);
  margin:1.5rem 0 1.6rem;
}

.destacado{
  /* La misma letra que «más fuerte y bonita» de la portada:
     Fraunces en cursiva y en rosa fuerte. */
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.55rem,2.6vw,2rem);
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--rosa-fuerte);
  margin:1.8rem 0;
}

/* La frase suelta que encabeza el recuadro del cuestionario. */
.mano{
  display:block;
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:1.5rem;
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--rosa-fuerte);
}

.nota{
  margin-top:2.2rem;
  font-size:.96rem;
  color:var(--gris);
  text-align:center;
}

.cabecera-seccion{max-width:42rem;margin-bottom:3.2rem}

/* ─────────── Botones ─────────── */

.boton{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.92rem 2rem;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  transition:transform var(--transicion),background var(--transicion),color var(--transicion),border-color var(--transicion),box-shadow var(--transicion);
}
.boton:hover{transform:translateY(-2px)}

.boton--rosa{
  background:var(--rosa-fuerte);color:var(--blanco);
  box-shadow:var(--sombra-suave);
}
.boton--rosa:hover{background:var(--vino)}

.boton--linea{border-color:var(--rosa);color:var(--vino)}
.boton--linea:hover{background:var(--rosa-piel);border-color:var(--rosa-fuerte)}

/* ─────────── Navegación ─────────── */

.nav{
  position:sticky;top:0;z-index:50;
  padding:1.1rem 0;
  transition:background var(--transicion),box-shadow var(--transicion),padding var(--transicion);
}
.nav--posada{
  background:rgba(255,249,251,.93);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--linea);
  padding:.65rem 0;
}

.nav__caja{display:flex;align-items:center;justify-content:space-between;gap:1.2rem}

.marca{display:flex;align-items:center}

/* El logo que hizo su diseñadora, sacado del PDF de Canva.
   Encoge un poco cuando la cabecera se posa al bajar. */
.marca__logo{
  height:4rem;width:auto;
  transition:height var(--transicion);
}
.nav--posada .marca__logo{height:3.1rem}

.nav__enlaces{display:flex;align-items:center;gap:1.7rem}
.nav__enlaces a{
  font-size:.8rem;font-weight:500;letter-spacing:.04em;
  color:var(--tinta-2);
  transition:color var(--transicion);
}
.nav__enlaces a:hover{color:var(--rosa-fuerte)}

.nav__boton{padding:.65rem 1.4rem}

.nav__hamburguesa{
  display:none;
  width:42px;height:42px;
  position:relative;
}
.nav__hamburguesa span,
.nav__hamburguesa span::before,
.nav__hamburguesa span::after{
  position:absolute;left:9px;
  width:24px;height:1.6px;
  background:var(--tinta);
  transition:var(--transicion);
}
.nav__hamburguesa span{top:20px}
.nav__hamburguesa span::before{content:"";top:-7px;left:0}
.nav__hamburguesa span::after{content:"";top:7px;left:0}
.nav__hamburguesa[aria-expanded="true"] span{background:transparent}
.nav__hamburguesa[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__hamburguesa[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ─────────── Portada ─────────── */

.portada{
  padding:3.5rem 0 5.5rem;
  background:
    radial-gradient(ellipse 60% 55% at 85% 5%,var(--nube),transparent 70%),
    radial-gradient(ellipse 50% 45% at 0% 60%,var(--nube-2),transparent 65%);
}

.portada__rejilla{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:4rem;align-items:center;
}

.portada__texto{margin-top:1.5rem;max-width:52ch}

.portada__botones{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.credenciales{
  margin-top:3rem;
  display:grid;gap:.7rem;
  border-top:1px solid var(--linea);
  padding-top:1.8rem;
}
.credenciales li{
  display:flex;align-items:baseline;gap:.8rem;
  font-size:1rem;
}
.credenciales span{
  font-family:var(--display);
  font-size:.82rem;
  color:var(--rosa-fuerte);
}

/* ─────────── Fotos ───────────
   De la sesión que le hizo Asha's Athletics, a 1440 px de ancho.
   Vienen en vertical (entre 4/5 y 3/4) y se encajan con `cover`
   en marcos de 4/5 y 1/1, así que se recortan poco. */

.foto{
  position:relative;z-index:1;
  width:100%;
  border-radius:var(--curva);
  object-fit:cover;
  background:var(--nube);
  box-shadow:var(--sombra);
}
.foto--retrato{aspect-ratio:4/5}
.foto--cuadrada{aspect-ratio:1/1}

/* ─────────── Huecos de foto (por si vuelve a hacer falta) ─────────── */

.marco{position:relative}
.marco::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--rosa);
  border-radius:var(--curva);
  z-index:0;
}

.hueco-foto{
  position:relative;z-index:1;
  display:grid;place-items:center;
  border:2px dashed var(--rosa);
  border-radius:var(--curva);
  background:var(--blanco);
  color:var(--vino);
  text-align:center;
  padding:2rem;
}
.hueco-foto--retrato{aspect-ratio:4/5}
.hueco-foto--cuadrada{aspect-ratio:1/1}
.hueco-foto svg{width:34px;height:34px;margin:0 auto .9rem;opacity:.7}
.hueco-foto span{
  display:block;
  font-family:var(--display);
  font-size:1.1rem;
}
.hueco-foto small{
  display:block;margin-top:.5rem;
  font-size:.78rem;line-height:1.6;color:var(--gris);
}

/* ─────────── Secciones ─────────── */

.seccion{padding:7.5rem 0}
.seccion--blanca{background:var(--blanco)}
.seccion--rosa{background:var(--nube)}

.seccion--oscura{
  background:var(--vino-hondo);
  color:#E7D3DA;
}
.seccion--oscura .titulo{color:var(--blanco)}
.seccion--oscura .titulo em{color:var(--rosa)}
.seccion--oscura .cejilla{color:var(--rosa)}

/* ─────────── Quién soy ─────────── */

.historia{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:4rem;align-items:center;
}
.historia p+p{margin-top:1rem}
.historia strong{color:var(--tinta);font-weight:600}


/* ─────────── Objetivos ─────────── */

.rejilla{display:grid;gap:1.3rem}
.rejilla--3{grid-template-columns:repeat(3,1fr)}

.objetivo{
  display:flex;align-items:center;gap:1rem;
  padding:1.5rem 1.6rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.objetivo:hover{transform:translateY(-3px);box-shadow:var(--sombra-suave)}
.objetivo__num{
  font-family:var(--display);
  font-size:1.5rem;
  color:var(--rosa);
  line-height:1;
}
.objetivo h3{
  font-family:var(--texto);
  font-size:1rem;font-weight:600;color:var(--tinta);
  line-height:1.4;
}
.objetivo--otro{background:var(--rosa-piel);border-color:var(--rosa)}

.bloqueos{
  margin-top:3.2rem;
  padding:2.4rem;
  background:var(--blanco);
  border-left:4px solid var(--rosa-fuerte);
  border-radius:var(--curva);
  box-shadow:var(--sombra-suave);
}
.bloqueos__titulo{
  font-family:var(--display);
  font-size:1.35rem;color:var(--tinta);
  margin-bottom:1rem;
}
.bloqueos li{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:1.24rem;
  letter-spacing:-.012em;
  color:var(--vino);
  line-height:1.45;
}
.bloqueos__pie{margin-top:1.4rem;font-size:1.02rem}

/* ─────────── Planes ─────────── */

.plan{
  position:relative;
  display:flex;flex-direction:column;
  padding:2.4rem 2rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.plan--destacado{border-color:var(--rosa);box-shadow:var(--sombra-suave)}

.plan__cinta{
  position:absolute;top:-.8rem;left:2rem;
  padding:.2rem .9rem;
  background:var(--rosa-fuerte);color:var(--blanco);
  border-radius:999px;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
}
.plan h3{
  font-family:var(--display);font-weight:400;
  font-size:1.45rem;color:var(--tinta);
  margin-bottom:.4rem;
}
.plan__precio{
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);
  padding-bottom:1.2rem;margin-bottom:1.2rem;
  border-bottom:1px solid var(--linea);
}
.plan__precio span{color:var(--rosa-fuerte)}
.plan__lista{display:grid;gap:.7rem;font-size:1rem}
.plan__lista li{padding-left:1.3rem;position:relative}
.plan__lista li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;
  background:var(--rosa);
}
.plan__boton{margin-top:1.8rem;align-self:flex-start}

/* ─────────── Pasos ─────────── */

.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}

.paso{
  padding:2rem 1.6rem;
  background:var(--blanco);
  border-radius:var(--curva);
  border:1px solid var(--linea);
}
.paso__num{
  display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--rosa-piel);
  color:var(--vino);
  font-family:var(--display);
  font-size:1.1rem;
  margin-bottom:1rem;
}
.paso h3{
  font-family:var(--display);font-weight:400;
  font-size:1.2rem;color:var(--tinta);
  margin-bottom:.5rem;
}
.paso p{font-size:.99rem}

.llamada-cuestionario{
  margin-top:3.2rem;
  padding:2.4rem;
  background:var(--blanco);
  border:1px solid var(--rosa);
  border-radius:var(--curva);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.8rem;flex-wrap:wrap;
  box-shadow:var(--sombra-suave);
}
.llamada-cuestionario__texto{max-width:38ch;font-size:1.03rem}

/* ─────────── Presencial ─────────── */

.presencial{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:4rem;align-items:center;
}
.direccion{
  font-style:normal;
  font-family:var(--display);
  font-size:1.2rem;
  color:var(--tinta);
  margin:1.4rem 0;
  line-height:1.5;
}
.presencial__botones{display:flex;flex-wrap:wrap;gap:.8rem}

/* ─────────── Contacto ─────────── */

.contacto{
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:start;
}

.vias{margin-top:2.6rem;display:grid;gap:.8rem}
.via{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1rem 1.3rem;
  border:1px solid rgba(233,169,189,.35);
  border-radius:999px;
  transition:border-color var(--transicion),background var(--transicion);
}
.via:hover{border-color:var(--rosa);background:rgba(233,169,189,.1)}
.via__nombre{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosa);
}
.via__dato{font-size:1rem;color:var(--blanco)}

.formulario{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(233,169,189,.3);
  border-radius:var(--curva);
  padding:2.2rem;
}
.campo{margin-bottom:1.1rem}
.campo label{
  display:block;margin-bottom:.45rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rosa);
}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:.8rem 1rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(233,169,189,.3);
  border-radius:12px;
  color:var(--blanco);
  font:inherit;
  font-size:.95rem;
  transition:border-color var(--transicion);
}
.campo textarea{min-height:120px;resize:vertical}
.campo input::placeholder,
.campo textarea::placeholder{color:rgba(231,211,218,.5)}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{border-color:var(--rosa);outline:none}
.campo select option{color:var(--tinta)}

.formulario__boton{width:100%;margin-top:.6rem}
.formulario__aviso{
  margin-top:1rem;
  font-size:.8rem;
  color:rgba(231,211,218,.75);
  text-align:center;
}

/* ─────────── Pie ─────────── */

.pie{
  background:var(--blanco);
  border-top:1px solid var(--linea);
  padding:2.2rem 0;
  font-size:.85rem;
}
.pie__caja{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.pie strong{color:var(--tinta);font-weight:600}
.pie__creditos{color:var(--gris)}

/* ─────────── Aviso flotante ─────────── */

.nube{
  position:fixed;left:50%;bottom:1.6rem;z-index:80;
  transform:translate(-50%,120%);
  max-width:min(92vw,30rem);
  padding:.85rem 1.4rem;
  background:var(--vino-hondo);
  color:#F3D9E2;
  border-radius:999px;
  font-size:.85rem;
  text-align:center;
  box-shadow:var(--sombra);
  opacity:0;
  transition:transform var(--transicion),opacity var(--transicion);
}
.nube.visible{transform:translate(-50%,0);opacity:1}

/* ─────────── Apariciones ─────────── */

.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1);
}
.reveal.visible{opacity:1;transform:none}

/* ─────────── Pantallas pequeñas ─────────── */

@media (max-width:1100px){
  .portada__rejilla,.historia,.presencial,.contacto{grid-template-columns:1fr;gap:2.6rem}
  .historia .marco,.presencial .marco{max-width:26rem}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .rejilla--3{grid-template-columns:repeat(2,1fr)}
  .seccion{padding:4.4rem 0}

  .nav__hamburguesa{display:block}
  .nav__boton{display:none}

  .nav__enlaces{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;
    gap:.2rem;
    padding:0 1.6rem;
    max-height:0;overflow:hidden;
    background:var(--blanco);
    border-bottom:1px solid transparent;
    transition:max-height var(--transicion),padding var(--transicion);
  }
  .nav__enlaces.abierto{
    max-height:26rem;
    padding:1.2rem 1.6rem 1.6rem;
    border-bottom-color:var(--linea);
  }
  .nav__enlaces a{padding:.55rem 0;font-size:.95rem}
}

@media (max-width:620px){
  .rejilla--3,.pasos{grid-template-columns:1fr}
  .llamada-cuestionario,.bloqueos,.formulario{padding:1.6rem}
  .portada__botones .boton,.presencial__botones .boton{width:100%}
  .marco::before{inset:10px -10px -10px 10px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .boton:hover,.objetivo:hover,.plan:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   Tarifas · añadido el 2026-09-23, cuando Judith pasó sus
   precios en el cuestionario y pidió que se vieran todos.
   ═══════════════════════════════════════════════════════════ */

.rejilla--2{grid-template-columns:repeat(2,1fr)}

/* Las dos tarjetas de «qué incluye» */

.plan__resumen{
  font-size:.95rem;
  color:var(--gris);
  padding-bottom:1.2rem;margin-bottom:1.2rem;
  border-bottom:1px solid var(--linea);
}

/* Las tres de precio */

.tarifas{margin-top:2.6rem}

.tarifa{
  display:flex;flex-direction:column;
  padding:2.2rem 1.9rem;
  background:var(--crema);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.tarifa:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tarifa--destacada{
  background:var(--blanco);
  border-color:var(--rosa);
  box-shadow:var(--sombra-suave);
}

.tarifa h3{
  font-family:var(--display);font-weight:400;
  font-size:1.35rem;color:var(--tinta);
  line-height:1.2;
}
.tarifa__donde{
  font-size:.93rem;color:var(--gris);
  margin-top:.25rem;
  padding-bottom:1.3rem;
  border-bottom:1px solid var(--linea);
}

.tarifa__nivel{padding:1.2rem 0;border-bottom:1px solid var(--linea)}

.tarifa__nombre{
  font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosa-fuerte);
}
.tarifa__precio{
  font-family:var(--display);font-weight:300;
  font-size:2.1rem;color:var(--tinta);
  line-height:1.2;
  margin-top:.15rem;
}
.tarifa__precio span{
  font-family:var(--texto);
  font-size:.82rem;font-weight:400;
  color:var(--gris);
  letter-spacing:.04em;
}
.tarifa__trimestre{font-size:.88rem;color:var(--tinta-2)}

.tarifa__boton{margin-top:1.8rem;align-self:flex-start}

/* Los servicios sueltos */

.sueltos{
  margin-top:3.2rem;
  padding:2.6rem;
  background:var(--nube);
  border-radius:var(--curva);
}
.sueltos__titulo{
  font-family:var(--display);font-weight:400;
  font-size:1.5rem;color:var(--tinta);
  margin-bottom:1.8rem;
}
.sueltos__lista{display:grid;gap:1.3rem}
.sueltos__lista li{
  display:grid;grid-template-columns:5.5rem 1fr;
  gap:1.4rem;align-items:baseline;
  padding-top:1.3rem;
  border-top:1px solid var(--nube-2);
}
.sueltos__lista li:first-child{padding-top:0;border-top:0}
.sueltos__precio{
  font-family:var(--display);font-weight:300;
  font-size:1.8rem;color:var(--rosa-fuerte);
  line-height:1.1;
}
.sueltos__lista h4{
  font-family:var(--texto);font-weight:600;
  font-size:1rem;color:var(--tinta);
  margin-bottom:.2rem;
}
.sueltos__lista p{font-size:.99rem}

/* La vía que Judith quiere que se use */

.via--principal{border-color:var(--rosa);background:rgba(233,169,189,.12)}

@media (max-width:980px){
  .rejilla--2{grid-template-columns:1fr}
}

@media (max-width:620px){
  .sueltos{padding:1.6rem}
  .sueltos__lista li{grid-template-columns:1fr;gap:.35rem}
  .tarifa__boton{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .tarifa:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   Páginas legales · añadido el 2026-09-23
   ═══════════════════════════════════════════════════════════ */

.legal{padding-top:9rem}
.legal__caja{width:min(42rem,100% - 2.6rem)}

.legal__fecha{font-size:.88rem;color:var(--gris);margin-top:1.4rem}

.legal__indice{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin:2.2rem 0 3.4rem;
}
.legal__indice a{
  padding:.45rem 1.1rem;
  border:1px solid var(--linea);
  border-radius:999px;
  font-size:.82rem;
  color:var(--vino);
  transition:background var(--transicion),border-color var(--transicion);
}
.legal__indice a:hover{background:var(--nube);border-color:var(--rosa)}

.legal section+section{margin-top:3.4rem}

.legal h2{
  font-family:var(--display);font-weight:300;
  font-size:1.7rem;color:var(--tinta);
  line-height:1.2;
  padding-bottom:.9rem;margin-bottom:1.4rem;
  border-bottom:1px solid var(--linea);
}
.legal h3{
  font-family:var(--texto);font-weight:600;
  font-size:1rem;color:var(--tinta);
  margin-top:1.8rem;margin-bottom:.5rem;
}
.legal p+p{margin-top:.9rem}
.legal p{font-size:.97rem}
.legal strong{color:var(--tinta);font-weight:600}
.legal p a,
.legal dd a{
  color:var(--rosa-fuerte);
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal__datos{
  display:grid;gap:.7rem;
  margin:1.4rem 0;
  padding:1.6rem 1.8rem;
  background:var(--crema);
  border:1px solid var(--linea);
  border-radius:var(--curva);
}
.legal__datos>div{display:grid;grid-template-columns:11rem 1fr;gap:1rem}
.legal__datos dt{
  font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--rosa-fuerte);
  padding-top:.25rem;
}
.legal__datos dd{font-size:.96rem;color:var(--tinta-2)}

.legal__volver{margin-top:3.6rem}


.pie__legal a{color:var(--vino);text-decoration:underline;text-underline-offset:3px}

@media (max-width:620px){
  .legal{padding-top:7rem}
  .legal__datos{padding:1.3rem}
  .legal__datos>div{grid-template-columns:1fr;gap:.15rem}
  .legal__volver .boton{width:100%}
}

/* ═══════════════════════════════════════════════════════════
   Aire moderno · 2026-09-23
   Sin salirse de lo que pidió Judith: rosa, blanco y negro,
   elegante y clara. Aquí está el negro de verdad (la cinta,
   la tarjeta de la asesoría online y la zona de contacto),
   la barra de lectura y los detalles que se mueven.
   ═══════════════════════════════════════════════════════════ */

::selection{background:var(--rosa-piel);color:var(--tinta)}

/* ─────────── Barra de lectura ─────────── */

.progreso{
  position:fixed;top:0;left:0;z-index:60;
  height:3px;width:0;
  background:var(--rosa-linea);
  border-radius:0 3px 3px 0;
  transition:width .12s linear;
}

/* ─────────── Las flechas de los botones ─────────── */

.boton::after{
  content:"→";
  margin-left:.55rem;
  letter-spacing:0;
  font-size:.95rem;line-height:1;
  transition:transform var(--transicion);
}
.boton:hover::after{transform:translateX(4px)}
.boton--sin-flecha::after{content:none}

/* ─────────── La cinta negra con sus frases ─────────── */

.cinta{
  display:flex;
  background:var(--negro);
  color:var(--blanco);
  padding:1.6rem 0;
  overflow:hidden;
  user-select:none;
}
.cinta__pista{
  display:flex;align-items:center;gap:2.8rem;
  flex:0 0 auto;
  padding-right:2.8rem;
  animation:desfile 42s linear infinite;
}
.cinta__pista span{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.35rem,2.4vw,2.05rem);
  line-height:1.2;
  white-space:nowrap;
}
.cinta__pista i{
  font-style:normal;
  font-size:.8rem;
  color:var(--rosa);
}

@keyframes desfile{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

/* ─────────── Objetivos: el número, grande y de fondo ─────────── */

.objetivo{
  display:block;
  padding:1.9rem 1.7rem;
}
.objetivo:hover{border-color:var(--rosa)}
.objetivo__num{
  display:block;
  font-size:2.5rem;
  color:var(--rosa);
  opacity:.45;
  margin-bottom:.8rem;
  font-variant-numeric:tabular-nums;
}
.objetivo h3{font-size:1.1rem;line-height:1.35}
.objetivo--otro .objetivo__num{opacity:.75}

/* ─────────── Pasos: el número, sin círculo ─────────── */

.paso{position:relative;overflow:hidden}
.paso::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--rosa-linea);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transicion);
}
.paso:hover::before{transform:scaleX(1)}
.paso__num{
  display:block;
  width:auto;height:auto;
  background:none;
  color:var(--rosa);
  opacity:.5;
  font-size:2.4rem;line-height:1;
  margin-bottom:.7rem;
  font-variant-numeric:tabular-nums;
}

/* ─────────── La tarifa destacada, en negro ─────────── */

.tarifa__precio,.sueltos__precio{font-variant-numeric:tabular-nums}

.tarifa--destacada{
  background:var(--negro);
  border-color:var(--negro);
  box-shadow:0 34px 60px -44px rgba(20,16,19,.95);
}
.tarifa--destacada h3,
.tarifa--destacada .tarifa__precio{color:var(--blanco)}
.tarifa--destacada .tarifa__donde,
.tarifa--destacada .tarifa__trimestre{color:rgba(255,255,255,.62)}
.tarifa--destacada .tarifa__precio span{color:rgba(255,255,255,.48)}
.tarifa--destacada .tarifa__donde,
.tarifa--destacada .tarifa__nivel{border-bottom-color:rgba(255,255,255,.14)}
.tarifa--destacada .tarifa__nombre{color:var(--rosa)}

/* ─────────── Pantallas pequeñas ─────────── */

@media (max-width:620px){
  .cinta{padding:1.2rem 0}
  .cinta__pista{gap:1.8rem;padding-right:1.8rem}
}

@media (prefers-reduced-motion:reduce){
  .cinta__pista{animation:none}
  .progreso{transition:none}
  .boton:hover::after,.paso:hover::before{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   Más sobre mí · 2026-09-24
   Las fotos que no caben en el cuerpo de la web, en una tira
   que se desliza con el dedo, con la rueda o con las flechas.
   Sangra hasta el borde de la pantalla a propósito: así se ve
   que hay más a la derecha sin tener que decirlo.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Lo que separa el contenedor del borde de la pantalla. */
  --sangria:max(1.3rem,(100vw - 1180px) / 2);
}

.galeria{margin-top:.4rem}

.galeria__pista{
  display:flex;
  gap:1.1rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--sangria);
  padding:.5rem var(--sangria) 1.6rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.galeria__pista::-webkit-scrollbar{display:none}

.galeria__pista li{flex:0 0 auto;scroll-snap-align:start}

.galeria__pista img{
  width:clamp(14rem,24vw,19rem);
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--curva);
  background:var(--nube-2);
  box-shadow:var(--sombra-suave);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.galeria__pista img:hover{transform:translateY(-5px);box-shadow:var(--sombra)}

.galeria__mandos{display:flex;gap:.7rem}

.galeria__flecha{
  display:grid;place-items:center;
  width:3.1rem;height:3.1rem;
  background:var(--blanco);
  border:1px solid var(--rosa);
  border-radius:50%;
  color:var(--vino);
  font-size:1.15rem;line-height:1;
  transition:background var(--transicion),border-color var(--transicion),transform var(--transicion);
}
.galeria__flecha:hover{
  background:var(--rosa-piel);
  border-color:var(--rosa-fuerte);
  transform:translateY(-2px);
}

@media (max-width:620px){
  .galeria__pista img{width:74vw}
  .galeria__mandos{display:none}
}

@media (prefers-reduced-motion:reduce){
  .galeria__pista img:hover,.galeria__flecha:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   La portada del móvil, con la foto al lado · 2026-09-25
   Antes se apilaba: primero el texto entero y la foto debajo,
   que en un móvil obliga a bajar para ver a Judith. Ahora va a
   dos columnas, con la foto al lado del titular.

   Para partir la portada en piezas sueltas sin tocar el HTML,
   el bloque de texto pasa a `display:contents`: sus hijos
   —rótulo, titular, entradilla, credenciales y botones— se
   vuelven celdas de la misma rejilla y se colocan una a una.
   Al perder la caja, el bloque deja de animarse al aparecer;
   es el precio y se nota poco, porque la portada se ve ya
   nada más entrar.
   ═══════════════════════════════════════════════════════════ */

@media (max-width:760px){
  .portada__rejilla{
    display:grid;
    grid-template-columns:1fr 44%;
    gap:.9rem 1rem;
    align-items:start;
  }
  .portada__rejilla>.reveal:first-child{display:contents}

  /* El rótulo cruza las dos columnas: si se queda solo en la
     primera, la foto reparte su altura sobrante entre las filas
     que abarca y abre un hueco entre el rótulo y el titular. */
  .portada .cejilla{grid-column:1 / -1;grid-row:1;margin-bottom:0}

  .portada h1{
    grid-column:1;grid-row:2;
    font-size:clamp(1.55rem,6.6vw,2.4rem);
    line-height:1.14;
  }
  /* Credenciales y entradilla, a ancho completo: en media columna
     la entradilla se iba a trece líneas y las dos juntas estiraban
     la foto hasta comerse media figura. */
  .portada .credenciales{grid-column:1 / -1;grid-row:3;margin-top:1.4rem}
  .portada__texto{grid-column:1 / -1;grid-row:4;margin-top:1.6rem}

  /* La foto va SOLO al lado del titular y se enseña entera, sin
     recortar. Estirada al alto del titular más las credenciales se
     perdía la mitad de la figura por los lados; ahora la fila crece
     hasta el alto natural de la foto y no se corta nada. */
  .portada__rejilla .marco{
    grid-column:2;grid-row:2;
    align-self:start;
    width:auto;max-width:none;margin:0;
  }
  .portada__rejilla .foto{width:100%;max-width:none}

  /* Los botones, a ancho completo: en media columna «Escríbeme
     por WhatsApp» se parte en tres líneas. */
  .portada__botones{grid-column:1 / -1;grid-row:5;margin-top:1.8rem}
}

@media (max-width:400px){
  .portada__rejilla{grid-template-columns:1fr 40%}
  .portada h1{font-size:clamp(1.4rem,6.1vw,2.2rem)}
}

/* Por debajo de 340 px no cabe un titular que se lea al lado de
   una foto: vuelve a apilarse. */
@media (max-width:339px){
  .portada__rejilla{display:block}
  .portada__rejilla>.reveal:first-child{display:block}
  .portada__rejilla .marco{margin-top:2rem}
  .portada__rejilla .foto{height:auto}
}