/* ============================================================== */
/* ESTILOS ESPECÍFICOS DE LA SUBPÁGINA (Tips y Consejos)          */
/* ============================================================== */

/* 1. EL ESCUDO DEL TÍTULO PRINCIPAL (Bloquea herencias de global.css) */
.ngc-main-title {
    color: var(--ngc-text-main);
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    text-shadow: none !important; /* Adiós al neón difuso */
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* --- TÍTULOS Y ETIQUETAS ESPECÍFICAS --- */
.ngc-section-label {
    font-size: 0.8rem; 
    text-transform: uppercase; 
    color: var(--ngc-text-muted);
    letter-spacing: 1.5px; 
    font-weight: 700;
    background: var(--ngc-glass);
    backdrop-filter: var(--ngc-blur);
    -webkit-backdrop-filter: var(--ngc-blur);
    border: 1px solid var(--ngc-privacy-border);
    border-radius: 8px; 
    padding: 6px 16px;  
    width: fit-content; 
    margin: 20px 0 10px 0; 
    box-shadow: 0 4px 10px var(--card-shadow);
}

/* --- CONTENEDORES CON ESTILO NGC --- */
.ngc-banner-tips, details {
    background: var(--ngc-glass); 
    backdrop-filter: var(--ngc-blur); 
    -webkit-backdrop-filter: var(--ngc-blur);
    border: var(--ngc-border-glass); 
    /* ELIMINADO: border-left: 4px solid var(--ngc-neon); */
    border-radius: 12px; /* Reducido a 12px */
    width: 100%; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--card-shadow), var(--ngc-glass-edge);
}

details[open] { 
    border-color: var(--ngc-neon); /* Solo dibuja una línea fina y elegante al abrir */
    box-shadow: 0 8px 25px var(--card-shadow), var(--ngc-glass-edge);
}

details:hover .icon-box i { 
    color: var(--ngc-neon); 
    transition: all 0.3s ease; 
}

/* BANNER DE TIPS */
.ngc-banner-tips {
    background: rgba(40, 167, 69, 0.05); 
    border: 1px solid rgba(40, 167, 69, 0.2);
    border-left: 4px solid var(--success-green);
    padding: 15px 20px;
    box-shadow: 0 4px 15px var(--card-shadow), var(--ngc-glass-edge);
}
.ngc-banner-tips span:last-child { font-size: 0.85rem; line-height: 1.4; display: block; color: var(--ngc-text-muted); }

/* --- ACORDEONES --- */
summary {
    padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem;
    cursor: pointer; list-style: none; outline: none; min-height: 45px; user-select: none;
}
summary::-webkit-details-marker { display: none; }

/* CORRECCIÓN: Título protegido de brillos externos */
.summary-title { display: flex; align-items: center; gap: 12px; color: var(--ngc-text-main); text-shadow: none !important; }

.ngc-content { padding: 5px 20px 20px 20px; font-size: 0.9rem; line-height: 1.6; color: var(--ngc-text-muted); animation: fadeIn 0.4s ease; background: var(--content-bg); }

.ngc-content b { color: var(--ngc-text-main); font-weight: 700; }

.icon-box { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--ngc-text-muted); transition: all 0.3s ease;}
.chevron { transition: transform 0.3s ease; opacity: 0.6; width: 16px; height: 16px; }

details[open] .chevron { transform: rotate(180deg); opacity: 1; color: var(--ngc-neon); }
details[open] .icon-box i { color: var(--ngc-neon); }

/* --- CTA COMERCIAL INFERIOR --- */
.ngc-tips-cta {
    background: var(--quote-bg);
    backdrop-filter: var(--ngc-blur); -webkit-backdrop-filter: var(--ngc-blur);
    border: var(--ngc-border-glass); 
    border-radius: 12px; /* ¡AQUÍ ESTABA EL 16px ESCONDIDO! Corregido a 12px */
    padding: 20px;
    text-align: center; margin-top: 5px; 
    box-shadow: 0 4px 15px var(--card-shadow), var(--ngc-glass-edge);
}

.ngc-tips-cta h3 { color: var(--ngc-text-main); font-size: 1rem; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 1px; }
.ngc-tips-cta p { font-size: 0.8rem; color: var(--ngc-text-muted); margin-bottom: 15px; }

/* CORRECCIÓN: Elevación física oscura, no resplandor verde tóxico */
.btn-cta-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    background: #25D366; color: white; padding: 12px; border-radius: 12px;
    text-decoration: none; font-weight: 800; font-size: 0.85rem; text-transform: uppercase;
    letter-spacing: 1px; transition: all 0.3s ease; box-shadow: 0 4px 15px var(--card-shadow);
}
.btn-cta-wa:hover { 
    background: #1ebe57; 
    box-shadow: 0 8px 25px var(--card-shadow); 
    transform: translateY(-2px); 
    color: white;
}

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

/* ========================================================================= */
/* RECUPERAMOS LA VERSIÓN PC (Forzando el ancho de 1200px y las dos columnas) */
/* ========================================================================= */
@media (min-width: 1024px) {
    /* 1. Forzamos el ancho al mismo tamaño que la página de inicio */
    .ngc-wrapper { 
        max-width: 1200px !important; 
    }
    
    /* 2. Recuperamos la estructura de dos columnas exactas */
    .layout-desktop { 
        display: grid !important; 
        grid-template-columns: 420px 1fr !important; 
        gap: 30px; 
        align-items: start; 
    }
    
    /* 3. Columna izquierda fija */
    .col-izquierda {
        position: sticky !important; 
        top: 100px !important; 
        display: flex; 
        flex-direction: column; 
        gap: 15px;
        max-height: calc(100vh - 120px) !important; 
        overflow-y: auto; 
        padding-right: 5px;
    }
    .col-izquierda::-webkit-scrollbar { width: 0px; }
    
    /* 4. Columna derecha (Tips) con GAP para separar los acordeones */
    .col-derecha { 
        display: flex; 
        flex-direction: column; 
        gap: 12px; /* <-- Esto separa los elementos automáticamente */
    }
    
    .ngc-main-title { 
        text-align: left; 
        margin-bottom: 20px;
    }
    
    .ngc-section-label { 
        margin-top: 15px; 
        margin-bottom: 5px; 
    }
}

/* ======================================================= */
/*      REORDENAMIENTO EN MÓVILES (Tips)                   */
/* ======================================================= */
@media (max-width: 1023px) {
    .col-izquierda, .col-derecha {
        display: block; 
    }
    
    .ngc-banner-tips, details, .ngc-tips-cta {
        margin-bottom: 12px !important;
    }
    
    .ngc-section-label {
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }

    .footer-gnc-compact {
        margin-top: 0 !important;
    }
}