/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* TIPOGRAFÍA */
body {
    /* TIPOGRAFÍA ELEGANTE: Helvetica Neue con fallback a Arial para estabilidad */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    background-color: #ffffff;
    min-height: 100vh; 
}

a {
    text-decoration: none;
    color: #000;
    /* La transición global de color se mantiene, pero la de tamaño se añade abajo */
    transition: color 0.3s;
}


/* ------------------------------------- */
/* 1. ELEMENTOS FIJOS DE FONDO (Título y Contacto) */
/* ------------------------------------- */

/* Título (beñat manterola) - Fijo Arriba Izquierda */
.title {
    position: fixed; /* Posición fija */
    top: 25px;
    left: 50px;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2; 
    text-transform: lowercase; 
    cursor: pointer; 
    z-index: 1000; 
    /* Transición suave solo para el cambio de tamaño (font-size) */
    transition: font-size 0.3s ease-in-out; 
}

/* EFECTO HOVER: Aumenta la fuente del título al pasar el cursor */
.title:hover {
    font-size: 22px; 
}

/* Contacto (Email, Instagram) - Fijo Arriba Derecha */
.contact {
    position: fixed; /* Posición fija */
    top: 25px;
    right: 50px;
    font-size: 14px;
    display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    text-transform: lowercase; 
    z-index: 1000;
}

.contact a {
    margin-bottom: 2px;
    cursor: pointer;
    /* Transición para tamaño y color */
    transition: color 0.3s, font-size 0.3s ease-in-out;
}

/* EFECTO HOVER: Aumenta la fuente de los enlaces de contacto (de 14px a 16px) */
.contact a:hover {
    font-size: 16px;
}

/* ------------------------------------- */
/* 2. NAVEGACIÓN LATERAL FIJA (work y about me) */
/* ------------------------------------- */
nav {
    display: flex; 
    flex-direction: column; /* Vertical por defecto */
    position: fixed; /* Posición fija */
    top: 50%; 
    transform: translateY(-50%); /* Centrado vertical */
    left: 50px; 
    gap: 15px; 
    width: 100px; 
    text-transform: lowercase; 
    z-index: 999;
}

nav a {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    /* Transición para tamaño y color */
    transition: color 0.3s, font-size 0.3s ease-in-out; 
}

/* EFECTO HOVER: Aumenta la fuente de la navegación (de 18px a 20px) */
nav a:hover {
    font-size: 20px; 
}

/* Estilo para la página activa (Gris) */
nav a.active {
    color: grey; 
}


/* ------------------------------------- */
/* 3. CONTENIDO PRINCIPAL DESPLAZABLE - BASE DE ESCRITORIO */
/* ------------------------------------- */
.main-content {
    /* Base: Compensación para elementos fijos. Márgenes corregidos. */
    margin-top: 100px; 
    margin-left: 120px; /* Nav (50px) + margen (70px) = 120px. Ajustado de 80px */
    margin-right: 50px;
    margin-bottom: 50px; 
    
    display: block; 
    padding: 0;
}

/* Estilo para páginas con múltiples imágenes (about.html si tiene imágenes/texto) */
.main-content.flex-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 30px;
}

/* Estilos de imágenes y descripción - SOLO APLICAR EN PÁGINAS QUE LOS USAN */
.image-container {
    display: flex;
    flex-direction: column;
    /* CORREGIDO: de 'nort' a 'flex-start' */
    align-items: flex-start; 
    width: calc(50% - 15px); 
    max-width: 600px; 
    margin-bottom: 30px; 
}

/* CLASE PARA LA FOTO DE PORTADA EN INDEX.HTML (Opcional: 100% de ancho) */
.image-container.main-cover {
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: none;
    margin-bottom: 60px; /* Más espacio debajo de la portada */
}


.image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.caption {
    margin-top: 10px;
    font-size: 14px;
    text-transform: lowercase; /* Minúsculas para las descripciones de imágenes */
}

/* Estilos para el contenido de ABOUT ME */
.about-content h1 {
    font-size: 28px;
    /* CORREGIDO: de 'margin: bottom: 100px;' */
    margin-bottom: 100px;
    text-transform: lowercase; /* Minúsculas para el título de About Me */
}

/* AÑADIDO: Limita el ancho del párrafo y lo centra para más margen */
.about-content p {
    max-width: 700px; /* Puedes ajustar este valor: 700px es un buen ancho para lectura */
    margin-left: auto;
    margin-right: auto;
    text-align: justify; /* Opcional: para que el texto se vea más uniforme */
}

/* NUEVA CLASE: Para hacer el texto "COLECTIVAS 2025" más pequeño */
.about-content p .small-text {
    font-size: 14px; /* Tamaño de fuente reducido */
}


/* ========================= */
/* IMAGEN PRINCIPAL FULLSCREEN (INDEX.HTML) */
/* ========================= */

.full-cover {
    /* Mantiene el espacio disponible */
    height: calc(100vh - 120px); 
    margin-top: 60px; /* Incrementa un poco el margen superior */
    margin-left: 120px; /* Alineado al contenido principal */
    margin-right: 80px;  
    
    /* Configuración para centrar el contenido (la imagen) horizontalmente */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    /* El width se ajusta automáticamente al flex-container */
    width: calc(100% - 120px - 80px); /* Calculado el ancho disponible */
}

.full-cover img {
    /* La imagen ahora se ajusta al contenedor y se centra dentro de él */
    max-width: 100%;
    max-height: 100%;
    width: auto; 
    height: auto; 
    object-fit: contain; /* Asegura que la imagen sea visible sin ser cortada */
    border-radius: 4px;
    margin-left: 0 !important; /* Sobreescribe el margen negativo que tenías en el HTML */
}

/* ======================== */
/* NUEVA REJILLA (GRID) DE OBRAS (WORK.HTML) */
/* ======================== */

.main-content.work-grid-container {
    /* Ajusta el padding para que la rejilla quede centrada y deje espacio a la nav lateral */
    /* Este padding se ajustará en el media query para móvil */
    padding: 20px 0 0 0; 
    display: block; 
}

.work-grid {
    display: grid;
    /* Define 3 columnas flexibles de igual ancho */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* Espacio entre los elementos de la rejilla */
}

/* AJUSTES ESPECÍFICOS DE IMAGENES EN WORK */
.bioxenese-cover img {
    object-position: 50% 40%; 
}


.work-item {
    display: block; /* El enlace ocupa toda la celda */
    text-decoration: none;
    color: inherit;
    /* Elimina el margen inferior que tenías antes */
    margin-bottom: 0; 
}

/* El contenedor de la imagen para controlar su relación de aspecto */
.work-image {
    width: 100%;
    height: 300px; /* Altura fija para todas las imágenes */
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra más sutil */
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para que cubra todo el espacio sin distorsionarse */
    transition: transform 0.3s ease-in-out;
}

/* Título de la obra */
.work-info {
    text-transform: none; /* Mantiene la capitalización original */
    padding: 0;
    width: 100%; 
    min-width: unset;
}

.work-info h2 {
    font-size: 14px;
    /* CORREGIDO: de 'font-weight:n' a 'normal' */
    font-weight: normal;
    line-height: 1.3;
    margin: 0;
    font-style: normal; 
}

/* Efecto hover: más interactivo */
.work-item:hover .work-image img {
    transform: scale(1.05); /* Zoom sutil al pasar el ratón */
}
.work-item:hover .work-info h2 {
    color: grey; /* Cambia el color del título al pasar el ratón */
}

/* ======================== */
/* OBRA INDIVIDUAL - BASE DE ESCRITORIO */
/* ======================== */

.main-content.obra-page {
    /* Paddings fijos que causaban el desborde en móvil */
    padding: 80px 220px 50px 300px; 
    max-width: none; 
    display: block; 
}

/* Contenedor principal que envuelve toda la obra */
.obra-page-content {
    margin-top: 40px; 
    max-width: 100%; 
}

/* Contenedor de la sección superior (Imagen y Datos) */
.obra-top-section {
    display: block;
    width: 100%;
    margin-bottom: 40px; 
    position: relative; 
    max-width: 1200px; 
    overflow: hidden; /* FIX para que el contenedor tome la altura de la imagen flotante */
}

/* Imagen de la Obra: Tamaño estándar (75% del ancho del contenedor) */
.obra-full {
    width: 75%; 
    max-height: max-content;
    object-fit: contain; 
    display: block;
    height: auto; 
    float: left; /* Flota a la izquierda para dejar espacio */
}

/* CLASE DE EXCEPCIÓN: Para hacer la imagen aún más grande (90%) */
.obra-extra-large .obra-full {
    width: 90%; 
}

/* Contenedor de los Datos de la Obra (Título, Año, Materiales, Medidas) */
.obra-datos {
    text-align: justify; 
    font-size: 14px;
    line-height: 1.5;
    text-transform: none;
    
    /* Posicionamiento: ABSOLUTO dentro de .obra-top-section */
    position: absolute; 
    bottom: 0; /* SE PEGA A LA PARTE INFERIOR DE LA IMAGEN */
    right: 0; 
    
    /* Calculado para una imagen estándar del 75% */
    width: 25%;
    left: 75%; 
    padding-left: 15px; 
}

/* REGLAS PARA LA EXCEPCIÓN: Si la imagen es más grande (90%), los datos se reajustan */
.obra-extra-large .obra-datos {
    width: 10%; /* 100% - 90% = 10% */
    left: 90%; /* Comienza donde termina el 90% de la imagen */
}

.obra-datos h1 {
    font-size: 14px;       
    font-weight: normal;   
    font-style: italic;    
    margin-bottom: 5px;
}


/* Contenedor para el texto descriptivo, que va debajo (100% de ancho) */
.obra-descripcion-extendida {
    width: 100%;
    font-size: 16px;
    line-height: 1.7;
    text-transform: none;
    max-width: 800px; 
    margin-left: 0;
    
    /* Texto Justificado */
    text-align: justify; 
    clear: both; /* Limpia el float de la imagen para aparecer debajo */
}

/* ------------------------------------- */
/* 7. ESTILOS DE GALERÍA (OBRA.4.HTML) */
/* ------------------------------------- */

#galeria-controles {
    /* Mueve los botones justo debajo de la imagen grande */
    width: 90%; 
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 10px 0 30px 0; /* Espacio arriba, abajo y alineado a la imagen */
}

.galeria-boton {
    background: none;
    border: 1px solid #000;
    color: #000;
    padding: 8px 15px;
    cursor: pointer;
    text-transform: lowercase;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.galeria-boton:hover {
    background-color: #000;
    color: #fff;
}


/* ------------------------------------- */
/* 9. ENLACE VOLVER ESTILIZADO */
/* ------------------------------------- */

.elegant-back-link {
    display: flex; 
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    text-transform: lowercase;
    transition: color 0.3s;
    line-height: 1; 
}

/* El símbolo de flecha */
.arrow-symbol {
    font-size: 18px; 
    font-weight: bold; 
    margin-right: 5px; 
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.3s ease-out, color 0.3s;
}

/* EFECTO HOVER: Movimiento y cambio de color */
.elegant-back-link:hover {
    color: grey; 
}

.elegant-back-link:hover .arrow-symbol {
    transform: translateX(-3px); 
    color: grey; 
}


/* =================================================== */
/* AJUSTES RESPONSIVOS (MOBILE/TABLET)   */
/* =================================================== */


/* AJUSTES PARA PANTALLAS MEDIANAS (TABLET) */
@media (max-width: 900px) {
    
    /* FIJOS: Reducir márgenes de los elementos fijos */
    .title, .contact, nav {
        left: 30px; /* De 50px a 30px */
    }
    .contact { right: 30px; } /* De 50px a 30px */
    
    /* CONTENIDO PRINCIPAL: Ajusta el margen lateral para el nav */
    .main-content {
        margin-left: 100px; /* De 120px a 100px */
        margin-right: 30px; /* De 50px a 30px */
    }
    
    /* REJILLA (WORK.HTML) */
    .work-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    }
    
    /* OBRA INDIVIDUAL: Reajusta el padding fijo */
    .main-content.obra-page {
        /* De 300px a 150px de la izquierda, y 220px a 100px de la derecha */
        padding: 80px 100px 50px 150px; 
    }
    
    /* OBRA INDIVIDUAL: Reajuste de flotantes (Ya existía) */
    .obra-full, .obra-extra-large .obra-full {
        width: 100%;
        float: none;
        max-height: 60vh;
    }
    .obra-datos, .obra-extra-large .obra-datos {
        width: 100%;
        text-align: left; 
        position: static; 
        left: auto;
        margin-top: 20px;
        padding-left: 0;
    }
}


/* AJUSTES PARA MÓVILES PEQUEÑOS */
@media (max-width: 768px) {
    
    /* 1. Elementos Fijos: Reducir márgenes y tamaños */
    .title {
        top: 20px;
        left: 20px; 
        font-size: 16px;
    }

    .contact {
        top: 20px;
        right: 20px; 
        font-size: 12px;
    }
    
    /* 2. Navegación: Horizontal y debajo del título */
    nav {
        top: 60px; /* Debajo del título */
        left: 20px; /* Alineada con el título */
        transform: translateY(0); 
        flex-direction: row; /* Horizontal */
        gap: 15px; 
        width: auto;
    }
    
    /* 3. Contenido Principal: Eliminar el margen izquierdo grande */
    .main-content {
        margin-top: 120px; /* Más espacio para acomodar Título y Nav */
        margin-left: 20px; /* Mínimo margen lateral */
        margin-right: 20px;
    }

    /* 4. Página de Obra Individual: Eliminar el padding excesivo */
    .main-content.obra-page {
        /* Se usa el margin-top del .main-content y paddings laterales mínimos */
        padding: 120px 20px 50px 20px; 
    }
    
    /* 5. Imagen Full Cover (index.html) */
    .full-cover {
        height: calc(100vh - 140px); /* Ajuste de altura */
        margin-top: 120px; 
        margin-left: 20px; 
        margin-right: 20px;
        width: calc(100% - 40px);
    }
    
    /* 6. Work Grid */
    .work-grid {
        grid-template-columns: 1fr; /* 1 columna */
        gap: 20px;
    }
    .work-image {
        height: 250px; 
    }
    
    /* 7. Imágenes y Contenedores */
    .image-container {
        width: 100%; /* Imágenes a una sola columna */
    }
    
    /* Galería (si existiera) */
    #galeria-controles {
        width: 100%;
        margin-left: 0;
    }
}