/* ========================================= */
/* 1. CONFIGURACIÓN GENERAL & VARIABLES      */
/* ========================================= */

:root {
    /* Paleta "Premium Industrial" */
    --color-fondo: #FFFFFF;
    --color-fondo-secundario: #FAFAFA;
    --color-texto: #1A1A1A; /* Negro */
    --color-texto-secundario: #555;
    --color-borde: #EAEAEA;
    
    /* Color de Acento (Naranja) */
    --color-acento: #FF6600; 
    --color-acento-hover: #E65C00;

    /* Fuentes y Layout */
    --fuente-principal: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ancho-maximo: 1200px;
    --radio-borde: 6px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-principal);
    background: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
}

img {
    width: 100%;
    display: block;
}

.container {
    width: 90%;
    max-width: var(--ancho-maximo);
    margin: auto;
    padding: 0 20px; /* Margen de seguridad en móviles */
}

/* ========================================= */
/* 2. NAVBAR                                 */
/* ========================================= */
.navbar {
    background: rgba(230, 245, 255, 0.9); /* Celeste casi transparente */
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-borde);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
.logo {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-texto);
    text-decoration: none;
}
.menu {
    display: flex;
    gap: 30px;
    align-items: center;
}
.menu a {
    text-decoration: none;
    color: var(--color-texto-secundario);
    font-weight: 500;
    transition: color 0.2s;
}
.menu a:hover,
.menu a.active {
    color: var(--color-texto);
}

/* Botón Naranja */
.btn {
    padding: 10px 20px;
    background: var(--color-acento);
    color: #FFF !important;
    border-radius: var(--radio-borde);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    display: inline-block;
}
.btn:hover {
    background: var(--color-acento-hover);
}
.menu-toggle { display: none; } 

/* ========================================= */
/* 3. HERO SLIDER (INDEX)                    */
/* ========================================= */
.hero-slider-container {
    position: relative;
    height: 70vh; 
    min-height: 450px;
    overflow: hidden;
    background: #111;
}
.hero-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s ease-in-out; 
}
.hero-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;
}
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #FFF;
    max-width: 700px;
    padding: 20px;
}
.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
}
.hero-content p {
    font-size: 18px;
}
/* Botones Hero */
.hero-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-texto);
    cursor: pointer;
    transition: background 0.2s;
}
.hero-slider-btn:hover { background: #FFF; }
.hero-slider-btn.prev { left: 15px; }
.hero-slider-btn.next { right: 15px; }

/* ========================================= */
/* 4. HUB DE SOLUCIONES (3 TARJETAS)         */
/* ========================================= */
.hub-soluciones {
    padding: 80px 0;
    background: var(--color-fondo-secundario);
}
.hub-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px;
}
.hub-card {
    text-decoration: none;
    color: var(--color-texto);
    background: var(--color-fondo);
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}
.hub-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.hub-card-img {
    height: 250px;
    background-size: cover;
    background-position: center;
}
.hub-card-content {
    padding: 25px;
    flex-grow: 1; 
}
.hub-card-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}
.hub-card-content p {
    font-size: 16px;
    color: var(--color-texto-secundario);
    margin-bottom: 20px;
}
.hub-card-link {
    font-weight: 600;
    color: var(--color-acento);
}
.hub-card:hover .hub-card-link {
    color: var(--color-acento-hover);
}

/* ========================================= */
/* 5. SECCIÓN FEATURES (ZIG ZAG)             */
/* ========================================= */
.features-section {
    padding: 80px 0;
    background: var(--color-texto); /* Fondo Negro */
    color: #FFF;
}
.feature-row {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px;
    align-items: center;
    margin-bottom: 50px;
}
.feature-row:last-child { margin-bottom: 0; }

.feature-text h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}
.feature-text p {
    font-size: 16px;
    color: #AAA;
    line-height: 1.7;
    max-width: 500px;
}
.feature-image {
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radio-borde);
    order: -1; /* En móvil, imagen primero */
}

/* ========================================= */
/* 6. SECCIÓN MARCAS Y CONTACTO (INDEX)      */
/* ========================================= */
.brands-contact {
    padding: 80px 0;
    background: #FFFFFF;
    border-top: 1px solid var(--color-borde);
}
.brands-contact-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 50px;
}
.brands-column h3, .contact-column h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-texto);
}
.brands-column p {
    font-size: 16px;
    color: var(--color-texto-secundario);
    margin-bottom: 30px;
}
.logos-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.brand-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.brand-item img {
    max-height: 60px;
    width: auto;
}
.brand-item span {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-texto);
}
/* Lista de contacto */
.contact-list-icons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-list-icons li a,
.contact-list-icons li span {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-texto-secundario);
    font-size: 16px;
    font-weight: 500;
    transition: color 0.2s;
}
.contact-list-icons li a:hover { color: var(--color-acento); }
.contact-list-icons svg {
    width: 24px;
    height: 24px;
    color: var(--color-acento);
}

/* ========================================= */
/* 7. PÁGINAS INTERNAS: HEADERS & CATALOGO   */
/* ========================================= */
.page-header-minimal {
    padding: 60px 0;
    border-bottom: 1px solid var(--color-borde);
}
.page-header-minimal h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
}
.page-header-minimal p {
    font-size: 18px;
    color: var(--color-texto-secundario);
    max-width: 600px;
}

/* ========================================= */
/* 8. CARRUSEL DE PRODUCTOS (CASAS MODULARES)*/
/* ========================================= */
.product-slider-section {
    padding: 50px 0 80px 0;
    background: var(--color-fondo);
}
.product-slider-container {
    position: relative;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    background: #FFF;
    border-radius: var(--radio-borde);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid var(--color-borde);
}
.product-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.product-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column; /* Móvil: Columna */
}
.product-slide-img {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}
.product-slide-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.model-tag {
    background: var(--color-texto-secundario);
    color: #FFF;
    font-size: 12px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-weight: 600;
    letter-spacing: 1px;
}
.product-slide-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-texto);
}
.product-slide-content p {
    color: var(--color-texto-secundario);
    margin-bottom: 20px;
    line-height: 1.6;
}
.model-features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.model-features-list li {
    color: var(--color-texto);
    font-weight: 500;
    margin-bottom: 8px;
}
/* Botones Product Slider */
.product-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #FFF;
    border: 1px solid var(--color-borde);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-texto);
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.2s;
    z-index: 10;
}
.product-slider-btn:hover {
    background: var(--color-acento);
    color: #FFF;
    border-color: var(--color-acento);
}
.product-slider-btn.prev { left: 20px; }
.product-slider-btn.next { right: 20px; }


/* ========================================= */
/* 9. CARACTERÍSTICAS GENERALES (ÍCONOS)     */
/* ========================================= */
.features-icons-section {
    padding: 80px 0;
    background: #F0F4F8; /* Gris azulado opaco */
}
.section-title-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}
.section-title-center h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}
.features-icons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.feature-icon-card {
    background: #FFF;
    padding: 30px;
    border-radius: var(--radio-borde);
    text-align: center;
    border: 1px solid var(--color-borde);
    transition: transform 0.3s;
}
.feature-icon-card:hover { transform: translateY(-5px); }

.icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 102, 0, 0.1); /* Naranja suave */
    color: var(--color-acento);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.icon-circle svg {
    width: 30px;
    height: 30px;
}
.feature-icon-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.feature-icon-card p {
    font-size: 15px;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

/* --------------------------- */
/* NUEVO SLIDER MOSAICO (Construcción) */
/* --------------------------- */

/* Layout interno del slide: Flexbox para separar Info y Galería */
.mosaic-slide {
    display: flex;
    flex-direction: column; /* Móvil: Columna */
    width: 100%;
    height: 100%;
    background: #1A1A1A; /* Fondo oscuro para el slide */
}

/* Columna Izquierda: Información */
.mosaic-info {
    padding: 30px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* Ocupa espacio disponible */
}

.mosaic-info h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #FFF;
}

.mosaic-info h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-acento); /* Naranja */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mosaic-info p {
    font-size: 16px;
    color: #CCC;
    line-height: 1.6;
    margin-bottom: 25px;
}

.project-tags {
    list-style: none;
    padding: 0;
}
.project-tags li {
    display: inline-block;
    margin-right: 15px;
    font-size: 14px;
    color: #999;
    font-weight: 500;
}

/* Columna Derecha: Galería de Imágenes (Grid) */
.mosaic-gallery {
    flex: 1.5; /* La galería ocupa más espacio que el texto en PC */
    display: grid;
    grid-template-columns: 2fr 1fr; /* Imagen grande (2 partes) | Chicas (1 parte) */
    grid-template-rows: 1fr 1fr;    /* 2 filas para las chicas */
    gap: 5px; /* Espacio finito entre fotos */
    height: 300px; /* Altura fija en móvil */
}

.gallery-main {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* Ocupa las 2 filas de alto */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.gallery-side {
    display: contents; /* Para que los hijos sean parte del grid padre */
    /* O podemos usar un div contenedor si display:contents da problemas en navegadores viejos, pero para grid simple: */
}

/* Si usamos display: contents arriba, los thumbs son hijos directos del grid */
/* Pero para simplificar, mejor hagamos esto: */
.mosaic-gallery {
    display: flex;
    height: 300px;
}
.gallery-main {
    width: 70%;
    background-size: cover;
    background-position: center;
}
.gallery-side {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 5px;
}
.gallery-thumb {
    flex: 1; /* Ocupan 50% de altura cada una */
    background-size: cover;
    background-position: center;
    width: 100%;
}


/* RESPONSIVE ESCRITORIO */
@media (min-width: 768px) {
    .mosaic-slide {
        flex-direction: row; /* Lado a lado */
    }
    
    .mosaic-info {
        width: 35%;
        padding: 60px;
        text-align: left;
    }
    
    .mosaic-gallery {
        width: 65%;
        height: 100%; /* Ocupa toda la altura del slide */
        flex: unset; /* Reseteamos el flex del móvil */
    }
    
    /* Ajuste de altura del slider para que se vea bien el mosaico */
    .slider-container {
        aspect-ratio: 21 / 9; /* Más panorámico en PC */
    }
}

/* --------------------------- */
/* PÁGINA GESTIÓN (TIMELINE RESPONSIVE) */
/* --------------------------- */

.process-section {
    padding: 80px 0;
    background: #FFF;
}

.process-section h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.process-section > .container > p {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px auto;
    color: var(--color-texto-secundario);
}

/* --- ESTILOS BASE (MÓVIL / VERTICAL) --- */

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 20px; /* Espacio para la línea a la izq */
}

/* La LÍNEA (Vertical por defecto) */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px; 
    width: 2px;
    background: var(--color-borde);
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
    padding-left: 80px; /* Espacio para el contenido a la derecha del círculo */
}
.timeline-item:last-child { margin-bottom: 0; }

/* El Marcador (Círculo) */
.timeline-marker {
    position: absolute;
    top: 0;
    left: 20px; /* Centrado sobre la línea vertical */
    width: 40px;
    height: 40px;
    background: var(--color-acento);
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    z-index: 1;
    border: 4px solid #FFF;
    box-shadow: 0 0 0 1px var(--color-borde);
}

/* El Contenido (Tarjeta) */
.timeline-content {
    background: var(--color-fondo-secundario);
    padding: 25px;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde);
    transition: transform 0.3s;
}
.timeline-item:hover .timeline-content {
    border-color: var(--color-acento);
}

.timeline-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-texto);
}
.timeline-content p {
    font-size: 14px;
    color: var(--color-texto-secundario);
    line-height: 1.6;
    margin: 0;
}


/* --- ESTILOS ESCRITORIO (HORIZONTAL) --- */
@media (min-width: 992px) {
    
    .timeline-container {
        display: flex; /* Pone los items uno al lado del otro */
        justify-content: space-between;
        padding-left: 0; /* Saca el padding izquierdo */
        max-width: 1200px; /* Ancho completo */
        gap: 20px;
    }

    /* La LÍNEA se vuelve HORIZONTAL */
    .timeline-container::before {
        width: 100%;
        height: 2px;
        left: 0;
        top: 20px; /* Alineada al centro de los círculos */
        bottom: auto;
    }

    .timeline-item {
        flex: 1; /* Todos ocupan el mismo ancho */
        padding-left: 0; /* Saca el padding izquierdo */
        padding-top: 60px; /* Agrega espacio arriba para el círculo */
        margin-bottom: 0;
        text-align: center; /* Centra el texto */
    }

    /* El Marcador se centra arriba */
    .timeline-marker {
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }

    /* Efecto Hover hacia arriba */
    .timeline-item:hover .timeline-content {
        transform: translateY(-5px); 
    }
    
    /* Flechita decorativa arriba de la caja (Opcional, queda lindo) */
    .timeline-content {
        position: relative;
    }
    .timeline-content::after {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: var(--color-fondo-secundario);
        border-left: 1px solid var(--color-borde);
        border-top: 1px solid var(--color-borde);
    }
}

/* Ajuste Mobile Pequeño */
@media (max-width: 600px) {
    .timeline-container { padding-left: 0; }
    .timeline-container::before { left: 20px; }
    .timeline-marker { left: 0; }
    .timeline-item { padding-left: 60px; }
}


/* ========================================= */
/* 12. PÁGINA DETALLE DE PRODUCTO            */
/* ========================================= */
.product-header {
    padding: 40px 0;
    background: #1A1A1A;
    border-bottom: 1px solid var(--color-borde);
}
.breadcrumb-link {
    text-decoration: none;
    color: var(--color-texto-secundario);
    font-weight: 500;
    margin-bottom: 15px;
    display: inline-block;
}
.breadcrumb-link:hover { color: var(--color-acento); }
.product-header h1 {
    font-size: 42px;
    font-weight: 700;
    margin: 0;
    text-align: center;
    color: #FFFFFF;
}
.product-subtitle {
    font-size: 18px;
    color: #AAAAAA;
    margin-top: 10px;
    text-align: center;
}
.product-detail-layout { padding: 80px 0; }
.product-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 40px;
}
.gallery-main-image img {
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde);
}
.product-info h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}
.product-info p {
    font-size: 16px;
    color: var(--color-texto-secundario);
    line-height: 1.7;
    margin-bottom: 30px;
}
.product-info h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 10px;
}
.spec-list { list-style: none; padding: 0; }
.spec-list li {
    font-size: 16px;
    color: var(--color-texto-secundario);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-borde);
}
.spec-list li:last-child { border-bottom: none; }
.spec-list li strong {
    color: var(--color-texto);
    margin-right: 5px;
}

/* ========================================= */
/* 13. ESPECIFICACIONES GENERALES (CATÁLOGO) */
/* ========================================= */
.specifications-section {
    padding: 80px 0;
    background: var(--color-fondo-secundario);
}
.specifications-section h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}
.specifications-section > .container > p {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
    color: var(--color-texto-secundario);
}
.spec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.spec-item {
    background: var(--color-fondo); /* Fondo blanco en las cajas */
    border: 1px solid var(--color-borde);
    padding: 25px;
    border-radius: var(--radio-borde);
}
.spec-item h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.spec-item p {
    font-size: 15px;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}


/* ========================================= */
/* 14. FOOTER GLOBAL                         */
/* ========================================= */
.footer {
    background: var(--color-texto);
    color: #AAA;
    text-align: center;
    padding: 30px 0;
}


/* ========================================= */
/* 15. MEDIA QUERIES (RESPONSIVE)            */
/* ========================================= */

/* MÓVIL (Hasta 820px) */
@media (max-width: 820px) {
    .menu-toggle {
        display: block;
        font-size: 30px;
        cursor: pointer;
        color: var(--color-texto);
    }
    .menu {
        display: none; 
        flex-direction: column;
        background: var(--color-fondo);
        padding: 20px;
        position: absolute;
        top: 70px; 
        right: 20px;
        left: 20px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-borde);
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        z-index: 999;
        gap: 15px; 
    }
    .menu.active {
        display: flex;
    }
    .menu a {
        padding: 10px 0;
        text-align: center;
        width: 100%;
    }
}

/* TABLET Y ESCRITORIO (Desde 768px) */
@media (min-width: 768px) {
    .hub-grid {
        grid-template-columns: repeat(3, 1fr); 
    }
    .brands-contact-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 80px;
    }
    .logos-wrapper {
        flex-direction: row; 
        gap: 40px;
    }
    .contact-column {
        padding-left: 60px; 
    }
    .feature-row {
        grid-template-columns: 1fr 1fr; 
        gap: 50px;
    }
    .feature-text { order: 1; }
    .feature-image { order: 2; }
    .feature-row:nth-child(even) .feature-text { order: 2; }
    .feature-row:nth-child(even) .feature-image { order: 1; }
    
    /* Product Slider Horizontal */
    .product-slide {
        flex-direction: row;
    }
    .product-slide-img {
        width: 50%;
        height: auto;
        min-height: 400px;
    }
    .product-slide-content {
        width: 50%;
        padding: 60px;
    }
    
    /* Features Grid (Iconos) */
    .features-icons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Gestión (Proceso) */
    .process-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 30px;
    }
    
    /* Detalle Producto */
    .product-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 50px;
    }
}

/* PANTALLAS GRANDES (Desde 1024px) */
@media (min-width: 1024px) {
    .features-icons-grid {
        grid-template-columns: repeat(4, 1fr); 
    }
    .spec-grid {
        grid-template-columns: 1fr 1fr 1fr; /* 3 columnas para specs */
    }
}

/* TÍTULOS EN MÓVIL */
@media (max-width: 600px) {
    .hero-content h1,
    .page-header-minimal h1,
    .product-header h1 {
        font-size: 36px;
    }
    .hero-content p,
    .page-header-minimal p,
    .product-subtitle {
        font-size: 16px;
    }
    .spec-grid {
        grid-template-columns: 1fr; /* Asegura 1 columna en specs móvil */
    }
}

/* --------------------------- */
/* GRILLA DE MODELOS (ESTILO NUEVO) */
/* --------------------------- */

.models-grid-section {
    padding: 80px 0;
    background-color: #1A1A1A; /* Fondo Oscuro (casi negro) */
}

.models-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 Columna en Móvil */
    gap: 40px;
}

/* Tarjeta Grande */
.model-card-large {
    background: #FFFFFF;
    border-radius: var(--radio-borde);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
}
.model-card-large:hover {
    transform: translateY(-5px); /* Efecto sutil al pasar el mouse */
}

/* Imagen Header */
.model-img-header {
    height: 280px; /* Imagen grande */
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Etiqueta sobre la imagen (opcional) */
.tag-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Cuerpo de la tarjeta */
.model-body {
    padding: 25px;
    text-align: center; /* Texto centrado como en la foto */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.model-body h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-texto);
}

/* Iconos (Cama, Baño, Metros) */
.model-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--color-texto);
    font-size: 15px;
}

/* Descripción (Lo que pediste agregar) */
.model-desc {
    font-size: 15px;
    color: var(--color-texto-secundario);
    margin-bottom: 25px;
    line-height: 1.6;
}
/* Botón de Modelo (Estilo ARQ Original) */
.btn-model-full {
    display: inline-block; /* Ya no ocupa todo el ancho */
    width: auto;          /* El ancho se ajusta al texto */
    padding: 10px 30px;   /* Un poco más de aire a los costados */
    
    background: var(--color-acento); /* Vuelve al Naranja (#FF6600) */
    color: #FFF;          /* Texto Blanco */
    
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radio-borde); /* Bordes redondeados (6px) */
    
    /* Alineación */
    margin-top: auto;     /* Lo empuja al fondo de la tarjeta */
    align-self: center;   /* Lo centra horizontalmente */
    
    transition: all 0.2s;
}

.btn-model-full:hover {
    background: var(--color-acento-hover); /* Naranja más oscuro */
    color: #FFF;
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3); /* Sombra naranja suave */
}


/* Responsive Escritorio */
@media (min-width: 768px) {
    .models-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 Columnas */
    }
}

/* --------------------------- */
/* HERO DE VIDEO (CASAS MODULARES) */
/* --------------------------- */

.video-hero-section {
    position: relative;
    height: 60vh; /* Altura del hero (60% de la pantalla) */
    min-height: 400px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111; /* Color de fondo de respaldo */
}

/* El video ocupando todo el fondo */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Clave: hace que el video cubra sin deformarse */
    z-index: 0;
}

/* Capa oscura sobre el video */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Oscurecimiento al 60% */
    z-index: 1;
}

/* El texto por encima de todo */
.video-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #FFF;
}

.video-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Sombra suave para leer mejor */
}

.video-content p {
    font-size: 20px;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/* Ajuste para móviles */
@media (max-width: 600px) {
    .video-hero-section {
        height: 50vh; /* Un poco más chico en celular */
    }
    .video-content h1 {
        font-size: 36px;
    }
    .video-content p {
        font-size: 16px;
    }
}

/* --------------------------- */
/* PORTFOLIO VERTICAL (OBRAS)  */
/* --------------------------- */

.projects-portfolio-section {
    padding: 80px 0;
    background: #F5F5F5; /* Fondo gris muy suave para diferenciar */
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Espacio entre proyecto y proyecto */
}

/* Tarjeta de Proyecto Ancha */
.project-card-wide {
    background: #FFF;
    border-radius: var(--radio-borde);
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Sombra suave */
    border: 1px solid var(--color-borde);
    
    display: flex;
    flex-direction: column; /* Móvil: Columna */
}

/* Columna de Texto */
.project-info-col {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-category {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-acento); /* Naranja */
    font-weight: 700;
    margin-bottom: 10px;
}

.project-info-col h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--color-texto);
}

.project-info-col h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-texto-secundario);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-borde);
}

.project-info-col p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.project-specs {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.project-specs li {
    background: #F0F4F8;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-texto);
}

/* Columna de Galería */
.project-gallery-col {
    padding: 20px; /* Un poco de padding para que parezca un marco */
    background: #FAFAFA;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gallery-main-img {
    width: 100%;
    height: 250px; /* Altura imagen principal */
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.gallery-thumbnails {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 15px;
}

.thumb-img {
    height: 120px; /* Altura miniaturas */
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    cursor: pointer; /* Sugiere que se podría ampliar en el futuro */
    transition: opacity 0.2s;
}
.thumb-img:hover {
    opacity: 0.8;
}


/* RESPONSIVE ESCRITORIO */
@media (min-width: 900px) {
    .project-card-wide {
        flex-direction: row; /* Lado a lado */
        min-height: 450px;
    }

    .project-info-col {
        width: 40%; /* Texto ocupa el 40% */
        padding: 50px;
    }

    .project-gallery-col {
        width: 60%; /* Fotos ocupan el 60% */
        padding: 0; /* Sin padding interno para look 'full bleed' o ajustar a gusto */
        display: grid;
        grid-template-columns: 2fr 1fr; /* Principal grande | Miniaturas columna */
        gap: 5px;
    }
    
    /* Reorganizamos el Grid de fotos para escritorio */
    .gallery-main-img {
        height: 100%; /* Ocupa todo el alto */
        border-radius: 0;
    }
    
    .gallery-thumbnails {
        grid-template-columns: 1fr; /* Una abajo de la otra */
        grid-template-rows: 1fr 1fr;
        gap: 5px;
    }
    
    .thumb-img {
        height: 100%; /* Ocupa la mitad de la altura cada una */
        border-radius: 0;
    }
}

/* --------------------------- */
/* PÁGINA QUIÉNES SOMOS        */
/* --------------------------- */

/* Sección Estudios */
.about-studios-section {
    padding: 80px 0;
    background: #F0F4F8; /* Gris azulado suave */
}

.studios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.studio-card {
    background: #FFF;
    padding: 40px;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde);
    text-align: center;
    transition: transform 0.3s;
}
.studio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.studio-icon {
    width: 70px;
    height: 70px;
    background: var(--color-acento);
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.studio-icon svg {
    width: 35px;
    height: 35px;
}

.studio-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--color-texto);
}

.studio-role {
    font-size: 14px;
    color: var(--color-acento);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.studio-card hr {
    border: 0;
    border-top: 1px solid var(--color-borde);
    margin: 20px auto;
    width: 50px;
}

.studio-desc {
    font-size: 16px;
    color: var(--color-texto-secundario);
    margin-bottom: 30px;
    line-height: 1.6;
}

.studio-tasks {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0 auto;
    max-width: 300px; /* Para que no se estire demasiado */
}
.studio-tasks li {
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--color-texto);
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.studio-tasks li:last-child { border-bottom: none; }


/* Sección FAQ (Acordeón) */
.faq-section {
    padding: 80px 0;
    background: #FFF;
}

.faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-borde);
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-texto);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
    font-family: var(--fuente-principal); /* Asegurar fuente correcta en botones */
}

.faq-question:hover, .faq-question.active {
    color: var(--color-acento);
}

.faq-icon {
    font-size: 24px;
    font-weight: 400;
    color: var(--color-acento);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer p {
    padding-bottom: 20px;
    font-size: 16px;
    color: var(--color-texto-secundario);
    line-height: 1.6;
}


/* Responsive Escritorio */
@media (min-width: 768px) {
    .studios-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas */
        gap: 50px;
    }
}

/* --------------------------- */
/* PÁGINA DE PRODUCTO (Layout Sticky) */
/* --------------------------- */

.product-detail-layout {
    padding: 60px 0;
    background: #F0F4F8; /* Fondo muy suave para diferenciar */
}

/* Grid Principal */
.product-grid-sticky {
    display: grid;
    grid-template-columns: 1fr; /* Móvil: 1 columna */
    gap: 40px;
    align-items: start; /* Importante para el sticky */
}

/* --- COLUMNA IZQUIERDA (VISUALES) --- */
.product-visuals {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.visual-block {
    position: relative;
}

.visual-label {
    display: inline-block;
    background: var(--color-texto);
    color: #FFF;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.main-img {
    width: 100%;
    border-radius: var(--radio-borde);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Estilo específico para el Plano (Fondo blanco, borde técnico) */
.blueprint-container {
    background: #FFF; /* Papel blanco */
    padding: 20px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    text-align: center;
}
.blueprint-img {
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply; /* Truco: si el plano tiene fondo blanco, lo fusiona mejor */
}

/* Grilla de Fotos Reales */
.real-photos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.real-photos-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radio-borde);
    transition: transform 0.3s;
}
.real-photos-grid img:hover {
    transform: scale(1.02);
}


/* --- COLUMNA DERECHA (INFO) --- */
.product-info-sidebar {
    /* En móvil es estático */
}

.info-card {
    background: #FFF;
    padding: 30px;
    border-radius: var(--radio-borde);
    border: 1px solid var(--color-borde);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.info-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-texto);
}

.info-card p {
    font-size: 15px;
    color: var(--color-texto-secundario);
    line-height: 1.6;
    margin-bottom: 15px;
}

.divider {
    border: 0;
    border-top: 1px solid var(--color-borde);
    margin: 25px 0;
}

.info-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Lista de Datos Técnicos */
.tech-specs-list {
    list-style: none;
    padding: 0;
}
.tech-specs-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #EEE;
    font-size: 15px;
}
.tech-specs-list li:last-child {
    border-bottom: none;
}
.spec-label {
    color: var(--color-texto-secundario);
    font-weight: 500;
}
.spec-value {
    color: var(--color-texto);
    font-weight: 700;
    text-align: right;
}

/* Botón Descarga */
.btn-full {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}
.small-note {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0 !important;
}


/* --- RESPONSIVE ESCRITORIO (STICKY) --- */
@media (min-width: 900px) {
    .product-grid-sticky {
        grid-template-columns: 1.5fr 1fr; /* Visuales más anchos */
        gap: 60px;
    }

    /* Magia Sticky: La columna derecha se queda fija al scrollear */
    .product-info-sidebar {
        position: sticky;
        top: 100px; /* Se pega a 100px del techo (dejando lugar al navbar) */
    }
}