/* ==========================================================================
   Base & Resets (Heredado de tu index)
   ========================================================================== */
   ::selection {
    background: #8AA8DF;
    color: #E6E6E6;
}

body {
    background-color: black;
    color: #E6E6E6;
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

img, video{
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Layout Principal
   ========================================================================== */
.project-container {
    max-width: 1200px; /* Mismo ancho que tu index */
    margin: 0 auto;
    padding: 40px 20px; /* 20px de margen lateral en móvil */
}

.project-header {
    margin-bottom: 60px;
    margin-top: 10%;
}

@media screen and (max-width: 768px) {
    .project-header {
        margin-top: 25%;
    }
}

/* ==========================================================================
   Navegación (Back Button)
   ========================================================================== */
.top-nav {
    margin-bottom: 60px;
    width: 183px;
    height: 63px;
    background-color: rgba(0, 0, 0, 0.66);
    border: 2px solid rgba(180, 180, 180, 0.33);
    border-radius: 50px;
    position: fixed;
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.back-btn {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 1.35em;
    color: #E6E6E6;
    text-align: center;
    margin: 0;
    padding: 0;
    text-decoration: none;
    transition: filter 0.5s ease-in-out;
    display: flex;
    align-items: center;
    gap: 5px;
}

.arrow-icon-top-nav {
    display: inline-flex;
    align-items: center;
    transform: rotate(270deg);
}

.arrow-icon-top-nav svg {
    width: 24px;
    height: 24px;
    color: #E6E6E6;
    transition: 0.5s ease-in-out;
}

.arrow-icon-top-nav:hover svg {
    filter: blur(2px);
    cursor: pointer;
}

.top-nav:hover a {
    filter: blur(2px);
}

/* ==========================================================================
   Tipografía
   ========================================================================== */
.project-header h1 {
    font-size: clamp(2.5rem, 6vw, 64px);
    font-weight: 500;
    margin: 0 0 10px 0;
    line-height: 1.1;
}

.project-header .subtitle {
    color: #A9A9A9;
    font-size: clamp(1.1rem, 2vw, 24px);
    font-weight: 400;
    margin: 0;
}

.project-info-text {
    color: #A9A9A9;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 300;
    margin: 0;
}

.project-info-text span {
    color: #8AA8DF; 
    font-weight: 500;
}

.project-section {
    margin-top: 80px;
}

.project-section h2 {
    font-size: clamp(2rem, 4vw, 52px);
    font-weight: 500;
    margin: 0;
}

.text-content p, .text-content li, .text-content ul {
    color: #A9A9A9;
    font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 300;
}

.text-content li {
    margin-bottom: 0;
}

.text-content p b, .img-caption {
    font-weight: 600;
    color: #A9A9A9;
    font-size: 1.1rem;
    line-height: 1.2;
}

/* .text-content.full-width {
    max-width: 900px; 
} */

/* ==========================================================================
   Estructuras Responsive (Grid / Flexbox)
   ========================================================================== */

   .split-layout {
    display: grid;
    grid-template-columns: 1fr; /* En móvil, 100% de ancho, una cosa debajo de otra */
    gap: 40px;
}

@media (min-width: 900px) {
    .split-layout {
        /* Exactamente 70% para la primera columna (texto) y 30% para la segunda (imágenes) */
        grid-template-columns: 7fr 3fr; 
        gap: 60px;
        align-items: center; /* Mantiene el contenido centrado verticalmente */
    }
}

.media-content {
    display: flex;
    flex-direction: row; /* Pone las dos imágenes una encima de la otra */
    gap: 30px; /* Separación entre la primera imagen y la segunda */
    justify-content: center;
    width: 100%; /* Asegura que las imágenes respeten su 30% y no desborden */
}

@media screen and (max-width: 900px) {
    .media-content {
        gap: 0px;
    }
    
}

.media-content img {
    max-width: 50%;
}

/* Image Grids (Para Wireframes, testing, etc) */
.image-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px; /* Separación en móvil */
    margin-top: 30px;
}

.sketch-images-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: 100%;
    align-items: flex-start;
}

@media screen and (max-width: 900px) {
    .sketch-images-container {
        gap: 5px;
    }
    
}

.sketch-images-container-final-result-images {
    display: grid;
    /* Crea exactamente 4 columnas del mismo tamaño (1 fraction cada una) */
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; /* El espacio entre los mockups */
    width: 100%; /* Ocupa el 100% de la caja padre */
    align-items: start;
}

.sketch-images-container-final-result-images img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Evita que las imágenes se deformen */
}

/* 📱 BONUS RESPONSIVE: En móviles, 4 columnas se verían minúsculas. 
   Es mejor que en pantallas pequeñas sean 2 columnas y pase a 4 en ordenador */
@media (max-width: 768px) {
    .sketch-images-container-final-result-images {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
        gap: 15px;
    }
}

.sketch-images-container img {
    flex: 1;           /* Obliga a las imágenes a repartirse el espacio a partes iguales */
    min-width: 0;      /* Truco clave de Flexbox: evita que el tamaño original rompa el grid */
    width: 100%;       /* Hace que ocupen el espacio asignado por el flex */
    object-fit: contain; /* Asegura que la imagen no se deforme (puedes cambiarlo a 'contain' si prefieres que no recorte nada) */
}

@media (min-width: 768px) {
    .image-grid {
        justify-content: start; 
        gap: 60px; 
    }
}

/* Grid especial para "Final Solution" del wireframe (mockups + video) */
@media (min-width: 900px) {
    .final-solution-grid {
        /* Ahora las 3 columnas (incluido el video) tienen exactamente el mismo tamaño máximo (280px) */
        grid-template-columns: repeat(3, minmax(0, 280px)); 
        justify-content: start; /* Alineamos a la izquierda junto con el resto del contenido */
        gap: 60px;
        align-items: start; /* Cambiado a 'start' para que se alinee por arriba con las imágenes */
    }
}

.grid-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.project-footer {
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: #A9A9A9;
    font-size: 0.9rem;
}

#contact {
    margin: 0 auto;
    max-width: 1200px;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#contact a {
    font-family: Inter;
    color: #8AA8DF;
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
    transition: color 0.3s ease-in-out;
}

#contact a:hover {
    text-decoration: underline;
}