:root {
    --bg-dark: #121212;
    --locker-gray: #3d4041;
    --text-white: #e2e2e2;
    --accent-gray: #7a7d7e;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Inter', sans-serif;
    margin: 0; padding: 20px;
}

.container { max-width: 1100px; margin: 0 auto; }

/* ESTILO DE CABECERA Y BUSCADOR */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h1 { font-family: 'Big Shoulders Display', sans-serif; font-size: 3.5rem; letter-spacing: 5px; }

.search-area input {
    background: transparent;
    border: 1px solid var(--locker-gray);
    color: white;
    padding: 10px;
    font-family: 'Big Shoulders Display';
    letter-spacing: 2px;
}

/* LAS VENTANAS DE NAVEGACIÓN (Basado en tu imagen) */
.windows-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
}

.window {
    flex: 1;
    background-color: var(--locker-gray);
    color: var(--text-white);
    text-decoration: none;
    text-align: center;
    padding: 15px 5px;
    font-family: 'Big Shoulders Display';
    font-size: 1.2rem;
    letter-spacing: 1px;
    transition: 0.3s;
    border-bottom: 4px solid transparent;
}

.window:hover, .window.active {
    background-color: var(--text-white);
    color: var(--bg-dark);
    border-bottom: 4px solid var(--accent-gray);
}

/* FOTO Y AFIRMACIÓN */
.main-photo { width: 100%; max-height: 450px; overflow: hidden; border: 1px solid var(--locker-gray); }
.main-photo img { width: 100%; height: 100%; object-fit: cover; }

.statement-box {
    background-color: var(--locker-gray);
    padding: 25px;
    width: 85%;
    margin: -30px auto 50px;
    position: relative;
    border-left: 10px solid var(--text-white);
}

.statement-box h2 { font-family: 'Big Shoulders Display'; font-size: 2rem; margin: 0; }

/* CUADRÍCULA */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.info-card { background-color: #1a1c1d; padding: 25px; border: 1px solid var(--locker-gray); }
.tag { font-size: 0.7rem; color: var(--accent-gray); letter-spacing: 2px; display: block; margin-bottom: 10px; }
.info-card h3 { font-family: 'Big Shoulders Display'; font-size: 1.6rem; margin-bottom: 10px; }
.info-card p { font-size: 0.9rem; color: #b0b0b0; line-height: 1.4; }

.industrial-footer { margin-top: 60px; text-align: center; color: var(--accent-gray); letter-spacing: 3px; font-size: 0.8rem; }

/* RESPONSIVE: Tablets y Smartphones */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    /* Cabecera: Apilamos el título y el buscador */
    .main-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        margin-bottom: 30px;
    }

    h1 {
        font-size: 2.2rem; /* Reducimos el tamaño para que no desborde */
        letter-spacing: 3px;
    }


    /* Navegación: De una fila a una cuadrícula de 2x2 */
    .windows-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .window {
        font-size: 1rem;
        padding: 20px 5px; /* Más espacio para pulsar con el dedo */
    }

    /* Ajuste de la caja de afirmación (Statement Box) */
    .statement-box {
        width: 95%; /* Más ancha en móvil */
        margin: -20px auto 40px; /* Menos solapamiento con la foto */
        padding: 20px;
        border-left-width: 6px; /* Borde un poco más fino */
    }

    .statement-box h2 {
        font-size: 1.5rem;
    }

    /* Ajuste de las tarjetas inferiores */
    .info-card {
        padding: 20px;
    }

    .info-card h3 {
        font-size: 1.4rem;
    }
}

/* Ajuste extra para móviles muy pequeños (iPhone SE / Mini) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.8rem;
    }

    .windows-nav {
        grid-template-columns: 1fr; /* Una ventana por fila */
    }

    .main-photo {
        max-height: 300px; /* Acortamos la foto para no hacer tanto scroll */
    }
}