/* ==========================================
   1. Estilos Generales e Identidad Visual 
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Playfair Display', 'Didot', 'Georgia', serif; /* Tipografía editorial */
}

body {
    background-color: #f2f2f2; /* Fondo gris muy claro/hueso de tu boceto */
    color: #000000;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Mantiene la app fija para el Home/Mapa */
}

/* Encabezado y Menú Tab a la Derecha */
header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 60px 20px 60px;
}

.brand {
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.subtitle {
    font-family: sans-serif;
    font-size: 12px;
    color: #555;
    margin-top: 5px;
}

.tabs-menu {
    display: flex;
    gap: 30px;
}

.tab-btn {
    background: none;
    border: none;
    font-size: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    padding-bottom: 5px;
    color: #777;
    transition: color 0.3s;
}

.tab-btn:hover, .tab-btn.active {
    color: #000;
    border-bottom: 2px solid #000; /* Línea indicadora debajo del menú */
}

/* Control de visualización de pestañas */
.tab-content {
    display: none;
    height: calc(100vh - 120px);
    padding: 0 60px;
}

.tab-content.active {
    display: block;
}

/* 💡 OPTIMIZADO: Muro sin bordes de pantalla para que las fotos vayan de lado a lado */
#photos.tab-content.active {
    display: block;
    overflow-y: auto; 
    padding: 0 !important; /* Fuerza a las fotos a tocar los límites de la ventana */
}


/* ==========================================
   2. Estructura Dashboard 50/50 para el HOME 
   ========================================== */
.dashboard-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mitad y mitad */
    gap: 40px;
    height: 100%;
    padding-bottom: 40px;
}

#mapa-contenedor {
    width: 100%;
    height: 100%;
    border: 1px solid #000; /* Borde negro fino como los recuadros de tus fotos */
    background-color: #ddd;
}

#map {
    width: 100%;
    height: 100%;
}

/* Panel de Información derecho */
.info-contenedor {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 20px;
}

#panel-titulo {
    font-size: 65px; /* Gran título de tu boceto */
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin-top: 20px;
}

#panel-cuerpo {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    max-width: 450px;
    margin-bottom: auto;
    margin-top: 30px;
}

.footer-link {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 20px;
}


/* ==========================================
   3. NUEVO: Muro Masonry (6 Columnas Continuas)
   ========================================== */
.grid-pinterest {
    column-count: 6;       /* Forzamos la cuadrícula horizontal a 6 bloques */
    column-gap: 0;         /* Cero separación hacia los lados */
    width: 100%;
    
    /* 🌟 CAMBIO: Alineación perfecta con el Header */
    padding: 0 60px;       /* 60px a los lados para alinearse con la 'F' de Filsation */
    margin-top: 20px;      /* Un pequeño respiro abajo de la línea del menú */
    
    display: inline-block; 
    text-align: left;
}

.tarjeta-foto-pinterest {
    position: relative;
    margin-bottom: 0;      /* Cero separación hacia abajo */
    break-inside: avoid;   /* Evita que el navegador corte una foto a la mitad */
    cursor: pointer;
    overflow: hidden;
    background-color: #000;

    /* 🌟 Límitador de seguridad para cuando hay una o pocas fotos */
    max-width: calc((100vw - 120px) / 6);
}

.tarjeta-foto-pinterest img {
    width: 100%;
    height: auto;          /* Mantiene perfectamente la proporción nativa de la captura */
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Zoom suave y sutil al pasar por encima */
.tarjeta-foto-pinterest:hover img {
    transform: scale(1.04);
}

/* Capa hover: Solo oscurece el fondo y muestra el título */
.capa-hover {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tarjeta-foto-pinterest:hover .capa-hover {
    opacity: 1;
}

.capa-hover h4 {
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.3;
}


/* ==========================================
   4. NUEVO: Lightbox Flotante Editorial 50/50
   ========================================== */
.lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(242, 242, 242, 0.95); /* Color de fondo idéntico al tuyo con opacidad */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 10000;
}

.lightbox.activo {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-contenido {
    background: #ffffff;
    display: flex;
    max-width: 1100px;
    width: 90%;
    max-height: 80vh;
    border: 1px solid #000000; /* Marco icónico de Filsation */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    position: relative;
}

.lightbox-col-izquierda {
    flex: 1.4;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-col-izquierda img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox-col-derecha {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.lightbox-col-derecha h2 {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.badge {
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555;
    background: #e5e5e5;
    padding: 4px 8px;
    align-self: flex-start;
    margin-bottom: 25px;
}

.lightbox-col-derecha p {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* Botón de cierre posicionado de forma absoluta arriba a la derecha */
.cerrar-btn {
    position: absolute;
    top: 30px;
    right: 50px;
    color: #000000;
    font-size: 50px;
    font-weight: 200;
    cursor: pointer;
    line-height: 1;
    z-index: 10001;
    transition: transform 0.2s ease;
}

.cerrar-btn:hover {
    transform: scale(1.1);
}


/* ==========================================
   5. NUEVO: Adaptación de Columnas de Fotos
   ========================================== */
@media (max-width: 1200px) { .grid-pinterest { column-count: 4; } }
@media (max-width: 800px) {  
    .grid-pinterest { column-count: 2; } 
    .lightbox-contenido { flex-direction: column; max-height: 90vh; }
    .lightbox-col-izquierda { max-height: 50vh; }
    .lightbox-col-derecha { padding: 30px; }
    .cerrar-btn { top: 15px; right: 25px; color: #fff; } /* Cambia a blanco si queda sobre la foto en móvil */
}
@media (max-width: 480px) {  .grid-pinterest { column-count: 1; } }

/* Contenedor dividido en 2 columnas */
.blog-split-container {
    display: flex;
    width: 100%;
    height: calc(100vh - 140px); /* Resta la altura del header para que no cree scroll general */
    padding: 0 60px;             /* Alineado milimétricamente con 'Filsation' */
    gap: 40px;
    box-sizing: border-box;
    margin-top: 20px;
}

/* 🏢 COLUMNA IZQUIERDA: Lectura del artículo completo */
.blog-articulo-completo {
    flex: 1;                     /* Ocupa la mayor parte del espacio izquierdo */
    height: 100%;
    overflow-y: auto;            /* 🌟 Habilita el scroll independiente solo aquí */
    padding-right: 20px;
}

/* Estilos internos del artículo completo */
.blog-articulo-completo img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    margin-bottom: 20px;
}

.blog-articulo-completo h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-family: inherit;
}

.blog-articulo-completo .meta-fecha {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 20px;
}

.blog-articulo-completo .cuerpo-texto {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}

/* 📑 COLUMNA DERECHA: Lista lateral fija */
.blog-lista-lateral {
    width: 350px;                /* Ancho fijo para las miniaturas estilo barra lateral */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-lista-lateral h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.blog-lista-contenedor {
    flex: 1;
    overflow-y: auto;            /* Por si tienes demasiados artículos en la lista */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 🎴 TARJETAS MINIATURA (Derecha) */
.tarjeta-miniatura {
    display: flex;
    gap: 15px;
    cursor: pointer;
    padding: 10px;
    transition: background 0.2s ease;
}

.tarjeta-miniatura:hover {
    background-color: #f5f5f5;
}

.tarjeta-miniatura.activa {
    background-color: #ebebeb;   /* Destaca cuál artículo se está leyendo */
    border-left: 3px solid #000;
}

.tarjeta-miniatura img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.tarjeta-miniatura .info-miniatura h4 {
    font-size: 0.95rem;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.tarjeta-miniatura .info-miniatura span {
    font-size: 0.8rem;
    color: #777;
}

/* Personalizar barra de scroll fina y elegante */
.blog-articulo-completo::-webkit-scrollbar,
.blog-lista-contenedor::-webkit-scrollbar {
    width: 6px;
}
.blog-articulo-completo::-webkit-scrollbar-thumb,
.blog-lista-contenedor::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}