/* ==========================================================================
   COLORES Y ESTILOS PERSONALIZADOS - M&M POWDER COATING
   Usa las variables inyectadas dinámicamente desde site-config.php
   Compatible con sistema de variantes genéricas
   ========================================================================== */

/* --- Globales --- */
body { color: var(--text-color); }
section h2 { color: var(--primary-color); }
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a, 
.footer-navigation .footer-menu-container > ul li.current-menu-item > a {
    color: var(--secondary-color) !important;
}

/* Eyebrow y Links con línea arcoíris */
.realyvax-navid-eyebrow {
    color: var(--text-color);
}
.realyvax-navid-eyebrow::after {
    background: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple)
    );
}

.button-link {
    color: var(--primary-color);
}
.button-link::after {
    background: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple)
    );
}
.button-link:hover { color: var(--secondary-color); }

/* --- 1. HERO --- */
.realyvax-navid-hero {
    background-color: var(--dark-color);
    /* La imagen se aplica inline desde PHP */
}

.realyvax-navid-hero .realyvax-navid-eyebrow { 
    color: var(--text-light-color); 
}

.realyvax-navid-hero h1 { 
    color: #ffffff; 
}

.realyvax-navid-hero p { 
    color: var(--text-light-color); 
}

/* Secundario: Línea inferior */
.realyvax-navid-hero .button.secondary {
    color: var(--light-color) !important;
}

/* ==========================================================================
   VARIANT: cards-hover (Tarjetas con hover elevado)
   ========================================================================== */
.realyvax-navid-section:has(.variant-cards-hover) {
    background-color: transparent !important;
}

.realyvax-navid-feature-intro h2 { color: var(--primary-color); }
.realyvax-navid-feature-intro p { color: var(--text-color); }
.realyvax-navid-feature-intro .button-link { color: var(--primary-color); }
.realyvax-navid-feature-intro .button-link:hover { color: var(--secondary-color); }

/* Items de la variante cards-hover */
.variant-cards-hover .item-number { opacity: 0.6; }
.variant-cards-hover .item-icon i { color: var(--primary-color); transition: color 0.3s ease; }
.variant-cards-hover h3 { color: var(--primary-color); }
.variant-cards-hover p { color: var(--text-color); }
.variant-cards-hover .card-link {
    font-size: 0.8rem;
    color: var(--primary-color);
}

.realyvax-navid-feature-item.variant-accent-border:hover {
    border-left-color: var(--secondary-color);
}

/* Tablets pequeñas: layout apilado */
@media (max-width: 900px) {
    .realyvax-navid-feature-item.variant-accent-border{
        border-left-color: var(--secondary-color);
    }
}

/* Ciclo de colores de marca para las tarjetas */
.variant-cards-hover:nth-child(6n+1) { border-bottom-color: var(--color-red); }
.variant-cards-hover:nth-child(6n+1) .item-number { color: var(--color-red); }
.variant-cards-hover:nth-child(6n+1):hover { background-color: rgba(191, 35, 41, 0.05); box-shadow: 0 10px 30px rgba(191, 35, 41, 0.15); }
.variant-cards-hover:nth-child(6n+1):hover .item-icon i { color: var(--color-red); }
.variant-cards-hover:nth-child(6n+1) .card-link { color: var(--color-red); }

.variant-cards-hover:nth-child(6n+2) { border-bottom-color: var(--color-orange); }
.variant-cards-hover:nth-child(6n+2) .item-number { color: var(--color-orange); }
.variant-cards-hover:nth-child(6n+2):hover { background-color: rgba(239, 113, 37, 0.05); box-shadow: 0 10px 30px rgba(239, 113, 37, 0.15); }
.variant-cards-hover:nth-child(6n+2):hover .item-icon i { color: var(--color-orange); }
.variant-cards-hover:nth-child(6n+2) .card-link { color: var(--color-orange); }

.variant-cards-hover:nth-child(6n+3) { border-bottom-color: var(--secondary-color); }
.variant-cards-hover:nth-child(6n+3) .item-number { color: var(--secondary-color); }
.variant-cards-hover:nth-child(6n+3):hover { background-color: rgba(250, 200, 20, 0.08); box-shadow: 0 10px 30px rgba(250, 200, 20, 0.2); }
.variant-cards-hover:nth-child(6n+3):hover .item-icon i { color: var(--secondary-color); }
.variant-cards-hover:nth-child(6n+3) .card-link { color: var(--secondary-color); }

.variant-cards-hover:nth-child(6n+4) { border-bottom-color: var(--color-green); }
.variant-cards-hover:nth-child(6n+4) .item-number { color: var(--color-green); }
.variant-cards-hover:nth-child(6n+4):hover { background-color: rgba(25, 106, 60, 0.05); box-shadow: 0 10px 30px rgba(25, 106, 60, 0.15); }
.variant-cards-hover:nth-child(6n+4):hover .item-icon i { color: var(--color-green); }
.variant-cards-hover:nth-child(6n+4) .card-link { color: var(--color-green); }

.variant-cards-hover:nth-child(6n+5) { border-bottom-color: var(--color-blue); }
.variant-cards-hover:nth-child(6n+5) .item-number { color: var(--color-blue); }
.variant-cards-hover:nth-child(6n+5):hover { background-color: rgba(35, 82, 159, 0.05); box-shadow: 0 10px 30px rgba(35, 82, 159, 0.15); }
.variant-cards-hover:nth-child(6n+5):hover .item-icon i { color: var(--color-blue); }
.variant-cards-hover:nth-child(6n+5) .card-link { color: var(--color-blue); }

.variant-cards-hover:nth-child(6n+6) { border-bottom-color: var(--color-purple); }
.variant-cards-hover:nth-child(6n+6) .item-number { color: var(--color-purple); }
.variant-cards-hover:nth-child(6n+6):hover { background-color: rgba(90, 49, 141, 0.05); box-shadow: 0 10px 30px rgba(90, 49, 141, 0.15); }
.variant-cards-hover:nth-child(6n+6):hover .item-icon i { color: var(--color-purple); }
.variant-cards-hover:nth-child(6n+6) .card-link { color: var(--color-purple); }

/* ==========================================================================
   VARIANT: accent-border (Items con borde lateral de acento)
   ========================================================================== */
.realyvax-navid-section:has(.variant-accent-border) {
    background-color: transparent !important;
}

.variant-accent-border h3 { color: var(--primary-color); }
.variant-accent-border p { color: var(--text-color); }
.variant-accent-border:hover {
    border-left-color: var(--secondary-color);
}

/* ==========================================================================
   VARIANT: grid-steps (Celdas con bordes internos, números grandes)
   ========================================================================== */
.realyvax-navid-section:has(.variant-grid-steps) {
    background-color: transparent !important;
}

.variant-grid-steps .item-number {
    color: var(--secondary-color) !important;
}
.variant-grid-steps h4 { color: var(--primary-color); }
.variant-grid-steps p { color: var(--text-color); }

/* --- 4. FEATURED PROJECTS --- */
.projects-header-left h2 { color: var(--primary-color); }

/* --- 5. TESTIMONIALS + CHROMATE --- */
.realyvax-navid-testimonials-chromate { background-color: transparent !important; }

/* Testimonios */
.quote-mark { color: var(--secondary-color) !important; opacity: 1 !important; }
.testimonial-stars i { color: #e5e7eb; }
.testimonial-stars i.filled { color: var(--secondary-color); }
.testimonial-text { color: var(--primary-color); }
.testimonial-author { color: var(--text-color); opacity: 0.7; }

.testimonial-dots .dot { background-color: #d1d5db; }
.testimonial-dots .dot:hover,
.testimonial-dots .dot.active { background-color: var(--secondary-color); }

/* Chromate */
.chromate-icon-large i { color: var(--color-green); opacity: 0.9; }
.chromate-benefit-item { color: var(--primary-color); }
.chromate-learn-more { color: var(--primary-color); }
.chromate-learn-more:hover { color: var(--secondary-color); }
.chromate-learn-more::after {
    background: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple)
    );
}

/* --- 6. FINAL CTA --- */
.realyvax-navid-final-cta {
    background-color: var(--dark-color);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.realyvax-navid-final-cta h2 { color: #ffffff; }
.realyvax-navid-final-cta p { color: var(--text-light-color); opacity: 0.9; }

/* --- 7. FOOTER --- */
.realyvax-navid-footer, .site-footer { background-color: var(--dark-color) !important; color: #ffffff !important; }

.footer-logo-text .logo-mark,
.footer-logo-text .logo-text { color: #ffffff; }
.footer-tagline { color: var(--text-light-color); }
.footer-copyright { color: var(--text-light-color); opacity: 0.6; }

.footer-contact-item { color: var(--text-light-color); }
.footer-contact-item i { color: var(--text-light-color); }
.footer-contact-value { color: var(--text-light-color); }
.footer-contact-item:hover,
.footer-contact-item:hover .footer-contact-value { color: var(--secondary-color); }

/* --- 8. FORMULARIO --- */
.realyvax-navid-form-wrapper button[type="submit"] {
    background-color: var(--color-red);
    color: #ffffff;
}
.realyvax-navid-form-wrapper button[type="submit"]:hover {
    background-color: #9a1c21;
}

/* ==========================================================================
   BOTONES ARCOÍRIS (Animados)
   ========================================================================== */
@keyframes btn-primary-flow {
    0% { background-position: 0% 50%, 0% 50%; }
    100% { background-position: 0% 50%, 400% 50%; }
}
@keyframes btn-secondary-line-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Primario: Borde completo */
.button.primary {
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
    border: 2px solid transparent !important;
    background-image: linear-gradient(var(--dark-color), var(--dark-color)), 
                      linear-gradient(90deg, var(--color-red), var(--color-orange), var(--secondary-color), var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)) !important;
    background-size: 100% 100%, 400% 100% !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    animation: btn-primary-flow 4s linear infinite !important;
}
.button.primary:hover {
    background-image: linear-gradient(var(--light-color), var(--light-color)), 
                      linear-gradient(90deg, var(--color-red), var(--color-orange), var(--secondary-color), var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)) !important;
    color: var(--dark-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Secundario: Línea inferior */
.button.secondary {
    background: transparent !important;
    color: var(--dark-color) !important;
    border: none !important;
}
.button.secondary::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-image: linear-gradient(90deg, var(--color-red), var(--color-orange), var(--secondary-color), var(--color-green), var(--color-blue), var(--color-purple)) !important;
    background-size: 400% 100% !important;
    animation: btn-secondary-line-flow 4s linear infinite !important;
    transition: height 0.3s ease !important;
}
.button.secondary:hover { color: var(--secondary-color) !important; }
.button.secondary:hover::after { height: 4px !important; }

/* ==========================================================================
   PERSONALIZACIÓN: TWO COLUMN - LISTA DE ICONOS (Color verde)
   ========================================================================== */
.realyvax-navid-two-col-section .realyvax-navid-list-item i {
    color: var(--color-green);
}

/* ==========================================================================
   PERSONALIZACIÓN: GALLERY GRID (M&M Powder Coating)
   ========================================================================== */

/* Colores del header de la galería */
.realyvax-navid-gallery-grid-section .realyvax-navid-gallery-intro h2 {
    color: var(--primary-color);
}

.realyvax-navid-gallery-grid-section .realyvax-navid-gallery-intro p {
    color: var(--text-color);
}

.realyvax-navid-gallery-grid-section .realyvax-navid-gallery-header .button-link {
    color: var(--primary-color);
}

.realyvax-navid-gallery-grid-section .realyvax-navid-gallery-header .button-link:hover {
    color: var(--secondary-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: FILTROS DE GALERÍA (Multi-selección)
   ========================================================================== */

/* Botón ACTIVO (Seleccionado) - Color de marca */
.realyvax-navid-filters .realyvax-navid-gallery-tag.active {
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

/* Botón INACTIVO (No seleccionado) - Gris neutro */
.realyvax-navid-filters .realyvax-navid-gallery-tag:not(.active) {
    background-color: #f3f4f6;
    color: #4b5563;
    border-color: #e5e7eb;
}

/* Hover sobre INACTIVO: Se ilumina con el color de marca */
.realyvax-navid-filters .realyvax-navid-gallery-tag:not(.active):hover {
    background-color: #ffffff;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: REVIEWS / TESTIMONIALS SLIDER
   ========================================================================== */

/* Comilla gigante con color de marca (opaca para que no moleste al leer) */
.realyvax-navid-reviews-section .realyvax-quote-mark {
    color: var(--secondary-color);
    opacity: 0.15;
}

/* Estrellas llenas con el color secundario (o primario, según prefieras) */
.realyvax-navid-reviews-section .realyvax-reviews-stars i.filled {
    color: var(--secondary-color);
}

/* Texto de la reseña */
.realyvax-navid-reviews-section .realyvax-reviews-text {
    color: var(--primary-color);
}

/* Autor de la reseña */
.realyvax-navid-reviews-section .realyvax-reviews-author {
    color: var(--text-color);
}

/* Puntos de navegación (Dots) */
.realyvax-navid-reviews-section .realyvax-reviews-dot {
    background-color: #d1d5db; /* Inactivo: gris */
}

.realyvax-navid-reviews-section .realyvax-reviews-dot:hover,
.realyvax-navid-reviews-section .realyvax-reviews-dot.active {
    background-color: var(--secondary-color); /* Activo: color de marca */
    border-color: rgba(0,0,0,0.1);
}

/* Enlace CTA inferior */
.realyvax-navid-reviews-section .realyvax-reviews-cta .button-link {
    color: var(--primary-color);
}

.realyvax-navid-reviews-section .realyvax-reviews-cta .button-link:hover {
    color: var(--secondary-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: CTA SECTION (Ej: Local / Florida)
   ========================================================================== */

/* Fondo y espaciado específico para esta variante */
.realyvax-navid-cta-section.realyvax-navid-local {
    background-color: #f8f9fa; /* O usa var(--color-bg-light) si la tienes */
}

/* Colores del texto en esta sección específica */
.realyvax-navid-cta-section.realyvax-navid-local .realyvax-navid-section-header h2 {
    color: var(--primary-color);
}

.realyvax-navid-cta-section.realyvax-navid-local .realyvax-navid-section-header p {
    color: var(--text-color);
}

/* Asegurar que el eyebrow tenga el color correcto */
.realyvax-navid-cta-section.realyvax-navid-local .realyvax-navid-eyebrow {
    color: var(--text-color);
}

/* Si necesitas que los botones tengan un estilo específico en esta sección, 
   ya lo manejan las clases .button.primary y .button.secondary globales, 
   pero puedes forzar algo aquí si es necesario */

/* ==========================================================================
   PERSONALIZACIÓN: CONTACT FORM SECTION (Final CTA - Tema Oscuro)
   ========================================================================== */

/* Fondo oscuro para toda la sección */
.realyvax-navid-contact-section {
    background-color: var(--dark-color);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- FIX: Eyebrow en fondo oscuro debe ser claro --- */
.realyvax-navid-contact-section .realyvax-navid-eyebrow {
    color: var(--text-light-color);
}

.realyvax-navid-contact-section .realyvax-navid-eyebrow::after {
    background: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple)
    );
}

/* Colores de la columna izquierda */
.realyvax-navid-contact-section .realyvax-navid-contact-intro h2 {
    color: #ffffff;
}

.realyvax-navid-contact-section .realyvax-navid-contact-intro p {
    color: var(--text-light-color);
    opacity: 0.9;
}

/* --- FIX: Botones en fila con colores correctos sobre fondo oscuro --- */
.realyvax-navid-contact-section .realyvax-navid-contact-buttons .button.secondary {
    color: #ffffff !important;
}

.realyvax-navid-contact-section .realyvax-navid-contact-buttons .button.secondary:hover {
    color: var(--secondary-color) !important;
}

/* Estilo del wrapper del formulario (Fondo semi-transparente) */
.realyvax-navid-contact-section .realyvax-navid-contact-form-wrapper {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.realyvax-navid-contact-section .realyvax-navid-contact-form-wrapper h3 {
    color: #ffffff;
}

.realyvax-navid-contact-section .realyvax-navid-contact-form-wrapper > p {
    color: var(--text-light-color);
}

/* Campos del formulario (Estilo oscuro) */
.realyvax-navid-contact-section .realyvax-navid-form label {
    color: var(--text-light-color);
}

.realyvax-navid-contact-section .realyvax-navid-form input,
.realyvax-navid-contact-section .realyvax-navid-form select,
.realyvax-navid-contact-section .realyvax-navid-form textarea {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.realyvax-navid-contact-section .realyvax-navid-form input::placeholder,
.realyvax-navid-contact-section .realyvax-navid-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.realyvax-navid-contact-section .realyvax-navid-form input:focus,
.realyvax-navid-contact-section .realyvax-navid-form select:focus,
.realyvax-navid-contact-section .realyvax-navid-form textarea:focus {
    color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Footer del formulario */
.realyvax-navid-contact-section .form-footer {
    color: var(--text-light-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: GRID SECTION
   ========================================================================== */

.realyvax-navid-grid-section .realyvax-navid-section-header h2 {
    color: var(--primary-color);
}

.realyvax-navid-grid-section .realyvax-navid-section-header p {
    color: var(--text-color);
}

.realyvax-navid-grid-section .realyvax-navid-grid-item {
    border-color: #e5e7eb;
}

.realyvax-navid-grid-section .realyvax-navid-grid-item:hover {
    border-color: var(--primary-color);
}

.realyvax-navid-grid-section .realyvax-navid-grid-item h3 {
    color: var(--primary-color);
}

.realyvax-navid-grid-section .realyvax-navid-grid-item p {
    color: var(--text-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: GRID - CTA BUTTON
   ========================================================================== */
.realyvax-navid-grid-section .realyvax-navid-grid-cta {
    color: var(--primary-color);
}

.realyvax-navid-grid-section .realyvax-navid-grid-cta:hover {
    color: var(--secondary-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: FAQ SECTION
   ========================================================================== */

.realyvax-navid-faq-section .realyvax-navid-section-header h2 {
    color: var(--primary-color);
}

.realyvax-navid-faq-section .realyvax-navid-section-header p {
    color: var(--text-color);
}

/* Acordeón */
.realyvax-navid-faq-section.variant-accordion .realyvax-navid-faq-item {
    border-color: #e5e7eb;
    background-color: #ffffff;
}

.realyvax-navid-faq-section.variant-accordion .realyvax-navid-faq-item[open] {
    border-color: var(--primary-color);
}

.realyvax-navid-faq-section.variant-accordion .realyvax-navid-faq-question {
    color: var(--primary-color);
}

.realyvax-navid-faq-section.variant-accordion .realyvax-faq-icon {
    color: var(--primary-color);
}

.realyvax-navid-faq-section.variant-accordion .realyvax-navid-faq-answer p {
    color: var(--text-color);
}

/* Lista */
.realyvax-navid-faq-section.variant-list .realyvax-navid-faq-item {
    border-color: #e5e7eb;
}

.realyvax-navid-faq-section.variant-list .realyvax-navid-faq-question {
    color: var(--primary-color);
}

.realyvax-navid-faq-section.variant-list .realyvax-navid-faq-answer p {
    color: var(--text-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: BEFORE/AFTER SECTION
   ========================================================================== */

.realyvax-navid-before-after-section .realyvax-navid-section-header h2 {
    color: var(--primary-color);
}

.realyvax-navid-before-after-section .realyvax-navid-section-header p {
    color: var(--text-color);
}

.realyvax-navid-before-after-section .realyvax-navid-ba-title {
    color: var(--primary-color);
}

.realyvax-navid-before-after-section .realyvax-navid-ba-desc {
    color: var(--text-color);
}

/* Etiquetas Before/After con color de marca */
.realyvax-navid-before-after-section .realyvax-navid-ba-before .realyvax-navid-ba-label {
    background-color: rgba(0, 0, 0, 0.75);
}

.realyvax-navid-before-after-section .realyvax-navid-ba-after .realyvax-navid-ba-label {
    background-color: var(--primary-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: BREADCRUMBS
   ========================================================================== */

.realyvax-navid-breadcrumbs {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}

.realyvax-navid-breadcrumbs-item a {
    color: var(--primary-color);
}

.realyvax-navid-breadcrumbs-item a:hover {
    color: var(--secondary-color);
}

.realyvax-navid-breadcrumbs-current {
    color: var(--text-color);
}

.realyvax-navid-breadcrumbs-item:not(:last-child)::after {
    color: var(--text-color);
}

/* ==========================================================================
   PERSONALIZACIÓN: PROCESS STEPS
   ========================================================================== */
.realyvax-navid-step-number,
.realyvax-navid-step-header i{
    color: var(--secondary-color);
}

.realyvax-navid-step-number{
    opacity: 1;
}


/* ==========================================================================
   PERSONALIZACIÓN: PHONE BUTTON SHORTCODE (Estilo Arcoíris)
   ========================================================================== */

/* Reutilizamos la animación definida anteriormente o creamos una específica si no existe */
@keyframes realyvax-rainbow-flow {
    0% { background-position: 0% 50%, 0% 50%; }
    100% { background-position: 0% 50%, 400% 50%; }
}

/* Estilo Sólido Arcoíris para el Shortcode de Teléfono */
.realyvax-phone-btn:not(.style-minimal) {
    /* Reseteamos estilos base del shortcode anterior */
    background-color: var(--dark-color) !important;
    color: var(--light-color) !important;
    box-shadow: none;
    
    /* Aplicamos el truco del borde arcoíris animado */
    border: 2px solid transparent !important;
    background-image: linear-gradient(var(--dark-color), var(--dark-color)), 
                      linear-gradient(90deg, var(--color-red), var(--color-orange), var(--secondary-color), var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)) !important;
    background-size: 100% 100%, 400% 100% !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    animation: realyvax-rainbow-flow 4s linear infinite !important;
}

/* Hover del botón sólido arcoíris */
.realyvax-phone-btn:not(.style-minimal):hover {
    background-image: linear-gradient(var(--light-color), var(--light-color)), 
                      linear-gradient(90deg, var(--color-red), var(--color-orange), var(--secondary-color), var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)) !important;
    color: var(--dark-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Ajuste para el icono dentro del botón sólido */
.realyvax-phone-btn:not(.style-minimal) i {
    transition: color 0.3s ease;
}

/* ==========================================================================
   PERSONALIZACIÓN: PHONE BUTTON - ICONO ARCOÍRIS (Fondo transparente)
   ========================================================================== */

/* Animación para el flujo del degradado arcoíris */
@keyframes realyvax-rainbow-icon {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* ==========================================================================
   1. ESTILO SÓLIDO: Fondo transparente, borde + icono + texto arcoíris
   ========================================================================== */
.realyvax-phone-btn:not(.style-minimal) {
    background-color: transparent !important;
    box-shadow: none !important;
    
    /* Borde arcoíris animado (contorno del botón) */
    border: 2px solid transparent !important;
    background-image: 
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(90deg, 
            var(--color-red), var(--color-orange), var(--secondary-color), 
            var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)
        ) !important;
    background-size: 100% 100%, 400% 100% !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    animation: realyvax-rainbow-icon 4s linear infinite;
}

/* Texto e icono arcoíris en el sólido */
.realyvax-phone-btn:not(.style-minimal) .phone-label {
    background-image: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)
    ) !important;
    background-size: 400% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: realyvax-rainbow-icon 4s linear infinite;
}

/* Hover sólido: elevación y aceleración */
.realyvax-phone-btn:not(.style-minimal):hover {
    transform: translateY(-2px);
    animation-duration: 2s;
}

.realyvax-phone-btn:not(.style-minimal):hover .phone-label {
    animation-duration: 2s;
}

/* FORZAR ICONO ARCOÍRIS (Font Awesome) */
.realyvax-phone-btn:not(.style-minimal) i,
.realyvax-phone-btn:not(.style-minimal) i::before {
    background-image: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)
    ) !important;
    background-size: 400% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: realyvax-rainbow-icon 4s linear infinite;
}

.realyvax-phone-btn:not(.style-minimal):hover i,
.realyvax-phone-btn:not(.style-minimal):hover i::before {
    animation-duration: 2s;
}

/* ==========================================================================
   2. ESTILO MINIMAL: Icono arcoíris, texto arcoíris, círculo con borde arcoíris
   ========================================================================== */
.realyvax-phone-btn.style-minimal {
    background: transparent !important;
    box-shadow: none !important;
}

/* Círculo con borde arcoíris */
.realyvax-phone-btn.style-minimal .phone-icon-circle {
    background-color: transparent !important;
    border: 2px solid transparent;
    background-image: 
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(90deg, 
            var(--color-red), var(--color-orange), var(--secondary-color), 
            var(--color-green), var(--color-blue), var(--color-purple)
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Icono arcoíris dentro del círculo */
.realyvax-phone-btn.style-minimal .phone-icon-circle i,
.realyvax-phone-btn.style-minimal .phone-icon-circle i::before {
    background-image: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)
    ) !important;
    background-size: 400% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: realyvax-rainbow-icon 4s linear infinite;
}

/* Texto del número también arcoíris */
.realyvax-phone-btn.style-minimal .phone-label {
    background-image: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)
    );
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
    animation: realyvax-rainbow-icon 4s linear infinite;
}

/* Hover minimal: elevación y aceleración */
.realyvax-phone-btn.style-minimal:hover {
    transform: translateY(-2px);
}

.realyvax-phone-btn.style-minimal:hover .phone-icon-circle i,
.realyvax-phone-btn.style-minimal:hover .phone-icon-circle i::before,
.realyvax-phone-btn.style-minimal:hover .phone-label {
    animation-duration: 2s;
}

/* ==========================================================================
   3. MODO "SOLO ICONO" (label="none") - COMPATIBLE CON ARCOÍRIS
   ========================================================================== */

/* Asegurar que el círculo minimalista arcoíris quede perfecto sin texto */
.realyvax-phone-btn.style-minimal.icon-only .phone-icon-circle {
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
}

/* En sólido icon-only, forzar forma cuadrada con padding uniforme */
.realyvax-phone-btn:not(.style-minimal).icon-only {
    padding: 0.75rem !important;
    border-radius: 6px !important;
}

/* Destrucción visual absoluta del texto si el PHP fallara */
.realyvax-phone-btn.icon-only .phone-label {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* Fallback moderno con :has para centrado perfecto */
.realyvax-phone-btn:not(:has(.phone-label)) {
    gap: 0 !important;
    justify-content: center !important;
}

.realyvax-phone-btn.style-minimal:not(:has(.phone-label)) {
    padding: 0 !important;
}

/* ==========================================================================
   FADE INDICATOR FULL WIDTH (Franja final con Puntos Arcoíris en el Texto)
   ========================================================================== */

.realyvax-navid-feature-item.fade-indicator-full {
    /* Ocupa todas las columnas disponibles */
    grid-column: 1 / -1; 
    
    /* Altura ajustada */
    height: 60px; 
    min-height: 60px;
    
    /* Fondo totalmente transparente, solo una línea divisoria sutil arriba */
    background: transparent;
    border-top: 1px solid rgba(229, 231, 235, 0.3);
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Animación de flujo horizontal para el degradado */
@keyframes fade-dots-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* LOS PROPIOS PUNTOS SON EL ARCOÍRIS (Sin fondo) */
.fade-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    /* Aplicamos el degradado arcoíris directamente al texto */
    background-image: linear-gradient(90deg, 
        var(--color-red), var(--color-orange), var(--secondary-color), 
        var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)
    ) !important;
    background-size: 400% 100% !important;
    
    /* Recortamos el fondo para que solo se vea en la forma del texto */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    /* Animación continua */
    animation: fade-dots-flow 4s linear infinite !important;
    
    /* Estilo tipográfico de los puntos */
    font-size: 1.5rem;
    letter-spacing: 6px;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Hover: se eleva sutilmente y acelera el arcoíris */
.realyvax-navid-feature-item.fade-indicator-full:hover .fade-dots {
    transform: translateY(-2px);
    animation-duration: 2s !important;
}

/* Ajuste para grids con bordes internos (steps) para que la franja no rompa el diseño */
.realyvax-navid-feature-grid.cols-5 .realyvax-navid-feature-item.fade-indicator-full,
.realyvax-navid-feature-grid.cols-6 .realyvax-navid-feature-item.fade-indicator-full {
    background: transparent;
    border-top: 1px solid #e5e7eb;
}

/* ==========================================================================
   ICONO + CON ANIMACIÓN ARCOÍRIS (solo cuando está cerrado)
   ========================================================================== */

/* Sobrescribimos solo la línea vertical (::after) para que tenga gradiente */
.realyvax-navid-faq-section.variant-accordion .realyvax-faq-icon::after {
    background-color: transparent;
    background-image: linear-gradient(
        180deg,
        var(--color-red),
        var(--color-orange),
        var(--secondary-color),
        var(--color-green),
        var(--color-blue),
        var(--color-purple),
        var(--color-red)
    );
    background-size: 100% 400%;
    animation: faq-icon-rainbow-flow 4s linear infinite;
}

/* Animación de flujo vertical (similar a btn-primary-flow pero adaptada) */
@keyframes faq-icon-rainbow-flow {
    0% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 50% 400%;
    }
}

/* Cuando está abierto, detenemos la animación (ya está oculta con scaleY(0)) */
.realyvax-navid-faq-section.variant-accordion .realyvax-navid-faq-item[open] .realyvax-faq-icon::after {
    animation: none;
}