/* DL Cirugía Oral — tinta y quirófano.
*
* Distinto de EvoRog a propósito: aquí no se vende material, se vende criterio.
* Fondo de tinta azulada muy oscura para que las fotos de quirófano —que son
* rojas y brillantes— manden sin competir con nada, y bandas claras donde hay
* que leer de verdad, porque un texto largo sobre negro cansa.
*
* El azul es el de su logotipo, no uno inventado: la marca ya existía.
*/
:root{
--tinta:#0a1420;
--tinta-2:#0f1d2d;
--panel:#14243a;
--papel:#f4f7fa;
--papel-2:#e8eef4;
--letra:#eef4fa;
--letra-suave:#b9c9d9;
--letra-tenue:#7f94a8;
--letra-papel:#16232f;
--letra-papel-suave:#4a5f73;
--azul:#1f9fd4;
--azul-claro:#5fc2ec;
--azul-hondo:#12628a;
/* El hueco que queda detrás de una foto mientras carga o si no llena su
marco. Estaba escrito a mano en tres sitios y en el tema claro salían
tres cuadros negros. */
--marco-foto:#081119;
--brillo:rgba(31,159,212,.32);
--linea:rgba(120,175,215,.16);
--linea-viva:rgba(120,175,215,.34);
--linea-papel:rgba(22,35,47,.13);
--titular:"Fraunces","Georgia",serif;
--texto:"Inter","Helvetica Neue",Arial,sans-serif;
--r:4px;
--ancho:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--letra-suave);
font:400 17px/1.78 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--titular);color:var(--letra);font-weight:600;
line-height:1.09;letter-spacing:-.012em;margin:0}
p{margin:0 0 1.15em}
.contenedor{width:min(var(--ancho),calc(100% - 48px));margin-inline:auto}
/* ---------- cabecera ---------- */
/* ═══ La barra de arriba ════════════════════════════════════════════════════
Igual en todas las páginas: mismo alto, mismo menú y sin partirse en dos
líneas. Al bajar se encoge y se vuelve opaca, y una línea fina va marcando
cuánto queda de página. */
.barra{position:fixed;inset:0 0 auto;z-index:60;
background:linear-gradient(180deg,rgba(10,20,32,.95),rgba(10,20,32,.7) 72%,transparent);
backdrop-filter:blur(10px);
transition:background .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.3,1)}
.barra.pegada{background:rgba(10,20,32,.98);box-shadow:0 1px 0 var(--linea)}
/* Al bajar se esconde; al subir vuelve. Deja la pantalla entera para leer. */
.barra.escondida{transform:translateY(-100%)}
.barra .contenedor{display:flex;align-items:center;gap:22px;height:78px;
transition:height .35s cubic-bezier(.2,.7,.3,1)}
.barra.pegada .contenedor{height:62px}
.marca{display:flex;align-items:center;gap:11px;color:var(--letra);flex:0 0 auto}
.marca img{width:38px;height:38px;object-fit:contain;flex:0 0 auto;
transition:width .35s cubic-bezier(.2,.7,.3,1),height .35s cubic-bezier(.2,.7,.3,1)}
.barra.pegada .marca img{width:30px;height:30px}
/* Bloque, no flex: en columna, el se convertía en una línea suelta y el
nombre salía partido en dos. */
.marca-letras{display:block;line-height:1.1;font-family:var(--titular);font-size:20px;
font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.marca-letras b{color:var(--azul);font-weight:700}
.marca small{display:block;font-family:var(--texto);font-size:9.5px;letter-spacing:.17em;
text-transform:uppercase;color:var(--letra-tenue);font-weight:400;margin-top:2px}
/* El monograma es azul oscuro: sobre la barra oscura se apagaba. Se aclara sin
tocar el archivo, que es el mismo que usa la pestaña del navegador. */
.marca img{filter:brightness(1.55) saturate(1.15)}
body.claro .marca img{filter:none}
/* El menú: en una sola línea SIEMPRE. Si no cabe, se pasa al botón. */
.menu{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.menu a{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
color:var(--letra-suave);padding:7px 0;border-bottom:1px solid transparent;
transition:color .2s,border-color .2s}
.menu a:hover,.menu a.actual{color:var(--letra);border-bottom-color:var(--azul)}
/* Contacto se distingue: es lo que queremos que pulsen. */
.menu a.contacto-menu{border:1px solid var(--linea-viva);border-radius:999px;
padding:7px 15px;color:var(--letra)}
.menu a.contacto-menu:hover{background:var(--azul);border-color:var(--azul);color:#04121c}
/* La línea de avance de lectura. */
.barra-avance{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--azul);
transition:width .1s linear;opacity:0}
.barra.pegada .barra-avance{opacity:1}
/* El botón del menú: tres rayas que se convierten en aspa al abrirlo. */
.abrir-menu{display:none;background:none;border:0;cursor:pointer;margin-left:auto;
width:38px;height:34px;padding:7px 5px;flex-direction:column;justify-content:space-between}
.abrir-menu span{display:block;height:2px;width:100%;background:var(--letra);border-radius:2px;
transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s}
.abrir-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.abrir-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.abrir-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
/* ---------- portada ---------- */
.portada{position:relative;min-height:min(96vh,900px);display:flex;align-items:flex-end;
padding:160px 0 72px;overflow:hidden}
.portada .fondo{position:absolute;inset:0;z-index:0}
.portada .fondo img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;
opacity:.74;filter:saturate(.96) contrast(1.04)}
.portada .fondo::after{content:"";position:absolute;inset:0;background:
linear-gradient(103deg,var(--tinta) 16%,rgba(10,20,32,.9) 38%,rgba(10,20,32,.42) 62%,rgba(10,20,32,.2) 100%),
linear-gradient(0deg,var(--tinta) 1%,transparent 34%)}
.portada .contenedor{position:relative;z-index:1}
.sobretitulo{font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--azul-claro);
margin:0 0 24px;display:flex;align-items:center;gap:14px;font-weight:500}
.sobretitulo::before{content:"";width:40px;height:1px;background:var(--azul);opacity:.9}
.portada h1{font-size:clamp(40px,6.2vw,80px);max-width:17ch;text-wrap:balance}
.portada h1 span{color:var(--azul-claro)}
.portada .entrada{margin:30px 0 38px;max-width:56ch;font-size:19px;color:var(--letra-suave)}
.botonera{display:flex;gap:13px;flex-wrap:wrap}
.boton{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;font-size:14px;
letter-spacing:.1em;text-transform:uppercase;font-weight:500;
border:1px solid var(--azul);color:#04121c;background:var(--azul);border-radius:var(--r);
cursor:pointer;transition:background .2s,box-shadow .2s,transform .12s,color .2s}
.boton:hover{background:var(--azul-claro);border-color:var(--azul-claro);
box-shadow:0 0 30px var(--brillo)}
.boton:active{transform:translateY(1px)}
.boton.hueco{background:transparent;color:var(--letra);border-color:var(--linea-viva)}
.boton.hueco:hover{border-color:var(--azul);color:var(--azul-claro);box-shadow:none;
background:rgba(31,159,212,.08)}
.papel .boton.hueco{color:var(--letra-papel);border-color:var(--linea-papel)}
.papel .boton.hueco:hover{color:var(--azul-hondo);border-color:var(--azul)}
/* las cifras, pegadas al borde de la portada */
.cifras{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
margin-top:52px;padding-top:32px;border-top:1px solid var(--linea)}
.cifra strong{display:block;font-family:var(--titular);font-size:44px;color:var(--letra);
line-height:1}
.cifra span{display:block;margin-top:7px;font-size:14px;color:var(--letra-tenue);max-width:30ch}
/* ---------- secciones ---------- */
.seccion{padding:clamp(76px,9vw,132px) 0}
.papel{background:var(--papel);color:var(--letra-papel-suave)}
.papel h1,.papel h2,.papel h3,.papel h4{color:var(--letra-papel)}
.papel .rotulo{color:var(--azul-hondo)}
.rotulo{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--azul-claro);
margin:0 0 15px;font-weight:500}
.seccion h2{font-size:clamp(30px,4.1vw,50px);max-width:19ch;margin-bottom:24px;text-wrap:balance}
.entradilla{max-width:62ch;font-size:18px}
/* equipo */
.cirujanos{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
margin-top:48px}
.cirujano{border:1px solid var(--linea-papel);border-radius:var(--r);overflow:hidden;
background:#fff;transition:transform .25s,box-shadow .25s}
.cirujano:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(16,35,52,.13)}
.cirujano img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 22%;
background:var(--marco-foto)}
.cirujano .cuerpo{padding:24px}
.cirujano h3{font-size:24px;margin-bottom:6px}
.cirujano p{margin:0;font-size:14.5px;color:var(--letra-papel-suave)}
/* pilares */
.pilares{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
margin-top:50px}
.pilar{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--tinta-2);
transition:border-color .25s,transform .25s}
.pilar:hover{border-color:var(--linea-viva);transform:translateY(-4px)}
.pilar figure{margin:0;position:relative}
.pilar img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* El pie explica qué se está viendo. Una foto de quirófano sin pie no la
entiende ni un cirujano, y menos un paciente. */
.pilar .cuerpo{padding:26px}
.pilar h3{font-size:22px;margin-bottom:10px}
.pilar p{margin:0;font-size:15.5px;color:var(--letra-tenue)}
/* formación */
.formacion{display:grid;gap:clamp(34px,5vw,70px);align-items:center;
grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.formacion .media{border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);
box-shadow:0 24px 60px rgba(0,0,0,.45)}
.formacion .media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cursos{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:11px}
.cursos a{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--linea);
border-radius:var(--r);background:var(--tinta-2);transition:border-color .2s,background .2s}
.cursos a:hover{border-color:var(--azul);background:rgba(31,159,212,.08)}
.cursos strong{display:block;font-family:var(--titular);font-size:18px;color:var(--letra)}
.cursos small{display:block;font-size:13.5px;color:var(--letra-tenue);margin-top:3px}
.cursos .flecha{margin-left:auto;color:var(--azul);font-size:20px}
/* agenda */
.agenda{list-style:none;padding:0;margin:44px 0 0;display:grid;gap:0}
.agenda li{display:grid;gap:8px 22px;grid-template-columns:44px 210px 1fr;align-items:baseline;
padding:22px 0;border-top:1px solid var(--linea-papel)}
.agenda li:last-child{border-bottom:1px solid var(--linea-papel)}
.agenda .bandera{font-size:24px;line-height:1}
.agenda .cuando{font-weight:600;color:var(--letra-papel)}
.agenda .donde{display:block;font-size:13.5px;color:var(--letra-papel-suave);margin-top:2px}
.agenda .que{font-family:var(--titular);font-size:19px;color:var(--letra-papel)}
/* ---------- entradas del blog ---------- */
.rejilla-entradas{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
margin-top:48px}
.entrada-tarjeta{display:flex;flex-direction:column;border:1px solid var(--linea);
border-radius:var(--r);overflow:hidden;background:var(--tinta-2);
transition:border-color .25s,transform .25s,box-shadow .25s}
.entrada-tarjeta:hover{border-color:var(--linea-viva);transform:translateY(-4px);
box-shadow:0 20px 46px rgba(0,0,0,.45)}
.entrada-tarjeta .foto{overflow:hidden;background:var(--marco-foto)}
.entrada-tarjeta .foto img{width:100%;aspect-ratio:16/10;object-fit:cover;
transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.entrada-tarjeta:hover .foto img{transform:scale(1.05)}
.entrada-tarjeta .cuerpo{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.entrada-tarjeta h3{font-size:20px;line-height:1.24}
.entrada-tarjeta p{margin:0;font-size:14.5px;color:var(--letra-tenue)}
.meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-claro)}
.papel .meta{color:var(--azul-hondo)}
/* filtro de categorías */
.filtro-cats{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.filtro-cats a{padding:8px 16px;border:1px solid var(--linea);border-radius:100px;font-size:13px;
color:var(--letra-suave);transition:border-color .2s,color .2s,background .2s}
.filtro-cats a:hover,.filtro-cats a.actual{border-color:var(--azul);color:var(--azul-claro);
background:rgba(31,159,212,.09)}
/* ---------- la entrada por dentro ---------- */
.articulo{max-width:74ch;margin-inline:auto;padding-top:132px}
.articulo .meta{margin-bottom:16px}
.articulo h1{font-size:clamp(30px,4.3vw,50px);margin-bottom:22px;text-wrap:balance}
.articulo .destacada{border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);
margin:32px 0 40px}
/* El texto viene de entradas escritas a lo largo de doce años: hay palabras
larguísimas, tablas y trozos pegados de otros sitios. Sin esto, en el móvil
se sale por el lado y la página entera se desplaza. */
.texto{font-size:17.5px;color:var(--letra-suave);overflow-wrap:anywhere}
.texto table{width:100%;display:block;overflow-x:auto}
.texto pre{white-space:pre-wrap;overflow-x:auto}
.texto h2{font-size:29px;margin:44px 0 16px;max-width:none}
.texto h3{font-size:23px;margin:34px 0 12px}
/* max-width, NO width: así una foto grande llena la columna y una pequeña se
queda a su tamaño. Con width:100% el retrato del currículum (498 px de ancho)
se estiraba hasta los 720 de la columna y se veía pixelado. */
.texto img{max-width:100%;height:auto;border-radius:var(--r);margin:26px 0;
border:1px solid var(--linea)}
.texto ul,.texto ol{padding-left:22px}
.texto li{margin-bottom:9px}
.texto a{color:var(--azul-claro);border-bottom:1px solid rgba(95,194,236,.35)}
.texto a:hover{border-bottom-color:var(--azul-claro)}
/* (valen para cualquier maqueta: .texto, no .articulo .texto)
Las galerías de los casos clínicos: son la mitad del artículo, así que se
enseñan como una rejilla y no como una columna de fotos enormes. */
.texto .galeria{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
margin:30px 0}
.texto .galeria figure{margin:0;border:1px solid var(--linea);border-radius:var(--r);
overflow:hidden;background:var(--marco-foto)}
.texto .galeria img{width:100%;aspect-ratio:3/2;object-fit:cover;margin:0;border:0;
border-radius:0;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.texto .galeria figure:hover img{transform:scale(1.05)}
/* Las fotos sueltas con pie propio: la foto y su pie son una sola pieza, con
un solo marco. Si no, la foto lleva su borde y el pie queda flotando debajo
como si fuera un párrafo más. */
.texto figure{margin:26px 0;border:1px solid var(--linea);border-radius:var(--r);
overflow:hidden;background:var(--marco-foto);width:fit-content;max-width:100%}
.texto figure img{margin:0;border:0;border-radius:0;display:block;
max-width:100%;height:auto}
.texto figure a{border-bottom:0;display:block}
.texto figcaption{font-size:13.5px;color:var(--letra-tenue);padding:9px 12px;
line-height:1.5}
.texto .galeria figcaption{font-size:12.5px;padding:7px 10px}
.texto blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:2px solid var(--azul);
font-family:var(--titular);font-size:21px;color:var(--letra)}
.texto iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r)}
.pie-articulo{margin-top:52px;padding-top:28px;border-top:1px solid var(--linea);
display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
/* ---------- contacto y pie ---------- */
.contacto{text-align:center}
.contacto h2{margin-inline:auto}
.correo-grande{font-family:var(--titular);font-size:clamp(26px,4.2vw,46px);color:var(--azul);
display:inline-block;margin-top:12px;border-bottom:1px solid transparent;transition:border-color .2s}
.correo-grande:hover{border-bottom-color:var(--azul)}
.enlaces-paciente{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pie{border-top:1px solid var(--linea);padding:48px 0 40px;background:var(--tinta-2)}
.pie .contenedor{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;
justify-content:space-between;font-size:13.5px;color:var(--letra-tenue)}
.pie a:hover{color:var(--azul-claro)}
.pie nav{display:flex;gap:20px;flex-wrap:wrap}
/* ---------- apariciones ---------- */
@media(prefers-reduced-motion:no-preference){
/* Solo se esconde si hay JavaScript que vaya a volver a enseñarlo. */
html.js .aparece{opacity:0;transform:translateY(20px);
transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .aparece.visible{opacity:1;transform:none}
}
/* ---------- pantallas pequeñas ---------- */
@media(max-width:820px){
.agenda li{grid-template-columns:36px 1fr;gap:4px 16px}
.agenda .que{grid-column:2}
}
/* Ocho entradas no caben en una línea hasta que la pantalla es muy ancha: por
debajo de esto se pasa al botón, que es mejor que un menú partido en dos
líneas con la barra cambiando de alto en cada página. */
@media(max-width:1120px){
.abrir-menu{display:flex}
.menu{position:fixed;inset:78px 0 auto;flex-direction:column;align-items:flex-start;gap:0;
background:rgba(10,20,32,.99);border-bottom:1px solid var(--linea);padding:8px 24px 22px;
margin:0;display:none}
.menu.abierto{display:flex}
.menu a{width:100%;padding:15px 0;border-bottom:1px solid var(--linea)}
.menu a.contacto-menu{border:0;border-bottom:1px solid var(--linea);border-radius:0;padding:15px 0}
.barra.pegada .menu{inset:62px 0 auto}
/* Con el menú desplegado, la barra no se esconde al bajar. */
.barra:has(.menu.abierto){transform:none}
}
@media(max-width:760px){
.contenedor{width:calc(100% - 34px)}
.portada{min-height:auto;padding:128px 0 64px}
.portada h1{font-size:clamp(32px,9vw,48px)}
.cifra strong{font-size:36px}
.articulo{padding-top:108px}
.pie .contenedor{flex-direction:column;align-items:flex-start}
}
/* Los dos bloques de «querido paciente» y «tengo una clínica». Van en la
portada, uno al lado del otro, y en el móvil uno debajo del otro. */
.dos-bloques{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
margin-top:34px}
.dos-bloques .bloque{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r);
padding:30px 28px}
.dos-bloques .bloque h3{font-family:var(--titular);font-size:23px;margin:0 0 12px}
.dos-bloques .bloque p{margin:0 0 20px;color:var(--letra-tenue)}
.entrada.secundaria{font-size:16px;color:var(--letra-tenue);max-width:60ch;margin-top:-6px}
.formacion h3.sub{font-family:var(--titular);font-size:21px;margin:22px 0 10px}
.cirujano .ver-cv{display:inline-block;margin-top:10px;font-size:12.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--azul-claro);border-bottom:1px solid rgba(95,194,236,.35)}
.cirujano .ver-cv:hover{border-bottom-color:var(--azul-claro)}
/* Los enlaces legales del pie: más pequeños y menos llamativos que el menú. */
.pie .legal{margin-top:10px}
.pie .legal a{font-size:12.5px;color:var(--letra-tenue);margin-right:16px}
/* La foto del bloque de formación no estira: ahora el texto es más largo que
ella y, si estira, se deforma o deja un hueco negro debajo. Se queda arriba
y acompaña al principio del texto. */
.formacion .media{align-self:start;position:sticky;top:96px}
/* ── El formulario de contacto ──────────────────────────────────────────────
Dos columnas en pantalla ancha, una en el móvil. El campo del mensaje y el
consentimiento ocupan la fila entera. */
.formulario{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
max-width:760px;margin:44px auto 0;text-align:left}
.formulario p{margin:0}
.formulario p.ancho{grid-column:1/-1}
.formulario label{display:block;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--letra-tenue);margin-bottom:8px}
.formulario .obligatorio{color:var(--azul-claro)}
.formulario input,.formulario textarea{width:100%;padding:13px 14px;font:inherit;font-size:15.5px;
color:var(--letra);background:var(--tinta-2);border:1px solid var(--linea);border-radius:var(--r);
transition:border-color .2s}
.formulario textarea{resize:vertical;min-height:130px}
.formulario input:focus,.formulario textarea:focus{outline:0;border-color:var(--azul-claro)}
/* El consentimiento es un texto legal: se lee en minúscula y en línea, no como
rótulo de campo. */
.formulario .consiento label{display:flex;gap:11px;align-items:flex-start;text-transform:none;
letter-spacing:0;font-size:13.5px;line-height:1.55}
.formulario .consiento input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--azul)}
.formulario .consiento a{color:var(--azul-claro);border-bottom:1px solid rgba(95,194,236,.35)}
.formulario button{width:100%;justify-content:center}
/* La trampa antirrobots: fuera de la vista pero no con display:none, que
algunos robots detectan y se saltan. */
.formulario .cebo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Y su etiqueta también recorta: con 1px de ancho y texto dentro, era el único
elemento de la web que desbordaba, y ensuciaba la revisión automática. */
.formulario .cebo label,.formulario .cebo input{overflow:hidden;width:1px;height:1px;
white-space:nowrap;margin:0;padding:0;border:0}
/* El aviso de «enviado» que pinta assets/formulario.js */
.aviso-formulario{max-width:760px;margin:24px auto 0;padding:16px 18px;border-radius:var(--r);
border:1px solid var(--azul) !important;background:var(--tinta-2);color:var(--letra)}
@media (max-width:640px){.formulario{gap:15px}}
/* Cuando hay dos enlaces de currículum, uno debajo del otro no: en línea y
separados. */
.cirujano .ver-cv + .ver-cv{margin-left:18px}
/* ── Filosofía de trabajo ───────────────────────────────────────────────────
Tres tarjetas, cada una con su foto arriba y el pie encima de la foto. */
.pilares{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
margin-top:40px}
.pilar{background:var(--tinta-2);border:1px solid var(--linea);border-radius:var(--r);
overflow:hidden;display:flex;flex-direction:column}
.pilar figure{margin:0;position:relative;overflow:hidden}
.pilar img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pilar:hover img{transform:scale(1.04)}
.pilar figcaption{position:absolute;inset:auto 0 0;padding:28px 16px 11px;font-size:12.5px;
line-height:1.4;color:#fff;background:linear-gradient(transparent,rgba(4,12,20,.92))}
.pilar .cuerpo{padding:24px 24px 28px}
.pilar h3{font-family:var(--titular);font-size:24px;margin:0 0 11px}
.pilar p{margin:0;color:var(--letra-tenue)}
.pilar strong{color:var(--letra)}
/* ── El formulario de contacto ──────────────────────────────────────────────
Dos columnas en pantalla ancha, una en el móvil. El campo del mensaje y el
consentimiento ocupan la fila entera. */
.formulario{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
max-width:760px;margin:44px auto 0;text-align:left}
.formulario p{margin:0}
.formulario p.ancho{grid-column:1/-1}
.formulario label{display:block;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--letra-tenue);margin-bottom:8px}
.formulario .obligatorio{color:var(--azul-claro)}
.formulario input,.formulario textarea{width:100%;padding:13px 14px;font:inherit;font-size:15.5px;
color:var(--letra);background:var(--tinta-2);border:1px solid var(--linea);border-radius:var(--r);
transition:border-color .2s}
.formulario textarea{resize:vertical;min-height:130px}
.formulario input:focus,.formulario textarea:focus{outline:0;border-color:var(--azul-claro)}
/* El consentimiento es un texto legal: se lee en minúscula y en línea, no como
rótulo de campo. */
.formulario .consiento label{display:flex;gap:11px;align-items:flex-start;text-transform:none;
letter-spacing:0;font-size:13.5px;line-height:1.55}
.formulario .consiento input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--azul)}
.formulario .consiento a{color:var(--azul-claro);border-bottom:1px solid rgba(95,194,236,.35)}
.formulario button{width:100%;justify-content:center}
/* La trampa antirrobots: fuera de la vista pero no con display:none, que
algunos robots detectan y se saltan. */
.formulario .cebo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Y su etiqueta también recorta: con 1px de ancho y texto dentro, era el único
elemento de la web que desbordaba, y ensuciaba la revisión automática. */
.formulario .cebo label,.formulario .cebo input{overflow:hidden;width:1px;height:1px;
white-space:nowrap;margin:0;padding:0;border:0}
/* El aviso de «enviado» que pinta assets/formulario.js */
.aviso-formulario{max-width:760px;margin:24px auto 0;padding:16px 18px;border-radius:var(--r);
border:1px solid var(--azul) !important;background:var(--tinta-2);color:var(--letra)}
@media (max-width:640px){.formulario{gap:15px}}
/* Cuando hay dos enlaces de currículum, uno debajo del otro no: en línea y
separados. */
.cirujano .ver-cv + .ver-cv{margin-left:18px}
/* ── Filosofía de trabajo ───────────────────────────────────────────────────
La web vieja tenía aquí DOS fotos para toda la sección, no una por pilar.
Se respeta: las fotos a un lado y los tres pilares al otro, que además deja
el texto en una columna cómoda de leer. */
.metodo{display:grid;gap:44px;grid-template-columns:minmax(260px,.85fr) 1.15fr;
align-items:start;margin-top:38px}
.metodo-fotos{display:grid;gap:16px;position:sticky;top:96px}
.metodo-fotos figure{margin:0;border:1px solid var(--linea);border-radius:var(--r);
overflow:hidden;background:var(--marco-foto)}
.metodo-fotos img{display:block;width:100%;height:auto}
.metodo-fotos figcaption{font-size:12.5px;color:var(--letra-tenue);padding:9px 12px;line-height:1.45}
.metodo .pilares{display:grid;gap:30px;grid-template-columns:1fr}
.metodo .pilar{padding-left:20px;border-left:2px solid var(--azul)}
.metodo .pilar h3{font-family:var(--titular);font-size:24px;margin:0 0 10px}
.metodo .pilar p{margin:0;color:var(--letra-tenue)}
.metodo .pilar strong{color:var(--letra)}
@media (max-width:860px){
.metodo{grid-template-columns:1fr;gap:30px}
.metodo-fotos{position:static;grid-template-columns:1fr 1fr}
}
/* El retrato de una página (los currículums): a su tamaño real, nunca estirado,
y flotando a la derecha en pantalla ancha para que el texto lo rodee. */
.articulo .retrato{margin:0 0 26px;border:1px solid var(--linea);border-radius:var(--r);
overflow:hidden;background:var(--marco-foto);width:fit-content}
.articulo .retrato img{display:block;width:100%;height:auto}
@media (min-width:860px){
.articulo .retrato{float:right;margin:4px 0 22px 30px;max-width:42%}
}
/* ── Las fotos alineadas del texto de WordPress ─────────────────────────────
El autor puso algunas fotos flotando a la derecha, junto al párrafo al que
acompañan. Sin estas reglas, la clase se conserva pero no hace nada: la foto
se convierte en un bloque a todo lo ancho y acaba al lado de otro párrafo.
Es una de las razones por las que la foto no casaba con el texto. */
.texto .alignright{float:right;margin:6px 0 20px 28px;max-width:46%}
.texto .alignleft{float:left;margin:6px 28px 20px 0;max-width:46%}
.texto .aligncenter{display:block;margin-left:auto;margin-right:auto}
.texto .alignnone{display:block}
/* Los titulares no se meten por el hueco que deja una foto flotando. */
.texto h2,.texto h3,.texto .galeria{clear:both}
@media (max-width:700px){
.texto .alignright,.texto .alignleft{float:none;max-width:100%;margin:22px 0}
}
/* El titular de una página de listado es su
, no un
: cada página debe
tener uno y solo uno, y es lo que el buscador lee como tema de la página.
Visualmente es el mismo tamaño que los
de sección. */
.seccion h1{font-size:clamp(30px,4.1vw,50px);max-width:19ch;margin-bottom:24px;text-wrap:balance}
.portada h1{max-width:17ch}
/* ── Tema claro ─────────────────────────────────────────────────────────────
Para las páginas que son sobre todo texto largo, como los currículums: sobre
papel se lee mejor y se distingue de las de casos clínicos, que van oscuras.
Solo se redefinen las variables: ni una regla del resto de la hoja cambia. */
body.claro{
--marco-foto:#e7e4de;
/* El color del texto corrido. Se me había quedado sin redefinir: es un azul
pálido pensado para fondo oscuro y sobre papel el artículo salía lavado. */
--letra-suave:#333f4b;
--fondo:#f7f6f3;
--tinta-2:#ffffff;
--letra:#151d26;
--letra-tenue:#5a6672;
--linea:#e2ddd4;
--azul:#1a7ba5;
--azul-claro:#146d93;
background:var(--fondo);color:var(--letra);
}
body.claro .barra{background:rgba(247,246,243,.92);border-bottom:1px solid var(--linea)}
body.claro .barra.pegada{background:rgba(247,246,243,.97)}
body.claro .marca,body.claro .menu a{color:var(--letra)}
body.claro .pie{background:#101820;color:#cfd8e0}
body.claro .pie a,body.claro .pie span{color:#cfd8e0}
body.claro .seccion.papel{background:#fff}
body.claro .seccion.contacto{background:#101820;color:#cfd8e0}
body.claro .seccion.contacto h2,body.claro .seccion.contacto .entradilla{color:#fff}
body.claro .formulario input,body.claro .formulario textarea{background:#182430;color:#eef3f7;
border-color:#2a3a48}
/* La sección de contacto sigue siendo oscura aunque la página vaya en claro:
lo que va dentro tiene que ir en letra clara. Los tres botones de abajo
quedaban en gris oscuro sobre fondo oscuro y no se leían. */
body.claro .seccion.contacto .boton.hueco{color:#fff;border-color:rgba(190,215,235,.32)}
body.claro .seccion.contacto .boton.hueco:hover{color:#04121c;background:var(--azul);
border-color:var(--azul)}
body.claro .seccion.contacto .formulario label{color:#9db0c2}
body.claro .seccion.contacto .consiento span{color:#c3d2df}
body.claro .seccion.contacto .consiento a{color:var(--azul-claro);
border-bottom-color:rgba(95,194,236,.35)}
body.claro .seccion.contacto .obligatorio{color:var(--azul-claro)}
/* ── Ficha de cirujano con currículum ───────────────────────────────────────
Aprovecha el ancho: el retrato y la entrada arriba a dos columnas, las
cifras en fila, el atlas en rejilla y el currículum largo repartido en
columnas en vez de una tira vertical. */
.cv-cabecera{padding-top:150px}
.cv-arriba{display:grid;gap:44px;grid-template-columns:1.5fr .8fr;align-items:start}
.cv-arriba h1{font-size:clamp(38px,5.4vw,66px);max-width:14ch;margin-bottom:18px}
.cv-arriba .entradilla{font-size:18px;max-width:62ch}
.retrato-cv{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);
background:var(--tinta-2);justify-self:end;max-width:100%}
.retrato-cv img{display:block;width:100%;height:auto}
.cifras-cv{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
margin-top:52px;padding-top:34px;border-top:1px solid var(--linea)}
.cifras-cv .cifra strong{display:block;font-family:var(--titular);font-size:clamp(30px,3.6vw,44px);
color:var(--azul-claro);line-height:1;white-space:nowrap}
.cifras-cv .cifra span{display:block;margin-top:7px;font-size:13.5px;color:var(--letra-tenue);
letter-spacing:.03em}
.atlas{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
margin-top:38px}
.pais{background:var(--tinta-2);border:1px solid var(--linea);border-radius:var(--r);
padding:20px 22px}
.pais h3{font-family:var(--titular);font-size:19px;margin:0 0 12px;
display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pais h3 span{font-family:var(--texto);font-size:12px;color:#fff;background:var(--azul);
border-radius:999px;padding:2px 9px;font-weight:600}
.pais ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pais li{font-size:13px;color:var(--letra-tenue);background:var(--fondo);
border:1px solid var(--linea);border-radius:999px;padding:3px 10px}
.fichas-cv{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.ficha-cv{background:var(--tinta-2);border:1px solid var(--linea);border-radius:var(--r);
padding:28px 30px}
.ficha-cv h2{font-size:22px;margin:0 0 14px;max-width:none}
.ficha-cv p{color:var(--letra-tenue);margin:0 0 12px}
.ficha-cv ul{margin:0;padding-left:20px;color:var(--letra-tenue)}
.ficha-cv li{margin-bottom:9px}
.ficha-cv a{color:var(--azul-claro);border-bottom:1px solid rgba(20,109,147,.35)}
/* El currículum largo: en dos columnas en pantalla ancha. Cada año arranca
sección, y el año no se separa de sus líneas. */
.cv-largo{column-gap:52px;margin-top:8px}
@media (min-width:1000px){ .cv-largo{column-count:2} }
.cv-largo h3{font-family:var(--titular);font-size:20px;margin:26px 0 12px;color:var(--azul-claro);
break-after:avoid;border-bottom:1px solid var(--linea);padding-bottom:7px}
.cv-largo h3:first-child{margin-top:0}
.cv-largo p{font-size:14.5px;line-height:1.62;margin:0 0 13px;color:var(--letra-tenue);
break-inside:avoid}
.cv-largo ul{padding-left:19px;margin:0 0 16px}
.cv-largo li{font-size:14.5px;color:var(--letra-tenue);margin-bottom:9px;break-inside:avoid}
@media (max-width:860px){
.cv-arriba{grid-template-columns:1fr;gap:28px}
.retrato-cv{justify-self:start;max-width:320px}
}
/* El titular que trae dentro el currículum largo: dentro de una columna no
puede tener el tamaño de un titular de sección. */
.cv-largo h2{font-size:21px;max-width:none;margin:0 0 18px;padding-bottom:8px;
border-bottom:2px solid var(--azul);column-span:all}
.cv-largo > ul:first-child{margin-bottom:22px}
/* ── Páginas de servicio, a pantalla completa ───────────────────────────────
Cada apartado es una banda con su fondo, y dentro el texto y las fotos van a
dos columnas alternando el lado. Así se aprovecha el ancho en vez de dejar
una columna de texto en medio de la pantalla. */
.portada-interior{padding-top:150px}
.portada-interior h1{font-size:clamp(34px,5vw,60px);max-width:16ch;margin-bottom:18px}
.portada-interior .entradilla{font-size:18px;max-width:62ch}
.portada-foto figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--linea)}
.portada-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.banda-doble{display:grid;gap:44px;grid-template-columns:1.15fr .85fr;align-items:center;
margin-top:26px}
.banda-doble.izquierda{direction:rtl}
.banda-doble.izquierda > *{direction:ltr}
.banda-fotos{display:grid;gap:16px}
.banda-fotos figure{margin:0;border:1px solid var(--linea);border-radius:var(--r);
overflow:hidden;background:var(--tinta-2)}
.banda-fotos img{display:block;width:100%;height:auto}
.banda-fotos figcaption{font-size:12.5px;color:var(--letra-tenue);padding:9px 12px}
.rejilla-dudas{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
margin-top:32px}
.tarjeta-duda{background:var(--tinta-2);border:1px solid var(--linea);border-radius:var(--r);
padding:26px 28px}
.tarjeta-duda h3{font-family:var(--titular);font-size:20px;margin:0 0 11px}
.tarjeta-duda p{margin:0 0 11px;color:var(--letra-tenue);font-size:15.5px}
.tarjeta-duda p:last-child{margin-bottom:0}
.apartado{margin-top:26px}
.apartado h3{font-family:var(--titular);font-size:22px;margin:0 0 10px}
.seccion .banda-texto p,.seccion .apartado p{color:var(--letra-tenue);max-width:62ch}
@media (max-width:900px){
.banda-doble{grid-template-columns:1fr;gap:26px}
.banda-doble.izquierda{direction:ltr}
}
/* Las tarjetas dentro de una banda clara van en blanco: con el fondo oscuro de
siempre, el titular quedaba oscuro sobre oscuro y no se leía. */
.papel .tarjeta-duda,.papel .banda-fotos figure{background:#fff;border-color:var(--linea-papel)}
.papel .tarjeta-duda h3,.papel .apartado h3{color:var(--letra-papel)}
.papel .tarjeta-duda p,.papel .banda-texto p,.papel .apartado p,
.papel .banda-fotos figcaption{color:var(--letra-papel-suave)}
.papel .banda-texto strong,.papel .tarjeta-duda strong{color:var(--letra-papel)}
.papel .banda-texto a,.papel .tarjeta-duda a{color:var(--azul-hondo)}
.papel .banda-texto ul,.papel .banda-texto li{color:var(--letra-papel-suave)}
/* En estas bandas el texto se lee a lo ancho de la pantalla, pero una línea de
180 caracteres no la lee nadie: se le pone medida. */
.seccion.ancha .contenedor > p,.seccion.ancha .banda-texto > p,
.seccion.ancha .contenedor > ul,.seccion.ancha .banda-texto > ul{max-width:70ch}
.seccion.ancha h2{margin-bottom:22px}
/* Los vídeos incrustados, con su proporción. */
.seccion.ancha iframe,.banda-fotos iframe,figure.video iframe{width:100%;aspect-ratio:16/9;
height:auto;border:0;border-radius:var(--r);display:block}
figure.video{margin:26px 0;border:0}
.banda-fotos figure.video{border:0;background:none}
/* Los botones que vienen dentro del texto importado. */
.seccion.ancha .boton,.texto .boton{display:inline-flex;margin-top:6px}
.papel .boton{background:var(--azul-hondo);color:#fff}
/* ═══ Maqueta de caso clínico ═══════════════════════════════════════════════
Un caso clínico es sobre todo fotos. La maqueta anterior las metía en la
misma columna estrecha que el texto; aquí el texto mantiene su medida de
lectura pero las fotos se salen de ella y ocupan el ancho de verdad.
El truco es una rejilla de tres carriles: raíl, texto y aire. El texto vive
en el carril del medio; las fotos y las galerías se extienden hasta el
final. */
.caso-cabecera{padding:150px 0 0}
.caso-cabecera h1{font-size:clamp(36px,5vw,64px);max-width:20ch;margin:10px 0 20px;
text-wrap:balance}
.caso-cabecera .meta{color:var(--azul-claro);font-size:12.5px;letter-spacing:.14em;
text-transform:uppercase}
.caso-cabecera .entradilla{font-size:19px;max-width:60ch;color:var(--letra-tenue)}
/* La ficha del caso: tres datos, en fila, sobre una línea. */
.caso-ficha{display:flex;flex-wrap:wrap;gap:46px;margin:40px 0 0;padding-top:26px;
border-top:1px solid var(--linea)}
.caso-ficha div{display:flex;flex-direction:column;gap:4px}
.caso-ficha strong{font-family:var(--titular);font-size:34px;color:var(--letra);line-height:1}
.caso-ficha span{font-size:12.5px;color:var(--letra-tenue);letter-spacing:.05em}
.caso-cuerpo{display:grid;gap:0 54px;grid-template-columns:230px minmax(0,70ch) 1fr;
padding-top:56px;padding-bottom:40px}
/* El raíl se queda a la vista mientras se baja: en un caso de veinte fotos, es
lo que evita perderse. */
.caso-rail .pegado{position:sticky;top:96px;display:grid;gap:26px;justify-items:start}
.caso-rail .rotulo{margin-bottom:9px}
.rail-cats{display:flex;flex-wrap:wrap;gap:7px}
.rail-cats a{font-size:12.5px;color:var(--letra-tenue);border:1px solid var(--linea);
border-radius:999px;padding:4px 11px}
.rail-cats a:hover{color:var(--azul-claro);border-color:var(--azul)}
.rail-cats .rotulo{flex:0 0 100%}
.fases ol{list-style:none;margin:0;padding:0;counter-reset:fase}
.fases li{counter-increment:fase;margin-bottom:11px;position:relative;padding-left:26px;
line-height:1.4}
.fases li::before{content:counter(fase,decimal-leading-zero);position:absolute;left:0;top:1px;
font-size:11px;color:var(--azul-claro);font-variant-numeric:tabular-nums}
.fases a{font-size:14px;color:var(--letra-tenue)}
.fases a:hover{color:var(--letra)}
/* El texto en su carril; las fotos, más anchas. */
.caso-texto{grid-column:2}
.caso-texto > figure,.caso-texto > .galeria,.caso-texto > p > img{
grid-column:2 / -1;width:auto;max-width:none}
.caso-cuerpo > .caso-texto{display:contents}
.caso-texto > *{grid-column:2}
.caso-texto > figure,.caso-texto > .galeria{grid-column:2 / -1;margin:38px 0}
.caso-texto > .galeria{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.caso-texto > h2{grid-column:2;margin-top:52px}
/* max-width, nunca width: una miniatura de 150 px no se estira hasta los 900
del carril ancho. Y el marco se ajusta a la foto en vez de estirarse. */
.caso-texto > figure img{max-width:100%;width:auto}
.caso-texto > figure{justify-self:start}
/* Menos el vídeo: sin ancho propio se quedaba en 300 px; va a todo el carril. */
.caso-texto > figure.video{justify-self:stretch;width:100%}
.caso-vecinos{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
padding:36px 0 10px;border-top:1px solid var(--linea)}
.vecino{display:flex;flex-direction:column;gap:7px;padding:22px 24px;border:1px solid var(--linea);
border-radius:var(--r);background:var(--tinta-2);transition:border-color .2s}
.vecino:hover{border-color:var(--azul)}
.vecino span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-claro)}
.vecino strong{font-family:var(--titular);font-size:17px;font-weight:600;line-height:1.35}
.vecino.der{text-align:right}
@media (max-width:1100px){
.caso-cuerpo{grid-template-columns:200px minmax(0,1fr);gap:0 36px}
.caso-texto > figure,.caso-texto > .galeria{grid-column:2}
}
@media (max-width:820px){
.caso-cuerpo{grid-template-columns:1fr}
.caso-texto > *{grid-column:1}
.caso-texto > figure,.caso-texto > .galeria{grid-column:1}
.caso-rail .pegado{position:static;margin-bottom:34px}
.caso-ficha{gap:28px}
.vecino.der{text-align:left}
}
/* El caso clínico en claro: lo que falta por ajustar del tema. */
body.claro .caso-cabecera .meta{color:var(--azul-hondo)}
body.claro .caso-ficha strong{color:var(--letra)}
body.claro .vecino{background:#fff}
body.claro .vecino span{color:var(--azul-hondo)}
body.claro .fases li::before,body.claro .rail-cats a:hover{color:var(--azul-hondo)}
body.claro .texto a{color:var(--azul-hondo);border-bottom-color:rgba(18,98,138,.3)}
body.claro .texto a:hover{border-bottom-color:var(--azul-hondo)}
body.claro .texto strong{color:var(--letra)}
body.claro .texto blockquote{color:var(--letra)}
/* La galería y los pies, sobre papel. */
body.claro .galeria figure,body.claro .texto figure{background:var(--marco-foto)}
/* ═══ Visor de fotos ════════════════════════════════════════════════════════
Se abre sobre la página, a pantalla completa, y se pasa de una foto a otra
sin cerrarlo. Siempre en oscuro, aunque la página esté en claro: una foto
clínica se mira mejor sobre negro. */
html.con-visor{overflow:hidden}
.visor{position:fixed;inset:0;z-index:200;display:none;place-items:center;
background:rgba(6,11,17,.95);backdrop-filter:blur(3px);padding:56px 72px}
.visor.abierto{display:grid}
.visor-marco{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
max-width:100%;max-height:100%}
.visor-marco img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;
object-fit:contain;border-radius:var(--r);cursor:zoom-in;
box-shadow:0 30px 80px rgba(0,0,0,.6)}
.visor-marco figcaption{color:#dbe6f0;font-size:14.5px;line-height:1.5;text-align:center;
max-width:70ch}
.visor-cuenta{position:absolute;top:18px;left:50%;transform:translateX(-50%);margin:0;
color:#8fa3b6;font-size:13px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.visor-cerrar,.visor-ir{position:absolute;border:1px solid rgba(190,215,235,.24);
background:rgba(12,20,30,.6);color:#e8f1f8;border-radius:50%;cursor:pointer;
display:grid;place-items:center;transition:background .2s,border-color .2s;font-family:inherit}
.visor-cerrar:hover,.visor-ir:hover{background:rgba(31,159,212,.3);border-color:var(--azul)}
.visor-cerrar:focus-visible,.visor-ir:focus-visible{outline:2px solid var(--azul-claro);
outline-offset:3px}
.visor-cerrar{top:14px;right:16px;width:42px;height:42px;font-size:17px}
.visor-ir{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;
line-height:1;padding-bottom:5px}
.visor-antes{left:14px}
.visor-luego{right:14px}
.visor.sola .visor-ir,.visor.sola .visor-cuenta{display:none}
/* La pista de que una foto se puede ampliar. */
.texto img.ampliable{cursor:zoom-in}
.texto figure:has(img.ampliable){transition:border-color .2s}
.texto figure:has(img.ampliable):hover{border-color:var(--azul)}
@media (max-width:700px){
.visor{padding:52px 10px}
.visor-ir{width:42px;height:42px;font-size:24px}
.visor-marco img{max-height:calc(100vh - 170px)}
}
/* En la maqueta de caso, las fotos NO flotan: se salen de la columna y ocupan
el ancho. Una foto flotante dentro de esta rejilla solo afecta a su propia
celda, así que dejaba un hueco en vez de que el texto la rodeara. */
.caso-texto .alignright,.caso-texto .alignleft{float:none;max-width:100%;margin:38px 0}
/* Una foto suelta dentro de un párrafo también se sale de la columna: hay
fotos que WordPress dejó como
y no como . */
.caso-texto > p:has(> img),.caso-texto > p:has(> a > img){grid-column:2 / -1;margin:38px 0}
.caso-texto > p > img,.caso-texto > p > a > img{max-width:100%;height:auto;margin:0}
body.claro .texto{color:var(--letra-suave)}
body.claro .caso-ficha span,body.claro .fases a,body.claro .rail-cats a{color:var(--letra-papel-suave)}
body.claro .texto figcaption,body.claro .galeria figcaption{color:var(--letra-papel-suave)}
.banda-fotos img.ampliable,.portada-foto img.ampliable{cursor:zoom-in}
/* La barra en las páginas claras: mismo comportamiento, otros colores. */
body.claro .barra{background:linear-gradient(180deg,rgba(247,246,243,.96),rgba(247,246,243,.72) 72%,transparent)}
body.claro .barra.pegada{background:rgba(247,246,243,.985);box-shadow:0 1px 0 var(--linea)}
body.claro .menu a{color:var(--letra-papel-suave)}
body.claro .menu a:hover,body.claro .menu a.actual{color:var(--letra)}
body.claro .menu a.contacto-menu{color:var(--letra);border-color:rgba(22,35,47,.22)}
body.claro .menu a.contacto-menu:hover{background:var(--azul-hondo);color:#fff;border-color:var(--azul-hondo)}
body.claro .abrir-menu span{background:var(--letra)}
body.claro .menu{background:rgba(247,246,243,.99)}
body.claro .barra-avance{background:var(--azul-hondo)}
/* ═══ Contraste ═════════════════════════════════════════════════════════════
Dos cosas se pisaban y dejaban texto ilegible:
1. El color de enlace del texto (`.texto a`, `.banda-texto a`) ganaba al del
botón, y salían botones con la letra del mismo color que su fondo.
2. La sección de contacto va oscura aunque la página esté en claro, y en el
tema claro `--azul-claro` es un azul OSCURO: dentro de esa sección todo
lo que lo usaba desaparecía.
Los colores de aquí están medidos: ninguno baja de 4,5 de contraste. */
/* El botón lleno manda sobre el color de enlace que lo rodee. */
.seccion a.boton,.texto a.boton,.banda-texto a.boton,.apartado a.boton{
background:var(--azul);border-color:var(--azul);color:#04121c} /* 6,3 */
.papel a.boton,.papel .texto a.boton,.papel .banda-texto a.boton,
.papel .apartado a.boton{
background:var(--azul-hondo);border-color:var(--azul-hondo);color:#fff} /* 6,7 */
.seccion a.boton:hover,.papel a.boton:hover{background:var(--azul-hondo);color:#fff}
.seccion a.boton.hueco,.texto a.boton.hueco{background:transparent;color:var(--letra);
border-color:var(--linea-viva)}
.papel a.boton.hueco{color:var(--letra-papel);border-color:var(--linea-papel)}
/* «Ver currículum» va sobre papel blanco: el azul claro ahí no se lee. */
.papel .cirujano .ver-cv,body.claro .cirujano .ver-cv{color:var(--azul-hondo);
border-bottom-color:rgba(18,98,138,.35)}
.papel .dos-bloques .bloque p{color:var(--letra-papel-suave)}
/* La sección de contacto: siempre oscura, siempre con el azul vivo dentro. */
.seccion.contacto .rotulo,body.claro .seccion.contacto .rotulo,
.seccion.contacto .obligatorio,body.claro .seccion.contacto .obligatorio,
.seccion.contacto .correo-grande,body.claro .seccion.contacto .correo-grande{color:#7fd0f2}
.seccion.contacto .consiento a,body.claro .seccion.contacto .consiento a{color:#7fd0f2;
border-bottom-color:rgba(127,208,242,.4)}
/* La sección de contacto es oscura en los dos temas, así que su botón lleva
el azul vivo fijo: en claro, `--azul` es más apagado y la letra negra
encima se quedaba en 3,99. Con este azul son 6,3. */
.seccion.contacto button.boton,body.claro .seccion.contacto button.boton{
background:#1f9fd4;border-color:#1f9fd4;color:#04121c}
.seccion.contacto button.boton:hover,body.claro .seccion.contacto button.boton:hover{
background:#4fb6e4;border-color:#4fb6e4}
/* Una entrada sin foto destacada: la tarjeta se queda sin hueco de foto en
vez de rellenarlo con el logotipo estirado. */
.entrada-tarjeta.sin-foto .cuerpo{padding-top:26px}
.entrada-tarjeta.sin-foto{border-top:3px solid var(--azul)}
/* ═══ Vídeos del canal ══════════════════════════════════════════════════════
La miniatura se sirve desde aquí; el reproductor de YouTube solo aparece
cuando alguien pulsa. Así no hay cookies de terceros mientras nadie mira. */
.videos{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
margin-top:38px}
.video-tarjeta{display:flex;flex-direction:column;gap:12px}
.video-play{position:relative;display:block;border-radius:var(--r);overflow:hidden;
border:1px solid var(--linea);background:var(--marco-foto);aspect-ratio:16/9}
.video-play img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.video-play:hover img{transform:scale(1.04)}
/* El botón de reproducir, dibujado con CSS: ni una imagen más que cargar. */
.video-boton{position:absolute;inset:0;margin:auto;width:74px;height:52px;border-radius:14px;
background:rgba(12,20,30,.72);border:1px solid rgba(235,245,255,.35);
transition:background .25s,transform .25s}
.video-boton::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.video-play:hover .video-boton{background:#e02f2f;border-color:#e02f2f;transform:scale(1.06)}
.video-play:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.video-marco{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);display:block}
.video-titulo{margin:0;font-size:15.5px;line-height:1.45}
.papel .video-titulo{color:var(--letra-papel)}
.video-aviso{margin-top:18px;font-size:12.5px;color:var(--letra-tenue)}
.papel .video-aviso{color:var(--letra-papel-suave)}
/* ---------- aviso de cookies -----------------------------------------------
Lo dibuja sitio.js; aquí solo está su aspecto. Usa las variables de color de
cada web, con un respaldo por si alguna no las tiene: así se ve de la casa
en las veinticinco y no hay que escribir veinticinco hojas. */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:120;
padding:clamp(14px,2vw,20px) clamp(16px,5vw,46px);
background:var(--noche,#15181c);color:var(--cookies-letra,#e8eaed);
box-shadow:0 -12px 40px -22px rgba(0,0,0,.7);
font-size:14.5px;line-height:1.5;
display:flex;gap:clamp(12px,2vw,28px);align-items:center;flex-wrap:wrap;
justify-content:center;
transform:translateY(100%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.cookies.dentro{transform:none}
@media(prefers-reduced-motion:reduce){.cookies{transition:none}}
.cookies p{margin:0;max-width:62ch;flex:1 1 320px}
.cookies a{color:var(--cookies-enlace,#cfd6de);text-underline-offset:3px}
.cookies-botones{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap}
.cookies button{font:inherit;font-size:14px;font-weight:650;cursor:pointer;
padding:10px 20px;border-radius:3px;border:1px solid transparent;
transition:background .2s,border-color .2s,color .2s}
.cookies .si{background:var(--cookies-boton,#f2f4f6);color:var(--noche,#15181c)}
.cookies .si:hover{background:#fff}
.cookies .no{background:none;border-color:rgba(255,255,255,.35);
color:var(--cookies-letra,#e8eaed)}
.cookies .no:hover{border-color:rgba(255,255,255,.7)}
@media(max-width:620px){.cookies{font-size:14px}.cookies-botones{width:100%}
.cookies button{flex:1}}