/* IDENTIDAD CORPORATIVA - PÁGINAS PREVIEW */
/* /dinamico/css/identidad-preview.css */
/* Última modificación: 2026-03-01 22:30 */
/*
 * Este archivo aplica la paleta de identidad corporativa a TODAS las
 * páginas preview (bonificados, metodología, quiénes somos, opiniones,
 * consultoría, portada, catálogo, contacto).
 *
 * Se carga DESPUÉS de cabecera-nueva.css y ANTES de los estilos inline
 * de cada página, para que los estilos inline puedan heredar las variables
 * pero este archivo pueda sobreescribir colores hardcodeados.
 *
 * PALETA CORPORATIVA CIBERAULA:
 * - Azul corporativo:    #2A6496  (títulos, secciones, etiquetas, enlaces)
 * - Azul claro fondo:    #E0F0F9  (bloques descriptivos, badges)
 * - Ámbar dorado:        #B8860B  (CTAs, botones, barra nav, "bonificado")
 * - Ámbar hover:         #9B7200
 * - Ámbar profundo:      #7A5A00
 * - Crema ámbar:         #FAF0D4  (badges "bonificable")
 * - Gris exterior body:  #d4d4d4
 * - Gris texto sec:      #5F5F5F
 * - Footer oscuro:       #2d3748 / #1a202c / #171923
 * - Blanco contenido:    #ffffff
 */

/* ============================================
   1. VARIABLES CSS CORPORATIVAS
   Sobreescriben cualquier :root de cada página
   ============================================ */
:root {
    /* Primarios */
    --corp-blue:         #2A6496;
    --corp-blue-dark:    #1E4D6E;
    --corp-blue-light:   #E0F0F9;
    --corp-blue-medium:  #3A7DB5;

    /* Ámbar */
    --corp-amber:        #B8860B;
    --corp-amber-hover:  #9B7200;
    --corp-amber-deep:   #7A5A00;
    --corp-amber-cream:  #FAF0D4;
    --corp-amber-light:  #FFF8E7;

    /* Grises */
    --corp-gray-body:    #d4d4d4;
    --corp-gray-text:    #5F5F5F;
    --corp-gray-light:   #F0F0F0;

    /* Footer */
    --corp-footer-main:  #2d3748;
    --corp-footer-mid:   #1a202c;
    --corp-footer-dark:  #171923;

    /* Texto */
    --corp-text-dark:    #1a365d;
    --corp-text-body:    #334155;
    --corp-text-muted:   #64748b;

    /* Overrides de las variables que usan las páginas */
    --primary-blue:      #2A6496;
    --accent-blue:       #2A6496;
    --light-blue:        #E0F0F9;
    --teal:              #2A6496;
    --emerald:           #B8860B;
    --amber:             #B8860B;
    --text-dark:         #1a365d;
    --text-light:        #64748b;
    --bg-light:          #f8fafc;
    --border-color:      #e2e8f0;

    /* Variables de quienes-somos */
    --color-primary:       #2A6496;
    --color-primary-light: #3A7DB5;
    --color-cta:           #B8860B;
    --color-cta-hover:     #9B7200;
    --color-success:       #2A6496;
    --color-success-light: #3A7DB5;
    --color-text:          #1a365d;
    --color-text-secondary:#5F5F5F;
    --color-text-muted:    #64748b;

    /* Variables de opiniones */
    --primary-blue-light:  #3A7DB5;
    --accent-teal:         #2A6496;
    --accent-teal-light:   #3A7DB5;
    --gold:                #B8860B;
    --gold-light:          #D4A017;

    /* Variables de consultoría */
    --bg-gradient-start:   #f8fafc;
    --bg-gradient-end:     #E0F0F9;
}

/* ============================================
   2. BODY — Fondo gris exterior corporativo
   ============================================ */
body {
    background-color: var(--corp-gray-body) !important;
}

/* ============================================
   3. BARRA DE NAVEGACIÓN — Ámbar dorado
   Aplica a .nav-bar-pc y .nav-bar-movil
   definidas en preview_wrapper.php y en las
   páginas que no usan el wrapper
   ============================================ */
.nav-bar-pc {
    background: var(--corp-amber) !important;
    border-bottom: 2px solid var(--corp-amber-hover) !important;
}
.nav-bar-pc a {
    color: #fff !important;
    border-right-color: rgba(255,255,255,0.2) !important;
}
.nav-bar-pc a:hover {
    background: var(--corp-amber-hover) !important;
    color: #fff !important;
}
.nav-bar-pc a:last-child {
    border-right-color: transparent !important;
}

.nav-bar-movil {
    background: var(--corp-amber) !important;
}
.nav-bar-movil a {
    color: #fff !important;
    border-right-color: rgba(255,255,255,0.2) !important;
}
.nav-bar-movil a:hover {
    background: var(--corp-amber-hover) !important;
}

/* ============================================
   4. FOOTER — Transparente lateral + colores corp
   ============================================ */
.footer-ciberaula {
    background-color: transparent !important;
}
.footer-wrapper {
    background-color: var(--corp-footer-main) !important;
}
.footer-links-bar {
    background-color: var(--corp-footer-mid) !important;
}
.footer-bottom {
    background-color: var(--corp-footer-dark) !important;
}

/* ============================================
   5. TÍTULOS H1 — Azul corporativo
   ============================================ */
.paper-title,
.hero-quienes h1,
.opiniones-hero h1,
.hero-page h1 {
    color: var(--corp-blue) !important;
}

/* ============================================
   6. TÍTULOS DE SECCIÓN (H2) — Azul corporativo
   ============================================ */
.section-title,
.section-title-con,
.mision-content h2,
.reconocimientos-section h2,
.historia-section h2,
.valoraciones-content h2,
.beneficios-section h2,
.widget-header h2,
.advantages-content h2 {
    color: var(--corp-blue) !important;
}

/* Bordes de sección */
.section-title {
    border-bottom-color: var(--corp-blue-light) !important;
}
.mision-content h2,
.historia-section h2 {
    border-left-color: var(--corp-amber) !important;
}

/* ============================================
   7. SUBTÍTULOS H3 — Azul medio
   ============================================ */
h3,
.process-card-title,
.beneficio-text h3 {
    color: var(--corp-blue) !important;
}
/* Excepción: h3 sobre fondo oscuro (mantener blanco) */
.cta-box h3,
.cta-section h3,
.cta-section-con h2,
.cta-opiniones h2,
.destacado-chatgpt-content h3,
.visual-card h4,
.process-card-con h3,
.stats-section-con .stat-item h3 {
    color: #ffffff !important;
}

/* ============================================
   8. NUMBERS DE SECCIÓN — Azul corporativo
   ============================================ */
.section-number {
    background: var(--corp-blue) !important;
}

/* ============================================
   9. TABLAS — Cabecera azul corporativo
   ============================================ */
.credit-table thead,
.tech-table thead {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important;
}
.credit-table tbody tr:hover,
.tech-table tbody tr:hover {
    background: var(--corp-blue-light) !important;
}
.aspect-icon {
    color: var(--corp-blue) !important;
}

/* ============================================
   10. CTAs Y BOTONES — Ámbar corporativo
   ============================================ */
/* CTA boxes con fondo azul corp */
.cta-box {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important;
}
.cta-opiniones {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #234b73 50%, #3A7DB5 100%) !important;
}

/* Botones primarios → ámbar */
.btn-primary-cta {
    background: linear-gradient(135deg, var(--corp-amber) 0%, var(--corp-amber-hover) 100%) !important;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3) !important;
}
.btn-primary-cta:hover {
    box-shadow: 0 6px 16px rgba(184, 134, 11, 0.4) !important;
}
.btn-cta-op {
    background: #fff !important;
    color: var(--corp-blue) !important;
}
.btn-cta-op:hover {
    color: var(--corp-amber) !important;
}
.cta-button-con {
    background: var(--corp-amber) !important;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3) !important;
}
.cta-button-con:hover {
    background: var(--corp-amber-hover) !important;
}

/* CTA de quiénes somos — ámbar */
.cta-section {
    background: linear-gradient(135deg, var(--corp-amber) 0%, var(--corp-amber-hover) 100%) !important;
}
.btn-cta-primary-qs:hover {
    color: var(--corp-amber) !important;
}

/* ============================================
   11. BADGES Y DESTACADOS — Paleta corporativa
   ============================================ */
.hero-badge {
    background: var(--corp-blue) !important;
}

/* Destacados de quiénes somos */
.destacado-icon {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important;
}
.destacado-item {
    border-left-color: var(--corp-blue) !important;
}
.destacado-chatgpt {
    background: var(--corp-blue) !important;
}

/* Beneficios de opiniones */
.beneficio-icon {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important;
}

/* ============================================
   12. STATS — Azul corporativo
   ============================================ */
.stat-value,
.stat-number {
    color: var(--corp-blue) !important;
}
/* Excepción: sobre fondo oscuro */
.stats-section-con .stat-item h3 {
    color: #fff !important;
}

/* ============================================
   13. PROCESS STEPS — Números y hover azul
   ============================================ */
.flow-step-number {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important;
    box-shadow: 0 3px 8px rgba(42, 100, 150, 0.3) !important;
}
.flow-step:hover {
    border-color: var(--corp-blue) !important;
    box-shadow: 0 8px 20px rgba(42, 100, 150, 0.15) !important;
}
.flow-step-icon {
    color: var(--corp-blue) !important;
}
.flow-step.active {
    border-color: var(--corp-blue) !important;
    background: linear-gradient(180deg, var(--corp-blue-light) 0%, #d0e8f5 100%) !important;
}

/* Process numbers (bonificados) */
.process-number {
    box-shadow: 0 4px 12px rgba(42, 100, 150, 0.2) !important;
}
.process-card:nth-child(1) .process-number,
.process-card:nth-child(2) .process-number,
.process-card:nth-child(3) .process-number {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important;
}
.process-card:nth-child(4) .process-number,
.process-card:nth-child(5) .process-number,
.process-card:nth-child(6) .process-number {
    background: linear-gradient(135deg, var(--corp-amber) 0%, var(--corp-amber-hover) 100%) !important;
}

/* Process card tops (bonificados) */
.process-card:nth-child(1)::before { background: linear-gradient(90deg, var(--corp-blue), #3A7DB5) !important; }
.process-card:nth-child(2)::before { background: linear-gradient(90deg, var(--corp-blue), #3A7DB5) !important; }
.process-card:nth-child(3)::before { background: linear-gradient(90deg, var(--corp-blue), #3A7DB5) !important; }
.process-card:nth-child(4)::before { background: linear-gradient(90deg, var(--corp-amber), #D4A017) !important; }
.process-card:nth-child(5)::before { background: linear-gradient(90deg, var(--corp-amber), #D4A017) !important; }
.process-card:nth-child(6)::before { background: linear-gradient(90deg, var(--corp-amber), #D4A017) !important; }

/* Process icon backgrounds (bonificados) */
.process-card:nth-child(1) .process-card-icon,
.process-card:nth-child(2) .process-card-icon,
.process-card:nth-child(3) .process-card-icon { background: var(--corp-blue-light) !important; }
.process-card:nth-child(4) .process-card-icon,
.process-card:nth-child(5) .process-card-icon,
.process-card:nth-child(6) .process-card-icon { background: var(--corp-amber-cream) !important; }
.process-card:nth-child(1) .process-card-icon svg,
.process-card:nth-child(2) .process-card-icon svg,
.process-card:nth-child(3) .process-card-icon svg { color: var(--corp-blue) !important; }
.process-card:nth-child(4) .process-card-icon svg,
.process-card:nth-child(5) .process-card-icon svg,
.process-card:nth-child(6) .process-card-icon svg { color: var(--corp-amber) !important; }

/* Process cards (consultoría) - alterno azul/ámbar */
.card-blue  { background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important; }
.card-teal  { background: linear-gradient(135deg, var(--corp-blue) 0%, #2A6496 100%) !important; }
.card-green { background: linear-gradient(135deg, #3A7DB5 0%, var(--corp-blue) 100%) !important; }
.card-amber { background: linear-gradient(135deg, var(--corp-amber) 0%, var(--corp-amber-hover) 100%) !important; }
.card-orange{ background: linear-gradient(135deg, var(--corp-amber) 0%, #D4A017 100%) !important; }
.card-rose  { background: linear-gradient(135deg, var(--corp-amber-hover) 0%, var(--corp-amber) 100%) !important; }

/* ============================================
   14. FAQ — Bordes y toggles azul corporativo
   ============================================ */
.faq-item {
    border-left-color: var(--corp-blue) !important;
}
.faq-item h4 {
    color: var(--corp-blue) !important;
}
.faq-toggle {
    background: var(--corp-blue) !important;
}
.faq-item.active .faq-toggle {
    background: var(--corp-amber) !important;
}

/* ============================================
   15. ENLACES Y ACENTOS — Azul/ámbar corp
   ============================================ */
.paper-meta svg {
    color: var(--corp-blue) !important;
}
.reconocimiento-expand {
    color: var(--corp-amber) !important;
}
.reconocimiento-card:hover {
    border-color: var(--corp-blue) !important;
}
.modal-close-qs {
    background: var(--corp-blue) !important;
}

/* ============================================
   16. VISUAL CARDS — Azul corporativo
   ============================================ */
.visual-card {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important;
}
.stats-section-con {
    background: linear-gradient(135deg, var(--corp-blue) 0%, #3A7DB5 100%) !important;
}

/* ============================================
   17. CHECKS Y MARKS — Ámbar corporativo
   ============================================ */
.advantage-check {
    background: linear-gradient(135deg, var(--corp-amber) 0%, var(--corp-amber-hover) 100%) !important;
}
.check-list li::before {
    color: var(--corp-amber) !important;
}
.credit-percent {
    color: var(--corp-amber) !important;
}

/* ============================================
   18. HERO BACKGROUNDS — Azul claro corporativo
   ============================================ */
.hero-quienes {
    background: linear-gradient(180deg, var(--corp-blue-light) 0%, #ffffff 100%) !important;
}
.opiniones-hero {
    background: linear-gradient(135deg, var(--corp-blue-light) 0%, #d0e8f5 50%, #f8fafc 100%) !important;
}
.hero-page {
    background: linear-gradient(135deg, #f8fafc 0%, var(--corp-blue-light) 100%) !important;
}

/* ============================================
   19. RESULTADOS CONTAINER — Crema ámbar
   ============================================ */
.results-container {
    background: linear-gradient(135deg, var(--corp-amber-light) 0%, var(--corp-amber-cream) 100%) !important;
    border-color: #E8D5A0 !important;
}
.results-container .stats-inline {
    border-color: #E8D5A0 !important;
}

/* ============================================
   20. RATING Y STARS — Ámbar
   ============================================ */
.rating-float .stars {
    color: var(--corp-amber) !important;
}

/* ============================================
   21. RESPONSIVE — Cabecera formas geométricas
   (reducir opacidades como en identidad-corporativa.css)
   ============================================ */
.geo-circle-big {
    background: radial-gradient(circle at 40% 40%,rgba(0,200,235,.18) 0%,rgba(0,180,220,.08) 50%,transparent 70%) !important;
}
.geo-circle-med {
    background: radial-gradient(circle,rgba(60,180,230,.14) 0%,rgba(40,160,210,.06) 55%,transparent 70%) !important;
}
.geo-circle-sm {
    background: radial-gradient(circle,rgba(0,210,240,.12) 0%,transparent 65%) !important;
}
.geo-diamond  { background: rgba(0,210,240,.08) !important; }
.geo-diamond2 { background: rgba(0,200,230,.06) !important; }
.geo-hex      { background: rgba(0,210,240,.07) !important; }
.geo-tri      { border-bottom-color: rgba(0,200,240,.06) !important; }
.geo-ring     { border-color: rgba(0,210,240,.14) !important; }
.geo-ring2    { border-color: rgba(0,200,230,.12) !important; }
.geo-diamond-outline { border-color: rgba(0,210,240,.12) !important; }
.geo-dots1    { background-image: radial-gradient(circle,rgba(0,220,245,.2) 2.5px,transparent 2.5px) !important; }
.geo-dots2    { background-image: radial-gradient(circle,rgba(60,200,240,.15) 2px,transparent 2px) !important; }
.geo-lines::before { background: linear-gradient(90deg,transparent 0%,rgba(0,210,240,.2) 30%,rgba(0,220,245,.3) 50%,rgba(0,210,240,.2) 70%,transparent 100%) !important; }
.geo-lines::after  { background: linear-gradient(90deg,transparent 0%,rgba(80,200,240,.18) 30%,rgba(80,210,245,.25) 50%,rgba(80,200,240,.18) 70%,transparent 100%) !important; }
.geo-plus::before, .geo-plus::after { background: rgba(0,210,240,.18) !important; }

/* ============================================
   22. INTERNAL LINKS (opiniones CTA) — Ámbar hover
   ============================================ */
.internal-links-op a:hover {
    background: rgba(184, 134, 11, 0.3) !important;
}

/* ============================================
   23. DESTACADOS SECTION — Fondo azul claro
   ============================================ */
.destacados-section {
    background: var(--corp-blue-light) !important;
}