/* --- Paleta de Colores ASECASA --- */
:root {
    --color-primario: #0a3d5f;   
    --color-acento: #3d89b3;     
    --color-fondo: #f4f4f4;      
    --color-texto: #333333;      
    --color-blanco: #ffffff;
    --font-principal: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --color-linea: #4facfe;
}

/* --- Reseteo Básico y Tipografía --- */
body {
    margin: 0;
    font-family: var(--font-principal);
    background-color: var(--color-blanco);
    color: var(--color-texto);
    -webkit-font-smoothing: antialiased; 
}

*, *:before, *:after {
    box-sizing: border-box; 
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, p { margin: 0; } 

/* --- Estilos del Navbar (Header) --- */
.navbar {
    background-color: var(--color-blanco);
    border-bottom: 1px solid #ddd;
    padding: 1rem 2rem; 
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
}

.navbar-logo img {
    width: 180px; 
    height: auto; 
    max-height: 70px; 
    vertical-align: middle;
}

.navbar-mobile-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1; 
    justify-content: space-between; 
}
.navbar-menu {
    display: flex;
    justify-content: center;
    flex-grow: 1; 
}
.navbar-menu ul {
    display: flex;
    gap: 1.5rem; 
    font-weight: 500;
    font-size: 0.95rem;
}
.navbar-menu a:hover {
    color: var(--color-acento);
}
.navbar-menu a.active {
    color: var(--color-acento);
    font-weight: 700;
    /* Opcional: Una pequeña línea debajo para resaltar más */
    border-bottom: 2px solid var(--color-acento);
    padding-bottom: 3px;
}

/* --- Estilos del Contacto y Botón CTA --- */
.navbar-contact {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.95rem; /* Un poco más grande */
    font-weight: 600;   /* Texto más grueso */
    color: var(--color-primario); /* Color azul oscuro para el número */
    /* V-- ESTA ES LA CLAVE: EMPUJA EL TELÉFONO A LA DERECHA --V */
    margin-left: 0.5rem;
}

/* Estilo específico para el texto del teléfono (opcional, si quieres el icono de color distinto) */
.navbar-contact span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}

.navbar-phone-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none; /* Quita el subrayado típico de los enlaces */
    color: var(--color-primario); /* Mantiene tu color azul oscuro */
    transition: color 0.3s ease;
}

.navbar-phone-link:hover {
    color: var(--color-acento); /* Cambia a celeste al pasar el mouse */
    cursor: pointer;
}

/* --- NUEVO BOTÓN CTA "PÍLDORA" --- */
.navbar-cta {
    /* Degradado elegante (mismo que tus Hero sections) */
    background: linear-gradient(135deg, var(--color-primario) 0%, #051a30 100%);
    color: var(--color-blanco);
    padding: 0.8rem 1.8rem; /* Más padding lateral para forma alargada */
    border-radius: 50px;    /* Borde completamente redondo (Píldora) */
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase; /* Opcional: Texto en mayúsculas se ve moderno */
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(11, 43, 82, 0.3); /* Sombra azul suave */
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Prepara para el hover */
}

.navbar-cta:hover {
    /* Al hacer hover, sube y la sombra crece */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(11, 43, 82, 0.4);
    /* Opcional: Borde brillante al hover */
    background: linear-gradient(135deg, #0e3b6e 0%, var(--color-primario) 100%);
}

.navbar-toggle { display: none; }

/* --- Estilos del Hero Section --- */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: var(--color-blanco);
    min-height: 550px; 
    align-items: center;
    position: relative; 
    overflow: hidden; 
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, var(--color-primario) 0%, #08314d 100%);
    background-size: 20px 20px; 
}

.hero-content {
    padding: 4rem;
    position: relative; 
    z-index: 2;
}

.hero-content h1::before {
    content: '';
    display: block;
    width: 80px; 
    height: 4px;  
    background-color: var(--color-acento);
    margin-bottom: 1.5rem; 
}

.hero-content h1 {
    font-size: 3.8rem; 
    margin-bottom: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-content h1 strong {
    color: var(--color-acento);
    font-weight: 800; 
}

.hero-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 2.5rem;
    font-weight: 400;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.cta-button-hero {
    background-color: var(--color-acento);
    color: var(--color-blanco);
    padding: 1rem 2rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-block; 
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.cta-button-hero:hover {
    background-color: #5aa6d1;
    transform: translateY(-2px); 
}

.hero-image-container {
    position: relative;
    height: 100%;
    min-height: 550px;
    background-image: url('../images/hero-image.png'); 
    background-size: cover;
    background-position: center 70%; 
    z-index: 1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================= */
/* === ESTILOS DEL CARRUSEL DE LOGOS === */
/* ========================================= */
.logo-carousel-section {
    padding: 4rem 2rem; 
    background-color: var(--color-blanco);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primario);
    text-align: center;
    margin-bottom: 3rem;
}

.logo-swiper {
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;
    padding-bottom: 3rem; 
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px; 
}

.swiper-slide img {
    width: auto; 
    height: 100%; 
    max-width: 100%; 
    object-fit: contain; 
    filter: grayscale(100%); 
    opacity: 0.6;
    transition: all 0.3s ease;
}

.swiper-slide:hover img {
    filter: grayscale(0%); 
    opacity: 1;
    transform: scale(1.1);
}

.swiper-pagination-bullet {
    background-color: #ccc;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-acento);
}

/* ========================================= */
/* === ESTILOS DEL FOOTER === */
/* ========================================= */
.footer {
    background-color: var(--color-primario);
    color: rgba(255, 255, 255, 0.8); 
    padding: 4rem 2rem;
    margin-top: 4rem; 

    background-color: var(--color-primario);
    background-image: repeating-linear-gradient(
        -45deg, 
        rgba(255, 255, 255, 0.02), 
        rgba(255, 255, 255, 0.02) 2px, 
        transparent 2px, 
        transparent 10px
    );
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
}

.footer-col {
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-col img {
    width: 200px; 
    margin-bottom: 1rem;
}

.footer-copyright {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 1rem;
}

.footer-col h3 {
    color: var(--color-blanco);
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
}

.footer-col p {
    margin-bottom: 0.5rem;
}

/* --- Iconos Sociales (Corregido con FontAwesome) --- */
.footer-social-icons {
    display: flex;
    gap: 1rem;
}

.footer-social-icons a {
    display: flex;              /* Centrado perfecto */
    justify-content: center;    /* Centrado horizontal */
    align-items: center;        /* Centrado vertical */
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil */
    border-radius: 50%;         /* Círculo perfecto */
    color: var(--color-blanco); /* Color del icono */
    font-size: 1.1rem;          /* Tamaño del icono */
    transition: all 0.3s ease;
    text-decoration: none;      /* Quita subrayados */
}

/* Efecto Hover */
.footer-social-icons a:hover {
    background-color: var(--color-acento); /* Fondo azul claro */
    border-color: var(--color-acento);
    transform: translateY(-3px); /* Pequeña elevación */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra al flotar */
}

/* ========================================= */
/* === ESTILOS SERVICIOS (V8 - Landing Page) === */
/* ========================================= */

/* --- 1. HERO SECTION (Impacto Visual) --- */
.service-hero-section {
    position: relative;
    /* Usamos un gradiente azul oscuro por si la imagen no carga o como base */
    background: linear-gradient(135deg, var(--color-primario) 0%, #051a30 100%);
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-blanco);
    overflow: hidden;
}

/* Opcional: Si quieres una imagen de fondo sutil, podrías descomentar esto:
.service-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../img/hero-bg-pattern.png'); 
    opacity: 0.1;
}
*/

.service-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.service-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.service-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.hero-accent-line {
    width: 80px;
    height: 5px;
    background-color: var(--color-linea); /* Tu azul claro */
    margin: 0 auto;
    border-radius: 3px;
}


/* --- 2. GRID DE SERVICIOS (Limpieza) --- */
.service-grid-full-section {
    padding: 4rem 2rem;
    background-color: var(--color-fondo); /* Gris claro */
    margin-top: -3rem; /* Efecto visual: sube un poco sobre el hero */
}

.service-grid-full-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Grid responsivo: 4 columnas en PC, 2 en Tablet, 1 en Móvil */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 3;
}


/* --- Tarjetas (Estilo Refinado) --- */
.service-card {
    background-color: var(--color-blanco);
    padding: 2.5rem 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 3px solid transparent; /* Borde invisible abajo */
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-bottom-color: var(--color-linea); /* Aparece línea azul al hover */
}

.service-card-icon {
    font-size: 2.5rem;
    color: var(--color-acento);
    margin-bottom: 1.5rem;
}

.service-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.service-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}


/* --- 3. SECCIÓN "POR QUÉ NOSOTROS" (El Balance) --- */
.why-us-section {
    padding: 5rem 2rem;
    background-color: var(--color-blanco);
}

.why-us-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Texto | Imagen */
    gap: 4rem;
    align-items: center;
}

.why-us-text h2 {
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
    font-weight: 800;
}

.why-us-text .lead-text {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2rem;
}

.why-us-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
}

.why-us-list li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--color-texto);
}

.why-us-list li i {
    color: var(--color-linea); /* Checkmark azul claro */
    font-size: 1.2rem;
    margin-right: 1rem;
}

/* Botón CTA dentro de la sección */
.cta-button-filled {
    display: inline-block;
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}
.cta-button-filled:hover {
    background-color: var(--color-acento);
}

.why-us-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 20px 20px 0px rgba(10, 61, 95, 0.1); /* Sombra sólida decorativa */
}


/* --- RESPONSIVO --- */
@media (max-width: 992px) {
    .service-grid-full-container {
        grid-template-columns: 1fr 1fr; /* 2 columnas en Tablet */
    }
    .why-us-container {
        grid-template-columns: 1fr; /* 1 columna en Tablet/Móvil */
        text-align: center;
    }
    .why-us-list li {
        justify-content: center; /* Centrar lista en móvil */
    }
    .why-us-image {
        margin-top: 2rem;
        order: -1; /* Poner imagen arriba en móvil si quieres, o quita esta línea */
    }
}

@media (max-width: 600px) {
    .service-hero-content h1 { font-size: 2.5rem; }
    .service-grid-full-container {
        grid-template-columns: 1fr; /* 1 columna en Móvil */
    }
}

/* ========================================= */
/* === ESTILOS PÁGINA DE NOSOTROS === */
/* ========================================= */

/* --- Sección "Nosotros" (Texto + Imagen) --- */
.about-main-section {
    padding: 2rem 2rem;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-text-col h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primario);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.about-text-col p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1.5rem;
}

.about-text-col .cta-button-hero {
    font-size: 0.9rem; /* Botón un poco más pequeño */
}

.about-image-col img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Sección "Misión / Visión" --- */
.mission-vision-section {
    background-color: var(--color-fondo); /* Fondo gris claro */
    padding: 4rem 2rem;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mission-vision-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.mission-card, .vision-card {
    background-color: var(--color-blanco);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    
    /* V-- AGREGAMOS EL BORDE INFERIOR TRANSPARENTE --V */
    border-bottom: 3px solid transparent; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-bottom-color 0.3s ease; /* Transición para el color del borde */
}

/* V-- AGREGAMOS LA LÍNEA AZUL AL HOVER --V */
.mission-card:hover, .vision-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border-bottom-color: var(--color-linea); /* ¡Tu línea celeste! */
}

.card-icon {
    font-size: 2.5rem;
    color: var(--color-acento);
    margin-bottom: 1rem;
}

.mission-card h3, .vision-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.mission-card p, .vision-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* --- Sección "Metodología" --- */
.process-section {
    padding: 4rem 2rem;
    background-color: var(--color-primario);
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, var(--color-primario) 0%, #08314d 100%);
    background-size: 20px 20px;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

.process-container .section-title {
    color: var(--color-blanco); /* Título blanco */
}

.process-steps-wrapper {
    max-width: 1200px;
    margin: 2rem auto 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 1rem;
}

.process-step {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    padding: 0 1rem;
}

/* La línea de conexión */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 35px; /* A la mitad del icono */
    right: -50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background: var(--color-acento);
    opacity: 0.5;
    z-index: 1;
}

.process-step-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem auto;
    background-color: var(--color-blanco);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: var(--color-primario);
    box-shadow: 0 0 0 5px var(--color-acento);
    position: relative;
    z-index: 2; /* Por encima de la línea */
}

.process-step h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-blanco);
    margin-bottom: 0.5rem;
}

.process-step p {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- Responsivo para "Nosotros" --- */
@media (max-width: 900px) {
    .about-container {
        grid-template-columns: 1fr; /* 1 columna */
    }
    .about-image-col {
        order: -1; /* Pone la imagen primero */
    }
    .mission-vision-container {
        grid-template-columns: 1fr; /* 1 columna */
    }
    .process-steps-wrapper {
        grid-template-columns: 1fr; /* 1 columna */
        gap: 2rem;
    }
    .process-step:not(:last-child)::after {
        display: none; /* Oculta la línea en móvil */
    }
}

/* ========================================= */
/* === ESTILOS PÁGINA DE CONTACTANOS === */
/* ========================================= */

/* --- 1. NUEVO HERO SECTION (Estilo Unificado) --- */
.contact-hero-section {
    position: relative;
    background: linear-gradient(135deg, var(--color-primario) 0%, #051a30 100%);
    padding: 3rem 2rem; /* Ajuste de 3rem */
    text-align: center;
    color: var(--color-blanco);
}

.contact-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.contact-hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-blanco);
}

.contact-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    color: var(--color-blanco);
}

.hero-accent-line {
    width: 80px;
    height: 5px;
    background-color: var(--color-linea);
    margin: 0 auto;
    border-radius: 3px;
}


/* --- 2. SECCIÓN DE CONTACTO (Layout) --- */
.contact-section {
    padding: 4rem 2rem; /* Un poco más de espacio vertical */
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* 60% Form, 40% Info */
    gap: 3rem;
}

.contact-form-col h2,
.contact-info-col h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primario);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.contact-form-col p,
.contact-info-col p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 2rem;
}

/* --- Estilos del Formulario --- */
.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: var(--font-principal);
    font-size: 0.95rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(61, 137, 179, 0.2);
}

.contact-form textarea {
    resize: vertical; /* Permite al usuario ajustar la altura */
}

/* --- Estilos de la Info de Contacto --- */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.contact-info-list i {
    font-size: 1.5rem;
    color: var(--color-acento);
    margin-top: 5px;
    width: 25px; /* Ancho fijo para alinear el texto */
    text-align: center;
}

.contact-info-list div {
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
    line-height: 1.6;
}

.contact-info-list div strong {
    color: var(--color-primario);
    font-weight: 700;
}

.contact-map iframe {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    filter: grayscale(80%); /* Estilo de mapa profesional */
    transition: filter 0.3s ease;
    border: 0;
}

.contact-map iframe:hover {
    filter: grayscale(0%);
}

/* --- Sección de Equipo --- */
.team-section {
    padding: 4rem 2rem;
    background-color: var(--color-fondo); /* Fondo gris claro */
}

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

.team-container .section-title {
    color: var(--color-primario); /* Título oscuro en fondo claro */
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team-member {
    text-align: center;
    background-color: var(--color-blanco);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 4px solid var(--color-acento);
}

.team-member h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primario);
    margin: 0 0 0.25rem 0;
}

.team-member span {
    font-size: 0.9rem;
    color: var(--color-acento);
    font-weight: 500;
}

/* --- Responsivo para "Contacto" --- */
@media (max-width: 900px) {
    .contact-container {
        grid-template-columns: 1fr; /* 1 columna */
    }
}



/* ========================================= */
/* === ESTILOS PÁGINA "COTIZA" (Hero + Gateway) === */
/* ========================================= */

/* --- 1. NUEVO HERO SECTION (Fondo Oscuro) --- */
.cotiza-hero-section {
    position: relative;
    /* Mismo degradado que en Servicios */
    background: linear-gradient(135deg, var(--color-primario) 0%, #051a30 100%);
    padding: 3rem 2rem; /* Tu ajuste de tamaño */
    text-align: center;
    color: var(--color-blanco);
}

.cotiza-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.cotiza-hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-blanco);
}

.cotiza-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    color: var(--color-blanco);
}

/* Línea de acento (reutilizamos el estilo, pero lo definimos aquí por seguridad) */
.hero-accent-line {
    width: 80px;
    height: 5px;
    background-color: var(--color-linea);
    margin: 0 auto;
    border-radius: 3px;
}


/* --- 2. ESTILOS GATEWAY (Tus estilos originales) --- */
.gateway-section {
    padding: 4rem 2rem; /* Ajustado a 4rem para dar aire, puedes bajarlo a 2rem si prefieres */
    background-color: var(--color-fondo);
}

.gateway-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.gateway-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--color-blanco);
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.gateway-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: var(--color-acento);
}

/* --- Tus estilos para imágenes circulares --- */
.gateway-image-wrapper {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-fondo);
}

.gateway-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gateway-card h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-top: 0;
    margin-bottom: 1rem;
}

.gateway-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    flex-grow: 1;
    margin-bottom: 2rem;
}

.gateway-card .cta-button-hero {
    width: 80%;
}

/* --- Responsivo --- */
@media (max-width: 900px) {
    .gateway-container {
        grid-template-columns: 1fr;
    }
}

/* ============================================= */
/* === ESTILOS PÁGINA "COTIZA INDIVIDUAL"    === */
/* ============================================= */

/* --- 1. NUEVO HERO SECTION (Estilo Unificado) --- */
.individual-hero-section {
    position: relative;
    /* Mismo degradado oscuro */
    background: linear-gradient(135deg, var(--color-primario) 0%, #051a30 100%);
    padding: 3rem 2rem; /* Ajuste de 3rem */
    text-align: center;
    color: var(--color-blanco);
}

.individual-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.individual-hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-blanco);
}

.individual-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    color: var(--color-blanco);
}

/* Reutilizamos la clase de la línea de acento */
.hero-accent-line {
    width: 80px;
    height: 5px;
    background-color: var(--color-linea);
    margin: 0 auto;
    border-radius: 3px;
}


/* --- 2. SECCIÓN DE PRODUCTOS --- */
.product-section {
    padding: 4rem 2rem;
    background-color: var(--color-fondo); /* Fondo gris claro */
}

/* Título dentro del modal (Mantenemos el estilo oscuro para el modal) */
.product-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
}

.product-section-subtitle {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
}

/* Contenedor de tarjetas */
.product-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* --- 3. TARJETAS DE PRODUCTO --- */
.product-card {
    background-color: var(--color-blanco);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Para que la imagen respete el borde redondeado */
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.product-card img {
    width: 100%;
    height: 220px; /* Un poco más alto para que luzca la foto */
    object-fit: cover;
}

.product-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-top: 0;
    margin-bottom: 1rem;
}

.product-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.product-card .cta-button-hero {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
    align-self: flex-start;
    text-align: center;
}

/* --- Responsivo --- */
@media (max-width: 900px) {
    .product-container {
        grid-template-columns: 1fr;
    }
    .individual-hero-content h1 {
        font-size: 2.5rem;
    }
}

/* ============================================= */
/* === ESTILOS FORMULARIOS DE COTIZACIÓN     === */
/* ============================================= */

.form-header {
    margin-bottom: 3rem;
}

.form-header-icon {
    font-size: 3.5rem;
    color: var(--color-acento);
    margin-bottom: 1.5rem;
}

/* El contenedor del formulario */
.quote-form {
    width: 100%;
}

.form-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-acento);
}

/* Grid para los campos del formulario */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.5rem;
}

/* --- V-- AQUÍ EMPIEZA LA MEJORA --V --- */

/* 1. Estilo UNIVERSAL para todos los campos (Texto, Fecha, Select, Email, etc.) */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 8px; /* Mantenemos tus bordes de 8px */
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
    
    /* Esto asegura que la fecha y el select tengan la misma altura que el texto */
    min-height: 48px; 
}

/* 2. Efecto al hacer clic (Focus) */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* 3. Estilo especial para SELECT (La lista desplegable) */
.form-group select {
    appearance: none;        /* Borra la flecha gris estándar */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    
    /* Agregamos una flecha moderna SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
    padding-right: 2.5rem; /* Espacio para que el texto no tape la flecha */
}

/* 4. Ajuste para Textarea (por si agregamos comentarios después) */
.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* -------------------------------------- */

/* Para utilidades de margen */
.mt-3 {
    margin-top: 2rem;
}

/* --- Responsivo para Formularios --- */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }

    .quote-form {
        padding: 1.5rem;
    }
}

/* ============================================= */
/* === ESTILOS DE LA MODAL                   === */
/* ============================================= */

.modal-overlay {
    position: fixed; /* Se superpone a todo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Por encima de todo */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Usamos la clase .hidden que ya existe para ocultar la modal 
  (Reemplaza display: none !important por esto si no funciona)
*/
.modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.modal-content {
    position: relative;
    background-color: var(--color-blanco);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    width: 90%; /* Ancho en móviles */
    max-width: 800px; /* Ancho máximo (el que tenía el form) */
    
    /* Para scrolling en pantallas pequeñas */
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.5rem;
    font-weight: 300;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.modal-close-btn:hover {
    color: #333;
}

/* --- Utilidades para el Modal --- */
.hidden {
    display: none !important;
}

.modal-overlay {
    /* Tus estilos actuales del fondo oscuro... */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    /* Para centrar el contenido: */
    display: flex; 
    justify-content: center;
    align-items: center;
}

/* ========================================= */
/* === LÓGICA DE ANIMACIÓN (Fade-In) === */
/* ========================================= */

/* El estado inicial (oculto) para CUALQUIER elemento con .fade-in */
/* (Esto se aplica a .service-card y a las secciones de "Nosotros") */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* El estado final (visible) que añade el JavaScript */
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================= */
/* === ¡DISEÑO RESPONSIVO (MÓVIL)! === */
/* ========================================= */
@media (max-width: 1024px) {
    
    .navbar-container {
        flex-wrap: wrap; 
    }

    .navbar-mobile-wrapper {
        display: none; 
        flex-direction: column;
        width: 100%;
        background-color: var(--color-blanco);
        position: absolute;
        top: 97px; 
        left: 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        padding: 1rem 0;
        align-items: flex-start; 
    }

    .navbar-mobile-wrapper.active {
        display: flex;
    }

    .navbar-menu {
        flex-grow: 0;
        width: 100%;
    }

    .navbar-menu ul {
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-menu li a {
        display: block;
        padding: 0.75rem 2rem; 
    }

    .navbar-contact {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
        margin-top: 1rem;
        padding: 1rem 2rem;
        border-top: 1px solid #eee;
        align-items: flex-start;
    }

    .navbar-cta {
        width: 90%; 
        text-align: center;
        margin: 0 auto;
    }

    .navbar-toggle { 
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .navbar-toggle span {
        width: 100%;
        height: 3px;
        background-color: var(--color-primario);
        border-radius: 3px;
        transition: all 0.3s ease;
    }
    
    .navbar-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .navbar-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .navbar-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }


    /* --- Hero en Móvil (1 Columna) --- */
    .hero {
        grid-template-columns: 1fr; 
    }

    .hero-content {
        padding: 2.5rem;
        text-align: center;
    }
    
    .hero-content h1::before {
        margin: 0 auto 1.5rem auto; 
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1rem;
        max-width: 100%;
    }
    
    .hero-image-container {
        min-height: 300px;
    }

    /* --- Footer en Móvil --- */
    @media (max-width: 900px) {
        .footer-container {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 600px) {
        .footer-container {
            grid-template-columns: 1fr;
        }
    }
}

/* ========================================= */
/* === UTILIDADES GLOBALES (Helpers)     === */
/* ========================================= */

.text-center {
    text-align: center;
}

.section--nopad-top {
    padding-top: 0;
}

.hidden {
    display: none !important; /* !important para asegurar que se oculte */
}

/* ========================================= */
/* === BOTÓN FLOTANTE WHATSAPP === */
/* ========================================= */

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10000; /* Asegura que flote sobre TODO */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    
    /* Animación de latido */
    animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float:hover {
    background-color: #128c7e; /* Verde más oscuro al pasar el mouse */
    transform: scale(1.1); /* Crece un poquito */
    color: #fff;
}

/* Definición de la animación */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Ajuste para móviles (un poco más pequeño y pegado a la orilla) */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
        font-size: 30px;
    }
}

/* ========================================= */
/* === ESTILOS DEL MENÚ DESPLEGABLE      === */
/* ========================================= */

.nav-item-dropdown {
    position: relative;
}

.dropdown-arrow {
    font-size: 0.8rem;
    margin-left: 5px;
}

/* 1. EL CUADRO DEL SUBMENÚ (Blindado con alta prioridad) */
body .nav-item-dropdown .dropdown-menu,
body .navbar-mobile-wrapper .nav-item-dropdown .dropdown-menu {
    display: none !important; /* Oculto sí o sí */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    min-width: 250px;
    z-index: 2000;
    border-radius: 8px;
    padding: 10px 0;
    margin: 0;
    list-style: none;
}

/* 2. LAS OPCIONES */
body .nav-item-dropdown .dropdown-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .nav-item-dropdown .dropdown-menu li a {
    display: block !important;
    padding: 12px 20px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    text-align: left !important;
    transition: background-color 0.3s, color 0.3s;
}

body .nav-item-dropdown .dropdown-menu li a:hover {
    background-color: #f4f6f9 !important;
    color: var(--color-primario) !important;
}

/* === 3. COMPORTAMIENTO EN COMPUTADORA (Hover) === */
@media (min-width: 769px) {
    body .nav-item-dropdown:hover .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        animation: fadeIn 0.3s ease;
    }
}

/* === 4. COMPORTAMIENTO EN CELULARES (Tap) === */
@media (max-width: 768px) {
    body .navbar-mobile-wrapper .nav-item-dropdown .dropdown-menu,
    body .nav-item-dropdown .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        background-color: #f0f4f8 !important;
        padding-left: 15px !important;
        margin-top: 5px !important;
        width: 100% !important;
        /* Reafirmamos que debe estar oculto al abrir el menú de hamburguesa */
        display: none !important; 
    }
    
    /* === LA MAGIA DEL TAP === */
    /* Solo cuando JS le agregue la clase '.active' se va a mostrar */
    body .navbar-mobile-wrapper .nav-item-dropdown .dropdown-menu.active,
    body .nav-item-dropdown .dropdown-menu.active {
        display: flex !important;
        flex-direction: column !important;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}