/* ============================================================
RED LEGAL — sistema de diseño
Tinta / Papel / Rojo de firma. Sin azules corporativos.
============================================================ */
:root{
/* ── NEUTROS ──
Negro real y grises. Los azules del prototipo (#111111 tiraba a
marino) se han quitado: la marca es roja, negra y blanca, y
cualquier tinte frío la desvirtúa. */
--tinta: #111111;
--tinta-2: #1C1C1C;
--tinta-3: #2A2A2A;
/* El fondo de la página NO es blanco puro: es un hueso muy tenue.
Sobre él, las tarjetas y los formularios sí van en blanco, y ese
medio punto de diferencia es lo que hace que se lean como piezas
apoyadas encima y no como recortes del mismo plano. Un blanco sobre
blanco no tiene profundidad, y en una web sin ilustración esa
profundidad hay que construirla con el fondo. */
--papel: #FBFAF8;
--blanco: #FFFFFF;
--papel-2: #F1EFEB;
--papel-3: #DFDCD6;
--gris: #66625C;
--gris-claro: #A8A39B;
/* ── BORGOÑA ──
El rojo del logotipo, sacado del propio archivo con
herramientas/logo.py y no de una impresión visual. Tres
intensidades: la clara es la única que se usa sobre fondo oscuro,
porque el tono de marca ahí no llega al contraste mínimo que
exigen las pautas de accesibilidad. */
--rojo: #A23332; /* medido sobre red_legal_logo.png */
--rojo-vivo: #C4585A; /* la única que se usa sobre fondo oscuro */
--rojo-hondo: #6E1F1F;
--linea-osc: rgba(255,255,255,.14);
--linea-clara:rgba(17,17,17,.12);
/* Trama de marca: los dos cuadrados desplazados del logotipo,
repetidos muy tenues. Aparece en las bandas oscuras y en las
cabeceras. Es lo que da a la web una textura propia en lugar de
grandes planos de color lisos. */
--trama: url("data:image/svg+xml,");
/* Flecha diagonal de «se abre fuera», dibujada. Ver .enlace-mapa. */
--flecha-nw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4'/%3E%3Cpath d='M5.5 4H12v6.5'/%3E%3C/g%3E%3C/svg%3E");
--trama-clara: url("data:image/svg+xml,");
/* ── DÓNDE EMPIEZA EL PATRÓN, A LO ANCHO ──
La firma ocupa los primeros 208 px de la cabecera. El patrón no
arranca hasta pasados los 240 y no llega a pleno hasta los 380, de
modo que el logotipo queda solo sobre el fondo liso.
Está aquí y no repetido en cada regla porque lo usan la cabecera y
la portada, y tienen que coincidir al píxel: si divergen, la
columna limpia se corta justo en la unión y se ve el escalón. */
--trama-corte: linear-gradient(90deg, transparent 0, transparent 240px,
rgba(0,0,0,.45) 300px, #000 380px);
/* La versión ATENUADA, para la portada. No despeja: baja la
intensidad. Es una diferencia que importa —se probó lo otro—:
cualquier máscara que despeje por zonas revela los cuadrados a
medias, y media figura se lee como un corte. Esta no recorta
ninguno; los dibuja todos, más flojos bajo la firma y a plena
intensidad a partir de los 390 px. */
--trama-corte-difuso: linear-gradient(90deg,
rgba(0,0,0,.30) 0, rgba(0,0,0,.30) 210px,
rgba(0,0,0,.62) 300px, #000 390px);
/* ── FONDOS DE SECCIÓN ──
El negro puro se quedó solo para el texto. Las bandas oscuras van
en antracita, que es el gris de los despachos grandes: serio sin
ser fúnebre, y con la ventaja de que no se traga el logotipo. */
--antracita: #33312E; /* con la misma tibieza que el papel */
--antracita-2:#282623;
/* ── TIPOGRAFÍA ──
Helvetica en todo, sin excepciones y sin tipografías web. Además
de ser la decisión de marca, quita la petición a los servidores de
Google que hacía cada visitante: una cesión de su dirección IP
menos que justificar en la política de cookies, y una espera menos
antes de que se vea el texto. */
--display: Helvetica, 'Helvetica Neue', Arial, sans-serif;
--texto: Helvetica, 'Helvetica Neue', Arial, sans-serif;
--mono: Helvetica, 'Helvetica Neue', Arial, sans-serif;
--ancho: 1240px;
--r: 2px;
--sombra: 0 24px 60px -20px rgba(17,17,17,.28);
--header-h: 84px; /* 76 se quedaba justo con el logotipo a 44 */
}
*{box-sizing:border-box;margin:0;padding:0}
/* Cualquier clase que declare «display» le gana al atributo «hidden»,
que solo es una regla por defecto del navegador. Sin esto, poner
hidden a un bloque con display:grid no lo esconde: es lo que pasaba
con el panel de ajustes de cookies y con los pasos de la ventana de
consulta, que salían los tres a la vez. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
font-family:var(--texto);
background:var(--papel);
background-image:var(--trama-clara);
color:var(--tinta);
font-size:16.5px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;border-radius:2px}
.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:24px}
/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.03em}
.h-xl{font-size:clamp(2.9rem,7.2vw,5.6rem);font-weight:700;letter-spacing:-.045em}
.h-l{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.038em}
.h-m{font-size:clamp(1.45rem,2.4vw,1.95rem);letter-spacing:-.03em}
.h-s{font-size:1.12rem;letter-spacing:-.02em;font-weight:600}
.rotulo{
font-family:var(--mono);
font-size:.695rem;
font-weight:500;
letter-spacing:.20em;
text-transform:uppercase;
}
.entrada{
display:flex;align-items:center;gap:11px;
margin-bottom:22px;
color:var(--rojo);
}
.entrada::before{content:"";width:26px;height:1px;background:var(--rojo);flex:none}
.entrada.pale{color:var(--rojo-vivo)}
.entrada.pale::before{background:var(--rojo-vivo)}
.plomo{color:var(--gris);font-size:1.06rem;max-width:60ch}
.oscuro .plomo{color:var(--gris-claro)}
/* ---------- botones ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:14px 24px;border-radius:var(--r);
font-weight:600;font-size:.94rem;letter-spacing:-.01em;
transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
/* Botón principal. Lleva una franja de acento a la izquierda que se
despliega al pasar por encima: da respuesta al puntero sin recurrir a
un cambio de color brusco, que en este registro chirría. */
.btn-rojo{
background:var(--rojo);color:#fff;position:relative;overflow:hidden;
isolation:isolate;
}
.btn-rojo::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:0;z-index:-1;
background:var(--rojo-hondo);transition:width .28s cubic-bezier(.3,.8,.3,1);
}
.btn-rojo:hover::before{width:100%}
.btn-rojo:active{transform:translateY(1px)}
.btn-tinta{background:var(--tinta);color:var(--papel)}
.btn-tinta:hover{background:var(--tinta-3)}
.btn-linea{border:1px solid var(--linea-clara);color:var(--tinta)}
.btn-linea:hover{border-color:var(--tinta);background:rgba(10,15,26,.04)}
.btn-linea-claro{border:1px solid var(--linea-osc);color:var(--papel)}
.btn-linea-claro:hover{border-color:var(--papel);background:rgba(255,255,255,.06)}
.btn .flecha{transition:transform .2s ease}
.btn:hover .flecha{transform:translateX(3px)}
/* ---------- etiqueta de orden jurisdiccional ---------- */
.orden{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:.62rem;font-weight:500;
letter-spacing:.13em;text-transform:uppercase;
color:var(--gris);
border:1px solid var(--linea-clara);
padding:3px 8px;border-radius:2px;
white-space:nowrap;
}
.orden::before{content:"";width:5px;height:5px;background:var(--rojo);border-radius:50%;flex:none}
.oscuro .orden{color:var(--gris-claro);border-color:var(--linea-osc)}
/* ============================================================
CABECERA
============================================================ */
.barra-aviso{
background:var(--antracita);color:var(--papel);
font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
padding:9px 0;border-bottom:1px solid var(--linea-osc);
}
.barra-aviso .env{display:flex;justify-content:space-between;align-items:center;gap:20px}
.barra-aviso a:hover{color:var(--rojo-vivo)}
.barra-aviso .oculta-movil{color:var(--gris-claro)}
/* La cabecera pasó de negra a blanca por una razón concreta: el
logotipo lleva la «r» y la «l» en negro, y sobre fondo oscuro
desaparecían las dos letras que forman la marca. Con fondo claro se
usa el archivo original tal cual, sin versión invertida. */
header.cab{
position:sticky;top:0;z-index:200;
background:var(--papel);
border-bottom:1px solid var(--linea-clara);
}
.cab .env{
height:var(--header-h);
display:flex;align-items:center;gap:36px;
}
/* marca */
.marca{display:flex;align-items:center;gap:11px;flex:none}
.marca-nodo{width:38px;height:38px;flex:none;display:block}
/* El nombre va con la letra del logotipo, no con la de la web.
El logotipo es marca registrada: su tipografía es una serif de trazo
uniforme con mucho tracking, y escribirlo en la Helvetica del resto
de la página lo convertía en otra marca distinta.
PENDIENTE: esto es una aproximación con tipografías del sistema. Para
que sea exacto hace falta el lockup horizontal del estudio —el que
lleva «red legal / abogados»— en PNG con fondo transparente o en SVG;
entonces se sustituye este texto por la imagen. */
.marca-txt{
/* ── LA TIPOGRAFÍA DEL RÓTULO ──
Estaba en Courier New, y ahí estaba el problema de fondo del
encabezado: el logotipo lleva una SERIF —basta mirar los remates
finos y el contraste de la «r» y la «l»— y al lado se ponía una
monoespaciada de máquina de escribir. Dos tipografías que no tienen
nada que ver, pegadas, en la pieza más visible de la web.
Ahora el rótulo va en serif, con el mismo peso ligero y la misma
separación generosa que tienen las letras del símbolo. La pila
empieza por las serifs de sistema de más calidad y termina en
Times, que está en todas partes.
PENDIENTE: sigue siendo una aproximación. Con el lockup horizontal
del estudio —«red legal / abogados» en PNG transparente o SVG—
esto se sustituye por la imagen y se acabó la aproximación. */
font-family:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',
Georgia,'Times New Roman',Times,serif;
font-weight:400;font-size:1.24rem;
letter-spacing:.30em;color:var(--tinta);line-height:1;
text-transform:lowercase;
}
/* ── «abogados», el segundo renglón de la marca ──
En el logotipo del estudio, bajo «red legal» hay un filete horizontal
y debajo «abogados», más pequeño y en la misma tipografía. El rótulo
compuesto se quedaba en el primer renglón y por eso no acababa de
parecerse. Hereda el color de .marca-txt en cada contexto —claro,
oscuro, pie—, así que no hay que repetir ninguna regla allí. */
.marca-txt .marca-sub{
/* Proporciones tomadas del logotipo del estudio: «abogados» mide un
35 % de la altura de «red legal» y ocupa un 54 % de su ancho, con el
filete cruzando de lado a lado por encima. El espaciado de letra se
ajusta para llegar a ese ancho: es lo que hace que las dos líneas se
lean como una sola pieza y no como dos rótulos apilados. */
display:block;
/* Las tres separaciones, medidas en el logotipo y expresadas sobre el
cuerpo de «red legal»: del renglón al filete, 0,26; del filete a
«abogados», 0,17. Como este bloque va a 0,35 de ese cuerpo, aquí se
escriben divididas por 0,35. */
margin-top:.74em;padding-top:.5em;
border-top:1px solid currentColor;
font-size:.35em;
letter-spacing:.62em;
text-indent:.62em; /* compensa el espaciado del último carácter */
text-align:center;
opacity:.9;
}
/* El espacio entre las dos palabras. Con un espacio normal quedaba más
estrecho que la separación entre letras y «redlegal» se leía casi
como una sola palabra; en el logotipo es claramente mayor. */
.marca-txt em{font-style:normal;letter-spacing:0;display:inline-block;width:.62em}
.marca-txt em{font-style:normal;color:var(--rojo)}
/* En las bandas oscuras la marca se invierte, no el logotipo. */
.oscuro .marca-txt,.panel-movil .marca-txt{color:var(--papel)}
.oscuro .marca-txt em,.panel-movil .marca-txt em{color:var(--rojo-vivo)}
/* ── LA FIRMA CUANDO ES EL LOCKUP DEL ESTUDIO ──
Una sola imagen con el símbolo, el rótulo, el filete y «abogados». No
se recompone nada: se escala por la altura y el ancho sale de la
proporción del archivo, para que las letras, los cuerpos y las
separaciones sean EXACTAMENTE los de la marca registrada. */
.marca-lockup{display:flex;align-items:center}
.marca-lockup .marca-img{
display:block;height:38px;width:auto;
/* Nada de filtros ni de mezclas: la versión clara ya viene con el
negro cambiado desde herramientas/lockup.py, y así el rojo del
cuadrado se conserva intacto. */
}
header.cab .marca-lockup .marca-img{height:44px}
.marca-lockup.pie-grande .marca-img{height:62px}
.pm-marca .marca-img{height:34px}
@media (max-width:620px){
.marca-lockup .marca-img,
header.cab .marca-lockup .marca-img{height:34px}
}
/* navegación */
nav.principal{display:flex;align-items:center;gap:4px;height:100%;flex:1}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-btn{
display:flex;align-items:center;gap:7px;
padding:9px 14px;border-radius:var(--r);
color:var(--tinta);font-size:.925rem;font-weight:500;letter-spacing:-.01em;
transition:background .16s ease,color .16s ease;
}
.nav-btn:hover,.nav-item.abierto .nav-btn{background:var(--papel-2)}
.nav-btn .caret{
width:9px;height:9px;flex:none;
border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:rotate(45deg) translate(-2px,-2px);
transition:transform .22s ease;opacity:.6;
}
.nav-item.abierto .nav-btn .caret{transform:rotate(-135deg) translate(-3px,-3px);opacity:1}
.cab-acciones{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}
.tel-cab{
display:flex;align-items:center;gap:8px;
color:var(--papel);font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.02em;
padding:8px 12px;border-radius:var(--r);
}
.tel-cab:hover{background:rgba(255,255,255,.07)}
/* ---------- mega desplegable ---------- */
.mega{
position:absolute;top:100%;left:50%;
transform:translateX(-50%) translateY(-10px);
width:min(1180px,calc(100vw - 40px));
background:var(--papel);
border:1px solid var(--papel-3);
border-top:2px solid var(--rojo);
box-shadow:var(--sombra);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .2s ease, transform .2s ease, visibility .2s;
max-height:calc(100vh - var(--header-h) - 24px);
overflow-y:auto;
}
.nav-item.abierto .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-enlace{
display:block;padding:9px 10px;margin-left:-10px;border-radius:var(--r);
transition:background .14s ease;
}
.mega-enlace:hover{background:var(--papel-2)}
.mega-enlace .t{
font-family:var(--display);font-weight:600;font-size:.985rem;letter-spacing:-.02em;
display:flex;align-items:center;gap:8px;
}
.mega-enlace .t::after{
content:"→";color:var(--rojo);opacity:0;transform:translateX(-4px);
transition:opacity .16s ease,transform .16s ease;font-family:var(--texto);
}
.mega-enlace:hover .t::after{opacity:1;transform:translateX(0)}
.mega-enlace .d{font-size:.795rem;color:var(--gris);line-height:1.4;margin-top:1px}
/* ---------- menú móvil ---------- */
.hamburguesa{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:var(--r)}
.hamburguesa:hover{background:var(--papel-2)}
.hamburguesa i{display:block;width:19px;height:1.6px;background:var(--tinta);position:relative;transition:.2s}
.hamburguesa i::before,.hamburguesa i::after{
content:"";position:absolute;left:0;width:19px;height:1.6px;background:var(--tinta);transition:.22s
}
/* Dentro del panel, que sí es oscuro, vuelve a ser clara. */
.panel-movil .hamburguesa i,
.panel-movil .hamburguesa i::before,
.panel-movil .hamburguesa i::after{background:var(--papel)}
.hamburguesa i::before{top:-6px}
.hamburguesa i::after{top:6px}
.hamburguesa.on i{background:transparent}
.hamburguesa.on i::before{top:0;transform:rotate(45deg)}
.hamburguesa.on i::after{top:0;transform:rotate(-45deg)}
.panel-movil{
position:fixed;inset:0 0 0 auto;top:0;width:min(430px,100%);
background:var(--antracita);color:var(--papel);z-index:300;
transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
overflow-y:auto;padding:22px 22px 60px;
}
.panel-movil.abierto{transform:translateX(0)}
.pm-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
/* El panel abría solo con el rótulo «red legal» y sin el símbolo: la
firma quedaba coja justo en la pantalla donde más se mira, que es el
menú desplegado. Va la variante clara, porque el panel es antracita. */
.pm-marca{display:flex;align-items:center;gap:11px}
.pm-marca .marca-nodo{width:34px;height:34px;flex:none}
.pm-cerrar{font-size:1.6rem;line-height:1;width:40px;height:40px;color:var(--papel)}
.pm-grupo{border-top:1px solid var(--linea-osc)}
/* La salida del desplegable de Servicios al listado completo. Va
separada por una línea y en rojo: es de otra naturaleza que las seis
áreas de encima, y mezclada con ellas parecía una séptima. */
.pm-todos{
display:flex;align-items:center;gap:8px;
margin-top:6px;padding-top:12px;
border-top:1px solid var(--linea-osc);
color:var(--rojo-vivo) !important;font-weight:600;
}
.pm-tit{
width:100%;display:flex;justify-content:space-between;align-items:center;
padding:16px 0;font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:-.02em;
}
.pm-tit .sig{color:var(--rojo-vivo);font-size:1.3rem;transition:transform .2s}
.pm-grupo.on .pm-tit .sig{transform:rotate(45deg)}
.pm-lista{display:none;padding-bottom:14px}
.pm-grupo.on .pm-lista{display:block}
.pm-lista a{display:block;padding:8px 0;font-size:.92rem;color:var(--gris-claro)}
.pm-lista a:hover{color:var(--rojo-vivo)}
.pm-pie{margin-top:30px;display:flex;flex-direction:column;gap:10px}
.velo{
position:fixed;inset:0;background:rgba(10,15,26,.55);z-index:290;
opacity:0;visibility:hidden;transition:.3s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.velo.on{opacity:1;visibility:visible}
/* ============================================================
PORTADA
============================================================ */
/* La portada era negra y el logotipo no se leía encima. Ahora va sobre
gris muy claro: el archivo original se usa sin retoques y el conjunto
gana en sobriedad, que es lo que pide un despacho de este registro. */
.portada{
position:relative;background:var(--papel-2);color:var(--tinta);
overflow:hidden;padding:clamp(64px,9vw,110px) 0 clamp(56px,7vw,84px);
}
.portada .env{position:relative;z-index:2}
.portada-rejilla{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);gap:56px;align-items:end}
.portada h1{margin-bottom:26px}
/* La palabra clave del titular iba subrayada con una barra roja que se
pintaba sola, a la manera de un rotulador. Fuera: en este registro
basta el color, y el trazo animado sobre el titular era lo primero
que rompía la sobriedad de la página. */
.portada h1 .marcado{color:var(--rojo)}
.portada-sub{font-size:clamp(1.02rem,1.4vw,1.14rem);color:var(--gris);max-width:56ch;margin-bottom:30px;line-height:1.7}
/* buscador */
.buscador{position:relative;max-width:660px}
.buscador-caja{
display:flex;align-items:center;gap:12px;
background:#fff;border-radius:var(--r);padding:7px 7px 7px 18px;
box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
}
.buscador-caja svg{flex:none;color:var(--gris)}
.buscador input{
flex:1;border:none;background:none;padding:13px 0;font-size:1rem;color:var(--tinta);min-width:0;
}
.buscador input::placeholder{color:#949494}
.buscador input:focus{outline:none}
.buscador .btn{padding:13px 22px}
.pistas{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.pistas .et{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-claro);margin-right:2px}
.pista{
padding:5px 11px;border:1px solid var(--linea-osc);border-radius:100px;
font-size:.79rem;color:#D8D8D8;transition:.16s;
}
.pista:hover{border-color:var(--rojo-vivo);color:#fff;background:rgba(216,35,42,.18)}
.sugerencias{
position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
background:#fff;border:1px solid var(--papel-3);box-shadow:var(--sombra);
max-height:340px;overflow-y:auto;display:none;
}
.sugerencias.on{display:block}
.sug{
display:flex;justify-content:space-between;align-items:center;gap:14px;
width:100%;text-align:left;padding:12px 18px;border-bottom:1px solid var(--papel-2);
}
.sug:hover,.sug:focus{background:var(--papel)}
.sug .n{font-weight:500;font-size:.925rem;color:var(--tinta)}
.sug .a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);text-align:right;flex:none}
.sug-vacio{padding:18px;font-size:.9rem;color:var(--gris)}
/* tarjeta lateral portada */
.ficha-oficina{
border:1px solid var(--linea-osc);background:rgba(255,255,255,.045);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:26px 26px 24px;
}
.ficha-oficina dl{display:grid;gap:16px;margin-top:18px}
.ficha-oficina dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:3px}
.ficha-oficina dd{font-size:.93rem;line-height:1.45}
.ficha-oficina dd a:hover{color:var(--rojo-vivo)}
/* cifras */
.cifras{border-top:1px solid var(--linea-osc);margin-top:clamp(46px,6vw,72px);padding-top:34px}
.cifras-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.cifra .n{font-family:var(--display);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.045em;line-height:1;color:#fff}
.cifra .n em{font-style:normal;color:var(--rojo-vivo)}
.cifra .d{font-size:.85rem;color:var(--gris-claro);margin-top:8px;max-width:24ch}
/* ============================================================
SECCIONES CLARAS
============================================================ */
section{padding:clamp(66px,8.5vw,112px) 0}
section.oscuro{background:var(--antracita);color:var(--papel)}
.sec-cab{max-width:800px;margin-bottom:clamp(38px,5vw,56px)}
.sec-cab h2{margin-bottom:18px}
/* ---------- doble vía ---------- */
.vias{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--linea-clara)}
.via{
padding:clamp(32px,4vw,48px);position:relative;
transition:background .25s ease;
display:flex;flex-direction:column;
}
.via+.via{border-left:1px solid var(--linea-clara)}
.via:hover{background:var(--papel-2)}
.via-num{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--rojo);margin-bottom:20px}
.via h3{font-size:clamp(1.6rem,2.6vw,2.15rem);margin-bottom:14px}
.via p{color:var(--gris);font-size:.98rem;margin-bottom:26px;max-width:46ch}
.via-lista{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-bottom:30px}
.via-lista li{font-size:.8rem;padding:5px 11px;background:rgba(10,15,26,.055);border-radius:100px;color:var(--tinta)}
.via .btn{align-self:flex-start;margin-top:auto}
/* ---------- mapa de áreas ---------- */
.filtro-barra{
display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
padding-bottom:20px;border-bottom:1px solid var(--linea-clara);margin-bottom:30px;
}
.pestanas{display:flex;gap:4px;background:var(--papel-2);padding:4px;border-radius:var(--r)}
.pestana{
padding:9px 18px;border-radius:2px;font-size:.885rem;font-weight:600;color:var(--gris);
transition:.18s;letter-spacing:-.01em;
}
.pestana.on{background:var(--tinta);color:var(--papel)}
.busca-mini{display:flex;align-items:center;gap:9px;border:1px solid var(--linea-clara);padding:9px 14px;border-radius:var(--r);min-width:260px}
.busca-mini input{border:none;background:none;flex:1;font-size:.885rem;min-width:0}
.busca-mini input:focus{outline:none}
.busca-mini svg{color:var(--gris);flex:none}
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--linea-clara)}
.area{border-bottom:1px solid var(--linea-clara);border-right:1px solid var(--linea-clara)}
.area:nth-child(even){border-right:none}
.area.oculta{display:none}
.area-cab{
width:100%;display:flex;align-items:flex-start;gap:18px;text-align:left;
padding:24px 26px 24px 0;transition:background .18s ease;
}
.area:nth-child(odd) .area-cab{padding-right:34px}
.area:nth-child(even) .area-cab{padding-left:26px;padding-right:8px}
.area-cab:hover{background:rgba(10,15,26,.028)}
.area-info{flex:1;min-width:0}
.area-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:7px}
.area-info h3{font-size:1.16rem}
.area-info p{font-size:.885rem;color:var(--gris);line-height:1.45}
.area-mas{
flex:none;width:34px;height:34px;border:1px solid var(--linea-clara);border-radius:50%;
display:flex;align-items:center;justify-content:center;margin-top:2px;
transition:.22s;font-size:1.15rem;line-height:1;color:var(--gris);
}
.area-cab:hover .area-mas{border-color:var(--rojo);color:var(--rojo)}
.area.on .area-mas{background:var(--rojo);border-color:var(--rojo);color:#fff;transform:rotate(45deg)}
.area-panel{display:none;padding:0 26px 28px 0}
.area:nth-child(even) .area-panel{padding-left:26px;padding-right:8px}
.area.on .area-panel{display:block}
.esp{
columns:2;column-gap:26px;
border-top:1px dashed var(--linea-clara);padding-top:18px;
}
.esp li{
list-style:none;break-inside:avoid;
font-size:.86rem;padding:5px 0 5px 16px;position:relative;color:#3A3A3A;
}
.esp li::before{
content:"";position:absolute;left:0;top:.75em;width:6px;height:1px;background:var(--rojo);
}
.esp li mark{background:rgba(216,35,42,.16);color:inherit;padding:0 2px}
.area-pie{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.sin-resultados{padding:50px 0;text-align:center;color:var(--gris);display:none}
.sin-resultados.on{display:block}
/* ---------- método ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:p}
.paso{padding:32px 26px 34px 0;border-top:2px solid var(--linea-osc);position:relative}
.paso+.paso{padding-left:26px}
.paso::before{
counter-increment:p;content:counter(p,decimal-leading-zero);
font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--rojo-vivo);
display:block;margin-bottom:18px;
}
.paso.vivo{border-top-color:var(--rojo)}
.paso h3{font-size:1.14rem;margin-bottom:10px}
.paso p{font-size:.9rem;color:var(--gris-claro);line-height:1.55;max-width:32ch}
/* ---------- cobertura ---------- */
.cobertura{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,68px);align-items:center}
.mapa-caja{position:relative;border:1px solid var(--linea-clara);background:#fff;padding:26px;overflow:hidden}
.mapa-caja svg{width:100%;height:auto}
.mapa-pie{
display:flex;justify-content:space-between;gap:16px;align-items:baseline;
margin-top:18px;padding-top:16px;border-top:1px solid var(--linea-clara);
font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);
}
.oficina{border-left:2px solid var(--rojo);padding-left:24px;margin-top:28px}
.oficina h3{font-size:1.2rem;margin-bottom:12px}
.oficina p{font-size:.95rem;color:var(--gris);line-height:1.7}
.oficina a{font-weight:600;color:var(--rojo)}
/* ---------- razones ---------- */
.razones{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea-clara);border:1px solid var(--linea-clara)}
.razon{background:var(--papel);padding:32px 28px 34px;transition:background .2s}
.razon:hover{background:#fff}
.razon .ic{color:var(--rojo);margin-bottom:20px}
.razon h3{font-size:1.08rem;margin-bottom:9px}
.razon p{font-size:.895rem;color:var(--gris);line-height:1.55}
/* ---------- opiniones ---------- */
.cinta{overflow:hidden;position:relative;padding:6px 0}
.cinta::before,.cinta::after{
content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.cinta::before{left:0;background:linear-gradient(90deg,var(--tinta),transparent)}
.cinta::after{right:0;background:linear-gradient(270deg,var(--tinta),transparent)}
.cinta-pista{display:flex;gap:20px;width:max-content;animation:desfile 46s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
.opinion{
width:340px;flex:none;border:1px solid var(--linea-osc);padding:26px 24px;
background:rgba(255,255,255,.03);
}
.estrellas{display:flex;gap:3px;margin-bottom:14px;color:var(--rojo-vivo)}
.opinion p{font-size:.925rem;line-height:1.6;color:#E0E0E0;margin-bottom:18px}
.opinion .quien{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-claro)}
/* ---------- actualidad ---------- */
.notas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.nota-art{border-top:1px solid var(--linea-clara);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.nota-meta{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}
.nota-meta b{color:var(--rojo);font-weight:500}
.nota-art h3{font-size:1.14rem;line-height:1.2;transition:color .18s}
.nota-art:hover h3{color:var(--rojo)}
.nota-art p{font-size:.88rem;color:var(--gris);line-height:1.5}
.nota-art .leer{margin-top:auto;padding-top:12px;font-size:.82rem;font-weight:600;color:var(--tinta);display:flex;align-items:center;gap:7px}
/* ---------- preguntas ---------- */
/* ── EL BUSCADOR DE PREGUNTAS ──
Mismo campo que los del formulario de cita, para que la web no tenga
dos maneras de dibujar un campo de texto; lo que cambia es el tamaño,
porque aquí es lo primero que se ve de la página. */
.busca-faq{max-width:900px;margin:0 auto clamp(26px,3.5vw,40px)}
.busca-faq input[type="search"]{
width:100%;background:var(--papel);border:1px solid var(--papel-3);
padding:17px 18px;border-radius:var(--r);color:var(--tinta);font-size:1.04rem;
transition:border-color .18s,box-shadow .18s;appearance:none;
}
.busca-faq input::placeholder{color:var(--gris)}
.busca-faq input:focus{
outline:none;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(162,51,50,.14);
}
.busca-faq-ayuda{margin-top:10px;font-size:.85rem;color:var(--gris)}
/* La respuesta corporativa. Va en caja, con el filete rojo de la marca
al costado, para que se distinga de las preguntas de abajo: no es una
más de la lista, es lo que contestamos a lo que no está en ella. */
.faq-respuesta{
max-width:900px;margin:0 auto clamp(28px,3.5vw,42px);
background:var(--papel);border:1px solid var(--linea-clara);
border-left:3px solid var(--rojo);
padding:clamp(22px,3vw,32px);
}
.faq-respuesta p{color:var(--gris);font-size:.97rem;line-height:1.72}
.faq-respuesta p+p{margin-top:14px}
.faq-respuesta a{color:var(--rojo);font-weight:600}
.faq-resp-rot{
font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--rojo)!important;margin-bottom:12px;
}
.faq-resp-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.faq-cuenta{
max-width:900px;margin:0 auto 16px;font-size:.82rem;color:var(--gris);
letter-spacing:.02em;
}
/* ── LOS GRUPOS ──
Cien preguntas seguidas no se leen. Agrupadas por área, cada bloque
es una lista corta con su rótulo y su recuento, y se puede ir
directamente a la parte que interesa. */
.faq-grupo+.faq-grupo{margin-top:clamp(38px,5vw,58px)}
.faq-grupo-tit{
max-width:900px;margin:0 auto 6px;
font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
color:var(--rojo);
}
.faq-grupo-tit span{
color:var(--gris);font-weight:500;letter-spacing:.08em;margin-left:8px;
}
.faq-grupo-tit span::before{content:"· "}
/* Columna flexible: es lo que permite al buscador ordenar por
relevancia con «order», sin mover ningún nodo de sitio. */
.faq{
max-width:900px;margin-inline:auto;
display:flex;flex-direction:column;
}
.faq-nada{max-width:900px;margin:22px auto 0;font-size:.9rem;color:var(--gris)}
.faq-rotulo{
max-width:900px;margin:0 auto 10px;
font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
color:var(--rojo);
}
/* El aviso de que hay más. Va después de la lista y no antes: primero
se enseña lo que hay, y solo entonces se dice que hay más. */
.faq-resto{
max-width:900px;margin:24px auto 0;font-size:.88rem;color:var(--gris);
padding-left:16px;border-left:2px solid var(--linea-clara);
}
.faq-item{border-bottom:1px solid var(--linea-clara)}
.faq-item:first-child{border-top:1px solid var(--linea-clara)}
.faq-btn{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;text-align:left;padding:24px 0}
.faq-btn h3{font-size:1.06rem;letter-spacing:-.02em}
.faq-btn .sig{flex:none;color:var(--rojo);font-size:1.3rem;line-height:1;transition:transform .24s}
.faq-item.on .faq-btn .sig{transform:rotate(45deg)}
.faq-resp{display:none;padding-bottom:26px;max-width:72ch}
.faq-resp p{
color:var(--gris);font-size:.955rem;
text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;
}
.faq-resp p+p{margin-top:12px}
.faq-item.on .faq-resp{display:block}
/* ---------- contacto ---------- */
.contacto-rejilla{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,64px)}
.formulario{background:rgba(255,255,255,.035);border:1px solid var(--linea-osc);padding:clamp(26px,3.4vw,40px)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo.ancho{grid-column:1/-1}
/* ── Campos ──
Van por defecto en versión CLARA. Antes eran blancos sobre fondo
translúcido porque el único formulario del prototipo estaba sobre una
banda oscura; al aparecer formularios sobre papel —equipo, talento,
las dos ventanas— el texto quedaba blanco sobre blanco y los campos
se veían vacíos. La variante oscura se aplica dentro de .oscuro. */
.campo label{
font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--gris);margin-bottom:5px;display:block;
}
.campo input,.campo select,.campo textarea{
background:var(--papel);border:1px solid var(--papel-3);
padding:13px 14px;border-radius:var(--r);color:var(--tinta);font-size:.94rem;
transition:border-color .18s,box-shadow .18s;width:100%;
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
outline:none;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(162,51,50,.14);
}
.campo select{appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.campo select:disabled{background-color:var(--papel-2);color:var(--gris);cursor:not-allowed}
.campo select option{background:var(--papel);color:var(--tinta)}
/* Sobre banda oscura, los mismos campos invertidos. */
.oscuro .campo label{color:var(--gris-claro)}
.oscuro .campo input,.oscuro .campo select,.oscuro .campo textarea{
background:rgba(255,255,255,.06);border-color:var(--linea-osc);color:var(--papel);
}
.oscuro .campo input::placeholder,.oscuro .campo textarea::placeholder{color:#9A9A9A}
.oscuro .campo input:focus,.oscuro .campo select:focus,.oscuro .campo textarea:focus{
border-color:var(--rojo-vivo);box-shadow:0 0 0 3px rgba(196,88,90,.2);
}
.oscuro .campo select{
background-image:url("data:image/svg+xml;utf8,");
}
.oscuro .campo select option{background:var(--antracita-2);color:var(--papel)}
.campo textarea{resize:vertical;min-height:110px}
.rgpd{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:var(--gris);line-height:1.5}
.oscuro .rgpd{color:var(--gris-claro)}
.rgpd input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--rojo)}
.rgpd a{color:var(--rojo);font-weight:600}
.enviar{grid-column:1/-1;margin-top:4px}
.enviar .btn{width:100%}
.aviso-form{grid-column:1/-1;display:none;border-left:3px solid var(--rojo);padding:12px 15px;font-size:.88rem;background:var(--papel-2);color:var(--tinta)}
.oscuro .aviso-form{background:rgba(162,51,50,.16);color:var(--papel)}
.aviso-form.on{display:block}
.contacto-lado h2{margin-bottom:20px}
.canales{list-style:none;margin-top:30px;display:flex;flex-direction:column}
.canales li{border-top:1px solid var(--linea-osc);padding:18px 0}
.canales .et{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:5px}
.canales .v{font-size:1.02rem;font-weight:500}
.canales .v:hover{color:var(--rojo-vivo)}
/* ---------- pie ---------- */
footer{background:var(--tinta);color:var(--papel);border-top:1px solid var(--linea-osc);padding:clamp(52px,6vw,76px) 0 30px}
/* Dos columnas desde que se quitó el bloque «La firma»: sus cuatro
enlaces ya estaban los cuatro en la cabecera, y repetirlos abajo solo
alargaba el pie. La rejilla estaba declarada a cuatro columnas y, con
dos hijos, dejaba media anchura vacía a la derecha. */
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,6vw,90px);padding-bottom:44px;border-bottom:1px solid var(--linea-osc)}
.pie-col h4{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:18px}
.pie-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.pie-col a{font-size:.9rem;color:#D8D8D8}
.pie-col a:hover{color:var(--rojo-vivo)}
.pie-marca p{font-size:.9rem;color:var(--gris-claro);max-width:34ch;margin-top:16px;line-height:1.6}
.pie-dir{font-size:.9rem;color:#D8D8D8;line-height:1.7;font-style:normal}
.pie-abajo{display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:space-between;align-items:center;padding-top:26px}
.pie-legal{display:flex;flex-wrap:wrap;gap:20px}
.pie-legal a{font-size:.79rem;color:var(--gris-claro)}
.pie-legal a:hover{color:var(--papel)}
.pie-copy{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--gris)}
/* barra fija móvil */
.barra-movil{
display:none;position:fixed;left:0;right:0;bottom:0;z-index:180;
background:var(--tinta);border-top:1px solid var(--linea-osc);
padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;
}
.barra-movil .btn{flex:1;padding:13px 10px;font-size:.88rem}
/* apariciones */
/* Solo se esconde para animar si hay JavaScript que pueda volver a
mostrarlo. Sin esta guarda, un fallo de red al cargar web.js dejaba
la lista de trámites invisible para siempre —y también para quien
rastrea la web sin ejecutar scripts. */
.aparece{transition:opacity .7s cubic-bezier(.2,.6,.3,1),transform .7s cubic-bezier(.2,.6,.3,1)}
.js .aparece{opacity:0;transform:translateY(18px)}
.js .aparece.visible{opacity:1;transform:none}
/* ============================================================
ADAPTATIVO
============================================================ */
@media (max-width:1080px){
.mega-lateral{display:none}
.cifras-rejilla{grid-template-columns:repeat(2,1fr);gap:26px}
.pasos{grid-template-columns:repeat(2,1fr)}
.paso+.paso{padding-left:0}
.paso:nth-child(even){padding-left:26px}
.notas{grid-template-columns:1fr;gap:0}
.nota-art{padding:20px 0}
.razones{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
:root{--header-h:66px}
.tel-cab,.cab-acciones .btn{display:none} /* la nav ya la oculta el corte de 1040 */
.hamburguesa{display:flex}
.cab-acciones{margin-left:auto}
.portada-rejilla{grid-template-columns:1fr;gap:40px;align-items:start}
.ficha-oficina{max-width:520px}
.vias{grid-template-columns:1fr}
.via+.via{border-left:none;border-top:1px solid var(--linea-clara)}
.areas{grid-template-columns:1fr}
.area{border-right:none}
.area:nth-child(even) .area-cab{padding-left:0;padding-right:0}
.area:nth-child(odd) .area-cab{padding-right:0}
.area:nth-child(even) .area-panel{padding-left:0}
.area-panel{padding-right:0}
.cobertura{grid-template-columns:1fr}
.contacto-rejilla{grid-template-columns:1fr}
.pie-rejilla{grid-template-columns:1fr 1fr;gap:32px}
.barra-movil{display:flex}
body{padding-bottom:74px}
}
@media (max-width:620px){
.barra-aviso .oculta-movil{display:none}
.barra-aviso .env{justify-content:center}
.buscador-caja{flex-wrap:wrap;padding:12px}
.buscador input{width:100%;padding:6px 0 12px}
.buscador .btn{width:100%}
.cifras-rejilla{grid-template-columns:1fr 1fr;gap:22px}
.razones{grid-template-columns:1fr}
.pasos{grid-template-columns:1fr}
.paso:nth-child(even){padding-left:0}
.esp{columns:1}
.campos{grid-template-columns:1fr}
.pie-rejilla{grid-template-columns:1fr}
.filtro-barra{flex-direction:column;align-items:stretch}
.busca-mini{min-width:0}
.pestanas{justify-content:center}
.pestana{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
html{scroll-behavior:auto}
.js .aparece{opacity:1;transform:none}
}
/* ============================================================
PÁGINAS DE ÁREA Y DE TRÁMITE
El prototipo era una sola página; esto es lo que hace falta
para las que cuelgan de ella.
============================================================ */
.estrecho{max-width:760px}
/* ── Rastro de navegación ──
Sobre fondo papel, discreto. Además de situar al visitante, es lo
que hace que en Google salga «Inicio › Para ti › Familia» en lugar
de la dirección pelada. */
.migas{
border-bottom:1px solid var(--linea-clara);
padding:14px 0;font-size:.8rem;color:var(--gris);
}
.migas .env{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.migas a{transition:color .18s}
.migas a:hover{color:var(--rojo)}
.migas span[aria-current]{color:var(--tinta);font-weight:600}
/* ── Cabecera de área ── */
.cabecera-area{padding:clamp(40px,5.5vw,72px) 0 clamp(34px,4.5vw,56px)}
.cabecera-area h1{margin:14px 0 20px}
.cabecera-area .plomo{max-width:68ch}
.cabecera-area .plomo p+p{margin-top:18px}
.cabecera-tramite{padding-bottom:clamp(22px,3vw,34px)}
.cabecera-tramite .entrada a{transition:opacity .18s}
.cabecera-tramite .entrada a:hover{opacity:.7}
.cabecera-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* ── Rejilla de trámites ──
Tres columnas en escritorio y una en móvil. Los que tienen página
propia van en negrita: se ve de un vistazo dónde hay más que leer.
El resto lleva al bloque con su ancla, más abajo en la misma página. */
.rejilla-tramites{
list-style:none;display:grid;gap:2px 26px;
grid-template-columns:repeat(3,1fr);
border-top:1px dashed var(--linea-clara);padding-top:20px;
}
.rejilla-tramites li{position:relative;padding:7px 0 7px 16px}
.rejilla-tramites li::before{
content:"";position:absolute;left:0;top:1.02em;width:6px;height:1px;background:var(--rojo);
}
.rejilla-tramites a{
font-size:.93rem;color:#3A3A3A;
transition:color .16s;
}
.rejilla-tramites a:hover{color:var(--rojo)}
.rejilla-tramites .con-pagina a{color:var(--tinta);font-weight:600}
/* Los trámites del acordeón de la portada también son enlaces ahora. */
.esp li a{color:inherit;transition:color .16s}
.esp li a:hover{color:var(--rojo)}
/* ── Bloque de un trámite sin página propia ──
Es el destino del ancla. Sin esto, pinchar en la lista no llevaba a
ninguna parte visible. */
.sec-papel{background:var(--papel-2)}
.tramite{
padding:26px 0;border-top:1px solid var(--linea-clara);
display:grid;gap:8px;scroll-margin-top:110px;
}
.tramite:first-child{border-top:none}
.tramite p{color:var(--gris);font-size:.98rem;max-width:70ch}
.tramite-cta{
font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--rojo);display:inline-flex;align-items:center;gap:8px;
}
.tramite-cta:hover .flecha{transform:translateX(3px)}
.tramite-cta .flecha{transition:transform .18s}
/* ── Texto largo de una página de trámite ──
Medida corta a propósito: son textos que se leen enteros, y una
línea de 100 caracteres se abandona a la mitad. */
/* El cuerpo arrancaba pegado al filete que cierra el título: sin aire,
el texto parecía continuación de la cabecera en lugar de un bloque
nuevo. */
.texto-largo{padding-top:clamp(34px,4.5vw,58px)}
/* ── TEXTO JUSTIFICADO ──
En columna estrecha y con textos largos, la bandera derecha deja
entradas muy desiguales y el bloque se lee sucio. Justificado exige
partición de palabras: sin ella, el navegador estira los espacios y
abre ríos blancos. El documento declara lang="es", así que la
partición usa las reglas del castellano. */
.texto-largo p{
margin-bottom:22px;font-size:1.05rem;line-height:1.78;color:#2C2C2C;
text-align:justify;text-justify:inter-word;
-webkit-hyphens:auto;hyphens:auto;
hyphenate-limit-chars:6 3 3; /* no parte palabras cortas */
}
.texto-largo p:last-child{margin-bottom:0}
.texto-largo h2{margin:46px 0 18px}
.texto-largo h3{margin:34px 0 14px;font-size:1.12rem}
.texto-largo strong{color:var(--tinta)}
.texto-largo a{color:var(--rojo);font-weight:600}
.lista-punto,.lista-num{margin:0 0 26px 0;padding-left:0;list-style:none}
.lista-punto li,.lista-num li{position:relative;padding:9px 0 9px 26px;color:#2C2C2C;line-height:1.7}
.lista-punto li::before{
content:"";position:absolute;left:2px;top:1.05em;width:9px;height:1px;background:var(--rojo);
}
.lista-num{counter-reset:n}
.lista-num li::before{
counter-increment:n;content:counter(n,decimal-leading-zero);
position:absolute;left:0;top:.62em;
font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--rojo);
}
/* ── Añadidos al pie ── */
.pie-mas{font-size:.84rem;color:var(--rojo-vivo);transition:opacity .18s}
.pie-mas:hover{opacity:.75}
.pie-horario{margin-top:10px;font-size:.8rem;color:var(--gris-claro)}
@media (max-width:900px){
.rejilla-tramites{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
.rejilla-tramites{grid-template-columns:1fr}
.cabecera-acciones .btn{width:100%}
}
/* ============================================================
MAPA DE ESPAÑA
Lo genera herramientas/mapa.py con coordenadas geográficas
reales. Aquí solo se le da color y movimiento.
============================================================ */
.mapa-esp{width:100%;height:auto;display:block}
.mapa-esp .tierra path,
.mapa-esp .tierra ellipse{fill:var(--papel-2);stroke:var(--papel-3);stroke-width:1.4}
.mapa-esp .recuadro{fill:none;stroke:var(--papel-3);stroke-width:1;stroke-dasharray:5 5}
.mapa-esp .hilos line{stroke:var(--rojo);stroke-width:.7;opacity:.22}
.mapa-esp .capitales circle{fill:var(--tinta);opacity:.55}
.mapa-esp .sede{fill:var(--rojo)}
.mapa-esp .sede-halo{fill:var(--rojo);opacity:.14}
.mapa-esp .sede-txt{
fill:var(--tinta);font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.13em;
}
.mapa-esp .sede-pie,
.mapa-esp .plaza{fill:var(--gris);font-family:var(--texto);font-size:13px}
/* Sobre el fondo negro de la portada, la misma pieza al revés. */
.oscuro .mapa-esp .tierra path,
.oscuro .mapa-esp .tierra ellipse{fill:#1B1B1B;stroke:#3A3A3A}
.oscuro .mapa-esp .recuadro{stroke:#333}
.oscuro .mapa-esp .hilos line{stroke:var(--rojo-vivo);opacity:.30}
.oscuro .mapa-esp .capitales circle{fill:var(--papel);opacity:.72}
.oscuro .mapa-esp .sede{fill:var(--rojo-vivo)}
.oscuro .mapa-esp .sede-halo{fill:var(--rojo-vivo);opacity:.20}
.oscuro .mapa-esp .sede-txt{fill:var(--papel)}
.oscuro .mapa-esp .sede-pie,
.oscuro .mapa-esp .plaza{fill:var(--gris-claro)}
/* ── Entrada del mapa ──
Los hilos se trazan desde Barcelona hacia fuera y los puntos se
encienden después. Es la única animación de la portada y dura poco
más de dos segundos: pasado ese punto, deja de ser impactante y
empieza a estorbar a quien ha venido con un problema.
Va en CSS y no en JavaScript para que no dependa de que un script
llegue a cargarse. */
@keyframes trazar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes encender{from{opacity:0;transform:scale(.4)}to{opacity:.72;transform:none}}
@keyframes latir{0%,100%{opacity:.20;r:26}50%{opacity:.07;r:34}}
.js .mapa-esp .hilos line{
stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;
animation:trazar 1.5s cubic-bezier(.3,.7,.3,1) forwards;
}
.js .mapa-esp .capitales circle{
opacity:0;transform-box:fill-box;transform-origin:center;
animation:encender .5s ease-out forwards;animation-delay:1.05s;
}
.js .mapa-esp .sede-halo{animation:latir 3.4s ease-in-out infinite 1.8s}
/* El retardo se escalona en unas pocas franjas: cincuenta reglas
distintas pesarían más que el efecto que producen. */
.js .mapa-esp .hilos line:nth-child(3n+2){animation-delay:.18s}
.js .mapa-esp .hilos line:nth-child(3n+3){animation-delay:.36s}
.js .mapa-esp .capitales circle:nth-child(3n+2){animation-delay:1.2s}
.js .mapa-esp .capitales circle:nth-child(3n+3){animation-delay:1.35s}
@media (prefers-reduced-motion:reduce){
.js .mapa-esp .hilos line,
.js .mapa-esp .capitales circle{animation:none;stroke-dashoffset:0;opacity:.72}
.js .mapa-esp .hilos line{opacity:.30}
.js .mapa-esp .sede-halo{animation:none}
}
@media (max-width:900px){
}
/* ============================================================
PORTADA
Tres cosas y ninguna más: quiénes somos, qué ofrecemos y de
dónde venimos. Antes eran diez secciones y se leían dos.
============================================================ */
.portada{text-align:left}
.portada .env{position:relative;z-index:2;max-width:920px}
.portada h1{margin-bottom:22px}
/* El fondo —vídeo o mapa— se apaga hacia el texto con una máscara, en
vez de taparlo con una capa de color. Así conserva su propio tono. */
.portada-fondo{
position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
mask-image:linear-gradient(95deg,transparent 2%,#000 55%);
-webkit-mask-image:linear-gradient(95deg,transparent 2%,#000 55%);
}
.portada-fondo video{width:100%;height:100%;object-fit:cover;display:block}
.portada-mapa{
display:flex;align-items:center;justify-content:flex-end;
opacity:.5;padding-right:2%;
}
.portada-mapa .mapa-esp{width:min(64%,720px);height:auto}
.portada-marca{margin-bottom:30px}
.portada-marca img{width:104px;height:auto;display:block}
/* Cuando hay vídeo, el texto va sobre imagen: se invierte el color y se
le pone un velo, que ahí sí hace falta para poder leer. Eso lo hacen
las reglas .portada.con-video, más abajo.
Aquí había antes un bloque equivalente escrito con :has(video). Se ha
quitado por dos razones: estaba PISADO por las de .con-video, que van
después y ganan, así que no pintaba nada; y :has() no llegó a Firefox
hasta finales de 2023, de modo que la web dependía de una función
reciente para algo que ya resolvía una clase puesta por el generador.
La clase la escribe el servidor y funciona en cualquier navegador. */
.portada.con-video .portada-fondo{mask-image:none;-webkit-mask-image:none;opacity:.55}
/* ── Quiénes somos ── */
.sobre{padding-bottom:clamp(48px,6vw,72px)}
.sobre-texto{padding-top:14px}
.sobre-texto p{font-size:1.1rem}
/* ── Oficina principal ── */
.oficina-fila{
display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;
}
.oficina-dir{margin-top:14px;font-style:normal;color:var(--gris);line-height:1.8}
.oficina-contacto{display:grid;gap:10px;align-content:start;padding-top:38px}
.oficina-contacto a{color:var(--tinta);transition:color .16s}
.oficina-contacto a:hover{color:var(--rojo)}
.oficina-tel{
font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);
font-weight:700;letter-spacing:-.03em;
}
/* ── Dónde trabajamos ── */
.mapa-marco{background:var(--papel);border:1px solid var(--linea-clara);padding:clamp(18px,3vw,38px)}
@media (max-width:820px){
.portada-mapa{
justify-content:center;opacity:.16;
mask-image:none;-webkit-mask-image:none;
}
.portada-mapa .mapa-esp{width:130%}
.portada-marca img{width:78px}
.oficina-fila{grid-template-columns:1fr;gap:22px}
.oficina-contacto{padding-top:0}
}
/* ============================================================
BARRAS QUE SE RECOGEN AL BAJAR
============================================================ */
.barra-aviso,header.cab,.barra-movil{transition:transform .3s ease}
.barra-aviso.oculta{transform:translateY(-100%)}
header.cab.oculta{transform:translateY(-100%)}
.barra-movil.oculta{transform:translateY(100%)}
/* ============================================================
AVISO DE PROTECCIÓN DE DATOS
Abajo y en una franja, no en el centro tapando la página: es un
aviso, no una barrera. Rechazar cuesta lo mismo que aceptar.
============================================================ */
.rgpd-velo{
position:fixed;left:0;right:0;bottom:0;z-index:600;
background:var(--antracita);color:var(--papel);
border-top:2px solid var(--rojo);
transform:translateY(100%);transition:transform .35s cubic-bezier(.3,.8,.3,1);
max-height:88vh;overflow-y:auto;
}
.rgpd-velo.on{transform:none}
.rgpd-caja{
max-width:var(--ancho);margin-inline:auto;padding:22px 24px 24px;
display:grid;gap:16px;
}
.rgpd-texto{font-size:.95rem;color:#DCDCDC;max-width:80ch}
.rgpd-texto a{color:var(--rojo-vivo);font-weight:600}
.rgpd-ajustes{display:grid;gap:2px;border-top:1px solid var(--linea-osc);padding-top:14px}
.rgpd-grupo{
display:flex;gap:22px;align-items:flex-start;justify-content:space-between;
padding:12px 0;border-bottom:1px solid var(--linea-osc);
}
.rgpd-grupo-txt b{display:block;font-size:.92rem;margin-bottom:3px}
.rgpd-grupo-txt span{font-size:.83rem;color:var(--gris-claro);max-width:70ch;display:block}
.rgpd-int{display:flex;align-items:center;gap:9px;flex:none;font-size:.78rem}
.rgpd-int input{width:18px;height:18px;accent-color:var(--rojo-vivo)}
.rgpd-fijo{color:var(--gris-claro)}
.rgpd-si{color:var(--rojo-vivo);font-weight:600}
.rgpd-botones{display:flex;gap:10px;flex-wrap:wrap}
.rgpd-botones .btn{padding:11px 20px;font-size:.9rem}
.rgpd-velo .btn-linea{border-color:rgba(255,255,255,.45);color:#fff}
.rgpd-velo .btn-linea:hover{background:#fff;color:var(--tinta)}
/* ============================================================
VENTANA DE CONSULTA
============================================================ */
.modal-velo{
position:fixed;inset:0;z-index:700;
background:rgba(17,17,17,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
display:grid;place-items:center;padding:20px;
opacity:0;transition:opacity .25s ease;overflow-y:auto;
}
.modal-velo.on{opacity:1}
.modal-caja{
position:relative;background:var(--papel);
width:min(600px,100%);padding:clamp(26px,4vw,40px);
box-shadow:var(--sombra);
transform:translateY(14px);transition:transform .28s cubic-bezier(.3,.8,.3,1);
}
.modal-velo.on .modal-caja{transform:none}
.modal-cerrar{
position:absolute;top:10px;right:12px;width:40px;height:40px;
font-size:1.7rem;line-height:1;color:var(--gris);border-radius:var(--r);
}
.modal-cerrar:hover{background:var(--papel-2);color:var(--tinta)}
.consulta-paso{display:grid;gap:18px}
.consulta-paso h2{margin-bottom:2px}
.campo-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo-nota{font-size:.79rem;color:var(--gris);line-height:1.5;margin-top:6px}
.consulta-pie{display:flex;gap:10px;margin-top:4px}
.consulta-pie .btn{flex:1}
.rgpd-acepto{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--gris);line-height:1.5}
.rgpd-acepto input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--rojo)}
.rgpd-acepto a{color:var(--rojo);font-weight:600}
.consulta-fin{text-align:center;padding:14px 0}
.consulta-fin p{color:var(--gris);margin-bottom:8px}
/* ============================================================
VÍDEO DE LA PORTADA
============================================================ */
.portada-video{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
/* La transición del vídeo se define abajo, en el bloque del aterrizaje. */
.portada-video video,.portada-video img{
width:100%;height:100%;object-fit:cover;display:block;
}
/* Velo uniforme. El degradado diagonal anterior dejaba una zona sin
oscurecer y el vídeo parecía un recuadro superpuesto. */
/* ── EL NEGRO DEL VÍDEO, EL MISMO DE LA MARCA ──
El velo era rgba(26,26,26), un negro NEUTRO, y la cabecera de encima
es #33312E, un negro cálido que tira a marrón. Apilados, la unión se
veía: el vídeo salía grisáceo y frío contra una cabecera terrosa, y
parecían dos piezas de webs distintas.
Ahora los dos son la misma familia. Es un cambio de tres números que
se nota más que muchos rediseños. */
.portada-video::after{
content:"";position:absolute;inset:0;
/* ── UN SOLO VELO, PLANO, AL 45 % ──
Y nada más encima. Aquí hubo un degradado que oscurecía la mitad
izquierda hasta el 82 % para que el rojo de la marca se leyera sobre
el titular. Cumplía su función, pero el efecto era el que se quería
evitar: el vídeo salía apagado justo por donde el visitante entra a
mirarlo. Fuera.
El plano de la ciudad manda. Lo que necesite el texto para leerse se
resuelve en el texto —con la sombra de .portada.con-video h1— y no
tapando la imagen. */
background:rgba(51,49,46,.45);
}
/* La trama de marca continúa dentro del vídeo y se apaga sola en los
primeros trescientos píxeles. Sin esto quedaba el otro borde: el
dibujo de la cabecera se cortaba en seco justo en la unión, y aunque
el color ya casara, el ojo veía dónde acababa la textura. */
.portada-video::before{
content:"";position:absolute;inset:0;z-index:1;
/* ── LA UNIÓN CON LA CABECERA ──
El degradado arranca OPACO, en el color exacto del membrete, y se
abre a lo largo de trescientos píxeles con diez paradas.
Se probó a arrancarlo translúcido, al 78 %, y ahí estaba el corte
que se veía: la cabecera es opaca al 100 % y el primer píxel del
vídeo entraba al 78, de modo que en la línea de unión había un
escalón de tono del 22 %. No es un degradado corto: es un escalón.
Con las diez paradas no hay ningún salto entre dos píxeles
contiguos y el ojo no encuentra dónde acaba uno y empieza el otro.
La textura se resuelve aparte: la trama de la cabecera continúa
dentro del vídeo y se apaga con su propia máscara. Ver
«.portada.con-video::after» más abajo. */
background:linear-gradient(180deg,
rgba(51,49,46,1) 0px,
rgba(51,49,46,.97) 16px,
rgba(51,49,46,.90) 38px,
rgba(51,49,46,.80) 64px,
rgba(51,49,46,.68) 94px,
rgba(51,49,46,.55) 128px,
rgba(51,49,46,.42) 166px,
rgba(51,49,46,.29) 208px,
rgba(51,49,46,.18) 252px,
rgba(51,49,46,.09) 296px,
rgba(51,49,46,0) 340px,
rgba(51,49,46,0) 62%,
rgba(51,49,46,.68) 100%);
}
/* ── LA LÍNEA FINA DE LA UNIÓN CON LA CABECERA ──
Dos causas, y hacían falta las dos para verla.
La primera: el fondo de esta sección era --antracita-2 (#282623) y el
de la cabecera es --antracita (#33312E). Once puntos de diferencia.
La segunda: la unión no cae en un píxel entero. Con la barra de aviso
encima, la cabecera termina en y=119,406, y el navegador tiene que
repartir ese 0,406 de píxel entre los dos colores. Al mezclarlos
aparecía una raya más oscura de medio píxel cruzando la pantalla, que
es exactamente lo que se veía al arrancar el vídeo.
Se corrigen las dos: mismo tono que la cabecera, y la sección sube un
píxel para meterse DEBAJO de ella. Como la cabecera va por encima en
el orden de pintado, ese píxel de solape no se ve, y ya no hay ningún
borde que redondear. */
/* ── LA TRAMA SIGUE DENTRO DEL VÍDEO ──
Los cuadrados son marca, así que no se quitan de la cabecera: se
CONTINÚAN hacia abajo y se apagan poco a poco, igual que el color.
Va en una capa propia de la sección y no en el pseudoelemento del
degradado, porque allí compartirían máscara y apagar la trama
apagaría también el velo.
Y va con la fase corregida. Si el patrón vuelve a empezar aquí, la
retícula da un salto justo en la línea de unión, que es lo que se
quería evitar. Desplazándolo hacia arriba lo que miden la banda de
aviso y la cabecera juntas, los cuadrados de la portada caen en la
misma cuadrícula que los de encima y la textura cruza la unión sin
que se note dónde. */
:root{ --alto-aviso: 35.4px; } /* 9px de relleno arriba y abajo + la línea */
.portada.con-video::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:var(--trama);
/* Se cuelga de la retícula de la CABECERA, que es la que manda. El
«- 1px» no sobra: esta sección tiene margin-top:-1px para meterse
bajo la cabecera y matar la línea de subpíxel. */
background-position:0 calc(-1 * (var(--header-h) - 1px));
/* ── LA SEGUNDA FILA: ENTERA ARRIBA, DESAPARECIDA ABAJO ──
Arranca OPACA, no a medias. Se probó a empezarla en 0,56 —porque la
cabecera ya venía desvaneciéndose— y la segunda fila nacía casi
invisible: no se desvanecía, es que no llegaba a verse.
La segunda fila del patrón ocupa los primeros 40 px de esta
sección. Por eso la máscara vale 1 al empezar y llega a 0 a los 45:
la fila entra con la misma intensidad que la de la cabecera y se
apaga a lo largo de su propio alto, de modo que su borde inferior
ya no existe. La tercera fila no llega a dibujarse. */
/* ── DEBAJO DE LA FIRMA, DIFUMINADO, NO CORTADO ──
La cabecera aparta el patrón de los primeros 380 px para que el
logotipo quede solo sobre el fondo liso. Esa zona despejada moría
de golpe en la unión: justo debajo del logotipo la fila de cuadros
reaparecía entera y de una sola vez. Un escalón horizontal, no un
degradado.
Se probaron dos soluciones antes de esta. Quitar el patrón de esa
columna dejaba un vacío que partía la portada en dos. Despejarlo con
una elipse que se agotase hacia abajo revelaba los cuadrados por la
mitad, y media figura se lee como un corte igual de feo.
Lo que hace la buena es no recortar nada: bajo la firma el patrón se
dibuja ENTERO, al 30 %, y sube a plena intensidad a los 390 px. No
hay ningún borde que ver porque no hay ningún borde: solo un cambio
de intensidad, y la fila se apaga entera unos píxeles más abajo.
Las dos máscaras se CRUZAN: el patrón solo se dibuja donde ambas lo
permiten. Se declara dos veces a propósito. «-webkit-mask-composite:
source-in» es la sintaxis vieja, la única que entienden Safari
antiguo y Chrome anterior al 120; «mask-composite: intersect» es la
estándar y va después para ganar donde exista. Sin una de las dos,
un navegador que apile las máscaras sin cruzarlas las SUMARÍA, y el
patrón acabaría dibujándose en mitad del vídeo. */
-webkit-mask-image:linear-gradient(180deg,
rgba(0,0,0,1) 0px, rgba(0,0,0,.88) 10px, rgba(0,0,0,.62) 20px,
rgba(0,0,0,.34) 30px, rgba(0,0,0,.13) 38px, rgba(0,0,0,0) 46px),
var(--trama-corte-difuso);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,
rgba(0,0,0,1) 0px, rgba(0,0,0,.88) 10px, rgba(0,0,0,.62) 20px,
rgba(0,0,0,.34) 30px, rgba(0,0,0,.13) 38px, rgba(0,0,0,0) 46px),
var(--trama-corte-difuso);
mask-composite:intersect;
}
.portada.con-video{
background:var(--antracita);color:var(--papel);
margin-top:-1px;
}
.portada.con-video .portada-sub{color:#E4E4E4}
/* ── EL ROJO DEL TITULAR ES EL DEL LOGOTIPO ──────────────────────────
«red legal» iba en --rojo-vivo (#C4585A) y el logotipo, los botones y
todo lo demás en --rojo (#A23332), que es el color medido píxel a
píxel sobre el archivo de marca. Dos rojos distintos a diez
centímetros uno del otro, y el ojo los compara sin que se lo pidan.
Conviene saber lo que cuesta igualarlos. Medido sobre el plano de la
ciudad, con el velo al 45 %:
#A23332, el de la marca 1,05:1
#C4585A, el que había 1,40:1
#A23332 sobre la cabecera antracita,
que es donde vive el logotipo de verdad 1,89:1
El rojo de la marca es un rojo OSCURO, pensado para papel claro —ahí
da 7:1—, y sobre una imagen en movimiento no llega a 3:1 se haga lo
que se haga.
La solución NO es oscurecer el vídeo. Se probó con un degradado que
subía el velo al 82 % por la izquierda y funcionaba, pero apagaba el
plano justo por donde se entra a mirarlo, que es lo contrario de lo
que se quiere de un vídeo de portada.
Se resuelve en la letra: un halo oscuro MUY CEÑIDO al contorno del
glifo. Oscurece los dos o tres píxeles que rodean cada trazo y nada
más, así que despega la palabra de cualquier fondo sin que se vea
ninguna mancha sobre la imagen. No cuenta para la medida formal de
contraste —esa se calcula sobre el fondo, no sobre el halo— pero es
lo que de verdad hace que se lea. */
.portada.con-video h1 .marcado{
color:var(--rojo);
text-shadow:
0 0 1px rgba(0,0,0,.92), /* el contorno, pegado a la letra */
0 1px 3px rgba(0,0,0,.88),
0 2px 20px rgba(0,0,0,.62); /* y una aureola ancha y suave */
}
/* El blanco del titular aguanta de sobra sobre el velo al 45 % —da más
de 8:1—, pero sin nada de sombra se veía que una palabra llevaba halo
y las demás no. Esta es mucho más leve: solo iguala. */
.portada.con-video h1{
text-shadow:0 1px 16px rgba(0,0,0,.42);
}
.portada.con-video .btn-linea{border-color:rgba(255,255,255,.5);color:#fff}
.portada.con-video .btn-linea:hover{background:#fff;color:var(--tinta)}
@media (max-width:820px){
.campo-dos{grid-template-columns:1fr}
.consulta-pie{flex-direction:column-reverse}
.rgpd-grupo{flex-direction:column;gap:10px}
.rgpd-botones .btn{flex:1}
}
/* ============================================================
CABECERA · segunda versión
Logotipo a la izquierda; buscador, navegación y botón a la
derecha. Todo sobre blanco: el logotipo lleva las letras en
negro y cualquier fondo oscuro se las come.
============================================================ */
.visualmente-oculto{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
header.cab .env{gap:26px}
.cab-derecha{display:flex;align-items:center;gap:18px;flex:1;justify-content:flex-end}
/* ── Buscador ──
La lupa está siempre; el campo aparece al pulsarla. Con seis
secciones en la cabecera, un campo permanente no cabía sin apretar
la navegación. */
.busca-zona{position:relative;display:flex;align-items:center}
.lupa{
width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);
color:var(--gris);transition:background .16s,color .16s;
}
.lupa:hover,.lupa[aria-expanded="true"]{background:var(--papel-2);color:var(--rojo)}
.busca-cab{
position:absolute;right:0;top:calc(100% + 10px);z-index:220;
display:flex;align-items:center;gap:6px;
background:var(--blanco);border:1px solid var(--rojo);
padding:8px 10px 8px 14px;width:min(360px,80vw);
box-shadow:var(--sombra);
}
.busca-cab input{
border:0;background:none;width:100%;font-size:.9rem;color:var(--tinta);padding:2px 0;
}
.busca-cab input:focus{outline:none}
.busca-cab input::-webkit-search-cancel-button{-webkit-appearance:none}
.busca-cerrar{
flex:none;width:26px;height:26px;font-size:1.2rem;line-height:1;
color:var(--gris);border-radius:var(--r);
}
.busca-cerrar:hover{background:var(--papel-2);color:var(--tinta)}
.sugerencias{
position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;
background:var(--blanco);border:1px solid var(--papel-3);
box-shadow:var(--sombra);z-index:230;
max-height:min(60vh,420px);overflow-y:auto;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s,transform .16s,visibility .16s;
}
.sugerencias.on{opacity:1;visibility:visible;transform:none}
.sug{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:11px 15px;border-bottom:1px solid var(--papel-2);transition:background .14s;
}
.sug:last-child{border-bottom:0}
.sug:hover,.sug.marcada{background:var(--papel-2)}
.sug-t{font-size:.9rem;font-weight:500;color:var(--tinta)}
.sug-d{font-size:.72rem;color:var(--gris);flex:none;text-transform:uppercase;letter-spacing:.08em}
.sug-vacio{padding:16px 15px;font-size:.86rem;color:var(--gris);line-height:1.6}
.sug-vacio button{color:var(--rojo);font-weight:600;text-decoration:underline}
/* ── Navegación ──
Visible en escritorio; en móvil pasa al panel lateral. */
nav.principal{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav-btn{
display:block;padding:9px 13px;border-radius:var(--r);
color:var(--tinta);font-size:.87rem;font-weight:500;letter-spacing:-.01em;
transition:background .16s,color .16s;white-space:nowrap;
}
.nav-btn:hover{background:var(--papel-2);color:var(--rojo)}
.hamburguesa{display:none}
/* ── Mega menú de servicios ── */
.mega{width:min(880px,calc(100vw - 40px));left:auto;right:0;transform:translateY(-10px)}
.nav-item.abierto .mega{transform:translateY(0)}
.mega-cuerpo{display:grid;grid-template-columns:1fr 1fr}
.mega-via{padding:26px 28px 24px;display:flex;flex-direction:column}
.mega-via+.mega-via{border-left:1px solid var(--papel-3);background:var(--papel-2)}
.mega-via-cab .rotulo{color:var(--rojo);margin-bottom:6px}
.mega-via-num{font-size:.76rem;color:var(--gris);margin-bottom:8px}
.mega-via-txt{font-size:.83rem;color:var(--gris);line-height:1.5;
padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--papel-3)}
.mega-lista{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;flex:1}
.mega-enlace{
display:block;padding:6px 8px;margin-left:-8px;border-radius:var(--r);
transition:background .14s,color .14s;
}
.mega-enlace:hover{background:var(--papel-3);color:var(--rojo)}
.mega-enlace .t{font-size:.855rem;font-weight:500;line-height:1.35}
.mega-todo{
margin-top:16px;padding-top:14px;border-top:1px solid var(--papel-3);
font-size:.8rem;font-weight:600;color:var(--rojo);
display:flex;align-items:center;gap:7px;
}
.mega-todo span{transition:transform .16s}
.mega-todo:hover span{transform:translateX(3px)}
.pm-todo{color:var(--rojo-vivo)!important;font-weight:600}
/* ── Campo con un dato que no vale ──
Rojo en el borde y un punto de fondo. No basta con el mensaje de
arriba: en un formulario de cinco campos hay que poder ver de un
vistazo CUÁL es el que falla. */
.campo-mal,
.campo input.campo-mal,
.campo select.campo-mal,
.campo textarea.campo-mal{
border-color:var(--rojo) !important;
background:rgba(162,51,50,.045);
}
.campo-mal:focus{outline:2px solid var(--rojo);outline-offset:1px}
/* Visible solo para lectores de pantalla. Se saca de la vista sin usar
display:none ni visibility:hidden, que lo esconderían también de
ellos. */
.solo-lectores{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ══ LAS FOTOGRAFÍAS DE LAS PUBLICACIONES ══
Se sirven en tres tamaños y el navegador elige. Aquí solo se resuelve
el RECORTE: la misma imagen tiene que funcionar en la franja ancha y
baja de la cabecera del artículo, en la tarjeta cuadrada del índice y
en el móvil, que es casi un cuadrado. Con `cover` y el punto focal
que trae cada una, ninguna pierde su motivo. */
.pub-foto{margin:0;position:relative}
/* El que envuelve ahora cada fotografía —para ofrecer WebP y
JPEG a la vez— no debe contar para la maquetación. Por defecto es
ENLÍNEA y de altura automática, así que el height:100% de la imagen
pasaba a medirse contra una caja sin altura y las fotografías de la
portada y del índice se quedaban en un hilo. En bloque y al 100 %, el
es transparente: donde la figura tiene altura fija, la
hereda; donde no la tiene, se queda en automático igual que antes. */
.pub-foto picture{display:block;height:100%}
.pub-foto img{
display:block;width:100%;height:100%;
object-fit:cover; /* el punto focal va en el atributo style */
background:var(--papel-2);
}
/* Cabecera del artículo: franja ancha, más alta en escritorio que en
el móvil, donde una franja baja no dice nada. */
.pub-portada .pub-foto{height:clamp(230px,34vw,420px)}
.pub-portada .pub-foto img{height:100%}
/* Tarjeta del índice */
.pub-imagen .pub-foto{height:100%}
.pub-imagen .pub-foto img{height:100%}
.pub-imagen .pub-credito{display:none} /* el crédito va en el artículo */
/* La atribución. Pequeña y gris, pero legible: es la condición de la
licencia, no un pie decorativo. */
.pub-credito{
padding:8px 2px 0;
font-size:.72rem;line-height:1.5;color:var(--gris);
letter-spacing:.01em;
}
.pub-credito a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--papel-3)}
.pub-credito a:hover{color:var(--rojo);border-bottom-color:var(--rojo)}
/* ── A qué correo ha ido la confirmación ── */
.fin-correo{
margin-top:14px;padding:13px 15px;
background:var(--papel-2);border-left:3px solid var(--rojo);
font-size:.92rem;line-height:1.6;color:var(--tinta-3);
}
.fin-correo b{color:var(--tinta);font-weight:600}
.fin-correo-aviso{background:rgba(162,51,50,.06)}
/* ── Las horas, partidas en mañana y tarde ── */
.cita-tramo + .cita-tramo{margin-top:18px}
.cita-tramo-rot{
font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--gris);
margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--papel-2);
}
.cita-tramo-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
/* ============================================================
VENTANA DE CONTACTO
============================================================ */
.modal-estrecho{width:min(470px,100%)}
.contacto-vias{display:grid;gap:10px;margin:20px 0 4px}
.contacto-via{
display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
padding:15px 16px;border:1px solid var(--papel-3);background:var(--papel);
transition:border-color .16s,background .16s,transform .16s;
}
.contacto-via:hover{border-color:var(--rojo);background:var(--papel-2);transform:translateY(-1px)}
/* ── LAS TRES VÍAS ENTRAN IGUALES ──
«Reservar una cita» llevaba el borde rojo y el fondo tintado, que son
exactamente los mismos rasgos que marcan la opción sobre la que está
el cursor. Al abrir la ventana parecía ya elegida, y quien solo
quería el teléfono creía que había que deshacer algo primero.
Se distingue igual, pero por otro camino: un filete rojo a la
izquierda, que señala sin imitar a la selección. El borde y el fondo
quedan reservados para el hover y el foco, que es lo que sí responde
a lo que hace el visitante. */
/* Sin ninguna marca: las tres vías entran exactamente iguales y la
diferencia la pone el visitante al pasar por encima. El filete rojo
que se probó aquí seguía leyéndose como «esta ya está elegida». */
.contacto-icono{
width:40px;height:40px;flex:none;display:grid;place-items:center;
background:var(--rojo);color:#fff;border-radius:var(--r);
}
.contacto-txt b{display:block;font-size:.95rem;margin-bottom:2px;font-weight:600}
.contacto-txt span{font-size:.81rem;color:var(--gris);line-height:1.45;display:block}
.contacto-nota{
margin-top:16px;padding-top:14px;border-top:1px solid var(--papel-3);
font-size:.78rem;color:var(--gris);line-height:1.55;
}
/* ── HASTA DÓNDE SE MANTIENE LA NAVEGACIÓN VISIBLE ──
El encabezado necesita 1.022 px medidos: 163 de logotipo, 596 de los
seis enlaces y 223 de lupa y botón. El corte estaba en 1.120, casi
cien píxeles por encima de lo necesario, así que en cualquier
portátil con la ventana sin maximizar la navegación desaparecía y
salía la hamburguesa. Que en escritorio no haya desplegable es un
requisito del despacho, no una preferencia.
Entre 1.060 y 940 los enlaces se aprietan un poco —menos relleno y
medio punto de cuerpo— y siguen cabiendo los seis. Por debajo de 940
ya no caben sin amontonarse, y ahí sí pasa al panel lateral. */
@media (max-width:1060px){
.nav-btn{padding:9px 9px;font-size:.835rem}
nav.principal{gap:0}
}
/* El menú completo necesita 1029 px medidos: seis enlaces, la firma, la
lupa y el botón de contactar. Por debajo se desbordaba en silencio
—el corte estaba en 940— y los últimos enlaces se salían de la
pantalla. Se mide, no se estima: cambiar una etiqueta del menú mueve
esta cifra. */
@media (max-width:1040px){
nav.principal{display:none}
.hamburguesa{display:flex}
.cab-derecha{justify-content:flex-end}
}
@media (max-width:620px){
.cab-acciones .btn{padding:11px 15px;font-size:.85rem}
.busca-cab{width:min(320px,calc(100vw - 40px))}
}
@media (max-width:820px){
.mega-cuerpo{grid-template-columns:1fr}
.mega-lista{grid-template-columns:1fr}
}
/* ============================================================
PORTADA · tercera versión
Logotipo y eslogan en paralelo, no apilados: el logotipo es
cuadrado y encima del titular obligaba a bajar la vista dos
veces antes de leer nada.
============================================================ */
/* ── Portada en tres capas ──
Al fondo el vídeo; encima el logotipo, alineado a la izquierda del
bloque; y sobre él el eslogan. Sin caja ni placa: encerrar el
logotipo en un rectángulo blanco sobre el vídeo lo convertía en una
pegatina, y el logotipo ya tiene su propia caja dibujada dentro. */
.portada{padding:clamp(84px,11vw,148px) 0 clamp(70px,9vw,112px)}
.portada .env{max-width:1080px}
.portada-fila{display:block}
.portada-marca{
position:relative;z-index:3;margin-bottom:clamp(26px,3.4vw,40px);
padding-bottom:clamp(22px,2.6vw,30px);
}
.portada-marca img{
width:clamp(96px,9.5vw,130px);height:auto;display:block;
filter:drop-shadow(0 6px 22px rgba(0,0,0,.42));
}
.portada-marca::after{
content:"";position:absolute;left:0;bottom:0;width:74px;height:3px;background:var(--rojo);
}
.portada:not(.con-video) .portada-marca img{filter:none}
.portada-texto{position:relative;z-index:2}
@media (max-width:860px){
.portada-marca img{width:88px}
.portada-marca::after{width:56px}
}
/* ============================================================
PUBLICACIONES
============================================================ */
.pub-meta{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--gris);margin-bottom:12px;
}
.pub-area{color:var(--rojo);font-weight:600}
.pub-arte{width:100%;height:100%;display:block;color:var(--gris-claro)}
.pub-imagen,.pub-portada,.destacado-arte{
background:var(--papel-2);overflow:hidden;
}
.pub-portada{margin-bottom:clamp(26px,4vw,44px);aspect-ratio:3/1}
.pub-tarjeta{border:1px solid var(--papel-3);background:var(--papel);transition:border-color .18s,transform .18s}
.pub-tarjeta:hover{border-color:var(--rojo);transform:translateY(-2px)}
.pub-tarjeta a{display:block;height:100%}
.pub-imagen{aspect-ratio:16/7}
.pub-cuerpo{padding:20px 22px 24px}
.pub-tarjeta h3{font-size:1.06rem;line-height:1.3;margin-bottom:9px}
.pub-resumen{font-size:.88rem;color:var(--gris);line-height:1.55;margin-bottom:14px}
.pub-leer{font-size:.8rem;font-weight:600;color:var(--rojo);display:inline-flex;gap:7px}
.pub-tarjeta:hover .pub-leer span{transform:translateX(3px);transition:transform .16s}
.pub-destacada{margin-bottom:34px;border-color:var(--tinta)}
.pub-destacada a{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
.pub-destacada .pub-imagen{aspect-ratio:auto;height:100%;min-height:250px}
.pub-destacada .pub-cuerpo{padding:clamp(24px,3.4vw,40px);align-self:center}
.pub-destacada h3{font-size:clamp(1.25rem,2.2vw,1.7rem);letter-spacing:-.03em}
.pub-rejilla{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.pub-firma{
margin-top:30px;padding-top:16px;border-top:1px solid var(--linea-clara);
font-size:.8rem;color:var(--gris);
}
.fuentes{
margin-top:36px;padding:24px 26px;background:var(--papel-2);
border-left:3px solid var(--rojo);
}
.fuentes h2{margin-bottom:12px}
.fuentes-lista{margin:0;padding-left:20px;display:grid;gap:9px}
.fuentes-lista li{font-size:.85rem;line-height:1.55;color:var(--gris)}
.fuentes-lista a{color:var(--tinta);font-weight:500;word-break:break-word}
.fuentes-lista a:hover{color:var(--rojo)}
.texto-largo blockquote{
margin:28px 0;padding:16px 22px;background:var(--papel-2);
border-left:3px solid var(--gris-claro);font-size:.92rem;color:var(--gris);
}
.cabecera-articulo{padding-bottom:clamp(24px,3vw,36px)}
/* ── Portada: destacado y actualidad ── */
.destacado-pub{
display:grid;grid-template-columns:1fr 1.15fr;background:var(--papel);
border:1px solid var(--papel-3);transition:border-color .18s;
}
.destacado-pub:hover{border-color:var(--rojo)}
/* El bloque del último artículo en la portada. La foto tiene que
llenarlo entero: con min-height sola, la figura quedaba con su propia
altura y el recuadro se veía a medias. */
.destacado-arte{min-height:230px;position:relative}
.destacado-arte .pub-foto,
.destacado-arte .pub-foto img{position:absolute;inset:0;width:100%;height:100%}
.destacado-txt{padding:clamp(26px,3.6vw,42px);align-self:center}
.destacado-txt h3{margin-bottom:12px}
.actualidad-rejilla{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(34px,5vw,64px)}
.recientes{list-style:none;margin-top:20px;border-top:1px solid var(--linea-clara)}
.recientes a{
display:grid;gap:5px;padding:16px 0;border-bottom:1px solid var(--linea-clara);
transition:padding-left .16s;
}
.recientes a:hover{padding-left:8px}
.recientes time{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--gris)}
.reciente-tit{font-weight:600;font-size:.98rem;line-height:1.35}
.recientes a:hover .reciente-tit{color:var(--rojo)}
.reciente-area{font-size:.8rem;color:var(--gris)}
.seguimiento{background:var(--papel-2);padding:clamp(22px,3vw,32px);align-self:start}
.seguimiento p{font-size:.88rem;color:var(--gris);line-height:1.6;margin:10px 0 14px}
.seguimiento .lista-punto li{font-size:.86rem}
.seguimiento a{color:var(--rojo);font-weight:600}
/* ============================================================
EQUIPO Y TALENTO
============================================================ */
.cabecera-equipo{background:var(--papel-2)}
.busca-equipo{display:grid;gap:14px}
.busca-equipo .entrada{color:var(--rojo)}
.busca-equipo-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.campo-ancho{grid-column:1/-1}
.busca-equipo .btn{justify-self:start;min-width:180px}
.equipo-cuenta{color:var(--gris);margin-bottom:20px}
.equipo-rejilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.equipo-ficha{border:1px solid var(--papel-3);background:var(--papel)}
.equipo-retrato{aspect-ratio:1;background:var(--papel-2);display:grid;place-items:center;overflow:hidden}
.equipo-retrato img{width:100%;height:100%;object-fit:cover}
.equipo-inicial{font-size:3rem;font-weight:700;color:var(--papel-3)}
.equipo-datos{padding:16px 18px 20px}
.equipo-datos h3{font-size:1rem;margin-bottom:3px}
.equipo-cargo{font-size:.82rem;color:var(--rojo);font-weight:600;margin-bottom:7px}
.equipo-serv{font-size:.78rem;color:var(--gris);line-height:1.5}
.equipo-mail{font-size:.8rem;color:var(--tinta);display:block;margin-top:8px}
.equipo-vacio{max-width:640px}
.equipo-vacio h2{margin-bottom:12px}
.form-talento{display:grid;gap:16px;margin-top:26px}
.form-talento input[type="file"]{
padding:11px;border:1px dashed var(--papel-3);background:var(--papel);width:100%;
}
/* ============================================================
RESERVA DE CITA
============================================================ */
.consulta-guia{
display:flex;gap:6px;list-style:none;margin-bottom:22px;padding-right:44px;
font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
}
.consulta-guia li{
flex:1;padding:7px 0 9px;border-top:2px solid var(--papel-3);color:var(--gris);
}
.consulta-guia li.actual{border-top-color:var(--rojo);color:var(--rojo);font-weight:600}
.consulta-guia li.hecho{border-top-color:var(--tinta);color:var(--tinta)}
.consulta-resumen{
padding:12px 15px;background:var(--papel-2);border-left:3px solid var(--rojo);
font-size:.9rem;
}
.modalidades{display:grid;gap:9px}
.modalidad{display:block;cursor:pointer}
.modalidad input{position:absolute;opacity:0;pointer-events:none}
.modalidad span{
display:block;padding:13px 16px;border:1px solid var(--papel-3);background:var(--papel);
transition:border-color .16s,background .16s;
}
.modalidad b{display:block;font-size:.93rem;margin-bottom:2px}
.modalidad small{font-size:.79rem;color:var(--gris)}
.modalidad input:checked + span{border-color:var(--rojo);background:var(--papel-2)}
.modalidad input:focus-visible + span{outline:2px solid var(--rojo);outline-offset:2px}
.cita-dias{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:thin}
.cita-dia{
flex:none;width:66px;padding:10px 4px;border:1px solid var(--papel-3);
background:var(--papel);text-align:center;transition:border-color .16s,background .16s;
}
.cita-dia:hover{border-color:var(--gris-claro)}
.cita-dia.on{border-color:var(--rojo);background:var(--papel-2)}
.cita-dia-sem{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gris)}
.cita-dia-num{display:block;font-size:1.3rem;font-weight:700;line-height:1.2}
.cita-dia-mes{display:block;font-size:.66rem;text-transform:uppercase;color:var(--gris)}
/* Bloque, no rejilla: la cuadrícula pasó a cada tramo (mañana y tarde),
porque con los diez botones en una sola rejilla los dos grupos se
mezclaban en la misma fila y el corte del mediodía no se veía. */
.cita-horas{display:block}
.cita-hora{
padding:10px 4px;border:1px solid var(--papel-3);background:var(--papel);
font-size:.87rem;transition:border-color .16s,background .16s;
}
.cita-hora:hover:not(:disabled){border-color:var(--gris-claro)}
.cita-hora.on{border-color:var(--rojo);background:var(--rojo);color:#fff;font-weight:600}
.cita-hora:disabled{
color:var(--papel-3);text-decoration:line-through;cursor:not-allowed;background:var(--papel-2);
}
.cita-cargando{grid-column:1/-1;font-size:.86rem;color:var(--gris);padding:14px 0}
@media (max-width:820px){
.pub-destacada a,.destacado-pub{grid-template-columns:1fr}
.pub-destacada .pub-imagen{min-height:180px}
.actualidad-rejilla{grid-template-columns:1fr}
.busca-equipo-campos{grid-template-columns:1fr}
.busca-equipo .btn{width:100%}
}
/* ============================================================
COBERTURA · cuadrícula y mapa, sincronizados
============================================================ */
.cobertura-rejilla{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,54px);align-items:start}
.comunidades{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.comunidad{border:1px solid var(--papel-3);background:var(--papel);align-self:start}
.comunidad.on{border-color:var(--rojo)}
.comunidad-cab{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px 14px;text-align:left;transition:background .16s;
}
.comunidad-cab:hover{background:var(--papel-2)}
.comunidad-nom{font-size:.84rem;font-weight:600;line-height:1.3}
.comunidad-num{
font-family:var(--mono);font-size:.7rem;color:var(--gris);flex:none;
width:22px;height:22px;display:grid;place-items:center;
border:1px solid var(--papel-3);border-radius:50%;
}
.comunidad.on .comunidad-nom{color:var(--rojo)}
.comunidad.on .comunidad-num{border-color:var(--rojo);color:var(--rojo)}
.comunidad-lista{
list-style:none;display:none;padding:0 14px 12px;
border-top:1px solid var(--papel-2);margin-top:-1px;
}
.comunidad.on .comunidad-lista{display:block}
.comunidad-lista li{
padding:6px 0 6px 14px;font-size:.83rem;color:#3A3A3A;position:relative;cursor:default;
}
.comunidad-lista li::before{
content:"";position:absolute;left:0;top:.9em;width:6px;height:1px;background:var(--rojo);
}
.comunidad-lista li:hover{color:var(--rojo)}
.comunidad-lista li.es-sede{font-weight:700;color:var(--tinta)}
.comunidad-lista li.es-sede span{
display:block;font-size:.64rem;font-weight:500;letter-spacing:.12em;
text-transform:uppercase;color:var(--rojo);
}
/* El mapa acompaña al desplazamiento: al recorrer la cuadrícula sigue
a la vista, que es lo que hace que la relación se entienda. */
.mapa-marco{position:sticky;top:calc(var(--header-h) + 20px)}
/* En «El despacho» el mapa acompaña a un solo párrafo, no a una
cuadrícula que se recorre: ahí seguir al desplazamiento no ayuda,
despega el mapa de su texto. */
.mapa-marco--quieto{position:static}
/* Va en banda propia, con su filete arriba: el cuerpo del relato se
compone en columna estrecha y este bloque necesita el ancho entero
para el mapa, así que sin una separación clara el epígrafe quedaba
colgando fuera de la columna, como si se hubiera escapado. */
.cobertura-breve{padding:clamp(52px,7vw,88px) 0}
/* El filete solo cuando NO viene detrás de una banda oscura: esa ya
separa de sobra, y sumarle margen y raya dejaba una franja vacía
entre las dos. */
.cobertura-breve:not(.oscuro + .cobertura-breve){
border-top:1px solid var(--linea-clara);
margin-top:clamp(48px,7vw,86px);
}
/* Columna estrecha, como el resto de la página: todas las secciones de
«El despacho» arrancan en la misma vertical y esta se salía 240 px a
la izquierda. El mapa se conforma con menos ancho —solo lleva un
rótulo— antes que romper la alineación. */
.cobertura-breve .cobertura-rejilla{
grid-template-columns:1fr .92fr;
align-items:center;
gap:clamp(30px,4vw,56px);
}
/* ── EL BLOQUE DE COBERTURA, CON AIRE ──
Iba todo pegado: el título contra el párrafo y el recuento colgando
detrás como una frase más. Ahora lleva su rótulo arriba, separación
entre título y texto, y las dos cifras compuestas como cifras y no
como una línea de prosa. */
.cobertura-texto .entrada{margin-bottom:10px}
.cobertura-texto h2{margin:0 0 18px}
.cobertura-texto p{margin:0;color:var(--gris);line-height:1.78}
.cobertura-cifras{
list-style:none;display:flex;gap:clamp(26px,4vw,48px);
margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--linea-clara);
}
.cobertura-cifras li{display:flex;flex-direction:column;gap:2px}
.cobertura-cifras b{
font-family:Georgia,'Times New Roman',serif;font-size:1.9rem;font-weight:400;
line-height:1;color:var(--tinta);
}
.cobertura-cifras span{
font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
}
/* En pantalla estrecha el mapa va DEBAJO del texto: encima obligaba a
pasar por una ilustración antes de saber de qué trata. */
@media (max-width:900px){
.cobertura-breve .mapa-marco{order:0}
}
.cobertura-breve h2{margin-top:0}
.mapa-esp .capitales circle,.mapa-esp .sede{transition:fill .2s,r .2s,opacity .2s}
.mapa-esp circle.activo{fill:var(--rojo);opacity:1;r:5}
.mapa-esp circle.resaltado{fill:var(--rojo);opacity:1;r:7}
@media (max-width:900px){
.cobertura-rejilla{grid-template-columns:1fr}
.mapa-marco{position:static;order:-1}
}
@media (max-width:560px){
.comunidades{grid-template-columns:1fr}
}
/* ============================================================
SERVICIOS · índice de las seis áreas
============================================================ */
.servicios-rejilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.servicio{border:1px solid var(--papel-3);background:var(--papel);transition:border-color .18s,transform .18s}
.servicio:hover{border-color:var(--rojo);transform:translateY(-2px)}
.servicio a{display:block;padding:clamp(22px,2.6vw,30px);height:100%}
.servicio-num{display:block;color:var(--rojo);margin-bottom:10px}
.servicio h2{margin-bottom:8px;font-size:clamp(1.15rem,1.9vw,1.42rem)}
.servicio-desc{font-size:.9rem;color:var(--gris);line-height:1.55;margin-bottom:16px}
.servicio-lista{
list-style:none;border-top:1px solid var(--papel-2);padding-top:13px;margin-bottom:16px;
}
.servicio-lista li{
font-size:.82rem;color:#3A3A3A;padding:4px 0 4px 14px;position:relative;line-height:1.4;
}
.servicio-lista li::before{
content:"";position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--rojo);
}
/* ============================================================
PÁGINA DE ÁREA · índice y materias desplegables
============================================================ */
.area-rejilla{display:grid;grid-template-columns:250px 1fr;gap:clamp(26px,4vw,52px);align-items:start}
.area-indice{position:sticky;top:calc(var(--header-h) + 24px)}
.area-indice .rotulo{color:var(--rojo);padding-bottom:10px;border-bottom:1px solid var(--papel-3);margin-bottom:6px}
.area-indice ul{list-style:none}
.area-indice a{
display:block;padding:8px 0;font-size:.85rem;color:#3A3A3A;
border-bottom:1px solid var(--papel-2);transition:color .16s,padding-left .16s;
}
.area-indice a:hover{color:var(--rojo);padding-left:5px}
.materias{display:grid;gap:2px}
.materia{border:1px solid var(--papel-3);background:var(--papel);scroll-margin-top:120px}
.materia.on{border-color:var(--rojo)}
.materia-cab{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 22px;text-align:left;transition:background .16s;
}
.materia-cab:hover{background:var(--papel-2)}
.materia-cab h3{font-size:1.04rem;line-height:1.3;font-weight:600}
.materia.on .materia-cab h3{color:var(--rojo)}
.materia-mas{
flex:none;width:26px;height:26px;display:grid;place-items:center;
border:1px solid var(--papel-3);font-size:1.05rem;color:var(--gris);
transition:transform .22s,border-color .16s,color .16s;
}
.materia.on .materia-mas{transform:rotate(45deg);border-color:var(--rojo);color:var(--rojo)}
/* ── EL TEXTO DE CADA MATERIA ──
Aquí va la explicación larga, y hasta ahora salía como un muro: los
párrafos tenían margen cero, así que cuatro párrafos distintos se
leían como uno solo de veinte líneas. Con un texto jurídico eso no es
un defecto estético, es que no se puede leer.
El panel se trata como una pieza de documento, no como un desplegable
de web: filete de marca a la izquierda, entradillo destacado, y
epígrafes que dejan ver la estructura sin tener que leerlo entero. */
.materia-panel{display:none;padding:2px 22px 24px}
.materia.on .materia-panel{display:block;animation:abrirMateria .3s ease}
@keyframes abrirMateria{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.materia-panel > *{max-width:74ch}
.materia-panel p{
font-size:.96rem;line-height:1.72;color:var(--tinta-3);
margin:0 0 1.05em;;
text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;
}
.materia-panel p:last-child{margin-bottom:0}
/* El primer párrafo hace de entradilla: dice en dos líneas de qué va
la materia, para quien abre y decide en tres segundos si sigue. */
.materia-panel > p:first-child{
font-size:1.03rem;line-height:1.62;color:var(--tinta);
padding-left:16px;border-left:2px solid var(--rojo);
margin-bottom:1.4em;
}
/* Epígrafes. Van en versalitas rojas y no en negrita grande: el bloque
ya está dentro de un desplegable y una jerarquía más marcada
competiría con el título de la materia. */
/* h4 y h5, no h2 y h3: el texto vive dentro del
del título de la
materia, así que sus epígrafes tienen que colgar por debajo. */
.materia-panel h4,
.materia-panel h5{
font-family:var(--display);
font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--rojo);margin:2.1em 0 .85em;
padding-bottom:.5em;border-bottom:1px solid var(--papel-2);
}
.materia-panel h4:first-child,
.materia-panel h5:first-child{margin-top:.4em}
.materia-panel ul,
.materia-panel ol{margin:0 0 1.15em;padding:0;list-style:none}
.materia-panel li{
position:relative;padding-left:20px;margin-bottom:.62em;
font-size:.95rem;line-height:1.66;color:var(--tinta-3);
}
.materia-panel li:last-child{margin-bottom:0}
.materia-panel ul li::before{
content:'';position:absolute;left:2px;top:.62em;
width:6px;height:6px;border:1px solid var(--rojo);
}
.materia-panel ol{counter-reset:mat}
.materia-panel ol li{counter-increment:mat;padding-left:28px}
.materia-panel ol li::before{
content:counter(mat);position:absolute;left:0;top:.06em;
font-family:var(--display);font-size:.76rem;font-weight:700;
color:var(--rojo);
}
.materia-panel strong{font-weight:600;color:var(--tinta)}
/* Los enlaces a la norma se distinguen SOLO por el color, que es la
norma de toda la web. Sin subrayado ni filete: en un párrafo con
varias citas legales, cinco líneas debajo del texto lo ensucian. Al
pasar por encima se refuerzan con peso, que se nota y no descoloca. */
.materia-panel a{
color:var(--rojo);box-shadow:inset 0 0 0 0 rgba(162,51,50,.10);
transition:color .16s,box-shadow .16s;
}
/* Al pasar por encima se enciende un fondo tenue. Se probó con negrita
y no vale: cambiar el peso refluye la línea y el párrafo entero da un
salto justo cuando el cursor lo está señalando. */
.materia-panel a:hover{color:var(--rojo-hondo);box-shadow:inset 0 -.75em 0 0 rgba(162,51,50,.12)}
/* El pie de cada materia: una acción principal y una secundaria, con
una línea encima que las separa del texto. Antes eran dos botones
sueltos del mismo peso y competían entre sí. */
.materia-pie{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin-top:22px;padding-top:18px;border-top:1px solid var(--papel-2);
}
.materia-pie .btn{padding:11px 20px;font-size:.85rem}
.materia-pie .btn-linea{border-width:1px;color:var(--gris)}
.materia-pie .btn-linea:hover{border-color:var(--tinta);color:var(--tinta);background:none}
/* ── Mega menú de servicios (queda para el panel lateral) ── */
.mega-area-tit{
display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;
padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--papel-3);
}
.mega-sub{list-style:none;display:grid;gap:2px}
.mega-sub a{font-size:.82rem;color:var(--gris);padding:3px 0;display:block}
.mega-sub a:hover{color:var(--rojo)}
.mega-mas{font-style:italic}
@media (max-width:900px){
.area-rejilla{grid-template-columns:1fr}
.area-indice{position:static;display:none}
}
/* Las ilustraciones de los artículos usan currentColor, así que el tono
se decide aquí y no dentro del SVG. */
.pub-arte{color:var(--papel-3)}
.pub-arte .acento{color:var(--rojo);opacity:.85}
.pub-imagen,.pub-portada,.destacado-arte{background:var(--papel-2)}
.pub-tarjeta:hover .pub-arte,.destacado-pub:hover .pub-arte{color:var(--gris-claro)}
/* ============================================================
FOTOGRAFÍAS
Integradas en la composición, no colocadas al lado del texto:
una sangra por el borde de la ventana, otra hace de cabecera y
la tercera es el fondo de su propio bloque. En blanco y negro,
para que una imagen de los sesenta y una de hoy convivan.
============================================================ */
figure{margin:0}
/* ── Quiénes somos: la foto sale por la izquierda ── */
.sobre{position:relative;overflow:hidden;padding:clamp(58px,7vw,96px) 0}
.sobre-foto{
position:absolute;left:0;top:0;bottom:0;width:min(54%,680px);z-index:1;
}
.sobre-foto img{
width:100%;height:100%;object-fit:cover;object-position:38% center;display:block;
filter:grayscale(1) contrast(1.06) brightness(.96);
}
/* El texto se monta sobre la foto: el degradado la funde con el fondo
de la sección en lugar de cortarla con un borde recto. */
.sobre-foto::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.55) 52%,var(--papel) 96%);
}
.sobre .env{position:relative;z-index:2;display:flex;justify-content:flex-end}
.sobre-caja{
width:min(560px,100%);background:var(--papel);
padding:clamp(28px,3.6vw,46px);
box-shadow:-30px 0 60px -30px rgba(0,0,0,.22);
}
.sobre-pie{
font-size:.79rem!important;color:var(--gris)!important;line-height:1.5;
padding-left:13px;border-left:2px solid var(--rojo);margin-top:26px;
}
/* ── El despacho: la foto es la cabecera ── */
.cabecera-foto{
position:relative;display:flex;align-items:flex-end;
min-height:min(56vh,440px);padding:clamp(44px,6vw,74px) 0 clamp(30px,4vw,46px);
background:var(--antracita-2);overflow:hidden;color:var(--papel);
}
.cabecera-foto img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 42%;filter:grayscale(1) contrast(1.05);
}
.cabecera-foto::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(26,26,26,.42) 0%,rgba(26,26,26,.78) 68%,rgba(26,26,26,.9) 100%);
}
.cabecera-foto .env{position:relative;z-index:2}
.cabecera-foto h1{margin:12px 0 16px}
.cabecera-foto-pie{
font-size:.82rem;color:#C8C8C8;line-height:1.55;max-width:46ch;
padding-left:13px;border-left:2px solid var(--rojo-vivo);
}
/* ── Oficina: la fachada es el fondo de su bloque ── */
.oficina-con-foto{position:relative;overflow:hidden}
.oficina-con-foto::before{
content:"";position:absolute;right:0;top:0;bottom:0;width:min(40%,420px);
background-image:var(--foto);background-size:cover;background-position:center;
filter:grayscale(1) contrast(1.04);
mask-image:linear-gradient(90deg,transparent 0%,#000 46%);
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%);
opacity:.5;pointer-events:none;
}
.oficina-con-foto>*{position:relative;z-index:2}
@media (max-width:900px){
.sobre-foto{width:100%;opacity:1}
.sobre-foto::after{
background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,var(--papel) 46%);
}
.sobre .env{justify-content:flex-start}
.sobre-caja{box-shadow:0 -20px 44px -26px rgba(0,0,0,.22)}
.cabecera-foto{min-height:min(48vh,360px)}
.oficina-con-foto::before{width:100%;opacity:.13;mask-image:none;-webkit-mask-image:none}
}
/* ── Fotografía dentro de un texto largo ──
Sangra por los dos lados hasta salirse de la columna de lectura: así
marca un descanso en el relato en lugar de interrumpirlo. */
.foto-relato{
margin:clamp(34px,4.5vw,52px) calc(-1 * clamp(0px,4vw,90px));
}
.foto-relato img{
width:100%;height:auto;display:block;
filter:grayscale(1) contrast(1.05);
}
.foto-relato figcaption{
margin-top:12px;font-size:.79rem;color:var(--gris);line-height:1.5;
padding-left:13px;border-left:2px solid var(--rojo);
margin-left:clamp(0px,4vw,90px);
}
/* ============================================================
SISTEMA VISUAL
Tres registros de fondo que se alternan —hueso, arena y
antracita— con la trama de la marca por debajo. La alternancia
es lo que marca el ritmo de lectura: una web de un solo color
se lee como un documento largo, y ninguna sección destaca.
============================================================ */
/* Las piezas apoyadas van en blanco puro sobre el hueso del fondo. */
.pub-tarjeta,.servicio,.materia,.equipo-ficha,.comunidad,
.sobre-caja,.modal-caja,.mapa-marco,.contacto-via,.formulario,
.mega,.sugerencias,.cita-dia,.cita-hora,.busca-cab:focus-within{
background:var(--blanco);
}
/* ── Banda arena ── */
.sec-papel{
background:var(--papel-2);
background-image:var(--trama-clara);
position:relative;
}
/* Filete superior: separa la banda de la anterior sin una línea dura. */
.sec-papel::before,.oscuro::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,var(--rojo) 0%,var(--rojo) 92px,var(--linea-clara) 92px);
}
.oscuro::before{
background:linear-gradient(90deg,var(--rojo-vivo) 0%,var(--rojo-vivo) 92px,var(--linea-osc) 92px);
}
/* ── Banda antracita ── */
section.oscuro{
background:var(--antracita);
background-image:var(--trama);
position:relative;
}
/* ── Cabeceras de página ──
Un degradado tenue desde el arena y la trama por debajo: la primera
pantalla de cada página deja de ser un rectángulo blanco con texto. */
.cabecera-area{
background-color:var(--papel-2);
background-image:var(--trama-clara),
linear-gradient(180deg,rgba(251,250,248,0) 0%,var(--papel) 100%);
border-bottom:1px solid var(--linea-clara);
position:relative;overflow:hidden;
}
/* ── MARCA DE AGUA: EL LOGOTIPO, ENTERO ──
Dos correcciones sobre cómo estaba.
La primera: iba con «right» NEGATIVO, entre -8 y -24 px, dentro de un
contenedor con overflow:hidden. Es decir, se salía por la derecha y
el recuadro lo recortaba: se veía medio logotipo. Ahora entra
completo, con margen suficiente para que no roce el borde.
La segunda: estaba al 5,5 % de opacidad y el patrón de fondo va al
3,5 %. Era más pigmentado, sí, pero por tan poco que el ojo los leía
igual de tenues y el logotipo no destacaba sobre la trama. Al 9 % se
distingue como lo que es —la marca al fondo del papel— y sigue muy
lejos de competir con el texto. */
.cabecera-area::after{
content:"";position:absolute;right:clamp(20px,3vw,56px);top:50%;
transform:translateY(-50%);
width:clamp(150px,18vw,260px);aspect-ratio:1;
background:url('/img/logo.png') no-repeat center/contain;
opacity:.09;pointer-events:none;
}
.sec-cab{position:relative;padding-top:6px}
.cabecera-area .env{position:relative;z-index:2}
/* ── LA LÍNEA QUE CIERRA EL TÍTULO ──
El filete gris de arriba lo daba el borde inferior, y se veía o no se
veía según el color de la sección siguiente. Ahora el cierre es
siempre el mismo gesto: la línea fina a todo lo ancho y, sobre ella,
un tramo corto del rojo de la marca pegado al margen izquierdo. Es el
mismo recurso que abre cada título y que cierra la página contra el
pie, y al ir en «.cabecera-area» aparece en todas las páginas por
construcción, sin que haya que acordarse de ponerlo. */
.cabecera-area::before{
content:"";position:absolute;left:0;bottom:-1px;z-index:3;
width:clamp(120px,13vw,190px);height:3px;
background:var(--rojo);pointer-events:none;
}
.cabecera-equipo::after{opacity:.115}
/* ── Filete de acento en los bloques de contenido ──
El mismo gesto del logotipo —una línea roja corta— repetido como
marca de sección. */
.sec-cab h2::before,.cabecera-area h1::before{
content:"";display:block;width:52px;height:3px;background:var(--rojo);
margin-bottom:18px;
}
.oscuro .sec-cab h2::before{background:var(--rojo-vivo)}
.cabecera-area h1::before{width:64px;margin-bottom:22px}
/* En la portada el filete ya lo pone el logotipo. */
.portada h1::before{display:none}
/* ── Pie ── */
/* ── EL FILETE DE MARCA QUE CIERRA LA PÁGINA ──
Tres píxeles de borgoña separando el contenido del pie. Es el mismo
gesto —y el mismo grosor— que abre la página sobre la banda de aviso,
así que la web empieza y termina con la misma línea.
Sustituye al filete blanco al 14 % que había: entre la sección oscura
de cierre y el pie, dos negros seguidos, esa línea clara apenas se
distinguía y no separaba nada. */
footer{
background:var(--antracita-2);background-image:var(--trama);
border-top:3px solid var(--rojo);
}
/* ── Barras y cabecera ── */
/* ══ EL ENCABEZADO, DEL MISMO TONO QUE EL PIE ══
Era blanco y la web quedaba partida: una banda de aviso oscura, una
cabecera blanca y, justo debajo, la portada oscura otra vez. Ahora la
cabecera va en antracita con la trama de marca, igual que la franja
del pie, y la página abre y cierra con la misma pieza.
Cambiar el fondo obliga a invertir todo lo que va encima, que es lo
que se hace aquí abajo. Un fondo oscuro con la mitad de los
elementos en negro es peor que el blanco de partida. */
header.cab{
background-color:var(--antracita);
/* La MISMA trama del pie, sin variantes. Se probó a apretarla en
vertical —baldosa de 46 en lugar de 72— porque la cabecera mide 84
px y dentro de ella solo cabe una fila; pero apretada quedaban los
cuadrados casi tocándose y era peor. El despacho la quiere idéntica
a la del pie, y así se queda: mismo dibujo, mismo tamaño, mismo
ritmo. Que en la cabecera se vea una sola fila es consecuencia de
su altura, no del patrón.
── EL PATRÓN EMPIEZA ENTERO ──
Sin desplazamiento: el tile arranca en el borde superior de la
cabecera, así que la primera fila de cuadrados sale COMPLETA.
Antes iba desplazado hacia arriba para alinearse con la banda de
aviso, y el resultado era que la fila de arriba entraba cortada por
la mitad, justo en lo primero que se ve de la página. El único
corte del patrón tiene que ser el de abajo, y ese es un degradado.
La portada se alinea a ESTA retícula, no al revés: ver
«.portada.con-video::after». */
background-position:0 0;
/* SIN borde inferior. Ahí estaba el problema de la unión con el
vídeo: un filete blanco al 14 % cruzando la pantalla justo en la
línea donde acaba la cabecera y empieza el plano. Sobre las páginas
claras apenas se notaba; sobre el vídeo era una costura. El borde
vuelve solo cuando la página se ha desplazado, que es cuando de
verdad hace falta separar la cabecera del contenido. */
border-bottom:0;
}
header.cab.posada{border-bottom:1px solid var(--linea-osc)}
/* ══ EL MEMBRETE ══
Tres piezas apiladas, como el encabezado de un papel timbrado:
1. Un filete de borgoña de tres píxeles, lo primero de la página.
2. Una banda casi negra con la información de contexto.
3. La cabecera en antracita con la firma y la navegación.
El filete va sobre la banda de aviso y no sobre la cabecera. Puesto
entre las dos bandas oscuras quedaba enterrado y no se veía; arriba
del todo, contra el borde de la pantalla, es lo primero que entra por
el ojo. Es además el mismo recurso que abre las ilustraciones de las
publicaciones y las cabeceras de área: la web entera empieza por la
misma línea roja.
Y las dos bandas van a tonos distintos. Antes se diferenciaban en
cinco puntos de luminosidad y el conjunto se leía como un solo bloque
oscuro de ciento quince píxeles; ahora hay jerarquía. */
/* SIN trama. Es una banda de treinta y cinco píxeles con texto pequeño:
el patrón ahí no se lee como textura, se lee como suciedad detrás de
las letras. La trama empieza en la cabecera.
(Va en longhand y no en abreviatura por costumbre adquirida: un
«background:#1B1917» aquí borró en su día el background-image de esta
misma regla y estuvo varios envíos sin patrón sin que se notara.) */
.barra-aviso{
position:relative;
background-color:#1B1917;
background-image:none;
}
.barra-aviso::before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--rojo);z-index:1;
}
/* La banda de aviso está en todas las anchuras —en móvil solo pierde el
texto de la derecha—, así que el filete no se queda nunca huérfano. */
/* ── LA FIRMA, DEL MISMO TAMAÑO Y TRACKING QUE LA DEL PIE ──
Estaba un punto más pequeña y con menos separación entre letras, y
eso hacía que arriba y abajo no se leyeran como la misma marca sino
como dos versiones de ella. */
header.cab .marca{gap:13px}
/* Más grande y más blanca que antes: al despejarle el fondo se vio que
el símbolo se quedaba corto al lado de un rótulo de 20 px. */
/* En el logotipo del estudio el rótulo mide 1,86 veces el ancho del
símbolo; aquí medía 2,46, con el símbolo pequeño al lado de un texto
largo. Se sube el símbolo y se recorta el cuerpo del rótulo hasta
acercarse a esa proporción sin pasarse del alto de la cabecera. */
header.cab .marca-nodo{width:56px;height:56px}
header.cab .marca{gap:9px}
/* El cuerpo sube, el color NO: se probó a ponerlo en blanco puro y
quedaba más brillante que el símbolo, que es #F4F4F4 medido sobre el
propio archivo del logotipo. El rótulo y el símbolo tienen que ser el
mismo blanco. */
header.cab .marca-txt{font-size:1.2rem;letter-spacing:.28em}
/* Filete vertical entre la firma y la navegación. Separa el membrete
del menú, que son dos cosas distintas, y da la retícula vertical que
tienen los papeles de un despacho. */
header.cab nav.principal{
padding-left:clamp(20px,2.6vw,34px);
border-left:1px solid rgba(255,255,255,.13);
}
/* Al bajar, la cabecera se asienta: la trama se apaga, el fondo se
cierra un punto y aparece una sombra baja. Sin eso, sobre las bandas
oscuras de las páginas de área la cabecera flotaba sin separarse del
contenido. */
/* Al bajar solo aparece la sombra. El fondo NO cambia de tono —hacerlo
más oscuro al arrancar el scroll producía un parpadeo de color en la
primera pulsación de la rueda— y la TRAMA TAMPOCO se apaga: antes se
quitaba aquí, y los cuadrados desaparecían de golpe a los ocho
píxeles de scroll. Son símbolo de la marca; se quedan. */
/* ── LA TRAMA DE LA CABECERA, EN SU PROPIA CAPA ──
Va aquí y no en el fondo del elemento porque necesita MÁSCARA, y una
máscara sobre la cabecera apagaría también su color y su contenido.
La máscara empieza a bajar DENTRO de la cabecera, no al llegar al
vídeo. Ese es el punto: la primera fila de cuadrados se ve entera y
la segunda —que arranca a 80 px del borde superior, ya en el límite
de la cabecera— entra difuminada y termina de desaparecer dentro del
vídeo, sin que se vea dónde acaba.
Antes el patrón iba a plena intensidad hasta el último píxel de la
cabecera y el degradado no empezaba hasta el vídeo: la segunda fila
salía nítida y se cortaba de golpe. */
header.cab::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:var(--trama);
background-position:0 0;
/* ── EL PATRÓN SE APARTA DE LA FIRMA ──
Verticalmente va entero: el desvanecido empieza en el vídeo, que es
donde cae la segunda fila.
Horizontalmente, en cambio, no arranca hasta pasada la firma. La
firma ocupa los primeros 208 px y el patrón le pasaba justo por
detrás: dos dibujos de líneas finas superpuestos, y el logotipo
perdía el protagonismo que le toca. Ahora el patrón empieza a
dibujarse a partir de los 240 px y entra progresivamente, de manera
que la marca queda sola sobre el fondo liso y la textura vive en la
zona de atrás. */
-webkit-mask-image:var(--trama-corte);
mask-image:var(--trama-corte);
}
header.cab .env{position:relative;z-index:1}
header.cab.posada{
box-shadow:0 12px 34px rgba(0,0,0,.34);
}
/* El rótulo, en el mismo blanco medido sobre el logotipo que el pie. */
header.cab .marca-txt{color:#F4F4F4}
/* En un móvil la rampa de 380 px no cabe: el patrón se quedaba a medio
encender contra el borde derecho de la pantalla. La firma sigue
ocupando lo mismo —el símbolo no encoge—, así que el arranque no se
mueve; lo que se acorta es la subida. */
@media (max-width:560px){
:root{
--trama-corte: linear-gradient(90deg, transparent 0, transparent 224px,
rgba(0,0,0,.45) 264px, #000 310px);
--trama-corte-difuso: linear-gradient(90deg,
rgba(0,0,0,.30) 0, rgba(0,0,0,.30) 196px,
rgba(0,0,0,.62) 250px, #000 315px);
}
}
header.cab .marca-txt em{color:var(--rojo-vivo)}
/* Los enlaces de navegación */
header.cab .nav-btn{color:#E7E4DF}
header.cab .nav-btn:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
/* La página en la que se está, marcada en rojo claro: sobre antracita
el rojo de marca no llega al contraste mínimo. */
header.cab .nav-btn[aria-current="page"],
header.cab .nav-btn.actual{color:var(--rojo-vivo)}
/* La lupa */
header.cab .lupa{color:#C9C5BE}
header.cab .lupa:hover,
header.cab .lupa[aria-expanded="true"]{background:rgba(255,255,255,.10);color:#FFFFFF}
/* Las tres barras del menú */
header.cab .hamburguesa i,
header.cab .hamburguesa i::before,
header.cab .hamburguesa i::after{background:#EDEAE5}
header.cab .hamburguesa:hover{background:rgba(255,255,255,.08)}
/* El botón de contactar: en blanco perdía el peso que tenía sobre
papel, así que se queda en el rojo de marca, que sobre antracita
destaca más que sobre blanco. */
header.cab .cab-acciones .btn{border-color:transparent}
/* La banda de aviso de encima va un punto más oscura para que las dos
piezas se distingan y no parezca un solo bloque de 90 píxeles. */
.barra-aviso{border-bottom:0} /* la separación la da ya el cambio de tono */
/* El fondo y la trama de esta banda estaban aquí, después del bloque
del membrete, así que lo pisaban: la banda seguía saliendo del mismo
tono que la cabecera. Ahora manda el bloque del membrete, que la
quiere plana y casi negra para que las dos piezas se distingan. */
.barra-movil{background:var(--antracita-2)}
/* ── Trama también en las bandas oscuras de las ventanas ── */
.rgpd-velo{background:var(--antracita);background-image:var(--trama)}
.panel-movil{background:var(--antracita);background-image:var(--trama)}
.mega-lateral{background:var(--antracita);background-image:var(--trama)}
/* La entradilla larga del área, en su propia banda y con medida de
lectura. Dentro de la cabecera hacía que la primera pantalla midiera
dos mil píxeles. */
/* ── LA ENTRADILLA DEL ÁREA ──
Vive dentro de la cabecera, entre el nombre y los botones. Va en
columna estrecha aunque la cabecera sea ancha: una entradilla a
ochenta caracteres por línea no se lee. */
.area-entradilla{max-width:62ch;margin:18px 0 0;padding-top:0}
/* Todos los párrafos iguales. El primero iba a otro cuerpo y a otro
color para hacer de entradilla, y el resultado era una cabecera con
dos letras distintas: se leía como un error, no como una jerarquía. */
.area-entradilla p{
font-size:1.08rem;line-height:1.7;color:var(--tinta-3);
margin-bottom:16px;
}
.area-entradilla p:last-child{margin-bottom:0}
.cabecera-area .cabecera-acciones{margin-top:28px}
/* ============================================================
PORTADA · símbolo integrado en el titular
El logotipo actúa como capitular de la frase: colgado encima
quedaba como una pieza suelta que no pertenecía a nada.
============================================================ */
/* El titular, solo. Aquí había además el símbolo de la marca haciendo
de capitular, con una línea roja que lo cosía a la frase; se ha
quitado porque la firma completa está en la cabecera, a unos
centímetros, y verla dos veces en la misma pantalla era redundante.
Sin ella el eslogan gana el ancho que le faltaba. */
.portada-titular{margin-bottom:22px}
.portada-frase{display:block}
/* ── Cierre de página, sin formulario ── */
.cierre-datos{
list-style:none;display:grid;gap:2px;margin-top:32px;
border-top:1px solid var(--linea-osc);padding-top:6px;
}
.cierre-datos li{
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
padding:11px 0;border-bottom:1px solid var(--linea-osc);
}
.cierre-datos .et{
font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--gris-claro);width:76px;flex:none;
}
.cierre-datos a{color:var(--papel);transition:color .16s}
.cierre-datos a:hover{color:var(--rojo-vivo)}
/* ── LA FLECHA DE «ABRE EN GOOGLE MAPS» ──
Va dibujada en SVG y no con el carácter «↗» (U+2197). Ese carácter
tiene presentación de EMOJI por defecto, así que en iOS y en Android
el sistema lo sustituía por su emoticono a color: en el móvil, junto
a la dirección, aparecía una flecha azul de emoji en medio de un
texto en gris. En el ordenador no se veía porque ahí se dibuja con la
tipografía normal.
Dibujada, es la misma en todos los aparatos y hereda el color del
texto con currentColor. */
.enlace-mapa{position:relative}
.enlace-mapa::after{
content:"";display:inline-block;vertical-align:baseline;
width:.62em;height:.62em;margin-left:.34em;opacity:.6;
background-color:currentColor;
-webkit-mask:var(--flecha-nw) no-repeat center/contain;
mask:var(--flecha-nw) no-repeat center/contain;
}
/* ── Franja del pie, del mismo tono que la cabecera ── */
/* ── UNA SOLA TRAMA EN EL PIE ──
Esta franja está DENTRO de