/* ============================================
   INDEX - ESTILOS GENERALES
   ============================================ */

/* Secciones */
.section {
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-md);
}

.section--primary {
    background: #ecfdf5; /* green-50 */
}

.section--secondary {
    background: #f9fafb; /* gray-50 */
}

/* Contenedores de sección */
.section-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Títulos de sección */
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color:  var(--color-heading);
    margin-bottom: var(--spacing-xl);
}

.section-subtitle {
    font-size: 1rem;
    text-align: center;
    color: var(--color-text-primary);
    margin-top: var(--spacing-sm);
}

.section-subtitle strong {
    color: var(--color-heading);
}

.section-divider {
    border: 0;
    height: 1px;
    background-color: var(--color-primary);
}

/* ============================================
   LAYOUT FLEX
   ============================================ */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.flex-container--nowrap {
    flex-wrap: nowrap;
}

.flex-col {
    flex: 1;
    min-width: 0;
}

.flex-col--4-5 {
    flex: 4;
}

.flex-col--1-5 {
    flex: 1;
}

/* ============================================
   LISTAS CON CHECKMARKS
   ============================================ */
.check-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-lg) 0;
}

.check-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.check-list__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: #065f46;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.check-list__text {
    flex: 1;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.check-list__text strong {
    color: #064e3b;
}

.check-list__text a {
    color: #065f46;
    font-weight: 700;
    text-decoration: underline;
    transition: color var(--transition-base);
}

.check-list__text a:hover {
    color: #047857;
}

/* ============================================
   TARJETAS DE PRODUCTOS/SERVICIOS
   ============================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.card-grid-nosotros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.card {
    display: flex;
    background: #d1fae5;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-sm);
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(6, 78, 59, 0.2);
    transition: all var(--transition-base);
    text-decoration: none;
    color: inherit;
    margin: 1rem;
}

.card:hover {
    border-color: #065f46;
    border-width: 4px;
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(6, 78, 59, 0.3);
}

/* Desactivar hover para cards estáticas */
.card--no-hover:hover {
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(6, 78, 59, 0.2);
    transform: translateY(0);
}

.card__image-wrapper {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__image {
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    padding: var(--spacing-xs);
    object-fit: cover;
}

.card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-sm);
}

.card__title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: #064e3b;
    margin: 0;
}

.card__badge {
    height: 2rem;
    width: auto;
    margin-top: var(--spacing-sm);
    border-radius: 1.5rem;
}

/* Variante vertical para tarjetas pequeñas */
.card--vertical {
    flex-direction: column;
}

.card--vertical .card__image-wrapper {
    flex: none;
    width: 100%;
}

.card--vertical .card__content {
    width: 100%;
}

/* ============================================
   SECCIÓN DE IMÁGENES (COMPARA SEGUROS)
   ============================================ */
.image-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

.image-showcase__logo {
    width: 8rem;
    height: 8rem;
    object-fit: cover;
}

.image-showcase__logocompara {
    width: 8rem;
    height: auto;
    object-fit: cover;
}

/* ============================================
   MAPA DE CORREDORES
   ============================================ */
.map-section {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.map-container {
    flex: 2;
    height: 36rem; /* Altura fija necesaria para Leaflet */
    min-height: 400px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1; /* Asegurar que el mapa esté por debajo del navbar */
}

.map-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ...existing code... */

/* ============================================
   LEAFLET POPUP PERSONALIZADO
   ============================================ */

/* Contenedor principal del popup */
.custom-leaflet-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.custom-leaflet-popup .leaflet-popup-content {
    margin: 0;
    width: 100% !important;
}

.custom-leaflet-popup .leaflet-popup-tip {
    background: white;
}

/* Estructura del popup */
.map-popup {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
    width: 250px;
}

/* Header con logo */
.map-popup__header {
    background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
    padding: var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
}

.map-popup__logo {
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Body del popup */
.map-popup__body {
    padding: var(--spacing-lg);
    background: white;
}

.map-popup__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
    text-align: center;
}

/* Badge EthSI */
.map-popup__badge {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.map-popup__badge-img {
    height: 2rem;
    width: auto;
    object-fit: contain;
}

/* Información del corredor */
.map-popup__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.map-popup__info-item {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

.map-popup__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-top: 0.125rem;
}

.map-popup__info-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.map-popup__info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.map-popup__info-value {
    font-size: 0.875rem;
    color: var(--color-text-primary);;
    line-height: 1.4;
}

.map-popup__info-link {
    font-size: 0.875rem;
    color: var(--color-text-primary);;
    text-decoration: none;
    transition: color var(--transition-base);
}

.map-popup__info-link:hover {
    color: #047857;
    text-decoration: underline;
}

/* Footer con botón */
.map-popup__footer {
    padding: var(--spacing-md);
    background:  #f9fafb;
    border-top: 1px solid var(--color-border);
}

.map-popup__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: var(--color-text-light) !important;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.map-popup__button:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
}

.map-popup__button-icon {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Animación de entrada */
@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.custom-leaflet-popup .leaflet-popup-content-wrapper {
    animation: popupFadeIn 0.3s ease-out;
}

/* ============================================
   TARJETAS DE NOTICIAS
   ============================================ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.news-card {
    background: #6ee7b7;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(6, 78, 59, 0.2);
    transition: all var(--transition-base);
    text-align: center;
}

.news-card:hover {
    background: #34d399;
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(6, 78, 59, 0.3);
}

.news-card__image {
    width: 100%;
    height: auto;
    display: block;
}

.news-card__content {
    padding: var(--spacing-lg);
}

.news-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #064e3b;
    margin-bottom: var(--spacing-sm);
}

.news-card__text {
    font-size: 0.875rem;
    color: #065f46;
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.news-card__button {
    background: #78350f;
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-base);
}

.news-card__button:hover {
    background: #451a03;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 769px) {
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 100%;
    }

    .card-grid-nosotros:has(.card:nth-child(4)) {
        grid-template-columns: repeat(3, 1fr);
        }
}

@media (max-width: 1024px) {
    .map-section {
        flex-direction: column;
    }

    .map-container {
        height: 24rem;
        width: 100%;
    }

    .map-list {
        flex: none;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .section {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .section-title {
        font-size: 1.25rem;
    }
    
    .flex-container--nowrap {
        flex-wrap: wrap;
    }
    
    .card-grid-nosotros {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .card__title {
        font-size: 1.125rem;
    }
    
    .map-section {
        flex-direction: column;
    }
    
    .map-container {
        height: 20rem;
    }

    .map-list {
        display: none; /* Ocultar en móvil si usas hidden-mobile */
    }
}

@media (max-width: 640px) {
    .image-showcase {
        display: none;
    }

    .card-grid-nosotros {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xs);
    }

    .card-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xs);
    }
    
    .card {
        flex-direction: column;
        margin: var(--spacing-sm);
    }
    
    .card__image-wrapper {
        flex: none;
        width: 100%;
    }
    
    .card__content {
        width: 100%;
    }
    
    .card__title {
        font-size: 1rem;
    }
    
    .check-list__text {
        font-size: 0.8rem;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .map-container {
        height: 18rem;
        border-radius: var(--border-radius-md);
    }

    .map-popup__header {
        padding: var(--spacing-md);
        min-height: 80px;
    }
    
    .map-popup__logo {
        max-width: 120px;
        max-height: 60px;
    }
    
    .map-popup__body {
        padding: var(--spacing-md);
    }
    
    .map-popup__title {
        font-size: 1rem;
    }
    
    .map-popup__info-item {
        gap: var(--spacing-xs);
    }
}

/* ============================================
   UTILIDADES
   ============================================ */
.hidden-mobile {
    display: block;
}

.visible-mobile {
    display: none;
}

@media (max-width: 1024px) {
    .hidden-mobile {
        display: none;
    }
    
    .visible-mobile {
        display: block;
    }
}