/* Coloca esto al principio del todo en tu css/style.css */
html {
    background-color: #ffffff;
}

/* El cuerpo empieza invisible por defecto si tiene la clase */
body.fade-in {
    opacity: 0;
    visibility: hidden;
    background-color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 2.5rem;
    /* Animación de desvanecimiento suave de 0.4 segundos */
    animation: mostrarWeb 0.4s ease-in forwards; 
}

/* La animación que lo vuelve visible */
@keyframes mostrarWeb {
    to {
        opacity: 1;
        visibility: visible;
    }
}
/* Reset básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #ffffff;
    /* Tipografía fina, limpia y moderna */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 2.5rem;
}

/* Header con tu nombre a la izquierda (Aún más sutil) */
.main-header {
    margin-bottom: 3.5rem;
}

.logo {
    font-size: 1rem; /* Tamaño reducido */
    font-weight: 300; /* Fina, sin bold */
    letter-spacing: 3px; /* Espaciado entre letras elegante */
    color: #000000;
}

/* Contenedor de la Galería */
.gallery-container {
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto;
    
    /* 4 columnas por defecto en pantallas grandes (1920px) */
    column-count: 4; 
}

/* Cada tarjeta de proyecto */
.gallery-item {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 2rem;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

/* Imagen base */
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Respiración suave */
}

/* Capa inferior (Overlay) que contiene el título centrado */
.gallery-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)); /* Sombra suave para contrate */
    padding: 2rem 1rem 1.2rem 1rem;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    justify-content: center; /* Alineación del cuadro al centro */
    align-items: center;
}

/* Texto del título en la base y centrado */
.gallery-item .project-title {
    color: #ffffff;
    font-size: 0.75rem; /* Tamaño más fino y reducido */
    font-weight: 300; /* Fina, sin bold */
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center; /* Texto centrado en su interior */
    background-color: rgba(0, 0, 0, 0.8); /* Marco negro ajustado solo al texto */
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
}

/* --- EFECTOS HOVER --- */

/* La imagen "respira" suavemente */
.gallery-item:hover img {
    transform: scale(1.04);
}

/* Aparece el rótulo en la base */
.gallery-item:hover .overlay {
    opacity: 1;
}


/* --- RESPONSIVE DESIGN --- */

/* Laptops / Pantallas medianas: 3 columnas */
@media (max-width: 1400px) {
    .gallery-container {
        column-count: 3;
        gap: 1.5rem;
    }
}

/* Tablets en vertical: 2 columnas */
@media (max-width: 900px) {
    .gallery-container {
        column-count: 2;
    }
    body {
        padding: 2rem;
    }
}

/* Móviles / Un cuarto de ventana (aprox <= 500px): 1 columna */
@media (max-width: 500px) {
    .gallery-container {
        column-count: 1;
    }
    body {
        padding: 1.5rem;
    }
    .logo {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }
}
/* ==========================================================================
   ESTILOS PARA PÁGINAS INDIVIDUALES DE PROYECTOS
   ========================================================================== */

/* Cabecera del proyecto individual */
.project-header {
    margin-bottom: 4rem;
}

/* Botón de volver (mismo estilo fino que el logo/títulos) */
.back-button {
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: inline-block;
}

.back-button:hover {
    opacity: 0.6; /* Pequeño desvanecimiento sutil al pasar el cursor */
}

/* Contenedor central de una sola columna */
.project-container {
    max-width: 1000px; /* Ancho máximo óptimo para la columna central */
    margin: 0 auto;
    padding-bottom: 5rem;
}

.project-container-500 {
    max-width: 500px; /* Ancho máximo óptimo para la columna central */
    margin: 0 auto;
    padding-bottom: 5rem;
}
.project-container-600 {
    max-width: 600px; /* Ancho máximo óptimo para la columna central */
    margin: 0 auto;
    padding-bottom: 5rem;
}

.project-container-700 {
    max-width: 700px; /* Ancho máximo óptimo para la columna central */
    margin: 0 auto;
    padding-bottom: 5rem;
}
.project-container-800 {
    max-width: 800px; /* Ancho máximo óptimo para la columna central */
    margin: 0 auto;
    padding-bottom: 5rem;
}
.project-container-900 {
    max-width: 900px; /* Ancho máximo óptimo para la columna central */
    margin: 0 auto;
    padding-bottom: 5rem;
}
/* Introducción del proyecto */
.project-intro {
    margin-bottom: 4rem;
    text-align: center;
}

.project-page-title {
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: #000000;
}

.project-description {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.8;
    color: #666666;
    max-width: 650px;
    margin: 0 auto;
}

/* Elementos Multimedia (Imágenes, Videos, 3D) */
.project-media {
    width: 100%;
    margin-top: 3rem;     /*  Margen encima del elemento */
    margin-bottom: 3.5rem; /* Separación elegante entre piezas */
    display: flex;
    justify-content: center;
}

.project-media2 {
    max-width: 900px;
    margin-top: 3rem;     /*  Margen encima del elemento */
    margin-bottom: 3.5rem; /* Separación elegante entre piezas */
    display: flex;
    justify-content: center;
}



.project-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Variante para imágenes/elementos que quieras mostrar más pequeños en el centro */
.project-media.media-small {
    max-width: 600px; /* Restringe el ancho a algo más discreto */
    margin-left: auto;
    margin-right: auto;
}

/* Borde fino para delimitar imágenes con fondo blanco */
.project-media img.with-border {
    border: 1px solid #dcdcdc; /* Gris oscuro muy suave y elegante, para que no compita con la imagen */
    box-sizing: border-box; /* Asegura que el borde no deforme la alineación */
}
/* 1. La base estructural (para todos los videos) */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 por defecto */
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 2. El modificador (solo cambia la proporción si se añade esta clase) */
.video-wrapper.video-4-3 {
    padding-bottom: 75%; /* Cambia a formato 4:3 */
}


/* Contenedor del Visor 3D */
.model-wrapper {
    width: 100%;
    height: 500px; /* Altura fija para el visor interactivo */
    background-color: #f7f7f7; /* Fondo neutro para el modelo */
    border-radius: 4px;
}

model-viewer {
    width: 100%;
    height: 100%;
    --poster-color: transparent;
}


/* --- Adaptación para pantallas pequeñas --- */
@media (max-width: 900px) {
    .project-container {
        padding: 0 1rem 3rem 1rem;
    }
    .project-page-title {
        font-size: 1.5rem;
    }
    .project-header {
        margin-bottom: 3rem;
    }
}