/* =========================================
   RESETEO Y VARIABLES GLOBALES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Evita el salto lateral por la barra de scroll */
    scrollbar-gutter: stable;
}

body {
    background-color: #F9A602;
    color: #8e1812; 
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

/* =========================================
   ESTRUCTURA UNIFICADA (HEADER Y MAIN)
   ========================================= */
.main-header, 
.main-content {
    max-width: 1400px; 
    margin: 0 auto; 
    width: 100%;
    padding-left: 4rem;
    padding-right: 4rem;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.main-content {
    padding-top: 6rem; 
    padding-bottom: 8rem;
}

/* =========================================
   NAVEGACIÓN
   ========================================= */
.nav-container { display: flex; align-items: center; gap: 1.5rem; }

/* El prefijo ahora es un enlace dentro de la lista */
.nav-prefix a { font-weight: 900; }

.nav-links { 
    display: flex; 
    gap: 1rem; 
    list-style: none; 
}

.nav-links li a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
.nav-links li a:hover { opacity: 0.7; }

.nav-links li:first-child a {
    font-weight: 900;
}

/* Esta es la regla que pone la línea roja */
.nav-links li.active a {
    border-bottom: 5px solid #8e1812; 
    padding-bottom: 2px;
}
.brand-logo { 
    font-size: 1.2rem; 
    font-weight: 400; 
    text-decoration: none; 
    color: inherit; 
    display: inline-block; 
    transition: opacity 0.3s ease; 
}
.brand-logo:hover {
    opacity: 0.7; 
}
.brand-logo span { font-weight: 700; }

/* =========================================
   SISTEMA DE CUADRÍCULA UNIFICADO
   ========================================= */
/* Agrupamos todas las grids (incluido home) para no repetir código */
.logo-grid, 
.proyectos-grid, 
.artwork-grid,
.bio-grid,
.home-grid {
    display: grid;
    grid-template-areas: 
        "home-text1 home-text1 home-icon artwork-text" /* <--- home-text1 se repite aquí */
        "grafico-text bio-text home-photo proyectos-text";
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 350px; 
    width: 100%;
}

/* Agrupamos todos los items para no repetir código */
.logo-item, 
.project-item, 
.artwork-item,
.bio-item,
.home-item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-right: 3px solid #8e1812;
    border-bottom: 3px solid #8e1812;
}

/* =========================================
   MAPAS DE CUADRÍCULA (GRID AREAS)
   ========================================= */
.logo-grid {
    grid-template-areas: 
        "theater delta eat folio-text"
        "logo-text natura bonche padel";
}

.proyectos-grid {
    grid-template-areas: 
        "img1  img2  img3  img4"
        "title title img5  img6";
}

.artwork-grid {
    grid-template-areas: 
        "artwork-title artwork-title art1 art2"
        "art3          art4          art5 art6";
}

.bio-grid {
    grid-template-areas: 
        "bio-text bio-text bio-text bio-title"
        "bio-img  bio-img  bio-img  bio-empty";
}

.home-grid {
    grid-template-areas: 
        "home-text1 home-text1 home-icon artwork-text"
        "grafico-text bio-text home-photo proyectos-text";
}

/* Estilos específicos de Biografía */
.bio-text-content {
    padding: 3rem 4rem; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important; 
    text-align: left;
}

.bio-text-content p {
    font-size: 1.35rem; 
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.bio-text-content p:last-child {
    margin-bottom: 0;
}

/* Estilos específicos del Home */
.home-item { padding: 2rem; text-align: center; } #dynamic-photo-container, #dynamic-icon-container { padding: 0; }
.big-typo-home { font-size: 3rem; font-weight: 400; letter-spacing: -1px; line-height: 1; color: #8e1812; }
.big-typo-home span { font-weight: 900; }
.section-title-home { color: #8e1812; font-size: 2rem; font-weight: 900; letter-spacing: -1px; text-transform: uppercase; text-align: center; width: 100%; }


/* =========================================
   COMPONENTES VISUALES Y ANIMACIONES HOVER
   ========================================= */
.logo-svg {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.logo-item:hover .logo-svg,
.home-item:hover .logo-svg {
    transform: scale(1.1); 
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: all 0.4s ease;
}

.project-item:hover .project-img,
.artwork-item:hover .project-img,
.home-item:hover .project-img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.big-typo, .projects-title, .section-title {
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1;
    color: #8e1812;
    text-align: center;
}

/* =========================================
   SISTEMA MODAL / LIGHTBOX (ACABADO PREMIUM)
   ========================================= */
.clickable-img { cursor: pointer; }

.obra-modal::backdrop {
    background-color: rgba(10, 10, 10, 0.733); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); 
    animation: fadeInBackdrop 0.4s ease forwards;
}

.obra-modal {
    margin: auto; 
    border: none; 
    background-color: #F9A602;
    color: #8e1812;
    width: 95%;
    max-width: 1400px; 
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    animation: modalScaleFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-container { position: relative; display: flex; flex-direction: column; max-height: 90vh; }

.close-btn {
    position: absolute; top: 1rem; right: 1rem; 
    background: transparent; color: #8e1812; 
    border: none; outline: none; font-size: 1.5rem; font-weight: 300; 
    display: flex; justify-content: center; align-items: center; 
    cursor: pointer; z-index: 10; transition: opacity 0.3s ease; 
}

.close-btn:focus { outline: none; }
.close-btn:hover { opacity: 0.5; transform: none; background: transparent; }

.modal-layout { display: flex; flex-direction: row; height: 100%; max-height: 90vh; }

.modal-img-wrapper {
    flex: 1.8; border-right: none; display: flex; justify-content: center; 
    align-items: center; overflow: hidden; background-color: #F9A602; 
}

.modal-img-wrapper img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; }

.modal-info {
    flex: 1.2; padding: 3.5rem 2.5rem; display: flex; flex-direction: column; 
    justify-content: flex-start; overflow-y: auto; 
}

#modal-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 1rem; line-height: 1; text-transform: uppercase; letter-spacing: -1px; }
#modal-desc { font-size: 1.05rem; line-height: 1.5; font-weight: 400; }

@keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalScaleFade { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeInImage { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
   CONTROL DE LÍNEAS (ARTEFACTOS) EN ESCRITORIO
   ========================================= */
@media (min-width: 769px) {
    /* Quitamos el borde derecho a la última columna en todas las grids */
    [style*="grid-area: folio-text"], [style*="grid-area: padel"],
    [style*="grid-area: img4"], [style*="grid-area: img6"],
    [style*="grid-area: art2"], [style*="grid-area: art6"],
    [style*="grid-area: bio-title"], [style*="grid-area: bio-empty"],
    [style*="grid-area: artwork-text"], [style*="grid-area: proyectos-text"] { 
        border-right: none; 
    }

   /* Quitamos el borde inferior a la última fila en todas las grids */
    [style*="grid-area: logo-text"], [style*="grid-area: natura"], [style*="grid-area: bonche"], [style*="grid-area: padel"],
    [style*="grid-area: title"], [style*="grid-area: img5"], [style*="grid-area: img6"],
    [style*="grid-area: art3"], [style*="grid-area: art4"], [style*="grid-area: art5"], [style*="grid-area: art6"],
    [style*="grid-area: bio-img"], [style*="grid-area: bio-empty"],
    [style*="grid-area: grafico-text"], [style*="grid-area: bio-text"], [style*="grid-area: home-photo"], [style*="grid-area: proyectos-text"] { 
        border-bottom: none; 
    }
}

/* =========================================
   PIE DE PÁGINA (FOOTER MINIMALISTA)
   ========================================= */
.main-footer {
    max-width: 1400px; margin: 0 auto; width: 100%;
    padding: 6rem 4rem 4rem 4rem; text-align: center;
}

.footer-content {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; 
    gap: 1.5rem; color: #8e1812; font-size: 1.1rem; font-weight: 400; 
}

.separator { opacity: 0.4; font-weight: 300; }
.back-to-top { font-weight: 700; transition: opacity 0.3s ease; text-decoration: none; }
.back-to-top:hover { opacity: 0.5; }

/* =========================================
   RESPONSIVIDAD MÓVIL (UNIFICADA PARA TODO EL SITIO)
   ========================================= */
@media (max-width: 768px) {
    .main-header, .main-content { padding: 2rem; }
    .main-header { flex-direction: column; gap: 1.5rem; }
    .nav-container, .nav-links { flex-direction: column; gap: 1rem; text-align: center; }

    .logo-grid, .proyectos-grid, .artwork-grid, .bio-grid, .home-grid {
        grid-template-areas: none; grid-template-columns: 1fr; grid-auto-rows: auto; 
    }
    
    .logo-item, .project-item, .artwork-item, .bio-item, .home-item {
        grid-area: auto !important; min-height: 250px;
        border-right: none !important; border-bottom: 3px solid #8e1812 !important; 
    }

    /* Agrupamos la eliminación del borde inferior en el último elemento visible */
    .logo-item:last-child, 
    .project-item:last-child, 
    .artwork-item:last-child,
    .home-item:last-child,
    [style*="grid-area: bio-img"] { 
        border-bottom: none !important; 
    }
    
    .big-typo, .projects-title, .section-title { font-size: 3rem; }

    [style*="grid-area: title"], [style*="grid-area: artwork-title"], [style*="grid-area: bio-title"] {
        order: -1; min-height: 150px; 
    }

    .bio-text-content { padding: 2rem !important; }
    [style*="grid-area: bio-empty"] { display: none !important; }
    
    .main-footer { padding: 4rem 2rem 2rem 2rem; }
    .footer-content { gap: 1rem; }

    /* Ajustes del Modal en móvil */
    .modal-layout { flex-direction: column; }
    .modal-img-wrapper { border-right: none; border-bottom: none; max-height: 40vh; }
    .modal-info { padding: 2.5rem 2rem; }
    #modal-title { font-size: 1.8rem; }
    .close-btn { top: 0.5rem; right: 0.5rem; width: 35px; height: 35px; font-size: 1.5rem; }
}