/* ── PRUEBA · Inter Display en todo el sitio ──────────────────────────────
Sustituye Newsreader y la pila de sistema. Se aplica aquí, en la hoja del
sitio, y no en tokens/typography.css: así el design system conserva su
tipografía y la prueba se revierte borrando este bloque y el de
shell.js. font-optical-sizing:auto activa el eje opsz de InterVariable, que
es lo que da el corte Display en los tamaños grandes. */
:root{
--font-display:"InterDisplay","InterVariable","Inter",system-ui,sans-serif;
--font-emph:"Newsreader",Georgia,"Times New Roman",serif;
--font-body:"InterVariable","Inter",system-ui,sans-serif;
}
html{font-optical-sizing:auto}
/* Alias locales: esta hoja usa nombres de composición y el sistema tiene los
suyos. Traducir aquí, en un solo sitio, evita repetir el nombre largo en cada
regla y deja el sistema como única fuente de los valores. */
:root{
--font-titulo:var(--font-display);
--size-d1:var(--size-display); --lh-d1:var(--leading-display); --track-d1:var(--tracking-display);
--track-h2:var(--tracking-heading);
--size-lede:var(--size-entrada); --lh-lede:var(--leading-entrada);
--lh-h3-serif:var(--leading-h3-serif);
/* --accion-hover y --accion-activo viven ahora en tokens/colors.css, con el
resto de la capa semántica en castellano: redefinirlos aquí dejaba fuera a
cualquier página que no cargue esta hoja. */
}
/* Contigo · capa de página. styles.css trae identidad y componentes; esto solo
resuelve la composición de las 16 rutas. Un campo por función: blanco para
leer, Piedra para la voz, Oliva para el panel de acción, Mar para el cierre. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--tinta);font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
/* ── Esqueleto ── */
.env{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.env--n{max-width:760px}
main{display:block}
section{scroll-margin-top:96px}
/* ── Salto y foco ── */
.saltar{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 20px;background:var(--mar-800);color:var(--white);font:var(--weight-semibold) var(--size-label)/1 var(--font-body);border-radius:0 0 var(--radius-md) 0}
.saltar:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2.5px solid var(--mar-800);outline-offset:3px;border-radius:3px}
/* ── Cabecera flotante ──
Sin franja. En ningún estado hay fondo, filete ni desenfoque en la barra: la
franja verde de 78 px cruzando la fotografía era lo que envejecía la pieza.
Aquí la cabecera es aire y solo se ven sus tres piezas, cada una con su
propio ground. Lo único que cambia al desplazarse es la altura. */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:20px clamp(18px,3vw,40px);background:transparent;border:0;transition:padding .32s var(--ease-out)}
.nav--plegado{padding-top:11px;padding-bottom:11px}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}
/* Marca. Dos archivos apilados que se cruzan en opacidad, no un src que se
conmuta: el cambio es interpolable, no dispara descarga a mitad de scroll y
no puede parpadear. El tono lo decide la zona que la barra sobrevuela.
flex:0 0 auto en los dos niveles porque el ![]()
tiene width:auto, así que su
min-content es 0 y el navegador lo comprimiría al estrechar la fila —
deformar el logotipo es uso incorrecto (readme §4). */
.nav__brand{position:relative;display:block;height:39.14px;flex:0 0 auto;transition:filter .34s var(--ease-out)}
.nav__mar{height:39.14px;width:auto;display:block;flex:0 0 auto}
.nav__mar--v{position:absolute;inset:0;opacity:0}
.nav[data-sobre="claro"] .nav__mar--b{opacity:0}
.nav[data-sobre="claro"] .nav__mar--v{opacity:1}
/* Sombra solo mientras la marca va en blanco sobre fotografía. Sobre campo
claro el logotipo es verde y ahí una sombra únicamente lo ensucia. */
.nav[data-sobre="oscuro"] .nav__brand{filter:drop-shadow(0 1px 14px rgb(var(--tinta-rgb) / .5))}
@media (prefers-reduced-motion:reduce){.nav__mar,.nav__brand{transition:none}}
/* Menú central. Arriba está desplegado; al consolidarse la barra se pliega y su
sitio lo toma la píldora. Se anima opacidad y desplazamiento, y visibility
entra en la transición para que al plegarse deje de recibir foco de teclado:
un enlace invisible pero tabulable es una trampa. */
.nav__pod{display:flex;align-items:center;gap:var(--space-6);transition:opacity .26s var(--ease-out),transform .3s var(--ease-out),visibility .3s}
.nav--plegado .nav__pod{opacity:0;transform:translate3d(0,-8px,0);visibility:hidden;pointer-events:none}
.nav__link{position:relative;white-space:nowrap;display:inline-flex;align-items:center;min-height:38px;padding:0 2px;font:var(--weight-medium) var(--size-label)/1 var(--font-body);text-decoration:none;transition:color .3s var(--ease-out)}
/* El color se declara también en hover y foco: tokens/base.css trae un
a:hover{color:var(--text-link-hover)} global que gana por orden, y era lo que
teñía de verde el enlace bajo el puntero. Aquí el hover no toca el color:
solo aparece el filete. */
.nav[data-sobre="oscuro"] .nav__pod .nav__link,
.nav[data-sobre="oscuro"] .nav__pod .nav__link:hover,
.nav[data-sobre="oscuro"] .nav__pod .nav__link:focus{color:var(--white)}
.nav[data-sobre="claro"] .nav__pod .nav__link,
.nav[data-sobre="claro"] .nav__pod .nav__link:hover,
.nav[data-sobre="claro"] .nav__pod .nav__link:focus{color:var(--mar-800)}
/* Marcado por debajo, de izquierda a derecha. El pseudoelemento permite
animarlo; text-decoration no. */
.nav__pod .nav__link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .42s var(--ease-out)}
.nav__pod .nav__link:hover::after,.nav__pod .nav__link:focus-visible::after,.nav__pod .nav__link[aria-current="page"]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav__pod,.nav__link,.nav__pod .nav__link::after{transition:none}}
/* Sin desplazar: CTA · idioma. Al plegarse, la fila se invierte y queda
menú · idioma · CTA de derecha a izquierda, con el menú pegado al borde.
El reorden se hace con `order`, no moviendo nodos: el orden del DOM es el de
lectura y el de tabulación, y ese no debe cambiar al desplazar. */
.nav__der{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav__der>.nav__cta{order:1}
.nav__der>.nav__idi{order:2}
.nav__der>.nav__pop{order:3}
/* No hay reorden al plegar: el orden natural del DOM ya deja CTA · idioma ·
menú de izquierda a derecha, o sea menú · idioma · CTA leído desde el borde
derecho, que es la disposición pedida. Lo único que cambia es que la píldora
de menú pasa de 0 a su ancho, así que la fila se estira hacia la izquierda y
el menú queda pegado al canto. */
/* Grupo de idioma. Tres enlaces, no un botón: con rutas por idioma cambiar de
idioma es navegar, y eso obliga a un ancho AUTOMÁTICO. La versión anterior
conservaba las medidas del botón —44 px fijos para dos glifos— y los tres
enlaces sumaban 65 px: se salían 11 px por la izquierda y el último chocaba
con la píldora «Menú». Medido a 924 px con intersección de rectángulos.
El alto de pulsación baja al ENLACE, que es lo que se pulsa; el grupo solo
aporta el fondo y el contorno.
La tinta sube al 88 %, como se hizo con la cápsula de navegación por el mismo
motivo: flota sobre la fotografía del hero y con un 30 % el contraste dependía
de la zona que le tocara debajo. */
.nav__idi{display:inline-flex;align-items:center;gap:2px;width:auto;padding:3px;border-radius:var(--radius-pill);border:1px solid rgb(var(--blanco-rgb)/.42);background:rgb(var(--tinta-rgb)/.88);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);transition:background-color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
/* color en el enlace y no heredado: la regla genérica de declara --enlace
(#2C5C54) y ganaba a la del grupo, así que el conmutador quedaba en 2,11:1
sobre la píldora. En blanco sobre la tinta al 88 % da 12,2:1. */
.nav__idi-a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:38px;padding:0 7px;border-radius:var(--radius-pill);color:var(--blanco);font:var(--weight-semibold) var(--size-label)/1 var(--font-body);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-decoration:none;transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out)}
.nav__idi-a:hover{color:var(--blanco);background:rgb(var(--blanco-rgb)/.16)}
.nav__idi-a:focus-visible{outline:var(--focus-ring-width) solid var(--blanco);outline-offset:2px}
/* El idioma actual se marca con fondo lleno: es el único que no navega. */
.nav__idi-a[aria-current]{background:var(--blanco);color:var(--tinta)}
.nav__idi-a[aria-current]:hover{background:var(--blanco);color:var(--tinta)}
.nav__idi:focus-visible{outline:var(--focus-ring-width) solid var(--blanco);outline-offset:3px}
/* Sobre zona clara toma la tinta, igual que la marca y el menú. */
.nav[data-sobre="claro"] .nav__idi{border-color:rgb(var(--tinta-rgb)/.30);background:rgb(var(--blanco-rgb)/.52);color:var(--tinta)}
.nav[data-sobre="claro"] .nav[data-sobre="claro"] .nav__idi:focus-visible{outline-color:var(--focus-ring)}
@media (prefers-reduced-motion:reduce){.nav__idi{transition:none}}
/* Píldora de menú. Mismo alto y radio que la CTA para que se lean como pareja,
y contorno en vez de relleno para que la CTA siga siendo la acción principal:
dos píldoras macizas competirían. El fondo translúcido con desenfoque le da
ground propio sobre cualquier zona, que es lo que permite quitar la franja. */
/* La píldora nace plegada a cero de ancho y se despliega cuando la barra se
consolida. Se animan max-width y padding en vez de conmutar display, que no
se puede interpolar, y overflow:hidden evita que el rótulo asome mientras
está plegada. */
.nav__tog{display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:0;padding:0;overflow:hidden;white-space:nowrap;border-radius:var(--radius-pill);border:0 solid transparent;background:transparent;font:var(--weight-semibold) var(--size-label)/1 var(--font-body);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);transition:max-width .34s var(--ease-out),padding .34s var(--ease-out),opacity .24s var(--ease-out),visibility .34s,color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .22s var(--ease-out)}
.nav--plegado .nav__tog,
.nav__tog[aria-expanded="true"]{max-width:180px;padding:0 var(--space-5);border-width:1.5px;opacity:1;visibility:visible;pointer-events:auto}
.nav[data-sobre="oscuro"] .nav__tog{color:var(--white);border-color:rgb(var(--blanco-rgb) / .5);background:rgb(var(--tinta-rgb) / .3)}
.nav[data-sobre="claro"] .nav__tog{color:var(--mar-800);border-color:var(--piedra-300);background:rgb(var(--blanco-rgb) / .72)}
.nav[data-sobre="oscuro"] .nav__tog:hover{background:rgb(var(--tinta-rgb) / .55);border-color:var(--white)}
.nav[data-sobre="claro"] .nav__tog:hover{background:var(--white);border-color:var(--mar-600)}
.nav__tog-t{display:block}
/* Dos trazos que giran a cruz. El icono hereda currentColor, así que cambia de
tono con la píldora sin declararlo dos veces. */
.nav__barras{position:relative;width:16px;height:10px;flex:0 0 auto}
.nav__barras i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:top .3s var(--ease-out),transform .3s var(--ease-out)}
.nav__barras i:first-child{top:0}
.nav__barras i:last-child{top:8.5px}
.nav__tog[aria-expanded="true"] .nav__barras i:first-child{top:4.25px;transform:rotate(45deg)}
.nav__tog[aria-expanded="true"] .nav__barras i:last-child{top:4.25px;transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav__barras i,.nav__tog{transition:none}}
/* Selector con ancestro a propósito: web.css trae una regla global
a:not(.btn){color:var(--enlace)} y :not() hereda la especificidad de su
argumento, así que vale (0,1,1) y gana a .nav__cta (0,1,0). La home no tiene
esa regla —hoja propia—, de modo que al portar el bloque el rótulo pasó a
mar-700 sobre oliva-700: 1,02:1, ilegible. Con .nav delante son (0,2,0) y
gana la declaración correcta. Repetir color en .nav__cta no habría servido. */
.nav .nav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-5);border-radius:var(--radius-pill);background:var(--oliva-700);color:var(--white);font:var(--weight-semibold) var(--size-label)/1 var(--font-body);text-decoration:none;white-space:nowrap;border:none;cursor:pointer;transition:background var(--dur-1) var(--ease-out)}
/* El color se declara también en hover y foco: tokens/base.css trae un
a:hover{color:var(--text-link-hover)} global que gana por orden, y sin esto el
texto se teñía de oliva oscuro sobre fondo oliva y desaparecía. */
.nav .nav__cta:hover,.nav .nav__cta:focus{background:var(--oliva-800);color:var(--white)}
.nav .nav__cta:active{background:var(--oliva-900);color:var(--white)}
/* Por debajo de 1180 px el menú central no cabe —seis destinos más logotipo y
CTA piden 1007 px de fila—, así que ahí la píldora no espera al scroll. */
@media (max-width:1180px){
.nav__pod{display:none}
.nav__tog{max-width:180px;padding:0 var(--space-5);border-width:1.5px;opacity:1;visibility:visible;pointer-events:auto}
}
/* Por debajo de 620 px la CTA se queda en el icono y la etiqueta pasa al
aria-label: dos píldoras con texto no caben, y la que tiene que sobrevivir
entera es la de menú. */
@media (max-width:620px){
.nav__der>.nav__cta{padding:0;width:44px;justify-content:center;gap:0}
.nav__der>.nav__cta .nav__cta-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Burbuja de navegación.
Cuelga de la píldora, no del ancho de la ventana: un panel a sangre para seis
destinos es una puerta enorme para una habitación pequeña, y además tapaba la
página entera para enseñar una lista de 300 px de contenido.
El ancla es .nav__pop con position:relative, así que la burbuja se sitúa bajo
la píldora y crece hacia la izquierda. El atributo hidden se conserva para
que no exista en el árbol de accesibilidad cuando está cerrada, y la
transición la lleva data-on, porque display no se puede interpolar. */
.nav__pop{position:relative;display:flex;align-items:center}
.nav__menu{position:absolute;top:calc(100% + 12px);right:0;z-index:61;width:max(232px,min(288px,calc(100vw - 36px)));padding:10px;border-radius:18px;background:rgb(var(--tinta-rgb) / .96);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid rgb(var(--blanco-rgb) / .14);box-shadow:0 18px 44px rgb(var(--tinta-rgb) / .34);display:flex;flex-direction:column;gap:1px;opacity:0;transform:translate3d(0,-8px,0) scale(.97);transform-origin:100% 0;transition:opacity .2s var(--ease-out),transform .26s var(--ease-out)}
.nav__menu[hidden]{display:none}
.nav__menu[data-on="true"]{opacity:1;transform:none}
/* La punta que ata la burbuja a la píldora. Un rombo girado, sin SVG. */
.nav__menu::before{content:"";position:absolute;top:-5px;right:26px;width:10px;height:10px;transform:rotate(45deg);background:rgb(var(--tinta-rgb) / .96);border-left:1px solid rgb(var(--blanco-rgb) / .14);border-top:1px solid rgb(var(--blanco-rgb) / .14)}
.nav__menu .nav__link{position:relative;display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:11px;font:var(--weight-medium) var(--size-label)/1.2 var(--font-body);text-decoration:none;white-space:nowrap;opacity:0;transform:translate3d(0,-5px,0);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),background-color .16s var(--ease-out)}
.nav__menu .nav__link,.nav__menu .nav__link:hover,.nav__menu .nav__link:focus{color:var(--white)}
/* Dentro de la burbuja el marcado es un relleno, no un filete: en una lista
apilada el subrayado de cada elemento se confunde con un separador. */
.nav__menu .nav__link:hover,.nav__menu .nav__link:focus-visible{background:rgb(var(--blanco-rgb) / .1)}
.nav__menu .nav__link[aria-current="page"]{background:rgb(var(--blanco-rgb) / .14)}
.nav__menu[data-on="true"] .nav__link{opacity:1;transform:none}
/* Escalonado con retardo de transición, no con temporizadores en JS: son siete
elementos y un temporizador por elemento es código que puede quedarse a
medias dejando uno invisible. */
.nav__menu[data-on="true"] .nav__link:nth-child(1){transition-delay:30ms}
.nav__menu[data-on="true"] .nav__link:nth-child(2){transition-delay:60ms}
.nav__menu[data-on="true"] .nav__link:nth-child(3){transition-delay:90ms}
.nav__menu[data-on="true"] .nav__link:nth-child(4){transition-delay:120ms}
.nav__menu[data-on="true"] .nav__link:nth-child(5){transition-delay:150ms}
.nav__menu[data-on="true"] .nav__link:nth-child(6){transition-delay:180ms}
.nav__menu[data-on="true"] .nav__link:nth-child(7){transition-delay:210ms}
/* El teléfono cierra la lista, separado: es el otro canal, no un destino más. */
.nav__menu .nav__link:last-child{margin-top:5px;padding-top:5px;border-top:1px solid rgb(var(--blanco-rgb) / .14);border-radius:0 0 11px 11px}
@media (prefers-reduced-motion:reduce){
.nav__menu,.nav__menu .nav__link{transition:none;opacity:1;transform:none}
}
/* Una etiqueta larga puede envolver cuando no cabe; en la cabecera no, porque
partiría la barra. */
.cierre__acc .btn,.port__acc .btn{white-space:normal;text-align:center}
/* La cabecera flota sobre el contenido, así que la primera sección necesita
reservar su alto. En la home lo resuelve el hero a sangre; aquí las portadas
son campo cálido y sin esta reserva el titular quedaba debajo de la barra.
scroll-margin-top hace lo propio con los saltos de ancla: sin él, el
encabezado de destino aterrizaba tapado. */
main>section:first-child{padding-top:clamp(112px,11vw,152px)}
/* Excepción con ancestro y clase —(0,2,2) frente a (0,1,2)— porque la regla de
arriba gana a una sola clase. Las portadas a sangre reservan el alto de la
barra en su propio contenedor, así que con la regla genérica sumaban dos
reservas: 112 + 96 = 208 px de aire muerto sobre el antetítulo, y era la
razón de que recortar la sección apenas cambiara su alto. */
main>section.qh:first-child,main>section.ah:first-child,main>section.bh:first-child{padding-top:0}
main [id],main section{scroll-margin-top:96px}
/* Red de seguridad: una URL o un nombre largo sin espacios no puede empujar la
caja más allá del viewport. No sustituye a renderizar bien los enlaces; cubre
lo que se cuele. */
.cuerpo p,.cuerpo li,.dato__v,.rej p,.rej li{overflow-wrap:anywhere}
/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;white-space:nowrap;padding:0 var(--space-6);border-radius:var(--radius-pill);border:1.5px solid transparent;font:var(--weight-semibold) var(--size-label)/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease}
/* Cada variante declara el color también en hover y activo. Sin eso, el color
caía al a:hover genérico de más abajo —y al de tokens/base.css— y el texto del
botón principal se teñía de oliva oscuro sobre fondo oliva: desaparecía. */
.btn--p{background:var(--accion);color:var(--white)}
.btn--p:hover,.btn--p:focus{background:var(--accion-hover);color:var(--white)}
.btn--p:active{background:var(--accion-activo);color:var(--white)}
.btn--s{background:transparent;color:var(--mar-800);border-color:var(--mar-800)}
.btn--s:hover,.btn--s:focus{background:var(--piedra-100);color:var(--mar-800)}
.btn--s:active{background:var(--piedra-200);color:var(--mar-800)}
.btn--f{background:transparent;color:var(--white);border-color:rgb(var(--blanco-rgb) / .5)}
.btn--f:hover,.btn--f:focus{background:rgb(var(--blanco-rgb) / .12);color:var(--white)}
.btn--lg{min-height:54px;padding:0 var(--space-7);font-size:var(--size-body)}
/* ── Enlaces de cuerpo ── */
/* :not(.btn) para que la regla genérica de enlace no alcance nunca a un botón:
es la causa raíz, no solo del caso que apareció, sino de cualquier variante
futura que olvide declarar su color en hover. */
a:not(.btn){color:var(--enlace);text-decoration-thickness:1px;text-underline-offset:3px}
a:not(.btn):hover{color:var(--enlace-hover);text-decoration-thickness:2px}
.on-dark a:not(.btn){color:var(--mar-100)}
.on-dark a:not(.btn):hover{color:var(--white)}
/* ── Migas ── */
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:var(--space-5) 0 0;font:var(--weight-regular) var(--size-note)/var(--leading-note) var(--font-body);color:var(--texto-suave)}
.migas a{color:var(--texto-suave);text-decoration:none}
.migas a:hover{color:var(--enlace);text-decoration:none}
.migas>*+*::before{content:"/";margin-right:8px;color:var(--piedra-400)}
.migas span{color:var(--tinta)}
/* ── Portadas ── */
/* ── Portada ───────────────────────────────────────────────────────────
Columnas desiguales como en la referencia Medora: el título ocupa la columna
ancha y la entradilla con acciones baja a la estrecha, alineada al pie del
título. En estrecho se apilan en el orden de lectura. */
.port{padding:var(--space-11) 0 var(--space-10)}
.port--piedra{background:var(--piedra-100)}
.port__g{display:grid;gap:var(--space-7);grid-template-columns:minmax(0,1fr)}
/* Alineadas arriba, no al pie: con align-items:end la columna corta baja y el
título quedaba por debajo de la entradilla, o sea en orden de lectura inverso.
La entradilla se descuelga un poco para recuperar el desnivel de la referencia. */
@media (min-width:900px){
.port__g--txt{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-10);align-items:start}
.port__g--med{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-10);align-items:start}
.port__a{padding-top:var(--space-7)}
}
.port__t h1{margin:0;font:var(--weight-regular) var(--size-display)/var(--leading-display) var(--font-display);letter-spacing:var(--tracking-display);color:var(--tinta);max-width:22ch;text-wrap:pretty}
.port__a{display:grid;gap:var(--space-5);align-content:start}
.port__p{margin:0;font:var(--weight-regular) var(--size-entrada)/var(--leading-entrada) var(--font-body);color:var(--texto);max-width:46ch}
.port__acc{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-4)}
.port__lam{margin-top:var(--space-9)}
/* Antetítulo con punto. El punto es decorativo y va oculto al lector de
pantalla: quien escucha ya recibe la etiqueta como texto. */
.ante{display:flex;align-items:center;gap:10px;margin:0 0 var(--space-5);font:var(--weight-semibold) var(--size-label)/1 var(--font-body);color:var(--enlace)}
.ante__p{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--enlace)}
.sec{padding:var(--space-10) 0}
.sec--piedra{background:var(--piedra-100)}
.sec--sutil{background:var(--piedra-50)}
.sec--oliva{background:var(--oliva-50)}
.sec--mar{background:var(--mar-800);color:var(--white)}
.sec--ap{padding-top:var(--space-8)}
h2{margin:0;font:var(--weight-regular) var(--size-h2)/var(--lh-h2) var(--font-titulo);letter-spacing:var(--track-h2);color:var(--tinta)}
.sec--mar h2{color:var(--white)}
h3{margin:0;font:var(--weight-semibold) var(--size-h3)/var(--lh-h3) var(--font-body);color:var(--tinta)}
h3.serif{font:var(--weight-regular) var(--size-h3-serif)/var(--lh-h3-serif) var(--font-titulo);letter-spacing:-.01em}
p{margin:0}
.cuerpo>p+p{margin-top:var(--space-4)}
.cuerpo p{font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto);max-width:66ch}
.sec--mar .cuerpo p{color:var(--mar-100)}
.tras{margin-top:var(--space-5)}
/* Bloque editorial alterno: explicación y lámina */
.ed{display:grid;gap:var(--space-7)}
@media (min-width:900px){
.ed{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10);align-items:center}
.ed--inv .ed__t{order:2}
}
.ed__t h2{max-width:20ch}
.ed__t .cuerpo{margin-top:var(--space-5)}
.ed+.ed{margin-top:var(--space-10)}
/* Bloque de texto simple, columna de lectura */
.txt{max-width:760px}
.txt h2{max-width:22ch}
.txt .cuerpo{margin-top:var(--space-5)}
.txt+.txt{margin-top:var(--space-9)}
/* ── Lista de áreas con filete ── */
.areas{list-style:none;margin:var(--space-7) 0 0;padding:0;border-top:1px solid var(--piedra-300)}
.areas>li{border-bottom:1px solid var(--piedra-300)}
.area{display:grid;gap:var(--space-3) var(--space-8);padding:var(--space-6) 0;align-items:start}
@media (min-width:860px){.area{grid-template-columns:minmax(0,7fr) minmax(0,9fr)}}
.area__h{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.area__pro{font:var(--weight-semibold) var(--size-body-sm)/var(--lh-body-sm) var(--font-body);color:var(--texto)}
.area__c>p{font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto);max-width:62ch}
.area__c>p+p{margin-top:var(--space-3)}
/* El título del área es el enlace y el chevrón va a su lado, no en un rótulo
aparte. Aro y glifo en DOS capas porque mask recorta todo lo que pinta el
elemento, borde incluido: con border + mask en el mismo pseudoelemento la
máscara dejaba pasar solo la silueta y borraba el aro. El aro va en ::after
—último elemento de la fila, ocupa su sitio— y el glifo en ::before, absoluto
encima. Los dos heredan currentColor. */
.area__t{display:block}
/* padding-block para llegar a --target-comfort: el aro mide 32 px y el enlace
se quedaba en 32 de alto, por debajo del suelo de 44 que declara el propio
sistema —y que el rótulo sustituido sí cumplía—. Ahora es el único acceso al
área desde esta página, así que el suelo importa más que antes. */
.area__t a{display:inline-flex;align-items:baseline;gap:var(--space-4);position:relative;padding-block:6px;color:var(--tinta);text-decoration:none;transition:color 160ms var(--ease-out)}
.area__t a::after{content:"";align-self:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid currentColor;opacity:.32;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),background-color 180ms var(--ease-out)}
.area__t a::before{content:"";position:absolute;right:0;top:50%;width:32px;height:32px;margin-top:-16px;pointer-events:none;background-color:currentColor;-webkit-mask:center/10px 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");mask:center/10px 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");opacity:.78;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
/* Selector con ancestro: la regla global a:not(.btn){color:var(--enlace)} vale
(0,1,1) porque :not() hereda la especificidad de su argumento, así que ganaría
a .area__t a si esto fuera una sola clase. */
.area__h .area__t a:hover{color:var(--enlace)}
.area__h .area__t a:hover::after{opacity:1;background-color:color-mix(in srgb,currentColor 10%,transparent);transform:translateX(3px)}
.area__h .area__t a:hover::before{opacity:1;transform:translateX(3px)}
.area__h .area__t a:active::after,.area__h .area__t a:active::before{transform:translateX(1px)}
.area__t a:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){.area__t a,.area__t a::after,.area__t a::before{transition:none}}
/* ── Fichas de profesional ── */
.rej{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:var(--space-7);list-style:none;padding:0}
.fic{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--piedra-200);border-radius:var(--radius-lg);overflow:hidden;height:100%}
.fic__m{background:var(--piedra-100)}
.fic__m img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fic__nom{background:var(--piedra-100);aspect-ratio:4/5;display:flex;align-items:flex-end;padding:var(--space-5)}
.fic__ini{font:var(--weight-regular) clamp(3rem,8vw,4.5rem)/1 var(--font-titulo);color:var(--piedra-500)}
.fic__b{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);flex:1}
.fic__n{margin:0;font:var(--weight-regular) var(--size-h3-serif)/var(--lh-h3-serif) var(--font-titulo);color:var(--tinta);text-wrap:balance}
.fic__a{margin:0;font:var(--weight-regular) var(--size-body-sm)/var(--lh-body-sm) var(--font-body);color:var(--texto)}
.fic__l{margin-top:auto;padding-top:var(--space-2);font:var(--weight-semibold) var(--size-label)/var(--leading-label) var(--font-body)}
/* Fichas dentro de una página de área: horizontales, sin retrato obligatorio */
.pros{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:var(--space-6);list-style:none;padding:0}
.pro{display:flex;gap:var(--space-5);align-items:center;padding:var(--space-5);background:var(--white);border:1px solid var(--piedra-200);border-radius:var(--radius-lg)}
.pro__m{flex:0 0 84px;width:84px;border-radius:var(--radius-md);overflow:hidden;background:var(--piedra-100)}
.pro__m img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pro__i{flex:0 0 84px;width:84px;aspect-ratio:4/5;border-radius:var(--radius-md);background:var(--piedra-100);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font:var(--weight-regular) 2.25rem/1 var(--font-titulo);color:var(--piedra-500)}
.pro__t h3{margin:0 0 6px}
.pro__t p{font:var(--weight-regular) var(--size-body-sm)/var(--lh-body-sm) var(--font-body);color:var(--texto)}
/* ── FAQ a dos columnas ── */
.faq{display:grid;gap:var(--space-4)}
@media (min-width:900px){.faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-8);align-items:start}}
.faq details{border-bottom:1px solid var(--piedra-300)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;cursor:pointer;list-style:none;font:var(--weight-regular) var(--size-h3-serif)/var(--lh-h3-serif) var(--font-titulo);color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:12px;height:12px;margin-top:8px;border-right:1.5px solid var(--mar-600);border-bottom:1.5px solid var(--mar-600);transform:rotate(45deg);transition:transform 200ms ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 0 var(--space-5)}
.faq details p{font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto);max-width:60ch}
.faq details p+p{margin-top:var(--space-3)}
/* ── Panel de acción y cierre ── */
.panel{border-radius:var(--radius-lg);padding:var(--space-8);background:var(--oliva-50)}
.panel--mar{background:var(--mar-800);color:var(--white)}
.cierre{display:grid;gap:var(--space-6);align-items:center}
@media (min-width:820px){.cierre{grid-template-columns:minmax(0,1fr) auto}}
.cierre h2{max-width:22ch}
.cierre__acc{display:flex;flex-wrap:wrap;gap:var(--space-4)}
/* ── Datos de contacto ── */
/* Contacto: teléfono y horario en dos columnas, y «Cómo llegar» a ancho completo
debajo con el plano. Con tres columnas la tarjeta del horario partía las horas
en dos líneas y el plano no tenía anchura útil. */
.datos{display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr);margin-top:var(--space-7)}
@media (min-width:760px){.datos{grid-template-columns:repeat(2,minmax(0,1fr))}.dato--ancho{grid-column:1 / -1}}
.dato--ancho .dato__in{display:grid;gap:var(--space-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.dato--ancho .dato__in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}}
/* Dos acciones en el cierre del pie: el botón principal llama y el secundario
escribe. En columna por debajo de 560 para que ninguno quede por debajo del
objetivo táctil al estrecharse. */
.pie__acc{display:flex;gap:var(--space-4);flex-wrap:wrap}
.dato__alt{margin:var(--space-4) 0 0;font:var(--weight-regular) var(--size-body-sm)/var(--lh-body-sm) var(--font-body);color:var(--texto-suave)}
.mapa{border:1px solid var(--piedra-200);border-radius:var(--radius-md);overflow:hidden;background:var(--piedra-100)}
.mapa__f{display:block;width:100%;height:340px;border:0}
.mapa__pie{margin:0;padding:var(--space-4) var(--space-5);font:var(--weight-regular) var(--size-note)/var(--leading-note) var(--font-body);color:var(--texto-suave);border-top:1px solid var(--piedra-200)}
.dato{scroll-margin-top:96px;padding:var(--space-6);background:var(--white);border:1px solid var(--piedra-200);border-radius:var(--radius-lg)}
.dato h2{font-size:var(--size-h3-serif);line-height:var(--lh-h3-serif)}
.dato__v{margin-top:var(--space-4);font:var(--weight-semibold) var(--size-h3)/var(--lh-h3) var(--font-body);color:var(--tinta)}
.dato__v a{text-decoration:none}
.horario{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:10px}
.horario li{display:flex;flex-wrap:wrap;gap:4px var(--space-4);justify-content:space-between;font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto);border-bottom:1px solid var(--piedra-200);padding-bottom:10px}
.horario b{font-weight:var(--weight-semibold);color:var(--tinta)}
.tabla{width:100%;border-collapse:collapse;margin-top:var(--space-4);font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body)}
.tabla th,.tabla td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--piedra-200);color:var(--texto);vertical-align:top}
.tabla thead th{font:var(--weight-semibold) var(--size-note)/var(--leading-note) var(--font-body);letter-spacing:.02em;text-transform:uppercase;color:var(--texto-suave);padding-bottom:8px}
.tabla tbody th{font-weight:var(--weight-semibold);color:var(--tinta)}
/* En estrecho la tabla apila: el día encima y el tramo debajo. Con dos columnas
y el día en nowrap la fila pedía 418 px y desbordaba a 320, 375 y 414. */
@media (max-width:560px){
.tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tabla tr{display:block;padding:10px 0;border-bottom:1px solid var(--piedra-200)}
.tabla th,.tabla td{display:block;border:0;padding:0}
.tabla tbody th{margin-bottom:2px}
}
@media (min-width:561px){.tabla tbody th{white-space:nowrap}}
.busc__txt{margin-top:var(--space-4)}
.busc__txt p+p{margin-top:var(--space-3)}
.busc__txt strong{font-weight:var(--weight-semibold);color:var(--tinta)}
.lista{margin:var(--space-4) 0 0;padding-left:1.15em;display:grid;gap:10px}
.lista li{font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto);max-width:62ch}
/* ── Buscador del directorio ── */
.busc{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;margin-top:var(--space-6)}
.campo{display:flex;flex-direction:column;gap:8px;min-width:min(100%,340px);flex:1 1 300px}
.campo label{font:var(--weight-semibold) var(--size-label)/var(--leading-label) var(--font-body);color:var(--tinta)}
.campo input{min-height:48px;padding:0 var(--space-4);border:1.5px solid var(--mar-600);border-radius:var(--radius-md);background:var(--white);color:var(--tinta);font:var(--weight-regular) var(--size-body)/1.4 var(--font-body)}
.recuento{margin-top:var(--space-5);font:var(--weight-medium) var(--size-body-sm)/var(--lh-body-sm) var(--font-body);color:var(--texto)}
.vacio{margin-top:var(--space-6);padding:var(--space-8) var(--space-6);border:1px dashed var(--piedra-400);border-radius:var(--radius-lg);display:grid;gap:var(--space-4);justify-items:start}
.vacio p{font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto);max-width:52ch}
/* ── Pie ── */
/* ── Pie ───────────────────────────────────────────────────────────────
Estructura tomada de la referencia Medora: cierre a la izquierda, columnas de
enlaces a la derecha y el logotipo a gran tamaño como marca de agua al fondo.
La marca de agua va detrás del contenido y con opacidad baja; su contraste no
se mide porque no es texto que haya que leer, es cierre gráfico. */
.pie{position:relative;overflow:hidden;background:var(--piedra-50);border-top:1px solid var(--piedra-200);padding:var(--space-11) 0 0}
/* El gutter y la medida los aporta .env, igual que en el resto del sitio: una
sola fuente, en vez de repetir aquí los valores y arriesgar que dejen de
coincidir. */
.pie__in{position:relative;z-index:1;display:grid;gap:var(--space-9);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.pie__in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-10);align-items:start}}
.pie__claim{margin:0 0 var(--space-6);font:var(--weight-regular) var(--size-h2)/var(--leading-h2) var(--font-display);color:var(--tinta);max-width:24ch;text-wrap:pretty}
.pie__claim em{font-style:italic}
.pie__cols{display:grid;gap:var(--space-7) var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){.pie__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7) var(--space-8)}}
.pie__rot{margin:0 0 var(--space-4);font:var(--weight-semibold) var(--size-note)/var(--leading-note) var(--font-body);color:var(--texto-suave)}
.pie__col nav{display:flex;flex-direction:column;gap:2px}
.pie__col nav a{display:inline-flex;align-items:center;gap:9px;min-height:var(--target-comfort);font:var(--weight-regular) var(--size-note)/var(--leading-note) var(--font-body);color:var(--tinta);text-decoration:none}
.pie__col nav a:hover{color:var(--enlace)}
/* El icono a tamaño de texto y algo atenuado: acompaña al dato, no compite con
él. Solo lo llevan las entradas con un referente claro —un canal, un horario,
un lugar—; en la navegación, cinco pictogramas para cinco nombres de página
no ayudarían a elegir. */
/* 0,75 y no 0,6: a 0,6 el glifo daba 2,82:1 contra el campo, por debajo del 3:1
que WCAG pide a un elemento gráfico. Son decorativos —aria-hidden— y su texto
tiene 15,52:1, pero el umbral se cumple sin alterar el equilibrio. */
.pie__ico{flex:0 0 auto;width:15px;height:15px;opacity:.75;color:var(--enlace)}
.pie__col nav a:hover{color:var(--enlace);text-decoration:underline;text-underline-offset:3px}
.pie__dato{margin:var(--space-5) 0 0;font:var(--weight-regular) var(--size-note)/var(--leading-note) var(--font-body);color:var(--texto);max-width:24ch}
/* La marca de agua se recorta por abajo a propósito: entra en el encuadre sin
acabar de entrar, que es lo que la hace leerse como cierre y no como logotipo
mal colocado. */
.pie__agua{position:relative;margin-top:var(--space-9);overflow:hidden;line-height:0}
.pie__agua img{display:block;width:100%;opacity:.09;transform:translateY(14%)}
@media (max-width:640px){.pie__agua img{transform:translateY(10%)}}
/* ── Botón con flecha en círculo ───────────────────────────────────────
Detalle de la referencia Medora. La flecha va en un círculo de tinta sobre el
botón, no como glifo suelto: a 44 px de alto un glifo se pierde y el círculo
da un segundo punto de anclaje visual. Es decorativa y queda fuera del nombre
accesible del enlace. */
.btn--flecha{padding-right:6px;gap:var(--space-4)}
.btn--flecha::after{content:"";flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--white) no-repeat center/13px 13px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C331F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");transition:transform .24s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.btn--flecha:hover::after{transform:translate3d(2px,-2px,0)}}
/* ── PG-20 · Actualidad ────────────────────────────────────────────────
Estructura tomada de la referencia editorial: hero partido con fotografía a
sangre por la izquierda y texto a la derecha, rejilla con filete y fila de
meta, y cierre a sangre. El contenido NO se inventa: la página no tiene copy
de entradas en el corpus, así que la rejilla explica qué se publicará en cada
sitio en lugar de simular artículos. */
.bh{display:grid;grid-template-columns:minmax(0,1fr);background:var(--piedra-100)}
@media (min-width:900px){.bh{grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:stretch}}
/* Sin min-height junto a aspect-ratio: por debajo de 400 px de ancho, 4/3 da
menos de 300 de alto y el navegador satisface el mínimo ENSANCHANDO la caja,
que se salía del viewport a 320 y 375. La proporción gobierna sola; el
mínimo solo tiene sentido donde ya no hay proporción. */
.bh__media{position:relative;overflow:hidden;aspect-ratio:4/3}
/* La fotografía fija el alto por su cuenta, no por el alto intrínseco del
archivo. Con la imagen en absoluto el alto pasaba a mandarlo la columna de
texto y la sección se quedó en 434 px: la foto era una franja. Un mínimo
propio le devuelve presencia y deja el alto bajo control, en vez de a merced
de las dimensiones del archivo que se suba. */
@media (min-width:900px){.bh__media{aspect-ratio:auto;min-height:clamp(560px,58vw,800px)}}
.bh__media .plate{position:absolute;inset:0;background:var(--piedra-200)}
/* La imagen se posiciona en absoluto, igual que la placa. En relativo su
height:100% se resolvía contra un padre de alto automático, así que caía al
alto intrínseco del archivo —581 px para un 1073×1466 en esta columna— y era
la imagen la que fijaba el alto de la sección. Con eso, recortar el texto no
cambiaba nada. En absoluto no aporta alto y manda la columna de texto. */
.bh__media img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover}
/* Mismo criterio que la portada de Quiénes somos: el antetítulo y el titular son
una unidad, así que llevan su propio hueco corto, y el resto del bloque
conserva el aire amplio. Con un gap único de 24 px el hueco visible entre
ambos era de 66 —el interlineado del titular añade 42— y se leían como dos
bloques sin relación. */
.bh__txt{display:grid;align-content:center;gap:var(--space-4);padding:var(--space-10) clamp(20px,5vw,56px)}
/* -8 px, no el gap completo en negativo: el titular bajó de 64/68 a 48/54, así
que su medio interlineado ya no añade 42 px sino 6, y la corrección anterior
dejaba el antetítulo pegado al titular a 2 px. */
.bh__txt .ante{margin-bottom:-8px}
/* Reserva superior ajustada al alto de la barra fija más aire, e inferior corta:
con var(--space-11) por los dos lados la sección crecía 96 px por arriba y 96
por abajo sobre un contenido de 484. */
@media (min-width:900px){.bh__txt{padding:clamp(96px,9vw,112px) clamp(28px,4vw,72px) var(--space-8)}}
/* Escala h1 y no display. Actualidad es una página secundaria y a 64/68 el
titular ocupaba tres líneas y 204 px —casi la mitad del contenido de la
portada— solo para decir «Avisos y novedades del centro». La escala display se
reserva para las portadas que abren un ámbito. */
.bh__txt h1{margin:0;font:var(--weight-regular) var(--size-h1)/var(--leading-h1) var(--font-display);letter-spacing:var(--tracking-heading);color:var(--tinta);max-width:22ch;text-wrap:pretty}
.bh__p{margin:0;font:var(--weight-regular) var(--size-entrada)/var(--leading-entrada) var(--font-body);color:var(--texto);max-width:44ch}
/* Ancla con disco, como en la referencia: la etiqueta nombra el destino y el
disco es el objetivo táctil. Un solo enlace, para no duplicar el foco. */
.bh__ir{display:inline-flex;align-items:center;gap:var(--space-4);margin:var(--space-4) 0 0;font:var(--weight-semibold) var(--size-label)/1 var(--font-body);color:var(--tinta);text-decoration:none}
.bh__ir span{border-bottom:1px solid var(--piedra-400);padding-bottom:3px}
.bh__ir i{flex:0 0 auto;display:grid;place-items:center;width:var(--target-comfort);height:var(--target-comfort);border-radius:50%;border:1px solid var(--piedra-400);transition:transform var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.bh__ir i::before{content:"";width:11px;height:11px;border-right:1.5px solid var(--mar-700);border-bottom:1.5px solid var(--mar-700);transform:rotate(45deg) translate(-1px,-1px)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.bh__ir:hover i{transform:translate3d(0,3px,0);background:var(--white)}}
.bh__ir:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:6px}
/* Rejilla de avisos. Dos columnas anchas arriba y tres estrechas debajo, el
ritmo de la referencia. Cada tarjeta abre con filete y fila de meta. */
.avisos{display:grid;gap:var(--space-7) var(--space-6);grid-template-columns:minmax(0,1fr);margin-top:var(--space-8)}
@media (min-width:760px){.avisos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.avisos{grid-template-columns:repeat(6,minmax(0,1fr))}.aviso{grid-column:span 2}}
.aviso{display:grid;gap:var(--space-4);align-content:start;padding-top:var(--space-4);border-top:1px solid var(--piedra-300)}
/* El segmento de acento sobre el filete marca la tarjeta sin añadir una caja:
es el recurso de la referencia, traducido al oliva del sistema. */
.aviso::before{content:"";display:block;width:38px;height:2px;margin:calc(-1 * var(--space-4) - 1px) 0 calc(var(--space-4) - 1px);background:var(--enlace)}
.aviso__m{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);font:var(--weight-semibold) var(--size-note)/1.4 var(--font-body);color:var(--mar-600)}
.aviso__t{margin:0;font:var(--weight-regular) var(--size-h3-serif)/var(--lh-h3-serif) var(--font-titulo);letter-spacing:-.01em;color:var(--tinta);max-width:24ch}
.aviso__p{margin:0;font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto);max-width:44ch}
/* Atajos para quien llega buscando algo y no encuentra publicaciones. */
.atajos{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr);margin-top:var(--space-7)}
@media (min-width:820px){.atajos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.atajo{display:grid;gap:10px;align-content:start;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--piedra-200);text-decoration:none;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.atajo b{font:var(--weight-semibold) var(--size-h3)/var(--lh-h3) var(--font-body);color:var(--tinta)}
.atajo span{font:var(--weight-regular) var(--size-body-sm)/var(--lh-body) var(--font-body);color:var(--texto)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.atajo:hover{transform:translate3d(0,-2px,0);border-color:var(--mar-300)}}
.atajo:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
/* ── El Centro · composición de la referencia Medora (About) ──
Portada a sangre, intro a dos columnas con dos imágenes de tamaños
distintos, banda oscura a sangre, rejilla de valores y par de tarjetas con
fotografía. */
/* padding-top:0 a propósito. La regla genérica main>section:first-child reserva
el alto de la barra fija, y esta portada ya lo reserva en .qh__in: sumaban
112 + 96 = 208 px de aire muerto encima del antetítulo, y era la razón de que
recortar la sección apenas cambiara su alto. */
.qh{position:relative;min-height:48svh;display:flex;align-items:stretch;overflow:hidden;background:var(--mar-950)}
.qh__media{position:absolute;inset:0}
.qh__img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
/* Dos velos: uno general que da suelo al titular y otro al pie, donde se apoya
la entradilla. Medidos sobre la zona más clara de la fotografía. */
/* La escena del hero es piedra clara a plena luz, de las más luminosas del
repertorio, así que el velo va alto: medido sobre su píxel más claro. */
.qh__velo{position:absolute;inset:0;pointer-events:none;background:rgb(var(--tinta-rgb) / .66)}
.qh__velo--pie{top:auto;height:52%;background:linear-gradient(to top,rgb(var(--tinta-rgb) / .62),transparent)}
/* La medida y el gutter los pone .env, que estas cajas llevan en el marcado:
repetirlos aquí duplicaba los valores y el día que .env cambie el hero se
desalinearía del resto del sitio en silencio. Solo se añade el padding
vertical, que sí es propio de la sección. */
/* El antetítulo y el titular son una unidad: «El Centro» nombra la sección y el
titular la enuncia, así que van juntos. Con el gap general de la rejilla
quedaban a 299 px —el antetítulo ocupa su propia fila y el titular se alineaba
al fondo de una fila alta— y se leían como dos bloques sin relación.
row-gap propio y aparte del gap entre columnas, que sí tiene que ser amplio.
La sección va a su alto mínimo real: el contenido mide 354 px y las reservas
quedan en lo imprescindible —arriba lo que ocupa la barra fija más aire, abajo
una reserva corta—. No baja más porque por debajo de ~100 px de reserva
superior el antetítulo aterriza debajo de la barra. El min-height pasa a 48svh
para que no vuelva a estirar la caja por encima del contenido. */
.qh__in{position:relative;z-index:1;width:100%;padding-top:clamp(96px,9vw,112px);padding-bottom:var(--space-7);display:grid;column-gap:var(--space-8);row-gap:var(--space-4);align-content:end;grid-template-columns:minmax(0,1fr)}
.ante--claro{color:var(--mar-100)}
.ante--claro .ante__p{background:var(--oliva-300)}
.qh__t{margin:0;max-width:18ch;font:var(--weight-regular) var(--size-display)/var(--leading-display) var(--font-display);letter-spacing:var(--tracking-display);color:var(--white);text-wrap:balance}
.qh__ap{display:grid;gap:var(--space-4);color:var(--mar-100);font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);max-width:46ch}
.qh__acc{margin-top:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-4)}
@media (min-width:900px){
.qh__in{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;column-gap:var(--space-9);row-gap:var(--space-4)}
.qh__t{grid-column:1}
.ante--claro{grid-column:1 / -1}
.qh__ap{grid-column:2;justify-self:end}
}
/* Intro: antetítulo y retrato pequeño a un lado; argumento y fotografía ancha
al otro. La diferencia de tamaño entre las dos imágenes es la que hace la
composición, así que no se igualan. */
.qint{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.qint{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:var(--space-10);align-items:start}}
.qint__mini{margin:var(--space-7) 0 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--piedra-100);max-width:300px}
.qint__mini img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.qint__lede{margin:0;font:var(--weight-regular) var(--size-entrada)/var(--leading-entrada) var(--font-body);color:var(--tinta);max-width:52ch}
.qint__ancha{margin:var(--space-8) 0 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--piedra-100)}
.qint__ancha img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.qint__resto{margin-top:var(--space-7);display:grid;gap:var(--space-4);max-width:64ch}
/* Banda oscura a sangre. En la referencia lleva una cifra de rendimiento; aquí
lleva los dos ámbitos, separados por el mismo filete. */
.qband{position:relative;overflow:hidden;background:var(--mar-950);margin-top:var(--space-11)}
.qband__media{position:absolute;inset:0}
.qband__media img{width:100%;height:100%;object-fit:cover;display:block}
.qband__velo{position:absolute;inset:0;background:rgb(var(--tinta-rgb) / .74)}
.qband__in{position:relative;z-index:1;padding-top:var(--space-11);padding-bottom:var(--space-11);display:grid;gap:var(--space-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.qband__in{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--space-10);align-items:start}
.qband__c{border-left:1px solid rgb(var(--blanco-rgb) / .28);padding-left:var(--space-8)}}
.qband__t{margin:0;font:var(--weight-regular) var(--size-h1)/var(--leading-h1,1.1) var(--font-display);color:var(--white);max-width:16ch;text-wrap:balance}
.qband__c{display:grid;gap:var(--space-4);color:var(--mar-100);font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body)}
.qband__acc{margin-top:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-4)}
/* Rejilla de valores: título a la izquierda, cuatro tarjetas a la derecha. */
.qval{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr)}
/* 1040 y no 900: a 924 el título se llevaba una columna y las cuatro tarjetas
se repartían la otra, así que sus titulares rompían en cuatro líneas. */
@media (min-width:1040px){.qval{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:var(--space-10);align-items:start}}
.qval__g{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.qval__g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qval__c{padding:var(--space-6);border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--piedra-200)}
.qval__c h3{margin:0 0 var(--space-4);font:var(--weight-semibold) var(--size-h3)/var(--lh-h3) var(--font-body);color:var(--tinta)}
.qval__c p{margin:0;font:var(--weight-regular) var(--size-body-sm)/var(--lh-body-sm) var(--font-body);color:var(--texto)}
.qval__c p+p{margin-top:var(--space-3)}
/* Par de tarjetas con fotografía de fondo. */
.qduo{display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.qduo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qduo__c{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--mar-950);min-height:340px;display:flex}
.qduo__m{position:absolute;inset:0}
.qduo__m img{width:100%;height:100%;object-fit:cover;display:block}
.qduo__v{position:absolute;inset:0;background:rgb(var(--tinta-rgb) / .78)}
.qduo__in{position:relative;z-index:1;padding:var(--space-7);display:grid;gap:var(--space-4);align-content:start;color:var(--mar-100);font:var(--weight-regular) var(--size-body-sm)/var(--lh-body-sm) var(--font-body)}
.qduo__in h2{margin:0 0 var(--space-2);font:var(--weight-regular) var(--size-h2)/var(--lh-h2) var(--font-display);color:var(--white)}
.qduo__acc{margin-top:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-4)}
/* ── PRUEBA · ajuste de peso de Inter ──────────────────────────────────────
Va al final a propósito: las reglas de titular fijan el peso con el atajo
font:, así que un bloque al principio de la hoja perdía por orden. */
/* Inter tiene la altura de x mucho más alta que Newsreader y su 400 en cuerpos
grandes se lee anémico donde la serif se leía asentada, así que los titulares
suben a 560 y cierran el tracking. Sin esto el cambio parecería un
empeoramiento de la tipografía y en realidad sería un ajuste que falta. */
/* Regular 400, según la dirección del 14/09/2026. Antes iban a 560 porque
InterDisplay 400 se leía anémico en cuerpos grandes sobre campo claro; ahora
el contraste lo aporta la cursiva del énfasis, no el peso de la base. */
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em}
.port__t h1,.qh__t,.bh__t,.hero__title{letter-spacing:-.026em}
/* ── Énfasis en cursiva dentro del titular ──
Marcado con : es énfasis por significado y deja un solo encabezado
semántico. El cuerpo va en em para que herede del titular que lo contiene,
así que la misma regla sirve en portada, en H1 y en H2. */
h1 em,h2 em,h3 em,.port__t h1 em,.ah__t em,.ab__t em,.qh__t em,.bh__t em,.hero__title em{
font-family:var(--font-emph);font-style:italic;font-weight:400;
font-size:calc(1em * var(--emph-scale,1.03));
letter-spacing:.004em;padding-right:.02em;
}
/* Fragmentos breves que no deben partirse. Se suelta en móvil para no desbordar. */
.nobr{white-space:nowrap}
@media (max-width:520px){.nobr{white-space:normal}}
h2{letter-spacing:-.018em}
h3{font-weight:600;letter-spacing:-.012em}
/* ══ Página de área · reconstrucción 14/09 ═══════════════════════════════════
La versión anterior encadenaba secciones del mismo registro y sin fotografía,
y se leía como un documento. Aquí cada bloque cambia de campo y de estructura
respecto al anterior, la portada es fotográfica a sangre y hay un índice fijo
que dice dónde estás. */
/* ── Portada a sangre ── */
.ah{position:relative;min-height:min(86svh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--tinta)}
.ah__media{position:absolute;inset:-10% 0;will-change:transform}
.ah__img,.ah__media img{width:100%;height:100%;object-fit:cover;display:block}
/* .62 y no .56: a .56 las migas y el antetítulo —14 y 16 px— quedaban en
4,41:1 sobre la zona más clara de la piedra, por debajo del 4,5 exigido. */
.ah__velo{position:absolute;inset:0;pointer-events:none;background:rgb(var(--tinta-rgb)/.62)}
.ah__velo--pie{top:auto;height:56%;background:linear-gradient(to top,rgb(var(--tinta-rgb)/.62),transparent)}
.ah__in{position:relative;z-index:1;width:100%;padding-top:calc(var(--space-12) + 48px);padding-bottom:var(--space-11)}
.ah__migas{display:flex;flex-wrap:wrap;gap:0 var(--space-3);margin-bottom:var(--space-6);font:var(--weight-medium) var(--size-note)/var(--leading-note) var(--font-body);color:rgb(var(--blanco-rgb)/.82)}
/* Sin subrayado: en una miga el separador «/» y la posición ya dicen que son
navegación, y el subrayado añade tres reglas horizontales en una línea de
14 px. La distinción con la página actual se mantiene por color: los enlaces
al 82 % de blanco y la página actual al 100 %. */
.ah__migas a{color:rgb(var(--blanco-rgb)/.82);text-decoration:none}
.ah__migas a:hover{color:var(--white);text-decoration:none}
/* La página actual, a blanco pleno. Sin subrayado, el color es lo único que
separa lo pulsable de dónde estás: si los tres van al 82 % la miga deja de
informar. */
.ah__migas span{color:var(--white)}
.ah__migas a::after{content:"/";margin-left:var(--space-3);color:rgb(var(--blanco-rgb)/.45)}
.ah__t{margin:0;font-family:var(--font-display);font-size:var(--size-display);line-height:var(--leading-display);color:var(--white);text-wrap:balance;max-width:16ch}
.ah__col{display:grid;gap:var(--space-6);margin-top:var(--space-8);grid-template-columns:minmax(0,1fr)}
.ah__p{margin:0 0 var(--space-4);font:var(--weight-regular) var(--size-entrada)/var(--leading-entrada) var(--font-body);color:rgb(var(--blanco-rgb)/.94);max-width:52ch}
.ah__p:last-child{margin-bottom:0}
.ah__acc{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-4)}
.ah__cue{position:absolute;left:50%;bottom:18px;z-index:1;translate:-50% 0;width:1px;height:46px;overflow:hidden;background:rgb(var(--blanco-rgb)/.22)}
.ah__cue i{position:absolute;inset:0 auto auto 0;width:1px;height:16px;background:var(--white);animation:ahcue 2.4s var(--ease-inout) infinite}
@keyframes ahcue{0%{transform:translateY(-18px)}60%,100%{transform:translateY(48px)}}
@media (min-width:900px){
.ah__col{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end;gap:var(--space-9)}
.ah__acc{justify-content:flex-end}
}
/* ── Bloques ── */
.ab{padding:var(--space-11) 0;position:relative}
.ab--piedra{background:var(--piedra-100)}
.ab--sutil{background:var(--piedra-50)}
.ab__t{margin:0 0 var(--space-6);font-family:var(--font-display);font-size:var(--size-h2);line-height:var(--leading-h2);color:var(--tinta);text-wrap:balance;max-width:22ch}
.ab__solo{max-width:62ch}
.ab__par{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){
.ab__par{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-10)}
.ab__par--inv .ab__txt{order:2}
.ab__par--inv .ab__lam{order:1}
}
/* Bloque con fotografía de fondo: rompe la cadena de campos planos. */
.ab--foto{padding:var(--space-12) 0;overflow:hidden;background:var(--tinta)}
.ab__fondo{position:absolute;inset:-12% 0;will-change:transform}
.ab__fondo img{width:100%;height:100%;object-fit:cover;display:block}
.ab__velo{position:absolute;inset:0;background:rgb(var(--tinta-rgb)/.74)}
.ab--foto .ab__in{position:relative;z-index:1}
.ab--foto .ab__t{color:var(--white);max-width:18ch}
.ab__cuerpo{max-width:58ch}
/* Paso intermedio: banda oliva, corta y sin cuerpo largo. */
.ab--paso{background:var(--oliva-800);padding:var(--space-10) 0}
.ab__paso{display:grid;gap:var(--space-6)}
.ab--paso .ab__t{color:var(--white);margin-bottom:0;max-width:26ch}
@media (min-width:900px){.ab__paso{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:var(--space-9)}}
/* Profesionales y preguntas */
.ab--pros{background:var(--white)}
.ab--faq{background:var(--piedra-50)}
.ab__faqg{display:grid;gap:var(--space-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.ab__faqg{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--space-10);align-items:start}}
.ab__faqt{position:sticky;top:120px}
.ab__faqn{margin:0;font:var(--weight-regular) var(--size-body-sm)/var(--lh-body-sm) var(--font-body);color:var(--texto-suave);max-width:28ch}
@media (max-width:899px){.ab__faqt{position:static}}
/* Cierre */
/* Padding inferior simétrico: antes iba a 0 porque la marca de agua ocupaba ese
espacio, y al retirarla el cierre quedaba a ras del borde. */
.ab--fin{background:var(--tinta);padding:var(--space-12) 0;overflow:hidden}
.ab__fin{display:grid;gap:var(--space-7)}
@media (min-width:900px){.ab__fin{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:var(--space-9)}}
.ab__fint{margin:0 0 var(--space-5);font-family:var(--font-display);font-size:var(--size-h1);line-height:var(--leading-h1);color:var(--white);text-wrap:balance;max-width:18ch}
.ab__acc{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-4)}
/* Texto sobre los campos oscuros de la página de área. .on-dark no alcanza a
.cuerpo p, cuyo color se declara en la regla de cuerpo con más especificidad,
así que el paso oliva y el cierre salían con la tinta oscura sobre fondo
oscuro: 1,25:1 y 1,3:1. */
.ab--paso .cuerpo p,.ab--fin .cuerpo p,.ab--foto .cuerpo p{color:rgb(var(--blanco-rgb)/.94)}
.ab--paso .cuerpo a,.ab--fin .cuerpo a,.ab--foto .cuerpo a{color:var(--white);text-decoration-color:rgb(var(--blanco-rgb)/.5)}
.ab--paso .cuerpo a:hover,.ab--fin .cuerpo a:hover,.ab--foto .cuerpo a:hover{text-decoration-color:var(--white)}
.ab--paso .cuerpo strong,.ab--fin .cuerpo strong,.ab--foto .cuerpo strong{color:var(--white)}
/* .faq pasa a dos columnas a partir de 900 px de VENTANA, pero en la página de
área vive dentro de una columna de 480: dos columnas ahí dejaban la pregunta
en 208 px, rompiendo en cinco líneas. La consulta de medios no puede saber el
ancho del contenedor, así que aquí se fuerza una sola columna. */
.ab--faq .faq{grid-template-columns:minmax(0,1fr)}
/* ── La barra flota sobre la portada fotográfica ───────────────────────────
En la home la cabecera flota transparente sobre la fotografía y se consolida
al desplazar. Las páginas de área tenían portada a sangre pero con una banda
blanca opaca encima, así que la foto empezaba a 64 px y la portada no llegaba
a leerse a sangre.
:has() elige el modo sin tocar el marcado ni añadir una clase que haya que
recordar poner. Donde no esté soportado, la barra se queda blanca y opaca:
degradación correcta, no rotura. */
.cab__l{display:block}
.cab__l--blanco{display:none}
body:has(.ah) .cab{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;transition:background-color var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out)}
body:has(.ah) .cab:not(.cab--solida) .cab__l--tinta{display:none}
body:has(.ah) .cab:not(.cab--solida) .cab__l--blanco{display:block}
body:has(.ah) .cab:not(.cab--solida) .nav__l{color:var(--white)}
body:has(.ah) .cab:not(.cab--solida) .nav__l:hover{color:rgb(var(--blanco-rgb)/.78)}
body:has(.ah) .cab:not(.cab--solida) .nav__l[aria-current="page"]::after{background:var(--white)}
body:has(.ah) .cab:not(.cab--solida) .cab__tog{border-color:rgb(var(--blanco-rgb)/.55);background:rgb(var(--tinta-rgb)/.5);color:var(--white)}
body:has(.ah) .cab.cab--solida{background:rgb(var(--blanco-rgb)/.94);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border-bottom-color:var(--piedra-200)}
/* La portada ya no arranca bajo la barra: gana su altura completa. */
body:has(.ah) .ah{margin-top:0}
/* ── Página legal ──
Composición de documento, no de página de marca: medida corta, un dato por
fila y jerarquía plana. Nadie lee esto de arriba abajo, se busca un apartado,
así que lo que importa es que se escanee. */
/* padding-bottom propio. El padding-top de 112 px lo presta la regla genérica
main>section:first-child, que solo fija el lado superior, así que sin esto el
campo cálido acababa exactamente en el canto inferior de las pastillas del
índice y las cortaba. Es el mismo valor de reserva que llevan las otras dos
portadas tras los ajustes de este turno. */
.lgh{padding-bottom:var(--space-10);background:var(--piedra-100)}
.lgh__t{margin:0;font:var(--weight-regular) var(--size-h1)/var(--leading-h1) var(--font-display);letter-spacing:var(--tracking-display);color:var(--tinta);max-width:22ch;text-wrap:balance}
.lgh__p{margin:var(--space-5) 0 0;font:var(--weight-regular) var(--size-body-lg)/var(--lh-body) var(--font-body);color:var(--texto-suave);max-width:54ch}
.lgh__idx{margin-top:var(--space-7);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.lgh__idx a{display:inline-flex;align-items:center;min-height:var(--target-comfort);padding:0 var(--space-5);border-radius:var(--radius-pill);border:.5px solid var(--piedra-300);background:var(--white);font:var(--weight-medium) var(--size-label)/1 var(--font-body);color:var(--tinta);text-decoration:none;transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.lgh__idx a:hover{border-color:var(--mar-600);color:var(--tinta)}
.lg{padding:var(--space-11) 0 0}
.lg--fin{padding-bottom:var(--space-11)}
.lg__t{margin:var(--space-3) 0 0;font:var(--weight-regular) var(--size-h2)/var(--leading-h2) var(--font-display);letter-spacing:var(--tracking-heading);color:var(--tinta)}
.lg__e{margin:var(--space-4) 0 0;font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto-suave);max-width:60ch}
.lg__l{margin:var(--space-7) 0 0;display:grid;gap:0}
/* Una fila por dato, con filete fino entre ellas: en un documento legal la
tabla es el formato honesto, y el filete hace de guía de lectura sin cajas. */
.lg__i{display:grid;gap:var(--space-2);padding:var(--space-5) 0;border-top:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff)}
@media (min-width:760px){.lg__i{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--space-6);align-items:baseline}}
.lg__i dt{font:var(--weight-semibold) var(--size-label)/1.4 var(--font-body);color:var(--tinta)}
.lg__i dd{margin:0;font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto);max-width:62ch}
.lg__nota{margin:var(--space-9) 0 0;padding-top:var(--space-6);border-top:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff);font:var(--weight-regular) var(--size-body-sm)/1.6 var(--font-body);color:var(--texto-suave);max-width:70ch}
/* Hueco declarado. Mismo tratamiento que en la valoración de la home: se ve que
falta un dato, en vez de rellenarlo con algo incierto. */
.pend{display:inline-block;padding:2px 8px;border-radius:5px;background:var(--piedra-200);font:var(--weight-semibold) var(--size-note)/1.5 var(--font-body);letter-spacing:.03em;text-transform:uppercase;color:var(--piedra-700)}
/* Ver el guion homónimo en web.js: en un contexto que no compone no hay nada
que animar, y el estado final es lo único que importa. */
.sin-fotogramas *,.sin-fotogramas *::before,.sin-fotogramas *::after{transition-duration:0s!important;animation-duration:0s!important}
/* Sin fotogramas: además de anular las duraciones, hay que REVELAR el estado
final. El opacity:0 de [data-mo] y [data-reveal] es el estado BASE de su
regla, no una transición a medias, así que anular la duración no lo tocaba:
la entrada la aplica un guion que añade .mo--in / data-in cuando el elemento
asoma, y ese barrido depende del reloj de fotogramas. En un documento que no
compone se quedaban invisibles las fichas de profesional con sus retratos,
los h2 de sección y los bloques de cuerpo: contenido publicado que nadie ve.
Aquí el movimiento es un extra; el contenido, no. */
.sin-fotogramas [data-mo],.sin-fotogramas [data-reveal],.sin-fotogramas [data-words] span{opacity:1!important;transform:none!important;visibility:visible!important;clip-path:none!important}
/* ── Carril de reseñas ──
Fila india que avanza de izquierda a derecha. La pista va DUPLICADA: la
animación recorre la mitad del ancho y al reiniciarse la segunda copia está
justo donde estaba la primera, así que el bucle no tiene costura. El clon va
aria-hidden para que un lector de pantalla no lea las reseñas dos veces.
Sin JavaScript: un carril no tiene estado que gobernar, así que la animación,
la pausa al pasar el ratón y la reanudación al salir las resuelve el navegador
con animation-play-state. */
.cr{padding:clamp(64px,8vw,112px) 0;background:var(--piedra-50);overflow:hidden}
.cr__hd{max-width:min(46ch,90%);margin:0 auto clamp(30px,3.6vw,46px);padding:0 clamp(18px,3vw,40px);text-align:center}
.cr__k{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--space-4);font:var(--weight-semibold) var(--size-note)/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--oliva-700)}
.cr__k i{width:6px;height:6px;border-radius:50%;background:var(--oliva-500)}
.cr__h{margin:0;font-family:var(--font-display);font-size:clamp(1.625rem,1.2rem + 1.9vw,2.5rem);line-height:1.12;font-weight:560;letter-spacing:-.022em;color:var(--mar-900);text-wrap:balance}
.cr__h em{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;font-size:1.03em}
/* La nota y el total son lo que convierte una selección de elogios en un dato
comprobable. Sin ellos, quince reseñas seguidas son un folleto. */
.cr__sum{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3) var(--space-5);margin-top:clamp(18px,2.4vw,26px);padding:var(--space-4) var(--space-6);border-radius:var(--radius-pill);background:var(--white);border:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff)}
.cr__nota{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-display);font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);line-height:1;font-weight:560;letter-spacing:-.028em;color:var(--mar-900);font-variant-numeric:tabular-nums}
.cr__nota span{font-size:.54em;font-weight:400;letter-spacing:-.01em;color:var(--piedra-600)}
.cr__est{display:inline-flex;gap:3px;color:var(--oliva-600)}
.cr__est svg{width:16px;height:16px;fill:currentColor}
.cr__cnt{font:var(--weight-regular) var(--size-body-sm)/1.4 var(--font-body);color:var(--mar-600);font-variant-numeric:tabular-nums;white-space:nowrap}
/* El carril va a sangre y se difumina en los bordes: las tarjetas entran y
salen en vez de aparecer cortadas contra el canto de la pantalla. */
/* Recorrido manual. El carril ya se detenía al pasar el ratón, pero detenerse no
es lo mismo que poder recorrerlo: si una reseña queda a medias en el borde no
había forma de traerla. El muro es desplazable en horizontal —dedo y trackpad
de serie— y el guion añade el arrastre con ratón, que sin rueda horizontal no
tendría manera. Resuelve de paso lo que dejó abierto la retirada del botón de
pausa: en táctil no hay hover, pero sí hay dedo. */
.cr__muro{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.cr__muro::-webkit-scrollbar{display:none}
.cr__muro[data-agarrado]{cursor:grabbing}
/* Mientras se recorre a mano el avance se detiene: dos movimientos sobre el
mismo eje se pelean y la tarjeta que persigues se escapa. */
.cr__muro[data-agarrado] .cr__pista{animation-play-state:paused}
.cr__via{display:flex;width:max-content;gap:clamp(14px,1.6vw,20px);-webkit-mask:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.cr__pista{display:flex;gap:clamp(14px,1.6vw,20px);animation:cr-dcha var(--cr-dur,96s) linear infinite}
/* De izquierda a derecha: la pista arranca desplazada media vuelta y avanza
hasta cero, así que las tarjetas entran por el borde izquierdo. */
@keyframes cr-dcha{from{transform:translate3d(calc(-100% - clamp(14px,1.6vw,20px)),0,0)}to{transform:translate3d(0,0,0)}}
/* Parada al pasar el ratón y al entrar el foco; al salir continúa donde estaba,
que es lo que hace play-state frente a reiniciar la animación. */
.cr:hover .cr__pista,.cr:focus-within .cr__pista{animation-play-state:paused}
/* Sin botón de pausa por decisión del cliente (16/09/2026): la parada es solo
por hover, así que en táctil el carril no se detiene. Queda anotado para que
la ausencia se lea como deliberada y no como un olvido. */
/* Se muestran las dos formas y se oculta la que no toca, en vez de reescribir
el contenido del botón: así el texto vive en el marcado y es traducible. */
.cr__pie{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin:clamp(20px,2.6vw,32px) 0 0;text-align:center;font:var(--weight-regular) var(--size-note)/1.5 var(--font-body);color:var(--piedra-600)}
.cr__c{flex:0 0 auto;width:min(360px,80vw);display:flex;flex-direction:column;gap:var(--space-4);padding:clamp(22px,2.4vw,28px);border-radius:var(--radius-card);background:var(--white);border:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff)}
.cr__ce{display:flex;gap:2px;color:var(--oliva-600)}
.cr__ce svg{width:14px;height:14px;fill:currentColor}
.cr__t{margin:0;font:var(--weight-regular) var(--size-body-sm)/1.6 var(--font-body);color:var(--mar-900);flex:1 1 auto;text-wrap:pretty}
.cr__f{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-4);border-top:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff)}
/* Inicial en disco y no retrato: el sistema veta la fotografía de pacientes, y
es lo que Google muestra cuando la reseña no lleva foto. */
.cr__i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--piedra-100);font:var(--weight-semibold) var(--size-body-sm)/1 var(--font-display);color:var(--mar-800)}
.cr__n{margin:0;font:var(--weight-semibold) var(--size-note)/1.35 var(--font-body);color:var(--mar-900)}
.cr__m{margin:1px 0 0;font:var(--weight-regular) var(--size-note)/1.35 var(--font-body);color:var(--piedra-600)}
/* Una sola reseña: el carril se centra y no se mueve. */
.cr--sola .cr__via{width:auto;justify-content:center;padding:0 clamp(18px,3vw,40px);-webkit-mask:none;mask:none}
.cr--sola .cr__pista{animation:none}
/* Sin movimiento y sin reloj: el carril pasa a rejilla y se lee entero. Hacen
falta las cuatro declaraciones porque .cr__via es un flex de ancho max-content
dentro del cual la PISTA es quien contiene las tarjetas: sin dejarla envolver,
catorce tarjetas en nowrap siguen saliéndose de la pantalla. */
@media (prefers-reduced-motion:reduce){
.cr__via{width:auto;flex-wrap:wrap;justify-content:center;padding:0 clamp(18px,3vw,40px);-webkit-mask:none;mask:none}
.cr__pista{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
.cr__via .cr__pista:last-child{display:none}
}
.sin-fotogramas .cr__via{width:auto;flex-wrap:wrap;justify-content:center;padding:0 clamp(18px,3vw,40px);-webkit-mask:none;mask:none}
.sin-fotogramas .cr__pista{animation:none!important;transform:none!important;width:auto;flex-wrap:wrap;justify-content:center}
.sin-fotogramas .cr__via .cr__pista:last-child{display:none}
.sin-fotogramas .cr__pie,.cr--sola .cr__pie{display:none}
@media (prefers-reduced-motion:reduce){.cr__pie{display:none}}
.sin-fotogramas .cr__pie,.cr--sola .cr__pie{display:none}
@media (prefers-reduced-motion:reduce){.cr__pie{display:none}}
/* ── Artículo de Actualidad ──
Una columna de medida de lectura sobre campo blanco, con la imagen a sangre
arriba. La medida la fija el propio texto, no la rejilla: 68ch es donde una
línea se lee sin que el ojo pierda el renglón al volver.
El sumario y la firma son piezas de artículo que no existen en el resto del
sitio; el cuerpo reutiliza la escala tipográfica del sistema. */
.art{background:var(--blanco)}
.art__hero{position:relative;overflow:hidden;background:var(--piedra-200)}
.art__hero img{display:block;width:100%;height:clamp(260px,42vw,520px);object-fit:cover}
.art__hd{max-width:min(68ch,92%);margin:0 auto;padding:clamp(34px,4.4vw,56px) clamp(18px,3vw,40px) 0}
.art__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);margin:0 0 var(--space-5);font:var(--weight-semibold) var(--size-note)/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--oliva-700)}
.art__meta time{color:var(--texto-suave);letter-spacing:0;text-transform:none;font-weight:var(--weight-regular)}
.art__t{margin:0;font-family:var(--font-display);font-size:clamp(1.875rem,1.3rem + 2.6vw,3rem);line-height:1.1;font-weight:560;letter-spacing:-.024em;color:var(--tinta);text-wrap:balance}
.art__t em{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;font-size:1.03em}
/* La entradilla va un escalón por encima del cuerpo: es el resumen que decide si
se sigue leyendo, así que tiene que distinguirse sin llegar a titular. */
.art__e{margin:var(--space-6) 0 0;font:var(--weight-regular) var(--size-body-lg)/1.55 var(--font-body);color:var(--texto-suave);text-wrap:pretty}
.art__b{max-width:min(68ch,92%);margin:0 auto;padding:clamp(30px,3.6vw,48px) clamp(18px,3vw,40px) clamp(56px,7vw,96px)}
.art__b h2{margin:clamp(34px,4vw,52px) 0 var(--space-5);font-family:var(--font-display);font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem);line-height:1.16;font-weight:560;letter-spacing:-.018em;color:var(--tinta)}
.art__b h3{margin:clamp(26px,3vw,36px) 0 var(--space-4);font:var(--weight-semibold) var(--size-body-lg)/1.3 var(--font-body);color:var(--tinta)}
.art__b p{margin:0 0 var(--space-5);font:var(--weight-regular) var(--size-body)/1.68 var(--font-body);color:var(--texto);text-wrap:pretty}
.art__b ul{margin:0 0 var(--space-5);padding:0;display:grid;gap:var(--space-3)}
.art__b li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--space-3);font:var(--weight-regular) var(--size-body)/1.6 var(--font-body);color:var(--texto);list-style:none}
.art__b li::before{content:"";width:6px;height:6px;margin-top:11px;border-radius:50%;background:var(--oliva-400)}
/* Cita destacada: filete a la izquierda y no comillas dibujadas, que es el
recurso del sistema para marcar una voz sin ornamento. */
.art__cita{margin:clamp(30px,3.6vw,44px) 0;padding:0 0 0 clamp(18px,2.4vw,28px);border-left:2px solid var(--oliva-300)}
.art__cita p{margin:0;font-family:"Newsreader",Georgia,serif;font-size:clamp(1.125rem,1rem + .7vw,1.375rem);line-height:1.38;font-style:italic;color:var(--tinta)}
.art__fig{margin:clamp(30px,3.6vw,44px) 0}
.art__fig img{display:block;width:100%;border-radius:var(--radius-media)}
.art__fig figcaption{margin:var(--space-4) 0 0;font:var(--weight-regular) var(--size-note)/1.55 var(--font-body);color:var(--texto-suave)}
/* Cierre del artículo: la acción y el retorno a la sección. */
.art__fin{margin:clamp(40px,5vw,64px) 0 0;padding:clamp(26px,3vw,38px);border-radius:var(--radius-card);background:var(--piedra-100)}
.art__fin p{margin:0 0 var(--space-5);font:var(--weight-regular) var(--size-body)/1.6 var(--font-body);color:var(--texto)}
.art__acc{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.art__vol{margin:clamp(30px,3.4vw,44px) 0 0}
.art__vol a{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--target-comfort);font:var(--weight-semibold) var(--size-label)/1 var(--font-body);color:var(--enlace);text-decoration:none}
.art__vol a:hover{color:var(--accion-hover);text-decoration:underline;text-underline-offset:3px}
/* Aviso de maqueta. Se distingue del contenido a propósito: un texto de relleno
que parece publicado acaba publicándose. */
.art__demo{max-width:min(68ch,92%);margin:0 auto;padding:var(--space-5) clamp(18px,3vw,40px) 0}
.art__demo p{margin:0;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--oliva-50);border:.5px solid var(--oliva-200);font:var(--weight-regular) var(--size-body-sm)/1.6 var(--font-body);color:var(--oliva-900)}
/* ── Listado de Actualidad ──
Una entrada por fila con su miniatura: la sección crecerá poco a poco, así que
una rejilla de tarjetas con dos elementos quedaría desequilibrada y en fila se
lee igual de bien con uno que con veinte. */
.posts{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:0;border-top:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff)}
.post{border-bottom:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff)}
.post__a{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding:clamp(22px,2.6vw,30px) 0;text-decoration:none}
@media (min-width:760px){.post__a{grid-template-columns:200px minmax(0,1fr);gap:var(--space-7);align-items:start}}
.post__m{display:block;border-radius:var(--radius-md);overflow:hidden;background:var(--piedra-200)}
.post__m img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 420ms var(--ease-out)}
.post__a:hover .post__m img{transform:scale(1.03)}
.post__b{display:block}
.post__meta{display:block;margin:0 0 var(--space-3);font:var(--weight-semibold) var(--size-note)/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--oliva-700)}
.post__t{display:block;font-family:var(--font-display);font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);line-height:1.18;font-weight:560;letter-spacing:-.018em;color:var(--tinta);text-wrap:balance}
.post__a:hover .post__t{color:var(--enlace)}
.post__e{display:block;margin:var(--space-4) 0 0;font:var(--weight-regular) var(--size-body-sm)/1.6 var(--font-body);color:var(--texto-suave);max-width:60ch}
/* ── Aviso de idioma parcial ──
Solo visible fuera del español. Declara que el copy clínico de las áreas está
en español en vez de dejar que alguien lo descubra al abrir una especialidad:
una web medio traducida que lo avisa es honesta; una que no, parece rota. */
.idi__aviso{margin:0;padding:var(--space-4) clamp(18px,3vw,40px);background:var(--oliva-100);border-bottom:.5px solid var(--oliva-200);font:var(--weight-regular) var(--size-note)/1.55 var(--font-body);color:var(--oliva-900);text-align:center}
.idi__aviso[hidden]{display:none}
/* La cabecera es fija, así que el aviso reserva su alto y se coloca debajo: el
valor lo publica el motor de cabecera en --alto-nav, porque la barra cambia de
alto al plegarse y un número fijo desalinea. El 84px inicial es la reserva de
emergencia si el guion no corre: mejor un aviso legible desplazado de más que
uno oculto detrás del logotipo. */
.idi__aviso{position:relative;z-index:61;margin-top:var(--alto-nav,84px)}
/* ── Seguros de la especialidad ──
Solo las modalidades que la fuente aportada relaciona con ESTA especialidad.
Cardiología y Cardiología infantil comparten página pero no lista: se emiten
en dos subbloques con su propio encabezado, porque unirlas afirmaría algo que
la fuente no dice. */
.seg{padding:var(--space-11) 0;background:var(--white);border-top:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff)}
.seg__h{margin:0;font-family:var(--font-display);font-size:var(--size-h2);line-height:var(--lh-h2);font-weight:560;letter-spacing:-.02em;color:var(--tinta)}
.seg__p{margin:var(--space-4) 0 0;font:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);color:var(--texto-suave);max-width:62ch}
.seg__sub{margin:var(--space-7) 0 var(--space-4);font:var(--weight-semibold) var(--size-label)/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.seg__g{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(164px,1fr));margin-top:var(--space-6);padding:0;list-style:none}
.seg__i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);min-height:96px;padding:var(--space-5) var(--space-4);border:.5px solid color-mix(in srgb,var(--piedra-200) 72%,#fff);border-radius:var(--radius-md);background:var(--white)}
/* Alto fijo y object-fit: los siete logotipos llegan en lienzos distintos y sin
esto la rejilla se descuadra. Ninguno se recolorea. */
.seg__i img{height:30px;width:auto;max-width:156px;object-fit:contain;object-position:center}
/* Nombre compuesto y nota de pendiente, para las marcas cuyo archivo no es
utilizable. Reservan el mismo alto que un logotipo, así que la fila no se
desnivela. Ver seguros.json: el motivo y lo que falta están declarados ahí. */
.seg__tipo{display:flex;align-items:center;justify-content:center;height:30px;font:var(--weight-semibold) var(--size-body-lg)/1 var(--font-display);letter-spacing:-.012em;color:var(--mar-800)}
.seg__pend{font:var(--weight-regular) 11px/1.35 var(--font-body);color:var(--piedra-600);text-align:center}
.seg__n{font:var(--weight-medium) var(--size-note)/1.3 var(--font-body);color:var(--texto-suave);text-align:center}
/* La condición literal transcrita, cuando existe. Es la única de la fuente. */
.seg__cond{margin:var(--space-5) 0 0;padding:var(--space-4) var(--space-5);border-radius:var(--radius-sm);background:var(--piedra-100);font:var(--weight-regular) var(--size-body-sm)/1.6 var(--font-body);color:var(--tinta)}
.seg__acc{margin:var(--space-7) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.seg__tel{font:var(--weight-regular) var(--size-body-sm)/1.5 var(--font-body);color:var(--texto-suave)}