/* =============================================================
   QCC · MONOLITO — capa de marca compartida
   Editorial de alto contraste. Hueso + negro, acento marino.
   Sin bordes redondeados. Sin degradados. Títulos en 600.
   Cada página añade solo la arquitectura de sus secciones.
   ============================================================= */

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

/* Manrope servida desde la propia web y no desde Google Fonts (17 sep 2026):
   sin conexión a terceros antes de pintar y sin enviar la IP del visitante a
   Google (decisión C12). Son los mismos archivos que servía Google (v20): uno
   variable para los pesos 400 a 600, en dos tramos, latín y latín extendido,
   con los mismos `unicode-range`, así que el navegador solo descarga el
   segundo si la página lo necesita. Licencia SIL OFL 1.1 en
   `assets/fonts/OFL.txt`. Ruta relativa para que valga igual en la maqueta
   (`/css/`) y en el tema de WordPress (`/wp-content/themes/qcc/css/`). */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* --- color ---
     Tinta cálida (no negro puro) y papel hueso: el contraste sigue siendo
     alto, pero la página deja de leerse fría. */
  --bone:#F4F2EE; --bone-2:#EBE8E2; --bone-3:#E2DED6;
  --ink:#141210; --ink-2:#4A463F; --ink-3:#6B665D;   /* 4,9:1 sobre hueso (antes #7C776E, 3,98:1) */
  --line:#DAD5CB; --line-2:#C4BFB3;
  /* El marino es la marca, no un acento. Carga los titulares, los
     numerales, los bloques macizos y los botones primarios. El negro
     cálido queda para el texto corrido. */
  --brand:#14315F; --brand-2:#1D4380; --brand-3:#0F2747;
  --brand-ghost:rgba(20,49,95,.62); --brand-tint:#DCE3EE;
  --on-ink:#F4F2EE; --on-ink-2:rgba(244,242,238,.66); --on-ink-3:rgba(244,242,238,.58);  /* .44 daba 3,47:1 */
  --line-on-ink:rgba(244,242,238,.16);

  /* --- tipografía --- */
  --f:'Manrope',system-ui,-apple-system,sans-serif;
  --t-display:7rem; --t-h1:4.5rem; --t-h2:4rem; --t-h3:2.75rem;
  --t-lg:1.25rem; --t-base:1.0625rem; --t-sm:.9375rem; --t-xs:.8125rem; --t-2xs:.75rem;
  --w-regular:400; --w-medium:500; --w-semibold:600;

  /* --- rejilla (idéntica en las cinco) --- */
  --cols:12; --gutter:24px; --container:1320px; --pad:40px;
  --colstep:calc((100% + var(--gutter)) / var(--cols));

  /* --- ritmo vertical --- */
  --sp-section:120px; --sp-head:72px; --sp-block:56px;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--f);background:var(--bone);color:var(--ink);
  font-size:var(--t-base);line-height:1.55;-webkit-font-smoothing:antialiased;
}
/* Seguro contra la cadena larga que todavía no existe. Hoy nada desborda a
   320 px, medido. Pero un correo más largo, un topónimo compuesto o una
   traducción al euskera —que aglutina— sí lo harían, y el fallo aparecería en
   producción y no aquí. `break-word` solo actúa cuando la palabra no cabe de
   ninguna manera, así que con el contenido actual no cambia un píxel. */
body :where(p,li,h1,h2,h3,h4,h5,h6,summary,label,td,th,figcaption,address,blockquote,a){
  overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-weight:var(--w-semibold);line-height:1.03;letter-spacing:-.04em;color:var(--brand)}
/* Sobre fondo macizo (negro o marino) todo lo que iba en marino vuelve
   al papel: un enlace marino sobre marino es invisible. */
.section--ink :is(h1,h2,h3,h4,.link,.faq__q,.lm__b,.stat__n),
.section--brand :is(h1,h2,h3,h4,.link,.faq__q,.lm__b,.stat__n),
.chapter--ink :is(h1,h2,h3,h4,.link,.faq__q,.lm__b,.stat__n),
.chapter--brand :is(h1,h2,h3,h4,.link,.faq__q,.lm__b,.stat__n),
.zz--ink :is(h1,h2,h3,h4,.link),
.zz--brand :is(h1,h2,h3,h4,.link),
.cta :is(h1,h2,h3,h4,.link){color:var(--on-ink)}
.section--ink .faq__q::after,
.chapter--brand .faq__q::after{color:var(--on-ink-3)}

/* ---------- rejilla ---------- */
/* La sangría del contenedor es el mayor entre el token y la zona segura del
   aparato. En vertical `env()` vale 0 y manda `--pad`, así que no cambia nada;
   en apaisado sobre un teléfono con muesca, `env()` llega a 44-59 px y es lo
   que impide que el texto se meta bajo la muesca o bajo la esquina redondeada.
   Va aquí, en el contenedor, y no en `body`: el hero y los capítulos marinos
   van a sangre y un relleno en `body` les quitaría el borde. */
.container{max-width:var(--container);margin-inline:auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
/* La barra pegajosa mide 80 px, así que todo destino de desplazamiento se
   aparta 104. Hasta ahora solo lo hacían las secciones con `id`, y eso dejaba
   fuera los dos destinos que el JavaScript enfoca a mano —el acuse del
   formulario y el primer campo inválido— y el propio `main` del enlace de
   salto. Medido antes del arreglo, a 1440×900: tras un envío correcto el
   «Solicitud recibida.» iba de 33,9 a 61,5 px con la nav ocupando de 0 a 80,
   o sea oculto entero; tras un envío vacío el resumen iba de −98,1 a 24,3, con
   cero píxeles visibles. El mensaje existía donde no se podía leer. */
:where(section[id],main[id]){scroll-margin-top:104px}
.frm__out,.frm__i,.frm__s,.frm__c{scroll-margin-top:104px}
/* solo para lectores de pantalla */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.section{padding-block:var(--sp-section)}
.section>.container{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.section>.container>*{grid-column:1/-1}

/* inversas */
.section--ink{background:var(--ink);color:var(--on-ink)}
.section--ink .kicker{color:var(--on-ink-3)}
.section--ink .s-desc{color:var(--on-ink-2)}
.section--bone2{background:var(--bone-2)}
.section--brand{background:var(--brand);color:var(--on-ink)}
.section--brand .kicker{color:rgba(244,242,238,.55)}
.section--brand .s-desc{color:rgba(244,242,238,.72)}

/* ---------- primitivas tipográficas ---------- */
.kicker{font-size:var(--t-2xs);font-weight:var(--w-semibold);letter-spacing:.02em;color:var(--ink-3)}
.s-title{font-size:var(--t-h2)}
.s-desc{font-size:var(--t-lg);color:var(--ink-2)}
.lead{font-size:var(--t-lg);color:var(--ink-2)}

/* cabecera estándar: titular 1–6, descripción 8–12 */
.s-head{grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);margin-bottom:var(--sp-head)}
.s-head>div{grid-column:1/span 6}
.s-head>.s-desc{grid-column:8/span 5}
.s-head .kicker{display:block;margin-bottom:20px}

/* ---------- botones ---------- */
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:18px 34px;font:inherit;font-size:var(--t-sm);font-weight:var(--w-semibold);border:2px solid var(--brand);background:none;color:var(--brand);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn--p{background:var(--brand);color:var(--bone);border-color:var(--brand)}
.btn--p:hover{background:var(--brand-3);border-color:var(--brand-3)}
.btn--o:hover{background:var(--brand);border-color:var(--brand);color:var(--bone)}
.btn--inv{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn--inv:hover{background:var(--brand);border-color:var(--brand);color:var(--bone)}
.link{display:inline-block;color:var(--brand);font-size:var(--t-2xs);font-weight:var(--w-semibold);letter-spacing:.01em;border-bottom:2px solid currentColor;padding:16px 0 4px}
.link:hover{color:var(--brand)}
.section--ink .link:hover,.section--brand .link:hover{color:var(--bone)}

/* ---------- cambio de página ----------
   Transición entre documentos del propio navegador, sin JavaScript. Va aquí
   porque `base.css` es lo único que cargan las 25 páginas: la regla tiene que
   estar en la página que se deja y en la que llega.

   Dos tiempos que no se solapan, por decisión del usuario del 15 sep 2026:
   primero se ve el cambio de página y después, ya separado, el desplazamiento
   vertical. 540 ms en total: el 17 sep 2026 el usuario la pidió más rápida
   sin cambiar el estilo, y todos los tiempos bajaron al 60 % de los 900 ms
   originales (280/380/520 → 170/230/310), con las mismas curvas y el mismo
   recorrido. El contenido nuevo empieza a verse a los 230 ms, no a los 380.

   1 · Cambio de página, de 0 a 230 ms. La página que se deja se apaga en
       170 ms sin moverse, y un filete marino de 2 px se dibuja bajo la nav de
       izquierda a derecha. Entre los 170 y los 230 ms solo quedan la nav, el
       filete completo y el papel: ese vacío es lo que separa los dos tiempos.
   2 · Desplazamiento vertical, de 230 a 540 ms. El contenido nuevo sube 28 px
       y se asienta con la curva del sistema. El filete aguanta y se apaga en
       el último tramo.

   La nav no se mueve en ninguno de los dos. Es el marco común de las dos
   páginas, y si viajara con el contenido el cambio se leería como una recarga.
   Se captura aparte y se sustituye en seco por la nueva, así que un mega menú
   abierto al hacer clic desaparece con la página que se deja.

   Sin soporte (Firefox hoy) la página cambia al instante, como antes: no hay
   nada que reparar en el respaldo. Con `prefers-reduced-motion: reduce` no
   hay transición. Las recargas, la URL tecleada y las anclas de la misma
   página tampoco la disparan. */
/* DESACTIVADA (usuario, 27 sep 2026: la web «se nota un poco laggy a la hora
   de navegar»). Medido en local, del clic a la página nueva quieta: 746 ms
   con la transición y 62 ms sin ella. `navigation:none` apaga el cambio de
   página entero; las reglas de abajo se quedan inertes por si vuelve (basta
   con `auto`). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:none}
  
  ::view-transition-group(nav){animation:none}
  ::view-transition-old(nav){animation:none;opacity:0}
  ::view-transition-new(nav){animation:none}
  ::view-transition-old(root){animation:pagina-sale .17s ease both}
  ::view-transition-new(root){animation:pagina-llega .31s cubic-bezier(.16,1,.3,1) .23s both}
  @keyframes pagina-sale{to{opacity:0}}
  @keyframes pagina-llega{from{opacity:0;translate:0 28px}}
  /* Llegada a un apartado de otra página: Servicios y Preguntas
     llevan desde fuera a /#servicios y /#preguntas. Por decisión
     del usuario del 15 sep 2026, ahí no hay desplazamiento vertical: solo el
     cambio de página, y la sección aparece ya en su sitio.
     `:target` está puesto cuando empieza la transición, medido, así que basta
     CSS. Dos movimientos que quitar, no uno:
     - La subida de 28 px. Queda solo la opacidad, con los mismos tiempos, para
       que el filete siga cuadrando con la duración total.
     - El desplazamiento suave de `html`, que alcanza también al ancla de carga:
       la página arrancaba arriba y bajaba animada 6.377 px hasta Preguntas
       durante 1,3 s. Se anula solo mientras dura la transición, así que los
       enlaces de ancla dentro de la misma página siguen desplazándose suaves. */
  :root:has(:target)::view-transition-new(root){animation-name:pagina-aparece}
  /* Chromium 148 ya no tiene `:target` puesto al empezar (17 sep 2026): el
     tipo `ancla` lo pone un script en línea en el <head> de cada página, en
     `pagereveal`. La regla de arriba se
     queda para los navegadores que sí lo tengan. */
  :root:active-view-transition-type(ancla)::view-transition-new(root){animation-name:pagina-aparece}
  :root:active-view-transition:has(:target){scroll-behavior:auto}
  @keyframes pagina-aparece{from{opacity:0}}

  @keyframes pagina-filete{
    0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
    43%{transform:scaleX(1);opacity:1}
    70%{transform:scaleX(1);opacity:1}
    100%{transform:scaleX(1);opacity:0}}
}

/* ---------- cifras ---------- */
.stats{grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.stat{grid-column:span 4;padding-block:64px}
.stat__n{font-size:5.5rem;font-weight:var(--w-semibold);letter-spacing:-.04em;line-height:.86;color:var(--brand)}
.stat__l{font-size:var(--t-2xs);font-weight:var(--w-semibold);letter-spacing:.02em;color:var(--ink-3);margin-top:18px}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
/* La medida la fija el contenedor, no cada pieza. Un hijo sin regla propia caía
   en una sola columna de 81 px y el texto salía en vertical, una palabra por
   línea. Le pasó al rótulo de grupo, y le pasaría a cualquier cosa que WordPress
   meta aquí desde ACF. Ahora lo que entre en `.faq` mide 10 columnas. */
.faq>*{grid-column:1/span 10}
.faq__i{border-top:1px solid var(--line)}
/* El rótulo de grupo solo trabaja sin ruta elegida: entonces la lista mezcla
   preguntas de quien abre y de quien ya tiene clínica, y nada más las separa.
   Con el filtro activo sobra, y `intent.js` lo esconde.

   El filete de apertura del grupo lo lleva el rótulo, y la primera pregunta que
   va detrás se queda sin el suyo. Así la línea abre el bloque y el rótulo cae
   dentro, en vez de quedar flotando encima de una regla que pertenecía a la
   pregunta siguiente. `:not([hidden])` es obligatorio: con el filtro puesto el
   rótulo sigue en el DOM y sin él la primera pregunta visible perdía su filete. */
.faq__g{border-top:1px solid var(--line);padding-top:16px;margin-top:64px;font-size:var(--t-xs);font-weight:var(--w-semibold);letter-spacing:.01em;color:var(--ink-3)}
.faq__g:first-child{margin-top:0}
.faq__g:not([hidden])+.faq__i{border-top:0}
.faq__g[hidden]{display:none}
.faq__q{width:100%;background:none;border:0;font:inherit;font-size:1.75rem;font-weight:var(--w-semibold);letter-spacing:-.03em;text-align:left;padding:32px 60px 32px 0;cursor:pointer;position:relative;color:var(--brand)}
/* La pregunta es un encabezado de verdad: entra en el esquema de titulares
   del documento y en la navegación por titulares del lector de pantalla.
   Hereda todo lo del <summary>, así que no cambia un píxel. */
.faq__q h3{font:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0;display:inline}
/* El signo se centra en la fila en vez de colgar de un `top` fijo. El `top:32px`
   anterior era el relleno de escritorio, y a 390 px el relleno baja a 22: el
   glifo caía 18 px por debajo del centro del texto en las preguntas de una línea. */
.faq__q::after{content:'+';position:absolute;right:0;top:0;bottom:0;display:grid;place-items:center;line-height:1;font-size:2rem;font-weight:var(--w-regular);color:var(--brand)}
.faq__i[open]>.faq__q::after{content:'\2212'}   /* signo menos, no guion largo */
.faq__a{padding:0 calc(var(--colstep)*2) 36px 0;color:var(--ink-2);font-size:var(--t-base)}
/* La salida del capítulo. Solo donde el destino añade algo que aquí no cabe:
   cinco de diez. Si todas llevaran enlace, ninguno pesaría. */
/* En línea propia, siempre. `.link` es `inline-block`, así que a 390 px la
   salida se pegaba al final del último renglón: «…comprometa con nada. Qué
   entra en cada partida». `fit-content` mantiene el filete pegado al texto
   del enlace en vez de estirarlo a todo el ancho. */
.faq__go{display:block;width:fit-content;margin-top:4px}   /* `.link` ya trae 16 px de relleno superior */
/* ---------- buscador de preguntas ----------
   Cuarenta preguntas no se recorren con la vista. Dos controles, no más: una
   palabra y un tema. La situación NO se elige aquí —eso es del hero— y por eso
   no hay un tercer control con «abrir» y «tengo».
   Sin JavaScript la barra no se pinta: filtrar es cosa suya, y lo que queda son
   las cuarenta preguntas con sus ocho rótulos, que es lo que ve el buscador. */
html:not(.js) .faqbar,html:not(.js) .faqbar__out{display:none}
.faqbar{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);align-items:end;margin-bottom:14px}
.faqbar__f{grid-column:span 5}
.faqbar__f--t{grid-column:span 3}
.faqbar__f--x{grid-column:span 2}
.faqbar__l{display:block;font-size:var(--t-2xs);font-weight:var(--w-semibold);letter-spacing:.02em;color:var(--ink-3);margin-bottom:6px}
.faqbar__i,.faqbar__s{width:100%;min-width:0;font:inherit;font-size:var(--t-base);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line-2);padding:11px 0;min-height:44px}
.faqbar__i::placeholder{color:var(--ink-3)}
.faqbar__i::-webkit-search-cancel-button{cursor:pointer}
/* Mismo idioma que la flecha de la nav y la del formulario: 14×9, trazo 1,5. */
.faqbar__s{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23141210' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center}
.faqbar__i:hover,.faqbar__s:hover{border-bottom-color:var(--brand)}
/* `.link` solo declara `border-bottom`, y en un <button> los otros tres lados se
   quedaban con el `2px outset` del navegador: salía una caja alrededor del
   texto. `border:0` los quita, y la línea del enlace la sigue dibujando el
   sistema de la portada, que la hace con `text-decoration`, no con borde.
   El relleno alinea su base con el filete de los dos campos y mantiene los
   44 px de objetivo táctil. */
.faqbar__x{background:none;cursor:pointer;border:0;padding:11px 0 10px;min-height:44px}
.faqbar__x[hidden]{display:none}
/* El recuento. Vacío en reposo: solo habla cuando algo esconde preguntas, y por
   eso no ocupa una banda propia por encima de la lista. */
.faqbar__out{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:10px;min-height:1.55em}
.faq__none{font-size:var(--t-lg);color:var(--ink-2);padding-block:56px 8px}
.faq__none[hidden]{display:none}
/* El filtro del buscador esconde con clase, no con `hidden`: `hidden` es de
   `intent.js`, que filtra por ruta. Dos filtros, dos mecanismos, ningún pisotón. */
.faq__i.is-off{display:none}
/* Con la lista filtrada un tema puede quedarse con una sola pregunta, y los
   64 px de separación entre temas pasan a ser agujeros. Filtrando manda un
   ritmo más corto: hay menos que separar. */
.faq.is-filtered .faq__g{margin-top:36px}
/* El botón que abre la lista completa. Sin JavaScript no se pinta: allí se
   sirven las cuarenta y no hay nada que abrir. */
html:not(.js) .faq__more{display:none}
.faq__more{margin-top:40px}
.faq__more[hidden]{display:none}
.faq__moreb{background:none;cursor:pointer;border:0;padding:16px 0 4px;font:inherit;font-size:var(--t-2xs);font-weight:var(--w-semibold);letter-spacing:.01em;color:var(--brand);min-height:44px}
.section--ink .faq__i{border-color:var(--line-on-ink)}
.section--ink .faq__a{color:var(--on-ink-2)}
/* Gemelo de ratón del `:focus-visible`. La fila mide 1.029 px y no respondía
   al puntero: solo `cursor:pointer`, con el signo hasta 500 px a la derecha
   del final de la pregunta. */
@media(hover:hover){
  .faq__i:has(>.faq__q:hover){border-top-color:var(--brand)}
  .faq__q:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
}

/* ---------- reseñas ---------- */
.revs{grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.rev{grid-column:span 4;padding-block:40px;border-top:1px solid var(--line)}
.rev__s{letter-spacing:3px;font-size:var(--t-xs);margin-bottom:20px}
.rev__t{font-size:var(--t-base);line-height:1.5;margin-bottom:26px;letter-spacing:-.01em}
.rev__n{font-size:var(--t-2xs);font-weight:var(--w-semibold);letter-spacing:.01em}
.rev__m{font-size:var(--t-2xs);color:var(--ink-3);margin-top:4px}
/* ---- el control que despliega el mural -------------------------------
   Sirve a la portada y a /contacto. SIN `display` propio, a propósito: el
   botón nace con `hidden` en el marcado y un `display:block` aquí se lo
   comería, que es como se quedan estos controles vivos y mudos sin
   JavaScript. Solo margen; quien lo enseña es `/js/resenas.js`. */
.revs__more{margin-top:28px}
.revs__more[hidden]{display:none}
/* El reseteo del `<button>`, calcado del de `.faq__moreb`. Sin él salía con la
   cara de botón del navegador: borde `2px outset`, fondo gris y Arial, porque
   `.link` solo toca el borde inferior y el resto de la caja de un botón la
   pone el agente de usuario. `border:0` quita los cuatro; el inferior lo
   vuelve a poner `.link` en las páginas interiores, que es su acabado allí, y
   en la portada lo sustituye el subrayado. */
.revs__moreb{background:none;cursor:pointer;border:0;padding:18px 0 8px;font:inherit;font-size:var(--t-sm);font-weight:var(--w-semibold);letter-spacing:.01em;color:var(--brand);min-height:44px}
/* En escritorio el mural son tres filas de tres, se abarca de un vistazo y no
   cuesta bajada: no hay nada que plegar y el control sobra. */
@media(min-width:901px){.revs__more{display:none}}

/* ---------- sin filete donde cambia el fondo (26 sep 2026) ----------
   Decisión del usuario: entre dos secciones de fondo distinto —dos tonos de
   papel, papel y marino, o una foto— no va filete: ya las separa el cambio de
   fondo. Entre dos secciones del MISMO fondo se mantiene, que es donde hace
   falta. Los capítulos se dibujan con su filete de arriba y la cabecera con el
   de abajo (`pagina.css` y el `<style>` de la portada); aquí solo se quitan en
   las uniones con cambio de fondo, medidas en las 27 páginas. Especificidad
   (0,2,0) o más a propósito: esas reglas son (0,1,0) y van después. */
.phead.phead--img{border-bottom:0}
.phead--img + .chapter{border-top:0}
:not(.chapter--bone2):not(.who) + .chapter.chapter--bone2,
.chapter--bone2 + .chapter:not(.chapter--bone2),
.chapter--brand + .chapter:not(.chapter--brand),
.chapter.chapter--brand,
.cta + .chapter:not(.chapter--brand),
.chapter + section.who,
.who + .chapter:not(.chapter--bone2),
.chapter + section.apuer,
.lgl + section.lgl-more{border-top:0}

/* ---------- reseñas en carrusel (26 sep 2026) ----------
   Petición del usuario: el mural de 3 × 3 «no convence»; carrusel que avanza
   solo de una en una y flechas mínimas para recorrerlo. Sirve a la portada y a
   /contacto. Es una fila con desplazamiento y `scroll-snap`: sin JavaScript se
   desliza con el dedo, el trackpad o la barra, y las nueve siguen en el HTML.
   `/js/resenas.js` añade el paso automático y las flechas.
   Tarjeta o no tarjeta se decide con `.revs--tarjeta` en el contenedor: el
   usuario quiere probar las dos. Sin la clase, la cita va sobre el papel con
   su filete de arriba, como en el mural. */
/* Menos alta que un capítulo normal (usuario, 26 sep 2026): 80 px de aire
   arriba y abajo en vez de 120, y 40 entre el titular y las tarjetas en vez
   de 56. En el teléfono ya van los 64 de siempre. */
@media(min-width:901px){#resenas{--sp-section:80px;--sp-block:40px}}
.revs--run{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
.revs--run::-webkit-scrollbar{display:none}
.revs--run:focus-visible{outline:2px solid var(--brand);outline-offset:6px}
/* `animation:none` se queda por si vuelve una animación de entrada: la
   portada animaba `.revs .rev` con `animation-timeline: view()` (retirada el
   27 sep 2026) y, dentro de una fila horizontal, ese reloj se ataba a la
   propia fila y las tarjetas se quedaban a medio aparecer. */
.revs.revs--run .rev{flex:0 0 calc((100% - 2 * var(--gutter)) / 3);scroll-snap-align:start;display:flex;flex-direction:column;animation:none}
.revs--run .rev__t{flex:1}
.revs--run .rev__n{font-style:normal}
.revs--run .rev__role{min-height:calc(var(--t-xs) * 1.55)}
/* Tarjeta sin borde (usuario, 26 sep 2026): la separa del fondo el papel más
   claro, no un filete. */
.revs--tarjeta .rev{background:var(--paper,#FBFAF7);border:0;padding:30px 30px 26px}
/* Flechas mínimas: el trazo de la flecha y nada más, sin caja; 44 px de
   objetivo táctil. Sin botón de pausa, por decisión del usuario (26 sep
   2026): el paso se detiene con el ratón encima o el foco dentro, y no arranca
   con el movimiento reducido activado. */
.revs-run__nav{display:flex;justify-content:flex-end;gap:4px;margin-top:10px}
.revs-run__nav[hidden]{display:none}
.revs-run__b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;color:var(--brand);cursor:pointer;transition:color .2s,opacity .2s}
.revs-run__b svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.revs-run__b:disabled{opacity:.3;cursor:default}
@media(hover:hover){.revs-run__b:not(:disabled):hover{color:var(--brand-3)}}
.revs-run__b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(min-width:901px) and (max-width:1200px){.revs.revs--run .rev{flex-basis:calc((100% - var(--gutter)) / 2)}}
@media(max-width:900px){
  /* Una a la vista y el borde de la siguiente: el borde es el que dice que hay
     más sin necesidad de rótulo. El recuento no se publica (orden del 17 ago). */
  .revs.revs--run .rev{flex-basis:86%}
  /* La fila llega al borde de la pantalla: cortada en el margen del contenedor,
     el borde de la siguiente se leía como un recorte y no como «hay más». */
  .revs--run{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .revs--tarjeta .rev{padding:28px 22px 24px}
}
@media(prefers-reduced-motion:reduce){.revs--run{scroll-behavior:auto}}
.section--ink .rev{border-color:var(--line-on-ink)}
.section--ink .rev__m{color:var(--on-ink-3)}

/* ---------- recursos ---------- */
.lm{grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.lm__c{grid-column:span 4;padding:40px 36px 40px 0;border-top:1px solid var(--line);display:flex;flex-direction:column}
.lm__tag{font-size:var(--t-2xs);font-weight:var(--w-semibold);letter-spacing:.02em;color:var(--ink-3);margin-bottom:24px}
.lm__t{font-size:1.5rem;font-weight:var(--w-semibold);letter-spacing:-.03em;line-height:1.12;margin-bottom:14px;flex:1}
.lm__m{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:26px}
.lm__b{background:none;border:0;border-top:2px solid currentColor;padding:16px 0 0;font:inherit;font-size:var(--t-2xs);font-weight:var(--w-semibold);letter-spacing:.01em;cursor:pointer;text-align:left;display:flex;justify-content:space-between;color:inherit}
.lm__b:hover{color:var(--brand)}

/* ---------- cta ---------- */
.cta{background:var(--brand);color:var(--on-ink);padding-block:150px}
.cta>.container{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.cta>.container>*{grid-column:1/-1}
.cta h2{grid-column:1/span 8;font-size:5.5rem;letter-spacing:-.055em;margin-block:24px 40px}
.cta__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.cta p{font-size:var(--t-lg);color:rgba(244,242,238,.72);max-width:44ch}

/* ---------- imágenes ----------
   Duotono cálido en vez de blanco y negro puro: conserva la sobriedad
   pero quita el frío clínico del grayscale al 100 %. */
.ph{overflow:hidden;background:var(--bone-3)}
.ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.88) sepia(.14) contrast(1.02) brightness(1.02)}

/* ---------- PRUEBA (26 sep 2026): velo negro en las fotos sueltas ----------
   A petición del usuario («menos brillo, más atenuación»): el mismo negro cálido
   de la tinta que el hero, las cabeceras y la franja de la red, en las fotos que
   no llevan texto encima (tarjetas del menú, sala de reuniones de la portada,
   despacho de Qué hacemos, edificio de Contacto). Sin texto encima no hay
   contraste que cumplir: la intensidad se decide a ojo en `--velo-foto`. Del
   0,62 inicial bajó al 0,35 el mismo día: el usuario lo vio «muy oscuro».
   Fuera, a propósito: fotos, retratos y logotipos del directorio, que son de
   las clínicas y los médicos de la red. Quitar este bloque devuelve las fotos. */
:root{--velo-foto:.35}
.ph,.who__img{position:relative}
.ph::after,.who__img::after{content:'';position:absolute;inset:0;background:rgba(20,18,16,var(--velo-foto));pointer-events:none}

/* ---------- foco visible (accesibilidad) ----------
   `select` y `textarea` faltaban en la primera lista: el desplegable caía al
   anillo por defecto de Chromium (#005FCC), que sobre marino da 1,94:1.
   Y en la lista de inversión faltaban los tres controles de formulario, así
   que dentro de un bloque marino el anillo salía en `--brand` sobre `--brand`:
   1:1, invisible. Los campos de texto se salvaban a medias porque su borde sí
   cambia a hueso, pero la CASILLA DE CONSENTIMIENTO no tenía ninguna otra
   pista: al tabular hasta ella no cambiaba un solo píxel. Es el único control
   de la web con consecuencia legal. Medido, no supuesto. */
:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;
}
.section--ink :where(a,button,input,select,textarea,summary):focus-visible,
.section--brand :where(a,button,input,select,textarea,summary):focus-visible,
.chapter--ink :where(a,button,input,select,textarea,summary):focus-visible,
.chapter--brand :where(a,button,input,select,textarea,summary):focus-visible,
.cta :where(a,button,input,select,textarea,summary):focus-visible{outline-color:var(--on-ink)}

/* ---------- tacto ---------- */
.btn:active,.lm__b:active{transform:translateY(1px)}

/* Sin entradas por scroll: una misma animación repetida en cada sección
   es ruido, no jerarquía. El único momento animado de M3 es el filtrado
   del capítulo 02, y vive en esa página. */

/* ---------- responsive ---------- */
/* ---- letra del teléfono (27 sep 2026, petición del usuario) -------------
   En el ordenador la densidad está bien; en el teléfono abrumaba: cuerpo a
   17 px y titulares de 36-40 px en 390 de ancho. Se baja la raíz a 14 px
   (87,5 %, respeta el tamaño que elija el visitante), así que todo lo que va
   en rem baja un 12,5 % de golpe, y los tokens se reescriben en esa raíz.
   Suelos: cuerpo 15 px, texto pequeño 13 y 12, nunca menos. Los campos de
   formulario siguen a 16 px: por debajo, Safari de iOS amplía la página al
   tocarlos. */
@media(max-width:900px){
  html{font-size:87.5%}
  :root{
    --pad:20px; --gutter:16px; --sp-section:64px; --sp-head:36px; --sp-block:32px;
    /* en px con raíz de 14: 38,5 · 31,5 · 28 · 21 */
    --t-display:2.75rem; --t-h1:2.25rem; --t-h2:2rem; --t-h3:1.5rem;
    /* 17 · 15 · 14 · 13 · 12 px exactos, escritos como px/14 */
    --t-lg:calc(17rem/14); --t-base:calc(15rem/14); --t-sm:1rem; --t-xs:calc(13rem/14); --t-2xs:calc(12rem/14);
  }
  /* `!important` a propósito: la portada y `pagina.css` redefinen los campos
     con más especificidad, y esta regla tiene que ganar a todas. */
  :is(.frm__i,.frm__s,.faqbar__i,.faqbar__s){font-size:16px !important}
  
  .section>.container,.cta>.container{display:block}
  .s-head, .stats, .faq, .revs, .lm {grid-template-columns:1fr}
  .s-head>*, .stat, .faq>*, .rev, .lm__c, .cta h2 {grid-column:auto}
  .s-head>div{margin-bottom:20px}
  .stat{padding-block:32px}
  .cta{padding-block:72px}
  .cta h2{font-size:2.6rem}
  /* El signo era 1,6 veces la pregunta: 32 px de glifo contra 20 px de texto. */
  .faq__q{font-size:1.25rem;padding-block:22px;padding-right:44px}
  .faq__q::after{font-size:1.5rem}
  .faq__g{margin-top:44px;padding-top:14px}
  .faqbar{display:block}
  .faqbar__f{margin-bottom:18px}
  /* Sin filtros puestos el botón no existe, y su párrafo dejaba 18 px de hueco
     muerto entre el desplegable y la primera pregunta. */
  .faqbar__f--x:has(>[hidden]){margin-bottom:0}
  .faq__none{font-size:var(--t-base);padding-block:40px 8px}
  .faq__a{padding-right:0}
  .lm__c,.rev{padding-right:0}

  /* ---- el pie del teléfono: mapa del sitio, no escalera -----------------
     Medido a 390 px: el pie ocupaba 1.458 px —1,7 pantallas— y en el blog
     era el 36 % de la página entera. No es contenido, es la navegación de
     salida: en el teléfono no puede costar lo mismo que un capítulo.

     Los enlaces NO se achican. Siguen en 45 px de alto, por encima del
     suelo táctil de 44, y solo pasan a dos por fila: once destinos se leen
     de un vistazo en lugar de bajarse uno a uno. Las dos columnas de
     enlaces caen de 268 y 315 px a la mitad de filas cada una. */
  /* ---- las nueve reseñas: mismo texto, menos aire ---------------------
     Sirve a la portada y a /contacto, que publican el mismo mural. El
     relleno de escritorio viajaba entero al teléfono: 80 px por cita, 720
     px de hueco vertical en una sola sección. Las citas son literales y no
     se tocan ni una coma; solo el aire que las rodea. 2.886 → 2.528 px. */
  /* Tres reseñas a la vista y el resto tras el control. `/js/resenas.js`
     marca con `is-over` las que caen fuera de las tres primeras EN ORDEN
     VISUAL —el hero reordena el mural por afinidad con `order`— y pone
     `is-capped` en el contenedor. Esconder se decide aquí y solo aquí, para
     que el mural de escritorio no dependa de que ese archivo cargue. */
  .revs.is-capped .rev.is-over{display:none}
  .rev{padding-block:26px}
  .rev__t{margin-bottom:16px}

}

/* ---------- alto contraste de Windows ----------
   `forced-colors: active` sustituye TODO color declarado por la paleta del
   sistema. Los fondos macizos se van, los bordes se quedan. Este proyecto
   construye la profundidad con capas tonales y filetes, así que sobrevive casi
   entero, pero hay tres piezas que dejan de decir lo que decían.

   Comprobado en navegador con `forcedColors: active`: el fondo marino del
   cierre pasa a blanco, el velo del hero pasa a transparente y la fotografía
   se queda debajo del texto. */
@media (forced-colors: active) {
  /* Un color plano de marca que ya no existe no puede seguir siendo la única
     señal de estado. Los que llevan borde lo conservan; a los demás se les da
     uno para que la frontera entre zonas no desaparezca. */
  .btn, .link {forced-color-adjust:auto}
  /* El subrayado de los enlaces es color: en alto contraste se pierde. Vuelve
     como decoración de texto, que sí sobrevive. */
  .cta__k {text-decoration:underline}
}

/* ---------- estrellas de las reseñas ----------
   DESDE EL 29 SEP 2026 LA WEB NO DA NOTA MEDIA (decisión del usuario): el
   componente solo pinta las cinco estrellas de la reseña de cada página de
   servicio (`figure.said`, `--pct:100%`). Donde es decorativo va con
   `aria-hidden`, para que un lector de pantalla no lea cinco veces «estrella».

   EL RELLENO ES EXACTO, NO REDONDEADO: `--pct` es la nota sobre 5 en
   porcentaje. Cinco estrellas en filete tonal y encima las mismas cinco en
   marino, recortadas. Dos capas de color sólido, nunca un degradado, que el
   cliente los prohíbe.

   Sobre marino, `--stars--on-ink`: el marino perdería contraste contra el
   fondo, así que la capa llena pasa a `--on-ink` y la vacía al filete claro. */
.stars {
  position: relative;
  display: inline-block;
  color: var(--line-2);
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  forced-color-adjust: auto
}
.stars i {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: var(--pct, 100%);
  color: var(--brand);
  font-style: normal
}
.stars--on-ink { color: var(--line-on-ink) }
.stars--on-ink i { color: var(--on-ink) }


/* ---------- método en franja con fotos (26 sep 2026) ----------
   Petición del usuario: la timeline del método «demasiado robótica»; mejor
   una franja de cinco fotos, una por fase, en la portada y en las páginas de
   servicio. Aquí y no en `pagina.css` porque la portada no carga esa hoja: una
   sola definición para las dos. Mismo gesto que la franja de «Otras líneas»:
   foto de fondo, velo negro plano de las cabeceras (0,62; 4,6:1 en el peor
   píxel) y letra clara; al pasar el ratón el velo baja a 0,48 y la foto se
   acerca un 5 %. Nada se mueve de sitio.
   SIN TIMELINE (usuario, 27 sep 2026): «no quiero que sea una timeline;
   simplemente que las fotos ocupen el 100 % del ancho de la pantalla y se
   vayan desplegando conforme vas deslizando hacia abajo». Sin línea, sin
   fijar la pantalla y sin eje: la franja va a sangre.
   SIN ANIMACIÓN (usuario, 27 sep 2026: «no me convence cómo se termina
   viendo»): las cinco fotos, enteras y quietas desde el principio, en todos
   los tamaños. */
.proc { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; counter-reset: none }
.proc__i { position: relative; isolation: isolate; overflow: hidden; min-height: 480px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 26px 30px; color: var(--on-ink); background: var(--ink) }
.proc__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.16,1,.3,1) }
.proc__i::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(20, 18, 16, .62); transition: background-color .4s ease }
/* Icono en cuadro claro con el trazo en marino (usuario, 27 sep 2026: «los
   cuadrados de los iconos deberían ser blancos y los iconos, azules»). */
.proc__ic {
  display: block; box-sizing: content-box; width: 22px; height: 22px; padding: 10px; background: var(--paper, #FBFAF7);
  fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round
}
.proc__t { font-size: 1.5rem; font-weight: var(--w-semibold); letter-spacing: -.025em; line-height: 1.15; color: var(--on-ink) }
.proc__d { margin-top: 12px; font-size: var(--t-sm); line-height: 1.5; color: var(--on-ink); max-width: 34ch }
.proc__i:hover::before { background: rgba(20, 18, 16, .48) }
.proc__i:hover .proc__ph { transform: scale(1.05) }
@media (prefers-reduced-motion: reduce) { .proc__ph { transition: none } .proc__i:hover .proc__ph { transform: none } }
/* Escritorio: los cinco títulos a la misma altura aunque las frases midan
   distinto. Cada panel ocupa tres filas compartidas (`subgrid`): icono, aire y
   texto; la fila del texto mide lo que la frase más larga. */
@media (min-width: 1201px) {
  @supports (grid-template-rows: subgrid) {
    .proc { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 480px }
    .proc__i { display: grid; grid-row: span 3; grid-template-rows: subgrid; min-height: 0 }
    .proc__i > div { grid-row: 3 }
  }
}
/* Tablet y teléfono: una foto debajo de otra, cada una a todo el ancho de la
   pantalla, con el mismo corte de 2 px que separa las cinco en escritorio. */
@media (max-width: 1200px) {
  .proc { grid-template-columns: minmax(0, 1fr) }
  .proc__i { min-height: 300px; padding: 24px 28px 28px }
  .proc__d { max-width: 52ch }
}
@media (max-width: 700px) {
  .proc__i { min-height: 240px; padding: 20px 20px 22px }
  .proc__t { font-size: 1.3125rem }
}
/* Aire debajo de la franja. */
.proc-run { margin-bottom: 64px }
@media (max-width: 900px) { .proc-run { margin-bottom: 56px } }

/* A la derecha del titular de capítulo: la llamada a la reunión (servicio) o
   el compromiso de confidencialidad (portada). Arriba y no debajo de la
   franja: así la franja fijada se queda con el alto de la pantalla. */
.opener__aside { grid-column: 9/span 4; grid-row: 1/span 2; align-self: end; justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 12px }
.opener__note { font-size: var(--t-sm); color: var(--ink-2) }
@media (max-width: 1200px) {
  .opener__aside { grid-column: 1/-1; grid-row: 3; justify-self: start; margin-top: 24px }
}
@media (max-width: 700px) {
  .opener__aside .btn { width: 100%; justify-content: center; min-height: 56px }
  .opener__aside { align-items: stretch; justify-self: stretch }
}

/* ---- textos breves en el teléfono (27 sep 2026, petición del usuario) -----
   En el ordenador la densidad está bien; en el teléfono abrumaba. El usuario
   no quiere quitar texto sino decirlo más corto: las descripciones largas
   llevan dos versiones en el HTML, la completa y una breve recortada de ella
   (sin datos nuevos). El ordenador pinta la completa; ≤900 px, la breve. La
   completa sigue en el HTML servido para los buscadores, y como la que no se
   pinta va con `display:none`, un lector de pantalla solo lee una. */
.txt-movil { display: none }
@media (max-width: 900px) {
  .txt-completo { display: none }
  .txt-movil { display: inline }
  /* Con la frase breve, la foto de cada fase no necesita sus 240 px. */
  .proc__i { min-height: 200px }
}