/* ============================================================
   Dental Express México — portada estática
   Sistema de marca extraído del Elementor original:
     primario #005795 · rojo #D14B48 (accion #B93A37) · teal #A0C7CA
     tinta #212121 · gris #757575 · azul claro #1976D2
   Tipografía original: Inter (títulos) + Barlow (texto)
   ============================================================ */

:root{
  --primario:#005795;
  --primario-osc:#00406E;
  --primario-claro:#1976D2;
  /* Rojo de marca. #D14B48 es el declarado en el Elementor del sitio; para
     botones con texto blanco se usa #B93A37, que esta dentro de la familia de
     rojos del logotipo (#B43030–#C03030) y si alcanza el contraste AA (5.64:1).
     El naranja que habia antes NO era color de marca: era el relleno de las
     estrellas del widget de resenas de Google. */
  --rojo:#D14B48;
  --accion:#B93A37;
  --accion-osc:#A83230;
  --teal:#A0C7CA;
  --teal-suave:#E8F1F2;
  --wa:#25D366;
  --tinta:#212121;
  /* #757575 daba 4.61:1 sobre blanco pero 4.32:1 sobre el gris de
     seccion, por debajo de AA. #616161 da 6.19 y 5.81. Los 21 usos
     del token son de texto, ninguno de borde ni de fondo. */
  --gris:#616161;
  --gris-claro:#BDBDBD;
  --linea:#E2E8EC; --borde-campo:#848E96; --ayuda:#616161;
  --papel:#FFFFFF;
  --papel-gris:#F5F8FA;

  --tit:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --txt:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;

  --env:1200px;
  --r:10px;
  --sombra:0 1px 2px rgba(16,32,48,.06),0 8px 24px rgba(16,32,48,.07);
  --sombra-alta:0 2px 4px rgba(16,32,48,.08),0 18px 48px rgba(16,32,48,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:106.25%}   /* 17px de raíz */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--txt);font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primario)}
/* Escala calcada de la home original (Inter 700):
   hero 68px · seccion 48px · subtitulo 36px, con su interlineado.
   Se sube un punto en los tamanos intermedios porque el original
   se queda corto en pantallas grandes. */
h1,h2,h3,h4{font-family:var(--tit);font-weight:700;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(2rem,3.9vw,3.1rem);line-height:1.1;letter-spacing:-.022em}
h3{font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.2;letter-spacing:-.015em}
h4{font-size:1.2rem;line-height:1.25;letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.env{width:100%;max-width:var(--env);margin:0 auto;padding:0 clamp(18px,4vw,32px)}
/* Centrar el texto no centra la caja. Con .parrafo (58ch) y .nota-precio
   (62ch) el bloque se quedaba pegado a la izquierda y el texto se centraba
   DENTRO de esa caja estrecha, no dentro de la sección: parecía desalineado
   respecto a todo lo demás. margin-inline:auto no hace nada donde el
   elemento ya ocupa el ancho completo, así que es seguro ponerlo aquí. */
.centro{text-align:center;margin-inline:auto}
.centro-flex{justify-content:center}

.saltar{position:absolute;left:-9999px;top:0;background:var(--primario);color:#fff;padding:12px 18px;z-index:200}
.saltar:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accion);outline-offset:2px;border-radius:4px}

.eyebrow{
  font-family:var(--tit);font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primario);margin-bottom:12px;
}
.eyebrow-claro{color:var(--teal)}

/* ── BOTONES ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--txt);font-weight:600;font-size:1.02rem;letter-spacing:.04em;
  padding:16px 28px;border-radius:var(--r);border:2px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-wa{background:var(--wa);color:#0B3D22;box-shadow:0 4px 14px rgba(37,211,102,.32)}
.btn-wa:hover{background:#1FBF5B}
.btn-tel{background:var(--primario);color:#fff;box-shadow:0 4px 14px rgba(0,87,149,.28)}
.btn-tel:hover{background:var(--primario-osc)}
.btn-accion,.btn-naranja{background:var(--accion);color:#fff;box-shadow:0 4px 14px rgba(185,58,55,.3)}
.btn-accion:hover,.btn-naranja:hover{background:var(--accion-osc)}
.btn-fantasma{background:transparent;color:var(--primario);border-color:var(--linea)}
.btn-fantasma:hover{border-color:var(--primario);background:var(--teal-suave)}
.btn-fantasma-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-fantasma-claro:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-lg{padding:19px 34px;font-size:1.12rem}
.btn-sm{padding:11px 17px;font-size:.94rem;border-radius:8px}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--tit);font-weight:700;
  font-size:.95rem;text-decoration:none;margin-top:20px;color:var(--primario);
}
.enlace-flecha::after{content:"→";transition:transform .18s ease}
.enlace-flecha:hover::after{transform:translateX(4px)}

/* ── BARRA STICKY ──────────────────────────────────── */
#barra-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:10px;
  padding:10px clamp(12px,3vw,22px);
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);box-shadow:0 -4px 22px rgba(16,32,48,.1);
  transform:translateY(110%);
}
#barra-sticky .bs-txt{
  flex:1;font-size:.96rem;color:var(--gris);
}
#barra-sticky .bs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;border-radius:8px;min-height:44px;white-space:nowrap;
  font-family:var(--tit);font-weight:700;font-size:.92rem;text-decoration:none;
}
#barra-sticky .bs-btn svg{width:18px;height:18px;fill:currentColor}
.bs-wa{background:var(--wa);color:#0B3D22}
.bs-tel{background:var(--primario);color:#fff}
@media (max-width:600px){
  #barra-sticky .bs-txt{display:none}
  #barra-sticky .bs-btn{flex:1;justify-content:center}
}

/* ── CABECERA ──────────────────────────────────────── */
.cab{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--linea)}
.cab-in{display:flex;align-items:center;gap:clamp(14px,3vw,34px);min-height:74px}
.logo{flex:none;display:block}
.logo img{width:auto;height:44px}
.nav{display:flex;gap:clamp(12px,2vw,26px);flex:1}
.nav a{
  font-family:var(--txt);font-weight:600;font-size:1.02rem;color:var(--tinta);
  text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--primario);border-bottom-color:var(--primario)}
.cab-tel{display:flex;gap:20px}
.cab-tel a{display:flex;flex-direction:column;text-decoration:none;line-height:1.25}
.cab-tel b{font-family:var(--tit);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:700}
.cab-tel span{font-family:var(--tit);font-weight:700;font-size:1.05rem;color:var(--primario)}
.menu-btn{display:none;background:none;border:0;padding:10px;cursor:pointer;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--tinta);border-radius:2px}
#nav-movil{display:flex;flex-direction:column;border-top:1px solid var(--linea);background:#fff}
#nav-movil[hidden]{display:none}
#nav-movil a{padding:14px clamp(18px,4vw,32px);border-bottom:1px solid var(--linea);text-decoration:none;font-family:var(--tit);font-weight:600;color:var(--tinta)}

@media (max-width:1000px){
  .nav,.cab-tel{display:none}
  .menu-btn{display:flex;margin-left:auto}
}

/* ── SECCIONES ─────────────────────────────────────── */
.seccion{padding:clamp(56px,8vw,104px) 0}
.seccion-gris{background:var(--papel-gris)}
.seccion-osc{background:linear-gradient(160deg,var(--primario-osc) 0%,var(--primario) 60%,#1976D2 100%);color:#fff}
.seccion-osc h2{color:#fff}
.cab-sec{max-width:620px;margin:0 auto clamp(34px,5vw,54px);text-align:center}
.parrafo{font-size:1.14rem;line-height:1.68;color:var(--gris);margin-top:18px;max-width:58ch}
.parrafo-claro{color:rgba(255,255,255,.86)}
.parrafo.centro{margin-left:auto;margin-right:auto}
.nota-precio{font-size:.9rem;color:var(--gris);margin-top:14px;max-width:62ch}
.seccion-osc .nota-precio{color:rgba(255,255,255,.65)}

.dos-col > *{min-width:0}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.dos-col-inv .col-3d{order:2}
@media (max-width:900px){
  .dos-col{grid-template-columns:1fr}
  .dos-col-inv > *:first-child{order:2}
  .dos-col-inv .col-3d{order:1}
}
.fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.fig img{width:100%;height:auto}

.lista-check{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.lista-check li{position:relative;padding-left:34px;color:var(--gris);font-size:1.08rem;line-height:1.55}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.42em;width:19px;height:19px;border-radius:50%;
  background:var(--teal-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23005795'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}
.lista-check strong{color:var(--tinta)}

/* ── HERO ──────────────────────────────────────────── */
.hero{
  padding-top:clamp(38px,5vw,64px);
  background:
    radial-gradient(1100px 480px at 88% -8%,var(--teal-suave) 0%,transparent 62%),
    linear-gradient(180deg,#fff 0%,var(--papel-gris) 100%);
}
/* ESTRUCTURA DEL HERO — dos comportamientos distintos, y el porqué.

   EN ESCRITORIO la columna izquierda es UNA sola celda. Antes eran dos
   filas de rejilla con el formulario ocupando ambas, y eso abría un hueco
   muerto: el formulario mide más de 1300px, la rejilla repartía esa altura
   entre las dos filas y los botones caían 190px por debajo de los precios.
   Medido a 1440px. Con una envoltura propia, el lado izquierdo fluye
   seguido y el formulario ya no manda sobre su altura.

   EN MÓVIL la envoltura desaparece con display:contents y los tres bloques
   vuelven a ser celdas, para poder ordenarlos gancho → formulario →
   refuerzo. Sin eso el formulario quedaba a dos pantallas de scroll. */
.hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,4vw,56px);align-items:start;
}
.hero-izq{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,30px)}

/* La figura del equipo. Va detrás del formulario y pegada al fondo del
   hero: asoma por el borde izquierdo del formulario sin tapar nada.
   Solo desde 1200px, que es donde hay hueco de sobra; por debajo el
   formulario ocupa el ancho útil y meterla sería estorbar. */
.hero-persona{display:none}
@media (min-width:1200px){
  .hero-grid{position:relative}
  .hero-persona{
    display:block;position:absolute;z-index:0;
    bottom:0;left:calc(54% - 212px);
    width:clamp(240px,20vw,300px);pointer-events:none;
    filter:drop-shadow(0 12px 28px rgba(16,32,48,.18));
  }
  .hero-persona img{width:100%;height:auto;display:block}
  /* El formulario y el texto por delante de ella */
  .hero-izq,.hero-form{position:relative;z-index:1}
}
@media (prefers-reduced-motion:reduce){.hero-persona{filter:none}}
.hero-grid > *,.hero-izq > *{min-width:0}

@media (max-width:980px){
  .hero-izq{display:contents}
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:"gancho" "form" "refuerzo";
    gap:26px;
  }
  .hero-gancho{grid-area:gancho}
  .hero-refuerzo{grid-area:refuerzo}
  .hero-form{grid-area:form}
}

.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--primario);display:block}
.entrada{font-size:1.22rem;line-height:1.6;color:var(--gris);max-width:54ch}
.entrada strong{color:var(--tinta);font-weight:600}

.hero-precios{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:26px 0 0;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
}
.hero-precios li{background:#fff;padding:15px 14px;display:flex;flex-direction:column;gap:2px}
.p-usd{font-family:var(--tit);font-size:1.95rem;font-weight:700;color:var(--primario);line-height:1;letter-spacing:-.02em}
.p-mxn{font-size:.86rem;color:var(--gris-claro);font-weight:600}
.p-tit{font-size:.92rem;color:var(--gris);margin-top:4px;line-height:1.35}
.p-tit em{font-style:normal;color:var(--accion-osc);font-weight:600}
@media (max-width:520px){.hero-precios{grid-template-columns:1fr}}

/* Jerarquia de color en el hero.

   Habia tres botones de relleno pleno compitiendo entre si, y el rojo
   duplicaba el del boton de enviar: dos acciones primarias en la misma
   pantalla no son dos, son ninguna. El rojo se reserva para enviar el
   formulario, que es la conversion. Estos tres pasan a contorno, con su
   color de marca en el texto y el borde: se reconocen igual, ocupan
   menos y dejan de gritar. */
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
/* Padding lateral justo: con la fuente subida al 6%, los tres botones
   sumaban 599px en una columna de 583 y el tercero caía a otra línea.
   Se recorta el relleno, no el tamaño de letra. */
.hero-ctas .btn{
  padding:13px 14px;font-size:.97rem;border-width:1.5px;box-shadow:none;
}
.hero-ctas .btn-accion{background:transparent;color:var(--accion-osc);border-color:var(--accion)}
.hero-ctas .btn-accion:hover{background:var(--accion);color:#fff}
/* #1FBF5B solo daba 2.42:1 y un borde es un componente de interfaz:
   necesita 3:1 por 1.4.11. #1AA84E da 3.11 y sigue leyendose verde
   de WhatsApp. El relleno del hover conserva el verde de marca. */
.hero-ctas .btn-wa{background:transparent;color:#0B6B37;border-color:#1AA84E}
.hero-ctas .btn-wa:hover{background:var(--wa);color:#08351C}
.hero-ctas .btn-tel{background:transparent;color:var(--primario);border-color:var(--primario)}
.hero-ctas .btn-tel:hover{background:var(--primario);color:#fff}
/* Las dos cifras que sostienen la propuesta. Iban en texto corrido y
   se perdían entre el resto; ahora la cifra manda y la frase la explica. */
.hero-confianza{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,26px);
  margin-top:30px;padding-top:26px;border-top:1px solid var(--linea);
}
.hero-confianza li{display:flex;flex-direction:column;gap:4px}
.hc-cifra{
  font-family:var(--tit);font-weight:700;color:var(--primario);
  font-size:clamp(2.6rem,4.6vw,3.5rem);line-height:.95;letter-spacing:-.035em;
}
.hc-pie{font-size:1rem;line-height:1.35;color:var(--gris)}
@media (max-width:400px){
  .hero-confianza{grid-template-columns:1fr;gap:18px}
  .hc-pie br{display:none}
}

/* ── FORMULARIO INLINE ─────────────────────────────── */
.hero-form{
  background:#fff;border:1px solid var(--linea);border-radius:14px;
  box-shadow:var(--sombra-alta);overflow:hidden;position:sticky;top:96px;
}
@media (max-width:980px){.hero-form{position:static;top:auto}}
.ff-cab{background:var(--primario);color:#fff;padding:20px 24px}
.ff-cab h2{font-size:1.48rem;color:#fff;margin-bottom:5px}
.ff-cab p{font-size:.88rem;color:rgba(255,255,255,.84);line-height:1.45}
#form-cita{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.campo-fila{grid-template-columns:1fr}}
.campo label{font-family:var(--tit);font-size:.86rem;font-weight:700;color:var(--tinta)}
/* Solo el asterisco de obligatorio. Sin acotar a [aria-hidden] esta
   regla pintaba de rojo el texto de todas las pastillas, que también
   son <label> dentro de .campo. */
.campo label > span[aria-hidden]{color:var(--rojo)}
.campo input,.campo select{
  font-family:var(--txt);font-size:1.05rem;padding:14px 14px;min-height:48px;
  border:1.5px solid var(--borde-campo);border-radius:8px;background:#fff;color:var(--tinta);
  width:100%;transition:border-color .15s ease,box-shadow .15s ease;
}
.campo input:focus,.campo select:focus{
  outline:none;border-color:var(--primario);box-shadow:0 0 0 3px rgba(0,87,149,.13);
}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:var(--rojo)}
.campo input::placeholder{color:var(--gris-claro)}
.ff-legal{font-size:.82rem;color:var(--ayuda);line-height:1.45}
.btn-enviar{background:var(--accion);color:#fff;width:100%;padding:15px;font-size:1.02rem}
.btn-enviar:hover{background:var(--accion-osc)}
.btn-enviar[disabled]{opacity:.65;cursor:progress}
.spin{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}
.ff-alt{font-size:.87rem;color:var(--gris);text-align:center}
.ff-msg{font-size:.9rem;line-height:1.5;padding:0}
.ff-msg.ok{color:#1B7A4B;background:#E8F6EE;padding:12px 14px;border-radius:8px}
.ff-msg.err{color:#A32B27;background:#FCECEB;padding:12px 14px;border-radius:8px}

/* ── COMPARATIVA DE PRECIO ─────────────────────────── */
.precio-comparado{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.pc-item{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  border-radius:var(--r);padding:15px 14px;display:flex;flex-direction:column;gap:3px;
}
.pc-nuestro{background:#fff;border-color:#fff}
.pc-et{font-family:var(--tit);font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pc-nuestro .pc-et{color:var(--primario)}
.pc-val{font-family:var(--tit);font-size:1.78rem;font-weight:700;color:#fff;line-height:1.05;letter-spacing:-.02em}
.pc-val small{font-size:.6em;font-weight:600;margin-left:3px;opacity:.75}
.pc-nuestro .pc-val{color:var(--primario)}
.pc-gris{color:rgba(255,255,255,.62)!important;text-decoration:line-through;text-decoration-thickness:1.5px}
.pc-sub{font-size:.78rem;color:rgba(255,255,255,.6)}
.pc-nuestro .pc-sub{color:var(--gris)}
@media (max-width:640px){.precio-comparado{grid-template-columns:1fr}}

/* ── ESCENA 3D ─────────────────────────────────────── */
.col-3d{text-align:center}
#escena-dental{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 42% 34%,rgba(255,255,255,.22) 0%,rgba(160,199,202,.16) 44%,rgba(0,64,110,.28) 100%);
}
#escena-dental img{width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
#escena-dental canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.pie-3d{font-size:.83rem;color:rgba(255,255,255,.68);margin-top:14px}

/* ── PROCESO ───────────────────────────────────────── */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,26px);position:relative}
@media (max-width:1080px){.pasos{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.pasos{grid-template-columns:1fr}}
.paso{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  padding:26px 22px;display:flex;flex-direction:column;gap:9px;
}
.paso-n{
  font-family:var(--tit);font-size:.9rem;font-weight:700;color:#fff;background:var(--primario);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:5px;
}
.paso h3{font-size:1.18rem}
.paso p{font-size:1.03rem;line-height:1.55;color:var(--gris)}

/* ── SERVICIOS ─────────────────────────────────────── */
.rejilla-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.rejilla-serv{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rejilla-serv{grid-template-columns:1fr}}
.serv{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:22px 20px;
  text-decoration:none;display:flex;flex-direction:column;gap:5px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.serv:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--teal)}
.serv h3{color:var(--tinta);font-size:1.15rem}
.serv-meta{font-size:.88rem;color:var(--accion-osc);font-weight:600;font-family:var(--tit)}
.serv-precio{margin-top:10px;font-family:var(--tit);font-weight:700;font-size:1.28rem;color:var(--primario);letter-spacing:-.02em}
.serv-precio small{font-weight:600;font-size:.66em;color:var(--gris);margin-left:4px}

/* ── CLÍNICAS ──────────────────────────────────────── */
.rejilla-clinicas{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){.rejilla-clinicas{grid-template-columns:1fr}}
.clinica{background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.clinica img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cl-body{padding:22px}
.cl-dir{font-size:1.01rem;color:var(--gris);margin-top:9px;line-height:1.55}
.cl-rating{margin-top:12px;font-size:.93rem;color:var(--gris)}
.cl-rating b{font-family:var(--tit);font-size:1.14rem;color:var(--tinta);font-weight:700}
.cl-ctas{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}

/* ── RESEÑAS ───────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════
   RESEÑAS CON LA GRAMÁTICA DE GOOGLE
   ----------------------------------------------------------
   Se copia la ESTRUCTURA de la tarjeta de reseña de Google —la
   que el visitante ya sabe leer— pero no su chapa: sin logotipo,
   sin dar a entender que es un feed en vivo.

   DOS DESVIACIONES DELIBERADAS, y por qué:

   1. EL ÁMBAR. Google usa #FBBC04, que sobre blanco da 1.71:1 y
      no llega al 3:1 que pide WCAG 1.4.11 para gráficos que
      transmiten información. Con público de 55-70 años y
      sensibilidad al contraste reducida, eso no es un detalle.
      Y son CARACTERES, no un gráfico: el navegador las mide como
      texto, así que el mínimo no es 3:1 sino 4.5:1. Se usa #B06000,
      que da 4.65:1 sobre blanco. Más oscuro que el ámbar de Google,
      pero legible para quien tiene que leerlo. Además la valoración va SIEMPRE en texto
      (aria-label y la nota numérica), así que el color no es
      nunca el único portador del dato.
      Este ámbar vive encerrado en .gres-estrellas: no es color de
      marca y no puede filtrarse al resto del sistema.

   2. EL TAMAÑO. Google pone el cuerpo a 14px. Aquí el suelo son
      16px por el público, así que la tarjeta es más grande que la
      original. Se prefiere legible a idéntica.
   ══════════════════════════════════════════════════════════ */

.gres-notas{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;
}
.gres-nota{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:#fff;border:1px solid var(--linea);border-radius:12px;
  padding:14px 22px;min-height:44px;transition:border-color .15s ease,box-shadow .15s ease;
}
.gres-nota:hover{border-color:var(--primario);box-shadow:var(--sombra)}
.gres-nota-n{
  font-family:var(--tit);font-weight:700;font-size:2.2rem;color:var(--tinta);
  line-height:1;letter-spacing:-.03em;
}
.gres-nota-d{display:flex;flex-direction:column;gap:1px}
.gres-nota-d b{font-family:var(--tit);font-weight:700;font-size:1rem;color:var(--tinta)}
.gres-nota-d small{font-size:.88rem;color:var(--ayuda)}

/* La fila de estrellas. El glifo va en un <span aria-hidden> y la
   valoración de verdad viaja en el aria-label del contenedor. */
.gres-estrellas{display:inline-flex;line-height:1}
.gres-e{color:#B06000;letter-spacing:.06em;font-size:1.02rem}

.rejilla-res{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px;
  align-items:start;
}
.rejilla-res > *{min-width:0}
@media (max-width:980px){.rejilla-res{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.rejilla-res{grid-template-columns:1fr}}

.gres{
  background:#fff;border:1px solid var(--linea);border-radius:12px;
  padding:20px 22px 22px;display:flex;flex-direction:column;gap:11px;
}
.gres-cab{display:flex;align-items:center;gap:12px}

/* Avatar de inicial, como el de Google cuando no hay foto: círculo
   liso y la letra en blanco. Los colores salen de la familia de la
   marca, no de la de Google, y todos pasan 4.5:1 con blanco. */
.gres-avatar{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  font-family:var(--tit);font-weight:700;font-size:1.1rem;line-height:1;
}
.gres-av1{background:#005795}
.gres-av2{background:#3D6B5A}
.gres-av3{background:#7B4F9D}
.gres-av4{background:#00406E}
.gres-av5{background:#B93A37}
.gres-av6{background:#5F6368}

.gres-quien{display:flex;flex-direction:column;gap:1px;min-width:0}
.gres-nombre{font-family:var(--tit);font-weight:700;font-size:1.02rem;color:var(--tinta)}
.gres-perfil{font-size:.86rem;color:var(--ayuda);line-height:1.3}

.gres-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gres-fecha{font-size:.88rem;color:var(--ayuda)}

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

.gres-pie{
  font-size:.94rem;line-height:1.6;color:var(--ayuda);text-align:center;
  max-width:76ch;margin:0 auto;
}
.gres-pie a{color:var(--primario);font-weight:600}

/* ── CIERRE ────────────────────────────────────────── */
.cierre{background:linear-gradient(140deg,var(--primario-osc),var(--primario) 70%);color:#fff}
.cierre h2{color:#fff;max-width:18ch;margin:0 auto}
.cierre .hero-ctas{margin-top:30px}

/* ── PIE ───────────────────────────────────────────── */
.pie{background:var(--tinta);color:rgba(255,255,255,.72);padding:clamp(46px,6vw,70px) 0 26px;font-size:1rem}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(24px,3.5vw,44px)}
@media (max-width:900px){.pie-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie-grid{grid-template-columns:1fr}}
.pie img{filter:brightness(0) invert(1);opacity:.92;height:42px;width:auto;margin-bottom:16px}
.pie-txt{line-height:1.6;max-width:34ch}
.pie h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-weight:700}
.pie nav{display:flex;flex-direction:column;gap:9px}
.pie nav a,.pie-contacto a{color:rgba(255,255,255,.74);text-decoration:none}
.pie nav a:hover,.pie-contacto a:hover{color:#fff;text-decoration:underline}
.pie-contacto p{margin-bottom:16px;line-height:1.6}
.pie-contacto b{color:#fff;font-family:var(--tit);font-weight:700}
.pie-contacto span{color:rgba(255,255,255,.56);font-size:.88rem}
/* Eran texto suelto de 22px de alto. Ahora van en un objetivo de 44px,
   que es lo que maneja sin error un público de 55-70 años. */
.pie-social{display:flex;gap:10px;margin-top:18px}
.pie-social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.pie-social svg{width:19px;height:19px;fill:currentColor;display:block}
.pie-social a:hover{background:#fff;color:var(--primario);transform:translateY(-2px)}
.pie-social a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.pie-legal{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);font-size:.79rem;color:rgba(255,255,255,.44);line-height:1.6}
.pie-copy{margin-top:10px}
.pie-legal a{color:rgba(255,255,255,.62)}

/* ============================================================
   SECCIONES ARTÍSTICAS — capas, franjas a sangre y multimedia
   ============================================================ */

/* ── Textura de yeso reutilizada de la marca ── */
.con-textura{position:relative;isolation:isolate}
.con-textura::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/43.webp?v=1de11304") center/1200px no-repeat;
  opacity:.28;mix-blend-mode:multiply;
}

/* ── HERO con fondo tropical en capas ── */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-fondo picture,.hero-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-fondo img{will-change:transform}
.hero-velo{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,#fff 0%,rgba(255,255,255,.96) 38%,rgba(255,255,255,.72) 58%,rgba(255,255,255,.34) 100%),
    linear-gradient(180deg,rgba(255,255,255,.9) 0%,transparent 22%,transparent 72%,var(--papel-gris) 100%);
}
@media (max-width:980px){
  .hero-velo{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.92) 55%,var(--papel-gris) 100%)}
}

/* ── MOMENTO CINEMATOGRÁFICO ── */
.seccion-cine{
  position:relative;isolation:isolate;color:#fff;overflow:hidden;
  padding:clamp(80px,13vw,190px) 0;background:#070B0F;
}
.cine-media{position:absolute;inset:0;z-index:-1}
.cine-media picture,.cine-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine-media img{will-change:transform;opacity:1}
.seccion-cine::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(4,8,12,.9) 0%,rgba(4,8,12,.66) 42%,rgba(4,8,12,.12) 100%);
}
.cine-txt{max-width:660px}
.seccion-cine .parrafo-claro{color:rgba(255,255,255,.9)}
.seccion-cine h2{color:#fff;margin-bottom:18px;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.cine-datos{display:flex;gap:clamp(20px,4vw,52px);margin-top:34px;flex-wrap:wrap}
.cine-datos div{display:flex;flex-direction:column;gap:3px}
.cine-datos b{font-family:var(--tit);font-size:2.05rem;font-weight:700;color:var(--teal);letter-spacing:-.02em}
.cine-datos span{font-size:.87rem;color:rgba(255,255,255,.66)}

/* ── Video del programa de turismo ──
   Sustituye al mosaico de tres fotos. Una pieza en vez de tres deja la
   sección más limpia, que es lo que pide una portada para pautar. */
.prog-video{margin:0;display:flex;flex-direction:column;gap:11px}
.video-programa{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--r);box-shadow:var(--sombra-alta);background:#0B1218;
}
.prog-video-pie{
  font-size:.9rem;color:var(--ayuda);line-height:1.45;
}

/* ── Burbujas de fondo en la sección de zirconia ── */
.seccion-osc{position:relative;isolation:isolate;overflow:hidden}
.burbujas{position:absolute;inset:0;z-index:-1;opacity:.24;pointer-events:none}
.burbujas picture,.burbujas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.burbujas img{will-change:transform;mix-blend-mode:screen}

/* ── VIDEOS ── */
.marco-video{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra-alta);background:#0B1218}
.video-amb{width:100%;height:auto;display:block;object-fit:cover}
.video-et{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(6,12,18,.62);backdrop-filter:blur(6px);color:#fff;
  font-family:var(--tit);font-size:.74rem;font-weight:600;letter-spacing:.03em;
  padding:7px 12px;border-radius:6px;
}

/* ── DENTRO DE LA CLÍNICA ── */
.dentro-grid{
  display:grid;grid-template-columns:1.55fr .75fr .9fr;gap:18px;align-items:stretch;
}
@media (max-width:980px){
  .dentro-grid{grid-template-columns:1fr 1fr}
  .dentro-equipo{grid-column:1/-1}
}
@media (max-width:620px){.dentro-grid{grid-template-columns:1fr}}
.dentro-foto{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);background:#fff;position:relative}
.dentro-foto img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
.dentro-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 18px 14px;color:#fff;font-size:.85rem;
  background:linear-gradient(180deg,transparent,rgba(6,12,18,.82));
}
.dentro-video{border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);background:#0B1218}
.video-vertical{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;display:block}
.dentro-equipo{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
}
.dentro-equipo img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 22%}
.dentro-equipo p{padding:18px 20px 4px;display:flex;flex-direction:column;gap:2px}
.dentro-equipo b{font-family:var(--tit);font-weight:700;color:var(--tinta);font-size:1.02rem}
.dentro-equipo span{font-size:.87rem;color:var(--gris)}
.dentro-equipo .enlace-flecha{margin:6px 20px 20px}

/* ── FRANJAS A SANGRE DE LAS DOS PLAZAS ── */
.plazas{display:flex;flex-direction:column}
.plaza-franja{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding:clamp(64px,9vw,118px) 0;
}
.pf-media{position:absolute;inset:0;z-index:-1}
.pf-media picture,.pf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-media img{will-change:transform}
.plaza-franja::after{content:"";position:absolute;inset:0;z-index:-1}
.plaza-franja[data-plaza="pv"]::after{
  background:linear-gradient(88deg,rgba(0,45,78,.93) 0%,rgba(0,64,110,.82) 44%,rgba(0,87,149,.32) 100%);
}
.plaza-franja[data-plaza="ajijic"]::after{
  background:linear-gradient(272deg,rgba(28,26,54,.92) 0%,rgba(45,40,78,.8) 46%,rgba(90,70,110,.3) 100%);
}
.plaza-franja[data-plaza="ajijic"] .pf-txt{margin-left:auto;text-align:right}
.plaza-franja[data-plaza="ajijic"] .pf-ctas{justify-content:flex-end}
.pf-txt{max-width:600px}
.plaza-franja h2{color:#fff;font-size:clamp(2.2rem,5.4vw,3.7rem);margin-bottom:14px}
.pf-dir{margin-top:22px;font-size:1.03rem;color:rgba(255,255,255,.78);line-height:1.7}
.pf-dir b{font-family:var(--tit);color:#fff;font-size:1.06rem}
.pf-ctas{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
@media (max-width:760px){
  .plaza-franja[data-plaza="ajijic"] .pf-txt{margin-left:0;text-align:left}
  .plaza-franja[data-plaza="ajijic"] .pf-ctas{justify-content:flex-start}
  .plaza-franja[data-plaza="pv"]::after{background:linear-gradient(180deg,rgba(0,45,78,.9),rgba(0,64,110,.86))}
  .plaza-franja[data-plaza="ajijic"]::after{background:linear-gradient(180deg,rgba(28,26,54,.9),rgba(45,40,78,.86))}
}

/* ── CIERRE con fondo ── */
.cierre{position:relative;isolation:isolate;overflow:hidden}
.cierre-fondo{position:absolute;inset:0;z-index:-1;opacity:.2}
.cierre-fondo picture,.cierre-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cierre-fondo img{will-change:transform}
.pagos{margin:30px auto 0;opacity:.85;height:34px;width:auto}

/* ── línea de progreso del proceso (consume la variable de la coreografía) ── */
#proceso{position:relative}
@media (min-width:901px){
  .pasos::before{
    content:"";position:absolute;left:6%;right:6%;top:34px;height:2px;
    background:var(--linea);z-index:0;
  }
  .pasos::after{
    content:"";position:absolute;left:6%;top:34px;height:2px;
    width:calc(88% * var(--progreso-proceso, 0));
    background:linear-gradient(90deg,var(--primario),var(--teal));
    z-index:0;transform-origin:left center;
  }
  .paso{position:relative;z-index:1}
}

/* ============================================================
   PRECIOS "DESDE" — el gancho comercial y, con COFEPRIS de por
   medio, también la formulación correcta: nunca un precio cerrado.
   ============================================================ */
.p-desde{
  font-family:var(--tit);font-size:.62rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accion-osc);line-height:1;margin-bottom:3px;
}
.sp-desde{
  display:inline-block;font-family:var(--tit);font-size:.6rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accion-osc);
  margin-right:6px;vertical-align:.28em;
}
.pc-val i{
  font-style:normal;font-size:.42em;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin-right:5px;vertical-align:.5em;
}
.nota-precio strong{color:var(--tinta)}
.seccion-osc .nota-precio strong{color:#fff}

/* La textura, aún más discreta: debe insinuarse, no competir */
.con-textura::before{opacity:.18}

/* ── Barra de sugerencia de idioma ─────────────────── */
.barra-idioma{
  position:fixed;left:50%;bottom:78px;z-index:95;
  transform:translate(-50%,140%);opacity:0;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  max-width:min(560px,calc(100vw - 28px));
  padding:13px 18px;border-radius:12px;
  background:var(--tinta);color:#fff;box-shadow:0 12px 40px rgba(8,16,24,.3);
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .32s ease;
}
.barra-idioma.bi-visible{transform:translate(-50%,0);opacity:1}
.bi-msg{font-size:.92rem;color:rgba(255,255,255,.86)}
.barra-idioma .bi-si{
  font-family:var(--tit);font-weight:700;font-size:.88rem;text-decoration:none;
  background:#fff;color:var(--tinta);padding:9px 15px;border-radius:8px;white-space:nowrap;
}
.barra-idioma .bi-si:hover{background:var(--teal)}
.barra-idioma .bi-no{
  font-family:var(--txt);font-size:.85rem;color:rgba(255,255,255,.62);
  background:none;border:0;cursor:pointer;text-decoration:underline;padding:6px;white-space:nowrap;
}
.barra-idioma .bi-no:hover{color:#fff}
@media (prefers-reduced-motion:reduce){
  .barra-idioma{transition:opacity .2s ease}
  .barra-idioma.bi-visible{transform:translate(-50%,0)}
}
@media (max-width:520px){ .barra-idioma{bottom:74px;gap:10px} .bi-msg{width:100%;text-align:center} }

/* ── Categorías de servicio: recuperan los enlaces internos que la
   home de WordPress ya daba a esas páginas, y que no conviene perder ── */
.categorias{margin-top:34px;padding-top:26px;border-top:1px solid var(--linea)}
.cat-titulo{
  font-family:var(--tit);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris);margin-bottom:14px;text-align:center;
}
.cat-lista{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cat-lista a{
  font-family:var(--tit);font-size:.96rem;font-weight:600;text-decoration:none;
  color:var(--primario);background:#fff;border:1px solid var(--linea);
  padding:9px 16px;border-radius:99px;transition:border-color .15s ease,background .15s ease;
}
.cat-lista a:hover{border-color:var(--primario);background:var(--teal-suave)}


@media (max-width:900px){
  .con-playa::after{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9))}
}

/* ── Sello de especialistas de clase mundial ────────
   Es el argumento que mas pesa para quien viaja a otro pais
   a operarse: quien te va a atender. Va en el hero, sobre el
   pliegue, junto al precio. */
.sello-clase-mundial{
  display:flex;align-items:flex-start;gap:13px;
  margin-top:26px;padding:15px 18px;
  background:var(--teal-suave);border-left:3px solid var(--primario);
  border-radius:0 10px 10px 0;max-width:56ch;
  font-size:1.04rem;line-height:1.55;color:var(--gris);
}
.sello-clase-mundial strong{color:var(--tinta);font-weight:600}
.scm-icono{flex:none;width:26px;height:26px;border-radius:50%;background:var(--primario);
  display:grid;place-items:center;margin-top:1px}
.scm-icono svg{width:15px;height:15px;fill:#fff}

/* ── Video vertical del consultorio, en la tarjeta del equipo ── */
/* height:auto es obligatorio: sin el, el atributo height del HTML (pista de
   presentacion) gana al aspect-ratio y fija 832px a cualquier ancho, lo que
   deformaba toda la seccion "Inside the clinic" en todos los tamanos. */
.video-consultorio{
  width:100%;height:auto;aspect-ratio:464/832;object-fit:cover;display:block;background:#0B1218;
}

/* ══════════════════════════════════════════════════
   BOTÓN FLOTANTE DE WHATSAPP
   Un único punto de entrada que se despliega por sucursal.
   Antes había seis enlaces de WhatsApp compitiendo entre si.
   ══════════════════════════════════════════════════ */
/* El botón vive pegado a la esquina. Solo sube cuando la barra inferior
   entra de verdad: esa barra se dispara cuando el hero sale de pantalla, o
   sea a unos 2900px de scroll en móvil, así que reservarle sitio desde el
   principio dejaba 70px de hueco muerto durante las tres primeras
   pantallas. La clase la pone coreografia.js al mismo tiempo que anima la
   barra; sin JavaScript la barra no aparece y el botón se queda abajo,
   que es lo correcto. */
.wa-flotante{position:fixed;right:clamp(10px,1.3vw,16px);bottom:clamp(14px,2vh,20px);z-index:96;
  transition:bottom .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;
  background:var(--wa);color:#08351C;font-family:var(--tit);font-weight:700;font-size:1rem;
  padding:15px 22px;border-radius:99px;box-shadow:0 8px 28px rgba(37,211,102,.42);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.wa-btn:hover{transform:translateY(-2px);background:#1FBF5B;box-shadow:0 12px 34px rgba(37,211,102,.5)}
.wa-btn svg{width:26px;height:26px;fill:currentColor;flex:none}
.wa-cerrar{display:none}
.wa-btn[aria-expanded="true"] .wa-icono{display:none}
.wa-btn[aria-expanded="true"] .wa-cerrar{display:block}
.wa-btn[aria-expanded="true"] .wa-etiqueta{display:none}
.wa-btn[aria-expanded="true"]{padding:15px;background:var(--tinta);color:#fff;box-shadow:0 8px 28px rgba(8,16,24,.34)}

.wa-panel{
  width:min(310px,calc(100vw - 32px));background:#fff;border-radius:14px;
  box-shadow:0 18px 52px rgba(8,16,24,.24);border:1px solid var(--linea);
  padding:16px;display:flex;flex-direction:column;gap:9px;
  transform-origin:bottom right;
}
.wa-panel[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .wa-panel{animation:waAparece .22s cubic-bezier(.2,.9,.3,1)}
  @keyframes waAparece{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
}
.wa-titulo{font-family:var(--tit);font-weight:700;font-size:.98rem;color:var(--tinta);margin-bottom:3px}
.wa-op{
  display:flex;flex-direction:column;gap:2px;text-decoration:none;
  padding:12px 14px;border-radius:10px;background:var(--papel-gris);
  border:1px solid transparent;transition:border-color .15s ease,background .15s ease;
}
.wa-op:hover{border-color:var(--wa);background:#F0FBF4}
.wa-op-n{font-family:var(--tit);font-weight:700;font-size:.98rem;color:var(--tinta)}
.wa-op-d{font-size:.84rem;color:var(--gris)}
.wa-horario{font-size:.79rem;color:var(--gris-claro);text-align:center;margin-top:3px}
body.barra-dentro .wa-flotante{bottom:calc(82px + env(safe-area-inset-bottom,0px))}
@media (max-width:600px){
  .wa-flotante{right:10px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body.barra-dentro .wa-flotante{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .wa-etiqueta{display:none} .wa-btn{padding:15px}
}
@media (prefers-reduced-motion:reduce){.wa-flotante{transition:none}}

/* ── Mapas de las sucursales ── */
.pf-mapa{margin-top:26px;border-radius:12px;overflow:hidden;box-shadow:0 12px 36px rgba(4,10,18,.3);background:#0B1218}
.pf-mapa iframe{width:100%;height:clamp(220px,30vh,300px);border:0;display:block;filter:saturate(.92)}
.pf-mapa-abrir{
  display:block;padding:12px 16px;background:rgba(255,255,255,.1);color:#fff;
  font-family:var(--tit);font-weight:700;font-size:.9rem;text-decoration:none;text-align:center;
  backdrop-filter:blur(6px);transition:background .15s ease;
}
.pf-mapa-abrir:hover{background:rgba(255,255,255,.2)}

/* la barra sticky, ahora con dos teléfonos */
.bs-alt{background:transparent!important;color:var(--primario)!important;
  box-shadow:inset 0 0 0 1.5px var(--linea)}
.bs-alt:hover{box-shadow:inset 0 0 0 1.5px var(--primario)}

/* ── Aviso visual cuando el formulario tiene errores ──
   Sin esto, quien pulsa sin rellenar cree que el boton no funciona. */
@media (prefers-reduced-motion:no-preference){
  .form-error{animation:avisoError .4s cubic-bezier(.36,.07,.19,.97)}
  @keyframes avisoError{
    10%,90%{transform:translateX(-2px)}
    20%,80%{transform:translateX(4px)}
    30%,50%,70%{transform:translateX(-6px)}
    40%,60%{transform:translateX(6px)}
  }
}
.ff-msg.err{
  color:#A32B27;background:#FCECEB;padding:13px 15px;border-radius:8px;
  border-left:3px solid var(--rojo);font-weight:500;
}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{
  border-color:var(--rojo);background:#FEF7F6;
  box-shadow:0 0 0 3px rgba(209,75,72,.12);
}

/* enlace al equipo dentro del sello de especialistas */
.scm-enlace{
  display:inline-block;margin-left:4px;font-family:var(--tit);font-weight:700;
  font-size:.95rem;color:var(--primario);text-decoration:none;white-space:nowrap;
}
.scm-enlace:hover{text-decoration:underline}

/* trampa para bots: fuera de pantalla, nunca visible ni enfocable */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Valoración por foto ─────────────────────────────
   El gancho que ninguno de los tres competidores ofrece:
   captura al que todavía no quiere dejar sus datos. */
.seccion-foto{background:linear-gradient(170deg,var(--teal-suave) 0%,#fff 62%)}
.foto-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,60px);align-items:center}
@media (max-width:860px){.foto-grid{grid-template-columns:1fr}}
.foto-pasos{display:flex;flex-direction:column;gap:14px}
.foto-pasos li{
  display:flex;gap:15px;align-items:flex-start;background:#fff;
  border:1px solid var(--linea);border-radius:12px;padding:18px 20px;box-shadow:var(--sombra);
}
.fp-n{
  flex:none;width:32px;height:32px;border-radius:50%;background:var(--primario);color:#fff;
  display:grid;place-items:center;font-family:var(--tit);font-weight:700;font-size:.92rem;
}
.foto-pasos b{display:block;font-family:var(--tit);font-weight:700;color:var(--tinta);font-size:1.04rem}
/* Se acota a los <span> del texto: sin el >, esta regla pisaba el
   color blanco de .fp-n y el numero quedaba gris sobre azul (1.63:1). */
.foto-pasos li > div > span{font-size:.95rem;color:var(--gris);line-height:1.45}
.seccion-foto .btn{margin-top:24px}

/* ── Tabla comparativa de precios ── */
.tabla-comp{margin:26px 0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;overflow:hidden}
.tabla-comp table{width:100%;border-collapse:collapse;font-size:.95rem}
.tabla-comp caption{
  text-align:left;padding:15px 18px;font-family:var(--tit);font-weight:700;font-size:1.06rem;
  color:#fff;background:rgba(255,255,255,.09);
}
.tabla-comp th,.tabla-comp td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}
.tabla-comp thead th{
  font-family:var(--tit);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal);font-weight:700;white-space:nowrap;
}
.tabla-comp td{color:rgba(255,255,255,.72);white-space:nowrap}
.tabla-comp td:first-child{color:#fff;font-weight:500;white-space:normal}
.tabla-comp small{font-size:.72em;opacity:.7;margin-left:2px}
.tc-nuestro{color:#fff!important;font-family:var(--tit);font-weight:700;font-size:1.1rem}
.tc-nuestro span{display:block;font-family:var(--txt);font-weight:400;font-size:.78rem;opacity:.62;margin-top:1px}
.tabla-comp tbody tr:last-child td{border-bottom:0}
.tc-nota{padding:13px 18px;font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.5;background:rgba(0,0,0,.12)}
@media (max-width:700px){
  /* La tabla se convierte en tarjetas. El scroll horizontal en una
     tabla de precios obliga a comparar de memoria entre columnas que
     no se ven a la vez, y ese es justo el coste que peor paga un
     público de 55-70. Cada tratamiento pasa a ser una ficha con las
     tres cifras etiquetadas. */
  .tabla-comp table,.tabla-comp thead,.tabla-comp tbody,
  .tabla-comp tr,.tabla-comp th,.tabla-comp td{display:block}
  .tabla-comp thead{position:absolute;left:-9999px}
  .tabla-comp table{min-width:0}
  .tabla-comp tbody tr{
    border-bottom:1px solid rgba(255,255,255,.16);
    padding:4px 0 10px;
  }
  .tabla-comp tbody tr:last-child{border-bottom:0}
  .tabla-comp td{
    border-bottom:0;padding:7px 16px;white-space:normal;
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  }
  .tabla-comp td:first-child{
    font-family:var(--tit);font-weight:700;font-size:1.06rem;
    padding-top:14px;padding-bottom:9px;display:block;
  }
  .tabla-comp td[data-col]::before{
    content:attr(data-col);flex:0 0 auto;
    font-family:var(--tit);font-size:.76rem;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:rgba(255,255,255,.6);
  }
  .tabla-comp td.tc-nuestro{
    background:rgba(255,255,255,.1);border-radius:8px;margin:2px 10px;
    padding:11px 12px;
  }
  .tabla-comp td.tc-nuestro::before{color:#fff;opacity:.85}
  .tc-nuestro span{display:inline;margin-left:6px}
}

/* ── Formulario por bloques ─────────────────────────
   El analisis de 1,731 solicitudes reales mostro que el paciente
   SI quiere dar contexto: 1,728 escribieron un mensaje propio y el
   100% indico fecha estimada. Agrupamos para que 8 campos no
   parezcan 8, en vez de recortarlos. */
.ff-paso{
  font-family:var(--tit);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--primario);
  padding-top:6px;margin-top:4px;border-top:1px solid var(--linea);
}
#form-cita .ff-paso:first-child{border-top:0;padding-top:0;margin-top:0}

.campo-etiqueta{font-family:var(--tit);font-size:.86rem;font-weight:700;color:var(--tinta);display:block}
.campo-etiqueta span,.campo label span[aria-hidden]{color:var(--rojo)}
.campo-ayuda{font-size:.86rem;color:var(--ayuda);line-height:1.4;margin-top:2px}
.campo-opcional label .op{
  font-family:var(--txt);font-size:.74rem;font-weight:400;color:var(--gris-claro);
  text-transform:none;letter-spacing:0;margin-left:5px;
}
#form-cita textarea{
  font-family:var(--txt);font-size:1.02rem;padding:13px 14px;line-height:1.5;
  border:1.5px solid var(--borde-campo);border-radius:8px;width:100%;resize:vertical;
  min-height:104px;color:var(--tinta);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
#form-cita textarea:focus{outline:none;border-color:var(--primario);box-shadow:0 0 0 3px rgba(0,87,149,.13)}
#form-cita textarea[aria-invalid="true"]{border-color:var(--rojo);background:#FEF7F6}
#form-cita textarea::placeholder{color:var(--gris-claro);font-size:.95rem}
#form-cita input[type="date"]{font-family:var(--txt);min-height:48px}

/* ── PASTILLAS DE ELECCIÓN ──────────────────────────────────
   Sustituyen a los desplegables de clínica y al calendario nativo.

   POR QUÉ. Baymard documenta que los desplegables rinden mal por
   debajo de 5 opciones: obligan a tocar, esperar un overlay, leer
   y elegir donde bastaría un toque. Y GOV.UK desaconseja el
   calendario cuando la fecha es aproximada y a meses vista, que es
   justo este caso: el 100% de las 1,731 solicitudes puso fecha
   estimada y el pico de demanda es noviembre-marzo.

   MEDIDAS. 48px de alto y 8px de separación no son estética: con
   público de 55-70 la destreza fina ya ha empezado a caer. En un
   ensayo con mayores de 65 los botones de 9mm frente a 3mm
   retrasaron la fatiga de 78s a 129s (p<0.01). WCAG AA pide 24px,
   que aquí se queda muy corto. */
.pastillas{display:grid;gap:8px;margin-top:6px}
.pastillas-2{grid-template-columns:1fr 1fr}
.pastillas-mes{grid-template-columns:repeat(3,1fr)}
.pastilla{position:relative;cursor:pointer}
.pastilla input{position:absolute;opacity:0;width:0;height:0}
.pastilla > span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;text-align:center;min-height:48px;padding:9px 6px;border-radius:9px;
  border:1.5px solid var(--borde-campo);background:#fff;font-family:var(--tit);
  font-weight:600;font-size:.95rem;color:var(--gris);line-height:1.2;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.pastilla b{font-weight:700;font-size:.97rem;color:inherit}
.pastilla small{font-family:var(--txt);font-weight:400;font-size:.76rem;opacity:.75}
.pastilla input:checked + span{
  border-color:var(--primario);background:var(--teal-suave);color:var(--primario);
  box-shadow:inset 0 0 0 1px var(--primario);
}
.pastilla input:focus-visible + span{outline:3px solid var(--accion);outline-offset:2px}
.pastilla:hover > span{border-color:var(--primario)}
.pastilla-ancha{grid-column:1/-1}


/* ════════════════════════════════════════════════════════════
   AJUSTES RESPONSIVE — medidos, no supuestos
   ------------------------------------------------------------
   Todo lo de este bloque sale de medir la página desplegada con
   una probeta de iframe a 360, 390, 414, 480, 600, 768, 834,
   1024, 1440 y 2560px, y de la investigación de interfaz para
   público de 55-70 años. Va al final a propósito: son ajustes
   de contexto, no del sistema base, y tienen que ganar sin
   subir la especificidad.
   ════════════════════════════════════════════════════════════ */

/* ── Ficha de precio compacta en móvil ──
   Apiladas en vertical ocupaban 382px, casi media pantalla, para
   tres cifras. En horizontal caben en 150px y se comparan de un
   vistazo, que es lo que se pide de ellas. */
@media (max-width:520px){
  .hero-precios{grid-template-columns:1fr}
  .hero-precios li{
    flex-direction:row;align-items:baseline;gap:10px;
    padding:12px 14px;flex-wrap:wrap;
  }
  .p-desde{order:1;font-size:.7rem}
  .p-usd{order:2;font-size:1.72rem}
  .p-mxn{order:3;font-size:.8rem}
  .p-tit{order:4;flex-basis:100%;margin-top:0;font-size:.9rem}
}

/* ── En móvil, un solo camino ──
   Tres botones apilados sumaban 210px y repartían la atención.
   WhatsApp y teléfono ya viven en el botón flotante y en la barra
   inferior, así que aquí queda la acción que no está en ningún
   otro sitio. */
@media (max-width:600px){
  .hero-ctas{flex-direction:column;gap:10px;margin-top:22px}
  .hero-ctas .btn{width:100%}
  .hero-ctas .btn-wa,.hero-ctas .btn-tel{display:none}
}

/* ── Área táctil ──
   WCAG 2.2 AA pide 24px, que para 55-70 años se queda corto: con
   botones de 9mm frente a 3mm la fatiga tarda 129s en aparecer en
   vez de 78s (p<0.01). Objetivo aquí: 44px de alto real. El
   pseudoelemento agranda la zona sin tocar la maqueta. */
@media (max-width:1000px){
  .menu-btn{padding:14px;min-height:48px;min-width:48px;justify-content:center}
  #nav-movil a{padding-top:16px;padding-bottom:16px;min-height:52px;display:flex;align-items:center}
  .pie-grid a,.scm-enlace,.enlace-flecha,.pie-legal a{
    position:relative;display:inline-flex;align-items:center;min-height:44px;
  }
  .pie-grid li{margin:0}
  .pie-grid ul{gap:0}
}

/* ── Bloques de dos columnas ──
   Ninguna pieza de contenido puede forzar su pista: sin esto una
   tabla con min-width revienta la sección entera, que es lo que
   pasaba en #zirconia. */
.dos-col > *,.cine-txt > *,.rejilla-serv > *,.rejilla-clinicas > *{min-width:0}
.tabla-comp{max-width:100%}

/* ── La barra fija no puede tapar lo que recibe el foco ──
   WCAG 2.2 SC 2.4.11 nombra los sticky footers como causa típica
   del fallo. En iOS, safe-area-inset-bottom devuelve 0 cuando la
   barra de Safari está oculta, así que lleva valor de reserva. */
html{scroll-padding-bottom:96px}
@media (max-width:900px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  #barra-sticky{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}

/* ── Pantallas muy anchas ──
   Por encima de 1600px la medida de lectura se dispara y el ojo
   pierde el renglón. El contenedor crece, el texto no. */
@media (min-width:1600px){
  :root{--env:1340px}
  .entrada,.parrafo{max-width:58ch}
}

/* Error sobre el grupo de meses: el radio suelto no puede pintarse
   como un input, así que se marca el contenedor. */
.pastillas[aria-invalid="true"]{
  outline:2px solid var(--rojo);outline-offset:5px;border-radius:11px;
}
.pastillas[aria-invalid="true"] .pastilla > span{border-color:var(--rojo)}

/* Lo que el paciente se lleva por rellenar el formulario. Va en la
   cabecera azul, antes de pedirle nada. */
.ff-obtienes{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.ff-obtienes li{
  position:relative;padding-left:23px;font-size:.9rem;line-height:1.42;
  color:rgba(255,255,255,.92);
}
.ff-obtienes li::before{
  content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}

/* El enlace en línea del aviso de privacidad. WCAG 2.5.8 lo exime por ir
   dentro de una frase, pero con destreza fina en declive un poco de
   holgura vertical se agradece y no rompe el renglón. */
.ff-legal a{padding:4px 2px;margin:-4px 0;display:inline-block}

/* ── Anclas bajo la cabecera fija ──
   .cab es sticky con 75px de alto y el CSS no declaraba compensación,
   así que al pulsar "See all 2026 prices" el título de destino
   aterrizaba debajo de la cabecera. legal.css ya usaba este patrón. */
html{scroll-padding-top:92px}
section[id],.seccion[id]{scroll-margin-top:92px}
@media (max-width:1000px){
  html{scroll-padding-top:80px}
  section[id],.seccion[id]{scroll-margin-top:80px}
}

/* ── Suelo tipográfico ──
   Revisión de 12 estudios sobre lectura en mayores: 13-14.5px para
   lectura sostenida entre 57 y 70 años, y las etiquetas nunca por
   debajo de 16px. Había texto a 9.6px, incluido el "From" que precede
   a cada precio, que es justo el matiz que hace honesta la cifra y el
   que exige la norma publicitaria. */
.p-desde,.sp-desde{font-size:.82rem;letter-spacing:.06em}
.ff-paso{font-size:.82rem}
.cat-titulo{font-size:.82rem}
.campo-opcional label .op{font-size:.84rem}
.tabla-comp table{font-size:1rem}
.tc-nota{font-size:.88rem}
/* Estas van con la especificidad de la regla original, si no pierden:
   .tabla-comp thead th (0,2,2) gana a .tabla-comp th (0,1,1). */
.tabla-comp thead th{font-size:.82rem}
.tabla-comp small{font-size:.8em}
.tabla-comp .tc-nuestro span{font-size:.84rem}
.cab-tel b{font-size:.76rem}
.video-et{font-size:.86rem}
.pastilla small{font-size:.82rem}
.pie-grid h3{font-size:.86rem}
.pie-legal p,.pie-copy,.pie-copy a,.pie-copy span{font-size:.86rem}
.wa-horario{font-size:.84rem}

/* ── Formulario según quién escribe ──
   La pastilla de perfil va antes que nada y se separa del resto: es
   la pregunta que decide el formulario, no un campo más. */
.campo-perfil{padding-bottom:14px;border-bottom:1px solid var(--linea);margin-bottom:2px}
.marca-op{
  font-family:var(--txt);font-size:.84rem;font-weight:400;color:var(--gris-claro);
  text-transform:none;letter-spacing:0;margin-left:5px;
}
/* [hidden] necesita ganar a los display de flex/grid de .campo */
#form-cita [hidden],.hero-form [hidden]{display:none!important}