/* Webs públicas Clínica Carmona — sistema de diseño W1c (dirección «Malagón», W1b-referencias).
   UNA hoja para todos los sitios. Dental = :root; estética = css/tema-estetica.css (SOLO variables).
   Ningún color fuera de :root. Dos mundos —carbón y hueso— que se alternan; el acento del logotipo
   solo sobre carbón. Cada sección declara su contexto (--c-*) y los componentes solo leen el contexto. */

/* ---------- 1. Fuentes autoalojadas (OFL): Righteous (marca, titulares) + Figtree (texto), con fallbacks métricos ---------- */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Righteous";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/righteous-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Righteous";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/righteous-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Righteous fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:105%;ascent-override:93.8%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:"Figtree fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:98.5%;ascent-override:96.5%;descent-override:25.4%;line-gap-override:0%}

/* ---------- 2. Tokens (dental = por defecto). Contrastes medidos por _fuente/medir.py ---------- */
:root{
  /* Mundo claro */
  --hueso:#f3f1ea; --hueso-2:#e9e6dc; --suave:#e9e6dc; --superficie:#ffffff;
  --linea:#cfcbbf; --linea-fuerte:#121412;
  --tinta:#121412; --tinta-2:#4a4f48;
  --acento-texto:#4b5a12;          /* el verde, en texto sobre claro */
  /* Mundo oscuro */
  --carbon:#121412; --carbon-2:#1b1e1a; --carbon-3:#252924;
  --gris-marca:#3c3c3e;            /* gris «CARMONA» del logotipo: SOLO la barra del menú (W1e) */
  --verde-claro:#e9f0d1;           /* verde claro del logotipo: fondo de la portada (W1e) */
  --claro:#f3f1ea; --claro-2:#b4b8ae;
  --linea-oscura:rgb(243 241 234 / .16);
  --chispa:#acca58;                /* verde del logotipo: SOLO sobre carbón */
  --chispa-2:#acca58;              /* segundo acento (estética: salvia) */
  --sobre-chispa:#121412;
  /* Señales */
  --estrella:#7a5400; --whatsapp:#1f7a4d; --error:#a5321f; --error-suave:#f8e5e0;
  --aviso-fondo:#f6edd2; --aviso-borde:#d9bf73;
  --foco:#121412; --foco-oscuro:#acca58; --marcador:#c2410c;
  /* Tipo */
  --fuente-display:"Righteous","Righteous fallback",system-ui,sans-serif;
  --fuente-texto:"Figtree","Figtree fallback",system-ui,sans-serif;
  --t-xs:.8125rem; --t-s:.9375rem; --t-m:clamp(1.0625rem,1rem + .2vw,1.125rem);
  --t-l:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --t-h3:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
  --t-h2:clamp(2.5rem,1.6rem + 4vw,5.5rem);          /* 40 → 88 px, mayúsculas */
  --t-mega:clamp(3.25rem,.5rem + 15vw,8.5rem);       /* 52 → 136 px, solo palabras sueltas (≤ 9 letras) */
  --t-cifra:clamp(3rem,2rem + 5vw,6.5rem);           /* numerales y teléfonos */
  --t-largo:clamp(1.875rem,1.3rem + 2.2vw,3.25rem);  /* titulares largos (entradas): Figtree 800 */
  /* Espacio y forma */
  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem; --e-6:2rem; --e-7:3rem; --e-8:4rem;
  --e-seccion:clamp(4.5rem,3rem + 7vw,10rem);
  --ancho:84rem; --ancho-prosa:42rem; --margen:clamp(1rem,.5rem + 3vw,3.5rem);
  --curva:cubic-bezier(.22,1,.36,1);
  --r-boton:999px;                 /* W1e: TODOS los botones, en los dos sitios */
  --r-tarjeta:1.25rem;             /* W1f: tarjetas y fichas redondeadas (el CEO eligió la B) */
  --foto-filtro:grayscale(1) contrast(1.05);
}

/* ---------- 3. Contexto: claro por defecto, .oscuro en carbón. Los componentes leen solo --c-* ---------- */
body,.claro{--c-fondo:var(--hueso);--c-texto:var(--tinta);--c-texto-2:var(--tinta-2);--c-linea:var(--linea);--c-regla:var(--linea-fuerte);
  --c-acento:var(--acento-texto);--c-boton:var(--carbon);--c-sobre-boton:var(--claro);--c-foco:var(--foco);--c-vacio:var(--hueso-2)}
.oscuro,.cabecera,.franja,.pie,.barra-movil{--c-fondo:var(--carbon);--c-texto:var(--claro);--c-texto-2:var(--claro-2);--c-linea:var(--linea-oscura);
  --c-regla:var(--claro-2);--c-acento:var(--chispa);--c-boton:var(--chispa);--c-sobre-boton:var(--sobre-chispa);--c-foco:var(--foco-oscuro);--c-vacio:var(--carbon-3)}
.tinte{--c-fondo:var(--hueso-2)}
.verde{--c-fondo:var(--verde-claro)}
.suave{--c-fondo:var(--suave)}
.claro,.oscuro,.tinte,.suave,.verde{background:var(--c-fondo);color:var(--c-texto)}

/* ---------- 4. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
body{margin:0;background:var(--hueso);color:var(--tinta);font:400 var(--t-m)/1.6 var(--fuente-texto);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;padding-bottom:3.75rem}
@media (min-width:56rem){body{padding-bottom:0}}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4,p,li,dt,dd,blockquote,figcaption,summary,caption{overflow-wrap:anywhere}
table{max-width:100%}
h1,h2,h3,h4,p,ul,ol,blockquote,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--c-foco);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:var(--e-4);top:-4rem;z-index:99;background:var(--chispa);color:var(--sobre-chispa);padding:.75rem 1rem;font-weight:700}
.saltar:focus{top:var(--e-4)}
.contenedor{width:min(100% - 2*var(--margen),var(--ancho));margin-inline:auto}
.contenedor--prosa{width:min(100% - 2*var(--margen),var(--ancho-prosa))}
.ico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.solo-js{display:none}.js .solo-js{display:inline-flex}
.mt-4{margin-top:var(--e-4)}.mt-5{margin-top:var(--e-5)}.mt-6{margin-top:var(--e-6)}.mt-7{margin-top:var(--e-7)}

/* ---------- 5. Tipografía de marca ---------- */
.mega{display:block;font-family:var(--fuente-display);font-weight:400;font-size:var(--t-mega);line-height:.86;letter-spacing:-.015em;text-transform:uppercase}
.titulo{font-family:var(--fuente-display);font-weight:400;font-size:var(--t-h2);line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.titulo em,.mega em{font-style:normal;color:var(--c-acento)}
.mega a,.titulo a{text-decoration:none}
.mega a:hover,.titulo a:hover{color:var(--c-acento)}
.titulo-largo{font:800 var(--t-largo)/1.1 var(--fuente-texto);letter-spacing:-.02em}
.t-h3{font-family:var(--fuente-display);font-weight:400;font-size:var(--t-h3);line-height:1;text-transform:uppercase}
.antetitulo{display:inline-flex;align-items:center;gap:.75rem;font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-texto)}
.antetitulo::before{content:"";width:2.5rem;height:1px;background:currentColor}
.entradilla{font-size:var(--t-l);line-height:1.45;max-width:36rem}
.tenue,.nota{color:var(--c-texto-2)}
.nota{font-size:var(--t-s)}
.nota a,.prosa a,.capa-datos a,.casilla a{color:var(--c-texto);text-decoration-thickness:1px;text-underline-offset:.2em}
.acento{color:var(--c-acento)}

/* ---------- 6. Botones y enlaces: rectos, sin sombra ---------- */
.botonera{display:flex;flex-wrap:wrap;gap:var(--e-3)}
.boton{border-radius:var(--r-boton);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.9rem 1.6rem;border:1px solid currentColor;background:transparent;color:var(--c-texto);font:700 var(--t-s)/1 var(--fuente-texto);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .3s var(--curva),color .3s var(--curva),border-color .3s var(--curva)}
.boton:hover{background:var(--c-texto);color:var(--c-fondo);border-color:var(--c-texto)}
.boton--primario{background:var(--c-boton);border-color:var(--c-boton);color:var(--c-sobre-boton)}
.boton--primario:hover{background:transparent;color:var(--c-texto);border-color:var(--c-texto)}
.boton--whatsapp{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff}
.boton--bloque{width:100%}
.boton .ico{width:1.1rem;height:1.1rem}
.enlace{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--t-s);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.2rem}
.enlace .ico{transition:transform .3s var(--curva)}
.enlace:hover .ico{transform:translateX(.3rem)}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border:1px solid var(--c-linea);font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--c-texto)}
.chip[aria-current]{background:var(--c-texto);color:var(--c-fondo);border-color:var(--c-texto)}
.estado-horario .punto{width:.55rem;height:.55rem;border-radius:50%;background:var(--c-texto-2);flex:none}
.estado-horario[data-estado=abierto] .punto{background:var(--chispa)}
.estado-horario{display:inline-flex;align-items:center;gap:.5rem}

/* ---------- 7. Franja superior, cabecera y menú ---------- */
.franja{background:var(--carbon-2);color:var(--claro-2);font-size:var(--t-xs)}
.franja .contenedor{display:flex;gap:var(--e-5);justify-content:space-between;align-items:center;min-height:2.25rem;overflow:hidden;padding-block:.35rem}
.franja a{color:var(--claro);text-decoration:none}
/* Móvil: el estado ocupa la franja y, si no cabe, baja a una segunda línea (como mucho dos, con «…»);
   los extras (cierre próximo, enlace a la otra web) solo desde 56rem. Nada empuja el ancho de la página. */
.franja .estado-horario{min-width:0;flex:0 1 auto}
.franja [data-horario-texto]{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.franja .contenedor>span:last-child{display:none;gap:var(--e-5)}
.franja__extra{display:none}
@media (min-width:56rem){
  .franja .contenedor{white-space:nowrap;padding-block:0}
  .franja [data-horario-texto]{display:block;text-overflow:ellipsis}
  .franja .contenedor>span:last-child{display:flex;flex:none}
  .franja__extra{display:inline}
}
.cabecera{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--carbon) 94%,transparent);color:var(--claro);border-bottom:1px solid var(--linea-oscura);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cabecera .contenedor{display:flex;align-items:center;gap:var(--e-6);min-height:4.75rem}
.marca{margin-right:auto;display:block}
.marca img{width:auto;height:2.15rem}
.nav{display:none}
.nav ul{display:flex;gap:clamp(1.25rem,.5rem + 1.6vw,2.5rem)}
.nav a{text-decoration:none;font-size:var(--t-m);font-weight:700;letter-spacing:.01em;padding-block:.5rem;background:linear-gradient(var(--chispa),var(--chispa)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--curva)}
.nav a:hover,.nav a[aria-current]{background-size:100% 1px}
.cabecera__tel{display:none;text-decoration:none;font-weight:700;font-size:var(--t-s);font-variant-numeric:tabular-nums}
.cabecera .boton{display:none;min-height:2.75rem;padding:.7rem 1.1rem}
@media (min-width:64rem){.nav{display:block}.cabecera .boton{display:inline-flex}}
@media (min-width:80rem){.cabecera__tel{display:inline-flex;align-items:center;gap:.4rem}}
.menu{position:relative}
.menu summary{border-radius:var(--r-boton);list-style:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;cursor:pointer;border:1px solid var(--linea-oscura)}
.menu summary::-webkit-details-marker{display:none}
.menu .ico-cerrar,.menu[open] .ico-abrir{display:none}
.menu[open] .ico-cerrar{display:block}
.menu__panel{position:fixed;inset:6.75rem 0 auto 0;max-height:calc(100dvh - 6.75rem);overflow:auto;background:var(--carbon);border-top:1px solid var(--linea-oscura);padding:var(--e-5) var(--margen) var(--e-7)}
.menu__panel nav a{display:block;font-family:var(--fuente-display);font-size:2rem;line-height:1.1;text-transform:uppercase;text-decoration:none;padding-block:.5rem;border-bottom:1px solid var(--linea-oscura)}
.menu__panel .botonera{margin-top:var(--e-5);flex-direction:column}
@media (min-width:64rem){.menu{display:none}}
.landing .cabecera .boton{display:inline-flex}

/* W1e — cabecera de dental en dos pisos: arriba, claro, el logotipo EN COLOR, los teléfonos y «Pedir cita»;
   debajo, la barra del menú en el gris del logotipo, que es lo único que se queda fijo al bajar. */
.cabecera-marca{position:relative;z-index:31;background:var(--superficie);color:var(--tinta);border-bottom:1px solid var(--linea)}
.cabecera-marca .contenedor{display:flex;align-items:center;gap:var(--e-6);min-height:4.75rem}
.cabecera-marca .marca img{height:2.6rem}
.cabecera-marca__tels{display:none;gap:var(--e-6);margin-left:auto}
.cabecera-marca__tels a{display:grid;text-decoration:none;line-height:1.2}
.cabecera-marca__tels span{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.cabecera-marca__tels b{font-size:var(--t-l);font-variant-numeric:tabular-nums}
.cabecera-marca__tels a:hover b{color:var(--acento-texto)}
@media (min-width:64rem){.cabecera-marca__tels{display:flex}}
.barra-nav{position:sticky;top:0;z-index:30;background:var(--gris-marca);color:var(--claro);--c-fondo:var(--gris-marca);--c-texto:var(--claro);--c-texto-2:var(--claro);--c-linea:rgb(243 241 234 / .22);--c-acento:var(--chispa);--c-foco:var(--chispa)}
.barra-nav .contenedor{display:flex;align-items:center;gap:var(--e-5);min-height:3.25rem}
.barra-nav .nav{display:none;margin-right:auto}
.barra-nav .nav a{color:var(--claro);white-space:nowrap}
.barra-nav .nav ul{gap:clamp(1rem,.2rem + 1.5vw,2.25rem)}
.barra-nav .estado-horario{max-width:24rem}
.barra-nav .estado-horario{margin-left:auto;min-width:0;font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-nav .estado-horario [data-horario-texto]{min-width:0;overflow:hidden;text-overflow:ellipsis}
.barra-nav .estado-horario .punto{background:var(--claro)}
.barra-nav .estado-horario[data-estado=abierto] .punto{background:var(--chispa)}
.barra-nav .menu{position:static}
.barra-nav .menu summary{width:auto;padding-inline:1rem;gap:.5rem;display:flex;align-items:center;border-color:rgb(243 241 234 / .4);color:var(--claro);font-size:var(--t-s);font-weight:700}
.barra-nav .menu__panel{position:absolute;inset:100% 0 auto 0;max-height:calc(100dvh - 3.25rem)}
@media (min-width:64rem){.barra-nav .nav{display:block}}
.cabecera-marca .boton,.landing .cabecera-marca .boton{display:inline-flex;margin-left:auto;min-height:2.75rem;padding:.7rem 1.2rem}
@media (min-width:64rem){.cabecera-marca .boton{margin-left:0}}
/* «Pedir cita» en páginas compartidas: elige clínica. <details> nativo: funciona sin JS. */
.elegir-cita{position:relative;margin-left:auto}
@media (min-width:64rem){.elegir-cita{margin-left:0}}
.elegir-cita>summary{list-style:none;cursor:pointer;min-height:2.75rem;padding:.7rem 1.2rem}
.elegir-cita>summary::-webkit-details-marker{display:none}
.elegir-cita__panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:40;width:min(22rem,calc(100vw - 2rem));display:grid;gap:var(--e-2);padding:var(--e-4);background:var(--superficie);color:var(--tinta);border:1px solid var(--linea);border-radius:1rem;box-shadow:0 18px 40px -20px rgb(18 20 18 / .45)}
.elegir-cita__panel .antetitulo{color:var(--tinta-2)}
.elegir-cita__op{display:grid;gap:.5rem;padding:var(--e-3);border:1px solid var(--linea);border-radius:.75rem}
.elegir-cita__op>a:first-child{display:grid;text-decoration:none}
.elegir-cita__op b{font-family:var(--fuente-display);font-weight:400;font-size:var(--t-l);text-transform:uppercase}
.elegir-cita__op span{font-weight:700;font-variant-numeric:tabular-nums}
.elegir-cita__op .botonera .boton{min-height:2.5rem;padding:.55rem .9rem;font-size:var(--t-xs);flex:1}
.elegir-cita__op:hover{border-color:var(--tinta)}

/* ---------- 8. Migas ---------- */
.migas ol{display:flex;flex-wrap:wrap;gap:.25rem .6rem;padding-top:var(--e-5);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--c-texto-2)}
.migas li+li::before{content:"/";margin-right:.6rem;opacity:.6}
.migas a{text-decoration:none}
.migas a:hover{text-decoration:underline}

/* ---------- 9. Fotografía: blanco y negro, color al pasar (solo con ratón) ---------- */
.foto{position:relative;overflow:hidden;background:var(--c-vacio)}
.foto img{width:100%;height:100%;object-fit:cover;filter:var(--foto-filtro);transition:filter .7s var(--curva),transform 1s var(--curva)}
@media (hover:hover){.foto:hover img,a:hover .foto img{filter:none}}
.foto--3x2 img{aspect-ratio:3/2}.foto--4x3 img{aspect-ratio:4/3}.foto--4x5 img{aspect-ratio:4/5}
.foto__pie,.pie-foto{font-size:var(--t-xs);color:var(--c-texto-2);margin-top:var(--e-3)}
.foto__etiqueta{position:absolute;left:var(--e-4);bottom:var(--e-4);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--claro);background:rgb(18 20 18 / .72);padding:.35rem .6rem}
.vacio{display:grid;place-items:end start;aspect-ratio:3/2;background:var(--c-vacio);padding:var(--e-4);font-family:var(--fuente-display);font-size:var(--t-l);text-transform:uppercase;color:var(--c-texto-2)}
.monograma{display:grid;place-items:center;aspect-ratio:4/5;background:var(--c-vacio);font-family:var(--fuente-display);font-size:var(--t-cifra);color:var(--c-texto-2)}

/* ---------- 10. Portada (hero): carbón, palabra a escala de cartel, foto a sangre ---------- */
.portada{position:relative;overflow:hidden}
.portada__rejilla{display:grid;gap:var(--e-7);padding-block:clamp(2.5rem,1rem + 5vw,6rem) var(--e-7)}
.portada h1{font-weight:400}
.portada h1 .pre,.portada h1 .y{display:block;font:600 var(--t-l)/1.2 var(--fuente-texto);color:var(--c-texto-2)}
.portada h1 .pre{margin-bottom:var(--e-3)}
.portada h1 .y{margin:var(--e-3) 0 var(--e-2)}
.portada h1 .y b{color:var(--c-acento);font-weight:600}
.portada h1.titulo{font-size:var(--t-h2)}
.portada__texto{margin-top:var(--e-6)}
.portada .botonera{margin-top:var(--e-6)}
.portada__foto{margin-inline:calc(-1*var(--margen))}
.portada__foto img{aspect-ratio:4/3;object-position:35% 50%}
.portada__ficha{display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--e-5);margin-top:var(--e-6);padding-top:var(--e-5);border-top:1px solid var(--c-linea);font-size:var(--t-s);max-width:36rem}
.portada__ficha dt{color:var(--c-texto-2);text-transform:uppercase;letter-spacing:.12em;font-size:var(--t-xs);padding-top:.2rem}
.portada__ficha .tel{font-family:var(--fuente-display);font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);line-height:1.1;text-decoration:none;color:var(--c-acento)}
.portada .aviso{margin-top:var(--e-5)}
/* La palabra más larga de un cartel es «MAZARRÓN» (≈ 5,5 em en Righteous): en móvil el tamaño lo manda el ancho
   que queda, no solo el del viewport. En un Galaxy S26+ (412 px) se salía por la derecha (CEO, 2026-10-12). */
.portada .mega{font-size:min(var(--t-mega),calc((100vw - 2*var(--margen))/5.8))}
@media (min-width:56rem){
  .portada .mega{font-size:min(8.5rem,1rem + 8vw)}
  .portada__rejilla{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;padding-bottom:var(--e-8)}
  .portada__foto{margin:0 calc(-1*var(--margen)) 0 0;align-self:stretch;min-height:34rem}
  .portada__foto picture,.portada__foto img{height:100%}
  .portada__foto img{aspect-ratio:auto}
  .portada__foto .foto__etiqueta{writing-mode:vertical-rl;transform:rotate(180deg);padding:.7rem .4rem}
}
@media (min-width:90rem){.portada__foto{margin-right:calc((100vw - var(--ancho))/-2)}}
/* Las sedes en una línea fina al pie de la portada */
.sedes-linea{border-top:1px solid var(--c-linea)}
.sedes-linea .contenedor{display:grid}
.sedes-linea a{display:grid;grid-template-columns:1fr;align-content:start;gap:.3rem;padding-block:var(--e-5);text-decoration:none;border-bottom:1px solid var(--c-linea)}
.sedes-linea b{font-family:var(--fuente-display);font-weight:400;font-size:clamp(1.25rem,1rem + 1.2vw,2.25rem);line-height:1;text-transform:uppercase}
.sedes-linea span{font-size:var(--t-s);color:var(--c-texto-2)}
.sedes-linea .tel{font-size:var(--t-l);font-weight:700;color:var(--c-texto);white-space:nowrap;font-variant-numeric:tabular-nums}
.sedes-linea a:hover b{color:var(--c-acento)}
@media (min-width:56rem){.sedes-linea .contenedor{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));column-gap:var(--e-7)}.sedes-linea a{border-bottom:0}}

/* ---------- 11. Secciones y cabeceras de sección ---------- */
.seccion{padding-block:var(--e-seccion)}
.seccion--corta{padding-block:clamp(3rem,2rem + 4vw,6rem)}
.cabeza{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-5);margin-bottom:clamp(2.5rem,1.5rem + 4vw,5rem)}
@media (min-width:56rem){.cabeza{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:end}}
.cabeza p{max-width:28rem}
.dos-columnas{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-7)}
@media (min-width:56rem){.dos-columnas{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,2rem + 4vw,7rem)}.dos-columnas--mitad{grid-template-columns:1fr 1fr}}

/* Declaración: una frase grande y los hechos numerados */
.declaracion{font-family:var(--fuente-display);font-size:clamp(2rem,1.2rem + 3.4vw,4.25rem);line-height:1.02;letter-spacing:-.005em;max-width:20ch;margin-top:var(--e-5)}
.declaracion em{font-style:normal;color:var(--c-acento)}
.hechos{display:grid;margin-top:clamp(3rem,2rem + 4vw,6rem);border-top:1px solid var(--c-regla);counter-reset:h}
.hechos li{padding-block:var(--e-5);border-bottom:1px solid var(--c-linea);counter-increment:h}
.hechos b{display:block;font-size:var(--t-l);line-height:1.25}
.hechos b::before{content:counter(h,decimal-leading-zero);font-family:var(--fuente-display);font-weight:400;color:var(--c-acento);margin-right:.5em}
.hechos span{display:block;color:var(--c-texto-2);font-size:var(--t-s);margin-top:.35rem}
.hechos--3{--n:3}
@media (min-width:56rem){.hechos{grid-template-columns:repeat(var(--n,4),1fr);column-gap:var(--e-6)}.hechos li{border-bottom:0}}

/* ---------- 12. Tarjetas de tratamiento y pasos (W1d: rejilla con foto, sin numeral suelto ni subrayados) ---------- */
.tarjetas{display:grid;gap:var(--e-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
@media (min-width:64rem){.tarjetas{grid-template-columns:repeat(3,1fr);gap:var(--e-6)}}
.tarjeta{position:relative;display:flex;flex-direction:column;background:var(--superficie);color:var(--tinta);border:1px solid var(--linea);transition:border-color .3s var(--curva),transform .4s var(--curva);--c-texto:var(--tinta);--c-texto-2:var(--tinta-2);--c-acento:var(--acento-texto);--c-vacio:var(--hueso-2)}
.tarjeta .foto img{aspect-ratio:3/2}
.tarjeta__cuerpo{display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-5);flex:1}
.tarjeta h3{font:800 var(--t-l)/1.2 var(--fuente-texto);letter-spacing:-.01em}
.tarjeta h3 a{text-decoration:none;color:inherit}
.tarjeta h3 a::after{content:"";position:absolute;inset:0}
.tarjeta p{font-size:var(--t-s);color:var(--tinta-2)}
.tarjeta__pie span{white-space:nowrap}
.tarjeta__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e-2) var(--e-3);margin-top:auto;padding-top:var(--e-4);border-top:1px solid var(--linea);font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acento-texto)}
.tarjeta:hover{border-color:var(--tinta)}
.tarjeta:hover .foto img{filter:none}
.tarjeta:focus-within{outline:3px solid var(--foco);outline-offset:3px}
.tarjeta a:focus-visible{outline:none}
/* Pasos: el número va EN LÍNEA con el título, nunca solo en una línea */
.pasos{display:grid;gap:var(--e-4);counter-reset:p}
@media (min-width:56rem){.pasos{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--e-5)}}
.pasos li{counter-increment:p;padding:var(--e-5);border:1px solid var(--c-linea);border-top:3px solid var(--c-texto)}
.pasos h3{font:800 var(--t-m)/1.3 var(--fuente-texto)}
.pasos h3::before{content:counter(p,decimal-leading-zero);font-family:var(--fuente-display);font-weight:400;color:var(--c-acento);margin-right:.5em}
.pasos p{margin-top:var(--e-2);font-size:var(--t-s);color:var(--c-texto-2)}

.ficha{display:grid;grid-template-columns:auto 1fr;gap:.6rem var(--e-5);margin-top:var(--e-5);padding-top:var(--e-5);border-top:1px solid var(--c-linea);font-size:var(--t-s)}
.ficha dt{color:var(--c-texto-2);text-transform:uppercase;letter-spacing:.12em;font-size:var(--t-xs);padding-top:.2rem}

/* ---------- 13. Ficha de contacto de una sede (W1d): la misma en portada, sede, tratamiento y landing ---------- */
.sedes{display:grid;gap:var(--e-6)}
@media (min-width:56rem){.sedes{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}}
.contacto{container-type:inline-size;display:flex;flex-direction:column;background:var(--superficie);color:var(--tinta);border:1px solid var(--linea);--c-texto:var(--tinta);--c-texto-2:var(--tinta-2);--c-linea:var(--linea);--c-regla:var(--tinta);--c-acento:var(--acento-texto);--c-boton:var(--carbon);--c-sobre-boton:var(--claro);--c-foco:var(--foco);--c-fondo:var(--superficie);--c-vacio:var(--hueso-2)}
.contacto>.foto img{aspect-ratio:16/9}
.contacto__cuerpo{display:grid;gap:var(--e-5);padding:clamp(1.25rem,1rem + 1vw,2rem)}
.contacto__cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e-3)}
.contacto h3,.contacto h2{font-family:var(--fuente-display);font-weight:400;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);line-height:1;text-transform:uppercase}
.contacto__datos{display:grid;gap:var(--e-5)}
.pila-contacto{display:grid;gap:var(--e-3);justify-items:start}
.pila-contacto>p{margin:0}
.contacto__fila{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-s)}
.contacto__fila .ico{margin-top:.2em;color:var(--acento-texto)}
.contacto__fila address{font-style:normal}
.contacto,.contacto__datos>*{min-width:0}
.contacto .horario th,.contacto .horario td{padding:.5rem .6rem}
@container (max-width:26rem){.contacto .horario td{white-space:normal}}
@container (min-width:26rem){.contacto__datos .horario th{white-space:nowrap}}
.contacto__tel{white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fuente-display);font-size:clamp(1.5rem,1.3rem + .8vw,2rem);line-height:1;color:var(--tinta);text-decoration:none;font-variant-numeric:tabular-nums}
.contacto__tel:hover{color:var(--acento-texto)}
.contacto .botonera{gap:var(--e-2)}
.contacto .boton{min-height:2.75rem;padding:.7rem 1rem;font-size:var(--t-xs);flex:1 1 auto}
.contacto .res{margin:0;padding-top:var(--e-4);border-top:1px solid var(--linea)}
.contacto .estado-horario{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}

/* ---------- 14. Personas: la firma (dirección médica) y el equipo en filas ---------- */
.firma{display:grid;gap:var(--e-7);align-items:center}
@media (min-width:56rem){.firma{grid-template-columns:5fr 7fr;gap:clamp(3rem,2rem + 4vw,7rem)}}
.firma .foto img,.firma .monograma{aspect-ratio:4/5}
.firma__foto--pequena{max-width:20rem}
.firma__nombre{font-family:var(--fuente-display);font-size:clamp(2.5rem,1.5rem + 4.4vw,6rem);line-height:.9;text-transform:uppercase;margin-block:var(--e-5)}
.credencial{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-acento)}
.firma__texto{max-width:34rem;margin-top:var(--e-5);font-size:var(--t-l);line-height:1.5}
.firma .enlace{margin-top:var(--e-6)}
.equipo{border-top:1px solid var(--c-regla)}
.persona{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--e-5);align-items:center;padding-block:var(--e-5);border-bottom:1px solid var(--c-linea)}
.persona .foto img,.persona .monograma{aspect-ratio:1;width:5.5rem}
.persona .monograma{font-size:var(--t-l)}
.persona h3{font:800 var(--t-l)/1.2 var(--fuente-texto)}
.persona p{font-size:var(--t-s);color:var(--c-texto-2)}
@media (min-width:56rem){.equipo{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--e-7)}.persona{grid-template-columns:8rem 1fr}.persona .foto img,.persona .monograma{width:8rem}}
.doctora{display:flex;gap:var(--e-4);align-items:center}
.doctora .foto{width:5.5rem;flex:none}
.doctora .foto img{aspect-ratio:1}
.doctora b{display:block;font-size:var(--t-m)}
.doctora span{display:block;font-size:var(--t-s);color:var(--c-texto-2)}

/* ---------- 15. Instalaciones y «cómo llegar» ---------- */
.instalaciones{display:grid;gap:var(--e-6)}
@media (min-width:48rem){.instalaciones{grid-template-columns:repeat(3,1fr)}}
.instalaciones h3{font-family:var(--fuente-display);font-weight:400;font-size:var(--t-l);text-transform:uppercase;margin-top:var(--e-4)}
.instalaciones p{font-size:var(--t-s);color:var(--c-texto-2);margin-top:var(--e-2)}
.llegar{display:grid;gap:var(--e-5);border-top:1px solid var(--c-regla)}
.llegar>div{padding-top:var(--e-5)}
.llegar h3{font-family:var(--fuente-display);font-weight:400;font-size:var(--t-l);text-transform:uppercase;margin-bottom:var(--e-2)}
.llegar p,.llegar li{font-size:var(--t-s);color:var(--c-texto-2)}
@media (min-width:56rem){.llegar{grid-template-columns:repeat(3,1fr);column-gap:var(--e-6)}}
.mapa{position:relative;display:block;aspect-ratio:16/9;background:var(--c-vacio);overflow:hidden;color:var(--c-texto)}
.mapa svg{width:100%;height:100%}
.mapa picture,.mapa img{display:block;width:100%;height:100%;object-fit:cover}
.mapa__manzana{fill:var(--linea)}
.mapa__calle{stroke:var(--hueso)}
.mapa__pin{fill:var(--carbon)}
.mapa__etiqueta{position:absolute;left:50%;top:38%;transform:translate(-50%,-100%);background:var(--carbon);color:var(--claro);font-size:var(--t-xs);font-weight:700;padding:.3rem .6rem;white-space:nowrap}

/* ---------- 16. Horario: el día de hoy, en banda negra (W1) ---------- */
.horario{width:100%;border-collapse:collapse;font-size:var(--t-s);font-variant-numeric:tabular-nums}
.horario th,.horario td{text-align:left;padding:.55rem .75rem;border-top:1px solid var(--c-linea);font-weight:400}
.horario td{text-align:right;white-space:nowrap}
.horario .cerrado{color:var(--c-texto-2)}
.horario tr.hoy{background:var(--carbon);color:var(--claro);box-shadow:inset 4px 0 0 var(--chispa)}
.horario tr.hoy th,.horario tr.hoy td{font-weight:800;border-color:var(--carbon)}
.horario tr.hoy th::after{content:" · hoy";font-weight:700;color:var(--chispa);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em}
.horario--grande{font-size:var(--t-m)}
.horario--grande th,.horario--grande td{padding:.85rem 1rem}
@media (max-width:30rem){.horario--grande th,.horario--grande td{padding:.7rem .5rem}.horario--grande td{white-space:normal}}

/* ---------- 17. Reseñas: nota y varias tarjetas (rejilla en escritorio, carrusel en móvil) ---------- */
.resenas__cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--e-5);margin-bottom:var(--e-6)}
.nota-media{display:flex;align-items:center;gap:var(--e-4);padding:var(--e-4) var(--e-5);background:var(--superficie);color:var(--tinta);border:1px solid var(--linea)}
.nota-media .cifra{font-family:var(--fuente-display);font-size:clamp(2.5rem,2rem + 2vw,3.5rem);line-height:.9}
.nota-media small{display:block;font-size:var(--t-xs);color:var(--tinta-2)}
.nota-media a{font-size:var(--t-xs);font-weight:700;color:var(--acento-texto);text-decoration:none}
.estrellas{display:inline-flex;gap:.1rem;color:var(--estrella)}
.estrellas svg{width:1rem;height:1rem;fill:currentColor}
.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(16rem,85%);gap:var(--e-4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--e-3);margin-inline:calc(var(--margen) * -1);padding-inline:var(--margen);scroll-padding-inline:var(--margen);scrollbar-width:thin}
.carrusel>*{scroll-snap-align:start}
@media (min-width:56rem){.carrusel{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));overflow:visible;margin:0;padding:0}}
.resena{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-5);background:var(--superficie);color:var(--tinta);border:1px solid var(--linea)}
.resena__cabeza{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-xs);font-weight:700;color:var(--tinta-2)}
.resena blockquote p{font-size:var(--t-m);line-height:1.5}
.resena footer{margin-top:auto;padding-top:var(--e-3);border-top:1px solid var(--linea);font-size:var(--t-xs);color:var(--tinta-2)}
.resena footer b{display:block;font-size:var(--t-s);color:var(--tinta)}
.carrusel__controles{display:none;gap:var(--e-2);justify-content:flex-end;margin-top:var(--e-3)}
.js .carrusel__controles{display:flex}
.carrusel__controles button{border-radius:var(--r-boton);width:2.75rem;height:2.75rem;border:1px solid var(--c-texto);background:transparent;color:var(--c-texto);font-size:1.25rem;cursor:pointer}
@media (min-width:56rem){.js .carrusel__controles{display:none}}

/* ---------- 18. Blog: lista editorial, destacada, filtros, paginación ---------- */
.lista-blog{border-top:1px solid var(--c-regla)}
.lista-blog a{display:grid;gap:.4rem var(--e-6);padding-block:var(--e-5);border-bottom:1px solid var(--c-linea);text-decoration:none}
.lista-blog .meta{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-acento)}
.lista-blog h2,.lista-blog h3{font:800 var(--t-l)/1.2 var(--fuente-texto);letter-spacing:-.01em}
.lista-blog .resumen{font-size:var(--t-s);color:var(--c-texto-2)}
.lista-blog .rev{font-size:var(--t-xs);color:var(--c-texto-2)}
@media (min-width:56rem){.lista-blog a{grid-template-columns:12rem 1fr 14rem;align-items:baseline}.lista-blog h2,.lista-blog h3{font-size:1.625rem}.lista-blog .resumen{grid-column:2}}
.lista-blog a:hover h2,.lista-blog a:hover h3{color:var(--c-acento)}
.destacada{display:grid;gap:var(--e-6);text-decoration:none;margin-bottom:var(--e-8)}
.destacada .foto img{aspect-ratio:3/2}
.destacada h2{font:800 var(--t-largo)/1.1 var(--fuente-texto);letter-spacing:-.02em;margin-block:var(--e-4)}
@media (min-width:56rem){.destacada{grid-template-columns:7fr 5fr;align-items:end}}
.filtros{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-block:var(--e-6) var(--e-7)}
.paginacion{display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:center;margin-top:var(--e-7);font-weight:700}
.paginacion a,.paginacion span{display:inline-grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding-inline:.6rem;border:1px solid var(--c-linea);text-decoration:none}
.paginacion [aria-current]{background:var(--c-texto);color:var(--c-fondo)}
.paginacion .hueco{border:0}
.paginacion a[rel=next]{display:inline-flex;gap:.5rem;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-s)}

/* ---------- 19. Artículo ---------- */
.articulo__cabeza{padding-block:var(--e-6) var(--e-7)}
.articulo__rejilla>div>figure.foto img{aspect-ratio:3/2}
.articulo__rejilla .pie-foto{margin-bottom:var(--e-6)}
.articulo__cabeza h1{font:800 var(--t-largo)/1.1 var(--fuente-texto);letter-spacing:-.02em;margin-block:var(--e-5) var(--e-4)}
.autoria{display:flex;align-items:center;gap:var(--e-3);margin-top:var(--e-6);font-size:var(--t-s);color:var(--c-texto-2)}
.autoria b{color:var(--c-texto)}
.avatar{display:grid;place-items:center;width:2.75rem;height:2.75rem;background:var(--c-vacio);font-family:var(--fuente-display);font-size:var(--t-s);flex:none}
.revisor{display:flex;gap:var(--e-4);align-items:flex-start;margin-top:var(--e-5);padding:var(--e-5);background:var(--carbon);color:var(--claro);--c-acento:var(--chispa)}
.revisor .ico{width:1.75rem;height:1.75rem;color:var(--chispa);flex:none}
.revisor b{display:block;font-size:var(--t-m)}
.revisor span{display:block;font-size:var(--t-s);color:var(--claro-2);margin-top:.2rem}
.articulo__rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-7)}
@media (min-width:64rem){.articulo__rejilla{grid-template-columns:minmax(0,1fr) 16rem;gap:var(--e-8)}.articulo__lateral{position:sticky;top:7rem;align-self:start}.indice-movil{display:none}}
.articulo__lateral{display:none}
@media (min-width:64rem){.articulo__lateral{display:block}}
.indice-art{border-top:1px solid var(--c-regla);padding-top:var(--e-4);margin-block:var(--e-6)}
.indice-art h2{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--e-3)}
.indice-art ol{counter-reset:i}
.indice-art li{counter-increment:i;padding-block:.4rem;border-bottom:1px solid var(--c-linea);font-size:var(--t-s)}
.indice-art li::before{content:counter(i,decimal-leading-zero) "  ";font-family:var(--fuente-display);color:var(--c-acento)}
.indice-art a{text-decoration:none}
.prosa{max-width:var(--ancho-prosa);font-size:var(--t-m);line-height:1.7}
.prosa>*+*{margin-top:1.1em}
.prosa h2{font:800 clamp(1.5rem,1.2rem + 1.2vw,2rem)/1.2 var(--fuente-texto);letter-spacing:-.01em;margin-top:2.2em}
.prosa ul,.prosa ol{padding-left:1.25em}
.prosa ul{list-style:square}.prosa ol{list-style:decimal}
.prosa li+li{margin-top:.4em}
.prosa figure{margin-block:2em}
.prosa:not(.prosa--legal) table{display:block;overflow-x:auto}
.prosa pre{overflow-x:auto;max-width:100%}
.prosa--legal table{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.prosa--legal th,.prosa--legal td{text-align:left;vertical-align:top;padding:.7rem .5rem .7rem 0;border-bottom:1px solid var(--c-linea)}
.prosa--legal th{width:34%;font-weight:700}
.cta-en-linea{padding:var(--e-6);margin-block:2.2em}
.cta-en-linea h2{font-family:var(--fuente-display);font-weight:400;font-size:var(--t-h3);line-height:1;text-transform:uppercase;margin:0}
.cta-en-linea p{margin-top:var(--e-3);color:var(--c-texto-2)}
.cta-en-linea__sedes{display:grid;gap:var(--e-3);margin-block:var(--e-5);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.cta-en-linea__sedes a{display:grid;text-decoration:none;font-family:var(--fuente-display);font-size:var(--t-l);color:var(--c-acento)}
.cta-en-linea__sedes b{font:700 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--c-texto-2)}

/* ---------- 20. Avisos, FAQ ---------- */
.aviso{display:flex;gap:var(--e-3);align-items:flex-start;padding:var(--e-4);background:var(--aviso-fondo);border-left:3px solid var(--aviso-borde);color:var(--tinta);font-size:var(--t-s)}
.aviso .ico{margin-top:.15em}
.aviso b{display:block}
.oscuro .aviso{background:var(--carbon-3);color:var(--claro);border-left-color:var(--chispa)}
.faq{border-top:1px solid var(--c-regla)}
.faq details{border-bottom:1px solid var(--c-linea)}
.faq summary{display:flex;justify-content:space-between;gap:var(--e-4);padding-block:var(--e-5);font-weight:800;font-size:var(--t-l);line-height:1.3;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;align-self:flex-start;font-family:var(--fuente-display);font-size:1.5em;line-height:.8;color:var(--c-acento);transition:transform .3s var(--curva)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding-bottom:var(--e-5);color:var(--c-texto-2);max-width:40rem}
.faq details>div>*+*{margin-top:.6em}

/* ---------- 21. Formulario ---------- */
.formulario{display:grid;gap:var(--e-4);padding:clamp(1.5rem,1rem + 2vw,2.5rem);background:var(--superficie);color:var(--tinta);--c-texto:var(--tinta);--c-texto-2:var(--tinta-2);--c-linea:var(--linea);--c-boton:var(--carbon);--c-sobre-boton:var(--claro);--c-foco:var(--foco);--c-fondo:var(--superficie)}
.formulario h2{font-family:var(--fuente-display);font-weight:400;font-size:var(--t-h3);line-height:1;text-transform:uppercase}
.formulario>p{color:var(--tinta-2);font-size:var(--t-s)}
.campo{display:grid;gap:.35rem;border:0;margin:0;padding:0;min-width:0}
.campo label,.campo legend{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.campo input{min-height:3.25rem;padding:.75rem .9rem;border:1px solid var(--tinta-2);border-radius:0;background:var(--superficie);color:var(--tinta);font:inherit}
.campo__ayuda{font-size:var(--t-xs);color:var(--tinta-2)}
.campo--error input{border-color:var(--error);background:var(--error-suave)}
.campo__error{font-size:var(--t-xs);font-weight:700;color:var(--error)}
.segmentado{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--tinta-2)}
.segmentado label{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.5rem;font-size:var(--t-s);font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer;text-align:center}
.segmentado label+label{border-left:1px solid var(--tinta-2)}
.segmentado input{accent-color:var(--carbon)}
.segmentado label:has(input:checked){background:var(--carbon);color:var(--claro)}
.casilla{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--t-s);color:var(--tinta-2)}
.casilla input{width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--carbon);flex:none}
.capa-datos{font-size:var(--t-xs);color:var(--tinta-2);line-height:1.5}

/* ---------- 22. Cierre: «Pide cita» con los teléfonos como titular ---------- */
.telefonos{display:grid;gap:var(--e-5);margin-top:var(--e-7);border-top:1px solid var(--c-linea)}
.telefonos a{display:grid;gap:.25rem;padding-top:var(--e-5);text-decoration:none}
.telefonos span{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--c-texto-2)}
.telefonos b{white-space:nowrap;font-family:var(--fuente-display);font-weight:400;font-size:min(var(--t-cifra),8vw);line-height:1;color:var(--c-acento);font-variant-numeric:tabular-nums}
.telefonos a:hover b{color:var(--c-texto)}
.dos-columnas .telefonos b{font-size:clamp(2rem,1rem + 3vw,3.5rem)}
@media (min-width:56rem){.telefonos{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}
.cierre .botonera{margin-top:var(--e-7)}
.cierre .mega{font-size:min(var(--t-mega),12.5vw)}
.financiacion{margin-top:var(--e-6);font-size:var(--t-s);max-width:40rem;color:var(--c-texto-2)}

/* W1e — cierre de páginas compartidas: una columna por clínica, cada una con su teléfono debajo y su botón */
.cierre-sedes{display:grid;gap:var(--e-7);margin-top:var(--e-7);border-top:1px solid var(--c-linea);padding-top:var(--e-6)}
@media (min-width:56rem){.cierre-sedes{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}
.cierre-sedes h3{font-family:var(--fuente-display);font-weight:400;font-size:var(--t-h3);line-height:1;text-transform:uppercase}
.cierre-sedes address{font-style:normal;color:var(--c-texto-2);margin-top:var(--e-2)}
.cierre-sedes .tel{display:block;margin-top:var(--e-3);font-family:var(--fuente-display);font-size:clamp(2.25rem,1.5rem + 2.5vw,4rem);line-height:1;color:var(--c-acento);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.cierre-sedes .botonera{margin-top:var(--e-5)}

/* ---------- 23. Formas de pago y marcas de aceptación ---------- */
.pagos{display:grid;gap:0;border-top:1px solid var(--c-regla)}
.pagos li{display:grid;gap:.15rem;padding-block:var(--e-4);border-bottom:1px solid var(--c-linea)}
.pagos span{color:var(--c-texto-2);font-size:var(--t-s)}
@media (min-width:56rem){.pagos{grid-template-columns:repeat(3,1fr);column-gap:var(--e-6)}}
.pagos-cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--e-5);margin-bottom:var(--e-6)}
.marcas-pago{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:var(--e-2);align-items:center}
.marcas-pago img{height:2rem;width:auto;flex:none}

/* ---------- 24. Club de estética ---------- */
.tarjeta-club{display:grid;align-content:space-between;aspect-ratio:1.586;max-width:26rem;padding:var(--e-6);background:var(--carbon-3);border:1px solid var(--linea-oscura);color:var(--claro)}
.tarjeta-club__nombre{font-family:var(--fuente-display);font-size:var(--t-h3);line-height:1;text-transform:uppercase}
.tarjeta-club__pie{display:flex;justify-content:space-between;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--c-acento)}

/* ---------- 25. Legal y 404 ---------- */
.legal__rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-7)}
@media (min-width:56rem){.legal__rejilla{grid-template-columns:16rem minmax(0,1fr)}.legal__nav{position:sticky;top:7rem;align-self:start}}
.legal__nav ul{border-top:1px solid var(--c-regla)}
.legal__nav a{display:block;padding-block:.7rem;border-bottom:1px solid var(--c-linea);text-decoration:none;font-weight:600}
.legal__nav a[aria-current]{color:var(--c-acento);font-weight:800}
.fecha-revision{font-size:var(--t-s);color:var(--c-texto-2);margin-top:var(--e-4)}
.error-404{min-height:70vh;display:grid;align-items:center;padding-block:var(--e-seccion)}
.error-404 .botonera{margin-top:var(--e-6)}
.lista-enlaces{border-top:1px solid var(--c-regla);margin-top:var(--e-7)}
.lista-enlaces a{display:flex;justify-content:space-between;align-items:center;padding-block:var(--e-4);border-bottom:1px solid var(--c-linea);text-decoration:none;font-weight:700}
.lista-enlaces a:hover{color:var(--c-acento)}
@media (min-width:56rem){.lista-enlaces--2{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--e-7)}}

/* ---------- 26. Pie ---------- */
.pie{background:var(--carbon-2);color:var(--claro-2);font-size:var(--t-s);padding-block:var(--e-8) var(--e-6)}
.pie a{color:var(--claro);text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie__columnas{display:grid;gap:var(--e-7)}
@media (min-width:56rem){.pie__columnas{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
.pie h2{font:700 var(--t-xs)/1 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--claro);margin-bottom:var(--e-4)}
.pie p+p{margin-top:var(--e-3)}
.pie ul li+li{margin-top:.4rem}
.pie .marca img{height:3rem}
.pie__res{color:var(--claro)}
.pie__pagos{display:flex;flex-wrap:wrap;gap:var(--e-4);align-items:center;justify-content:space-between;margin-top:var(--e-7);padding-top:var(--e-5);border-top:1px solid var(--linea-oscura)}
.pie__legal{margin-top:var(--e-5);padding-top:var(--e-5);border-top:1px solid var(--linea-oscura);display:grid;gap:var(--e-3);font-size:var(--t-xs)}
.pie__legal ul{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e-2) var(--e-5)}

/* ---------- 27. Barra de acción móvil ---------- */
.barra-movil{position:fixed;inset-inline:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr 1.4fr;background:var(--carbon);border-top:1px solid var(--linea-oscura);padding-bottom:env(safe-area-inset-bottom)}
.barra-movil>a,.barra-movil summary{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.75rem;color:var(--claro);font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;list-style:none;border-right:1px solid var(--linea-oscura)}
.barra-movil summary::-webkit-details-marker{display:none}
.barra-movil .barra-movil__cita{background:var(--chispa);color:var(--sobre-chispa);border:0}
.barra-movil details{position:relative}
.barra-movil details>div{position:absolute;bottom:100%;left:0;min-width:17rem;background:var(--carbon);border:1px solid var(--linea-oscura)}
.barra-movil details>div a{display:block;padding:1rem;color:var(--claro);text-decoration:none;border-bottom:1px solid var(--linea-oscura)}
.barra-movil details b{display:block;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--claro-2)}
@media (min-width:56rem){.barra-movil{display:none}}

/* ---------- 28. Movimiento: solo CSS, nunca opacidad, apagado con prefers-reduced-motion ----------
   Si la animación no corre o se queda a medias (captura, impresión, navegador sin soporte) el contenido
   se ve igual. La portada nunca parte de opacidad 0: retrasaría el LCP. Se anima el BLOQUE, no el titular
   suelto, para que nada se monte sobre lo de debajo mientras entra. */
@media (prefers-reduced-motion:no-preference){
  .portada .mega{animation:asomar 1.1s var(--curva) both}
  .portada .mega~.mega{animation-delay:.12s}
  .portada__foto img{animation:acercar 1.6s var(--curva) both}
  @supports (animation-timeline:view()){
    .aparece{animation:deslizar linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .tarjeta,.resena{animation:deslizar linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes asomar{from{transform:translateY(.18em)}to{transform:none}}
@keyframes acercar{from{transform:scale(1.06)}to{transform:none}}
@keyframes deslizar{from{transform:translateY(1.5rem)}to{transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.franja,.cabecera,.barra-movil,.menu{display:none}.oscuro,.pie{background:#fff;color:#000}}
.segmentado--uno{grid-template-columns:1fr}
.barra-movil details.barra-movil__cita{background:var(--chispa);color:var(--sobre-chispa)}
.barra-movil details.barra-movil__cita summary{color:var(--sobre-chispa);border:0}
.barra-movil .a-la-derecha{left:auto;right:0}
.portada .elegir-cita,.cabeza .elegir-cita{margin-left:0}
.portada .elegir-cita__panel{right:auto;left:0}

/* W1f — estado de apertura POR CLÍNICA, junto a su nombre y su teléfono. Sin JS se lee el horario agrupado. */
.estado-sede{display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:center;font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;color:var(--c-texto-2)}
.estado-sede .estado-horario[data-estado=abierto]{color:var(--c-texto)}
.estado-sede__cierre{font-weight:700;color:var(--c-texto)}
.estado-punto .punto{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--tinta-2)}
.estado-punto[data-estado=abierto] .punto{background:#3f8f3a}
.sedes-linea .estado-sede{margin-top:.15rem}
.cabecera-marca__tels a>span:first-child{display:flex;align-items:center;gap:.4rem}
.guia-ejemplo{outline:2px dashed var(--marcador);outline-offset:6px}
body,.claro,.verde,.tinte,.suave,.contacto,.cabecera-marca{--c-abierto:#3f8f3a}
.oscuro,.barra-nav,.pie,.franja,.cabecera{--c-abierto:var(--chispa)}
.estado-horario[data-estado=abierto] .punto,.estado-punto[data-estado=abierto] .punto{background:var(--c-abierto)}

/* W1f — el CEO eligió la B: tarjetas y sus fotos con esquinas redondeadas, en los dos sitios */
.tarjeta,.resena,.contacto,.nota-media,.formulario,.pasos li,.destacada .foto,.instalaciones .foto,.firma .foto,.persona .foto,.revisor,.cta-en-linea,.aviso,.tarjeta-club{border-radius:var(--r-tarjeta);overflow:hidden}
.campo input,.segmentado{border-radius:.75rem}
.segmentado label:first-child{border-radius:.7rem 0 0 .7rem}.segmentado label:last-child{border-radius:0 .7rem .7rem 0}.segmentado--uno label{border-radius:.7rem}
@media (min-width:56rem){.portada__foto{border-radius:var(--r-tarjeta) 0 0 var(--r-tarjeta)}}
.sedes-linea .contenedor>div{padding-block:var(--e-5);border-bottom:1px solid var(--c-linea)}
.sedes-linea .contenedor>div a{padding-block:0;border-bottom:0}
@media (min-width:56rem){.sedes-linea .contenedor>div{border-bottom:0}}
/* W1g — el estado es el mismo en todas las clínicas: punto + texto en una línea, sin marcador de lista */
.estado-sede,.estado-sede *{list-style:none}
.estado-sede .estado-horario{display:inline-flex;align-items:flex-start;gap:.45rem;flex-wrap:nowrap}
.estado-sede .estado-horario .punto{flex:none;margin-top:.35em}