/* =============================================================================
   Patrimes — hoja de estilo única
   =============================================================================

   Un solo fichero, sin framework y sin compilación. La web son nueve páginas
   estáticas: meter Tailwind o un bundler aquí añadiría una cadena de
   herramientas que hay que mantener durante años para ahorrar unas horas hoy.

   Las tipografías se sirven desde este mismo dominio (scripts/fetch-fonts.sh
   las descarga). Enlazarlas a fonts.gstatic.com envía la IP de cada visitante
   a Google en cada carga, y para eso haría falta consentimiento previo.
   ========================================================================== */

/* --------------------------------------------------------------- Tipografías */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin.a30ddcd349.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-latin.5eb09b5ac0.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ Variables */

:root {
    /* La paleta sale del logotipo, que es negro puro sobre blanco. En lugar de
       inventar un color corporativo que no existe, se trabaja con tinta y papel
       y un solo acento cálido: arcilla, que es el color de la obra. */
    --tinta: #14140f;
    --tinta-70: #47463f;
    --tinta-45: #7c7a71;
    --papel: #faf7f2;
    --papel-2: #f0ebe2;
    --papel-3: #e3dcd0;
    --arcilla: #a8452a;
    --arcilla-osc: #83321d;
    --blanco: #fff;

    --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;

    /* Escala tipográfica fluida: el tamaño depende del ancho de la ventana, así
       que no hay saltos bruscos en tabletas ni titulares que se parten en móvil. */
    --t-display: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
    --t-h2: clamp(1.9rem, 1.1rem + 2.7vw, 3.15rem);
    --t-h3: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
    --t-lead: clamp(1.075rem, 0.98rem + 0.42vw, 1.32rem);

    --ancho: 1180px;
    --ancho-texto: 68ch;
    --borde: 1px solid var(--papel-3);
    --radio: 6px;
}

/* ---------------------------------------------------------------- Cimientos */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Ninguna imagen se deforma nunca. Si una regla fija la altura y se olvida del
   ancho, el atributo width= del HTML toma el mando y la imagen sale estirada;
   con esto, en el peor caso se recorta, que se nota mucho menos y no arruina
   un logotipo. Es la red que faltaba cuando el pie salió aplastado. */
img { object-fit: contain; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.08; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* El foco visible NO se quita. Es la única forma de navegar para quien no usa
   ratón, y quitarlo es la causa número uno de webs inaccesibles. */
:focus-visible {
    outline: 2px solid var(--arcilla);
    outline-offset: 3px;
}

.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinta);
    color: var(--papel);
    padding: 0.75rem 1.25rem;
    z-index: 100;
}
.saltar:focus { left: 0; }

/* ------------------------------------------------------------------- Retícula */

.envoltura {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.seccion { padding-block: clamp(4rem, 9vw, 7.5rem); }
.seccion--ajustada { padding-block: clamp(3rem, 6vw, 5rem); }

.rotulo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--arcilla);
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.rotulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--papel-3);
    max-width: 5rem;
}

.display {
    font-family: var(--serif);
    font-size: var(--t-display);
    line-height: 0.98;
    letter-spacing: -0.015em;
}

.titulo {
    font-family: var(--serif);
    font-size: var(--t-h2);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.entradilla {
    font-size: var(--t-lead);
    line-height: 1.55;
    color: var(--tinta-70);
    max-width: 54ch;
}

/* --------------------------------------------------------------------- Botones */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.7rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-decoration: none;
    border: 1px solid var(--tinta);
    border-radius: var(--radio);
    background: var(--tinta);
    color: var(--papel);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.boton:hover { background: var(--arcilla); border-color: var(--arcilla); transform: translateY(-1px); }

.boton--linea { background: transparent; color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.boton--claro { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.boton--claro:hover { background: var(--arcilla); border-color: var(--arcilla); color: var(--papel); }

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap 0.18s ease, color 0.18s ease;
}
.enlace-flecha:hover { gap: 0.85rem; color: var(--arcilla); }

/* ------------------------------------------------------------------ Cabecera */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--papel) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: var(--borde);
}

.cabecera__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 72px;
}

.marca { display: flex; align-items: center; text-decoration: none; }
.marca img { height: 38px; width: auto; }

.nav { display: flex; align-items: center; gap: 2rem; }

.nav a {
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--tinta-70);
    position: relative;
    padding-block: 0.35rem;
    transition: color 0.18s ease;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--tinta); }
.nav a[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.15rem;
    height: 2px;
    background: var(--arcilla);
}

.cabecera__acciones { display: flex; align-items: center; gap: 1rem; }

.menu-boton {
    display: none;
    background: none;
    border: var(--borde);
    border-radius: var(--radio);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    color: var(--tinta);
}

@media (max-width: 900px) {
    .menu-boton { display: block; }
    .nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--papel);
        border-bottom: var(--borde);
        padding: 0.5rem clamp(1.25rem, 5vw, 3rem) 1.5rem;
    }
    .nav[data-abierto='true'] { display: flex; }
    .nav a { padding-block: 0.85rem; border-bottom: var(--borde); font-size: 1.05rem; }
    .cabecera__acciones .boton { display: none; }
}

/* ---------------------------------------------------------------------- Hero */

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }

.hero__reja {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: end;
}

@media (max-width: 900px) {
    .hero__reja { grid-template-columns: 1fr; align-items: start; }
}

.hero .display em {
    font-style: italic;
    color: var(--arcilla);
}

.hero__pie {
    margin-top: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.hero__figura {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
}
.hero__figura img { width: 100%; height: 100%; object-fit: cover; }

.hero__sello {
    position: absolute;
    left: 0; bottom: 0;
    background: var(--papel);
    padding: 1rem 1.35rem 1.1rem;
    max-width: 78%;
}
.hero__sello strong {
    display: block;
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1;
}
.hero__sello span {
    font-size: 0.78rem;
    color: var(--tinta-45);
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------- Cifras */

.cifras {
    border-block: var(--borde);
    background: var(--papel-2);
}

.cifras__reja {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--papel-3);
}

/* El numero de columnas sale del numero de cifras, no de un style= en la
   pagina: la CSP del vhost es style-src 'self' y el navegador ignora los
   atributos style. Con repeat(4,1fr) fijo y solo dos cifras, las dos columnas
   sobrantes quedaban vacias y se veia el fondo del contenedor como un bloque
   beige suelto. Pasaba en /proyectos/como-funciona/. */
@media (min-width: 721px) {
    .cifras__reja:has(> .cifra:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
    .cifras__reja:has(> .cifra:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .cifras__reja { grid-template-columns: repeat(2, 1fr); }
    /* Con un numero impar, la ultima ocupa la fila entera. Si no, queda un
       hueco con el fondo del contenedor a la vista, que es el mismo fallo. */
    .cifras__reja > .cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cifra {
    background: var(--papel-2);
    padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1rem, 3vw, 1.75rem);
}
.cifra dt {
    font-size: 0.74rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tinta-45);
    font-weight: 700;
    order: 2;
}
.cifra dd {
    margin: 0 0 0.35rem;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem);
    line-height: 0.95;
    order: 1;
}
.cifra { display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ Editorial */

.dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }

.pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; }

.paso {
    counter-increment: paso;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1.9rem;
    border-top: var(--borde);
}
.paso:last-child { border-bottom: var(--borde); }

.paso::before {
    content: counter(paso, decimal-leading-zero);
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--arcilla);
    line-height: 1.2;
}
.paso h3 { font-size: var(--t-h3); font-weight: 700; font-family: var(--sans); letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.paso p { color: var(--tinta-70); margin: 0; font-size: 0.99rem; }

/* --------------------------------------------------------------- Bloque oscuro */

.oscuro {
    background: var(--tinta);
    color: var(--papel);
}
.oscuro .titulo, .oscuro .display { color: var(--papel); }
.oscuro .entradilla { color: color-mix(in srgb, var(--papel) 72%, transparent); }
.oscuro .rotulo { color: color-mix(in srgb, var(--arcilla) 78%, var(--papel)); }
.oscuro .rotulo::after { background: color-mix(in srgb, var(--papel) 25%, transparent); }

.destacado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 4.5rem);
    align-items: center;
}
@media (max-width: 900px) { .destacado { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- Ventajas */

/* Dos columnas fijas, no `auto-fit`: con cuatro tarjetas, `auto-fit` reparte
   tres arriba y una abajo y deja un hueco vacío que parece un fallo. */
.ventajas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--papel-3);
    border: var(--borde);
}

@media (max-width: 700px) {
    .ventajas { grid-template-columns: 1fr; }
}

.ventaja {
    background: var(--papel);
    padding: clamp(1.6rem, 3vw, 2.2rem);
}
.ventaja h3 {
    font-family: var(--sans);
    font-size: 1.075rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin-bottom: 0.6rem;
}
.ventaja p { color: var(--tinta-70); font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------------------------ Proyectos */

.proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.proyecto { text-decoration: none; display: block; }
.proyecto__marco {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
    margin-bottom: 0.9rem;
}
.proyecto__marco img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.proyecto:hover .proyecto__marco img { transform: scale(1.04); }
.proyecto h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.proyecto p { font-size: 0.88rem; color: var(--tinta-45); margin: 0; }

/* ----------------------------------------------------------------- Formulario */

.formulario { display: grid; gap: 1.15rem; }

/* En dos columnas, el formulario empieza a la misma altura que el título de al
   lado y el primer campo queda pegado al borde superior de la sección. Un poco
   de aire lo separa y deja claro que es un bloque aparte. */
@media (min-width: 901px) {
    .dos-columnas > div > .formulario { margin-top: 3.25rem; }
}

.campo { display: grid; gap: 0.4rem; }

.campo label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-45);
}

.campo input,
.campo select,
.campo textarea {
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--papel-3);
    border-radius: var(--radio);
    padding: 0.8rem 0.95rem;
    width: 100%;
    transition: border-color 0.18s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--arcilla); }
.campo textarea { resize: vertical; min-height: 7rem; }

.campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .campo--doble { grid-template-columns: 1fr; } }

.campo__error { color: var(--arcilla-osc); font-size: 0.85rem; font-weight: 600; }

.consentimiento {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    font-size: 0.86rem;
    color: var(--tinta-70);
    line-height: 1.5;
}
.consentimiento input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--arcilla); }

/* El campo trampa para robots: invisible para personas, presente en el DOM.
   `display:none` lo saltan muchos bots; sacarlo del flujo funciona mejor. */
.trampa {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.aviso-envio {
    padding: 1rem 1.2rem;
    border-radius: var(--radio);
    font-size: 0.94rem;
    font-weight: 600;
}
.aviso-envio[data-tipo='ok'] { background: #e6efe6; color: #29512f; }
.aviso-envio[data-tipo='error'] { background: #f6e6e2; color: var(--arcilla-osc); }

/* ---------------------------------------------------------------- Riesgos */

.riesgos {
    border: 1px solid var(--papel-3);
    background: var(--papel-2);
    border-radius: var(--radio);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
.riesgos h2 { font-family: var(--sans); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.005em; margin-bottom: 1rem; }
.riesgos ol { margin: 0 0 1.15rem; padding-left: 1.25rem; color: var(--tinta-70); font-size: 0.93rem; }
.riesgos li { margin-bottom: 0.6rem; }
.riesgos p { font-size: 0.93rem; color: var(--tinta-70); }

/* --------------------------------------------------------------------- Pie */

.pie { background: var(--tinta); color: var(--papel); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pie a { color: color-mix(in srgb, var(--papel) 74%, transparent); text-decoration: none; }
.pie a:hover { color: var(--papel); text-decoration: underline; }

.pie__reja {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 860px) { .pie__reja { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie__reja { grid-template-columns: 1fr; } }

/* `width: auto` NO es decorativo: sin él, el atributo width="1600" del HTML
   manda sobre el ancho, `max-width: 100%` lo recorta al de la columna y la
   altura fija de 24px deja el logotipo aplastado. Se dibujaba a 319×24 cuando
   su proporción pide 101×24: estirado 3,2 veces en horizontal.

   La regla de la cabecera (.marca img) sí lo llevaba desde el principio; esta
   lo perdió al pasar el pie de la página suelta a la plantilla común. Por eso
   solo se veía mal abajo. */
.pie__marca img { height: 34px; width: auto; margin-bottom: 1.25rem; }
.pie p { font-size: 0.9rem; color: color-mix(in srgb, var(--papel) 68%, transparent); }
.pie__redes { display: flex; gap: 0.9rem; margin-top: 1.25rem; }
.pie__redes a { display: inline-flex; color: color-mix(in srgb, var(--papel) 74%, transparent); }
.pie__redes a:hover { color: var(--papel); text-decoration: none; }
.pie__redes svg { width: 21px; height: 21px; display: block; }

.pie h2 {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 1rem;
    color: color-mix(in srgb, var(--papel) 55%, transparent);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.92rem; }

.pie__legal {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid color-mix(in srgb, var(--papel) 16%, transparent);
    font-size: 0.8rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--papel) 58%, transparent);
}

.pie__fin {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--papel) 50%, transparent);
}

/* ------------------------------------------------------- Aparición al hacer scroll */

@media (prefers-reduced-motion: no-preference) {
    .aparece {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .aparece.visible { opacity: 1; transform: none; }
}

/* =============================================================================
   Componentes de las páginas interiores
   ========================================================================== */

.cabeza {
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
    border-bottom: var(--borde);
}
.cabeza .display { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.6rem); }

.cifras__reja--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
    .cifras__reja--tres { grid-template-columns: 1fr; }
}

.lista-marcada { list-style: none; margin: 0; padding: 0; }
.lista-marcada li {
    position: relative;
    padding: 1.1rem 0 1.1rem 2.1rem;
    border-bottom: var(--borde);
    color: var(--tinta-70);
}
.lista-marcada li:first-child { border-top: var(--borde); }
.lista-marcada li::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 1.65rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--arcilla);
}

.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.lista-simple li {
    padding-left: 1.4rem;
    position: relative;
    font-size: 0.97rem;
}
.lista-simple li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--arcilla);
}

/* Reparto en dos columnas que en pantallas medianas ya cabe, y en móvil no. */
.reparto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 760px) { .reparto { grid-template-columns: 1fr; } }

.reparto h3 {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.reparto p { font-size: 0.97rem; margin: 0; }
.oscuro .reparto p, .oscuro .lista-simple li {
    color: color-mix(in srgb, var(--papel) 72%, transparent);
}

.ficha {
    border-top: var(--borde);
    padding-block: 1.4rem;
}
.ficha:last-of-type { border-bottom: var(--borde); }
.ficha h3 {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-45);
    margin-bottom: 0.55rem;
}
.ficha p { margin: 0; color: var(--tinta-70); }

.llamada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.llamada .boton { flex-shrink: 0; }

.pasos--largos .paso h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.9rem;
}
.plazo {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--arcilla);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    white-space: nowrap;
}

/* ------------------------------------------------------ Fichas de proyecto */

.fichas-proyecto { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

.fp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
@media (max-width: 820px) { .fp { grid-template-columns: 1fr; } }

.fp__foto {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
}
.fp__foto img { width: 100%; height: 100%; object-fit: cover; }

/* En pantallas anchas se alternan foto y texto. En móvil, la foto SIEMPRE va
   primero: alternar el orden en una sola columna se lee como un error. */
@media (min-width: 821px) {
    .fp--invertida .fp__foto { order: 2; }
}

.fp__lugar {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--arcilla);
    margin-bottom: 0.7rem;
}
.fp__texto h2 {
    font-family: var(--serif);
    font-size: var(--t-h3);
    line-height: 1.1;
    margin-bottom: 0.9rem;
}
.fp__texto p { color: var(--tinta-70); font-size: 0.98rem; }

.fp__datos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 1.4rem 0 0;
    padding-top: 1.2rem;
    border-top: var(--borde);
}
.fp__datos div { display: grid; gap: 0.2rem; }
.fp__datos dt {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-45);
    font-weight: 700;
}
.fp__datos dd { margin: 0; font-weight: 700; font-size: 0.95rem; }

/* =============================================================================
   Repaso responsive
   =============================================================================
   Los cortes no están en «tamaños de dispositivo» —esa lista cambia cada año—
   sino donde el propio contenido se rompe, que es lo que se ve probando.
   ========================================================================== */

/* Tabletas en vertical: dos columnas siguen cabiendo, pero apretadas. */
@media (max-width: 1024px) {
    .nav { gap: 1.35rem; }
    .nav a { font-size: 0.875rem; }
}

/* A partir de aquí el menú pasa a botón; las rejas de dos columnas de la
   portada y las interiores se apilan (ya declarado en cada componente). */
@media (max-width: 900px) {
    .hero__figura { aspect-ratio: 16 / 10; max-height: 60vh; }
    .hero__sello { max-width: 65%; }
    .destacado > div:first-child { margin-bottom: 0.5rem; }
}

/* Móviles: se recorta el aire vertical, que en pantallas pequeñas obliga a un
   scroll enorme entre bloque y bloque. */
@media (max-width: 620px) {
    body { font-size: 1.02rem; }
    .seccion { padding-block: 3.25rem; }
    .seccion--ajustada { padding-block: 2.5rem; }
    .cabeza { padding-block: 2.5rem 1.75rem; }

    .hero__pie { flex-direction: column; align-items: stretch; }
    .hero__pie .boton { width: 100%; }

    .paso { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.85rem; }
    .paso::before { font-size: 1.2rem; }

    .llamada { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .llamada .boton { width: 100%; }

    .fp__datos { gap: 1.1rem 1.5rem; }
    .cifra { padding: 1.35rem 1rem; }

    .riesgos { padding: 1.4rem 1.25rem; }
    .riesgos ol { padding-left: 1.1rem; }

    /* El botón de enviar a ancho completo: en móvil un botón pequeño alineado
       a la izquierda al final de un formulario largo se pasa por alto. */
    .formulario .boton { width: 100%; justify-self: stretch !important; }
}

/* Móviles estrechos (360 px y por debajo): la tipografía de los titulares ya
   baja sola por el clamp, pero las cifras grandes se salían de su celda. */
@media (max-width: 400px) {
    .cifras__reja { grid-template-columns: 1fr; }
    .cifra dd { font-size: 2.6rem; }
    .rotulo::after { display: none; }
}

/* Pantallas muy anchas: el texto no debe estirarse hasta perder la línea de
   lectura, así que la envoltura tiene tope y el cuerpo respira más. */
@media (min-width: 1600px) {
    :root { --ancho: 1280px; }
}

/* Impresión: los dossieres y las páginas legales se imprimen. Sin esto salen
   con el fondo oscuro y el menú pegado en cada hoja. */
@media print {
    .cabecera, .pie, .llamada .boton, .menu-boton, .saltar { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .oscuro { background: #fff !important; color: #000 !important; }
    .oscuro * { color: #000 !important; }
    .seccion { padding-block: 1.5rem; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* =============================================================================
   Objetivos táctiles
   =============================================================================
   Medido con Playwright a 390 px: los enlaces del pie median 17 px de alto y la
   casilla de consentimiento 18. El mínimo del criterio WCAG 2.5.8 son 24 px, y
   la recomendación de Apple y Google son 44. Un enlace de 17 px se falla con el
   pulgar y el usuario acaba pulsando el de al lado.

   No se toca el tamaño del texto: se amplía el área pulsable con relleno.
   ========================================================================== */

@media (pointer: coarse), (max-width: 900px) {
    .marca { padding-block: 0.5rem; }

    .pie ul { gap: 0.15rem; }
    .pie ul a {
        display: inline-block;
        padding-block: 0.55rem;
        min-height: 44px;
        line-height: 1.9;
    }
    .pie__marca a { display: inline-block; padding-block: 0.35rem; }

    .enlace-flecha { padding-block: 0.5rem; }

    .consentimiento { gap: 0.85rem; align-items: center; }
    .consentimiento input { width: 1.5rem; height: 1.5rem; margin-top: 0; }

    .nav a { min-height: 44px; display: flex; align-items: center; }
}

/* ------------------------------------------------------------- Texto legal */

/* Las tres páginas legales llegan importadas del WordPress y son texto largo y
   denso. Se les da medida de lectura y jerarquía; nada más. */
.texto-legal {
    /* 68ch es la medida cómoda para leer prosa seguida, pero un texto legal no
       se lee así: se busca un apartado, se comprueba una cláusula y se sale.
       Con la columna estrecha el documento crece hasta hacerse interminable y
       cuesta más encontrar nada. 88ch va mejor a este tipo de página. */
    /* El contenedor conserva el ancho del sitio para que el texto empiece
       justo debajo del título y no aparezca centrado, descolgado del resto de
       la página. Lo que se limita es la medida de cada bloque. */
    max-width: var(--ancho);
    font-size: 1rem;
    color: var(--tinta-70);
}

.texto-legal > * { max-width: 88ch; }
.texto-legal > table { max-width: 100%; }
.texto-legal h2 {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    color: var(--tinta);
    margin: 2.75rem 0 0.9rem;
}
.texto-legal h3 {
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tinta);
    margin: 2rem 0 0.6rem;
}
.texto-legal h2:first-child, .texto-legal h3:first-child { margin-top: 0; }
.texto-legal ul, .texto-legal ol { padding-left: 1.35rem; margin-bottom: 1.2rem; }
.texto-legal li { margin-bottom: 0.45rem; }
.texto-legal a { color: var(--arcilla); }
.texto-legal table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.92rem; }
.texto-legal th, .texto-legal td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: var(--borde); }
.texto-legal th { color: var(--tinta); font-weight: 700; }

/* Las tablas de cookies tienen columnas fijas y en móvil no caben. Se les da
   scroll propio en lugar de dejar que rompan el ancho de la página. */
@media (max-width: 620px) {
    .texto-legal table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --------------------------------------------------- Antes, durante, después */

.trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; } }

.trio figure { margin: 0; }
.trio picture, .trio img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio);
}
.trio figcaption {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--papel) 68%, transparent);
}
.trio figcaption span {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--arcilla) 75%, var(--papel));
    margin-bottom: 0.35rem;
}

/* El <picture> es un contenedor sin caja propia: sin esto, las fotos de las
   fichas y de la portada pierden el recorte que les da su marco. */
.proyecto__marco picture, .fp__foto picture, .hero__figura picture { display: block; height: 100%; }
.proyecto__marco img, .fp__foto img, .hero__figura img { width: 100%; height: 100%; object-fit: cover; }

/* Sección que va justo debajo de la cabecera de página.
 *
 * Llevaba `padding-top: 0` en línea, con la idea de que la cabecera ya aporta
 * su propio espacio inferior. No lo aporta: el contenido quedaba a UN píxel de
 * la línea divisoria, pegado, como si se hubiera roto la maquetación. Se veía
 * en Contacto y en Casos de éxito.
 *
 * No se usa el espacio completo de `.seccion` —sería demasiado después de una
 * cabecera— sino algo más contenido pero suficiente para que se lea como un
 * bloque nuevo y no como una continuación cortada.
 */
.seccion--tras-cabeza {
    padding-top: clamp(2.75rem, 5vw, 4.5rem);
}

/* ------------------------------------------------------------------ Preguntas
 * Acordeón de preguntas frecuentes.
 *
 * <details> nativo y no JavaScript: funciona sin scripts, el navegador ya le da
 * el teclado y la semántica, y —lo que importa aquí— el buscador ve el texto de
 * la respuesta aunque esté plegado. Un acordeón que oculta el contenido con
 * display:none desde JS se lo puede acabar tragando.
 */
.faq { margin-top: 2.5rem; max-width: 88ch; }

.faq__item {
    border-top: var(--borde);
    padding: 0;
}
.faq__item:last-child { border-bottom: var(--borde); }

.faq__item > summary {
    cursor: pointer;
    list-style: none;
    padding: 1.35rem 2.5rem 1.35rem 0;
    position: relative;
    font-weight: 600;
    font-size: 1.075rem;
    color: var(--tinta);
}
.faq__item > summary::-webkit-details-marker { display: none; }

.faq__item > summary::after {
    content: '+';
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--arcilla);
    transition: transform .18s ease;
}
.faq__item[open] > summary::after { content: '−'; }

.faq__item > summary:hover { color: var(--arcilla); }
.faq__item > summary:focus-visible {
    outline: 2px solid var(--arcilla);
    outline-offset: 3px;
}

.faq__item > p {
    margin: 0 0 1.5rem;
    padding-right: 2.5rem;
    color: var(--tinta-70);
    max-width: 78ch;
}

/* ===========================================================================
   Fotografía: piezas añadidas para que la web enseñe obra y no solo la cuente.
   Todas fluidas y sin ningún ancho fijo: el único punto de ruptura real es el
   paso de dos columnas a una.
   ========================================================================= */

/* --- Vista de portada ------------------------------------------------------
   Al lado del titular y no debajo. La versión a sangre quedaba preciosa pero
   obligaba a hacer scroll para verla en un portátil de 800 px de alto, y la
   primera pantalla es justo donde hay que demostrar que hay obra detrás.

   La altura se ata al alto de la ventana, no al ancho: así la foto crece en un
   monitor grande y se recorta sola en uno bajo, en lugar de empujar el
   contenido fuera del pliegue. */
.hero { padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }

/* Columnas iguales y separación algo menor que la del resto del sitio: con el
   hueco de 5rem la columna de texto se quedaba en 517 px, tres por debajo de
   lo que miden los dos botones juntos, y se apilaban. Así caben en línea y de
   paso la foto gana ancho. */
.hero__reja {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
}

/* Esta consulta REPITE la que ya hay en la linea 308 a proposito. La regla de
   arriba vive al final de la hoja, o sea despues de aquella, y a igual
   especificidad gana la ultima: sin esto la cabecera NO se apilaba en movil y
   el texto quedaba espachurrado en media columna con la foto diminuta al lado.
   No basta con que la regla original exista; tiene que ir despues. */
@media (max-width: 900px) {
    .hero__reja {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

.hero__texto { max-width: 34rem; }

/* El titular de portada NO usa --t-display tal cual: esa escala solo mira el
   ancho, y en un portátil de 768 px de alto tres líneas a 96 px empujaban los
   botones fuera del pliegue. Aquí manda la menor de las dos dimensiones, así
   que en una pantalla baja el titular encoge en vez de esconder la llamada a
   la acción. */
.hero .display { font-size: clamp(2.25rem, min(4.3vw, 6.6vh), 4.5rem); line-height: 1.04; }

/* La entradilla de portada es más corta y más estrecha que la del resto del
   sitio: aquí compite por el pliegue con el titular, la foto y los botones.
   Medido, pasaba de 196 px de alto, que es casi la mitad de lo que sobra. */
.hero .entradilla {
    font-size: clamp(1rem, 0.94rem + 0.22vw, 1.12rem);
    max-width: 30rem;
    margin-top: 1.1rem;
}
.hero__pie { margin-top: 1.5rem; }

.hero__vista {
    position: relative;
    margin: 0;
    /* Altura por el alto de la ventana y no por la proporción de la foto: si se
       deja en 4/3, el ancho de la columna manda y la imagen se queda en 370 px
       de alto con media pantalla vacía debajo. Con object-fit: cover el recorte
       lo asume la foto, que es apaisada y tiene margen de sobra a los lados. */
    height: min(56vh, 31rem);
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
}
.hero__vista img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Apilada, la foto va DESPUÉS del texto y recupera su proporción completa:
   en un móvil no hay pliegue que respetar y sí ganas de ver la vivienda. */
@media (max-width: 900px) {
    /* 4/5 vertical: es la proporcion que tenia la portada en movil antes de
       rehacer la cabecera para escritorio. El alto en vh de arriba solo tiene
       sentido cuando la foto comparte fila con el texto. */
    .hero__vista { height: auto; aspect-ratio: 4 / 5; }
}

/* --- Pareja antes / después ------------------------------------------------
   Lado a lado y sin deslizador: comparar dos fotos es un gesto de la vista, no
   de la mano, y un deslizador exige JavaScript que esta web no carga. En móvil
   se apilan, con la etiqueta siempre visible para no perder cuál es cuál. */
.pares {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.par { margin: 0; }

.par__foto {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
}
.par__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.par__etiqueta {
    position: absolute;
    top: 0.85rem; left: 0.85rem;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    border-radius: calc(var(--radio) / 2);
}
.par--despues .par__etiqueta { background: var(--arcilla); color: var(--blanco); }

.par__pie {
    margin-top: 0.85rem;
    font-size: 0.92rem;
    color: var(--tinta-70);
}

/* --- Retrato con texto al lado (Quiénes somos) -----------------------------
   La foto es vertical y el texto largo: en dos columnas la foto manda y el
   texto respira. Por debajo de 820 px se apila, con la foto primero. */
.retrato {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.75rem, 5vw, 3.5rem);
    align-items: center;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
@media (max-width: 820px) {
    .retrato { grid-template-columns: 1fr; }
}

.retrato__foto {
    /* 3/4 dejaba la foto disparada: en una columna de 500 px salian 670 px de
       alto contra 250 px de texto al lado, y mas de 400 px de hueco debajo.
       Con el tope de altura la fila la marca la foto, no su proporcion. */
    aspect-ratio: 4 / 5;
    max-height: min(52vh, 460px);
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
    margin: 0;
}

/* En una sola columna una foto vertical ocupa la pantalla entera y hay que
   pasarla de largo para seguir leyendo. Apaisada y con tope de alto. */
@media (max-width: 820px) {
    .retrato__foto { aspect-ratio: 3 / 2; max-height: 44vh; }
}
.retrato__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Foto dentro del proceso ----------------------------------------------
   Rompe el muro de texto de los ocho pasos sin robarles protagonismo: banda
   ancha y baja, no una foto por paso. */
.banda-foto {
    margin: clamp(2rem, 5vw, 3.5rem) 0;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
}
.banda-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 720px) {
    .banda-foto { aspect-ratio: 4 / 3; }
}

.banda-foto + .banda-foto__pie {
    margin-top: -0.4rem;
    font-size: 0.9rem;
    color: var(--tinta-45);
}

/* ------------------------------------------------------------------ Blog */

/* La prosa de un articulo SI se lee seguida, al reves que un texto legal, asi
   que aqui la medida corta manda: 68ch. El contenedor mantiene el ancho del
   sitio para que el texto arranque alineado con el resto de la pagina y no
   aparezca centrado y descolgado, igual que en .texto-legal. */
.articulo {
    max-width: var(--ancho);
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--tinta-70);
}
.articulo > * { max-width: var(--ancho-texto); }
.articulo > figure, .articulo > table, .articulo > .destacado { max-width: 100%; }
.articulo p { margin-bottom: 1.25rem; }
.articulo h2 {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem);
    line-height: 1.2;
    color: var(--tinta);
    margin: 3rem 0 1rem;
    text-wrap: balance;
}
.articulo h3 {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tinta);
    margin: 2.1rem 0 0.6rem;
}
.articulo h2:first-child, .articulo h3:first-child { margin-top: 0; }
.articulo ul, .articulo ol { padding-left: 1.35rem; margin-bottom: 1.35rem; }
.articulo li { margin-bottom: 0.5rem; }
.articulo a { color: var(--arcilla); }
.articulo strong { color: var(--tinta); }
.articulo table { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; font-size: 0.94rem; }
.articulo th, .articulo td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: var(--borde); }
.articulo th { color: var(--tinta); font-weight: 700; }
.articulo td:not(:first-child), .articulo th:not(:first-child) { font-variant-numeric: tabular-nums; }
/* Una tabla de cifras no cabe en 360px por mucho que se apriete: scroll propio
   dentro de su caja, nunca dejando que rompa el ancho de la pagina. */
@media (max-width: 680px) {
    .articulo table { display: block; overflow-x: auto; white-space: nowrap; }
}
.articulo blockquote {
    margin: 1.75rem 0;
    padding-left: 1.1rem;
    border-left: 3px solid var(--arcilla);
    color: var(--tinta);
    font-family: var(--serif);
    font-size: 1.1rem;
}

/* Ficha de datos del articulo: fecha y minutos de lectura. */
.articulo__ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 1.25rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-45);
}

/* Cierre de articulo: la llamada a la accion, sin gritar. */
.articulo__cierre {
    max-width: var(--ancho-texto);
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: var(--borde);
}

/* --------------------------------------------------- Listado de entradas */

.entradas { display: grid; gap: 0; }
.entrada {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1.75rem, 3vw, 2.5rem);
    border-top: var(--borde);
}
.entrada:last-child { border-bottom: var(--borde); }
.entrada__dato {
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-45);
    line-height: 1.6;
}
.entrada__titulo {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
    line-height: 1.22;
    color: var(--tinta);
    margin: 0 0 0.6rem;
    text-wrap: balance;
}
.entrada__titulo a { color: inherit; text-decoration: none; }
.entrada__titulo a:hover, .entrada__titulo a:focus-visible { color: var(--arcilla); }
.entrada__resumen { margin: 0 0 0.9rem; color: var(--tinta-70); }
@media (max-width: 760px) {
    .entrada { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Portada de articulo: banda de foto entre la cabecera y el texto. Va a lo
   ancho del contenedor, no del viewport, para que alinee con el titulo. */
.articulo__portada {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
}
.articulo__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .articulo__portada { aspect-ratio: 3 / 2; } }

/* El listado gana una miniatura. Se declara DESPUES de .entrada para que gane
   sin subir especificidad, y en movil vuelve a una sola columna con la foto
   arriba, que es donde el pulgar la ve primero. */
.entrada { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr) minmax(0, 1.1fr); }
.entrada__foto {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
}
.entrada__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .entrada { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .entrada__foto { display: none; } }
@media (max-width: 760px) { .entrada { grid-template-columns: 1fr; } }

/* El menu paso de cinco enlaces a seis al entrar el Blog, y entre 901 y 1100 px
   ya no cabe en una linea: se partia en dos y descuadraba la cabecera. Medido a
   1024 px. En vez de subir el punto del menu hamburguesa —que dejaria sin menu
   a las tabletas apaisadas— se aprieta el espaciado solo en esa franja, que es
   donde falta sitio. `nowrap` es el seguro: si algun dia se anade un septimo
   enlace, preferimos verlo salirse en la comprobacion a que se parta callando. */
.nav { flex-wrap: nowrap; }
@media (min-width: 901px) and (max-width: 1100px) {
    .nav { gap: 1.15rem; }
    .nav a { font-size: 0.86rem; }
    .cabecera__fila { gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Dialogo de Cookiebot: en escritorio, compacto y anclado abajo a la derecha.
   En movil se deja el comportamiento nativo, que ahi la hoja a pantalla
   completa es lo correcto.

   Tres cosas que hay que saber antes de tocar esto:

   1. Cookiebot inyecta sus estilos como hoja adoptada desde uc.js, no como
      <style> ni como <link>. No aparece en document.styleSheets y no se puede
      leer, asi que la unica via es ganarle en la cascada.
   2. Por eso los selectores llevan `html body` y la clase de la variante: sin
      eso, Cookiebot define `#CybotCookiebotDialog.CybotMultilevel` y gana por
      especificidad aunque pongas !important. Comprobado: con el selector
      corto la posicion si cambia pero el ancho se queda en 900px.
   3. La CSP del vhost es `style-src 'self'`, asi que esto solo funciona desde
      este fichero. Un <style> inyectado en la pagina lo bloquea el navegador.

   No se toca el contenido del dialogo, solo su caja. Los tres botones
   (Denegar, Permitir la seleccion, Permitir todas) siguen en la misma fila y
   del mismo tamano: rechazar tiene que costar lo mismo que aceptar.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    html body #CybotCookiebotDialog.CybotMultilevel,
    html body #CybotCookiebotDialog.CybotEdge,
    html body #CybotCookiebotDialog {
        top: auto !important;
        left: auto !important;
        right: 1.75rem !important;
        bottom: 1.75rem !important;
        transform: none !important;
        width: 480px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 3.5rem) !important;
        max-height: min(78vh, 620px) !important;
    }
}

/* --- Utilidades ------------------------------------------------------------
   La CSP del vhost es style-src 'self', asi que el navegador ignora los
   atributos style. Habia 141 en las paginas y ninguno se aplicaba: entre ellos
   doce fondos de seccion que nunca se llegaron a ver, y por eso la web se leia
   como un unico bloque plano.

   Estas clases son la traduccion literal de aquellos estilos, valor a valor:
   el objetivo era que la web se viera como estaba escrita, no rediseñarla.

   Convencion de nombres:
     sup-125 / inf-250   margen superior / inferior, en centesimas de rem
     med-22              max-width en ch, para medir la linea de un titular
   Antes de anadir una utilidad nueva, mira si lo que quieres es una clase de
   componente: esto es para ajustes puntuales, no para maquetar. */

/* Margen superior */
.sup-50 { margin-top: 0.5rem; }
.sup-75 { margin-top: 0.75rem; }
.sup-100 { margin-top: 1rem; }
.sup-125 { margin-top: 1.25rem; }
.sup-150 { margin-top: 1.5rem; }
.sup-175 { margin-top: 1.75rem; }
.sup-200 { margin-top: 2rem; }
.sup-225 { margin-top: 2.25rem; }
.sup-250 { margin-top: 2.5rem; }

/* Margen inferior */
.inf-75 { margin-bottom: 0.75rem; }
.inf-125 { margin-bottom: 1.25rem; }
.inf-150 { margin-bottom: 1.5rem; }
.inf-250 { margin-bottom: 2.5rem; }
.inf-275 { margin-bottom: 2.75rem; }

/* Medida de linea. En titulares mide el corte; en texto, la lectura. */
.med-14 { max-width: 14ch; }
.med-16 { max-width: 16ch; }
.med-17 { max-width: 17ch; }
.med-18 { max-width: 18ch; }
.med-19 { max-width: 19ch; }
.med-20 { max-width: 20ch; }
.med-22 { max-width: 22ch; }
.med-24 { max-width: 24ch; }
.med-26 { max-width: 26ch; }
.med-28 { max-width: 28ch; }
.med-46 { max-width: 46ch; }
.med-52 { max-width: 52ch; }
.med-54 { max-width: 54ch; }
.med-56 { max-width: 56ch; }
.med-62 { max-width: 62ch; }
.med-64 { max-width: 64ch; }

/* Fondos y filetes de seccion. Estos doce son los que no se veian. */
.fondo-2 { background: var(--papel-2); }
.filete-arriba { border-top: 1px solid var(--papel-3); }
.sin-filete-abajo { border-bottom: 0; }

/* Ajustes puntuales */
.sin-margen { margin: 0; }
.sin-aire { padding-block: 0; }
.tam-h3 { font-size: var(--t-h3); }
.tam-096 { font-size: 0.96rem; }
.tam-081 { font-size: 0.8125rem; }
.interlinea-150 { line-height: 1.5; }
.al-inicio { justify-self: start; }
.color-tinta-45 { color: var(--tinta-45); }
.color-papel-72 { color: color-mix(in srgb, var(--papel) 72%, transparent); }
.reja { display: grid; }
.hueco-065 { gap: 0.65rem; }
.oculto { display: none; visibility: hidden; }