/* ==========================================================================
   [ETIQUETA: ARCHIVO STYLE CSS]
   Controla la maqueta principal usando los tokens de base.css
   ========================================================================== */

/* -----------------------------------------------------------
   [ETIQUETA: CONTENEDOR DE GRILLA GLOBAL]
----------------------------------------------------------- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr); 
    column-gap: var(--grid-gap);
    max-width: 100%;
    margin: 0 auto;
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
}

/* -----------------------------------------------------------
   [ETIQUETA: HEADER Y NAVEGACIÓN]
----------------------------------------------------------- */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; 
    display: grid; 
    align-items: center;
    z-index: var(--z-nav);
    background: transparent;
    pointer-events: none; 
    mix-blend-mode: difference;
    color: var(--off-white); /* Forzamos blanco para el modo diferencia */
}

.nav-logo, .nav-links { pointer-events: auto; }
.nav-logo { grid-column: span 4; }
.logo-text { font-weight: var(--fw-bold); font-size: var(--fs-body); text-decoration: none; color: inherit; }

.nav-links {
    grid-column: 5 / span 8;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-m); /* Reemplazo de los 40px hardcodeados */
}

.nav-links .ui-nav-item { opacity: 1 !important; color: inherit; }

/* -----------------------------------------------------------
   [ETIQUETA: SECCIONES HERO & PROYECTOS]
----------------------------------------------------------- */
.hero-section {
    display: grid;
    min-height: var(--vh-75); /* Aquí es donde cambias la altura */
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-m);
    align-content: start; /* Empuja el texto al fondo */
}

.hero-section .display-h1 {
    grid-column: 1 / span 4;
}

.hero-description {
    grid-column: 1 / span 4; 
    color: var(--grey);
    margin: 0;
}

.projects-section {
    min-height: var(--vh-75);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
    align-items: start;
    padding-top: var(--space-xl);
    margin-bottom: var(--space-xl); 
}

/* [ETIQUETA: CARRUSEL] */
.carousel-main-container {
    grid-column: 1 / span var(--grid-columns);
    position: relative;
    width: 100%;
    overflow: visible; 
}

.carousel-track {
    transition: transform var(--time-carousel-move) var(--ease-editorial);
    display: flex;
    /* Usamos el margen global como gap para que alinee con la grilla */
    gap: var(--page-margin); 
    will-change: transform;
}

.carousel-item { display: block; flex: 0 0 100%; width: 100%; }

.project-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--border-current);
    margin-bottom: var(--grid-gap); /* Sincronizado con la grilla */
    overflow: hidden;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--time-slow) var(--ease-ui); /* Transición tokenizada */
}

.project-image-wrapper:hover .carousel-img { transform: scale(1.05); }

.project-meta {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding-top: var(--space-s);
    border-top: 1px solid var(--border-current);
}

.project-name { line-height: var(--lh-base); }
.project-meta .btn-editorial { font-size: var(--fs-nav); letter-spacing: var(--ls-caps); }

/* -----------------------------------------------------------
   [ETIQUETA: SECCIÓN DE SERVICIOS (ACORDEÓN)]
----------------------------------------------------------- */
.capabilities-intro {
    grid-column: 1 / span 4;
    position: sticky;
    top: 140px;
    height: fit-content;
}

.capabilities-intro .label { display: block; margin-bottom: 16px; color: var(--grey); }

.inline-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1.75px solid currentColor; 
    transition: color var(--time-fast) ease; 
}

.inline-link:hover { color: var(--grey); }

.capabilities-list { grid-column: 7 / span 6; }

.accordion-item { border-bottom: 1px solid var(--border-current); }

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    background: none;
    border: none;
    text-align: left;
    color: inherit; /* Hereda del tema */
}

.service-name { transition: transform var(--time-base) ease; }

.accordion-icon {
    font-size: var(--fs-icon);
    font-weight: var(--fw-light);
    transition: transform var(--time-base) var(--ease-smooth);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--time-slow) var(--ease-smooth);
}

.accordion-content .body-text { margin-top: 0; padding-top: 4px; padding-bottom: 16px; color: var(--grey); max-width: 720px; }

.accordion-item.is-active .accordion-icon { transform: rotate(45deg); }

/* -----------------------------------------------------------
   [ETIQUETA: CLIENTES Y LOGOS]
----------------------------------------------------------- */
.trust-section {
    background-color: #000000; /* Fondo negro para resaltar los logos */
    color: var(--off-white, #ffffff); /* Forzamos texto blanco */
}

.trust-header { 
    grid-column: 1 / span var(--grid-columns); 
    margin-bottom: var(--space-m); 
}

.trust-header .display-h1 { 
    margin-bottom: var(--space-m); 
}

.trust-section .divider-line {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2); /* Línea sutil sobre fondo negro */
    margin-top: var(--grid-gap);
}

.logo-grid {
    grid-column: 1 / span var(--grid-columns);
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    row-gap: var(--space-m);    
    column-gap: var(--space-s); 
    align-items: center;
    padding-top: var(--space-s);
}

.logo-item {
    display: flex; justify-content: center; align-items: center;
    padding: 10px; height: 100px; 
    filter: grayscale(1); 
    opacity: 0.5; 
    transition: all var(--time-base) ease;
}

/* Nota: Si tus logos originales son negros, puedes agregar "invert(1)" al filter de arriba y abajo para que se vuelvan blancos automáticamente */

.logo-item:hover { 
    opacity: 1; 
    filter: grayscale(0); 
}

.logo-item img { 
    width: 100%; height: 100%; max-width: 225px; max-height: 100px; 
    object-fit: contain; pointer-events: none; 
}

/* -----------------------------------------------------------
   [ETIQUETA: VIDEO MANIFIESTO]
----------------------------------------------------------- */
.mission-section { height: var(--vh-100); width: 100%; background-color: var(--bg-current); display: flex; flex-direction: column; }
.mission-media-wrapper { position: relative; width: 100vw; height: var(--vh-75); overflow: hidden; }

.mission-video-iframe {
    position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; 
    min-height: var(--vh-100); min-width: 177.77vh; transform: translate(-50%, -50%); pointer-events: none;
}

.mission-text-content { grid-column: 1 / span 6; text-align: left; align-self: start; }
.mission-text-content .display-h2 { line-height: 1.4; }

/* -----------------------------------------------------------
   [ETIQUETA: FOOTER GLOBAL]
----------------------------------------------------------- */
.main-footer { padding-bottom: var(--page-margin); background-color: var(--bg-current); }

.footer-divider {
    grid-column: 1 / span var(--grid-columns);
    height: 1px; background-color: var(--border-current); margin-bottom: var(--space-m);
}

/* --- Distribución de Columnas --- */
.footer-brand {
    grid-column: 1 / span 3;
}

.address-col {
    grid-column: 4 / span 3;
    padding-top: 2px; /* Alineación con el baseline del logo */
}

.footer-column.hours {
    grid-column: 9 / span 2;
}

.footer-column.contact {
    grid-column: 11 / span 2;
}

/* --- Tipografía y Colores --- */

/* Clase para texto en gris manteniendo tamaño body */
.text-grey {
    color: var(--grey) !important;
}

/* Color principal para el resto del footer (variante de blanco) */
.footer-column .body-text {
    color: var(--off-white);
    margin: 0;
    line-height: var(--lh-base);
}

/* Copyright (Meta) */
.meta-text {
    color: var(--grey);
    font-size: var(--fs-nav);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}

/* Limpieza de enlace de contacto */
.footer-link-clean {
    text-decoration: none;
    color: inherit;
    border: none !important;
    transition: opacity var(--time-fast) ease;
}

.footer-link-clean:hover {
    opacity: 0.7;
}

/* -----------------------------------------------------------
   [ETIQUETA: ABOUT PAGE SPECIFIC - SECCIÓN HERO & TICKER]
----------------------------------------------------------- */

/* Unificamos about-hero y contact-hero para que compartan la altura */
hero.about-hero,
hero.contact-hero {
    display: grid;
    min-height: var(--vh-50); /* Aquí es donde cambias la altura */
    align-items: center; 
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
}

hero.about-hero {
    align-content: end; /* Esto empuja todo el contenido al fondo */
}

.ticker-section {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid var(--border-current);
    border-bottom: 1px solid var(--border-current);
    background: var(--bg-current);
    padding: 24px 0;
}

.ticker-wrapper {
    display: flex;
    white-space: nowrap;
}

.ticker-content {
    display: inline-block;
    animation: ticker-move 60s linear infinite;
    font-size: var(--fs-nav);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
}

.ticker-content span {
    padding-right: 10px;
}

@keyframes ticker-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* -----------------------------------------------------------
   [ETIQUETA: TEAM SECTION - LAYOUT & GRID]
----------------------------------------------------------- */

.team-intro-section .grid-container {
    row-gap: var(--grid-gap);
    align-items: start;
}

.team-content-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
    grid-column: 1 / span 12;
    margin-bottom: var(--space-m);
}

.team-content-wrapper .label {
    grid-column: 1 / span 2;
    padding-top: 0.5rem;
}

.team-content-wrapper .display-h2 {
    grid-column: 4 / span 9;
    margin: 0;
}

/* -----------------------------------------------------------
   [ETIQUETA: TEAM CARDS - PHOTO & OVERLAY]
----------------------------------------------------------- */

.team-photo-item {
    display: flex;
    flex-direction: column;
}

/* Posicionamiento en Grilla */
.team-photo-item.col-4  { grid-column: 4 / span 3; }
.team-photo-item.col-7  { grid-column: 7 / span 3; }
.team-photo-item.col-10 { grid-column: 10 / span 3; }

.photo-container {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--grey-light);
    margin-bottom: var(--space-s);
    cursor: pointer;
}

.bw-filter {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

/* Overlay / Telón de Color */
.team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--member-color);
    color: var(--off-white);
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}

.team-photo-item:hover .team-overlay {
    transform: translateY(0);
}

/* -----------------------------------------------------------
   [ETIQUETA: TEAM CARDS - CONTENT & SPECS]
----------------------------------------------------------- */

.overlay-content {
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
}

.team-photo-item:hover .overlay-content {
    opacity: 1;
}

.tech-spec {
    margin-bottom: var(--space-s);
}

.tech-spec .label {
    display: block;
    font-size: var(--fs-token);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}

.tech-spec .body-text {
    font-size: var(--fs-body);
    margin: 0;
    font-weight: inherit;
}

.member-desc {
    margin-top: var(--space-m);
    font-size: var(--fs-h2);
    line-height: 1.2;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: var(--space-s);
    font-weight: inherit;
}

.member-meta {
    display: flex;
    flex-direction: column; /* Apila nombre arriba y puesto abajo */
    align-items: flex-start; /* Alinea ambos a la izquierda */
    margin-top: var(--space-xs); /* Espacio reducido para que "pegue" a la foto */
    gap: 4px; /* Espacio mínimo entre el nombre y el cargo */
    margin-bottom: var(--space-s);
}

.member-meta .body-text.text-black {
    /* Mantenemos tus estilos de color y fuente del archivo original */
    margin: 0; 
    line-height: 1.2;
}

.member-meta .label.text-grey {
    /* Alineación explícita a la izquierda */
    text-align: left;
    margin: 0;
}

/* -----------------------------------------------------------
   [ETIQUETA: PRESS LIST - ULTRA MINIMAL]
----------------------------------------------------------- */

.press-list-section {
    --rec-bg: var(--off-black);
    --rec-white: var(--off-white);
    --rec-grey: var(--grey);
    --rec-border: var(--border-subtle);

    background-color: var(--rec-bg);
    border-top: 1px solid var(--rec-border);
}

.rec-text { color: var(--rec-white); }
.rec-accent { color: var(--rec-grey); }

.press-header { grid-column: 1 / span 3; }
.press-list { grid-column: 4 / span 12; } /* Expandido para usar el ancho restante */

.press-item {
    display: grid;
    grid-template-columns: 3fr 7fr 1fr; /* Proporciones ajustadas */
    column-gap: var(--grid-gap);
    align-items: baseline;
    padding: var(--space-m) 0;
    border-top: 1px solid var(--rec-border);
    text-decoration: none;
    transition: background-color 0.4s var(--ease-ui);
}

.press-item:last-child {
    border-bottom: 1px solid var(--rec-border);
}

/* Nombre de publicación: Pequeño y elegante */
.press-publication {
    font-size: var(--fs-label); /* Más pequeño que el body */
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    display: inline-block;
    transition: transform 0.6s var(--ease-ui), color 0.6s var(--ease-ui);
    will-change: transform;
}

/* Movimiento suavizado (como el de la flecha editorial) */
.press-item:hover .press-publication {
    transform: translateX(8px); /* Movimiento sutil */
    color: var(--white);
}

.press-item:hover .rec-accent {
    color: var(--white);
    transition: color 0.6s var(--ease-ui);
}

.rec-col-year {
    text-align: right;
}

/* Sin sombreados de fondo */
.press-item:hover {
    background-color: transparent;
}

/* -----------------------------------------------------------
   [ETIQUETA: CONTACT PAGE - HERO (50VH)]
----------------------------------------------------------- */
hero.contact-hero {
    display: grid;
    height: 50vh;
    align-items: center; /* Centrado vertical del mensaje */
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
}

/* El texto principal comienza en la columna 3 */
.contact-hero .hero-text-wrapper {
    grid-column: 3 / span 10;
}

/* Estilo del enlace "Let's talk" (Consistencia con Home) */
.inline-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--grey);
    transition: border-color var(--time-normal) var(--ease-ui);
}

.inline-link:hover {
    border-color: var(--off-white);
}

    /* Nos aseguramos de que el contenedor padre sea una grilla activa */

.visit-section .grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gap);
}

.visit-info-wrapper {
    /* Forzamos el inicio en la columna 2 y que se extienda solo por 3 */
    grid-column: 1 / span 3 !important; 
    
    /* Evitamos que el contenido interno ensanche la columna */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Posicionamiento en la grilla */
.visit-gallery-col {
    grid-column: 4 / span 9; /* De la 4 a la 12 */
    align-self: start; /* Alineado por arriba con el texto */
    overflow: hidden; /* Corta las imágenes que salen del contenedor */
}

.gallery-carousel-container {
    width: 100%;
    position: relative;
}

.gallery-track {
    display: flex;
    gap: var(--grid-gap); /* Misma separación que el gutter de la página */
    width: max-content; /* Permite que el track sea tan largo como las imágenes */
    animation: scroll-slow 40s linear infinite; /* Movimiento constante y lento */
}

/* Pausa en hover */
.gallery-track:hover {
    animation-play-state: paused;
}

.gallery-item {
    flex-shrink: 0;
    width: calc((100vw - (var(--page-margin) * 2) - (var(--grid-gap) * 11)) / 12 * 4);
}

.gallery-item img {
    width: 100%;
    height: auto; /* Mantiene proporciones aunque los altos varíen */
    display: block;
    object-fit: cover;
}

/* Animación para el Loop Infinito */
@keyframes scroll-slow {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se desplaza exactamente la mitad del ancho total (las 5 originales) */
        transform: translateX(calc(-50% - (var(--grid-gap) / 2)));
    }
}

/* -----------------------------------------------------------
   [ETIQUETA: CONTACT PAGE - INFO SECTION (DARK)]
----------------------------------------------------------- */
.contact-info-section {
    padding-bottom: var(--space-xl);
}

/* Línea divisoria técnica */
.contact-info-section .footer-divider {
    grid-column: 3 / span 12;
    margin-bottom: var(--space-l);
}

/* Label "CONTACT" en blanco a la izquierda */
.contact-label-col {
    grid-column: 3 / span 2;
}

/* Datos en gris a la derecha */
.contact-details-col {
    grid-column: 6 / span 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.contact-details-col .body-text {
    margin-top: 0; /* <--- CRUCIAL */
}

/* --- SECCIÓN VISIT: DELIMITACIÓN TÉCNICA --- */

.visit-info-wrapper {
    grid-column: 1 / span 4; /* Aquí defines tus 3 columnas */
}

/* -----------------------------------------------------------
   [PROJECT CASE TEMPLATE - REVISADO]
----------------------------------------------------------- */

/* 1. Reset y Tipografía */
.project-info-meta .display-h2 {
    font-weight: var(--fw-light);
    margin: 0;
    line-height: 1.1;
}

/* 2. Control de Posiciones en Grilla */
.col-start-1 { 
    grid-column: 1 / span 3; 
}

.col-start-4 { 
    grid-column: 4 / span 3; 
}

.col-start-7 { 
    grid-column: 7 / span 3; 
}

.col-start-10 { 
    grid-column: 10 / span 3; 
}

/* Nueva clase: Empieza en 4 y llega al final de la grilla */
.col-start-4-end-12 {
    grid-column: 4 / span 9;
}

/* 3. Ficha Técnica (Meta) */
.project-info-meta .grid-container {
    align-items: start;
}

.project-info-meta .col-start-4,
.project-info-meta .col-start-7,
.project-info-meta .col-start-10 {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espacio entre Label y P */
}

/* 4. Línea Divisoria (Consistente con el sitio) */
.project-divider-line {
    grid-column: 1 / span 12;
    height: 1px;
    background-color: var(--border-current);
    margin-top: var(--space-xl); /* Espacio generoso antes de la línea */
    /* Eliminada la opacidad para que sea sólida */
}

/* 5. Hero del Proyecto */
.hero-project {
    width: 100%;
    height: var(--vh-75);
    overflow: hidden;
    background-color: var(--bg-current);
}

.hero-project-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Ajustes de espaciado extra */
.pb-xl { padding-bottom: var(--space-xl); }

/* El Texto comienza en la 4. 
   Usa 'span 8' para un look editorial con aire a la derecha, 
   o 'span 9' para llegar hasta el borde de la grilla. */
.col-main-text {
    grid-column: 4 / span 9; 
    margin: 0;
}

/* Elimina el espacio superior de los párrafos para que coincidan con el label */
.project-description .body-text {
    margin-top: 0;
    line-height: var(--lh-base); /* Asegura que el ritmo vertical sea constante */
}

/* Opcional: Ajuste fino para el Label */
.project-description .label {
    display: block;
    padding-top: 4px; /* Ajusta este valor (2px-5px) según la tipografía para un alineado óptico perfecto */
}

/* ==========================================================================
   [PROJECT GALLERY - SISTEMA DE ALINEACIÓN TÉCNICA]
   ========================================================================== */

.project-gallery.grid-container {
    row-gap: var(--grid-gap);
    align-items: start;
    padding-bottom: var(--space-xl);
}

.gallery-block {
    grid-column: 1 / span 12;
    width: 100%;
}

.gallery-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- TIPO A: SINGLE --- */
/* Definimos una proporción editorial (ej: 16/9 o 3/2) */
.gallery-block.single img {
    aspect-ratio: 16 / 9; 
}

/* --- TIPO B: SPLIT --- */
.gallery-block.split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--grid-gap);
}

/* Para que el Bloque B tenga el mismo alto que el Bloque A:
   Como el ancho de cada imagen en el split es la mitad, 
   su ratio debe ser la mitad del ancho para coincidir en altura.
*/
.gallery-block.split img {
    aspect-ratio: 8 / 9; 
}
/* -----------------------------------------------------------
   [NEXT PROJECT HERO - CONFIGURACIÓN DE POSICIÓN Y HOVER]
----------------------------------------------------------- */
.next-project-hero {
    position: relative;
    height: var(--vh-75);
    width: 100%;
    background-color: var(--off-black);
    overflow: hidden;
    cursor: pointer;
}

.next-project-hero .hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.next-project-hero .hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(40%);
    transition: transform 0.8s var(--ease-ui);
    will-change: transform;
}

/* Efecto Zoom al pasar el mouse */
.next-project-hero:hover .hero-background img {
    transform: scale(1.05);
}

.next-project-hero .hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding-top: var(--space-m);
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Sistema de 12 columnas */
    column-gap: var(--grid-gap);
    align-items: start; /* Alineación superior */
}

/* ORGANIZACIÓN DE COLUMNAS (Modifica los números aquí para mover)
   Formato: grid-column: [Columna Inicio] / span [Ancho];
*/

.hero-link-view { 
    grid-column: 1 / span 3;  /* Empieza en Col 1, ocupa 3 de ancho */
}

.hero-title { 
    grid-column: 4 / span 6;  /* Empieza en Col 4, ocupa 6 de ancho */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-link-work { 
    grid-column: 12 / span 1; /* Se pega a la última columna */
    text-align: right;
}

/* Colores de texto para el Hero */
.next-project-hero .display-h2,
.next-project-hero .btn-editorial,
.next-project-hero .nav-soft-move {
    color: var(--white);
}

/* -----------------------------------------------------------
   [ESPACIADO FINAL]
----------------------------------------------------------- */
.footer-spacer {
    height: var(--space-xl); /* Usa tu token de 80px para consistencia */
    width: 100%;
    background-color: var(--bg-current);
}

.main-footer {
    /* Opcional: aseguramos que el footer no tenga un padding top excesivo 
       si ya usamos el spacer */
    padding-top: var(--space-m);
}

/* ==========================================================================
   SECCIÓN WORK - GRILLA PROFESIONAL ALINEADA (ALTURAS SINCRONIZADAS)
   ========================================================================== */

/* --- CABECERA --- */
.work-header {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
    padding-top: var(--space-xl); 
    align-items: start;

    /* Eliminamos el espacio inferior */
    padding-bottom: 0 !important; 
    
    /* Si notas que todavía hay algo de aire, 
       asegurémonos de que no haya margen */
    margin-bottom: 0;
}

.work-title-col {
    grid-column: span 3;
}

.work-filters-col {
    grid-column: 4 / span 9;
}

/* --- FILTROS --- */
.filter-group {
    display: grid;
    grid-template-columns: repeat(9, 1fr); 
    column-gap: var(--grid-gap);
    padding: var(--space-m) 0;
    border-top: 1px solid var(--border-subtle);
}

.filter-group .body-text {
    grid-column: span 2; 
    padding-top: 2px;
    color: var(--white);
}

.filter-options {
    grid-column: 3 / span 7;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    justify-content: flex-end; 
}

.filter-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-action); 
    text-transform: uppercase;
    color: var(--grey);
    transition: color var(--time-fast) var(--ease-ui);
}

.filter-btn.active, 
.filter-btn:hover {
    color: var(--white);
}

/* --- GRID DE PROYECTOS --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
    /* ESTA ES LA CLAVE: Forzamos que cada fila mida 500px (o lo que prefieras). 
       Esto hace que las de span 3 y span 6 midan lo mismo de alto.
    */
    grid-auto-rows: 500px; 
    margin-top: var(--space-m); 
    padding-bottom: var(--space-xl);
    align-items: stretch; /* Estira las cards para llenar la fila */
}

.project-card {
    position: relative;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%; /* Ocupa el alto definido en grid-auto-rows */
}

/* EL MARCO: Ahora se adapta al alto de la fila, no a un ratio */
.card-media {
    position: relative;
    width: 100%;
    height: 100%; 
    background: var(--off-black);
    overflow: hidden;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción de la imagen sin deformarla */
    display: block;
    transition: transform var(--time-slow) var(--ease-ui);
}

/* --- RITMO EDITORIAL (Distribución de Columnas) --- */

/* Tarjetas Grandes (span 6) */
.project-card:nth-child(6n+1),
.project-card:nth-child(6n+6) { 
    grid-column: span 6; 
}

/* Tarjetas Chicas (span 3) */
.project-card:nth-child(6n+2),
.project-card:nth-child(6n+3),
.project-card:nth-child(6n+4),
.project-card:nth-child(6n+5) { 
    grid-column: span 3; 
}

/* --- CAPA DE COLOR (OVERLAY) --- */
.card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* El color oscuro de fondo */
    opacity: 0; /* Escondido por defecto */
    transition: opacity var(--time-base) var(--ease-ui);
    z-index: 1;
}

/* --- INFO DEL PROYECTO (TEXTO) --- */
.card-info {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
    pointer-events: none; 
    
    opacity: 0;
    transform: translateY(15px);
    transition: opacity var(--time-base) var(--ease-ui), 
                transform var(--time-base) var(--ease-ui);
}

/* --- ESTADO ACTIVO: COLOR E INFO (Para PC y Tablet) --- */
/* Quitamos el blanco y negro, mostramos overlay y subimos el texto */

.project-card:hover img,
.project-card.is-active img {
    filter: grayscale(0%);
}

.project-card:hover .card-overlay,
.project-card.is-active .card-overlay {
    opacity: 1;
}

.project-card:hover .card-info,
.project-card.is-active .card-info {
    opacity: 1;
    transform: translateY(0);
}

/* --- ESTILOS DE TEXTO --- */
.card-info .label {
    display: block;
    font-size: var(--fs-token);
    letter-spacing: var(--ls-action);
    color: var(--grey);
    margin-bottom: var(--space-s);
    text-transform: uppercase;
}

.card-info .display-h2 {
    color: var(--white) !important;
    font-size: var(--fs-h2);
    margin: 0;
    text-transform: none;
}

/* ==========================================================================
   [9. MEDIA QUERIES - RESPONSIVE]
   Organizados por flujo de página: Global -> Hero -> Contenido -> Footer
   ========================================================================== */

@media screen and (max-width: 1024px) {
    
    /* --- 1. CONFIGURACIÓN GLOBAL & VARIABLES --- */
    :root {
        --page-margin: 40px;
        --grid-gap: 20px;
    }

    .main-footer {
        padding-bottom: var(--space-l); 
    }

    /* --- 2. HERO SECTION --- */
    .hero-section {
        min-height: var(--vh-050); /* Ajustado a 50vh */
        padding-bottom: var(--space-m);
    }

    .hero-section .display-h1,
    .hero-description {
        grid-column: 1 / span 9;
    }

    /* --- 3. SECCIÓN PROYECTOS (CARRUSEL) --- */
    .projects-section {
        min-height: auto; 
        padding-top: var(--space-m);
        margin-bottom: var(--space-l);
    }

    .carousel-main-container {
        overflow: hidden; 
        width: 100%;
    }

.carousel-track {
    display: flex;
    width: 100%; /* Asegura que el contenedor no se colapse */
    will-change: transform; /* Mejora el rendimiento de la animación */
}

.carousel-item {
    flex: 0 0 100%; /* Obliga a cada slide a medir exactamente el ancho del carrusel */
    min-width: 100%;
}

    .project-image-wrapper {
        aspect-ratio: 16 / 9;
        margin-bottom: 16px;
    }

    /* --- 4. SECCIÓN SERVICIOS (CAPABILITIES) --- */
    .capabilities-intro {
        grid-column: 1 / span 9;
        position: relative; 
        top: 0;
        margin-bottom: var(--space-m);
    }

    .capabilities-list {
        grid-column: 1 / span 12;
    }

    /* --- 5. LOGO GRID (TRUST) --- */
    .logo-grid {
        grid-template-columns: repeat(4, 1fr);
        row-gap: var(--space-m);
    }

    .logo-item {
        height: 100px;
        opacity: 0.8;
    }

    /* --- 6. VIDEO & MISIÓN --- */
    .mission-text-content {
        grid-column: 1 / span 10;
    }

    .mission-media-wrapper {
        height: var(--vh-50);
    }

    /* --- 7. FOOTER GLOBAL --- */
    .main-footer .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--grid-gap);
        row-gap: 0;
    }

    /* Fila Superior: Marca y Copyright */
    .footer-brand {
        grid-column: 1 / span 12;
        margin-bottom: var(--space-s);
    }

    .footer-logo-group {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--grid-gap);
        align-items: end;
    }

    .footer-logo-group .logo-text {
        grid-column: 1 / span 3;
    }

    .copyright-container {
        grid-column: 4 / span 9;
    }

    /* Fila Media: Dirección */
    .address-col {
        display: block;
        grid-column: 4 / span 9;
        margin-bottom: 35px;
    }

    /* Fila Inferior: Hours & Contact */
    .footer-column.hours {
        display: block;
        grid-column: 4 / span 3;
        margin-bottom: 0;
    }

    .footer-column.contact {
        display: block;
        grid-column: 8 / span 5;
    }

    .footer-column.hours .label,
    .footer-column.contact .label {
        display: block;
        margin-bottom: 4px;
    }

    /* --- CABECERA DE WORK --- */
.work-header {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
    padding-top: var(--space-xl); 
    align-items: start;
}

/* El título ocupa su espacio superior */
.work-title-col {
    grid-column: 1 / span 12; /* Ahora el título ocupa toda la fila superior */
    margin-bottom: var(--space-m);
}

/* --- SECCIÓN WORK: FILTROS COLAPSABLES --- */

.work-header {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-m); 
    align-items: start;
}

.projects-grid {
        grid-auto-rows: auto; /* Altura automática en móvil para no deformar */
        row-gap: var(--space-m);
    }

    /* Forzamos que CADA card ocupe las 12 columnas (1 por fila) */
    .project-card:nth-child(n) {
        grid-column: 1 / span 12 !important;
        aspect-ratio: 4 / 3; /* Opcional: para que todas tengan un look uniforme */
    }
    
    .card-media { height: 100%; }

    /* ==========================================================================
   UPDATED ABOUT PAGE QUERIES
   ========================================================================== */

/* 1. HERO: Extensión de cajas de texto a 6 columnas */
hero.about-hero .display-h1,
hero.about-hero .hero-description {
    grid-column: 1 / span 9; /* Extendido para mayor presencia editorial */
}

.team-intro-section {
    padding-top: var(--space-l); /* Cambia 'xl' por 'l', 'm' o un valor en px */
}

/* 2. TEAM: Título a 12 columnas (arriba) */
.team-content-wrapper .label {
    grid-column: 1 / span 12;
    margin-bottom: var(--space-s);
}

.team-content-wrapper .display-h2 {
    grid-column: 1 / span 12; /* Ocupa el ancho total */
    margin: 0;
}

/* 1. Ajuste del contenedor para permitir el flujo natural */
    .team-intro-section .grid-container {
        row-gap: var(--space-m); /* Espacio vertical entre filas de tarjetas */
    }

    /* 2. Reset de Posiciones y Ancho de 4 Columnas */
    .team-photo-item.col-4,
    .team-photo-item.col-7,
    .team-photo-item.col-10 {
        /* Forzamos que el inicio sea automático para que se apilen en orden */
        grid-column-start: auto !important;
        
        /* Definimos el ancho de 4 columnas (3 tarjetas por fila = 12 columnas) */
        grid-column-end: span 4 !important;
        
        /* Reset de márgenes o paddings si existieran en escritorio */
        margin-left: 0 !important;
    }

    /* 3. Ajuste de la foto (Opcional) */
    .photo-container {
        aspect-ratio: 4 / 5; /* Un poco más vertical para optimizar espacio en tablet */
    }

    .member-meta {
    margin-bottom: var(--space-xs); /* Espacio con la foto */
}

/* 1. Ajuste del contenedor de información en el overlay */
    .team-overlay {
        padding: var(--space-s); /* Reducimos padding para ganar área de lectura lateral */
        justify-content: flex-end; /* Garantiza que el contenido se mantenga pegado a la base */
    }

    .overlay-content {
        width: 100%; /* Expandimos el área de lectura al máximo ancho disponible */
        opacity: 0;
        transition: opacity 0.3s ease 0.3s;
    }

    /* 2. Unificación tipográfica con tokens de diseño */
    .tech-spec .body-text,
    .member-desc {
        font-size: var(--fs-body); /* Tamaño consistente según tu instrucción */
        line-height: var(--lh-base);
    }

    /* 3. Optimización de espacio vertical y visual */
    .member-desc {
        margin-top: var(--space-xs); /* Reducimos el margen superior para evitar desbordamientos */
        padding-top: var(--space-s);
        /* La línea divisoria se mantiene según el estilo base */
    }

    .tech-spec {
        margin-bottom: var(--space-xs); /* Compactamos las especificaciones superiores */
    }

    /* 4. Mantenimiento del nombre y cargo exterior */
    /* Como mencionaste mantener el cambio de tamaño del texto de abajo (afuera del overlay) */
    .member-meta .body-text.text-black {
        font-size: var(--fs-body);
    }
    /* Ajuste adicional para el espaciado entre párrafos de body-text */
    .overlay-content .body-text {
        margin-bottom: var(--space-s);
    }
/* Forzamos que el contenedor del texto empiece en la 1 y cubra las 12 */
    .contact-hero .hero-text-wrapper {
        grid-column: 1 / span 12 !important;
    }

    /* Opcional: Ajuste de alineación para que no quede pegado al borde si es necesario */
    hero.contact-hero {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-l);
        height: auto; /* Permite que el texto respire si es muy largo en móvil */
        min-height: var(--vh-50);
    }

    /* 1. Expandimos la línea divisoria */
    .contact-info-section .footer-divider {
        grid-column: 1 / span 12 !important;
        margin-bottom: var(--space-m);
    }

    /* 2. El Label "CONTACT" al inicio */
    .contact-label-col {
        grid-column: 1 / span 3 !important;
        margin-bottom: var(--space-s);
    }

    /* 3. Los detalles (Email/Tel) ocupan todo el ancho */
    .contact-details-col {
        grid-column: 4 / span 9 !important;
    }
    
    /* Ajuste visual: alineamos el texto a la izquierda ya que no hay columnas vacías */
    .contact-details-col .body-text {
        text-align: left;
    }
    
.project-info-meta .grid-container {
    row-gap: var(--space-s); /* Espacio entre el título y las etiquetas */
}

/* El título ocupa las 12 columnas para forzar el salto de línea */
.project-info-meta .col-start-1 {
    grid-column: 1 / span 12 !important;
    margin-bottom: var(--space-s);
}

/* Repartimos los meta-datos en 4 columnas cada uno (3 bloques = 12 cols) */
.project-info-meta .col-start-4 {
    grid-column: 1 / span 4 !important; /* Industry */
}

.project-info-meta .col-start-7 {
    grid-column: 5 / span 4 !important; /* Expertise */
}

.project-info-meta .col-start-10 {
    grid-column: 9 / span 4 !important; /* Year */
}

/* Alineamos los textos a la izquierda para que no queden "flotando" */
.project-info-meta .col-start-4,
.project-info-meta .col-start-7,
.project-info-meta .col-start-10 {
    text-align: left;
}

/* 1. Altura de sección al 50% del viewport */
    .next-project-hero {
        height: 50vh !important;
    }

    /* 2. VIEW PROJECT: Le damos 2 columnas más (total de 5 de ancho) */
    .hero-link-view {
        grid-column: 1 / span 4 !important; 
        grid-row: 1;
        margin-bottom: var(--space-xs); /* Espacio reducido con el nombre */
    }

    /* 3. NOMBRE DEL PROYECTO: Lo movemos 1 columna a la derecha e inmediatamente abajo */
    .hero-title {
        grid-column: 5/ span 6 !important; /* Empieza en la 2da columna */
        grid-row: 1;
    }

    /* 4. WORK: Se queda a la derecha, alineado arriba con View Project */
    .hero-link-work {
        grid-column: 12/ span 1 !important;
        grid-row: 1;
    }
}

/* ============================================================
   TABLET & MOBILE (Ajuste de Grilla y Acordeón)
   ============================================================ */

/* Reset para escritorio: para que el botón no parezca botón */
@media screen and (min-width: 1025px) {
    .filter-header-trigger {
        display: contents; /* Se comporta como si no existiera el wrapper */
        cursor: default;
    }
    .filter-icon { display: none; }
}

@media screen and (max-width: 1025px) {
    
    /* 1. Eliminamos el aire innecesario */
    .work-header {
        row-gap: 0; /* Cierra el espacio vertical de la grilla */
        padding-top: var(--space-xl);
        padding-bottom: var(--space-m);
    }

    .work-title-col {
        grid-column: 1 / span 12;
        margin-bottom: var(--space-s); /* Espacio mínimo con los filtros */
    }

    /* 2. Filtros a ancho completo */
    .work-filters-col {
        grid-column: 1 / span 12 !important;
        width: 100%;
    }

    .filter-group {
        display: block; 
        border-top: 1px solid var(--border-subtle);
        padding: 0;
    }

    /* 3. El disparador (Industry/Expertise + icono) */
    .filter-header-trigger {
        width: 100%;
        display: flex;
        justify-content: space-between; /* Texto izquierda, Icono derecha */
        align-items: center;
        background: none;
        border: none;
        padding: var(--space-m) 0;
        cursor: pointer;
        text-align: left;
    }

    .filter-icon {
        display: block;
        color: var(--white);
        font-size: 1.5rem;
        transition: transform var(--time-base) var(--ease-ui);
    }

.filter-options {
        max-height: 0;
        overflow: hidden;
        /* Curva de aceleración más elegante (cubic-bezier) */
        transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.4s ease, 
                    padding 0.4s ease;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-s) var(--space-m);
        justify-content: flex-start;
        opacity: 0; /* Empezamos invisible */
        pointer-events: none; /* Evita clics accidentales mientras está cerrado */
    }

    /* Estado Activo mejorado */
    .filter-group.is-active .filter-options {
        max-height: 500px; /* Valor suficiente para que no se corte */
        opacity: 1;
        padding-top: var(--space-s); /* Un poco de aire al abrirse */
        padding-bottom: var(--space-l);
        pointer-events: auto;
    }

    /* Animación del icono (el '+' rotando suavemente) */
    .filter-icon {
        display: block;
        color: var(--white);
        font-size: 1.2rem;
        font-weight: var(--fw-light);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .filter-group.is-active .filter-icon {
        transform: rotate(135deg); /* Rotación más sutil que 45° */
    }
}

@media screen and (max-width: 800px) {
    
    /* --- 1. CONFIGURACIÓN GLOBAL & VARIABLES --- */
    :root {
        --page-margin: 20px; 
        --grid-gap: 10px;
    }

    /* --- 2. HERO SECTION --- */
    .hero-section {
        min-height: auto; 
        /* Espacio al final de la sección hero */
        padding-bottom: var(--space-l); 
    }

    .hero-description {
        grid-column: 1 / span 10;
        /* AJUSTE: Espacio debajo de "Hello we're CT Studio" */
        margin-bottom: var(--space-m); 
    }

    /* --- 3. SECCIÓN PROYECTOS (IMÁGENES) --- */
    .project-image-wrapper {
        /* AJUSTE: Cambié a 4/3 para que sea más alto que el 16/9 sin deformar */
        aspect-ratio: 4 / 3; 
        margin-bottom: var(--space-s);
    }

    .projects-section {
        /* AJUSTE: Espacio "mediano" arriba de Capabilities */
        margin-bottom: var(--space-m); 
    }

    /* --- 4. SECCIÓN SERVICIOS (CAPABILITIES) --- */
    .capabilities-section {
        /* AJUSTE: Padding superior mediano */
        padding-top: var(--space-m) !important;
    }

    .capabilities-intro {
        grid-column: 1 / span 10;
        margin-bottom: var(--space-m);
    }

    /* --- 5. LOGO GRID (TRUSTED BY BRANDS) --- */
    .trust-section { 
        /* AJUSTE: Espacio mediano arriba de los logos */
        padding-top: var(--space-m) !important; 
    }

    .logo-grid {
        /* AJUSTE: Tamaño de logos usando tu variable de control */
        --mobile-logo-size: 100px; 
        grid-template-columns: repeat(3, 1fr);
        row-gap: var(--space-m); 
    }

    .mission-media-wrapper {
        height: 60vh; 
        /* ELIMINADOS: Padding y Margin que pediste quitar */
        margin: 0 !important;
        padding: 0 !important;
    }

    .mission-text-content {
        grid-column: 1 / span 12;
        /* Forzamos que no tenga margen superior extra */
        margin-top: 0; 
    }

    /* --- 7. FOOTER REESTRUCTURADO --- */
    
    /* Fila 1: Logo y Copyright */
    .footer-brand {
        grid-column: 1 / span 12;
        margin-bottom: var(--space-s);
    }

    
    /* Fila 2: Dirección (Debajo de All Rights Reserved) */
    .address-col {
        /* Pasa a la columna 1 y se extiende las 12 */
        grid-column: 1 / span 12 !important; 
        margin-bottom: var(--space-m); 
    }

    /* Fila 3: Hours y Contact */
    .footer-column.hours {
        /* Columna 1 a la 6 */
        grid-column: 1 / span 6 !important; 
        margin-bottom: 0;
    }

    .footer-column.contact {
        /* Columna 7 a la 12 */
        grid-column: 7 / span 6 !important; 
        text-align: left;
    }

    /* Ajuste de logo footer para móvil */
    .footer-logo-group .logo-text {
        display: block;
        margin-bottom: 5px;
    }

    .projects-grid.grid-container {
        /* 2. Quitamos cualquier padding inferior que tenga el contenedor */
        padding-bottom: var(--space-s); 
        
        /* 3. Quitamos el margen inferior para que el siguiente elemento se pegue */
        margin-bottom: var(--space-s); 
    }

    
    /* --- 8. SECCIÓN ABOUT (HERO & CREATIVE INTELLIGENCE) --- */
    
    hero.about-hero {
        /* Ajustamos el hero para que no sea tan alto en móvil */
        min-height: auto !important;
        padding-top: 120px; /* Espacio para el nav fijo */
    }

    /* Las dos cajas de texto: Título (display-h1) y Párrafo (hero-description) */
    hero.about-hero .display-h1,
    hero.about-hero .hero-description {
        /* Pasamos de span 9 (tablet) a span 10 para ganar ese ancho extra */
        grid-column: 1 / span 10 !important;
    }

    .ticker-section {
        /* Reducimos el padding del carrusel de servicios para móvil */
        padding: var(--space-s) 0;
    }

    /* --- 9. SECCIÓN MEET THE TEAM --- */
    
    /* 1. Ajuste a 2 cartas por fila en la grilla de 12 columnas (span 6) */
    .team-photo-item.col-4,
    .team-photo-item.col-7,
    .team-photo-item.col-10 {
        grid-column-start: auto !important;
        grid-column-end: span 6 !important; 
    }

    /* 2. Desactivar el efecto hover por completo en móvil */
    .team-photo-item:hover .team-overlay {
        /* Mantiene el panel de color fuera de la vista (arriba) */
        transform: translateY(-100%) !important;
    }

    .team-photo-item:hover .overlay-content {
        /* Mantiene el texto oculto */
        opacity: 0 !important;
    }

    /* --- 10. SECCIÓN PRESS LIST --- */
    
    .press-header {
        /* Forzamos que el título empiece en la columna 1 y ocupe las 12 */
        grid-column: 1 / span 12 !important;
        /* Damos un espacio entre el título y la lista que quedará abajo */
        margin-bottom: var(--space-m); 
    }

    .press-list {
        /* Hacemos que la lista deje de empezar en la columna 4 y ahora ocupe todo el ancho */
        grid-column: 1 / span 12 !important;
    }

    /* --- 11. AJUSTES DE ESPACIADO (PADDINGS) --- */

    /* Reducimos el padding de XL a M en la sección de prensa y team intro */
    .press-list-section.py-xl,
    .team-intro-section.theme-light.py-xl {
        padding-top: var(--space-l) !important;
        padding-bottom: var(--space-l) !important;
    }

    .press-item {
    display: grid;
    /* Cambio de proporciones: Publicación (4), Artículo (6), Año (1) */
    grid-template-columns: 4fr 6fr 1fr; 
    column-gap: var(--grid-gap);
    align-items: baseline;
    padding: var(--space-m) 0;
    border-top: 1px solid var(--rec-border);
    text-decoration: none;
    transition: background-color 0.4s var(--ease-ui);
}

}

@media screen and (max-width: 800px) {
    /* 1. Ajuste del contenedor de la sección para espacio inferior mediano */
    .visit-section {
        padding-bottom: var(--space-l) !important; /* Espacio mediano abajo */
    }

    .visit-section .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--grid-gap);
        row-gap: var(--space-s); /* Reducimos el espacio entre filas de la grilla */
        align-items: start;
    }

    .visit-info-wrapper {
        display: contents; 
    }

    /* Fila 1: Texto */
    .visit-label {
        grid-column: 1 / span 3;
        grid-row: 1;
        padding-top: 4px;
    }

    .visit-details {
        grid-column: 5 / span 8;
        grid-row: 1;
    }

    /* Fila 2: Carrusel - Eliminamos margen excesivo para pegarlo a la fila 1 */
    .visit-gallery-col {
        grid-column: 1 / span 12 !important;
        grid-row: 2;
        width: 100%;
        margin-top: 0; /* Eliminamos el margen superior para cerrar el espacio */
        padding-top: var(--space-xs); /* Un toque mínimo de aire opcional */
    }

    /* Ajuste de tamaño de los items del carrusel */
    .gallery-item {
        width: calc((100vw - (var(--page-margin) * 2) - (var(--grid-gap) * 11)) / 12 * 7);
    }

    /* Eliminamos cualquier margen que el navegador ponga por defecto a los párrafos */
.visit-details p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4; /* Ajusta esto si quieres que las líneas estén más o menos juntas */
}

/* Si quieres que el primer párrafo tenga un aire mínimo respecto al segundo, 
   puedes usar un padding-bottom muy pequeño solo al primero */
.visit-details p:first-child {
    padding-bottom: 10px !important;
}
}

@media screen and (max-width: 800px) {
    /* 1. Reset total del contenedor */
    .next-project-hero .hero-content {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr); 
        justify-items: start; /* Esto alinea TODO a la izquierda por defecto */
        align-items: start;
        row-gap: 4px;
        text-align: left;
    }

    .btn-editorial {
        white-space: nowrap;
        width: max-content;
        display: inline-flex;
        justify-content: flex-start;
        padding-left: 0; /* Asegura alineación total a la izquierda */
    }

    /* 2. El título: forzamos que empiece en la primera columna */
    .hero-title {
        grid-row: 2;
        grid-column: 1 / span 12 !important; /* Desde la línea 1 hasta el final */
        text-align: left !important;
        margin-left: 0 !important; /* Eliminamos cualquier margen que lo centre */
        padding-left: 0 !important;
        display: block;
        width: 100%;
    }

    /* 3. Aseguramos que los botones también respeten sus esquinas */
    .hero-link-view {
        grid-row: 1;
        grid-column: 1 / span 6;
        justify-self: start;
    }

    .hero-link-work {
        grid-row: 1;
        grid-column: 7 / span 6;
        justify-self: end; /* Este es el único que se queda a la derecha */
        text-align: right;
    }
}