/* =========================================
   1. VARIABLES & RESET (Configuración Base)
   ========================================= */
:root {
    --primary: #FFA85C;      /* Naranja Premium del PDF */
    --primary-hover: #e6954d;
    --black: #050505;        /* Negro casi puro */
    --dark-grey: #121212;    /* Gris muy oscuro para fondos */
    --card-bg: #1E1E1E;      /* Gris para tarjetas en modo oscuro */
    --white: #ffffff;
    --off-white: #f8f8f8;
    --text-dark: #333333;
    --text-light: #f4f4f4;
    
    /* Tipografías */
    --font-head: 'Montserrat', sans-serif; /* Clásica y elegante */
    --font-body: 'Montserrat', sans-serif;  /* Limpia y geométrica */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden; /* Evita scroll lateral indeseado */
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

a { text-decoration: none; transition: all 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Contenedor centralizado */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Texto destacado */
.highlight { color: var(--primary); font-style: italic; }

/* =========================================
   2. BOTONES (Buttons)
   ========================================= */
.btn {
    display: inline-block;
    padding: 14px 35px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px; /* Bordes ligeramente cuadrados = más elegante */
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--black);
    border: 1px solid var(--primary);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--white); /* Asumiendo fondo oscuro */
    border-color: var(--white);
}

.btn-outline {
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    margin-left: 15px;
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--black);
}

/* =========================================
   3. NAVEGACIÓN (Navbar)
   ========================================= */
.navbar {
    background-color: var(--black);
    padding: 1.2rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem; /* Ajusta según el tamaño de las pestañas */
    font-weight: 600;
    margin: 0 0 0 10px; /* Espacio a la izquierda del logo */
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
}
.nav-links { display: flex; gap: 30px; }

.nav-links a {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--primary);
}

.btn-nav {
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
    padding: 8px 20px;
    border-radius: 2px;
}

.btn-nav:hover {
    background: var(--primary);
    color: var(--black) !important;
}

/* =========================================
   4. HERO SECTION (La portada)
   ======================================== */
/*    
.hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.5)), 
                url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    height: 90vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
}

.hero-text { max-width: 800px; padding: 20px; } */

/* =========================================
   4. HERO SECTION (Modificado con Slider)
   ========================================= */
.hero {
    position: relative;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden; /* Importante para que no se salga nada */
}

/* Contenedor de las imágenes */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Cada diapositiva individual */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Ocultas por defecto */
    transition: opacity 1.5s ease-in-out, transform 6s ease; /* Transición suave + Zoom lento */
    transform: scale(1);
}

/* La clase que activa la imagen visible */
.hero-slide.active {
    opacity: 1;
    transform: scale(1.05); /* Pequeño efecto zoom elegante */
}

/* Capa oscura superpuesta para leer el texto */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
    z-index: 2;
}

/* El texto debe estar encima de todo */
.hero-text {
    position: relative;
    z-index: 3;
    max-width: 800px;
    padding: 20px;
}


.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-text .subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    color: rgba(255,255,255,0.9);
    border-top: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    display: inline-block;
    padding: 10px 20px;
}

/* =========================================
   5. SECCIÓN BENEFICIOS (Tarjetas flotantes)
   ========================================= */
.benefits {
    position: relative;
    top: -50px; /* Sube las tarjetas sobre el Hero */
    z-index: 10;
    margin-bottom: 2rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--white);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05); /* Sombra suave y elegante */
    border-top: 3px solid var(--primary); /* Detalle de color */
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-10px); /* Efecto de elevación */
}

.card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--black); }
.card p { font-size: 0.95rem; color: #666; }

/* =========================================
   6. SECCIÓN SERVICIOS (Dark Mode)
   ========================================= */
.section-dark {
    background-color: var(--dark-grey);
    color: var(--white);
    padding: 6rem 0; /* Más espacio vertical = más lujo */
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 4rem;
    color: var(--primary); /* Título en naranja */
    position: relative;
}

/* Línea decorativa bajo título */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--white);
    margin: 20px auto 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.service-item {
    background: rgba(255,255,255,0.03); /* Fondo muy sutil */
    border: 1px solid rgba(255,255,255,0.1);
    padding: 2.5rem;
    transition: background 0.3s;
}

.service-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--primary);
}

.service-item h4 {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.service-item p {
    color: #aaa;
    font-size: 0.9rem;
}

.fee-box {
    margin-top: 4rem;
    text-align: center;
    padding: 2rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: var(--font-head);
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* =========================================
   7. SECCIÓN NOSOTROS Y PROCESO
   ========================================= */
.section-light {
    padding: 6rem 0;
    background-color: var(--off-white);
}

.split-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.philosophy-list {
    margin-top: 2rem;
    text-align: left;
    display: inline-block;
}

.philosophy-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    border-left: 2px solid var(--primary);
}

/* Pasos numerados */
.process-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    text-align: center;
}

.step {
    flex: 1;
    min-width: 200px;
}

.step-num {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 168, 92, 0.2); /* Naranja muy transparente */
    font-family: var(--font-head);
    margin-bottom: -20px;
    position: relative;
    z-index: 1;
}

.step h4 {
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

/* =========================================
   8. FORMULARIO CONTACTO (Estilos Generales)
   ========================================= */
.section-contact {
    padding: 6rem 0;
    background: var(--white);
}

.contact-form {
    background: var(--white);
    padding: 3rem;
    box-shadow: 0 0 50px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 8px;
    display: block;
    letter-spacing: 0.5px;
}

/* Estilos globales para inputs (CUIDADO: afectan a todo) */
input, select, textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    background: #fdfdfd;
    margin-bottom: 1rem;
    font-family: var(--font-body);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    outline: none;
    background: #fff;
}

/* =========================================
   9. FOOTER
   ========================================= */
footer {
    background: var(--black);
    color: #777;
    padding-top: 4rem;
    font-size: 0.9rem;
}

.footer-col h3, .footer-col h4 {
    color: var(--white);
    margin-bottom: 1.5rem;
}

.footer-bottom {
    margin-top: 3rem;
    padding: 20px;
    border-top: 1px solid #222;
    text-align: center;
}

/* =========================================
   10. CHATBOT STYLES
   ========================================= */
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
    font-family: var(--font-body);
}

.chat-btn {
    background: var(--black);
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 15px 25px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.chat-btn:hover { transform: scale(1.05); }

.chat-box {
    display: none;
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 350px;
    height: 450px;
    background: var(--white);
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: var(--black);
    color: var(--white);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

#chat-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.message.bot {
    background: #e9e9e9;
    color: var(--text-dark);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.message.user {
    background: var(--primary);
    color: var(--black);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.chat-input-area {
    padding: 10px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    background: var(--white);
}

#chat-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 0;
}

#chat-send {
    background: var(--black);
    color: var(--primary);
    border: none;
    padding: 0 15px;
    border-radius: 4px;
    cursor: pointer;
}

/* =========================================
   11. BÚSQUEDA FLOTANTE (ARREGLADO)
   ========================================= */
.search-floating {
    position: fixed;
    top: 90px; /* Debajo de la navbar */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    
    background-color: var(--white);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Sombra elegante */
    z-index: 999;
    padding: 5px 20px;
    
    display: flex;
    align-items: center;
}

/* Sobrescribimos los estilos generales de input para este caso específico */
.search-floating input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100%;
    height: 40px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    
    /* --- CRÍTICO: ANTI-ZOOM MÓVIL --- */
    font-size: 16px !important; 
    /* -------------------------------- */
    color: var(--black);
}

/* =========================================
   12. RESPONSIVE Y ESTILOS MÓVILES
   ========================================= */

/* Estilos Hamburguesa */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    margin-left: 20px;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background: var(--white);
    border-radius: 2px;
    transition: 0.3s;
}

/* MEDIA QUERIES (Móvil < 768px) */
@media (max-width: 768px) {
    /* Ajustes generales */
    .hero-text h1 { font-size: 2.2rem; }
    .grid-3 { grid-template-columns: 1fr; }
    .hero { background-attachment: scroll !important; height: auto; padding: 100px 0; }
    .benefits { top: 0; margin-top: -50px; }
    .form-row { display: block; }
    .btn { width: 100%; margin-bottom: 10px; margin-left: 0; }
    
    /* Menú de Navegación */
    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100vw;
        background: var(--black);
        flex-direction: column;
        gap: 0;
        z-index: 999;
    }
    .nav-links.show { display: flex; top: 90px !important; }
    .menu-toggle { display: flex; }
    .logo-text { font-size: 1rem; }

    /* --- CHATBOT MÓVIL (Estilo Flotante Corregido) --- */
    .chat-widget {
        bottom: 20px;
        right: 20px;
        z-index: 10000;
    }

    /* Aquí está la clave: NO usamos top:0 ni left:0 */
    .chat-box {
        position: fixed;
        bottom: 90px; /* Flota ENCIMA del botón de abrir */
        right: 5%;    /* Un poco separado de la derecha */
        left: 5%;     /* Un poco separado de la izquierda */
        width: 90%;   /* No ocupa todo el ancho */
        height: 60vh; /* Ocupa solo el 60% de la altura de la pantalla */
        max-height: 500px;
        
        border-radius: 20px; /* Bordes redondeados bonitos */
        box-shadow: 0 10px 40px rgba(0,0,0,0.3); /* Sombra fuerte para que destaque */
        margin: 0 auto; /* Centrado */
        z-index: 10001;
    }

    /* Cabecera del chat */
    .chat-header {
        border-radius: 20px 20px 0 0; /* Redondear solo arriba */
        padding: 15px;
    }

    /* El área donde escribes */
    .chat-input-area {
        padding: 15px;
        background: white;
        border-radius: 0 0 20px 20px; /* Redondear abajo */
    }

    /* EL FIX DEL ZOOM EN EL INPUT */
    #chat-input {
        font-size: 16px !important; /* 16px evita el zoom en iPhone */
        padding: 12px; /* Área táctil más grande */
        height: 45px;  /* Altura cómoda */
    }
    
    /* Ajuste para que el botón de enviar se vea bien */
    #chat-send {
        padding: 0 20px;
        height: 45px;
    }
}



.news-ticker-section {
    padding: 4rem 0;
    background-color: var(--off-white); /* O var(--dark-grey) si lo prefieres oscuro */
}

.news-carousel-container {
    overflow-x: auto; /* Permite scroll horizontal */
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

/* Ocultar barra de scroll fea pero mantener funcionalidad */
.news-carousel-container::-webkit-scrollbar {
    height: 6px;
}
.news-carousel-container::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}

.news-grid {
    display: flex;
    gap: 25px;
    width: max-content; /* Se estira según el contenido */
}

.news-card {
    width: 300px; /* Ancho fijo por tarjeta */
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Evita que se aplasten */
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-date {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 700;
}

.news-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    line-height: 1.4;
    color: var(--black);
}

.news-excerpt {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    flex-grow: 1;
}

.read-more {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/*Testimonial Section*/
/* =========================================
   13. SECCIÓN TESTIMONIOS (NUEVO)
   ========================================= */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 20px;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.03); /* Fondo muy sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem;
    border-radius: 4px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.06);
}

.quote-icon {
    font-family: 'Times New Roman', serif;
    font-size: 5rem;
    color: var(--primary);
    opacity: 0.3;
    line-height: 1;
    position: absolute;
    top: 10px;
    left: 20px;
}

.testimonial-text {
    font-size: 1.05rem;
    color: #dcdcdc; /* Blanco no puro para leer mejor */
    font-style: italic;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
    padding-top: 1rem;
}

.testimonial-text strong {
    color: var(--white);
    font-weight: 600;
}

.testimonial-author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.author-info h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 2px;
    font-weight: 600;
}

.author-info span {
    color: var(--primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stars {
    color: var(--primary);
    letter-spacing: 2px;
}



/* =========================================
   14. SECCIÓN NOSOTROS (SLIDER FONDO)
   ========================================= */
.section-nosotros {
    position: relative;
    padding: 6rem 0; /* Mismo padding que antes */
    overflow: hidden;
    color: var(--white); /* Texto blanco por defecto */
}

/* El contenedor de las imágenes */
.nosotros-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Cada diapositiva */
.nosotros-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s ease-in-out, transform 8s ease; /* Transición muy lenta y suave */
    transform: scale(1);
}

.nosotros-slide.active {
    opacity: 1;
    transform: scale(1.1); /* Zoom suave */
}

/* Capa oscura (Overlay) más fuerte que en el hero para leer bien el texto pequeño */
.nosotros-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* 75% de oscuridad */
    z-index: 1;
}

/* El contenido debe estar encima de todo */
.relative-content {
    position: relative;
    z-index: 2;
}

/* Ajuste visual para la lista en modo oscuro */
.philosophy-list li {
    border-left: 2px solid var(--primary); /* Asegurar que la línea naranja se ve */
    margin-bottom: 15px;
}