/* ═══════════════════════════════════════════════════════════════════════
   PALETA · sale de la propia imagen del encuentro: crema de fondo, azul
   petróleo del titular, dorado del cintillo. Una sola cara —esto es una
   pieza de campaña, no una app— pero el fondo se pinta SIEMPRE explícito
   para que no herede el del navegador.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --tinta:#0d3c4f; --tinta-2:#1b5c74;
  --crema:#f6f1e4; --crema-2:#fffdf7;
  --oro:#c6a35d; --oro-claro:#e8d3a0;
  --texto:#24323a; --suave:#5d6f79;
  --linea:rgba(13,60,79,.14);
  --sombra:0 2px 10px rgba(13,60,79,.08);
  --sombra-alta:0 16px 44px -18px rgba(13,60,79,.45);
  /* 🚨 ESTA FALTABA y tumbaba el botón de WhatsApp entero. Vivía en el
     `:root` de la página de gracias y lo perdí al fusionar las dos hojas.
     Una variable que no existe NO cae a un valor por defecto: invalida la
     declaración completa, así que `background:var(--wa)` dejaba el botón
     transparente. Y no da ningún error: hay que ir a buscarlo. */
  --wa:#25d366;
  /* El turquesa medio de la paleta del doctor (#54b4ac). Se usa SOLO para
     destacar el formulario: es el único sitio de la página donde hace falta
     que el ojo se pare. */
  --verde:84,180,172;
  --gutter:16px;                /* 🔑 UN solo margen lateral para TODO */
  --ancho:1060px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--crema); color:var(--texto);
  font:400 17px/1.6 Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-bottom:84px; overflow-x:hidden;
}
@media (min-width:880px){ body{padding-bottom:0} }
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;
         text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}

/* 🔑 LA REGLA DE ALINEACIÓN: todo hijo de `.env` empieza y acaba en el mismo
   píxel. Antes el formulario metía su propio relleno lateral y su botón
   quedaba 21 px más adentro que la imagen; se veía torcido sin saber por qué.
   En móvil el formulario va SIN tarjeta: así sus campos alinean con la
   imagen. La tarjeta vuelve en escritorio, donde sobra sitio. */
.env{width:min(100% - (var(--gutter) * 2),var(--ancho));margin-inline:auto}

/* ── CINTILLO ─────────────────────────────────────────────────────────── */
.tira{background:var(--tinta);color:var(--crema-2);text-align:center;
      padding:8px 14px;font-size:11.5px;font-weight:600;letter-spacing:.15em}
.tira b{color:var(--oro-claro);font-weight:700;font-variant-numeric:tabular-nums}

/* ── HERO · lo mínimo para que el formulario quepa sin scroll ─────────── */
.hero{padding:16px 0 0;text-align:center}
.pill{display:inline-flex;align-items:center;gap:7px;
      border:1px solid var(--oro);color:var(--tinta);border-radius:999px;
      padding:5px 13px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
      background:rgba(198,163,93,.1)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;
      background:#d64545;box-shadow:0 0 0 0 rgba(214,69,69,.55);
      animation:late 2.2s infinite}
@keyframes late{70%{box-shadow:0 0 0 8px rgba(214,69,69,0)}
                100%{box-shadow:0 0 0 0 rgba(214,69,69,0)}}

/* 🔑 EL TITULAR NO REPITE EL CARTEL. La imagen ya dice «Estrés y pérdida de
   peso» y la fecha; si el h1 lo repetía, gastábamos media pantalla en decir
   dos veces lo mismo y el botón caía fuera. Ahora el h1 aporta el ÁNGULO y
   la imagen aporta el qué y el cuándo. Nada se dice dos veces. */
h1{color:var(--tinta);font-size:clamp(23px,5.9vw,40px);line-height:1.14;
   margin:11px 0 0;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--oro)}

.cartel{display:block;margin:13px auto 0;max-width:820px;border-radius:16px;
        overflow:hidden;box-shadow:var(--sombra-alta);
        border:1px solid rgba(255,255,255,.6)}
.cartel img{width:100%}

/* la fecha en TEXTO: una línea fina, no una tarjeta. Está para el lector de
   pantalla, para el buscador y para quien navegue con imágenes apagadas. */
.fecha{margin:10px 0 0;font-size:13.5px;color:var(--suave);line-height:1.45}
.fecha b{color:var(--tinta);font-weight:700}

/* ── FORMULARIO ───────────────────────────────────────────────────────── */
/* 🎯 EL FORMULARIO ES LO ÚNICO QUE TIENE QUE CONVERTIR, Y SE PERDÍA.
   Al quitarle la tarjeta en móvil —para que sus campos alineasen con la
   imagen— se quedó sin ningún peso visual: sobre el crema no se distinguía
   del resto de la página y el ojo pasaba de largo.
   La solución no es devolverle la tarjeta, que descuadraba el botón otra vez,
   sino un fondo A SANGRE: los márgenes negativos lo llevan de borde a borde
   y el relleno devuelve el contenido a sus 16 px. Destaca y sigue alineado. */
.forma{margin:16px auto 0;max-width:460px;text-align:left;
  background:linear-gradient(180deg,rgba(var(--verde),.16),rgba(var(--verde),.07));
  border-top:1px solid rgba(var(--verde),.34);
  border-bottom:1px solid rgba(var(--verde),.34);
  margin-inline:calc(var(--gutter) * -1);
  padding:18px var(--gutter) 16px}
.forma h2{font-size:20px;color:var(--tinta);text-align:center;margin-bottom:9px}
.campo{margin-bottom:9px}
.campo label{display:block;font-size:11.5px;font-weight:600;color:var(--suave);
             letter-spacing:.07em;margin-bottom:4px;text-transform:uppercase}
.campo input,.campo select{
  width:100%;padding:13px 14px;font:inherit;font-size:16px;  /* 16px o iOS hace zoom */
  color:var(--texto);background:#fff;border:1.5px solid var(--linea);
  border-radius:12px;transition:border-color .15s,box-shadow .15s}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--tinta-2);
  box-shadow:0 0 0 3px rgba(27,92,116,.15)}
.tel{display:flex;gap:8px}
.tel select{flex:0 0 164px}
.boton{width:100%;margin-top:4px;padding:17px 18px;border:0;border-radius:13px;
       background:var(--tinta);color:#fff;font:700 17px/1.2 Montserrat,sans-serif;
       cursor:pointer;transition:background .15s,transform .1s;
       box-shadow:0 8px 20px -10px rgba(13,60,79,.85)}
.boton:hover{background:#0a3142}
.boton:active{transform:translateY(1px)}
.boton[disabled]{opacity:.6;cursor:progress}
.legal{margin-top:9px;text-align:center;font-size:12px;color:var(--suave);
       display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.4}
.legal svg{flex:0 0 13px;opacity:.7}
.aviso{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:14px;display:none}
.aviso.mal{display:block;background:#fdeaea;color:#8d2020;border:1px solid #f3c7c7}

/* En escritorio sí hay sitio para la tarjeta y para poner la imagen al lado */
@media (min-width:880px){
  .hero{padding:26px 0 0}
  .hero__dos{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;
             align-items:center;text-align:left;margin-top:16px}
  .hero__dos .cartel{margin:0}
  .forma{margin:0;max-width:none;border-radius:18px;padding:22px 22px 18px;
         background:linear-gradient(180deg,rgba(var(--verde),.16),rgba(var(--verde),.06)),var(--crema-2);
         border:1px solid rgba(var(--verde),.38);
         box-shadow:var(--sombra-alta)}
  .fecha{text-align:left}
}

/* ── SECCIONES ────────────────────────────────────────────────────────── */
.seccion{padding:40px 0}
.seccion--tinta{background:var(--tinta);color:var(--crema)}
.rotulo{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.2em;
        color:var(--oro);margin-bottom:9px}
.seccion h2{text-align:center;color:var(--tinta);font-size:clamp(24px,5.5vw,36px);
            margin-bottom:18px;line-height:1.14}
.seccion--tinta h2{color:var(--crema-2)}
.gancho{max-width:700px;margin:0 auto 22px;text-align:center;
        font-size:clamp(18px,4.4vw,25px);line-height:1.4;color:var(--tinta);
        font-family:"DM Serif Display",Georgia,serif}
.gancho em{font-style:italic;color:var(--oro)}
.lista{max-width:720px;margin-inline:auto;display:grid;gap:8px;padding:0}
.lista li{list-style:none;display:flex;gap:11px;align-items:flex-start;
          background:var(--crema-2);border:1px solid var(--linea);
          border-radius:12px;padding:13px 15px;font-size:15.5px;line-height:1.48}
.lista svg{flex:0 0 18px;margin-top:2px;color:var(--oro)}

.diana{display:grid;gap:20px;align-items:center;max-width:840px;margin-inline:auto}
@media (min-width:760px){.diana{grid-template-columns:300px 1fr;gap:36px}}
/* 🔑 LA FOTO SALE DEL CUADRO, no va dentro.
   El recorte de Diana es vertical, así que metido en una caja cuadrada
   quedaba pequeño y descentrado. Ahora el cuadro es solo un FONDO que llega
   al 74% de la altura y la foto se apoya en su base: la cabeza sobresale por
   arriba y eso le da el volumen. Por eso no hay `overflow:hidden` —lo
   recortaría justo por donde tiene que salir— y la foto va `relative` para
   quedar por encima del fondo. */
.diana__foto{position:relative;width:min(300px,76vw);margin:0 auto;
             padding-top:6px}
.diana__foto::before{content:"";position:absolute;left:0;right:0;bottom:0;
             height:74%;border-radius:22px;
             background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
             border:1px solid rgba(255,255,255,.18)}
.diana__foto img{position:relative;width:100%;display:block;
             filter:drop-shadow(0 14px 26px rgba(0,0,0,.38))}
.diana p{margin-bottom:12px;color:rgba(246,241,228,.88);font-size:15.5px}
.diana h3{font-size:26px;color:var(--crema-2);margin-bottom:3px}
.diana .cargo{font-size:11px;letter-spacing:.14em;color:var(--oro-claro);
              font-weight:600;margin-bottom:13px}
.cita{border-left:3px solid var(--oro);padding:3px 0 3px 14px;
      font-family:"DM Serif Display",Georgia,serif;font-style:italic;
      font-size:18px;line-height:1.4;color:var(--crema-2)}

.cierre{text-align:center;padding:42px 0 38px}
.cierre h2{margin-bottom:14px}
.cierre p{max-width:520px;margin:0 auto 18px;color:var(--suave)}
.cta-a{display:inline-block;padding:17px 32px;border-radius:13px;
       background:var(--tinta);color:#fff;text-decoration:none;
       font-weight:700;font-size:17px;box-shadow:0 8px 20px -10px rgba(13,60,79,.85)}
.cta-a:hover{background:#0a3142}

footer{background:var(--tinta);color:rgba(246,241,228,.62);text-align:center;
       padding:22px 16px;font-size:13px;line-height:1.7}
footer b{color:var(--crema-2);font-weight:600}

/* ── BARRA FIJA ───────────────────────────────────────────────────────── */
/* `fixed` y de alto constante: pegada al flujo y cambiando de alto hace
   temblar el scroll en móvil. */
/* 🔑 La barra NO se ve mientras el formulario está en pantalla: ahí el CTA
   ya está delante y la barra solo tapaba la línea de «cero spam». Aparece
   cuando el formulario sale por arriba. Se mueve con `transform`, que no
   recalcula el diseño y por tanto no hace temblar el scroll. */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:40;
       transform:translateY(110%);transition:transform .25s ease;
       will-change:transform;
       background:rgba(13,60,79,.97);backdrop-filter:blur(8px);
       padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
       display:flex;align-items:center;gap:12px;
       box-shadow:0 -6px 24px -10px rgba(0,0,0,.5)}
.barra.sale{transform:translateY(0)}
.barra__t{flex:1;min-width:0;color:var(--crema-2);line-height:1.25}
.barra__t b{display:block;font-size:14px;font-weight:700}
.barra__t small{font-size:11.5px;color:var(--oro-claro);letter-spacing:.03em;
                font-variant-numeric:tabular-nums}
.barra__b{flex:0 0 auto;padding:12px 20px;border-radius:11px;background:var(--oro);
          color:#2a1f08;font-weight:700;font-size:15px;text-decoration:none}
@media (min-width:880px){.barra{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══════════════ PÁGINA DE GRACIAS ══════════════
   Acotado bajo `body.gracias`. Sin acotar, `body`, `.cartel` y `footer`
   —que existen en las dos páginas— ganaban aquí por ir después en el
   fichero y rompían la landing sin dar la cara.
   El bloque `.paso` es el del grupo de WhatsApp: va arriba y es lo único
   pulsable de esa página, porque es el paso que sube la asistencia. */
body.gracias{margin:0;background:var(--crema);color:var(--texto);
     font:400 17px/1.6 Montserrat,system-ui,sans-serif;
     min-height:100svh;display:flex;flex-direction:column}
body.gracias .env{width:min(100% - 32px,680px);margin-inline:auto}
body.gracias main{flex:1;padding:30px 0 44px;text-align:center}
body.gracias .tic{position:relative;width:112px;height:112px;margin:0 auto 16px}
body.gracias .tic img{width:100%;height:100%;border-radius:50%;object-fit:cover;
     object-position:50% 10%;background:rgba(13,60,79,.06);
     border:3px solid var(--crema-2);box-shadow:0 10px 26px -10px rgba(13,60,79,.45)}
/* el sello, encima y a la derecha: confirma sin tapar la cara */
body.gracias .tic__ok{position:absolute;right:-2px;bottom:2px;width:36px;height:36px;
     border-radius:50%;background:var(--tinta);border:3px solid var(--crema);
     display:grid;place-items:center}
body.gracias .tic__ok svg{width:17px;height:17px;color:var(--oro-claro)}
/* 🚨 EL MÍNIMO DEL CLAMP MANDABA EN TODOS LOS MÓVILES. Con
   `clamp(28px,6.6vw,44px)`, el 6.6vw solo supera los 28 px a partir de 424 px
   de ancho: en cualquier teléfono real el título se quedaba clavado en 28 y
   «Tu lugar está reservado» medía casi 300 px, comiéndose el margen derecho.
   Y no lo caza medir el elemento —su caja sí respeta los 16 px—, solo se ve
   pintando una guía en el borde.
   Ahora el mínimo baja a 24 y el factor sube a 7.2vw: a 390 px sigue dando
   los mismos 28, y por debajo encoge en vez de desbordarse. */
body.gracias h1{color:var(--tinta);font-size:clamp(24px,7.2vw,44px);
  line-height:1.1;margin-bottom:10px;text-wrap:balance}
body.gracias .sub{color:var(--suave);font-size:17px;max-width:520px;margin:0 auto 22px}
/* El relleno lateral baja a 14 px: con 20, el botón quedaba a 37 px del
   borde de la pantalla mientras las demás tarjetas ponen su texto a 31, y
   se veía estrecho y descolgado. Con 14 el botón cae a 30 y alinea con el
   texto de los pasos de abajo. */
body.gracias .paso{background:var(--crema-2);border:1px solid var(--linea);
  border-radius:20px;padding:20px 14px 16px;box-shadow:var(--sombra-alta);
  text-align:left}
body.gracias .paso p.rot{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--oro);
            margin-bottom:8px;text-align:center}
body.gracias .paso h2{font-size:23px;color:var(--tinta);text-align:center;margin-bottom:8px;line-height:1.2}
body.gracias .paso .por{color:var(--suave);font-size:15px;text-align:center;margin-bottom:16px}
body.gracias .wa{display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:17px 18px;border-radius:14px;background:var(--wa);
    color:#06381c;font-weight:700;font-size:17px;text-decoration:none;
    box-shadow:0 10px 26px -12px rgba(37,211,102,.9)}
body.gracias .wa:hover{background:#1fbf5c}
body.gracias .wa svg{width:21px;height:21px}
body.gracias .ficha{margin-top:22px;display:grid;gap:10px}
body.gracias .ficha div{display:flex;gap:12px;align-items:flex-start;background:var(--crema-2);
           border:1px solid var(--linea);border-radius:13px;padding:13px 15px;
           text-align:left;font-size:15.5px;line-height:1.45}
body.gracias .ficha svg{flex:0 0 19px;margin-top:2px;color:var(--oro)}
body.gracias .ficha b{color:var(--tinta)}
body.gracias .reloj{margin-top:18px;font-size:14px;color:var(--suave);
       font-variant-numeric:tabular-nums}
body.gracias .reloj b{color:var(--tinta)}
/* 🚨 `width:100%` NO SOBRA. Con solo `max-width:560px`, una imagen toma su
   ancho NATURAL (1100 px) recortado a 560 e IGNORA que su contenedor mide
   544: se salía 16 px por la derecha y se comía el margen. Con `width:100%`
   se ajusta al padre y el max-width solo actúa de tope en pantallas grandes.
   `height:auto` por lo mismo de siempre: sin él, el banner se deforma. */
body.gracias .cartel{display:block;width:100%;height:auto;max-width:560px;margin:24px auto 0;border-radius:16px;overflow:hidden;box-shadow:var(--sombra-alta)}
body.gracias footer{background:var(--tinta);color:rgba(246,241,228,.62);text-align:center;
       padding:22px 16px;font-size:13px;line-height:1.7}
body.gracias footer b{color:var(--crema-2);font-weight:600}
@media (prefers-reduced-motion:reduce){body.gracias *{animation:none!important;transition:none!important}}


/* ── gracias · los bloques del paso con Arianna ─────────────────────────── */
body.gracias .porque{margin-top:12px;font-size:14px;line-height:1.5;
  color:var(--suave);text-align:center}
body.gracias .quien{margin-top:20px;padding:16px 18px;border-radius:14px;
  background:rgba(13,60,79,.05);border:1px solid var(--linea)}
body.gracias .quien p{font-size:15.5px;line-height:1.55;text-align:left}
body.gracias .quien b{color:var(--tinta)}
body.gracias .rot--solo{margin:26px 0 10px}
body.gracias .pasos{margin:0;padding:0;list-style:none;counter-reset:p;
  display:grid;gap:9px;text-align:left}
body.gracias .pasos li{counter-increment:p;position:relative;
  padding:13px 15px 13px 46px;background:var(--crema-2);
  border:1px solid var(--linea);border-radius:13px;
  font-size:15.5px;line-height:1.48}
body.gracias .pasos li::before{content:counter(p);position:absolute;
  left:14px;top:13px;width:21px;height:21px;border-radius:50%;
  background:var(--tinta);color:var(--crema-2);font-size:12px;font-weight:700;
  display:grid;place-items:center}
body.gracias .pasos b{color:var(--tinta)}
body.gracias .firma{margin:26px 0 0;text-align:center;font-size:16px;
  color:var(--suave);line-height:1.6}
body.gracias .firma b{font-family:"DM Serif Display",Georgia,serif;
  font-size:21px;color:var(--tinta);font-weight:400}
body.gracias .respaldo{margin-top:20px;padding:13px 15px;border-radius:12px;
  background:rgba(198,163,93,.12);border:1px solid rgba(198,163,93,.35);
  font-size:14px;line-height:1.5;color:var(--texto);text-align:left}
body.gracias .respaldo b{color:var(--tinta);white-space:nowrap}