/* ============================================================
   RESPONSIVE
   ============================================================ */

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* ============================================================
   DESKTOP GRANDE — > 1440px
   ============================================================ */

@media only screen and (min-width: 1441px) {

    :root {
    }

}


/* ============================================================
   DESKTOP — > 1080px
   hover states solo en dispositivos con puntero fino
   ============================================================ */

@media only screen and (min-width: 1081px) {

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

    /* Hover genérico */
    @media (hover: hover) and (pointer: fine) {

        a, .hover, .block-proyecto-nombre, .block-enlace-row p, .block-enlace-arrow, .block-enlace-plain-row {
            transition: color var(--transition);
        }

        a:hover          { color: var(--accent); }
        .hover:hover     { color: var(--accent); cursor: pointer; }

        /* Loop de proyectos y de noticias: título en naranja al hover, sea sobre
           la foto o el texto */
        .block-proyecto-card:hover .block-proyecto-nombre,
        .block-noticia-card:hover .block-noticia-titulo { color: var(--accent); }

        /* Listado de enlaces (con_enlaces=true): flecha + hover naranja solo en items con link propio */
        .block-enlace-row.has-link { cursor: pointer; }
        .block-enlace-row.has-link:hover p,
        .block-enlace-row.has-link:hover .block-enlace-arrow {
            color: var(--accent);
        }

        /* Listado de enlaces (con_enlaces=false): hover naranja en la fila (dispara también la imagen flotante) */
        .block-enlace-plain-row:hover { color: var(--accent); }

        /* Métricas: solo reaccionan las que enlazan a algún sitio */
        .block-metrica.has-link:hover { color: var(--accent); }

        /* Filtros del listado de Proyectos (el desactivado no reacciona) */
        .proyectos-filtro:not(.is-disabled):hover { color: var(--accent); }

        /* Vista LIST: fila y cabecera ordenable en naranja al hover.
           El hover se escucha en .proyectos-fila y no en el enlace para que
           tambien cuente el trozo del boton de guardar, que va encima. */
        .proyectos-fila:hover .proyectos-fila-link,
        .proyectos-fila:hover .proyectos-col,
        .proyectos-orden:hover { color: var(--accent); }

        /* La caja del medio no entra en el naranja de la fila: se queda en
           negro sobre su propio fondo, tanto al pasar por la fila como por
           ella misma (si no, se la lleva el a:hover general). */
        .proyectos-fila:hover .noticias-fila-badge,
        .noticias-fila-badge:hover { color: var(--contrast); }
        .proyectos-orden:hover .proyectos-orden-icono { opacity: 1; }

        /* Guardar en colección: al hover se pinta entero de naranja */
        .save-button:hover {
            background: var(--accent);
            border-color: var(--accent);
        }

        /* FAQs: la pregunta en naranja al pasar por encima */
        .faq-pregunta:hover { color: var(--accent); }

        /* Descargas: la flecha se enciende al pasar por la tarjeta */
        .descarga:hover .descarga-flecha { color: var(--accent); }

        /* Lightbox: el cerrar en naranja */
        .lightbox-cerrar:hover { color: var(--accent); }

        /* Testimonios: CTA y flechas del carrusel, negro por defecto → naranja */
        .block-testimonios-cta:hover,
        .block-testimonios-arrow:hover { color: var(--accent); }

    }

}


/* ============================================================
   TABLET + MÓVIL LANDSCAPE + TABLET COARSE
   — ≤ 1080px  |  landscape coarse  |  portrait coarse ≤ 1024px
   ============================================================ */

@media only screen and (max-width: 1080px),
       only screen and (pointer: coarse) and (orientation: landscape),
       only screen and (max-width: 1024px) and (pointer: coarse) and (orientation: portrait) {

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

    /* ------------------------------------------------------------
       TIPOGRAFÍA MÓVIL (Figma: MÓVIL/*)
       Un token por estilo, igual que en desktop: se sobreescriben aquí una
       vez y cambian en todos sus usos. Los estilos que no aparecen abajo
       miden lo mismo que en desktop (UI META, COUNTER, COOKIES, INITIAL
       NAME y JOB TITLE).
       ------------------------------------------------------------ */
    :root {

        /* El logo del header es más grande en móvil y la banda crece con él
           (--header-band = --pad * 2 + --header-h). El contador se queda en
           22px a mano, más abajo. */
        --header-h: 28px;

        --fs-hero: 58px;  --lh-hero: 54px;  /* --ls-hero no cambia (-3%) */

        /* El menú y las secciones dejan de compartir H1 */
        --fs-h1: 34px;         --lh-h1: 34px;         /* H1 - SECCIONES */
        --fs-h1-menu: 40px;    --lh-h1-menu: 45px;    --ls-h1-menu: 0;
        /* El campo del buscador baja a H2 (Figma: H2 - BUSCAR) */
        --fs-h1-search: 24px;  --lh-h1-search: 24px;  --ls-h1-search: 0.01em;

        /* Un solo tamaño de H2 con tres interlineados/trackings según variante */
        --fs-h2: 24px;
        --lh-h2: 28px;            --ls-h2-negro: 0;
        --lh-h2-blanco: 27px;     --ls-h2-blanco: 0.01em;
        --lh-h2-slideshow: 24px;  --ls-h2-slideshow: 0.01em;

        /* ROW EXPERIENCIAS: además de encoger, adelgaza (400 → 300) */
        --fs-row-home: 34px;  --lh-row-home: 36px;  --fw-row-home: 300;

        /* En móvil el Figma tiene un solo BODY: los dos tamaños de desktop
           (22 y 16) caen en el mismo 18/24. */
        --fs-body22: 18px;  --lh-body22: 24px;  --ls-body22-negro: 0.01em;
        --fs-body16: 18px;  --lh-body16: 24px;  --ls-body16-negro: 0.01em;  --ls-body16-blanco: 0.01em;

        /* UI: la blanca adelgaza (400 → 300) y va más apretada de interlínea */
        --fs-ui16: 18px;  --lh-ui16: 22px;  --lh-ui16-blanco: 18px;  --fw-ui16-blanco: 300;

        --fs-ui-meta-mono: 14px;     --lh-ui-meta-mono: 18px;
        --fs-project-details: 14px;  --lh-project-details: 18px;

        --fs-testimonial: 28px;  --lh-testimonial: 32px;

        /* Las métricas no están en el set de móvil del Figma: se les da el
           tamaño de ROW EXPERIENCIAS, que es la otra lista grande. */
        --fs-metrica: 34px;  --lh-metrica: 36px;

        --fs-job-body: 18px;  --lh-job-body: 25px;

    }

    /* Slider Home — usar la variante mobile del cover */
    .cover-media.is-desktop { display: none; }
    .cover-media.is-mobile  { display: block; }


    /* ------------------------------------------------------------
       HEADER — mismo funcionamiento de color, más simple: fuera el
       reloj y "Menú" se va a la derecha, junto al contador.
       ------------------------------------------------------------ */
    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .header-clock { display: none; }
    .header-meta  { flex: 0 0 auto; }

    /* El logo crece (28 contra 22) pero el contador no: deja de medir lo que
       la banda y se queda con su tamaño de siempre. */
    .header-inner { height: auto; }
    .header-counter {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
    }


    /* ------------------------------------------------------------
       TODO A UNA COLUMNA
       Los contenedores que reparten las 12 columnas del grid pasan a
       apilar. Se hace con display:block y no con grid-template-columns:
       1fr porque así los grid-column de los hijos (5/13, 3/11, 1/5...)
       dejan de contar solos: con una sola columna, un hijo colocado en
       la 5 se inventaría cuatro columnas implícitas. El aire que daba
       el gap lo ponen los márgenes de cada pieza.
       ------------------------------------------------------------ */
    .page-header,
    .error-404-cuerpo,
    .block-texto,
    .block-section,
    .block-galeria-row,
    .block-proyecto-galeria-row,
    .block-proyecto-texto,
    .proyecto-ficha,
    .proyecto-seccion,
    .proyecto-relacionados,
    .proyecto-proceso-header,
    .proyecto-proceso-fila,
    .coleccion-vacia,
    .coleccion-compartir,
    .noticia-cuerpo,
    .noticia-entrevista-fila,
    .block-faqs,
    .block-enlace-list-wrap,
    .menu-top,
    .footer-top { display: block; }

    /* Las rejillas de cards, de varias por fila a una */
    .block-proyectos-grid,
    .block-proyectos-grid.is-2col,
    .block-noticias-grid,
    .block-noticias-grid.is-3col,
    .proyecto-relacionados-grid,
    .coleccion-grid,
    .descargas-grid,
    .buscar-resultados { grid-template-columns: 1fr; }

    /* Título de sección y cuerpo, ya apilados: el aire entre los dos lo
       daba el grid. */
    .block-section-label,
    .proyecto-seccion-label,
    .proyecto-proceso-label { margin-bottom: var(--padm); }

    .page-title { margin-bottom: var(--pads); }

    /* Galerías: sin gap de grid, las imágenes se separan a mano */
    .block-galeria-item + .block-galeria-item,
    .block-proyecto-galeria-item + .block-proyecto-galeria-item { margin-top: var(--pad); }

    /* El cuerpo de una sección ya no tiene columna propia a la derecha */
    .block-texto-inner,
    .block-texto-inner.is-izquierda { text-align: left; }

    /* Los pares de columnas de dentro del cuerpo (créditos, compartir, datos
       de contacto) también se apilan: a esta anchura un email no cabe en
       media columna y se salía de la pantalla. */
    .seccion-2col,
    .seccion-2col.is-flow  { width: 100%; columns: auto; }
    .seccion-2col.is-fixed { grid-template-columns: 1fr; }
    .seccion-dato          { overflow-wrap: break-word; }

    /* El formulario ocupa lo que haya */
    .block-formulario { width: 100%; }


    /* ------------------------------------------------------------
       GUARDAR — sin hover que valga, el botón se ve siempre
       ------------------------------------------------------------ */
    .save-button.is-esquina { opacity: 1; }


    /* Testimonios en vídeo: cuatro por pantalla serían sellos de correos.
       Dos, y el tercero asomando, que es lo que invita a arrastrar. */
    .video-testimonio {
        flex: 0 0 calc((100vw - var(--pad) * 2 - var(--grid-gutter)) / 2);
    }


    /* ------------------------------------------------------------
       LISTADOS (Proyectos, Noticias, Equipo)
       ------------------------------------------------------------ */

    /* Los filtros dejan de pegarse: apilados son cinco líneas y pegados se
       comerían un tercio de la pantalla. Cada grupo en su columna —vista a
       la izquierda, sectores a la mitad— y una opción por línea. */
    .proyectos-filtros,
    .equipo-barra {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .proyectos-vista,
    .proyectos-sectores,
    .equipo-barra-vista {
        flex-direction: column;
        align-items: flex-start; /* si no, cada botón se estira y centra su texto */
        gap: 0;
    }
    .proyectos-vista,
    .equipo-barra-label  { grid-column: 1; }
    .proyectos-sectores,
    .equipo-barra-vista  { grid-column: 2; }

    /* Vista LIST: solo queda el título. Localización, sector, año, fecha y
       categoría no caben, y la fila deja de ser rejilla para que el título
       ocupe el ancho en vez de sus 4 columnas de 12. */
    .proyectos-tabla-header,
    .proyectos-fila-link { display: block; }

    .proyectos-fila-link { padding-right: var(--padm); }

    .proyectos-col-localizacion,
    .proyectos-col-sector,
    .proyectos-col-anio,
    .noticias-col-fecha,
    .noticias-col-categoria { display: none; }

    /* Sin hover, la flecha de ordenación se ve siempre */
    .proyectos-orden-icono { opacity: 1; }

    /* El equipo sí va a dos por fila: son fichas estrechas (foto vertical,
       cargo y nombre debajo) y una sola por fila dejaría la página eterna. */
    .equipo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--padm) var(--grid-gutter); }


    /* ------------------------------------------------------------
       FOOTER — dos columnas: General a la izquierda; aniversario,
       oficina y social a la derecha. El isotipo baja a acompañar a la
       marca, que es donde va en móvil.
       ------------------------------------------------------------ */
    #footer { padding: var(--pad); }

    .footer-logo { display: none; }
    .footer-wordmark-isotipo { display: block; }

    /* minmax(0,...) y no 1fr a secas: si no, el sello del aniversario —que
       es más ancho que media pantalla— estira su columna y desiguala las dos. */
    #footer .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-col-badge img,
    .footer-col-badge svg { max-width: 100%; height: auto; }
    #footer .footer-columns .footer-col-general           { grid-column: 1; grid-row: 1; }
    #footer .footer-columns .footer-col-general-secondary { grid-column: 1; grid-row: 2; }
    #footer .footer-columns .footer-col-aniversario       { grid-column: 2; grid-row: 1; }
    #footer .footer-columns .footer-col-oficina           { grid-column: 2; grid-row: 2; }
    #footer .footer-columns .footer-col-social            { grid-column: 2; grid-row: 3; }

    /* Abajo: el copyright alineado con la columna de la derecha y, debajo,
       isotipo y marca en la misma línea. El margen del copyright es el mismo
       corte que el de las dos columnas de arriba (mitad + medio medianil),
       no el borde de la pantalla. */
    .footer-bottom {
        grid-template-columns: auto 1fr;
        gap: calc(var(--pads) * 2);
        align-items: end;
    }
    .footer-copyright {
        grid-column: 1 / -1;
        margin-left: calc(50% + var(--grid-gutter) / 2);
        margin-bottom: var(--pad);
    }
    .footer-wordmark-isotipo { grid-column: 1; }
    .footer-wordmark         { grid-column: 2; }


    /* ------------------------------------------------------------
       MENÚ — una columna: enlaces, idiomas, Buscar y, bajo una línea,
       el resto de páginas. Aquí no aparecen ni oficina ni social ni el
       sello: están en el footer.
       ------------------------------------------------------------ */
    .menu-inner { padding: calc(var(--header-band) + var(--padb)) var(--pad) var(--pad); }

    /* Con el menú abierto el logo sigue siendo el de siempre, en blanco: el
       isotipo grande del overlay es cosa de desktop y aquí se comería los
       primeros enlaces. */
    body.menu-open .header-logo-white   { display: block !important; }
    body.menu-open .header-logo-isotipo { display: none !important; }

    .menu-lang   { margin-top: var(--padb); }
    .menu-search { margin-top: var(--padb); }

    .menu-columns {
        display: flex;
        flex-direction: column;
        margin-top: var(--pad2);
        padding-top: var(--pad);
        border-top: 1px solid var(--primary);
    }
    .menu-columns .menu-copyright { order: 2; margin-top: var(--padm); }

    .menu-columns .menu-columns-inner { display: block; }
    .menu-columns-inner .footer-col-oficina,
    .menu-columns-inner .footer-col-social,
    .menu-columns-inner .footer-col-aniversario,
    .menu-columns-inner .footer-col-general .footer-col-label { display: none; }


    /* ------------------------------------------------------------
       BARRA DE CONTACTO — en una columna
       En escritorio son tres piezas en la misma fila (etiqueta | panel |
       Abrir/Cerrar). Aquí no cabe: arriba la etiqueta y Abrir/Cerrar a los
       lados, como el header, y debajo el panel a todo el ancho.
       ------------------------------------------------------------ */
    .contact-bar-inner {
        grid-template-columns: 1fr auto;
        /* Sin hueco entre filas: con el panel cerrado la fila mide 0 pero el
           gap seguiría ocupando, y la barra cerrada crecería sin motivo. */
        row-gap: 0;
    }

    .contact-bar-label  { grid-column: 1; }
    .contact-bar-action { grid-column: 2; }

    .contact-bar-panel {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .contact-bar.is-open .contact-bar-panel {
        margin-top: var(--pad);
        /* El formulario en columna es más alto que en escritorio; si aun así
           se queda corto, .contact-bar hace scroll por su cuenta. */
        max-height: 85vh;
    }


}


/* ============================================================
   TELÉFONO — ≤ 768px
   ============================================================ */

@media only screen and (max-width: 768px) {

}


/* ============================================================
   TELÉFONO PEQUEÑO — ≤ 480px
   ============================================================ */

@media only screen and (max-width: 480px) {

    :root {

    }

}