/* =============================================================================
   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);
}

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

.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 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 {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--papel-2);
    margin: 0;
}
.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);
}