@charset "utf-8";
/*
Theme Name: Calconsa
Author: Ricardo Juárez
Author URI: https://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later
Copyright: (c) 2026 Ricardo Juárez
Text Domain: calconsa
*/


:root {

    /* Colores — Figma: PRIMARY COLORS / Mode 1 */
    --primary:     #FFFFFF; /* White */
    --contrast:    #000000; /* Black */
    --accent:      #FF4800; /* Orange */
    --accent-light:#FFB79D; /* Light Orange */
    --grey:        #999999; /* Dark Gray */
    --grey-light:  #D2D2D2; /* Light Gray */
    --red:         #FF383C; /* Accents/Red — Figma, solo estados de error de formularios */

    /* Espaciados */
    --pads: 5px;
    --pad:  20px;
    --pad2: 30px;
    --padm: 35px;
    --padb: 60px;
    --padh: 95px;

    /* Grid — Figma: grid.styles */
    --grid-cols:        12;
    --grid-cols-mobile: 6;
    --grid-gutter:      20px;
    --grid-margin:      20px;

    /* Fuentes — Klim Söhne (licencia en assets/Klim-Order-26070608) */
    --sans: 'Söhne', sans-serif;
    --mono: 'Söhne Mono', monospace;

    /* Ritmo tipográfico — post-content (= --lh-body16, ver bloque de tipografía) */
    --line-height: var(--lh-body16);

    /* Header */
    --header-h:    22px;
    --header-band: calc(var(--pad) * 2 + var(--header-h));

    /* Tipografía — tamaños (Figma: text.styles) — un token por estilo,
       así en mobile (responsive.css) se sobreescribe una vez y cambia en todos sus usos */
    /* El hero crece con la ventana en vez de quedarse en 160px: así el
       titular cabe en DOS líneas en cualquier escritorio en vez de partirse
       en tres. El 11,6 sale de medir el texto real —"Traducimos la
       arquitectura" ocupa 11,2 veces el tamaño de letra— con un poco de
       holgura para que no entre la palabra siguiente. Tope en los 160px del
       diseño, que es lo que ya cabía a 1920. Si el titular cambia mucho de
       largo, este número es el que se toca (o se mete el salto a mano en el
       campo, que el textarea lo respeta). */
    --fs-hero: clamp(58px, calc((100vw - var(--pad) * 2) / 11.6), 160px);
    --lh-hero: calc(var(--fs-hero) * 0.875);
    --ls-hero: -0.03em;

    --fs-h1: 50px;         --lh-h1: 51px;         --ls-h1: -0.01em;
    --fs-h1-search: 50px;  --lh-h1-search: 55px;  --ls-h1-search: -0.01em;
    --fs-h2: 32px;         --lh-h2: 38px;         --ls-h2: -0.01em;

    /* Estilos que en desktop son el mismo que su pareja y en móvil se separan
       (el Figma tiene un solo H2 en desktop y cuatro variantes en móvil): aquí
       heredan, y responsive.css les da su valor. */
    --fs-h1-menu: var(--fs-h1);  --lh-h1-menu: var(--lh-h1);  --ls-h1-menu: var(--ls-h1);
    --ls-h2-negro: var(--ls-h2);
    --lh-h2-blanco: var(--lh-h2);     --ls-h2-blanco: var(--ls-h2);
    --lh-h2-slideshow: var(--lh-h2);  --ls-h2-slideshow: var(--ls-h2);
    --lh-ui16-blanco: var(--lh-ui16);

    /* Pesos: solo los que cambian en móvil. El resto va en la clase. */
    --fw-row-home: 400;
    --fw-ui16-blanco: 400;

    --fs-row-home: 50px;  --lh-row-home: 50px;  --ls-row-home: -0.01em;
    --fs-body22: 22px;    --lh-body22: 26px;     --ls-body22-negro: 0;  --ls-body22-blanco: 0.01em;
    --fs-body16: 16px;    --lh-body16: 18px;     --ls-body16-negro: 0;  --ls-body16-blanco: 0.02em;

    --fs-ui16: 16px;            --lh-ui16: 16px;            --ls-ui16: 0.01em;
    --fs-ui-meta-mono: 12px;    --lh-ui-meta-mono: 13px;    --ls-ui-meta-mono: 0.01em;
    --fs-ui-meta: 16px;         --lh-ui-meta: 16px;         --ls-ui-meta: 0;

    --fs-project-details: 12px;  --lh-project-details: 14px;  --ls-project-details: 0.01em;
    --fs-counter: 12px;          --lh-counter: 12px;          --ls-counter: 0.02em;

    --fs-testimonial: 42px;    --lh-testimonial: 46px;    --ls-testimonial: -0.01em;
    /* Métricas (Criterio). No sale de la escala: medido en el Figma, la altura
       de mayúscula es de 55px y en Söhne son 0.72 del cuerpo -> 76. */
    --fs-metrica: 76px;        --lh-metrica: 80px;        --ls-metrica: -0.01em;
    /* Titular de las tarjetas de descarga. No sale de la escala: en el Figma
       ocupa el 54% del ancho de la tarjeta y a 50px (h1) se quedaba en el 43%,
       con lo que "Recursos gráficos" no llegaba a partirse en dos líneas. */
    --fs-descarga: 64px;       --lh-descarga: 64px;       --ls-descarga: -0.01em;
    --fs-cookies: 13px;        --lh-cookies: 14px;        --ls-cookies: 0.01em;
    --fs-initial-name: 18px;   --lh-initial-name: 22px;   --ls-initial-name: 0.01em;

    --fs-job-title: 50px;  --lh-job-title: 50px;  --ls-job-title: -0.01em;
    --fs-job-body: 16px;   --lh-job-body: 18px;   --ls-job-body: 0.01em;

    /* Misc */
    /* Lo que la banda del header se mete por encima de sí misma para tapar la
       franja que iOS deja sobre los elementos fijos (la zona de la hora). */
    --header-sangrado: 120px;

    --real100:   100vh;
    --real100:   100svh;  /* el alto con la barra del navegador puesta. A diferencia de
                             dvh, este NO cambia al recogerse la barra: la portada se
                             queda quieta en vez de estirarse mientras haces scroll.
                             Quien no entienda svh se queda con la línea de arriba. */
    --radius:    4px;
    --transition: 0.3s ease;
}


/* ============================================================
   BASE BODY
   ============================================================ */

/* El atributo hidden lo pinta el navegador como display:none, pero es una
   regla suya de baja prioridad: cualquier display propio (grid, flex...)
   la pisa y el elemento se ve igualmente. Con esto, hidden siempre oculta. */
[hidden] { display: none !important; }

body {
    font-family: var(--sans);
    font-size: var(--fs-body16);
    line-height: var(--lh-body16);
    letter-spacing: var(--ls-body16-negro);
    font-weight: 400;
    color: var(--contrast);
    background-color: var(--primary);
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}


/* ============================================================
   TIPOGRAFÍA — estilos de texto (Figma: text.styles)
   ============================================================ */

/* -- DISPLAY -- */
.t-hero {
    font-family: var(--sans);
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
    font-weight: 400;
    letter-spacing: var(--ls-hero);
}

/* -- HEADING -- */
.t-h1 {
    font-family: var(--sans);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: 500;
    letter-spacing: var(--ls-h1);
}
/* El H1 del menú: en desktop es el mismo que el de las secciones, en móvil
   es más grande (40 contra 34) y sin tracking negativo. */
.t-h1-menu {
    font-family: var(--sans);
    font-size: var(--fs-h1-menu);
    line-height: var(--lh-h1-menu);
    font-weight: 500;
    letter-spacing: var(--ls-h1-menu);
}
.t-h1-search {
    font-family: var(--sans);
    font-size: var(--fs-h1-search);
    line-height: var(--lh-h1-search);
    font-weight: 300;
    letter-spacing: var(--ls-h1-search);
}
.t-h2-negro {
    font-family: var(--sans);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 400;
    letter-spacing: var(--ls-h2-negro);
    color: var(--contrast);
}
.t-h2-blanco {
    font-family: var(--sans);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2-blanco);
    font-weight: 300;
    letter-spacing: var(--ls-h2-blanco);
    color: var(--primary);
}

/* -- BODY -- */
.t-row-home-negro {
    font-family: var(--sans);
    font-size: var(--fs-row-home);
    line-height: var(--lh-row-home);
    font-weight: var(--fw-row-home);
    letter-spacing: var(--ls-row-home);
    color: var(--contrast);
}
/* Row Home en blanco. Mismo peso que la negra: los otros pares negro/blanco
   del sistema afinan peso y tracking, pero --ls-row-home es un solo valor, o
   sea que el diseño no distingue aquí — no me invento la compensación. */
.t-row-home-blanco {
    font-family: var(--sans);
    font-size: var(--fs-row-home);
    line-height: var(--lh-row-home);
    font-weight: var(--fw-row-home);
    letter-spacing: var(--ls-row-home);
    color: var(--primary);
}
.t-body22-negro {
    font-family: var(--sans);
    font-size: var(--fs-body22);
    line-height: var(--lh-body22);
    font-weight: 400;
    letter-spacing: var(--ls-body22-negro);
    color: var(--contrast);
}
.t-body22-blanco {
    font-family: var(--sans);
    font-size: var(--fs-body22);
    line-height: var(--lh-body22);
    font-weight: 300;
    letter-spacing: var(--ls-body22-blanco);
    color: var(--primary);
}
.t-body16-negro {
    font-family: var(--sans);
    font-size: var(--fs-body16);
    line-height: var(--lh-body16);
    font-weight: 400;
    letter-spacing: var(--ls-body16-negro);
    color: var(--contrast);
}
.t-body16-blanco {
    font-family: var(--sans);
    font-size: var(--fs-body16);
    line-height: var(--lh-body16);
    font-weight: 300;
    letter-spacing: var(--ls-body16-blanco);
    color: var(--primary);
}

/* -- UI -- */
.t-ui16-negro {
    font-family: var(--sans);
    font-size: var(--fs-ui16);
    line-height: var(--lh-ui16);
    font-weight: 400;
    letter-spacing: var(--ls-ui16);
    color: var(--contrast);
}
.t-ui16-blanco {
    font-family: var(--sans);
    font-size: var(--fs-ui16);
    line-height: var(--lh-ui16-blanco);
    font-weight: var(--fw-ui16-blanco);
    letter-spacing: var(--ls-ui16);
    color: var(--primary);
}
.t-ui-meta-mono {
    font-family: var(--mono);
    font-size: var(--fs-ui-meta-mono);
    line-height: var(--lh-ui-meta-mono);
    font-weight: 400;
    letter-spacing: var(--ls-ui-meta-mono);
}
.t-ui-meta {
    font-family: var(--sans);
    font-size: var(--fs-ui-meta);
    line-height: var(--lh-ui-meta);
    font-weight: 400;
    letter-spacing: var(--ls-ui-meta);
}

/* -- TECHNICAL -- */
.t-project-details {
    font-family: var(--mono);
    font-size: var(--fs-project-details);
    line-height: var(--lh-project-details);
    font-weight: 400;
    letter-spacing: var(--ls-project-details);
}
.t-counter {
    font-family: var(--sans);
    font-size: var(--fs-counter);
    line-height: var(--lh-counter);
    font-weight: 500;
    letter-spacing: var(--ls-counter);
}

/* -- EDITORIAL -- */
.t-testimonial {
    font-family: var(--sans);
    font-size: var(--fs-testimonial);
    line-height: var(--lh-testimonial);
    font-weight: 400;
    letter-spacing: var(--ls-testimonial);
}
/* Etiqueta y dato de una métrica comparten estilo: los dos van al mismo
   tamaño, uno debajo del otro. */
.t-metrica-negro {
    font-family: var(--sans);
    font-size: var(--fs-metrica);
    line-height: var(--lh-metrica);
    font-weight: 400;
    letter-spacing: var(--ls-metrica);
    color: var(--contrast);
}
.t-metrica-blanco {
    font-family: var(--sans);
    font-size: var(--fs-metrica);
    line-height: var(--lh-metrica);
    font-weight: 400;
    letter-spacing: var(--ls-metrica);
    color: var(--primary);
}
.t-cookies {
    font-family: var(--sans);
    font-size: var(--fs-cookies);
    line-height: var(--lh-cookies);
    font-weight: 500;
    letter-spacing: var(--ls-cookies);
}
.t-initial-name {
    font-family: var(--sans);
    font-size: var(--fs-initial-name);
    line-height: var(--lh-initial-name);
    font-weight: 500;
    letter-spacing: var(--ls-initial-name);
}

/* -- CARD -- */
.t-job-title-blanco {
    font-family: var(--sans);
    font-size: var(--fs-job-title);
    line-height: var(--lh-job-title);
    font-weight: 400;
    letter-spacing: var(--ls-job-title);
    color: var(--primary);
}
.t-job-body-blanco {
    font-family: var(--sans);
    font-size: var(--fs-job-body);
    line-height: var(--lh-job-body);
    font-weight: 300;
    letter-spacing: var(--ls-job-body);
    color: var(--primary);
}


/* ============================================================
   UTILIDADES TIPOGRÁFICAS
   ============================================================ */

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic     { font-style: italic; }
.bold       { font-weight: 700; }
.normal     { font-weight: 400; }
.nowrap     { white-space: nowrap; }
.strike     { text-decoration: line-through; }

.t-primary  { color: var(--primary); }
.t-contrast { color: var(--contrast); }
.t-accent   { color: var(--accent); }
.t-grey     { color: var(--grey); }

.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.alignright  { text-align: right; }


/* ============================================================
   PAGE HEADER (plantilla page.php) — título + subtítulo estilo H1
   ============================================================ */

.page-header {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: calc(var(--padh) * 2) var(--pad);
}

.page-title {
    grid-column: 1 / 5; /* 4 cols */
    color: var(--grey);
}

.page-subtitle {
    grid-column: 5 / 12; /* 7 cols, arranca igual que .block-section-body, hueco de 1 col a la derecha */
    color: var(--contrast);
}


/* ============================================================
   POST CONTENT
   ============================================================ */

.post-content p,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content blockquote,
.post-content ol,
.post-content ul {
    margin-bottom: calc(var(--pad) * 2);
}

.post-content *:last-child {
    margin-bottom: 0;
}

.post-content ul,
.post-content ol {
    padding-left: 1.4em;
}

.post-content ul li { list-style: disc; }
.post-content ol li { list-style: decimal; }

.post-content a {
    text-decoration: underline;
}

.post-content strong {
    font-weight: normal;
    color: var(--grey);
}

.post-content blockquote {
    padding-left: 1em;
    border-left: 2px solid var(--contrast);
    font-style: italic;
}

.post-content img {
    margin-top: calc(var(--pad) * 2);
    margin-bottom: calc(var(--pad) * 2);
}


/* ============================================================
   UTILIDADES DE LAYOUT
   ============================================================ */

.none  { display: none; }
.block { display: block; }
.flex  { display: flex; }
.clear { clear: both; }

.left  { float: left !important; }
.right { float: right !important; }

.rel    { position: relative; }
.abs    { position: absolute; }
.fixed  { position: fixed; }
.sticky { position: sticky; }

.overflow-hidden { overflow: hidden; }
.pointer         { cursor: pointer; }
.no-select       { user-select: none; -webkit-user-select: none; }

.mobile  { display: none; }
.desktop { display: block; }

.padded   { padding: var(--pad); }
.padded-v { padding: var(--pad) 0; }
.padded-h { padding: 0 var(--pad); }

.margined  { margin-bottom: var(--pad); }
.marginedb { margin-bottom: var(--padb); }
.marginedh { margin-bottom: var(--padh); }


body.menu-open {
    overflow: hidden;
}

/* ============================================================
   INPUTS — reset
   ============================================================ */

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
    /* Los botones traen padding propio del navegador (6px en Chrome), que
       descuadra su texto respecto al grid. Casi todos los del tema ya lo
       ponían a cero a mano: mejor aquí, de una vez. */
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--grey);
    opacity: 1;
}

input[type="submit"],
button[type="submit"] {
    cursor: pointer;
}

textarea {
    resize: none;
}


/* ============================================================
   SWIPER
   ============================================================ */

.swiper-slide {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/* ============================================================
   RESET
   ============================================================ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figure, figcaption,
hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
}

article, aside, canvas, figure, figcaption,
hgroup, section, audio, video { display: block; }

html, body {
    width: 100%;
    /* Solo el eje horizontal (para que un slider no arrastre la página). En
       vertical, nada: poner overscroll-behavior en el scroller del documento
       deja CLAVADA la barra de Safari en iOS, y entonces no hay dvh que valga
       porque la barra nunca se recoge. El precio es el rebote vertical de
       siempre, que es justo lo que se quería tapar. */
    overscroll-behavior-inline: none;
}

html {
    margin-top: 0 !important;
    background-color: var(--primary);
}
@media screen and (max-width: 782px) {
    html { margin-top: 0 !important; }
}

table  { border-collapse: collapse; }
li     { list-style: none; }
abbr   { text-decoration: none; }
button { outline: none; cursor: pointer; }
p      { margin-bottom: 0; }

a {
    text-decoration: none;
    outline: none;
    color: inherit;
}
a img { border: none !important; }

figure     { position: relative; }
figure img { width: 100%; }

img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

img::selection      { background: transparent; }
img::-moz-selection { background: transparent; }

::selection      { background: var(--accent); color: var(--contrast); }
::-moz-selection { background: var(--accent); color: var(--contrast); }


/* ============================================================
   PAGE TRANSITION — carga inicial y navegación (barba.js)
   ============================================================ */

.page-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--accent);
    opacity: 1;
    pointer-events: none;
    /* Corto a propósito: esto solo gobierna el destape de la carga inicial
       (las transiciones de barba se ponen el suyo), y en móvil un segundo
       entero de naranja encima del vídeo se hace eterno. */
    transition: opacity 0.45s ease-out;
    /* En iOS el <video> lo pinta el compositor del sistema, no la página, y se
       cuela POR ENCIMA de esta capa por mucho z-index que lleve. Subirla a su
       propio plano ayuda en algunos casos pero no es garantía — ver la regla
       de abajo, que es la que lo resuelve de verdad. */
    transform: translateZ(0);
    will-change: opacity;
}

/* En táctil la capa es del color del fondo, no naranja: ni al entrar ni al
   cambiar de página.

   Safari en iOS no tiñe sus barras con el theme-color, las tiñe con el
   DESENFOQUE de la franja de contenido que tienen detrás (se ve bien cuando la
   página pasa por debajo de la barra de estado). Con una capa naranja a
   pantalla completa, las dos barras se ponen naranjas y encima tardan en
   volver, porque el tinte va por detrás del fundido. Tapando en blanco no hay
   nada que teñir.

   En escritorio no hay barras que teñir: ahí el naranja se queda. */
@media (hover: none) {
    .page-transition {
        background: var(--primary);
    }
}

/* Y la garantía: mientras la capa esté puesta, los vídeos de portada no se
   pintan. Lo que no se pinta no se puede colar por encima de nada, así que da
   igual cómo decida iOS componer las capas. Se destapan en cuanto empieza el
   fundido —js/page-loader.js y js/barba-init.js le ponen .es-invisible a la
   capa— y para entonces el naranja ya está desapareciendo por encima, así que
   el cruce se ve como un fundido. */
#page-transition:not(.es-invisible) ~ [data-barba="wrapper"] video.cover-media {
    /* Solo visibility, nada de fundido propio: el cruce ya lo hace el naranja
       al irse. Y una transición menos es una transición menos que pueda
       quedarse congelada y dejar el vídeo invisible — que es justo el fallo
       que estamos arreglando. */
    visibility: hidden;
}


/* ============================================================
   HEADER
   ============================================================ */

#site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    color: var(--primary);
    transition: color var(--transition);
}

#site-header.is-black { color: var(--contrast); }

.header-blur {
    position: absolute;
    /* Sube por encima del header a propósito. En iOS la página se pinta hasta
       el borde de la pantalla —por detrás de la hora y la batería— pero los
       elementos fijos empiezan por debajo de esa zona, así que entre la barra
       de estado y la banda del header quedaba una franja de contenido a cara
       descubierta. Esto la cubre. Donde no existe esa franja (escritorio,
       Android) sobra pantalla por arriba y simplemente no se ve. */
    top: calc(var(--header-sangrado) * -1);
    left: 0;
    right: 0;
    height: calc(var(--header-band) + var(--header-sangrado));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: none;
    z-index: -1;
}

.header-inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    height: var(--header-h);
    padding: var(--pad);
    gap: var(--pad);
}

.header-logo {
    grid-column: 1;
    justify-self: start;
    display: block;
    cursor: pointer;
    height: var(--header-h);
}

/* En la propia Home, el logo no navega a ningún sitio (ya está ahí) */
.header-logo.is-current {
    pointer-events: none;
    cursor: default;
}

.header-logo svg { display: block; height: var(--header-h); width: auto; }

.header-logo-black,
.header-logo-white { display: block; }

#site-header.is-white .header-logo-black,
#site-header.is-black .header-logo-white { display: none; }

.header-logo-isotipo { display: none; }
.header-logo-isotipo svg { display: block; height: var(--header-h); width: auto; }

.header-menu-toggle {
    grid-column: 2;
    justify-self: start;
    font-family: var(--sans);
    font-size: var(--fs-ui16);
    line-height: var(--lh-ui16);
    font-weight: 400;
    letter-spacing: var(--ls-ui16);
    color: currentColor;
    cursor: pointer;
}

.header-meta {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* En la landing no hay contador de colección, así que el reloj se queda solo
   en su columna: pegado a la derecha, donde estaba el contador, en vez de
   suelto a la izquierda por el space-between. */
.es-landing .header-meta {
    justify-content: flex-end;
}

.header-clock {
    font-family: var(--sans);
    font-size: var(--fs-ui16);
    line-height: var(--lh-ui16);
    font-weight: 400;
    letter-spacing: var(--ls-ui16);
    white-space: nowrap;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.header-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--header-h);
    width: var(--header-h);
    height: var(--header-h);
    border: 1.5px solid currentColor;
}

.header-counter span {
    font-family: var(--sans);
    font-size: var(--fs-counter);
    line-height: var(--lh-counter);
    font-weight: 500;
    letter-spacing: var(--ls-counter);
    color: currentColor;
}

/* Páginas sin cover: el contenido empieza debajo del header fijo */
body:not(.has-cover) #main {
    padding-top: var(--header-band);
}


/* ============================================================
   HOME — SLIDER FULLSCREEN
   ============================================================ */

.home-slider {
    position: relative;
    width: 100%;
    height: var(--real100);
    overflow: hidden;
    background: var(--contrast);
}

.home-slider.has-multiple { cursor: none; }

.home-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.home-slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

.home-slide-media {
    position: absolute;
    inset: 0;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.cover-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-media.is-mobile { display: none; }

/* El <picture> de un cover es solo el envoltorio que elige la fuente: quien
   se posiciona es la <img> de dentro, que ya es .cover-media. */
.cover-picture { display: contents; }

.home-slide-overlay {
    position: absolute;
    inset: 0;
    background: var(--contrast);
    opacity: 0.25;
}

.home-slide-caption {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    z-index: 5;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.home-slide-caption.is-hero {
    bottom: calc(var(--pad) * 2);
    max-width: 960px;
}

.home-slide-title:hover{
    opacity: 0.5;
}


.home-slide-caption.is-project {
    top: 50%;
    transform: translateY(-50%);
}

.home-slide-title {
    /* inline: el área clicable se ciñe a las líneas de texto reales, no al ancho del contenedor */
    display: inline;
    transition: opacity var(--transition);
}

.home-slide-caption a.home-slide-title {
    pointer-events: auto;
    cursor: pointer;
}

.home-slide-caption.is-hero .home-slide-title {
    font-family: var(--sans);
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-hero);
    font-weight: 400;
    color: var(--primary);
}

.home-slide-caption.is-project .home-slide-eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2-slideshow);
    letter-spacing: var(--ls-h2-slideshow);
    font-weight: 400;
    color: var(--grey);
}

.home-slide-caption.is-project .home-slide-title {
    font-family: var(--sans);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2-slideshow);
    letter-spacing: var(--ls-h2-slideshow);
    font-weight: 400;
    color: var(--primary);
}

.home-slider-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 4;
    background: transparent;
    cursor: none;
    /* La navegación con ratón se delega por click en el slider (js), no en estos botones:
       están fuera del stacking context de .home-slide, así que ningún z-index del caption
       podría ganarles y el texto quedaría siempre debajo. Con pointer-events:none siguen
       operables por teclado (foco + Enter/Espacio), solo dejan de interceptar el ratón. */
    pointer-events: none;
}

.home-slider-arrow.prev { left: 0; }
.home-slider-arrow.next { right: 0; }

.home-slider-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 39px;
    margin: -19.5px 0 0 -25.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.home-slider-cursor.is-visible { opacity: 1; }

.home-slider-cursor svg {
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.home-slider-cursor.is-left  svg { transform: rotate(180deg); }
.home-slider-cursor.is-right svg { transform: rotate(0deg); }


/* ============================================================
   LANDING — PORTADA DE VÍDEO (js/hero-video.js)
   Mismas medidas que el slider de la Home —alto completo, titular abajo a la
   izquierda— pero sin navegación: un bucle y, al clicar, el vídeo completo.
   ============================================================ */

.hero-video {
    position: relative;
    width: 100%;
    height: var(--real100);
    overflow: hidden;
    background: var(--contrast);
}

/* Solo se esconde el puntero donde hay algo que abrir: sin vídeo completo
   la portada es una imagen y nada más (la clase la pone el PHP). */
.hero-video.tiene-full { cursor: none; }

.hero-video-media {
    position: absolute;
    inset: 0;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: var(--contrast);
    opacity: 0.25;
}

.hero-video-caption {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: calc(var(--pad) * 2);
    z-index: 5;
    /* El tope de ancho va atado al tamaño de letra, no a un número fijo.
       "Traducimos la arquitectura" mide 11,2 veces el tamaño de letra: con
       11,3 esa línea entra justa y la palabra siguiente ya no, así que el
       titular parte donde tiene que partir a CUALQUIER ancho de pantalla.
       Hacía falta porque la letra se planta en 160px y, de ahí para arriba,
       la pantalla seguía creciendo y se subía el "en" a la primera línea. */
    max-width: calc(var(--fs-hero) * 11.3);
    pointer-events: none; /* el clic es de la portada entera, no del titular */
}

.hero-video-title {
    font-family: var(--sans);
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-hero);
    font-weight: 400;
    color: var(--primary);
}

/* Igual que .home-slider-arrow: fuera del paso del ratón (el clic lo recoge
   la sección) y ahí solo para que se pueda abrir con teclado. */
.hero-video-trigger {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: transparent;
    border: 0;
    cursor: none;
    pointer-events: none;
}

/* -- Pop-up del vídeo completo -- */
.hero-popup {
    position: fixed;
    inset: 0;
    z-index: 3000; /* como el lightbox: sobre el menú (2000), bajo el fade de barba (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--contrast);
    opacity: 0;
    visibility: hidden;
    cursor: none; /* la palabra "Cerrar" hace de puntero */
    transition: opacity var(--transition), visibility var(--transition);
}

.hero-popup.is-visible {
    opacity: 1;
    visibility: visible;
}

body.hero-popup-abierto { overflow: hidden; }

/* contain y no cover: el vídeo entero, sin recortar, con banda negra si hace falta */
.hero-popup video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Si el navegador se negó a sonar y hubo que sacar los controles nativos,
   el puntero vuelve para poder usarlos. */
.hero-popup video[controls] { cursor: default; }

/* La etiqueta que sigue al ratón: "Play" sobre la portada, "Cerrar" dentro
   del pop-up. Posiciona con transform (como el cursor del slider), así que
   el desplazamiento respecto al puntero va en el margen. */
.hero-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3100;
    margin: calc(var(--lh-ui16) / -2) 0 0 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.hero-cursor.is-visible { opacity: 1; }

/* Sin ratón no hay cursor que seguir: en un móvil el primer toque disparaba
   un mousemove y la palabra «Play» se quedaba clavada en la pantalla. Vale
   igual para las flechas del slider y del lightbox, que son lo mismo. */
@media (hover: none) {
    .hero-cursor,
    .home-slider-cursor,
    .lightbox-cursor { display: none; }

    .hero-video.tiene-full,
    .hero-video-trigger,
    .home-slider.has-multiple,
    .home-slider-arrow,
    .lightbox { cursor: auto; }
}


/* ============================================================
   HOME — BLOQUES (flexible content)
   Cáscara compartida (.block-section) + estilos propios de cada body
   ============================================================ */

/* -- Texto centrado (sin caja) — patrón A, distinto de la cáscara .block-section -- */
.block-texto {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    margin: calc(var(--padh) + var(--padb)) auto;
    padding: 0 var(--pad);
}

.block-texto-inner {
    grid-column: 3 / 11; /* 8 de 12 columnas, centrado */
    text-align: center;
    /* Reparte el texto para que las líneas queden de ancho parecido, en vez de
       dejar una última línea suelta con dos palabras. Es propiedad heredada,
       así que cada <p> que mete el wpautop del campo ACF se equilibra por su
       cuenta. Chrome deja de equilibrar a partir de ~6 líneas y vuelve al
       reparto normal: no se rompe nada, simplemente no se nota. */
    text-wrap: balance;
}

/* Variante a la izquierda: las mismas 8 columnas pero arrancando en el
   margen de página, no centradas (Figma de 50 Aniversario). */
.block-texto-inner.is-izquierda {
    grid-column: 1 / 9;
    text-align: left;
}

/* -- Cáscara: título lateral + intro + CTA -- */
.block-section {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: var(--pads) var(--pad) calc(var(--padh) + var(--padb));
}

/* La línea no va a sangre: se mete hasta el margen de página (--pad), igual
   que en .proyecto-seccion y .equipo-seccion. Por eso es un ::before y no un
   border-top, que se pintaría de canto a canto. */
.block-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    height: 1px;
    background: var(--contrast);
}

/* Sin titular = continuación de la sección anterior: ni línea ni el hueco
   que esta deja. Permite encadenar varios bloques (texto + tabla + texto +
   tabla…) bajo un solo titular, leyéndose como una sola sección. */
.block-section.has-no-title { padding-top: 0; }
.block-section.has-no-title::before { content: none; }
.block-section.has-no-title > .block-section-body { padding-top: 0; }

/* Recorta el hueco que deja el padding-bottom del bloque anterior: encadenados
   van más juntos que dos secciones distintas. Se excluyen las variantes con
   fondo: al ser full-bleed, un margen negativo las montaría sobre el bloque
   de arriba en vez de solo acercar el texto. */
.block-section.has-no-title:not(.is-grey) {
    margin-top: calc(var(--padh) * -1);
}

.block-section-label {
    grid-column: 1 / 5;
    padding-top: 8px; /* gap borde→label del Figma (SECTION LABEL) */
}

.block-section-body {
    grid-column: 5 / 13;
    padding-top: 8px;
}

.block-section-intro { margin-bottom: var(--pad); }

.block-section-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--pads);
    margin-top: var(--pad);
}

/* -- Variante con fondo: misma cáscara sobre gris claro, a sangre. Es un
   modificador genérico (no "el bloque Newsletter"): lo usa cualquier sección
   que tenga que ir sobre fondo. -- */
.block-section.is-grey {
    background: var(--grey-light);
    padding-top: calc(var(--pad) + var(--pads) + 1px); /* espacio entre el borde y el titular, la base (--pads) era demasiado justa */
}

/* El fondo sí llega de canto a canto, así que la línea —que no— baja hasta
   donde empezaría el contenido, en vez de quedarse pegada al borde de arriba. */
.block-section.is-grey::before { margin-top: var(--pad); }

/* -- Proyectos Destacados (bloque propio, sin cáscara .block-section) -- */
.block-proyectos-destacados {
    display: flex;
    flex-direction: column;
    padding: var(--padb) var(--pad);
}

.block-proyectos-title {
    padding: var(--pads) 0 var(--padm);
    border-top: 1px solid var(--contrast);
}

.block-proyectos-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--pads);
    margin-top: calc(var(--pad) + var(--padm));
    margin-left: auto;
    color: var(--contrast);
}

.block-proyectos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--padb) var(--pad);
}

.block-proyectos-grid.is-2col {
    grid-template-columns: repeat(2, 1fr);
}

.block-proyecto-card {
    display: block;
    color: inherit;
}

.block-proyecto-media {
    position: relative;
    overflow: hidden;
}

.block-proyecto-media.is-landscape,
.block-proyecto-card.is-landscape .block-proyecto-media {
    aspect-ratio: 653 / 410;
}

/* A 2 columnas, las verticales mantienen su proporción alta */
.block-proyectos-grid.is-2col .block-proyecto-card.is-portrait .block-proyecto-media {
    aspect-ratio: 653 / 810;
}

/* A 1 columna (full width), hasta las verticales se recortan en horizontal */
.block-proyectos-grid.is-1col .block-proyecto-card.is-portrait .block-proyecto-media {
    aspect-ratio: 653 / 410;
}

.block-proyecto-caption {
    padding-top: var(--pads);
}

.block-proyecto-sector { color: var(--grey); }
.block-proyecto-nombre { color: var(--contrast); }

/* -- Body: Tabla -- */
.block-tabla-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pad);
    padding: var(--pads) 0 var(--pad);
    border-top: 1px solid var(--contrast);
}

.block-tabla-header { color: var(--grey); }

.block-tabla-content p {
    margin-bottom: var(--pads);
}
.block-tabla-content p:last-child { margin-bottom: 0; }

/* Tabla en estilo destacado: texto grande alternando negro (impar, título)
   y gris (par, descripción). La alternancia sale de :nth-child, así el
   textarea se rellena igual que en la tabla normal — una línea por item,
   sin campos nuevos por par. */
.block-tabla.is-destacado .block-tabla-content p {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    margin-bottom: 0;
}
.block-tabla.is-destacado .block-tabla-content p:nth-child(even) {
    color: var(--grey);
    margin-bottom: var(--pad); /* separa cada par del siguiente */
}
.block-tabla.is-destacado .block-tabla-content p:last-child { margin-bottom: 0; }

/* -- Body: Listado de enlaces -- */

/* con_enlaces=true: lista de 6 cols a la derecha. El wrap monta un grid
   local de 8 cols (= ancho de .block-section-body) para que cada track
   mida lo mismo que una columna global; el listado ocupa las 6 de la
   derecha (cols 3-8 del local = empuja 2 cols vacías a la izquierda). */
.block-enlace-list-wrap {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--grid-gutter);
}

.block-enlace-list {
    grid-column: 3 / 9;
}

.block-enlace-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pad);
    padding: var(--pads) 0;
    /* Sin color propio: la flecha va a currentColor y con el negro escrito
       aquí se quedaba negra sobre negro en la plantilla oscura. Heredando del
       body sale bien en los dos casos. */
}

.block-enlace-arrow { flex: 0 0 auto; }


.block-big-margin{
    margin: calc(var(--padb) + var(--pad)) 0;

}

/* con_enlaces=false: filas a todo lo ancho, texto grande (Row Home) */
.block-enlace-plain-list {
    display: flex;
    flex-direction: column;
    gap: var(--pad);
}

.block-enlace-plain-row {
    cursor: default;
}


/* estilo=metricas: etiqueta y dato uno debajo del otro. La separación entre
   métricas (--padb) sale de la cuenta del Figma: 220px de una etiqueta a la
   siguiente, menos las dos líneas de 80. */
.block-metricas {
    display: flex;
    flex-direction: column;
    gap: var(--padb);
}

.block-metrica {
    display: block;
    color: inherit; /* el color lo pone la clase tipográfica, no el enlace */
    transition: color var(--transition);
}
.block-metrica-etiqueta,
.block-metrica-dato { display: block; }

/* Sin enlace no hay nada que pulsar: ni cursor de mano ni hover (ver
   responsive.css), como pide el diseño. */
.block-metrica.has-link { cursor: pointer; }


/* ============================================================
   HOVER IMAGE — imagen flotante que sigue al cursor (js/hover-image.js)
   Reutilizable: cualquier elemento con [data-hover-image] la dispara.
   ============================================================ */

.hover-image-preview {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
    /* Por encima del header (1000) y de la barra de contacto (1001): pasando
       por debajo de las bandas sticky se recortaba a trozos. Por debajo del
       menú (2000) y del fade de transición (9999), que sí deben taparla. */
    z-index: 1002;
}

.hover-image-preview.is-visible { opacity: 1; }

.hover-image-preview img {
    display: block;
    max-width: 430px;
    max-height: 430px;
    object-fit: cover;
}

/* -- Body: Noticias — 1 o 2 noticias: 1 col a todo lo ancho (como Proyectos
   Destacados). 3 (el máximo): grid de 3 cols. -- */
.block-noticias-grid {
    display: grid;
    gap: var(--padb) var(--pad);
}

.block-noticias-grid.is-3col {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gutter);
}

.block-noticias-grid.is-1col {
    grid-template-columns: 1fr;
}

/* Grid a full ancho (12 cols), no confinado a las 8 cols de .block-section-body
   — ver block-noticias.php: cierra/reabre el div body a propósito para esto */
.block-noticias-grid-full {
    grid-column: 1 / 13;
}

.block-noticia-card { display: block; color: inherit; }

.block-noticia-media {
    position: relative;
    aspect-ratio: 428 / 305;
    overflow: hidden;
}

.block-noticia-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 6px 10px;
    background: var(--accent);
    color: var(--contrast);
}

.block-noticia-caption { padding-top: var(--pads); }
.block-noticia-meta { color: var(--grey); margin-bottom: 4px; }
.block-noticia-titulo { color: var(--contrast); }


.block-imagen-video{
    padding: 0 var(--pad);
        margin: 0 auto calc(var(--padh) + var(--padb));
}

/* -- Destacado Imagen / Video (sin cáscara, a pantalla completa) -- */
.block-imagen-video-media {
    position: relative;
    aspect-ratio: 653 / 410;
    overflow: hidden;
}

/* -- Galería — filas de 1 o 2 imágenes en su proporción original (sin
   recorte: nada de aspect-ratio ni object-fit aquí). La 1ª se alinea a
   la izquierda, la 2ª a la derecha (span N / -1 ancla su final en la
   última línea del grid). align-items:start para que queden arriba
   cuando tienen alturas distintas. -- */
.block-galeria {
    display: flex;
    flex-direction: column;
    gap: var(--padb);
    padding: var(--padb) var(--pad);
}

.block-galeria-row {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    align-items: start;
}

.block-galeria-item.is-w100 { grid-column: 1 / -1; }
.block-galeria-item.is-w83  { grid-column: span 10; }
.block-galeria-item.is-w50  { grid-column: span 6; }
.block-galeria-item.is-w33  { grid-column: span 4; }

.block-galeria-item.is-right.is-w83 { grid-column: span 10 / -1; }
.block-galeria-item.is-right.is-w50 { grid-column: span 6 / -1; }
.block-galeria-item.is-right.is-w33 { grid-column: span 4 / -1; }

.block-galeria-item img { display: block; width: 100%; height: auto; }

/* El bloque con fondo necesita aire: pegado a uno blanco parece que el gris
   se derrama. El hueco lo pone el VECINO y no el propio bloque gris —así,
   cuando el gris es el último de la página, el footer sigue subiendo a
   tocarlo, y un bloque blanco suelto no arrastra un margen que no le toca. */
.block-section.is-grey + *,
* + .block-section.is-grey { margin-top: var(--pad); }


/* -- Sección Formulario — el mismo formulario de la barra fija dentro de
   la cáscara. Ocupa 6 de las 8 columnas del cuerpo: 6 columnas + 5
   medianiles sobre un contenedor de 8 = 75% menos un cuarto de medianil.
   Sale exacto a cualquier ancho, sin repetir los valores del grid. -- */
.block-formulario {
    width: calc(75% - var(--grid-gutter) / 4);
    margin-top: var(--pad);
}

/* -- Sección Datos — imagen opcional a las 8 columnas del cuerpo y debajo
   los grupos en dos columnas (.seccion-2col, compartido con Créditos). -- */
.block-datos-media img { display: block; width: 100%; height: auto; }
.block-datos-lista { margin-top: var(--padh); }

/* -- Sección Testimonios — carrusel de citas. El fondo/borde salen del
   modificador genérico .is-grey (más arriba). -- */
.block-section.is-testimonios {
    padding-bottom: var(--pad2); /* el CTA va casi pegado al fondo (Figma) */
}

/* La cita va centrada en 8 de 12 columnas (cols 3-10), no en el body 5-12
   de la cáscara — así está en Figma (x=244, ancho=877 = 8 columnas). */
.block-testimonios {
    grid-column: 3 / 11;
    grid-row: 2;
    display: grid; /* todas las citas apiladas en la misma celda: la altura
                      la marca la más larga y no hay salto al cambiar */
    padding: calc(var(--padh) + var(--padb)) 0;
}

.block-testimonio {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
.block-testimonio.is-active {
    opacity: 1;
    pointer-events: auto;
}

.block-testimonio-texto { margin: 0; }

.block-testimonio-autor {
    margin-top: var(--lh-testimonial);
    color: var(--contrast);
}
.block-testimonio-autor span { color: var(--grey); }

/* Flechas: pegadas a los márgenes de página, centradas sobre la cita y
   SIEMPRE en la misma posición (no siguen al cursor). Solo se revelan al
   entrar en su mitad de la sección — ver js/testimonios.js. */
.block-testimonios-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 49px;
    height: auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--contrast);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), color var(--transition);
}
.block-testimonios-arrow svg { display: block; width: 100%; height: auto; }
.block-testimonios-arrow.is-prev { left: var(--pad); }
.block-testimonios-arrow.is-next { right: var(--pad); }
.block-testimonios-arrow.is-prev svg { transform: rotate(180deg); }
.block-testimonios-arrow.is-visible { opacity: 1; }

.block-testimonios-cta {
    grid-column: 1 / 13;
    grid-row: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--pads);
    color: var(--contrast);
    transition: color var(--transition);
}


/* ============================================================
   SCROLL REVEAL — fade al entrar en viewport
   ============================================================ */

.reveal {
    opacity: 0;
    transition: opacity 0.7s ease-out;
}

.reveal.is-visible {
    opacity: 1;
}


/* ============================================================
   HEADER — trigger Menu/Volver + estado con menú abierto
   ============================================================ */

.label-volver { display: none; }
.header-menu-toggle.is-active .label-menu  { display: none; }
.header-menu-toggle.is-active .label-volver {
    display: inline;
    color: var(--accent-light);
    transition: opacity var(--transition), color var(--transition);
}
.header-menu-toggle.is-active  .label-volver:hover{
    color: var(--primary);
}


/* Con el menú abierto, el header (logo + trigger) queda POR ENCIMA del
   overlay naranja (que tiene z-index 9999) para poder seguir usándose
   como "Volver" en el mismo sitio exacto donde estaba "Menu". */
body.menu-open #site-header {
    z-index: 10000;
    color: var(--primary);
}
body.menu-open .header-logo-white   { display: none !important; }
body.menu-open .header-logo-black   { display: none !important; }
body.menu-open .header-logo-isotipo { display: block !important; }
/* Mismo tamaño que el isotipo del footer (100px), no la altura mini del header */
body.menu-open .header-logo-isotipo svg { width: 100px; height: auto; }


/* ============================================================
   MENÚ — overlay naranja a pantalla completa
   ============================================================ */

.menu-hover {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--accent);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    /* Misma velocidad que el cambio de color del header (--transition: 0.3s
       ease). No se puede reusar var(--transition) en el delay del segundo
       item: expande a "0.3s ease" y esa "ease" de más invalida todo el
       shorthand (el delay solo admite un <time>) — por eso 0.3s repetido a mano. */
    transition: opacity var(--transition), visibility 0s linear 0.3s;
}

.menu-hover.appear {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition), visibility 0s linear 0s;
}

.menu-inner {
    position: relative;
    min-height: var(--real100);
    padding: calc(var(--padh) * 2) var(--pad) var(--pad);
    display: flex;
    flex-direction: column;
}

.menu-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pad);
}

.menu-links {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pads);
}

.menu-links a {
    font-family: var(--sans);
    font-size: var(--fs-h1-menu);
    line-height: var(--lh-h1-menu);
    font-weight: 500;
    letter-spacing: var(--ls-h1-menu);
    color: var(--primary);
    cursor: pointer;
    transition: opacity var(--transition);
}



.menu-lang {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pads);
}

.menu-lang a {
    font-family: var(--sans);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: 500;
    letter-spacing: var(--ls-h1);
    color: var(--primary);
    opacity: 0.5;
    cursor: pointer;
    transition: color var(--transition), opacity var(--transition);
}

.menu-lang a.is-active { opacity: 1; }
.menu-lang a:not(.is-active):hover { color: var(--accent-light); opacity: 1; }

.menu-search {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--padb);
    background: none;
    border: none;
    padding: 0;
    justify-self: start;
    text-align: left;
    color: var(--primary);
    cursor: pointer;
    transition: opacity var(--transition);
}
/* Los dos tienen que repetir el color: el a:hover general (responsive.css)
   si no los pinta de naranja sobre naranja y desaparecen. */
.menu-links a:hover,
.menu-search:hover { color: var(--primary); opacity: 0.5; }

.menu-columns {
    margin-top: auto;
    padding-top: var(--padb);
}

.menu-columns .menu-copyright {
    grid-column: 1;
    grid-row: 1;
    color: var(--accent-light);
    display: grid;
  align-items: flex-end;
}


/* ============================================================
   FOOTER + MENÚ — columnas de info compartidas (General/Oficina/
   Social/Bloque extra) + estilos propios del footer
   ============================================================ */

.footer-col-label {
    font-family: var(--sans);
    font-size: var(--fs-ui-meta);
    line-height: var(--lh-ui-meta);
    font-weight: 300;
    letter-spacing: 0.02em;
    margin-bottom: var(--pad);
}

/* Footer: labels en gris. Menú (fondo naranja): labels en light orange */
.footer-columns .footer-col-label { color: var(--grey); }
.menu-columns .footer-col-label   { color: var(--accent-light); }

.footer-col-nav a,
.footer-col-link,
.footer-col-body p {
    display: block;
    font-family: var(--sans);
    font-size: var(--fs-ui-meta);
    line-height: var(--lh-ui-meta);
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--primary);
    margin-bottom: 12px;
}
/* wp_nav_menu envuelve cada <a> en su propio <li> — a:last-child
   coincidiría con TODOS (cada <a> es hijo único de su li), hay que
   apuntar al último <li>, no al <a> directamente */
.footer-col-nav li:last-child a,
.footer-col-link:last-child,
.footer-col-body p:last-child {
    margin-bottom: 0;
}


.footer-col-link,
.footer-col-nav a {
    transition: color var(--transition);
}
.footer-col-link:hover,
.footer-col-nav a:hover {
    color: var(--accent-light);
}


#footer .footer-col-link:hover,
#footer .footer-col-nav a:hover {
    color: var(--accent);
}

/* Dirección + ciudad: mismo enlace, cada línea su propio <span> (sin
   :last-child con problemas, aquí son hermanos directos sin wrapper) */
.footer-col-address span {
    display: block;
    margin-bottom: 12px;
}
.footer-col-address span:last-child {
    margin-bottom: 0;
}

.footer-col-badge { display: inline-block; }
.footer-col-badge svg,
.footer-col-badge img { display: block; width: 175px; height: auto; }

#footer {
    position: relative;
    z-index: 1001; /* por encima de #site-header (1000) al hacer scroll hasta el final */
    min-height: var(--real100);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--contrast);
    color: var(--primary);
    padding: var(--pad);
    gap: var(--padh);
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
}

.footer-logo { grid-column: 1; }
.footer-logo svg,
.footer-logo img { display: block; width: 100px; height: auto; }

.footer-tagline { grid-column: 5 / 13; }

/* 2 filas explícitas (no solo 3 columnas): así "Noticias" (fila 2 de
   General) y "Social" (fila 2 de Oficina) arrancan a la misma altura,
   en vez de depender de cuánto mida el nav principal de cada columna. */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--pad2);
}

#footer .footer-columns .footer-col-general           { grid-column: 5 / 7; grid-row: 1; }
#footer .footer-columns .footer-col-oficina           { grid-column: 7 / 9; grid-row: 1; }
#footer .footer-columns .footer-col-aniversario       { grid-column: 9 / 11; grid-row: 1; }
#footer .footer-columns .footer-col-general-secondary { grid-column: 5 / 7; grid-row: 2; }
#footer .footer-columns .footer-col-social            { grid-column: 7 / 9; grid-row: 2; }

/* Menú: la fila de copyright + columnas tiene que arrancar en el MISMO
   límite que .menu-links/.menu-search arriba (columna 2 del grid de 3
   que también usa el header, para que "Volver" quede donde estaba
   "Menu") — un grid propio de 4fr/2fr/2fr/2fr/2fr NO cuadra con eso
   matemáticamente (el nº de gaps restados antes de repartir el resto en
   fr es distinto: 4 gaps en un grid de 5 tracks vs 2 gaps en uno de 3),
   así que en vez de inventar otra proporción se anida un grid de 4
   columnas iguales DENTRO de las columnas 2-3 del mismo grid de 3 que
   usa .menu-top — mismo límite exacto, sin cálculo aproximado. */
.menu-columns.footer-columns {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--pad);
}
.menu-columns .menu-columns-inner {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gutter);
}
.menu-columns-inner .footer-col-general     { grid-column: 1; }
.menu-columns-inner .footer-col-oficina     { grid-column: 2; }
.menu-columns-inner .footer-col-social      { grid-column: 3; }
.menu-columns-inner .footer-col-aniversario { grid-column: 4; }

.footer-bottom {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: var(--grid-gutter);
    align-items: end;
}

.footer-wordmark svg,
.footer-wordmark img { display: block; width: 100%; height: auto; }

.footer-copyright {
    color: var(--grey);
}


/* ============================================================
   BARRA DE CONTACTO — fija abajo, aparece con scroll down, se oculta
   con scroll up (ver js/contact-bar.js). El footer tiene z-index mayor
   así que pasa por encima al llegar al final de la página.
   ============================================================ */

.contact-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: var(--primary);
    color: var(--contrast);
    max-height: 100vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform var(--transition);
}
.contact-bar.is-visible { transform: translateY(0); }

/* Cerrada, toda la barra es clicable. Abierta se desactiva para no
   robarle los clics al formulario (quedan la etiqueta y "Cerrar"). */
.contact-bar-hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.contact-bar.is-open .contact-bar-hit { display: none; }

/* Fila única: etiqueta | panel (titular + formulario) | Abrir/Cerrar.
   align-items:start mantiene etiqueta y botón arriba mientras el panel
   crece hacia abajo — así el titular arranca a la altura de la etiqueta. */
.contact-bar-inner {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    align-items: start;
    padding: var(--pad);
    border-top: 1px solid var(--contrast);
}

.contact-bar-label,
.contact-bar-action {
    grid-row: 1;
    background: none;
    border: none;
    padding: 0;
    color: var(--contrast);
    cursor: pointer;
}
.contact-bar-label  { grid-column: 1 / 5; text-align: left; }
.contact-bar-action { grid-column: 12; justify-self: end; }

.label-cerrar { display: none; }
.contact-bar.is-open .label-abrir  { display: none; }
.contact-bar.is-open .label-cerrar { display: inline; }

/* Panel en la MISMA fila que la etiqueta (no debajo): al estar colapsado
   la fila mide lo que la etiqueta (barra de 50px); al abrirse crece y el
   titular queda alineado arriba con ella. Entra con opacidad. */
.contact-bar-panel {
    grid-column: 5 / 11;
    grid-row: 1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity var(--transition);
}
.contact-bar.is-open .contact-bar-panel {
    max-height: 700px; /* holgado sobre el alto real (~550px); .contact-bar hace scroll si hiciera falta */
    opacity: 1;
}

.contact-bar-intro { margin-bottom: var(--padb); }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--pad);
    position: relative;
    padding-bottom: var(--padb);
}

.contact-field input,
.contact-field textarea {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--grey);
    background: none;
    padding: 0 0 var(--pads);
    font-family: var(--sans);
    resize: none;
    transition: border-color var(--transition);
}
.contact-field input:focus,
.contact-field textarea:focus { outline: none; border-color: var(--contrast); }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--grey); }
.contact-field.has-error input,
.contact-field.has-error textarea { border-color: var(--red); }
.contact-field-message textarea { min-height: 70px; }

.contact-submit {
    display: block;
    width: 100%;
    border: none;
    background: var(--grey);
    padding: 6px 0;
    cursor: not-allowed;
    transition: background var(--transition);
}
.contact-submit.is-ready { background: var(--contrast); cursor: pointer; }

.contact-legal {
    display: flex;
    align-items: flex-start;
    gap: var(--pads);
}
.contact-legal input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: 2px;
    border: 1px solid var(--grey);
    background: var(--primary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.contact-legal input[type="checkbox"]:checked { background: var(--contrast); border-color: var(--contrast); }
.contact-legal label { color: var(--grey); transition: color var(--transition); }
.contact-legal.is-checked label { color: var(--contrast); }
.contact-legal.has-error input[type="checkbox"] { border-color: var(--red); }
.contact-legal.has-error label { color: var(--red); }
.contact-legal a { color: inherit; text-decoration: underline; }

.contact-form-feedback {
    margin: 0;
    color: var(--grey);
}
.contact-form-feedback:empty { display: none; }
.contact-form-feedback.is-error   { color: var(--red); }
.contact-form-feedback.is-success { color: var(--contrast); }


/* ============================================================
   LISTADO DE PROYECTOS (plantilla proyectos.php)
   ============================================================ */

/* Fila de filtros: vista (Grid/List) en la columna 1, sectores desde la 5,
   igual que el reparto label/body del resto del sitio. */
/* Mismo grid de 12 del resto del sitio: la vista (Grid/List) en las
   columnas 1-4 y los sectores desde la 5, alineados a la izquierda como
   en el Figma. Al ocupar columnas distintas no se solapan, así que no
   hace falta sacar ninguno del flujo con position:absolute — y de paso
   los dos quedan alineados arriba solos. */
.proyectos-filtros {
    position: sticky;
    top: var(--header-band);
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    align-items: start;
    padding: var(--pad); /* el de arriba separa del header al quedarse pegada */
    /* Sin blur propio y por encima del header (1000): el desenfoque de toda la
       banda lo pone una única capa, .header-blur, que crece por detrás. Ver
       "BANDA SUPERIOR" más abajo. */
    z-index: 1001;
}

.proyectos-vista    { grid-column: 1 / 5; }
.proyectos-sectores { grid-column: 5 / 13; }

.proyectos-vista,
.proyectos-sectores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pad);
}

.proyectos-filtro {
    padding: 0;
    background: none;
    border: none;
    font-family: var(--sans);
    font-size: var(--fs-ui16);
    line-height: var(--lh-ui16);
    font-weight: 400;
    letter-spacing: var(--ls-ui16);
    color: var(--grey);
    cursor: pointer;
    transition: color var(--transition);
}
.proyectos-filtro.is-active { color: var(--accent); }

/* List todavía no está maquetado */
.proyectos-filtro.is-disabled {
    opacity: 0.4;
    cursor: default;
}

/* El listado no pone márgenes: cada vista los pide distintos y los aplica su
   propio contenedor, que cambia de clase al alternar vista. */
.proyectos-listado {
    padding: 0;
}

.proyectos-listado > .block-proyectos-grid {
    padding: var(--pad) var(--pad) calc(var(--padh) * 2);
}

/* En lista el aire de arriba lo pone la cabecera de columnas (margin-top) */
.proyectos-listado > .proyectos-lista {
    padding: 0 var(--pad) calc(var(--padh) * 2);
}

/* Fade al cambiar de filtro: se oscurece, se sustituye el contenido y vuelve */
[data-listado] {
    transition: opacity var(--transition);
}
[data-listado].is-loading { opacity: 0; }

.proyectos-sentinel {
    width: 100%;
    height: 1px;
}


/* -- Vista LIST --------------------------------------------------------
   Las 4 columnas caen en el mismo grid de 12 del resto del sitio:
   Proyecto (4) · Localización (3) · Sector (3) · Año (2). Con eso los
   textos arrancan exactamente donde el Figma (20 / 468 / 805 / 1141). */
.proyectos-tabla-header,
.proyectos-fila-link {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    align-items: center;
}

/* El naranja del hover se pinta celda a celda: cada <span> lleva su clase
   tipografica (.t-body16-negro) con color propio, asi que el del <a> padre
   no le llega por herencia. */
.proyectos-col { transition: color var(--transition); }

.proyectos-col-proyecto     { grid-column: 1 / 5; }
.proyectos-col-localizacion { grid-column: 5 / 8; }
.proyectos-col-sector       { grid-column: 8 / 11; }
.proyectos-col-anio         { grid-column: 11 / 13; }

/* La cabecera es su propio grid, así que cada botón se coloca solo.
   Se queda pegada justo debajo de la fila de filtros (de ahí que su alto
   se publique como variable desde js/proyectos.js). */
.proyectos-tabla-header {
    position: sticky;
    top: calc(var(--header-band) + var(--proyectos-filtros-h, 56px));
    z-index: 1001;
    /* A sangre (el --pad va dentro): la línea de abajo sí se queda al ancho
       del contenido, dibujada en ::after. */
    margin-top: var(--padh);
    padding: calc(var(--pads) * 2) var(--pad);
}

/* La línea sí va al ancho del contenido, alineada con la de las filas. Va en
   ::after y no en border-bottom porque la caja ahora llega a los bordes.
   Absoluta, así no cuenta como celda del grid de la cabecera. */
.proyectos-tabla-header::after {
    content: '';
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: 0;
    border-bottom: 1px solid var(--contrast);
}

/* -- BANDA SUPERIOR ----------------------------------------------------
   Header, filtros y cabecera de columnas se leen como una sola banda
   difuminada. El blur NO se reparte entre los tres: tres backdrop-filter
   apilados desenfocan cada uno su franja y el corte entre ellas se ve. Lo
   pone una única capa —la del header— que crece hasta el borde inferior del
   ultimo elemento pegado (js/proyectos.js publica el alto en --banda-blur).

   Por eso filtros y cabecera van por encima de #site-header (z-index 1001):
   si quedaran por debajo entrarían en el backdrop de esa capa y su texto se
   desenfocaría también.

   La clase la pone js/listado.js en las páginas que tienen banda pegajosa
   (Proyectos y Noticias): la variable se queda puesta al navegar con barba,
   así que sin acotarlo el header saldría crecido en la página siguiente. */
body.tiene-banda .header-blur {
    height: var(--banda-blur, var(--header-band));
}

.proyectos-orden {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: none;
    color: var(--contrast);
    cursor: pointer;
    text-align: left;
    transition: color var(--transition);
}

.proyectos-orden-icono {
    width: 16px;
    height: auto;
    flex: 0 0 16px;
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
}
.proyectos-orden.is-active .proyectos-orden-icono { opacity: 1; }
.proyectos-orden.is-desc   .proyectos-orden-icono { transform: rotate(180deg); }

.proyectos-fila {
    position: relative;
    border-bottom: 1px solid var(--contrast);
}

.proyectos-fila-link {
    padding: calc(var(--pads) * 2) 0;
    color: var(--contrast);
    transition: color var(--transition);
}

/* El botón de guardar va sobre la fila, no dentro del enlace: si fuese un
   hijo del <a> el clic navegaría en vez de guardar. */
.save-button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    background: var(--primary);
    border: 1px solid var(--contrast);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.save-button.is-active {
    background: var(--accent);
    border-color: var(--accent);
}



/* ============================================================
   PROYECTO (single.php)
   ============================================================ */

/* Cabecera: reusa la rejilla de .page-header. El sector hace de label gris
   y el titular del proyecto ocupa el sitio del subtitular. */
.proyecto-sector {
    grid-column: 1 / 5; /* 4 cols */
    color: var(--grey);
}
.proyecto-titulo {
    grid-column: 5 / 12; /* 7 cols, hueco de 1 col a la derecha como en las páginas */
    color: var(--contrast);
}

/* El cover va al ancho del contenido (no a sangre) y en la proporción del
   Figma; .cover-media ya se posiciona absoluto dentro con object-fit. */
.proyecto-cover {
    position: relative;
    aspect-ratio: 1325 / 860;
    margin: 0 var(--pad);
    overflow: hidden;
}

/* -- Ficha: datos a la izquierda, intro a la derecha -------------------- */
.proyecto-ficha {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    align-items: start;
    /* El ritmo vertical del proyecto: --padh*2 entre secciones */
    padding: calc(var(--padh) * 2) var(--pad);
}

.proyecto-datos { grid-column: 1 / 3; }  /* 2 cols */
.proyecto-intro { grid-column: 5 / 13; } /* 8 cols */

/* Cada dato es etiqueta + valor pegados; el aire va entre pares */
.proyecto-dato + .proyecto-dato { margin-top: var(--pads); }
.proyecto-dato dt { color: var(--grey); }
.proyecto-dato dd { margin: 0; color: var(--contrast); }

/* -- Bloque de proyecto: Galería --------------------------------------- */
/* Las filas se separan por --pad (en Home la galería usa --padb) */
.block-proyecto-galeria {
    display: flex;
    flex-direction: column;
    gap: var(--pad);
    padding: 0 var(--pad);
    margin: var(--pad) 0;
}
.block-proyecto-galeria + .block-proyecto-galeria { margin-top: var(--pad); }

.block-proyecto-galeria-row {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    align-items: start;
}

.block-proyecto-galeria-item.is-c5  { grid-column: span 5; }
.block-proyecto-galeria-item.is-c6  { grid-column: span 6; }
.block-proyecto-galeria-item.is-c7  { grid-column: span 7; }
.block-proyecto-galeria-item.is-c8  { grid-column: span 8; }
.block-proyecto-galeria-item.is-c9  { grid-column: span 9; }
.block-proyecto-galeria-item.is-c10 { grid-column: span 10; }
.block-proyecto-galeria-item.is-c12 { grid-column: 1 / -1; }

.block-proyecto-galeria-item img { display: block; width: 100%; height: auto; }

/* -- Bloque de proyecto: Texto ----------------------------------------- */
.block-proyecto-texto {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: calc(var(--padh) * 2) var(--pad);
}
.block-proyecto-texto-inner { grid-column: 1 / 9; } /* 8 cols */

/* La galería no lleva aire por abajo (las filas se encadenan); si cierra la
   página hay que dárselo para que no quede pegada al footer. */
.single-proyecto > .block-proyecto-galeria:last-child { margin-bottom: calc(var(--padh) * 2); }

/* -- Secciones fijas del cierre del proyecto (Créditos, Compartir) ------
   No son bloques del flexible content: las pinta single.php siempre. Misma
   cáscara que .block-section: borde arriba, label en la columna 1 y cuerpo
   desde la 5ª. */
.proyecto-seccion {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: var(--pads) var(--pad) calc(var(--padh) + var(--padb));
}

.proyecto-seccion-label {
    grid-column: 1 / 5;
    padding-top: 8px; /* gap borde→label del Figma (SECTION LABEL) */
}

.proyecto-seccion-body { grid-column: 5 / 13; }

.proyecto-seccion-creditos { margin-top: var(--pad); }

/* La línea no va de canto a canto: se queda alineada con el margen de página
   (--pad), como en el Figma. Va en ::before y no en border-top porque la
   sección sí llega a los bordes. Absoluta, así no cuenta como celda del grid. */
.proyecto-seccion::before,
.proyecto-relacionados::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    height: 1px;
    background: var(--contrast);
}

/* Dos columnas de 3 dentro de las 8 del cuerpo: caen exactamente sobre las
   columnas 5-7 y 9-11 del grid general. La cuenta, en dos pasos:
   · el contenedor son 7 de las 8 columnas del cuerpo (de ahí el 87.5%
     menos un octavo de medianil, que sobra al quitar una columna);
   · la calle entre las dos es 1 columna + 2 medianiles.
   Sale exacto a cualquier ancho, sin repetir los valores del grid. */
.seccion-2col {
    width: calc(87.5% - var(--grid-gutter) / 8);
    column-gap: calc((100% - var(--grid-gutter) * 6) / 7 + var(--grid-gutter) * 2);
}
.seccion-2col.is-flow  { columns: 2; }
.seccion-2col.is-fixed { display: grid; grid-template-columns: 1fr 1fr; }

/* -- Grupo etiqueta + líneas (Créditos del proyecto, bloque Datos) ---- */
.seccion-dato {
    break-inside: avoid; /* un grupo no se parte entre las dos columnas */
    margin-bottom: var(--pad2);
}
.seccion-dato.is-salto { break-before: column; }
.seccion-dato-etiqueta { color: var(--grey); }

/* -- Compartir -------------------------------------- */
.proyecto-compartir-col { display: flex; flex-direction: column; align-items: flex-start; }
.proyecto-compartir-etiqueta { color: var(--grey); }
.proyecto-compartir-col .save-button { position: static; transform: none; margin-top: var(--pads); }

/* -- Relacionados ----------------------------------- */
.proyecto-relacionados {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: var(--pads) var(--pad) calc(var(--padh) + var(--padb));
}

.proyecto-relacionados-label {
    grid-column: 1 / -1;
    padding-top: 8px;
}

/* 3 cards de 4 columnas: repartir 12 en 3 con el mismo medianil da el
   mismo ancho que 4 columnas del grid general. */
.proyecto-relacionados-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gutter);
    align-items: start;
    margin-top: var(--padm);
}

/* Proporciones del Figma para esta anchura de card */
.proyecto-relacionados-grid .block-proyecto-card.is-portrait .block-proyecto-media {
    aspect-ratio: 428 / 575;
}
.proyecto-relacionados-grid .block-proyecto-card.is-landscape .block-proyecto-media {
    aspect-ratio: 428 / 305;
}

.proyecto-relacionados-cta {
    grid-column: 9 / 13;
    display: inline-flex;
    align-items: center;
    align-self: start;
    justify-self: start;
    gap: var(--pads);
    margin-top: var(--padb);
    color: var(--contrast);
}

/* -- Proceso: sección de fondo gris a sangre, entre bloques y créditos ---
   Colores tomados del Figma: fondo --grey, titular --grey-light y todo lo
   demás en blanco. */
.proyecto-proceso {
    background: var(--grey);
    color: var(--primary);
    /* Mismo aire sobre el titular que las otras secciones full-bleed del
       tema (newsletter, testimonios) */
    padding: calc(var(--pad) + var(--pads) + 1px) var(--pad) calc(var(--padh) * 2);
}

.proyecto-proceso-header {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
}

.proyecto-proceso-titulo    { grid-column: 1 / 5; color: var(--grey-light); }
.proyecto-proceso-subtitulo { grid-column: 5 / 13; }

.proyecto-proceso-filas {
    display: flex;
    flex-direction: column;
    gap: var(--pad); /* las filas se encadenan, como en la galería */
    margin-top: calc(var(--padh) * 2);
}

.proyecto-proceso-fila {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    align-items: start;
}

/* Texto + Imagen. Las columnas se declaran a mano (y no con span) para que
   el hueco quede igual con texto y sin él: la imagen no se mueve.
   La fila también es explícita: invertida, el texto va a la columna 9 y la
   imagen a la 1, y sin fijarla el autoplacement —que solo avanza hacia
   delante— mandaba la imagen a una segunda fila. */
.is-texto-imagen > * { grid-row: 1; }

.is-texto-imagen .proyecto-proceso-texto { grid-column: 1 / 4; }
.is-texto-imagen .proyecto-proceso-media { grid-column: 5 / 13; }

.is-texto-imagen.is-invertida .proyecto-proceso-texto { grid-column: 9 / 12; }
.is-texto-imagen.is-invertida .proyecto-proceso-media { grid-column: 1 / 9; }

/* 3 imágenes: caen solas en las columnas 1, 5 y 9 */
.is-tres .proyecto-proceso-media { grid-column: span 4; }

.proyecto-proceso-media img { display: block; width: 100%; height: auto; }

/* ============================================================
   LIGHTBOX — imágenes del proyecto (js/lightbox.js)
   ============================================================ */

:root {
    /* Banda que se reserva para el cerrar y el contador (--pad + línea +
       --pad): es el tope que impide que la imagen se meta debajo de ellos. */
    --lightbox-ui: calc(var(--pad) * 2 + var(--lh-ui16));
}

[data-lightbox] img { cursor: pointer; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000; /* por encima del menú (2000), por debajo del fade de barba (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--contrast);
    opacity: 0;
    visibility: hidden;
    cursor: none; /* la flecha la pinta .lightbox-cursor, como en el slider de Home */
    transition: opacity var(--transition), visibility var(--transition);
}

.lightbox.is-visible {
    opacity: 1;
    visibility: visible;
}

body.lightbox-abierto { overflow: hidden; }

/* La imagen llega hasta el borde por su lado largo y se frena por el corto,
   para no meterse debajo del cerrar ni del contador. */
.lightbox-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-media img {
    display: block;
    width: auto;
    height: auto;
}

/* Vertical: manda el alto, arriba y abajo hasta --pad; el ancho se frena */
.lightbox-media.is-vertical img {
    max-height: calc(100vh - var(--pad) * 2);
    max-height: calc(100dvh - var(--pad) * 2);
    max-width: calc(100vw - var(--lightbox-ui) * 2);
}

/* Horizontal: manda el ancho, hasta los lados; el alto se frena */
.lightbox-media.is-horizontal img {
    max-width: calc(100vw - var(--pad) * 2);
    max-height: calc(100vh - var(--lightbox-ui) * 2);
    max-height: calc(100dvh - var(--lightbox-ui) * 2);
}

/* Los dos van pegados al borde derecho: el cerrar arriba y el contador abajo */
.lightbox-contador,
.lightbox-cerrar {
    position: absolute;
    right: var(--pad);
    z-index: 2;
    color: var(--contrast);
}

.lightbox-contador { bottom: var(--pad); }

.lightbox-cerrar {
    top: var(--pad);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition);
}

/* Flecha que sigue al ratón, igual que en el slider de Home */
.lightbox-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 39px;
    margin: -19.5px 0 0 -25.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.lightbox-cursor.is-visible { opacity: 1; }

.lightbox-cursor svg {
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.lightbox-cursor.is-left  svg { transform: rotate(180deg); }
.lightbox-cursor.is-right svg { transform: rotate(0deg); }

/* ============================================================
   MI COLECCIÓN — guardados (js/coleccion.js)
   ============================================================ */

/* Contador del header: en naranja en cuanto hay algo guardado */
.header-counter.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
}

/* -- Botón de guardar en la esquina de las cards -----------------------
   Sin borde y sobre la imagen (ver Figma). Solo aparece al pasar por
   encima; si ya está guardado se queda siempre a la vista. */
.card-wrap { position: relative; }

.save-button.is-esquina {
    top: calc(var(--pads) * 2);
    right: calc(var(--pads) * 2);
    width: 30px;
    height: 30px;
    transform: none;
    border: none;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition);
}

.save-button.is-esquina.is-active,
.save-button.is-esquina.is-siempre,
.card-wrap:hover .save-button.is-esquina {
    opacity: 1;
}

/* -- Página -------------------------------------------------------------- */
.coleccion-label  { grid-column: 1 / 5; color: var(--grey); }

.coleccion-nombre {
    grid-column: 5 / 13;
    color: var(--contrast);
    outline: none;
}

/* El placeholder no es un input: se pinta con ::before cuando está vacío */
.coleccion-nombre:empty::before {
    content: attr(data-placeholder);
    color: var(--contrast);
}

.coleccion-vacia {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: 0 var(--pad);
}

.coleccion-vacia-texto { grid-column: 5 / 13; }
.coleccion-vacia-texto a { color: var(--grey); }

/* El cuadrado que va metido dentro del texto, del alto de la línea */
.coleccion-cuadrado {
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    border: 1.5px solid var(--contrast);
    vertical-align: baseline;
}

.coleccion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padb) var(--grid-gutter);
    align-items: start;
    padding: 0 var(--pad) calc(var(--padh) * 2);
}

/* Las cards de la colección van a 4 columnas, como las de relacionados */
.coleccion-grid .block-proyecto-card.is-portrait .block-proyecto-media {
    aspect-ratio: 428 / 575;
}
.coleccion-grid .block-proyecto-card.is-landscape .block-proyecto-media {
    aspect-ratio: 428 / 305;
}

/* -- Aviso naranja de la colección vacía -------------------------------- */
.coleccion-aviso {
    position: relative;
    /* 4 columnas del grid del sitio. La caja no es hija de ningún grid, así
       que el ancho se calcula: 4 columnas más los 3 medianiles de en medio. */
    width: calc(
        (100vw - var(--pad) * 2 - var(--grid-gutter) * 11) / var(--grid-cols) * 4
        + var(--grid-gutter) * 3
    );
    margin: 0 var(--pad) calc(var(--padh) * 2);
    padding: var(--pad);
    background: var(--accent);
    color: var(--contrast);
}

.coleccion-aviso-cerrar {
    position: absolute;
    right: var(--pad);
    bottom: var(--pad);
    padding: 0;
    background: none;
    border: none;
    color: var(--contrast);
    cursor: pointer;
}

/* -- Compartir la colección --------------------------------------------- */
.coleccion-compartir {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: 0 var(--pad) var(--pad);
}

.coleccion-compartir-label { grid-column: 1 / 5; color: var(--grey); }

.coleccion-compartir-enlaces {
    grid-column: 5 / 13;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pad);
}

.coleccion-compartir-enlace { color: var(--contrast); }

/* -- Listado de Noticias — mismas clases que el de Proyectos, solo cambian
   las columnas de la vista de lista y el grid, que aquí va a 3. ------- */
.noticias-col-titulo    { grid-column: 1 / 8; }
.noticias-col-fecha     { grid-column: 8 / 10; }
.noticias-col-categoria { grid-column: 10 / 13; }

/* La caja del medio ocupa el sitio del cuadrado de guardar */
.noticias-fila-badge {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* En el listado el grid de noticias va con el aire del de proyectos */
.proyectos-listado > .block-noticias-grid {
    padding: var(--pad) var(--pad) calc(var(--padh) * 2);
    gap: var(--padb) var(--grid-gutter);
}

/* ============================================================
   NOTICIA (single-noticia.php)
   ============================================================ */

/* Cuerpo a dos columnas dentro de la rejilla del sitio: la ficha en la 1 y
   el texto desde la 5, y los bloques caen en esa misma rejilla. */
.noticia-cuerpo {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--padh) var(--grid-gutter);
    align-items: start;
    padding: calc(var(--padh) * 1) var(--pad) calc(var(--padh) + var(--padb));
}

/* La ficha se queda arriba del todo; los bloques que arrancan en la columna 1
   caen solos por debajo, que el autoplacement no pisa lo ya colocado. */
.noticia-ficha {
    grid-column: 1 / 4;
    grid-row: 1;
}

.noticia-dato + .noticia-dato { margin-top: var(--pad2); }
.noticia-dato-label { color: var(--grey); }

.noticia-compartir-enlace {
    display: block;
    padding: 0;
    background: none;
    border: none;
    color: var(--contrast);
    text-align: left;
    cursor: pointer;
    transition: color var(--transition);
}

/* El texto siempre en la misma vertical, ocupe lo que ocupe la imagen */
.noticia-bloque-texto { grid-column: 5 / 13; }

.noticia-bloque-imagen img { display: block; width: 100%; height: auto; }

.noticia-volver {
    grid-column: 5 / 13;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--pads);
    color: var(--contrast);
}

/* -- Noticia: Entrevista ------------------------------------------------
   Sigla en la columna 5 y respuesta desde la 6: una columna metida respecto
   al resto del cuerpo. */
.noticia-bloque-entrevista {
    grid-column: 1 / 13;
    display: flex;
    flex-direction: column;
    gap: var(--padb);
}

.noticia-entrevista-fila {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    align-items: start;
}

.noticia-entrevista-sigla { grid-column: 5; }
.noticia-entrevista-texto { grid-column: 6 / 13; }

/* -- Noticia: Cita — a lo ancho desde la columna 1 --------------------- */
.noticia-bloque-cita {
    grid-column: 1 / 11; /* 10 de 12 */
    margin: 0;
    color: var(--contrast);
}

/* ============================================================
   PLANTILLA OSCURA (equipo.php)
   ============================================================
   El negro lo decide la plantilla, no un campo: la clase la pone un filtro
   de body_class (functions/equipo.php) porque body_class se imprime antes de
   que la plantilla llegue a ejecutarse. A los bloques se les inyecta on_dark
   desde la propia plantilla, así que su tipografía ya viene en blanco; aquí
   solo quedan los fondos, las líneas y lo que trae color propio. */

body.es-oscura {
    background: var(--contrast);
    color: var(--primary);
}

body.es-oscura .page-subtitle { color: var(--primary); }

body.es-oscura .block-tabla-row,
body.es-oscura .proyectos-fila,
body.es-oscura .proyectos-tabla-header::after,
body.es-oscura .equipo-barra { border-color: var(--primary); }

body.es-oscura .block-section::before,
body.es-oscura .proyectos-tabla-header::after { background: var(--primary); }

body.es-oscura .proyectos-fila-link,
body.es-oscura .proyectos-orden { color: var(--primary); }

/* -- El equipo ---------------------------------------------------------- */
/* La barra de vista no es pegajosa: esto es una sección dentro de una
   página, no un listado a página completa. */
.equipo-seccion {
    position: relative;
    padding-bottom: calc(var(--padh) + var(--padb));
}

/* La línea va metida hasta el margen de página, como en el resto de secciones,
   y se queda arriba: la barra se despega de ella al pegarse al header. */
.equipo-seccion::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    height: 1px;
    background: var(--primary);
}

.equipo-barra-label { grid-column: 1 / 5; }

.equipo-barra-vista {
    grid-column: 5 / 13;
    display: flex;
    gap: var(--pad);
}

.equipo-listado { padding: 0 var(--pad); }

/* Sin el --pad lateral de la versión pegajosa —que está ahí para que la banda
   llegue a sangre— o las columnas quedarían 20px corridas respecto a las filas. */
.proyectos-tabla-header.is-estatico {
    position: static;
    margin-top: var(--padh);
    padding-left: 0;
    padding-right: 0;
}
.proyectos-tabla-header.is-estatico::after { left: 0; right: 0; }

/* Seis por fila = dos columnas de las doce del sitio */
.equipo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--padb) var(--grid-gutter);
    align-items: start;
    margin-top: var(--padb);
}

/* Sin foto queda el hueco gris del diseño */
.equipo-card-foto {
    position: relative;
    aspect-ratio: 7 / 10;
    overflow: hidden;
    background: var(--grey-dark, #262626);
}
.equipo-card-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.equipo-card-datos { padding-top: var(--pad); }
.equipo-card-datos p { margin: 0; }
.equipo-cargo { color: var(--grey); }
.equipo-card-datos a { color: inherit; }

/* Columnas de la vista de lista */
.equipo-col-nombre { grid-column: 1 / 5; }
.equipo-col-cargo  { grid-column: 5 / 10; }
.equipo-col-email  { grid-column: 10 / 13; }
.equipo-col-cargo  { color: var(--grey); }

/* -- Posiciones abiertas ------------------------------------------------ */
.posiciones-lista {
    display: flex;
    flex-direction: column;
    gap: var(--pad);
    margin: var(--padb) 0;
}

.posicion {
    padding: var(--pad);
    border: 1px solid var(--primary);
}

.posicion-titulo { margin-bottom: var(--padb); }

/* El botón se ancla abajo a la derecha, con el texto a su izquierda */
.posicion-cuerpo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pad);
}

.posicion-texto { max-width: 60%; }

.posicion-cta {
    flex: 0 0 auto;
    padding: var(--pads) var(--pad);
    border: 1px solid var(--primary);
    color: var(--primary);
    transition: background var(--transition), color var(--transition);
}

.posiciones-cierre a { color: var(--grey); }

/* -- Descargas ----------------------------------------------------------
   Tarjeta compuesta: imagen (o el gris de reserva), titular encima y logo
   abajo a la derecha. Con imagen todo va en blanco; sin ella, en color. */
.descargas-grid {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padb) var(--grid-gutter);
    align-items: start;
    margin-top: var(--padm);
}

.descarga { display: block; color: inherit; }

.descarga-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--grey);
}

.descarga-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.descarga-titulo {
    font-size: var(--fs-descarga);
    line-height: var(--lh-descarga);
    letter-spacing: var(--ls-descarga);
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    right: var(--pad);
    color: var(--contrast);
}
.descarga.has-imagen .descarga-titulo { color: var(--primary); }

.descarga-logo {
    position: absolute;
    right: var(--pad);
    bottom: var(--pad);
    width: 30%;
}
/* El logo del tema es SVG y theme_acf_image lo mete en línea, no como <img>:
   se dimensionan los dos por si algún día se sube un PNG. */
.descarga-logo img,
.descarga-logo svg {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.descarga-pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pad);
    padding-top: var(--pads);
}

.descarga-etiqueta { color: var(--grey); }

.descarga-flecha {
    flex: 0 0 auto;
    color: var(--grey-light);
    transition: color var(--transition);
}

/* ============================================================
   FAQs — acordeón (js/acordeon.js)
   ============================================================ */

.block-faqs {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: 0 var(--pad) calc(var(--padh) * 2);
}

.faqs-lista { grid-column: 5 / 13; }

.faq { border-bottom: 1px solid var(--contrast); }

.faq-pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pad);
    width: 100%;
    /* La pregunta no va centrada entre líneas: la suya queda debajo, cerca
       del texto, y el aire se acumula arriba. */
    padding: var(--pad) 0 6px;
    background: none;
    border: none;
    color: var(--contrast);
    text-align: left;
    cursor: pointer;
    transition: color var(--transition);
}

.faq-icono {
    flex: 0 0 16px;
    width: 16px;
    height: auto;
    transition: transform var(--transition);
}
.faq.is-open .faq-icono { transform: rotate(180deg); }

/* El alto se anima con grid-template-rows de 0fr a 1fr: no hay que medir la
   respuesta desde JS ni fijarle un max-height a ojo. Si algún navegador no
   interpola entre fr, la respuesta abre y cierra igual, solo que de golpe. */
.faq-respuesta {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition);
}
.faq.is-open .faq-respuesta { grid-template-rows: 1fr; }

/* El recorte va aquí dentro: la caja de fuera es la que cambia de alto */
.faq-respuesta-inner { overflow: hidden; }
.faq-respuesta-inner > div { padding: var(--pad) 0 6px; }


/* ============================================================
   BUSCADOR (plantilla buscar.php)
   ============================================================ */

/* La página entera va sobre naranja: el header se queda en blanco (lo decide
   js/header.js por la clase) y sin banda desenfocada —no hay nada detrás que
   desenfocar—, y el footer no se pinta: de una búsqueda no se sale por abajo,
   se vuelve al menú desde el header. */
body.es-naranja {
    background: var(--accent);
    color: var(--primary);
}
body.es-naranja .header-blur { display: none; }
body.es-naranja #footer      { display: none; }

.buscar {
    min-height: var(--real100);
    /* #main ya baja el contenido por debajo del header (--header-band), así
       que aquí solo va el aire del Figma entre la banda y el campo. */
    padding: calc(var(--padh) + var(--pad)) var(--pad) calc(var(--padh) * 2);
}

.buscar-input {
    display: block;
    width: 100%;
    appearance: none;
    border: none;
    border-bottom: 1px solid var(--primary);
    border-radius: 0;
    background: none;
    padding: 0 0 var(--pads);
    color: var(--primary);
    caret-color: var(--primary); /* el cursor intermitente del diseño es el nativo */
    font-family: var(--sans);
}
.buscar-input:focus { outline: none; }
.buscar-input::placeholder { color: var(--primary); opacity: 1; }
/* El aspa de "limpiar" que Chrome/Safari meten en type=search no está en el diseño */
.buscar-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.buscar-contador { margin-top: var(--pad); }

/* Tres por fila: con este medianil, tres columnas iguales caen exactamente
   sobre grupos de 4 de las 12 del sitio. Todas las cards miden lo mismo de
   ancho y lo que pida su imagen de alto, por eso van alineadas arriba. */
.buscar-resultados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pad) var(--grid-gutter);
    align-items: start;
    margin-top: var(--padh);
}
.buscar-resultados:empty { display: none; }

.buscar-card { display: block; color: inherit; }
.buscar-card-media img { display: block; width: 100%; height: auto; }
.buscar-card-caption { padding-top: var(--pads); }
/* Sobre naranja el gris de la meta de las noticias no se lee: va en blanco */
.buscar-card-meta { color: var(--primary); }

.buscar-vacio { margin-top: calc(var(--padb) + var(--pad)); }

/* Etiqueta del campo: está por accesibilidad, no para verse */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* El isotipo que en móvil acompaña a la marca del footer: en desktop va
   arriba a la izquierda (.footer-logo) y este no se pinta. */
.footer-wordmark-isotipo { display: none; }
.footer-wordmark-isotipo svg,
.footer-wordmark-isotipo img { display: block; width: 60px; height: auto; }


/* ============================================================
   TESTIMONIOS EN VÍDEO — carrusel infinito (js/marquee-video.js)
   ============================================================ */

/* La cinta se sale por la derecha del bloque y ahí se recorta: el primer
   vídeo arranca en el margen de página y el quinto ya asoma. */
.video-marquee {
    /* El bloque cierra el cuerpo de la cáscara para salir a todo el ancho,
       pero sigue siendo hijo del grid de 12: sin esto se colocaría solo en
       una columna. */
    grid-column: 1 / -1;
    /* Se come los márgenes de la sección para recortar en los bordes de la
       pantalla y no en los de página: la cinta sale a sangre por los dos
       lados. El ancho de las tarjetas no cambia —lo marca el grid, cuatro
       por ancho de contenido—, solo se ve un poco más de las de los cantos. */
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    overflow: hidden;
    cursor: grab;
    user-select: none;
}
.video-marquee.is-grabbing { cursor: grabbing; }
.video-marquee.on-dark     { color: var(--primary); }

.video-marquee-track {
    display: flex;
    column-gap: var(--grid-gutter);
    width: max-content;
    will-change: transform;
}

/* Cuatro entran justos en el ancho de contenido (3 de las 12 columnas cada
   uno). Se mide contra el viewport y no en % porque la cinta es más ancha
   que la pantalla: un porcentaje se resolvería contra ella, no contra el
   bloque. */
.video-testimonio {
    flex: 0 0 calc((100vw - var(--pad) * 2 - var(--grid-gutter) * 3) / 4);
}

.video-testimonio-media {
    position: relative;
    aspect-ratio: 9 / 16; /* formato story */
    overflow: hidden;
    background: var(--grey-light);
}

.video-testimonio-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-testimonio-sonido {
    position: absolute;
    top: calc(var(--pads) * 3);
    left: calc(var(--pads) * 3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 1px solid var(--primary);
    border-radius: 50%;
    color: var(--primary);
    cursor: pointer;
}
.video-testimonio-sonido svg { width: 15px; height: 15px; }

/* Un icono u otro según el estado, nunca los dos */
.video-testimonio-sonido .icono-sonido            { display: none; }
.video-testimonio-sonido.is-sonando .icono-mute   { display: none; }
.video-testimonio-sonido.is-sonando .icono-sonido { display: block; }

.video-testimonio-caption { padding-top: calc(var(--pads) * 2); }
.video-testimonio-cargo   { color: var(--grey); }

/* El nombre es más grande que el cargo (18 contra 16) pero del mismo peso:
   por eso no usa .t-initial-name, que es este mismo tamaño en Kräftig. */
.video-testimonio-nombre {
    font-family: var(--sans);
    font-size: var(--fs-initial-name);
    line-height: var(--lh-initial-name);
    font-weight: 400;
    letter-spacing: var(--ls-initial-name);
}


/* ============================================================
   404
   ============================================================ */

/* La cabecera es la de cualquier página (.page-header). Debajo, el cuerpo
   cae en las mismas columnas que el de una sección: 5 a 12. */
.error-404 { padding-bottom: calc(var(--padh) * 2); }

.error-404-cuerpo {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gutter);
    padding: 0 var(--pad);
}
.error-404-cuerpo > * { grid-column: 5 / 13; }
.error-404-cuerpo .block-section-cta { justify-self: start; }


/* ============================================================
   DOCUMENTO — titular que separa documentos en una página larga (Legal)
   ============================================================ */

.documento-titulo {
    padding: calc(var(--padh) * 2) var(--pad) var(--padb);
    /* El header es fijo: sin esto, al llegar por un ancla el titular queda
       debajo de la banda. */
    scroll-margin-top: calc(var(--header-band) + var(--pad));
}

/* El primero de la página ya tiene el aire de la cabecera encima */
.documento-titulo:first-of-type { padding-top: var(--padh); }

/* Los subtítulos de un WYSIWYG heredan el tamaño del bloque y solo cambian de
   peso: el sistema no tiene un estilo para ellos y el bold del navegador, a
   1.17em, no pega con nada. */
.post-content h2,
.post-content h3,
.post-content h4 {
    font-size: inherit;
    line-height: inherit;
    font-weight: 500;
}

/* El primer bloque de un documento no lleva titular (es su párrafo de
   entrada) y el encadenado normal lo subiría 95px, metiéndolo dentro del
   titular del documento. */
.documento-titulo + .block-section.has-no-title { margin-top: 0; }


/* ============================================================
   NEWSLETTER — alta en MailerLite (js/contact-bar.js, functions/newsletter.php)
   ============================================================ */

/* El formulario ocupa 6 de las 8 columnas del cuerpo, igual que el de
   contacto: 6 columnas + 5 medianiles sobre un contenedor de 8 = 75% menos
   un cuarto de medianil. Medido en el Figma: 653px de 1325. */
.newsletter-wrap {
    width: calc(75% - var(--grid-gutter) / 4);
    margin-top: var(--padh);
}

/* Campo y botón comparten línea y subrayado, como en el diseño */
.newsletter-campo {
    display: flex;
    align-items: baseline;
    gap: var(--pad);
    border-bottom: 1px solid var(--grey);
    padding-bottom: var(--pads);
    transition: border-color var(--transition);
}
.newsletter-campo:focus-within { border-color: var(--contrast); }
.newsletter-form.has-error .newsletter-campo { border-color: var(--red); }

.newsletter-campo input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--sans);
}
.newsletter-campo input:focus { outline: none; }
.newsletter-campo input::placeholder { color: var(--grey); }

.newsletter-enviar {
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: 0;
    color: var(--grey);
    cursor: pointer;
    transition: color var(--transition);
}
/* Se enciende cuando el formulario está listo para enviarse, igual que el
   botón de la barra de contacto */
.newsletter-enviar.is-ready { color: var(--contrast); }

.newsletter-form .contact-legal { margin-top: var(--padb); }