/* Reseteo básico y Estilos de Fondo/Navbar (sin cambios principales) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero {
    min-height: 100vh;
    background: linear-gradient(180deg, #87CEEB 0%, #E0F6FF 100%);
    display: flex;
    flex-direction: column;
    color: #2C3E50;
    padding-bottom: 50px; /* Margen inferior para el contenido */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    position: relative;
    z-index: 10;
}

.logo { font-size: 26px; font-weight: bold; color: #1A5F7A; }
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a { text-decoration: none; color: #2C3E50; font-weight: 500; transition: color 0.3s; }
.nav-links a:hover { color: #00A8E8; }

/* NUEVO: CONTENEDOR DE EXHIFICIÓN */
.hero-showcase {
    flex: 1; /* Ocupa el espacio restante */
    display: flex;
    flex-direction: column; /* Apila las tarjetas verticalmente */
    gap: 80px; /* Espacio grande entre las tarjetas de los autos */
    padding: 50px; /* Margen general */
}

/* NUEVO: ESTILO DE LA TARJETA DEL AUTO (Split individual) */
.car-card {
    display: grid;
    grid-template-columns: 1fr 1fr; /* DOS COLUMNAS IGUALES: Texto vs. Imagen */
    align-items: center; /* Centra el contenido verticalmente */
    gap: 50px; /* Espacio entre descripción e imagen */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.4); /* Fondo sutil para dar contraste */
    border-radius: 40px; /* Bordes redondeados sutiles para el contenedor */
}

/* NUEVO: ESTILOS DE DESCRIPCIÓN INDIVIDUAL */
.car-description {
    text-align: left;
    padding: 20px;
}

.car-description h2 {
    font-size: 2.8rem;
    margin-bottom: 15px;
    color: #1A5F7A;
    line-height: 1.2;
}

.car-description p {
    font-size: 1.2rem;
    max-width: 550px;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* NUEVO: ESTILOS DE LA IMAGEN INDIVIDUAL */
.car-image {
    width: 100%;
}

.car-image img {
    width: 100%;
    height: 350px; /* Altura controlada */
    object-fit: cover; /* Mantiene proporción */
    border-radius: 30px; /* BORDES REDONDEADOS */
    box-shadow: 0 15px 35px rgba(26, 95, 122, 0.2); /* SOMBRA SUAVE */
    transition: transform 0.3s ease;
}

.car-image img:hover {
    transform: translateY(-5px);
}

/* Botón estilo Atardecer (sin cambios principales, solo padding) */
.btn-sunset {
    display: inline-block;
    padding: 12px 35px; /* Ligeramente más pequeño para el flujo */
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    background: linear-gradient(to right, #FF7E5F, #FEB47B);
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(255, 126, 95, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-sunset:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 126, 95, 0.6);
}

/* ... (Estilos anteriores para Hero, Navbar, Showcase, y Botón Sunset) ... */

/* ********************************************** */
/* ESTILOS NUEVOS: SECCIÓN ¿QUIÉN ES FELICITAS? */
/* ********************************************** */

.about-felicitas {
    padding: 100px 50px; /* Ample spacing around the section */
    background-color: #ffffff; /* Clean white background to contrast against the hero gradient */
    display: flex;
    justify-content: center;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* DOS COLUMNAS IGUALES (Split individual) */
    align-items: center; /* Centra el contenido verticalmente */
    gap: 60px; /* Wide gap for an airy, professional feel */
    max-width: 1200px; /* Optional cap to prevent too wide on ultra-wides */
}

/* Reusable class for images, based on previous style but slightly more dramatic */
.img-rounded-shadow {
    width: 100%;
    height: 450px; /* Taller image for a profile presentation */
    object-fit: cover; /* Ensures image maintains aspect ratio */
    border-radius: 30px; /* BORDE REDONDEADO REUTILIZADO */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); /* SOMBRA SUAVE (más dramática para el perfil) */
    transition: transform 0.3s ease; /* Efecto suave para el hover */
}

.img-rounded-shadow:hover {
    transform: scale(1.02); /* Slight scale up on hover instead of lifting */
}

/* Columna de Contenido (Texto) */
.about-content {
    text-align: left;
}

.about-content .subtitle {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00A8E8; /* Using the bright blue from the hero for accent contrast */
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.about-content h2 {
    font-size: 3.2rem;
    color: #1A5F7A; /* Established header color */
    margin-bottom: 20px;
    line-height: 1.1;
}

.about-content .intro-p {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 25px;
}

/* List details (paragraphs) */
.details-list p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #576574; /* Softer text color for main paragraphs */
    margin-bottom: 15px;
}

/* Bold highlights within details paragraphs */
.details-list p strong {
    color: #2C3E50;
    font-weight: bold;
}

/* Opcional: Firma estilizada */
.about-content .signature {
    margin-top: 30px;
    font-family: 'Cursive', sans-serif; /* You'd need to link a cursive font for this to work perfectly */
    font-size: 1.8rem;
    color: #FEB47B; /* Warm color from the sunset button for contrast */
}
/* ********************************************** */
/* ESTILOS NUEVOS: PREGUNTAS FRECUENTES (FAQ) */
/* ********************************************** */

.faq-section {
    padding: 80px 20px;
    background-color: #F0F8FF; /* Un "Alice Blue" muy sutil, que combina con tu cielo despejado */
    display: flex;
    justify-content: center;
}

.faq-container {
    max-width: 800px; /* Un poco más angosto para que la lectura sea cómoda */
    width: 100%;
    text-align: center;
}

.faq-title {
    font-size: 2.8rem;
    color: #1A5F7A;
    margin-bottom: 10px;
}

.faq-subtitle {
    font-size: 1.2rem;
    color: #576574;
    margin-bottom: 40px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre cada pregunta */
    text-align: left;
}

/* El contenedor de cada pregunta */
.faq-item {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(26, 95, 122, 0.08); /* Sombra muy sutil */
    overflow: hidden; /* Para que las esquinas redondeadas contengan la respuesta */
    transition: all 0.3s ease;
}

/* El título de la pregunta (lo que se hace clic) */
.faq-item summary {
    padding: 20px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #2C3E50;
    cursor: pointer;
    list-style: none; /* Quita la flechita por defecto en la mayoría de navegadores */
    position: relative;
    transition: color 0.3s;
}

/* Quitamos la flecha en navegadores Webkit (Chrome/Safari) */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: #00A8E8; /* Se pinta de celeste al pasar el mouse */
}

/* Agregamos nuestro propio icono de "+" usando CSS */
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #00A8E8;
    transition: transform 0.3s ease;
}

/* Cuando el acordeón está abierto, el "+" se vuelve una "x" (girando) */
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

/* El contenedor de la respuesta */
.faq-answer {
    padding: 0 25px 20px 25px;
    color: #576574;
    line-height: 1.6;
    border-top: 1px solid #E0F6FF; /* Una línea sutil para separar pregunta de respuesta */
    margin-top: 5px;
    padding-top: 15px;
}

/* ********************************************** */
/* ESTILOS NUEVOS: PÁGINAS LEGALES (T&C) */
/* ********************************************** */

/* Si la página no tiene un Hero, necesitamos que el nav tenga fondo para que se vea bien */
.navbar-only {
    background-color: #E0F6FF; /* Fondo celeste suave para el menú */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.legal-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, #E0F6FF 0%, #FFFFFF 100%); /* Degradado suave */
    display: flex;
    justify-content: center;
    min-height: 70vh; /* Asegura que ocupe buena parte de la pantalla */
}

/* La "hoja" de papel flotante */
.legal-container {
    background-color: #FFFFFF;
    max-width: 850px; /* Ancho ideal para lectura */
    width: 100%;
    padding: 60px;
    border-radius: 30px; /* Mantenemos tus bordes curvos */
    box-shadow: 0 15px 35px rgba(26, 95, 122, 0.08); /* Sombra elegante */
}

.legal-header {
    text-align: center;
    margin-bottom: 50px;
    border-bottom: 2px solid #E0F6FF;
    padding-bottom: 30px;
}

.legal-header h1 {
    font-size: 3rem;
    color: #1A5F7A;
    margin-bottom: 15px;
}

.legal-header .last-updated {
    color: #87CEEB;
    font-style: italic;
    font-weight: 500;
}

/* Tipografía del contenido legal */
.legal-content h2 {
    font-size: 1.8rem;
    color: #00A8E8; /* Celeste vibrante para los subtítulos */
    margin-top: 40px;
    margin-bottom: 20px;
}

.legal-content p {
    font-size: 1.1rem;
    color: #576574;
    line-height: 1.8; /* Mucho interlineado para que respire el texto */
    margin-bottom: 20px;
}

.legal-content ul {
    margin-bottom: 25px;
    padding-left: 20px;
}

.legal-content li {
    font-size: 1.1rem;
    color: #576574;
    line-height: 1.8;
    margin-bottom: 10px;
    list-style-type: disc;
}

.legal-content em {
    color: #1A5F7A;
}

/* ********************************************** */
/* ESTILOS NUEVOS: FOOTER (PIE DE PÁGINA) */
/* ********************************************** */

.site-footer {
    background-color: #1A5F7A; /* Azul oscuro corporativo para dar una base sólida */
    color: #E0F6FF; /* Texto en un celeste muy clarito para que resalte sobre el fondo oscuro */
    padding: 60px 0 0 0; /* Padding solo arriba, el de abajo lo maneja el footer-bottom */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* La primera columna (marca) es más ancha que las otras dos */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor en pantallas grandes */
    padding: 0 50px 40px 50px;
}

.footer-col h3 {
    color: #FFFFFF;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.footer-col h4 {
    color: #FFFFFF;
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col p {
    line-height: 1.6;
    margin-bottom: 20px;
    color: #B3E5FC; /* Un celeste un poco más apagado para textos largos */
}

/* Estilos de las listas de enlaces y contacto */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 15px;
    color: #B3E5FC;
}

.footer-col ul li a {
    color: #B3E5FC;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: #FEB47B; /* El hover toma el color del "atardecer" para darle vida */
}

/* Botones simulados para redes sociales */
.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente */
    color: white;
    text-decoration: none;
    border-radius: 50%; /* Círculos perfectos */
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}

.social-icon:hover {
    background-color: #FEB47B; /* Pinta de naranja al pasar el mouse */
    transform: translateY(-3px);
}

/* Barra inferior de Copyright */
.footer-bottom {
    background-color: #124559; /* Un tono aún más oscuro que el fondo del footer */
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: #87CEEB;
}
/* ... (todos tus estilos anteriores: Hero, About, FAQ, Legal, Footer) ... */

/* ********************************************** */
/* ESTILOS NUEVOS: BOTÓN FLOTANTE DE WHATSAPP */
/* ********************************************** */

.whatsapp-float {
    position: fixed; /* LA CLAVE: El botón se 'clava' a la pantalla, no a la web */
    bottom: 30px;    /* Espacio desde la parte inferior de la pantalla */
    right: 30px;     /* Espacio desde la parte derecha de la pantalla (estándar de la industria) */
    width: 65px;     /* Tamaño del círculo */
    height: 65px;    /* Tamaño del círculo (igual para que sea perfecto) */
    background-color: #25D366; /* EL COLOR VERDE OFICIAL DE WHATSAPP */
    color: #FFFFFF;    /* EL COLOR BLANCO DEL ICONO DEL TELÉFONO */
    border-radius: 50%; /* Borde perfectamente redondeado: un círculo */
    display: flex;     /* Usamos flexbox para centrar el icono */
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    font-size: 38px;         /* Tamaño del icono grande y claro */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Sombra para que flote y tenga profundidad */
    text-decoration: none; /* Quitamos el subrayado del enlace */
    z-index: 10000;         /* Un Z-Index altísimo para asegurarnos que esté SIEMPRE sobre el footer, imágenes, etc. */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Transiciones suaves para interactividad */
}

/* Efectos al pasar el mouse por encima (hover) */
.whatsapp-float:hover {
    background-color: #128C7E; /* Un verde un poco más oscuro al hover */
    transform: scale(1.1) translateY(-5px); /* El botón 'salta' un poco hacia arriba y se agranda */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* La sombra crece para dar más profundidad */
}

/* Opcional: Para que el icono no se distorsione al hacer clic */
.whatsapp-float i {
    margin-top: -2px; /* Un pequeño ajuste visual si es necesario */
}
/* ********************************************** */
/* ESTILOS RESPONSIVOS (MÓVILES Y TABLETS)        */
/* ********************************************** */

/* Se activa cuando la pantalla mide 768px o menos (tamaño tablet/celular) */
@media (max-width: 768px) {
    
    /* 1. Navegación: Apilamos el logo y los enlaces */
    .navbar {
        flex-direction: column;
        padding: 15px 20px;
        gap: 15px;
    }
    
    .nav-links {
        flex-wrap: wrap; /* Permite que los enlaces bajen si no caben */
        justify-content: center;
        gap: 15px;
    }

    /* 2. Sección de Autos (Showcase): De 2 columnas a 1 */
    .hero-showcase {
        padding: 20px;
        gap: 40px;
    }

    .car-card {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
        gap: 20px;
        padding: 15px;
        text-align: center; /* Centramos el texto en móviles */
    }

    .car-description {
        padding: 10px;
    }

    /* Reducimos un poco los títulos gigantes */
    .car-description h2, 
    .about-content h2, 
    .legal-header h1 {
        font-size: 2.2rem; 
    }

    .car-image img {
        height: auto; /* Permite que la altura se ajuste automáticamente */
        max-height: 250px; /* Evita que la imagen sea excesivamente alta */
    }

    /* 3. Sección ¿Quién es Felicitas?: De 2 columnas a 1 */
    .about-felicitas {
        padding: 60px 20px;
    }

    .about-container {
        grid-template-columns: 1fr; /* Pasa a 1 columna */
        gap: 30px;
        text-align: center; /* Centramos para celular */
    }

    /* Cambiamos el orden visual: que la foto salga primero arriba y el texto abajo */
    .about-image {
        order: -1; 
    }

    .img-rounded-shadow {
        height: auto;
        max-height: 350px;
    }

    /* 4. Preguntas Frecuentes */
    .faq-section {
        padding: 50px 15px;
    }

    .faq-title {
        font-size: 2.2rem;
    }

    .faq-item summary {
        padding: 15px 20px;
        font-size: 1rem;
    }

    /* 5. Footer: De 3 columnas a 1 */
    .footer-container {
        grid-template-columns: 1fr; /* Pasa a 1 columna */
        text-align: center; /* Centramos todo el footer */
        padding: 0 20px 30px 20px;
        gap: 30px;
    }

    /* Centramos los botones de redes sociales */
    .social-links {
        justify-content: center; 
    }

    /* 6. Botón flotante de WhatsApp */
    .whatsapp-float {
        bottom: 20px; /* Lo bajamos un poquito más en móviles */
        right: 20px;
        width: 55px; /* Un poco más pequeño para que no estorbe la lectura */
        height: 55px;
        font-size: 32px;
    }
}