:root {
            --primary: #00a3e0;
            --secondary: #ed2939;
            --primary-hover: #0082b3;
            --secondary-hover: #c91e2c;
        }

        /* Efecto hover interactivo para la tabla de precios */
        .price-row {
            transition: all 0.25s ease-in-out;
        }
        .price-row:hover {
            background-color: rgba(237, 41, 57, 0.03) !important;
            transform: translateX(4px);
        }
        .price-row:hover .icon-box {
            background-color: var(--secondary) !important;
            color: #ffffff !important;
        }
        .price-row:hover .icon-box i {
            color: #ffffff !important;
        }
        .price-row:hover .price-text {
            color: var(--secondary) !important;
        }

        .zone-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08) !important;
        }

        /* Estilos Generales */
        body {
            font-family: 'Poppins', sans-serif;
        }

        /* Utilidades de Color Personalizadas */
        .text-custom-primary { color: var(--primary) !important; }
        .text-custom-secondary { color: var(--secondary) !important; }
        .bg-custom-primary { background-color: var(--primary) !important; }
        .bg-custom-secondary { background-color: var(--secondary) !important; }

        /* Botones Personalizados */
        .btn-custom-primary {
            background-color: var(--primary);
            color: #fff;
            border: none;
            transition: all 0.3s ease;
        }
        .btn-custom-primary:hover, .btn-custom-primary:focus {
            background-color: var(--primary-hover);
            color: #fff;
        }

        .btn-custom-secondary {
            background-color: var(--secondary);
            color: #fff;
            border: none;
            transition: all 0.3s ease;
        }
        .btn-custom-secondary:hover, .btn-custom-secondary:focus {
            background-color: var(--secondary-hover);
            color: #fff;
        }

        /* Contenedor general de las pestañas tipo barra */
.custom-tabs {
    display: flex;
    width: 100%;
    gap: 2px; /* Espacio mínimo entre pestañas para separarlas sutilmente como papel */
    background-color: #e9ecef;
    padding: 6px 6px 0 6px; /* Solo padding arriba y a los lados, plano abajo para unirse */
    border-radius: 0.75rem 0.75rem 0 0;
    border-bottom: 2px solid var(--primary); /* Línea de base que ancla las pestañas */
    list-style: none;
}

        .custom-tabs .nav-item {
            flex: 1;
        }

        .custom-tabs .nav-link {
            width: 100%;
            border-radius: 0.75rem;
            background-color: #ffffff;
            color: #495057;
            border: 1px solid #e9ecef;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0.85rem 0.5rem;
        }

        /* Estado activo de las pestañas */
        .custom-tabs .nav-link.active {
            background-color: var(--primary) !important;
            color: #ffffff !important;
            border-color: var(--primary) !important;
            box-shadow: 0 4px 12px rgba(0, 163, 224, 0.25);
        }

        /* Transición de texto en la pestaña activa */
        .tab-text {
            display: inline-block;
            transition: opacity 0.3s ease;
        }

        /* Badges de íconos en las tarjetas */
        .icon-badge-secondary {
            background-color: var(--secondary);
            color: #fff;
        }

    .transition-hover {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .transition-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.075) !important;
        background-color: #fff !important;
    }


/* Estilo base de las pestañas (forma de lengüeta superior) */
#gasTabs .nav-link {
    width: 100%;
    border-radius: 0.5rem 0.5rem 0 0 !important; /* Esquinas redondeadas solo arriba */
    padding: 0.75rem 1rem;
    color: #6c757d;
    background-color: #dee2e6; /* Fondo inactivo tipo pestaña de archivo */
    border: 1px solid #ced4da;
    border-bottom: none; /* Sin borde abajo para fundirse con la base si fuera necesario */
    transition: all 0.2s ease-in-out;
}

/* Color para los íconos en pestañas inactivas */
#gasTabs .nav-link:not(.active) i {
    color: var(--primary);
}

/* Hover en pestañas inactivas */
#gasTabs .nav-link:hover:not(.active) {
    background-color: #e2e6ea;
    color: var(--secondary);
    transform: none;
    box-shadow: none;
}

/* Pestaña ACTIVA: se eleva visualmente y adopta tu color primario o secundario integrándose */
#gasTabs .nav-link.active {
    background-color: #ffffff !important; /* Se vuelve blanca como la hoja principal de la carpeta */
    color: var(--secondary) !important;
    border: 1px solid #ced4da !important;
    border-bottom: 2px solid #ffffff !important; /* Solapa el borde inferior para unirse al contenido */
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px); /* Pequeño salto hacia arriba clásico de pestaña seleccionada */
}

/* Asegurar colores al estar activa */
#gasTabs .nav-link.active i {
    color: var(--secondary) !important;
}

#gasTabs .nav-link.active span {
    color: #212529 !important;
    font-weight: 700;
}


/* Animación sutil para el texto colapsable */
#gasTabs .tab-text {
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
}
    .benefit-card {
        transition: all 0.3s ease-in-out;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,0.03) !important;
    }

    .icon-box {
        width: 60px;
        height: 60px;
        background-color: rgba(0, 163, 224, 0.1); /* Usa un tono translúcido de tu --primary (#00a3e0) */
        transition: all 0.3s ease-in-out;
    }

    /* Efecto Hover dinámico */
    .benefit-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08) !important;
        border-color: var(--secondary) !important; /* Destaca sutilmente con tu color secundario (#ed2939) */
    }

    .benefit-card:hover .icon-box {
        background-color: var(--secondary);
        transform: scale(1.1);
    }

    .benefit-card:hover .icon-box i {
        color: #fff !important; /* El ícono se vuelve blanco al hacer hover sobre la tarjeta */
    }


    /* Estilo dinámico para el botón que viene de la base de datos usando tus variables */
    .gasco-btn-wrapper a, .gasco-btn-wrapper .btn {
        background-color: var(--secondary) !important;
        border-color: var(--secondary) !important;
        color: #ffffff !important;
        transition: all 0.3s ease;
        font-size: 0.75rem; /* Más compacto en celulares */
    }
    @media (min-width: 576px) {
        .gasco-btn-wrapper a, .gasco-btn-wrapper .btn {
            font-size: 0.85rem; /* Normal en tablets en adelante */
        }
    }
    .gasco-btn-wrapper a:hover, .gasco-btn-wrapper .btn:hover {
        background-color: var(--secondary-hover) !important;
        border-color: var(--secondary-hover) !important;
        transform: translateY(-1px);
    }

     /* El ícono se vuelve blanco al hacer hover sobre la tarjeta */
      /* El ícono se vuelve blanco al hacer hover sobre la tarjeta */
       /* El ícono se vuelve blanco al hacer hover sobre la tarjeta */