/* --- RESET BÁSICO --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Modelo de caja universal para facilitar el layout */
}

body {
    font-family: 'Montserrat', sans-serif;
    color: black;
    background-color: white;
}

a {
    text-decoration: none;
    color: white;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- CLASES GENERALES --- */
.pantalla-completa {
    width: 100%;
    height: 100vh; /* Ocupa el 100% de la altura de la ventana de visualización */
    position: relative;
    overflow: hidden; /* Evita barras de desplazamiento si el contenido sobresale */
}

.boton {
    display: inline-block;
    background-color: #ff00de; /* Rosa Vice City */
    color: white;
    padding: 15px 20px;
    margin-top: 15px;
    font-weight: bold;
    border: none;
}

/* --- HEADER --- */
header {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    z-index: 10; /* Asegura que el header esté siempre sobre el contenido (ej. video de fondo) */
}

.logo {
    height: 50px;
}

/* Estilos de navegación genéricos para ambos menús */
.menu a, .menu-historia a { 
    margin-left: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Hover específico para menú principal (Home) */
.menu a:hover {
    text-decoration: underline;
    color: #ff00dd;
}

/* Hover específico para menú de historia */
.menu-historia a:hover {
    text-decoration: underline;
    color: #ffffff;
}

/* --- FONDOS --- */
.fondo-video {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fondo-video video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra todo el contenedor */
    opacity: 0.7; /* Oscurece el video para que el texto sea legible */
}

/* Configuración específica del mapa, con posición manual */
.fondo-mapa {
    background-image: url('../img/vicecitymap.png');
    background-position: 30% 80%; /* Ajuste manual de la posición del mapa */
    background-size: cover;
}

.fondo-concesionario {
    background-image: url('../img/concesionario1.png');
}

.fondo-historia {
    background-image: url('../img/concesionario.jpg');
}

/* Aplico estilos comunes a todos los fondos de imagen */
.fondo-concesionario, .fondo-historia {
    background-size: cover;
    background-position: center;
}

/* --- TEXTOS SOBRE PORTADA --- */
.portada-contenido {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Overlay oscuro para legibilidad */
    color: white;
    text-align: center;
    padding: 30px;
}

.portada-contenido h2 {
    font-size: 2.5rem;
    text-transform: uppercase;
}

/* --- SECCIÓN BLANCA  --- */
.seccion-blanca {
    display: flex;
    align-items: center;
    padding: 80px 5%;
    gap: 30px;
    height: 100vh;
}

.caja-texto {
    width: 50%;
}

.caja-texto h2 {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.caja-texto p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 75ch; /* Limita el ancho del párrafo para mejorar la lectura */
}

.caja-img {
    width: 50%;
    text-align: center;
}

/* --- DESTACADO DELUXO --- */
.destacado {
    background-image: url('../img/deluxo1.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end; /* Alinea el título en la parte inferior */
}

.titulo-overlay {
    width: 100%;
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay para destacar el título */
    color: white;
}

.titulo-overlay h2 {
    font-size: 3rem;
    text-transform: uppercase;
    color: #ff00de;
}

/* --- GALERÍA / HISTORIA --- */
.intro-historia {
    padding: 100px 20px 60px;
    text-align: center;
    background-color: #1a1a1a;
    color: white;
}

.intro-historia h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 3px solid #ffffff;
    display: inline-block;
}

.contenido-intro p {
    max-width: 75ch;
    margin: 0 auto;
}

.galeria {
    background-color: #222;
    padding: 50px 10%;
    color: white;
}

.ficha-coche {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    gap: 40px;
}

.invertido {
    flex-direction: row-reverse; /* Invierte el orden de texto/imagen */
}

.info-coche, .foto-coche {
    flex: 1; /* Distribuye el espacio equitativamente */
}

.info-coche h3 {
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.info-coche p {
    max-width: 75ch;
}
.foto-coche img {
    width: 100%; 
    height: 100%; 
    max-height: 600px; 
    object-fit: cover; 
    border-radius: 10px; 
    display: block;
}

.detalles {
    color: #ccc;
    font-style: italic;
    margin-bottom: 15px;
}

.modelo-variante {
    color: #ff00de;
}

.precio {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ff00de;
    margin-top: 15px;
    display: block;
}

/* --- EXTRAS Y TABLAS (CONCESIONARIO) --- */
.seccion-extras {
    background-color: #f4f4f4;
    padding: 60px 10%;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.columna-lista, .columna-tabla {
    width: 48%; /* Distribución casi a la mitad */
}

.columna-lista h3, .columna-tabla h3 {
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 2px solid #ff00de;
    display: inline-block;
}

.columna-lista ul {
    list-style-type: square;
    padding-left: 20px;
}

.columna-lista li {
    margin-bottom: 10px;
}

/* ESTILOS DE LA TABLA */
.tabla-contenedor {
    width: 100%;
    overflow-x: auto; /* Permite scroll horizontal en pantallas pequeñas */
    border: 1px solid #ccc;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    min-width: 400px; /* Asegura que la tabla no sea demasiado estrecha */
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #333;
    color: white;
    text-transform: uppercase;
}

.nota-legal {
    font-size: 0.8rem;
    margin-top: 10px;
    text-align: right;
}

/* --- FORMULARIO --- */
.seccion-formulario {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.caja-formulario {
    width: 100%;
    max-width: 500px;
    background-color: #f9f9f9;
    padding: 30px;
    border: 1px solid #ddd;
}

.caja-formulario form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.caja-formulario input,
.caja-formulario textarea {
    padding: 10px;
    font-size: 1rem;
    width: 100%;
}

.caja-formulario button {
    padding: 15px;
    background-color: #ff00de;
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

/* Aplicación de la fuente a elementos de formulario que a veces no heredan */
input, textarea, button { 
    font-family: 'Montserrat', sans-serif;
}

/* --- FOOTER --- */
footer {
    background-color: black;
    color: white;
    padding: 40px 20px;
    text-align: center;
}

.suscripcion {
    margin: 20px 0;
    padding: 20px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.suscripcion input {
    padding: 8px;
    width: 10%;
}

.suscripcion button {
    padding: 8px 15px;
    background-color: #ff00de;
    color: white;
    border: none;
    font-weight: bold;
}

.copyright {
    color: #888;
    font-size: 0.8rem;
    margin-top: 20px;
}


/* =============================================
   RESPONSIVE - Estilos para pantallas <= 768px
   ============================================= */

@media (max-width: 768px) {
    
    header {
        flex-direction: column; /* Cambia a layout de columna en móvil */
        padding: 15px;
    }

    .menu, .menu-historia {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

    .menu a {
        margin-left: 0;
    }

    /* Reduce el tamaño de los títulos principales en dispositivos móviles */
    .caja-texto h2, 
    .portada-contenido h2, 
    .titulo-overlay h2 {
        font-size: 1.8rem;
    }

    /* Sección Home: imagen debajo del texto (apilamiento vertical) */
    .seccion-blanca {
        flex-direction: column;
        text-align: center;
        padding-top: 150px;
        height: auto;
    }

    .caja-texto, .caja-img {
        width: 100%;
    }

    /* Galería: Pone los bloques de coche en una sola columna */
    .ficha-coche {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* El bloque invertido vuelve a ser columna normal en móvil */
    .invertido {
        flex-direction: column;
    }

    /* Sección Extras (Tablas y Listas): Pone las columnas en vertical */
    .seccion-extras {
        flex-direction: column;
        padding: 40px 5%;
    }

    .columna-lista, .columna-tabla {
        width: 100%;
    }

    /* Ajustes del Footer para que los elementos de suscripción ocupen todo el ancho */
    .suscripcion input, .suscripcion button {
        width: 100%;
        margin-bottom: 10px;
    }
}