/* =========================================
   VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================= */
:root {
    --azul: #0061af; 
    --azul-dark: #004a87;
    --rojo: #ff4b2b; 
    --blanco: #ffffff;
    --gris-fondo: #f8f9fa;
    --texto-oscuro: #333333;
    --texto-suave: #666666;
    --transicion: all 0.3s ease;
}

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

/* Evita desbordamiento y necesidad de zoom en móviles */
html, body {
    width: 100%;
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
    color: var(--texto-oscuro);
    line-height: 1.6;
    background-color: var(--blanco);
    scroll-behavior: smooth;
}

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

/* =========================================
   HEADER PROFESIONAL (COMPACTO Y PEGAJOSO)
   ========================================= */
header {
    background-color: var(--azul);
    padding-top: 15px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 100%;
}

.logo-container {
    margin-bottom: 8px;
}

.logo-container img {
    max-width: 200px;
    margin: 0 auto;
    mix-blend-mode: multiply; 
}

nav {
    background-color: var(--azul);
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Clave para el ajuste en celular */
    gap: 15px;
    padding: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: var(--blanco);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: var(--transicion);
    letter-spacing: 0.5px;
}

nav ul li a:hover, 
nav ul li a.active {
    color: #00d9ff;
}

/* Botón de Asistencia con Pulso */
.asistencia-btn {
    background-color: var(--rojo) !important;
    padding: 6px 14px;
    border-radius: 5px;
    animation: pulse-red 2s infinite;
    box-shadow: 0 4px 10px rgba(255, 75, 43, 0.4);
}

@keyframes pulse-red {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* =========================================
   HERO SECTION Y BOTONES (CORRECCIÓN DE COLOR)
   ========================================= */
.hero {
    height: 70vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=1500&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 20px;
}

.hero h1 { font-size: 2.8rem; font-weight: 700; margin-bottom: 20px; }
.hero p { font-size: 1.1rem; max-width: 700px; margin-bottom: 30px; }

/* Corrección para que los botones siempre tengan fondo en celular y PC */
.btn-primary, .btn-emergency {
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block !important;
    margin: 8px;
    transition: var(--transicion);
}

.btn-primary { 
    background-color: var(--rojo) !important; 
    color: var(--blanco) !important; 
}

.btn-emergency { 
    background-color: var(--blanco) !important; 
    color: var(--rojo) !important; 
}

.btn-primary:hover { background-color: #e63e20 !important; }
.btn-emergency:hover { background-color: #f0f0f0 !important; }

/* =========================================
   SECCIONES Y TARJETAS (DETALLES MANTENIDOS)
   ========================================= */
.section-padding { padding: 60px 0; }
.container { width: 90%; max-width: 1100px; margin: auto; }

.section-title { text-align: center; margin-bottom: 40px; position: relative; }
.section-title h2 { font-size: 2rem; color: var(--azul); font-weight: 700; text-transform: uppercase; }

/* Línea roja corregida (debajo del texto) */
.underline { 
    width: 50px; 
    height: 4px; 
    background: var(--rojo); 
    margin: 10px auto 20px; 
}

.about-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.about-text, .about-image { flex: 1; min-width: 300px; }
.about-image img { border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

/* Grid de Productos */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
}

.service-card {
    background: white;
    padding: 35px 20px;
    border-radius: 15px;
    text-align: center;
    transition: var(--transicion);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.service-card i { font-size: 2.5rem; color: var(--azul); margin-bottom: 15px; }

/* =========================================
   AJUSTES PARA MÓVIL (SÚPER COMPACTO)
   ========================================= */
@media (max-width: 768px) {
    header {
        padding-top: 8px; /* Menú mucho más fino arriba */
    }

    .logo-container { margin-bottom: 4px; }
    .logo-container img { max-width: 140px; } /* Logo pequeño en móvil */

    nav { padding: 4px 0; }
    nav ul { gap: 8px; padding-bottom: 5px; }

    nav ul li a {
        font-size: 0.68rem; /* Tamaño compacto para que no tape la pantalla */
        letter-spacing: -0.2px;
    }

    .asistencia-btn {
        padding: 4px 10px;
        font-size: 0.65rem !important;
    }

    /* Evita el bloqueo del 50% de la pantalla */
    .hero { height: 55vh; padding-top: 20px; }
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 0.95rem; }

    /* Los botones de la portada se adaptan al ancho del móvil */
    .btn-primary, .btn-emergency {
        width: 85%;
        margin: 5px auto;
        padding: 10px;
    }

    .about-flex {
        flex-direction: column-reverse;
        text-align: center;
    }
}

/* =========================================
   FOOTER Y WHATSAPP
   ========================================= */
footer {
    background-color: #111;
    color: #999;
    padding: 30px;
    text-align: center;
}

.wsp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* =========================================
   ESTILOS PARA LA SECCIÓN DE ASEGURADORAS
   ========================================= */

/* Contenedor Grid Principal */
.insurers-grid {
    display: grid;
    /* Crea columnas que se ajustan automáticamente, mínimo 180px de ancho */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px; /* Espacio entre tarjetas */
    margin-top: 40px;
}

/* Estilo Base de la Tarjeta de Aseguradora (Combinando con productos) */
.insurer-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px; /* Bordes redondeados como productos */
    text-align: center;
    transition: var(--transicion); /* Animación suave en hover */
    /* Sombra suave idéntica a tus tarjetas de productos */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0; /* Borde sutil opcional */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Efecto Hover (se eleva un poco) */
.insurer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Contenedor del Logo */
.insurer-logo-box {
    width: 100%;
    height: 80px; /* Altura fija para alinear logos */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    overflow: hidden; /* Recorta si el logo es muy grande */
}

/* Estilo de la Imagen del Logo */
.insurer-logo {
    max-width: 80%; /* No permite que el logo ocupe todo el ancho */
    max-height: 100%; /* No permite que supere la altura del contenedor */
    object-fit: contain; /* Mantiene la proporción del logo sin deformarlo */
    /* mix-blend-mode: multiply; */ /* Opcional: si los logos tienen fondo blanco, esto ayuda a integrarlos */
}

/* Marcador de posición de texto si no hay logo */
.temp-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--azul);
    background-color: #f0f8ff;
    padding: 10px 20px;
    border-radius: 8px;
}

/* Estilo del Nombre de la Aseguradora (H3) */
.insurer-card h3 {
    font-size: 1.1rem;
    color: var(--azul-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Ajustes para Celulares */
@media (max-width: 480px) {
    .insurers-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Columnas más pequeñas en móvil */
        gap: 15px;
    }
    
    .insurer-card {
        padding: 15px;
    }
    
    .insurer-logo-box {
        height: 60px; /* Logos más pequeños en móvil */
    }
    
    .insurer-card h3 {
        font-size: 0.9rem;
    }
}


/* =========================================
   ESTILOS DE UBICACIÓN Y FOOTER
   ========================================= */

/* Contenedor del Mapa */
.map-container {
    width: 100%;
    border-radius: 15px; /* Mismo redondeado que tus tarjetas de productos */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Sombra premium */
    margin-top: 20px;
    border: 1px solid #eee;
}

.address-text {
    color: var(--texto-suave);
    margin-top: 10px;
    font-size: 1rem;
}

.address-text i {
    color: var(--rojo); /* Icono de ubicación en rojo corporativo */
    margin-right: 8px;
}

/* Footer Principal */
.main-footer {
    background-color: var(--azul-dark);
    color: white;
    padding: 40px 0 20px;
    margin-top: 50px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Estilo de Redes Sociales */
.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: var(--transicion);
}

.social-icon:hover {
    background: var(--rojo); /* Cambio a rojo al pasar el mouse */
    transform: translateY(-3px);
    color: white;
}

/* Ajustes para Celular */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .map-container iframe {
        height: 300px; /* Mapa más pequeño en móviles */
    }
}

/* =========================================
   CORRECCIÓN DEFINITIVA DE ALINEACIÓN
   ========================================= */

.about-text ul {
    list-style: none; /* Elimina puntos residuales y viñetas */
    padding: 0;
    margin: 20px auto; /* Centra el bloque completo bajo el párrafo */
    display: table; /* Ajusta el ancho al contenido para permitir el centrado */
}

.about-text ul li {
    display: flex;
    align-items: center; /* Alinea el icono de visto con el texto */
    gap: 12px; /* Espacio uniforme entre el check y el texto */
    margin-bottom: 12px;
    font-size: 1.05rem;
    text-align: left; /* El texto se mantiene ordenado a la izquierda */
}

.about-text ul li i {
    color: #0061af; /* Color azul corporativo de iSeguros */
    min-width: 25px; /* Evita que los iconos se muevan si el texto varía */
    display: flex;
    justify-content: center;
}

/* =========================================
   AJUSTE DEL MAPA (MITAD DE TAMAÑO EN PC)
   ========================================= */
.map-container {
    width: 100%; /* Permite que sea flexible en el celular */
    max-width: 600px; /* Aquí controlas el tamaño en la compu (la mitad del ancho común) */
    margin: 30px auto; /* El "auto" lo mantiene centrado horizontalmente */
    border-radius: 15px; 
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

/* Ajuste del iframe para que no sea tan alto en PC */
.map-container iframe {
    width: 100%;
    height: 350px; /* Reduje un poco la altura para que se vea más estético */
    display: block;
}

/* Ajuste específico para que en el CELULAR siga ocupando casi todo el ancho */
@media (max-width: 768px) {
    .map-container {
        max-width: 95%; /* En celular se expande para aprovechar el espacio */
        margin: 20px auto;
    }
    
    .map-container iframe {
        height: 300px; /* Altura ideal para pantallas táctiles */
    }
}

/* =========================================
   ESTILO LÍNEA ROJA (UNDERLINE)
   ========================================= */
.underline {
    width: 60px;          /* Ancho de la línea */
    height: 4px;          /* Grosor de la línea */
    background-color: #ff4b2b; /* Color rojo de tu marca */
    margin: 15px auto;    /* Margen: 15px arriba/abajo, auto para centrar */
    border-radius: 2px;  /* Bordes redondeados opcionales */
}

/* Opcional: Para asegurar que el h1 y p tengan buen espacio */
h1 { margin-bottom: 0; }
p { margin-top: 0; }


.wsp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    
    /* ESTAS LÍNEAS BORRAN LA RAYA BLANCA */
    text-decoration: none !important; /* Quita el subrayado del enlace */
    display: flex;                   /* Centra el icono perfectamente */
    justify-content: center;
    align-items: center;
    outline: none;                   /* Quita cualquier borde de selección */
}

/* También por seguridad, quita el subrayado cuando pasas el mouse */
.wsp-float:hover, 
.wsp-float:active, 
.wsp-float:focus {
    text-decoration: none !important;
    color: #FFF;
    outline: none;
}

.wsp-float {
    position: fixed;
    width: 45px;  /* Más pequeño y discreto */
    height: 45px;
    bottom: 20px; /* Más pegado al borde inferior */
    right: 20px;  /* Más pegado al borde derecho */
    background-color: rgba(37, 211, 102, 0.6); /* Color con transparencia (difuminado) */
    color: #FFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    z-index: 1000;
    text-decoration: none !important;
    transition: all 0.4s ease; /* Transición suave */
    backdrop-filter: blur(4px); /* Efecto de desenfoque de fondo opcional */
}

.wsp-float:hover {
    background-color: rgba(37, 211, 102, 1); /* Se vuelve sólido al pasar el mouse */
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    text-decoration: none !important;
}

/* Esto asegura que la línea blanca que mencionaste no aparezca */
.wsp-float i {
    line-height: 0;
    display: block;
}


/* Estilo específico para celulares */
@media (max-width: 768px) {
    .wsp-float {
        width: 50px !important;    /* Aún más pequeño en celular */
        height: 50px !important;
        bottom: 15px !important;   /* Casi pegado al borde inferior */
        right: 15px !important;    /* Casi pegado al borde lateral */
        font-size: 20px !important;
        background-color: rgba(37, 211, 102, 0.5) !important; /* Más transparente */
    }
}


/* Sección roja ultra-delgada y minimalista */
.asistencia-hero-slim {
    background: var(--rojo);
    color: white;
    padding: 15px 10px; /* Padding mínimo para máxima delgadez */
    text-align: center;
    border-radius: 0 0 25px 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.15);
}

.asistencia-hero-slim h1 {
    font-size: 1.2rem; /* Tamaño de letra reducido */
    margin-bottom: 2px;
    font-weight: 700;
}

.asistencia-hero-slim p {
    font-size: 0.8rem; /* Párrafo muy discreto */
    margin-bottom: 8px;
    opacity: 0.85;
}

/* Buscador compacto */
.search-container {
    max-width: 380px; /* Más angosto para mayor elegancia */
    margin: 0 auto;
    position: relative;
}

.search-container i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 0.8rem;
}

#busquedaAseguradora {
    width: 100%;
    padding: 6px 12px 6px 35px; /* Altura del buscador reducida */
    border-radius: 20px;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    outline: none;
    transition: all 0.3s ease;
}

#busquedaAseguradora:focus {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

#busquedaAseguradora {
    padding: 8px 15px 8px 40px; /* Input más esbelto */
    font-size: 0.9rem;
}

<style>
    /* 1. SECCIÓN ROJA DELGADA (PC Y GENERAL) */
    .asistencia-hero-slim {
        background: var(--rojo);
        color: white;
        padding: 15px 20px !important; /* Forzamos la delgadez */
        text-align: center;
        border-radius: 0 0 30px 30px;
        margin-bottom: 25px;
        box-shadow: 0 10px 30px rgba(255, 75, 43, 0.2);
    }

    .asistencia-hero-slim h1 {
        font-size: 1.2rem !important; /* Letra pequeña en PC */
        margin-bottom: 2px;
    }

    .asistencia-hero-slim p {
        font-size: 0.85rem !important;
        margin-bottom: 10px;
        opacity: 0.9;
    }

    /* 2. BUSCADOR COMPACTO */
    .search-container {
        max-width: 400px;
        margin: 5px auto 0;
        position: relative;
    }

    #busquedaAseguradora {
        width: 100%;
        padding: 8px 15px 8px 40px;
        border-radius: 30px;
        border: none;
        font-size: 0.85rem;
        outline: none;
    }

    /* 3. AJUSTE ESPECÍFICO PARA CELULARES */
    @media (max-width: 768px) {
        .asistencia-hero-slim {
            padding: 10px 15px !important; /* Aún más delgado en móvil */
        }
        .asistencia-hero-slim h1 {
            font-size: 1.1rem !important; /* Letra más pequeña en móvil */
        }
        .asistencia-hero-slim p {
            font-size: 0.75rem !important;
            line-height: 1.2;
        }
        .search-container {
            max-width: 90%; /* Que ocupe casi todo el ancho del celular */
        }
    }

    /* Estilos de las tarjetas (Mantener igual) */
    .emergency-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 50px;
    }

    .asistencia-card {
        background: white;
        padding: 25px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border-left: 6px solid var(--rojo);
        transition: transform 0.3s ease;
    }
</style>


/* --- SISTEMA DE DESPLIEGUE ASISTENCIAS --- */

/* Contenedor de la tarjeta */
.asistencia-card {
    flex-direction: column !important; /* Permite crecimiento vertical */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alineación de la parte visible siempre */
.card-main-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Contenido oculto (Menú desplegable) */
.info-desplegable {
    max-height: 0; /* Empieza cerrado */
    opacity: 0;
    width: 100%;
    transition: all 0.4s ease;
    border-top: 0px solid transparent;
}

/* Estado activo cuando se da clic */
.asistencia-card.active {
    background: #fdfdfd;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.asistencia-card.active .info-desplegable {
    max-height: 450px; /* Suficiente para el contenido */
    opacity: 1;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* Animación de la flecha */
.asistencia-card.active .btn-expand {
    transform: rotate(180deg);
    color: var(--azul);
}

/* Estilo de los items de detalle (Grua, Horarios, etc) */
.detalle-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #555;
}

.detalle-item i {
    color: var(--rojo);
    margin-right: 8px;
    width: 18px;
    text-align: center;
}

/* Link a la página web */
.link-aseguradora {
    display: block;
    margin: 15px 0;
    color: var(--azul);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    transition: 0.3s;
}

.link-aseguradora:hover {
    text-decoration: underline;
}

/* Botón de llamada final destacado */
.btn-call-emergency {
    display: block;
    background: var(--rojo);
    color: white !important;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(255, 75, 43, 0.2);
    transition: 0.3s;
}

.btn-call-emergency:hover {
    background: var(--azul-dark);
    transform: translateY(-2px);
}
/* Estilo para los números marcables */
.detalle-item a {
    color: var(--rojo);
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.detalle-item a:hover {
    color: var(--azul);
    text-decoration: underline;
}

/* Animación de pulso y difuminado (SOLO PARA EL TÍTULO) */
@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 0px rgba(255, 255, 255, 0);
    }
    50% {
        transform: scale(1.03); 
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    }
}

/* Aplicar la animación ÚNICAMENTE al h1 del hero */
.asistencia-hero-slim h1 {
    display: inline-block;
    animation: pulseGlow 3s ease-in-out infinite !important;
    font-weight: 700;
}

/* --- Navegación: Sección Activa (BLANCA Y ESTÁTICA) --- */
/* Forzamos el color blanco en todos los estados para evitar el azul del navegador */
nav ul li a.active, 
nav ul li a.active:visited,
nav ul li a.active:hover {
    display: inline-block !important;
    transform: scale(1.08) !important; /* Resaltado sutil pero fijo */
    font-weight: 700 !important;
    color: #ffffff !important; /* Blanco puro garantizado */
    text-decoration: none !important;
    position: relative;
    animation: none !important; /* Eliminamos cualquier movimiento del menú */
    transition: transform 0.3s ease;
}

/* Franja indicadora blanca debajo del botón activo */
nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: -8px; 
    left: 15%;
    width: 70%;
    height: 4px;
    background: #ffffff !important; 
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
    opacity: 1;
}

/* Efecto Hover para las otras secciones */
nav ul li a:hover:not(.active) {
    opacity: 0.8;
    transform: translateY(-2px);
    color: #ffffff;
}


/* Ajuste específico para agrandar el logo de Sweaden por URL */
.insurer-card:has(h3:contains("SWEADEN")) .insurer-logo,
.insurer-logo[src*="sweaden"], 
.insurer-logo[alt*="Sweaden"] {
    max-height: 85px !important; /* Ajusta este número (ej. 90px o 100px) hasta que se vea bien */
    width: auto !important;
    transform: scale(1.3); /* Esto lo agranda un 30% extra de forma interna */
    transition: transform 0.3s ease;
}


/* =========================================
   NUEVA ESTÉTICA SECCIÓN PRODUCTOS (Igual a FAQ)
   ========================================= */

/* 1. Cambiar la barra azul por fondo blanco estándar */
.productos-hero {
    background-color: var(--blanco); /* Ahora es fondo blanco */
    padding: 60px 0;                  /* Padding estándar de sección */
    width: 100%;
    display: block;                  /* Volvemos a un bloque estándar */
}

/* 2. Contenedor centrado y elegante */
.productos-content {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* 3. Estilo del Título (Igual a Preguntas Frecuentes) */
.productos-content h1 {
    font-size: 2.2rem;
    color: var(--azul); /* Título azul corporativo */
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* 4. Estilo del Subtítulo (Igual a Preguntas Frecuentes) */
.productos-content p {
    font-size: 1.05rem;
    color: var(--texto-suave); /* Texto gris suave #666 */
    line-height: 1.6;
    margin: 0 auto;
    max-width: 750px;
}

/* 5. Asegurar que la línea roja (underline) aparezca */
.productos-hero .underline {
    width: 50px;
    height: 4px;
    background-color: var(--rojo);
    margin: -10px auto 20px; /* Centrada y debajo del h1 */
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .productos-hero { padding: 40px 0; }
    .productos-content h1 { font-size: 1.7rem; }
    .productos-content p { font-size: 0.95rem; }
}
/* =========================================
   REDUCCIÓN MÁXIMA DE ESPACIO (ULTRA COMPACTO)
   ========================================= */

/* 1. Quitamos el espacio inferior del texto de productos */
.productos-hero {
    padding-bottom: 5px !important;  /* Casi nada de espacio abajo */
    margin-bottom: 0 !important;
}

.productos-content p {
    margin-bottom: 0 !important;     /* Eliminamos el margen del párrafo */
}

/* 2. Quitamos el espacio superior de la sección de las tarjetas */
/* Nota: Ajusta '.section-padding' o el nombre del contenedor de tus tarjetas */
.section-padding { 
    padding-top: 10px !important;    /* Espacio mínimo arriba de los recuadros */
}

/* 3. Si tienes un título de sección antes de las tarjetas (ej: "Nuestros Planes") */
.section-title {
    margin-top: 0 !important;
    margin-bottom: 15px !important;  /* Reduce el hueco entre el título y las tarjetas */
}

/* 4. Ajuste de la línea roja para que no flote demasiado */
.underline {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

/* =========================================
   ESTILOS PARA EL CARRUSEL (SOBRE NOSOTROS)
   ========================================= */

/* Contenedor principal de la imagen */
.about-image.about-slideshow {
    position: relative;
    width: 100%;
    min-height: 400px; /* Ajusta según la altura de tu foto principal */
    overflow: hidden;
    border-radius: 20px; /* Bordes redondeados premium */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Estilo para cada una de las imágenes */
.about-image .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la foto se estire feo */
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* Transición suave */
    z-index: 1;
}

/* Clase para la imagen que se está mostrando */
.about-image .slide.active {
    opacity: 1;
    z-index: 2;
}

/* Animación de desvanecimiento (Fade) */
.fade {
    animation-name: fadeEffect;
    animation-duration: 1.5s;
}

@keyframes fadeEffect {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Ajuste para móviles: que no se vea tan alto */
@media (max-width: 768px) {
    .about-image.about-slideshow {
        min-height: 250px;
        margin-top: 20px;
    }
}

/* =========================================
   CENTRAR CONTENIDO HERO (INDEX)
   ========================================= */

.hero {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center;     /* Centra el contenido verticalmente */
    text-align: center;      /* Centra el texto de cada línea */
    min-height: 80vh;        /* Ajusta la altura de la sección */
    padding: 0 20px;
}

.hero-content {
    max-width: 900px;        /* Limita el ancho para que el texto no llegue a los bordes */
    margin: 0 auto;          /* Asegura el centrado del bloque */
}

.hero-content p {
    margin: 20px auto;       /* Centra el párrafo y le da espacio arriba/abajo */
    max-width: 700px;        /* Hace que el párrafo sea más elegante y legible */
}

.hero-btns {
    display: flex;
    justify-content: center; /* Centra los botones de Cotizar y Emergencias */
    gap: 20px;               /* Espacio entre botones */
    margin-top: 30px;
}


/* Busca tu sección hero y ajusta su altura */
.hero {
    /* ... otras propiedades existentes (background, flexbox, text-align, etc.) ... */
    
    /* Cambia la altura actual por una más compacta. 
       Aproximadamente 55vh-60vh reducirá la altura a 2/3 de su tamaño original si antes era 100vh. */
    height: 60vh; /* Ajusta este valor (vh o px) según tus preferencias exactas */
    min-height: auto; /* Asegúrate de desactivar min-height si ya tenías uno */

    /* Importante: Mantén flexbox activado y alineado para que el texto siga centrado verticalmente con la nueva altura */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* =========================================
   RESTAURACIÓN DE DISEÑO Y 2x2 EN MÓVIL
   ========================================= */

.productos-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Siempre 2 columnas */
    gap: 20px !important;
    padding: 20px !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Recuperamos el diseño cuadrado y colorido */
.producto-card {
    background: #ffffff !important; /* Fondo blanco */
    border-radius: 15px !important; /* Bordes redondeados */
    padding: 25px 15px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Restauramos la sombra y el borde izquierdo colorido */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 4px solid var(--azul) !important; /* Línea de color abajo para estilo premium */
    transition: transform 0.3s ease !important;
}

/* Efecto al pasar el mouse (opcional para PC) */
.producto-card:hover {
    transform: translateY(-5px) !important;
}

/* Iconos */
.producto-card i {
    font-size: 2.5rem !important;
    color: var(--azul) !important;
    margin-bottom: 15px !important;
}

/* Títulos */
.producto-card h3 {
    font-size: 1.2rem !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}

/* Descripciones */
.producto-card p {
    font-size: 0.85rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Ajuste específico para pantallas muy pequeñas */
@media (max-width: 480px) {
    .productos-container {
        gap: 12px !important;
        padding: 10px !important;
    }
    
    .producto-card {
        padding: 15px 10px !important;
        min-height: 160px !important;
    }

    .producto-card i {
        font-size: 1.8rem !important;
    }
}


/* =========================================
   HEADER COMPACTO Y ELEGANTE
   ========================================= */

header {
    padding: 10px 0; /* Reducimos el espacio arriba y abajo del logo */
    background-color: var(--azul); /* Mantiene tu color corporativo */
}

.logo-container img {
    height: 60px; /* Ajusta este valor según prefieras, 50px-60px suele ser el estándar premium */
    width: auto;
    margin-bottom: 5px;
}

nav ul {
    margin-top: 5px; /* Acerca un poco más el menú al logo para que todo se vea como una sola unidad */
}



.brand-highlight {
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
}

/* Contenedor principal de los números */
.lista-telefonos {
    display: block !important; /* Cambiamos a block para asegurar el flujo vertical */
    margin-top: 10px !important;
    padding-left: 32px !important;
}

/* Cada número individual */
.numero-link {
    display: block !important; /* ESTA ES LA CLAVE: obliga a cada número a ocupar TODA la línea */
    color: #ff4d00 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 1.15rem !important;
    margin-bottom: 8px !important; /* Espacio entre un número y otro */
    width: fit-content; /* Para que el área de clic sea solo el número */
}

.numero-link:last-child {
    margin-bottom: 0 !important;
}

.numero-link:hover {
    text-decoration: underline !important;
    color: #e64500 !important;
}




.acordeon-contenedor {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 15px;
}

.acordeon-item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #eee;
}

.acordeon-header {
    width: 100%;
    padding: 20px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    cursor: pointer;
    font-weight: 700;
    color: #003366; /* El azul de iSeguros */
    font-size: 1.1rem;
    transition: background 0.3s;
}

.acordeon-header:hover {
    background: #f9f9f9;
}

.acordeon-contenido {
    max-height: 0; /* Oculto por defecto */
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #fafafa;
}

.detalle-asistencia {
    padding: 20px;
    border-top: 1px solid #eee;
}

/* Cuando el acordeón esté abierto */
.acordeon-item.active .acordeon-contenido {
    max-height: 1000px; /* Suficiente para el contenido */
}

.acordeon-item.active .acordeon-header i {
    transform: rotate(180deg);
}


.contacto-fila {
    display: flex;
    justify-content: space-between; /* Esto empuja los números a la derecha */
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.numeros-derecha {
    color: #ff5722; /* El naranja que estás usando */
    font-weight: bold;
    text-align: right;
}