/* ============================================================
   Luum Arquitectos — estilos del tema
   Identidad 2026 (manual de marca): paleta tierra + Cormorant Garamond
   ============================================================ */

:root {
    /* Paleta de marca */
    --tierra: #8b4a2e;          /* Lu'um, color principal: acentos y distinción */
    --chukum: #d4c4a8;          /* base cálida */
    --piedra: #9e9488;          /* secundario: metadatos y detalles */
    --concreto: #e8e4de;        /* fondo cálido */
    --noche: #1a1a1a;           /* textos principales, nunca negro puro */
    --selva: #2e4a2e;           /* acento secundario */

    /* Roles derivados */
    --ink: var(--noche);
    --gris: #6e675e;            /* Piedra oscurecido: contraste AA en párrafos */
    --gris-suave: var(--piedra);
    --linea: #d8d2c8;           /* Concreto oscurecido para que la línea se vea */
    --blanco: #ffffff;
    --negro: var(--noche);

    /* Tipografía */
    --fuente: 'Lato', system-ui, -apple-system, sans-serif;         /* cuerpo */
    --fuente-display: 'Cormorant Garamond', Georgia, serif;         /* títulos */
    --fuente-ui: 'Montserrat', system-ui, sans-serif;               /* navegación, botones, etiquetas */
    --track: 0.14em;            /* letter-spacing de etiquetas */
    --container: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--fuente);
    font-weight: 300;                /* Lato Light */
    color: var(--ink);
    background: var(--blanco);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Títulos en Cormorant Garamond; el tagline en inglés siempre en cursiva. */
h1, h2, h3, h4,
.hero-title, .intro-title, .section-title,
.contacto-cta h2, .card-title, .servicio-fila-nombre, .servicio-nombre,
.contacto-info h3, .persona-nombre {
    font-family: var(--fuente-display);
    font-weight: 400;
    letter-spacing: 0;
}

/* Navegación, botones y etiquetas en Montserrat Light. */
.btn, .link-more, .nav-list a, .lang-switch, .footer-label, .footer-menu a,
.card-cat, .dato-label, .ficha-item dt, .form-campo label, .bloque-subtitulo,
.filtro-cats a, .lb-counter, .servicio-num, .footer-bottom p {
    font-family: var(--fuente-ui);
    font-weight: 300;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* ---------- Botones y enlaces ---------- */
.btn {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    padding: 13px 30px;
    border: 1px solid currentColor;
    transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
/* Micro-interacción: leve elevación al pasar el cursor. */
.btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
.btn-outline { color: var(--blanco); }
.btn-outline:hover { background: var(--blanco); color: var(--ink); }
.btn-dark { color: var(--ink); }
.btn-dark:hover { background: var(--ink); color: var(--blanco); }
.btn-solid {
    background: var(--negro);
    color: var(--blanco);
    border-color: var(--negro);
    cursor: pointer;
}
.btn-solid:hover { background: var(--tierra); border-color: var(--tierra); }

.link-more {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    transition: opacity .2s ease;
}
.link-more:hover { opacity: .6; }

/* ---------- Header ---------- */
.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 50;
    color: var(--blanco);
    padding: 18px 0;
}
body.interior .site-header,
.site-header.scrolled { position: fixed; background: rgba(26, 26, 26, .96); padding: 10px 0; }
body.interior .site-header { position: relative; background: var(--negro); }
/* Auto-hide del header fijo en móvil (se activa por JS solo en <=800px) */
.site-header { transition: transform .3s ease; }
.site-header.header--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

.header-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
/* Logo 2026: wordmark apaisado (~2.1:1), se dimensiona por altura. */
.brand img { height: 64px; width: auto; transition: height .25s ease; }
.site-header.scrolled .brand img,
body.interior .brand img { height: 46px; }

/* En desktop el panel es transparente al layout (la lista fluye normal); el extra (EN/ES + redes) solo aparece en el overlay móvil. */
.mobile-panel { display: contents; }
.mobile-extra { display: none; }
.nav-list { display: flex; gap: 34px; }
.nav-list a {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    opacity: .92;
    transition: opacity .2s ease;
}
.nav-list a:hover { opacity: .55; }

.header-actions { display: flex; align-items: center; gap: 22px; }
.lang-switch {
    display: flex; gap: 6px; align-items: center;
    font-size: 11px; letter-spacing: .1em;
}
.lang-switch a { opacity: .55; }
.lang-switch a.active, .lang-switch a:hover { opacity: 1; }
.btn-cotizar { background: var(--blanco); color: var(--ink); border-color: var(--blanco); }
.btn-cotizar:hover { background: transparent; color: var(--blanco); }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 84vh;
    min-height: 84dvh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
/* Carrusel de fondo con Ken Burns */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 35%;
    opacity: 0;
    transition: opacity 1.3s ease;
}
.hero-slide.is-active { opacity: 1; }
.luum-anim .hero-slide.is-active { animation: kenburns 9s ease-out both; }
@keyframes kenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.13); }
}
.hero-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    /* Velo Noche: deja ver la fotografía y mantiene legible el texto blanco.
       La franja superior sostiene el logo y el menú sobre fotos claras. */
    background:
        linear-gradient(90deg, rgba(26, 26, 26, .88) 0%, rgba(26, 26, 26, .55) 45%, rgba(26, 26, 26, .15) 100%),
        linear-gradient(180deg, rgba(26, 26, 26, .78) 0%, rgba(26, 26, 26, .34) 13%, rgba(26, 26, 26, 0) 27%);
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    padding: 140px 32px 104px;
}
.hero-title {
    color: var(--blanco);
    font-size: clamp(34px, 3.7vw, 53px);
    line-height: 1.14;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 300;
}
.hero-title strong { font-weight: 500; }
.hero-text {
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    /* Mismo borde derecho que la segunda línea del título: sin el hueco que dejaba el tope de 460px. */
    max-width: 40em;
    text-wrap: pretty;
    margin: 20px 0 30px;
}
.hero-arrows {
    position: absolute;
    right: 48px; bottom: 44px;
    z-index: 3;
    display: flex; gap: 12px;
}
.hero-arrows .arrow {
    width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: transparent;
    color: var(--blanco);
    display: grid; place-items: center;
    font-size: 15px;
    opacity: .85;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease, border-color .2s ease;
}
.hero-arrows .arrow:hover { opacity: 1; background: rgba(255, 255, 255, .16); border-color: var(--blanco); }

/* ---------- Intro ---------- */
.intro { padding: 110px 0 90px; background: var(--concreto); }
.intro-title {
    font-size: clamp(24px, 2.7vw, 35px);
    font-weight: 400;
    line-height: 1.45;
    max-width: 1150px;
}
.intro-aside {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-top: 42px;
}
.intro-aside p { font-size: 14.5px; color: var(--gris); max-width: 460px; }

/* ---------- Secciones partidas (Acerca / Servicios) ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 8vw, 130px);
    align-items: center;
}
/* Columna de texto larga (con experiencia y equipo): alinea arriba, no al centro. */
.split.split-top { align-items: start; }
.split.split-top .split-media img { position: sticky; top: 96px; }

.acerca { padding: 90px 0; }
.servicios { padding: 90px 0; }
/* En la portada el equipo va dentro de "acerca": sin padding propio abajo (la sección lo aporta).
   Doble clase para ganarle a la regla general .equipo (que si no mete 60-90px extra). */
.equipo.equipo-portada { padding: 10px 0 0; }

.section-title {
    font-size: clamp(33px, 3.2vw, 46px);
    font-weight: 400;
    line-height: 1.16;
    margin-bottom: 26px;
}
.section-title.centered { text-align: center; }

.split-text p { font-size: 15px; color: var(--gris); margin-bottom: 16px; }
.split-text .link-more { margin-top: 14px; color: var(--ink); }
/* Imagen de todas las secciones "content align" (acerca, servicios): misma proporción en todo el sitio. */
.split-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

.servicio { padding: 6px 0; }
/* El texto del servicio llena la columna (igual que su línea divisoria), no el tope de 500px. */
.servicio p { max-width: none; }
.servicio-nombre {
    font-size: 22px; font-weight: 500;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--linea);
}
.servicio-nombre span {
    font-family: var(--fuente-ui);
    font-size: 13px; font-weight: 400;
    color: var(--tierra); margin-right: 6px;
}

/* ---------- Proyectos ---------- */
.proyectos { padding: 100px 0; }
.section-head { margin-bottom: 56px; }
.section-sub {
    font-size: 15px;
    color: var(--gris);
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.proyectos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px 48px;
}
.card-media { overflow: hidden; display: block; position: relative; }
.card-media img {
    width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
    transition: transform .8s cubic-bezier(.19, .64, .22, 1);
}
/* Hover: zoom + velo sutil + marco fino que se dibuja dentro */
.card-media::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: rgba(26, 26, 26, .14);
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.card-media::after {
    content: ""; position: absolute; inset: 14px; z-index: 2;
    border: 1px solid rgba(255, 255, 255, .75);
    opacity: 0; transform: scale(1.04);
    transition: opacity .5s ease, transform .5s ease; pointer-events: none;
}
.card-proyecto { transition: transform .45s ease; }
.card-proyecto:hover { transform: translateY(-5px); }
.card-proyecto:hover .card-media img { transform: scale(1.06); }
.card-proyecto:hover .card-media::before { opacity: 1; }
.card-proyecto:hover .card-media::after { opacity: 1; transform: scale(1); }
.card-body { padding-top: 18px; }
.card-cat {
    font-size: 11px;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--tierra);
    margin-bottom: 6px;
}
.card-title { font-size: 26px; font-weight: 500; margin-bottom: 8px; }
.card-title a { transition: color .3s ease; }
.card-proyecto:hover .card-title a { color: var(--tierra); }
@media (prefers-reduced-motion: reduce) {
    .card-proyecto:hover,
    .card-proyecto:hover .card-media img,
    .card-proyecto:hover .card-media::after { transform: none; }
}
.card-desc { font-size: 14.5px; color: var(--gris); margin-bottom: 14px; }
.card-body .link-more { color: var(--ink); font-size: 11px; }
.proyectos-more { text-align: right; margin-top: 48px; }
.proyectos-more .link-more { color: var(--ink); }

/* Archivo de proyectos */
.archivo { padding-top: 104px; }
/* Encabezado refinado del archivo: más aire + kicker en tierra, sin imagen. */
.section-head--archivo { margin-bottom: 34px; }
.section-kicker {
    font-size: 12px;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--tierra);
    text-align: center;
    margin-bottom: 18px;
}
.section-head--archivo .section-title { margin-bottom: 20px; }

/* Grid del archivo a 3 columnas (son 46 proyectos; a 2 el scroll es interminable) */
.archivo .proyectos-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 34px; }
.archivo .card-title { font-size: 22px; }

/* En el archivo el header del sitio queda fijo y la barra de filtros se pega DEBAJO de él
   (ambos visibles al hacer scroll). --header-h la fija el JS con la altura real del header. */
body.proyectos-archivo .site-header { position: sticky; top: 0; z-index: 60; }

/* Barra de filtros sticky: se pega bajo el header al hacer scroll */
.filtro-sentinel { height: 1px; }
.filtro-bar {
    position: sticky; top: var(--header-h, 66px); z-index: 30;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 12px 26px;
    background: var(--blanco);
    padding: 22px 0;
    margin-bottom: 48px;
    border-bottom: 1px solid transparent;
    transition: padding .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.filtro-bar.is-stuck {
    padding: 13px 0;
    border-bottom-color: var(--linea);
    box-shadow: 0 8px 22px rgba(26, 26, 26, .05);
}
.filtro-cats {
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
}
.filtro-cats a {
    font-size: 12px; letter-spacing: var(--track); text-transform: uppercase;
    color: var(--gris); padding-bottom: 3px; border-bottom: 1px solid transparent;
    white-space: nowrap;
}
.filtro-cats a.active, .filtro-cats a:hover { color: var(--ink); border-color: var(--ink); }

/* Transición al filtrar: fade del grid (el JS la omite con prefers-reduced-motion) */
.archivo .proyectos-grid { transition: opacity .18s ease; }
.archivo .proyectos-grid.is-switching { opacity: 0; }
.archivo .card-proyecto.is-hidden { display: none; }

/* Responsive del archivo: 3 -> 2 -> 1 columna */
@media (max-width: 1180px) {
    .archivo .proyectos-grid { grid-template-columns: 1fr 1fr; gap: 44px 28px; }
    .archivo .card-title { font-size: 24px; }
}
@media (max-width: 640px) {
    .archivo .proyectos-grid { grid-template-columns: 1fr; }
    /* Filtros como chips en scroll horizontal */
    .filtro-bar { flex-direction: column; align-items: stretch; gap: 12px; }
    .filtro-cats {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
        gap: 18px; padding-bottom: 6px;
        width: 100%; min-width: 0; /* deja que overflow-x contenga los chips */
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .filtro-cats::-webkit-scrollbar { display: none; }
}
.paginacion { margin-top: 56px; text-align: center; }
.paginacion .nav-links { display: inline-flex; gap: 14px; }
.paginacion a, .paginacion span { font-size: 13px; color: var(--gris); }
.paginacion .current { color: var(--ink); font-weight: 400; }

/* Proyecto individual */
.proyecto-hero { position: relative; overflow: hidden; }
/* El alto sale de una PROPORCIÓN, no de la altura de la ventana (2026-08-17).
   Con `height: 72vh` el recorte cambiaba en cada equipo y el cliente reportó que
   "en TODAS sale cortada": una foto 16:9 perdía como un 30% en una laptop. Con
   una proporción fija, mismo ancho de ventana = mismo encuadre, siempre.
   NO poner `max-height` en vh ni volver a `height: Xvh`: vuelve a atar el
   recorte a la altura de la ventana, que es justo el problema que esto resuelve
   (probado: en 1440x700 la foto se veía distinta que en 1440x900).

   La franja es PANORÁMICA (21:9), no 16:9. Se probó 16:9 y en una laptop daba
   un encabezado de 800 px: se comía la pantalla completa, obligaba a hacer
   scroll para llegar a la ficha y no dejaba ver que había contenido abajo.
   A 21:9 mide ~620 px en 1440, parecido a lo que daba el 72vh de antes, y
   asoma el inicio del contenido.

   El encuadre (arriba / centro / abajo) se elige por proyecto en el panel y
   llega como la variable --foco.
   La proporción va en el CONTENEDOR, no en la imagen: el contenedor es el que
   recorta (overflow hidden) y en desktop el parallax escala la imagen para
   tener margen de movimiento, así que el marco que ve el visitante es este. */
.proyecto-hero {
    aspect-ratio: 21 / 9;
}
.proyecto-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--foco, 50%);
}
/* Pantallas medianas: 21:9 se volvería una tira demasiado baja. */
@media (max-width: 1200px) {
    .proyecto-hero { aspect-ratio: 16 / 9; }
}
/* En móvil una franja apaisada se vuelve una tira de 200 px: se usa vertical. */
@media (max-width: 640px) {
    .proyecto-hero { aspect-ratio: 4 / 5; }
}
/* Opción B: hero más bajo, título abajo. */
.proyecto-hero--bajo img { aspect-ratio: 21 / 9; }
.proyecto-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 22%, rgba(0, 0, 0, 0) 45%);
    pointer-events: none;
    z-index: 1;
}
/* Opción A: título dentro del hero. Overlay inferior marcado para legibilidad. */
.proyecto-hero--texto::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .34) 30%, rgba(0, 0, 0, 0) 62%);
    pointer-events: none;
    z-index: 1;
}
.proyecto-hero-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding-bottom: clamp(32px, 5vh, 64px);
}
.proyecto-hero-overlay .card-cat { color: rgba(255, 255, 255, .82); margin-bottom: 10px; }
.proyecto-hero-overlay .section-title { color: var(--blanco); margin-bottom: 0; }
/* Ancho igual al contenedor global (header/hero) para que todo alinee al mismo borde. */
.proyecto-body { padding: 64px 32px 90px; max-width: var(--container); }
.proyecto-head { margin-bottom: 34px; }

.proyecto-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 22px 26px;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    padding: 24px 0;
    margin-bottom: 44px;
}
.ficha-item dt {
    font-size: 11px;
    font-weight: 500;               /* más peso: la etiqueta ligera se perdía */
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--tierra);           /* color de marca en vez del gris claro */
    margin-bottom: 6px;
}
.ficha-item dd { font-size: 15px; color: var(--ink); margin: 0; }
.proyecto-lead { font-size: 17px; color: var(--gris); }
/* Descripción en 2 columnas (revista) para que llene el ancho sin líneas eternas.
   2026-08-11: cada párrafo se mantiene entero en su columna (el cliente no quiere que
   la lectura se corte a media frase); con un solo párrafo la plantilla marca
   .proyecto-contenido--simple y se pasa a una columna de medida legible. */
.proyecto-contenido { columns: 2; column-gap: 56px; column-fill: balance; }
.proyecto-contenido p { margin-bottom: 20px; font-size: 15.5px; color: #3a3a3a; break-inside: avoid; }
/* 31 de los 46 proyectos traen la descripción en un solo párrafo (así venía del sitio
   anterior). Repartirlo en dos columnas lo partiría a media frase, y dejarlo pegado a
   la izquierda deja media página vacía: se centra a una medida cómoda de lectura. */
/* Una sola columna a todo el ancho, alineada con la ficha técnica de arriba
   (pedido del cliente, 2026-08-12). */
.proyecto-contenido--simple { columns: 1; }
.proyecto-contenido > figure,
.proyecto-contenido .wp-block-gallery { column-span: all; }
@media (max-width: 800px) { .proyecto-contenido { columns: 1; } }
.proyecto-contenido img { margin: 28px 0; }
.proyecto-contenido h2, .proyecto-contenido h3 { margin: 30px 0 14px; font-weight: 500; }

/* Galería (bloque nativo de WordPress) en grid limpio.
   !important: el layout flex que inyecta el core (is-layout-flex) gana si no. */
.proyecto-contenido figure.wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px !important;
    margin: 80px 0 44px;
}
.proyecto-contenido .wp-block-gallery > .wp-block-image,
.proyecto-contenido .wp-block-gallery > figure {
    margin: 0 !important;
    width: 100% !important;
    flex: none !important;
    position: relative;
    overflow: hidden; /* contiene el zoom del hover */
}
.proyecto-contenido .wp-block-gallery img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0;
    transition: transform .7s cubic-bezier(.19, .64, .22, 1);
}
/* Hover en imágenes de galería: zoom + velo sutil (respeta prefers-reduced-motion) */
.proyecto-contenido .wp-block-gallery > .wp-block-image::after,
.proyecto-contenido .wp-block-gallery > figure::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(26, 26, 26, .16);
    opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.proyecto-contenido .wp-block-gallery > .wp-block-image:hover img,
.proyecto-contenido .wp-block-gallery > figure:hover img { transform: scale(1.06); }
.proyecto-contenido .wp-block-gallery > .wp-block-image:hover::after,
.proyecto-contenido .wp-block-gallery > figure:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .proyecto-contenido .wp-block-gallery > .wp-block-image:hover img,
    .proyecto-contenido .wp-block-gallery > figure:hover img { transform: none; }
}
@media (max-width: 800px) {
    .proyecto-contenido .wp-block-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* El alto del hero ya NO se fija aquí: lo da la proporción declarada arriba
       (3/2 en tablet, 4/5 en móvil). Esta línea decía `height: 46vh` y, al ir
       después en el archivo, le ganaba al aspect-ratio y dejaba el encuadre
       otra vez a merced de la altura de la ventana. */
    .proyecto-ficha { gap: 16px 20px; padding: 18px 0; }
}
/* Navegación entre proyectos: anterior | todos | siguiente, con línea divisoria */
.proyecto-nav {
    margin-top: 84px;
    padding-top: 36px;
    border-top: 1px solid var(--linea);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
}
.proyecto-nav .pnav-prev  { text-align: left; }
.proyecto-nav .pnav-todos { text-align: center; }
.proyecto-nav .pnav-next  { text-align: right; }
.pnav-label {
    display: block;
    font-family: var(--fuente-ui);
    font-size: 11px; letter-spacing: var(--track); text-transform: uppercase;
    color: var(--gris); margin-bottom: 7px;
    transition: color .3s ease;
}
.pnav-title {
    display: block;
    font-family: var(--fuente-display);
    font-size: 23px; line-height: 1.2; color: var(--ink);
    transition: color .3s ease;
}
.proyecto-nav a { display: inline-block; }
.proyecto-nav a:hover .pnav-label,
.proyecto-nav a:hover .pnav-title { color: var(--tierra); }
.pnav-todos a {
    font-family: var(--fuente-ui);
    font-size: 12px; letter-spacing: var(--track); text-transform: uppercase;
    color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid currentColor;
    transition: color .3s ease;
}
.pnav-todos a:hover { color: var(--tierra); }
@media (max-width: 640px) {
    .proyecto-nav { grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 64px; }
    .proyecto-nav .pnav-todos { grid-column: 1 / -1; order: -1; margin-bottom: 4px; }
    .pnav-title { font-size: 18px; }
}

/* ---------- Contacto ---------- */
.contacto {
    position: relative;
    background: var(--negro);
    color: var(--blanco);
    padding: 110px 0;
    overflow: hidden;
}
.contacto-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 4vw, 80px);
    align-items: start;
}
/* Los datos de contacto se reparten en 2 columnas para llenar el ancho (como el footer). */
.contacto-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 44px;
}
.contacto-datos .dato { margin-bottom: 0; }
/* Columna derecha de datos a ras del borde derecho (parejo con footer y demás componentes). */
.contacto-datos .dato:nth-child(even) { text-align: right; }
/* En móvil: una sola columna, todo a la izquierda (las 2 columnas con alineación opuesta se veían raras). */
@media (max-width: 640px) {
    .contacto-datos { grid-template-columns: 1fr; gap: 22px; }
    .contacto-datos .dato:nth-child(even) { text-align: left; }
}
.contacto-cta h2 {
    font-size: clamp(35px, 3.4vw, 50px);
    font-weight: 400;
    line-height: 1.14;
    margin-bottom: 22px;
}
.contacto-cta p { font-size: 15px; color: rgba(255, 255, 255, .62); max-width: 380px; margin-bottom: 34px; }
.contacto-info h3 { font-size: 22px; font-weight: 500; margin-bottom: 26px; }
.dato { margin-bottom: 20px; }
.dato-label { font-size: 14.5px; font-weight: 500; margin-bottom: 2px; }
.dato p:not(.dato-label), .dato a { font-size: 14.5px; color: rgba(255, 255, 255, .6); }
.dato a:hover { color: var(--blanco); }
.contacto-marca {
    position: absolute;
    right: -110px; top: 50%;
    transform: translateY(-50%);
    width: 520px; height: 460px;
    background: url('../img/x-marca.png') no-repeat center / contain;
    opacity: .08;
    pointer-events: none;
}

/* ---------- Footer ---------- */
.site-footer { padding: 70px 0 0; border-top: 1px solid var(--linea); }
/* Si la página ya trae la banda oscura del CTA arriba, ella separa: sin línea. */
body:has(.contacto-cta) .site-footer { border-top: none; }
.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr 1.4fr;
    gap: 40px;
    align-items: start;
}
.footer-brand img { height: 92px; width: auto; }
.footer-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    margin-bottom: 18px;
}
.footer-menu { columns: 2; column-gap: 34px; }
.footer-menu li { margin-bottom: 10px; break-inside: avoid; }
.footer-menu a {
    font-size: 12px;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--gris);
}
.footer-menu a:hover { color: var(--ink); }
.social-icons { display: flex; gap: 10px; }
.social-icons a {
    width: 36px; height: 36px;
    border: 1px solid var(--linea);
    display: grid; place-items: center;
    color: var(--ink);
    transition: background .2s ease, color .2s ease;
}
.social-icons a:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }

.footer-agenda { margin-bottom: 32px; }
.footer-agenda-texto { font-size: 13.5px; color: var(--gris); margin: -8px 0 14px; max-width: 320px; }
.footer-agenda .btn-dark { border-color: var(--tierra); color: var(--tierra); }
.footer-agenda .btn-dark:hover { background: var(--tierra); color: var(--blanco); }

.newsletter-form { display: flex; gap: 0; }
.newsletter-form input[type="email"] {
    flex: 1;
    font-family: var(--fuente);
    font-size: 13px;
    padding: 12px 14px;
    border: 1px solid var(--ink);
    border-right: 0;
    outline: none;
    min-width: 0;
}
.newsletter-form .btn-solid { padding: 12px 22px; white-space: nowrap; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter-msg { font-size: 12px; color: var(--gris); margin-top: 10px; min-height: 18px; }
.newsletter-msg.ok { color: #1a7f4e; }
.newsletter-msg.error { color: #b3261e; }

.footer-bottom {
    margin-top: 54px;
    border-top: 1px solid var(--linea);
    padding: 20px 32px;
    text-align: center;
}
.footer-bottom p { font-size: 12px; color: var(--gris-suave); letter-spacing: .06em; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 200;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--tierra);
    color: var(--blanco);
    display: grid; place-items: center;
    box-shadow: 0 8px 22px rgba(26, 26, 26, .28);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wa-float:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 28px rgba(26, 26, 26, .34); background: var(--noche); }
.wa-float svg { display: block; }
@media (max-width: 800px) { .wa-float { right: 16px; bottom: 16px; width: 50px; height: 50px; } }

/* ---------- Interior genérico ---------- */
.page-interior { min-height: 60vh; }

/* ---------- Páginas individuales (Acerca, Servicios, Contacto) ---------- */
.pagina .pagina-head { padding: 84px 0 56px; max-width: 760px; }
.pagina .pagina-head .section-title { margin-bottom: 16px; }
.pagina-intro { font-size: clamp(17px, 1.8vw, 22px); font-weight: 300; color: var(--ink); line-height: 1.5; }

/* Hero de página interna (Nosotros): imagen a lo ancho + título y descripción breve. */
.pagina-hero {
    position: relative;
    height: 46vh;
    min-height: 340px;
    max-height: 520px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.pagina-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagina-hero::before {
    content: '';
    position: absolute; inset: 0;
    /* Overlay marcado para que el texto se distinga sobre cualquier imagen.
       z-index:1 = va SOBRE la imagen (si no, queda detrás y no se ve).
       Banda superior más densa para sostener el header transparente (logo/menú). */
    z-index: 1;
    background: linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.30) 16%, rgba(26,26,26,.28) 42%, rgba(26,26,26,.86) 100%);
}
.pagina-hero-overlay { position: relative; z-index: 1; width: 100%; padding: 0 0 48px; }
.pagina-hero .section-title { color: var(--blanco); margin-bottom: 12px; }
/* text-wrap: balance reparte las líneas parejas: evita que quede una palabra suelta
   al final ("Yucatán", "de la obra") como pidió el cliente. */
.pagina-hero-overlay p {
    color: rgba(255,255,255,.9);
    font-size: clamp(15px, 1.5vw, 19px);
    max-width: 680px;
    text-wrap: balance;
}
/* Bloque de texto de Nosotros bajo el hero. */
.split-nosotros { padding-top: 84px; }

.bloque-subtitulo {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    margin: 34px 0 16px;
}
.lista-experiencia li {
    font-size: 15px;
    color: var(--gris);
    padding: 10px 0;
    border-bottom: 1px solid var(--linea);
}
.lista-experiencia li:first-child { border-top: 1px solid var(--linea); }

.equipo { padding: 70px 0 90px; }
.equipo-grupo + .equipo-grupo { margin-top: 26px; }
.equipo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px 40px;
}
.persona { border-top: 1px solid var(--linea); padding-top: 14px; }
.persona-nombre { font-size: 19px; font-weight: 500; }
.persona-cargo { font-size: 13.5px; color: var(--gris); }

/* Página Servicios */
.servicios-lista { padding-bottom: 40px; }
.servicio-fila {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 24px;
    padding: 38px 0;
    border-top: 1px solid var(--linea);
}
.servicio-fila:last-child { border-bottom: 1px solid var(--linea); }
.servicio-num { font-size: 15px; color: var(--gris-suave); }
.servicio-fila-nombre { font-size: 30px; font-weight: 500; margin-bottom: 12px; }
.servicio-fila-texto { font-size: 15px; color: var(--gris); max-width: 640px; }
.servicios-foto { padding: 80px 0 90px; }

/* Página Servicios: bloques grandes alternados (imagen + texto) */
.servicios-bloques {
    padding: clamp(70px, 8vw, 104px) 0; /* mismo aire arriba y abajo (separa de la sección negra) */
    display: flex; flex-direction: column;
    gap: clamp(72px, 9vw, 128px);
}
.servicio-num-grande {
    display: block;
    font-family: var(--fuente-ui); /* Montserrat: dígitos claros (Cormorant confunde 0/1) */
    font-weight: 300;
    font-size: clamp(34px, 3.4vw, 50px);
    letter-spacing: .04em;
    line-height: 1; color: var(--tierra);
    margin-bottom: 16px;
}
.servicio-bloque .section-title { margin-bottom: 20px; }
.servicio-bloque .split-text p {
    font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.72; color: var(--gris);
}
@media (min-width: 961px) {
    .servicio-bloque--der .split-media { order: 2; } /* pares: imagen a la derecha */
}

/* CTA negra reutilizada en páginas */
.cta-paginas { margin-top: 40px; }

/* Página Contacto */
.contacto-pagina {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(48px, 7vw, 110px);
    padding-bottom: 100px;
    align-items: start;
}
.form-campo { margin-bottom: 20px; }
.form-campo label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--ink);
}
.form-campo input,
.form-campo textarea {
    width: 100%;
    font-family: var(--fuente);
    font-size: 14.5px;
    color: var(--ink);
    padding: 12px 14px;
    border: 1px solid #cfcfcf;
    background: var(--blanco);
    outline: none;
    transition: border-color .2s ease;
    resize: vertical;
}
.form-campo input:focus,
.form-campo textarea:focus { border-color: var(--ink); }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-contacto .btn-solid { margin-top: 6px; }
.contacto-datos .dato p:not(.dato-label),
.contacto-datos .dato a { color: var(--gris); }
.contacto-datos .dato a:hover { color: var(--ink); }
.contacto-datos .bloque-subtitulo { margin-top: 0; }

@media (max-width: 800px) {
    .pagina .pagina-head { padding: 48px 0 36px; }
    .contacto-pagina { grid-template-columns: 1fr; gap: 44px; }
    .form-fila { grid-template-columns: 1fr; gap: 0; }
    .servicio-fila { grid-template-columns: 48px 1fr; gap: 14px; padding: 28px 0; }
    .equipo { padding: 40px 0 60px; }
}

/* ---------- Animaciones (solo si hay JS y sin reduced-motion) ---------- */
/* Easing premium (easeOutExpo): entradas lentas y elegantes. */
.luum-anim .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
}
.luum-anim .reveal.visible {
    opacity: 1;
    transform: none;
}

/* Títulos: se descubren tras una máscara que sube (span interior que asciende). */
.luum-anim .reveal-title { overflow: hidden; padding-bottom: .06em; }
.luum-anim .reveal-title .rt-inner {
    display: block;
    transform: translateY(110%);
    transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
}
.luum-anim .reveal-title.visible .rt-inner { transform: none; }

/* Imágenes: cortina que sube + leve acercamiento del <img> (gesto editorial). */
.luum-anim .reveal-media {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.15s cubic-bezier(.16, 1, .3, 1);
}
.luum-anim .reveal-media.visible { clip-path: inset(0 0 0 0); }
.luum-anim .split-media.reveal-media { overflow: hidden; }
.luum-anim .split-media.reveal-media img {
    transform: scale(1.12);
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.luum-anim .split-media.reveal-media.visible img { transform: none; }

/* Parallax de heros (el JS ajusta el transform; solo desktop). */
.luum-anim .pagina-hero img,
.luum-anim .proyecto-hero img { will-change: transform; }

@keyframes luumHeroUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
.luum-anim .hero-title  { animation: luumHeroUp .9s ease .15s both; }
.luum-anim .hero-text   { animation: luumHeroUp .9s ease .35s both; }
.luum-anim .hero-content .btn { animation: luumHeroUp .9s ease .55s both; }
.luum-anim .hero-arrows { animation: luumHeroUp .9s ease .75s both; }
@keyframes luumHeroZoom {
    from { transform: scale(1.05); }
    to   { transform: none; }
}

/* ---------- Lightbox ---------- */
.proyecto-contenido .wp-block-gallery img,
.proyecto-contenido > figure.wp-block-image img { cursor: zoom-in; }

.luum-lightbox {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(8, 8, 8, .95);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
}
.luum-lightbox.open { opacity: 1; pointer-events: auto; }
.luum-lightbox img {
    max-width: 88vw; max-height: 84vh;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lb-btn {
    position: absolute;
    background: none; border: 1px solid rgba(255, 255, 255, .45);
    color: var(--blanco);
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 17px; line-height: 1;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, .14); border-color: var(--blanco); }
.lb-close { top: 22px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }
.lb-counter {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: 11px; letter-spacing: var(--track);
}
@media (max-width: 800px) {
    .lb-prev { left: 10px; } .lb-next { right: 10px; }
    .lb-close { top: 12px; right: 12px; }
    .luum-lightbox img { max-width: 94vw; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .split, .contacto-grid { grid-template-columns: 1fr; }
    .split.reverse .split-media { order: 2; }
    .proyectos-grid { gap: 44px 28px; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
    /* Hamburger (por encima del overlay para poder cerrar) */
    .nav-toggle {
        display: block;
        background: none; border: 0; cursor: pointer;
        width: 28px; height: 20px; position: relative; z-index: 120;
        color: inherit;   /* hereda el blanco del header */
    }
    .nav-toggle span {
        position: absolute; left: 0; width: 100%; height: 2px;
        background: currentColor; transition: transform .3s ease, opacity .2s ease, top .3s ease;
    }
    .nav-toggle span:nth-child(1) { top: 0; }
    .nav-toggle span:nth-child(2) { top: 9px; }
    .nav-toggle span:nth-child(3) { top: 18px; }
    /* Hamburger -> X */
    .nav-toggle.is-open { color: #fff; }
    .nav-toggle.is-open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

    .main-nav { order: 3; }
    body.menu-open { overflow: hidden; }
    /* Con el menú abierto, el header flota SOBRE el overlay (logo + X visibles), fondo transparente. */
    body.menu-open .site-header {
        position: fixed; top: 0; left: 0; right: 0;
        z-index: 130; background: transparent;
    }
    /* El logo por encima del overlay (que es hermano dentro del header). */
    .site-header .brand { position: relative; z-index: 120; }
    body.menu-open .btn-cotizar { visibility: hidden; }

    /* Overlay a pantalla completa */
    .mobile-panel {
        position: fixed; inset: 0; z-index: 110;
        background: var(--ink);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: clamp(34px, 7vh, 56px);
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
    }
    .mobile-panel.open { opacity: 1; visibility: visible; transform: none; }

    .nav-list {
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        position: static; background: none; padding: 0;
    }
    .nav-list a {
        display: block; padding: 8px 0;
        font-family: var(--fuente-display); font-size: clamp(30px, 8vw, 40px); font-weight: 400;
        text-transform: none; letter-spacing: 0; color: #fff; opacity: 0;
        transform: translateY(14px);
        transition: opacity .5s ease, transform .5s ease, color .2s ease;
    }
    .nav-list a:hover, .nav-list a:focus-visible { color: var(--chukum); opacity: 1; }
    .mobile-panel.open .nav-list a { opacity: 1; transform: none; }
    .mobile-panel.open .nav-list li:nth-child(1) a { transition-delay: .08s; }
    .mobile-panel.open .nav-list li:nth-child(2) a { transition-delay: .14s; }
    .mobile-panel.open .nav-list li:nth-child(3) a { transition-delay: .20s; }
    .mobile-panel.open .nav-list li:nth-child(4) a { transition-delay: .26s; }
    .mobile-panel.open .nav-list li:nth-child(5) a { transition-delay: .32s; }
    .mobile-panel.open .nav-list li:nth-child(6) a { transition-delay: .38s; }

    /* Extra: EN/ES + redes al pie del overlay */
    .mobile-extra {
        display: flex; flex-direction: column; align-items: center; gap: 24px;
        opacity: 0; transition: opacity .5s ease .42s;
    }
    .mobile-panel.open .mobile-extra { opacity: 1; }
    .lang-switch--mobile { display: flex; gap: 8px; align-items: center; font-family: var(--fuente-ui); font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.55); }
    .lang-switch--mobile a { color: rgba(255,255,255,.55); }
    .lang-switch--mobile a.active { color: #fff; }
    .mobile-social { display: flex; gap: 22px; color: #fff; }
    .mobile-social a { color: rgba(255,255,255,.75); transition: color .2s ease; }
    .mobile-social a:hover { color: #fff; }

    .header-inner { flex-wrap: nowrap; }
    .header-actions .lang-switch { display: none; }  /* el de escritorio se oculta; va dentro del overlay */
    .btn-cotizar { padding: 10px 18px; }
    @media (prefers-reduced-motion: reduce) {
        .mobile-panel, .nav-list a, .mobile-extra { transition: none; }
    }
    .brand img { height: 52px; }

    .hero { min-height: 78vh; }
    .hero-arrows { right: 24px; bottom: 24px; }
    .intro { padding: 70px 0 60px; }
    .intro-aside { flex-direction: column; align-items: flex-start; gap: 20px; }
    .acerca, .servicios, .proyectos { padding: 60px 0; }
    /* La transición equipo(acerca) -> servicios quedaba demasiado aireada en móvil. */
    .acerca { padding-bottom: 28px; }
    .servicios { padding-top: 44px; }
    .proyectos-grid { grid-template-columns: 1fr; }
    .contacto { padding: 70px 0; }
    .contacto-marca { width: 240px; height: 220px; right: -40px; bottom: -50px; }
    .footer-inner { grid-template-columns: 1fr; gap: 34px; }
    .footer-brand img { height: 76px; }
}

/* ---------- Accesibilidad ---------- */
.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 999;
    background: var(--ink); color: var(--blanco);
    padding: 11px 20px; font-family: var(--fuente-ui); font-size: 13px;
    font-weight: 400; letter-spacing: var(--track); text-transform: uppercase;
    transition: top .2s ease;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--tierra); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Página 404 ---------- */
.error-404 { padding: 104px 0 90px; max-width: 720px; }
.error-404 .section-kicker { text-align: left; }
.error-404 .section-title { margin: 12px 0 22px; }
.error-404-links { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 640px) { .error-404 { padding: 60px 0 60px; } }

/* ---------- Banner de cookies ---------- */
.cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--ink); color: var(--blanco);
    padding: 15px 28px;
    display: flex; align-items: center; justify-content: center; gap: 14px 30px; flex-wrap: wrap;
    box-shadow: 0 -6px 24px rgba(26, 26, 26, .14);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .85); max-width: 720px; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-btns { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-btns button {
    font-family: var(--fuente-ui); font-size: 11px; font-weight: 500;
    letter-spacing: var(--track); text-transform: uppercase;
    padding: 9px 20px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cookie-btns button[data-cookie="yes"] { background: #fff; color: var(--ink); border-color: #fff; }
.cookie-btns button[data-cookie="yes"]:hover { background: var(--tierra); border-color: var(--tierra); color: #fff; }
.cookie-btns button[data-cookie="no"]:hover { border-color: #fff; }
@media (max-width: 640px) { .cookie-banner { flex-direction: column; text-align: center; padding: 16px; } }

/* ---------- Migas de pan (breadcrumbs) ---------- */
.breadcrumbs { margin-bottom: 26px; }
.breadcrumbs ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    font-family: var(--fuente-ui); font-size: 11px; font-weight: 500;
    letter-spacing: var(--track); text-transform: uppercase; color: var(--ink);
}
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs li:not(:last-child)::after { content: '›'; color: var(--gris); }
.breadcrumbs a { color: var(--gris); transition: color .2s ease; }
.breadcrumbs a:hover { color: var(--tierra); }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ============================================================
   Ronda 2026-08-11 (revisión del cliente, "Pagina Web (2).pdf")
   ============================================================ */

/* ---------- Títulos en mayúsculas ----------
   Solo los que marcó el cliente: encabezados de Nosotros, Servicios y Proyectos,
   el subtítulo "Nuestra filosofía" y el nombre de cada servicio. Se hace por CSS
   para que el cliente siga escribiéndolos con acentuación normal en el Customizer. */
.pagina-hero .section-title,
.split-nosotros > .split-text > .section-title,
.section-head--archivo .section-title,
.servicio-bloque .section-title {
    text-transform: uppercase;
    /* Cormorant en versales necesita algo de aire para no verse apretada. */
    letter-spacing: .03em;
}

/* ---------- Textos justificados ----------
   Pedido explícito: "en general la descripción de los textos que esté en JUSTIFICADO".
   Solo bloques de descripción largos; no toca menús, fichas ni tarjetas. */
.split-nosotros > .split-text > p,
.servicio-bloque .split-text p,
.proyecto-contenido p {
    text-align: justify;
    /* Nada de partir palabras con guion: el cliente no quiere textos cortados.
       Para que el justificado no abra huecos enormes, el navegador puede ajustar
       ligeramente el espacio entre letras además del de las palabras. */
    hyphens: none;
    -webkit-hyphens: none;
    text-justify: inter-word;
    text-wrap: pretty;
}
/* En pantallas angostas ni con eso: sin partición, el justificado deja ríos
   blancos muy visibles, así que ahí el texto va alineado a la izquierda. */
@media (max-width: 640px) {
    .split-nosotros > .split-text > p,
    .servicio-bloque .split-text p,
    .proyecto-contenido p { text-align: left; }
}

/* ---------- Más presencia de la paleta ----------
   El cliente pidió ver más el color de marca en los botones (ejemplos del PDF:
   CONOCER MÁS y COTIZAR con filete tierra). */
.btn-outline {
    color: var(--blanco);
    border-color: var(--tierra);
}
.btn-outline:hover {
    background: var(--tierra);
    border-color: var(--tierra);
    color: var(--blanco);
}
.btn-dark { border-color: var(--tierra); }
.btn-dark:hover { background: var(--tierra); border-color: var(--tierra); color: var(--blanco); }
.btn-cotizar { background: transparent; color: var(--blanco); border-color: var(--tierra); }
.btn-cotizar:hover { background: var(--tierra); border-color: var(--tierra); color: var(--blanco); }
/* Sobre fondo claro (header con scroll) el blanco no contrasta. */
.site-header.scrolled .btn-cotizar,
body:not(.front) .site-header .btn-cotizar { color: var(--blanco); }

/* Los otros dos detalles del ejemplo que mandó el cliente: un filete corto de
   color de marca encabezando el texto del hero, y la flecha en "CONOCER MÁS". */
.hero-text::before {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    background: var(--tierra);
    margin-bottom: 22px;
}
.hero-content .btn-outline::after {
    content: '\2192';
    margin-left: 18px;
    /* La flecha es decorativa: acompaña al texto, no lo sustituye. */
    font-size: 1.15em;
    line-height: 0;
    vertical-align: -.05em;
}

/* ---------- Video del proyecto (2026-08-11) ----------
   Rompe a ancho completo igual que la galería, para que no quede dentro de una columna. */
.proyecto-video {
    column-span: all;
    margin: 44px 0 10px;
    aspect-ratio: 16 / 9;
    background: var(--noche);
}
.proyecto-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   Brief de proyecto (página /brief, ronda 2026-08-17)
   ============================================================
   Cuestionario largo por pasos. Se comparte por liga, no está en el menú.
   El marcado trae todas las secciones; main.js muestra una a la vez. */

/* El cuestionario va en una medida cómoda de lectura y centrado; el encabezado
   se centra con él para que no quede el título en un borde y el formulario en
   el medio (el resto de las páginas sí alinean a la izquierda). */
.brief-pagina .pagina-head {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
/* El kicker está centrado por defecto (lo usa el archivo de proyectos); aquí
   va con el título, a la izquierda. */
.brief-pagina .section-kicker { text-align: left; }
.brief-form {
    max-width: 760px;
    margin: 0 auto 40px;
}

/* Avance: barra fina en color de marca + "Paso 3 de 8". */
.brief-avance {
    height: 2px;
    background: var(--linea);
    margin-bottom: 14px;
}
.brief-avance[hidden] { display: none; }
.brief-avance-barra {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tierra);
    transition: width .35s ease;
}
.brief-paso-num {
    font-family: var(--fuente-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 26px;
    min-height: 14px;
}

.brief-seccion {
    border: 0;
    padding: 0;
    margin: 0 0 10px;
}
.brief-seccion[hidden] { display: none; }
.brief-seccion-titulo {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: var(--fuente-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
    padding: 0;
    margin-bottom: 28px;
}
.brief-seccion-num {
    font-family: var(--fuente-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--track);
    color: var(--tierra);
}
/* "Programa arquitectónico" encima del apartado, como en el documento del estudio. */
.brief-seccion-grupo {
    display: block;
    font-family: var(--fuente-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 6px;
}

.brief-campo { margin-bottom: 24px; }
/* Las preguntas con opciones no llevan <label> (sería ambiguo con los radios),
   así que su enunciado usa esta clase con el mismo aspecto. */
.brief-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--ink);
}
.brief-ayuda {
    font-size: 13px;
    line-height: 1.5;
    color: var(--gris);
    margin: -2px 0 10px;
}

.brief-opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.brief-opcion { position: relative; }
.brief-opcion input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.brief-opcion span {
    display: block;
    font-family: var(--fuente-ui);
    font-size: 12px;
    letter-spacing: .04em;
    padding: 10px 18px;
    border: 1px solid #cfcfcf;
    background: var(--blanco);
    color: var(--ink);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.brief-opcion input:checked + span {
    border-color: var(--tierra);
    background: var(--tierra);
    color: var(--blanco);
}
.brief-opcion input:focus-visible + span { outline: 2px solid var(--tierra); outline-offset: 2px; }
.brief-opcion span:hover { border-color: var(--tierra); }

.brief-acciones {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--linea);
}
.brief-acciones .btn[hidden] { display: none; }

/* "Atrás" va sobre fondo blanco, así que no puede usar el .btn-outline normal:
   ese está hecho para fondos oscuros (texto blanco) y encima, al ser un
   <button>, el navegador le pintaba su gris por defecto. Aquí va en el color de
   marca, y se rellena al pasar el cursor. */
.brief-atras {
    background: transparent;
    color: var(--tierra);
    border-color: var(--tierra);
    cursor: pointer;
}
.brief-atras:hover {
    background: var(--tierra);
    border-color: var(--tierra);
    color: var(--blanco);
}

@media (max-width: 640px) {
    .brief-acciones { flex-wrap: wrap; }
    .brief-acciones .btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   Ronda 2026-08-17 (tercera revisión del cliente, "Pagina Web (3).pdf")
   ============================================================ */

/* ---------- Mayúsculas también en la PORTADA y en Contacto ----------
   En agosto esto se aplicó solo a las páginas internas; el cliente pide lo
   mismo en lo que ve al bajar por el inicio. Sigue siendo por CSS: él escribe
   los textos con acentuación normal en el Customizer. */
.acerca .split-text > .section-title,
.servicios .split-text > .section-title,
.proyectos .section-head .section-title,
.servicio-nombre,
.pagina-head--contacto .section-title {
    text-transform: uppercase;
    /* Cormorant en versales necesita aire para no verse apretada (misma
       corrección que en los títulos de las internas). */
    letter-spacing: .03em;
}
/* El "01/" del nombre de servicio ya viene en Montserrat y sin minúsculas:
   heredar el letter-spacing lo separaría del nombre. */
.servicio-nombre span { letter-spacing: normal; }

/* ---------- Justificado también en la portada ----------
   Mismos criterios que en las internas: solo bloques de descripción largos,
   sin partir palabras, y a la izquierda en pantallas angostas. */
.acerca .split-text > p,
.servicio p {
    text-align: justify;
    hyphens: none;
    -webkit-hyphens: none;
    text-justify: inter-word;
    text-wrap: pretty;
}
@media (max-width: 640px) {
    .acerca .split-text > p,
    .servicio p { text-align: left; }
}

/* ---------- Color de marca en el formulario de contacto ----------
   "En esta sección poner algo de la paleta de colores... tal vez a las líneas."
   Las líneas de los campos pasan del gris neutro al tono de la marca, el foco
   se marca en Tierra Roja y el botón deja de ser negro. */
.form-contacto .form-campo input,
.form-contacto .form-campo textarea {
    border-color: var(--linea);
    background: transparent;
}
.form-contacto .form-campo input:hover,
.form-contacto .form-campo textarea:hover { border-color: var(--piedra); }
.form-contacto .form-campo input:focus,
.form-contacto .form-campo textarea:focus {
    border-color: var(--tierra);
    /* Segundo filete en vez de outline: engorda la línea sin mover el campo. */
    box-shadow: inset 0 0 0 1px var(--tierra);
}
.form-contacto .form-campo label { color: var(--tierra); }
.form-contacto .btn-solid {
    background: var(--tierra);
    border-color: var(--tierra);
    color: var(--blanco);
}
.form-contacto .btn-solid:hover {
    background: transparent;
    border-color: var(--tierra);
    color: var(--tierra);
}