/* ================================================================
   AurionGroup — Home Sections (light mode)
   Fondos claros, texto oscuro, acento dorado
================================================================ */

/* ── Variables de color ── */
:root {
    --section-bg-1:   #f8fafc;
    --section-bg-2:   #f1f5f9;
    --section-bg-3:   #ffffff;
    --text-heading:   var(--color-primary, #1B3A5C);
    --text-body:      #4b5563;
    --text-muted:     #9ca3af;
    --text-subtle:    #6b7280;
    --card-bg:        #ffffff;
    --card-border:    #e5e7eb;
    --card-shadow:    0 1px 4px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 4px 24px rgba(0,0,0,0.1);
}

/* ── Secciones ── */
.section-light-1 { background: var(--section-bg-1); }
.section-light-2 { background: var(--section-bg-2); }
.section-light-3 { background: var(--section-bg-3); }

/* ── Tipografía ── */
.section-light-1 h2,
.section-light-2 h2,
.section-light-3 h2 { color: var(--text-heading); }

.section-eyebrow { color: var(--color-accent, #C9A84C); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.section-heading { color: var(--text-heading); }
.section-heading-muted { color: var(--text-muted); }

.section-body  { color: var(--text-body); }
.section-muted { color: var(--text-muted); }
.section-subtle { color: var(--text-subtle); }

/* ── Tarjetas base ── */
.light-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: box-shadow .3s ease, transform .3s ease;
}
.light-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

/* Tarjeta destacada con tinte dorado */
.light-card-gold {
    background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02));
    border: 1px solid rgba(201,168,76,0.25);
    box-shadow: var(--card-shadow);
    transition: box-shadow .3s ease, transform .3s ease;
}
.light-card-gold:hover { box-shadow: 0 4px 24px rgba(201,168,76,0.15); transform: translateY(-2px); }

/* Tarjeta tinte azul */
.light-card-blue {
    background: linear-gradient(135deg, rgba(59,130,246,0.07), rgba(59,130,246,0.01));
    border: 1px solid rgba(59,130,246,0.2);
    box-shadow: var(--card-shadow);
    transition: box-shadow .3s ease, transform .3s ease;
}
.light-card-blue:hover { box-shadow: 0 4px 24px rgba(59,130,246,0.12); transform: translateY(-2px); }

/* ── Bento números decorativos ── */
.bento-number {
    position: absolute; top: 1.25rem; right: 1.5rem;
    font-size: 6rem; font-weight: 900; line-height: 1;
    pointer-events: none; user-select: none;
    color: var(--color-primary, #1B3A5C);
    opacity: .05;
}

/* ── Tags / Pills ── */
.sector-tag {
    padding: .35rem 1rem;
    border-radius: 9999px;
    font-size: .7rem; font-weight: 600;
    border: 1px solid rgba(201,168,76,0.3);
    background: rgba(201,168,76,0.08);
    color: #92752a;
}

/* ── Separador eyebrow ── */
.eyebrow-line {
    display: inline-block; width: 2.5rem; height: 1px;
    background: var(--color-accent, #C9A84C);
    vertical-align: middle;
}

/* ── Tarjetas de servicio ── */
.service-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: 1.5rem;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
    cursor: default;
}
.service-card::after {
    content: '';
    position: absolute; bottom: 0; left: 2rem; right: 2rem; height: 2px;
    background: linear-gradient(to right, transparent, var(--card-accent-color, #C9A84C), transparent);
    opacity: 0;
    transition: opacity .35s ease;
}
.service-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); border-color: rgba(201,168,76,0.3); }
.service-card:hover::after { opacity: 1; }

.service-card .svc-number { font-size: 2rem; font-weight: 900; color: var(--color-primary); opacity: .06; }
.service-card h3 { color: var(--text-heading); }
.service-card p  { color: var(--text-body); }

/* ── Steps ── */
.step-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: 1.5rem;
    padding: 1.75rem;
    width: 100%;
}
.step-card h3 { color: var(--text-heading); }
.step-card p  { color: var(--text-body); }

.step-connector {
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.25) 20%, rgba(201,168,76,0.25) 80%, transparent);
}
.step-connector-fill { background: var(--color-accent, #C9A84C); transition: width 1.5s ease; }

/* ── Alcance: lista de aliados ── */
.ally-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}
.ally-row span { color: var(--text-body); font-size: .875rem; font-weight: 500; }

/* ── Country pills ── */
.country-pill {
    padding: .4rem .9rem;
    border-radius: 9999px;
    font-size: .875rem; font-weight: 500;
    background: #f1f5f9;
    border: 1px solid #e5e7eb;
    color: var(--text-subtle);
}

/* ── Region label ── */
.region-label {
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .15em;
    color: var(--text-muted);
    margin-bottom: .75rem;
}

/* ── Quote banner ── */
.quote-banner {
    background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02));
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.quote-banner blockquote {
    font-size: 1.2rem; font-style: italic; font-weight: 600;
    color: var(--text-heading);
    max-width: 56rem; margin: 0 auto;
    line-height: 1.65;
}
.quote-banner cite {
    display: block; margin-top: 1rem;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--text-muted); font-style: normal;
}

/* ================================================================
   LIGHT SECTION — Overrides de texto (Tailwind usa !important vía CDN)
   Cualquier elemento dentro de .light-section recibe color oscuro
================================================================ */

/* Headings */
.light-section h1,
.light-section h2,
.light-section h3,
.light-section h4 {
    color: var(--color-primary, #1B3A5C) !important;
}

/* Tailwind text-white → oscuro */
.light-section .text-white {
    color: var(--color-primary, #1B3A5C) !important;
}

/* Opacidades → escala legible en fondo claro */
.light-section .text-white\/80 { color: #374151 !important; }
.light-section .text-white\/70,
.light-section .text-white\/65 { color: #4b5563 !important; }
.light-section .text-white\/60,
.light-section .text-white\/55 { color: #6b7280 !important; }
.light-section .text-white\/50,
.light-section .text-white\/45 { color: #9ca3af !important; }
.light-section .text-white\/40,
.light-section .text-white\/35 { color: #05293F !important; }
.light-section .text-white\/30,
.light-section .text-white\/25 { color: #05293F !important; }
.light-section .text-white\/20,
.light-section .text-white\/15 { color: #e2e8f0 !important; }

/* Catch-all para estilos inline rgba(255,255,255,...) */
.light-section [style*="color:rgba(255,255,255"] {
    color: #4b5563 !important;
}

/* Filas de aliados */
.light-section .rounded-xl[style*="rgba(255,255,255,0.03"] {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
}

/* Country / pills sobre fondo claro */
.light-section .rounded-full[style*="rgba(255,255,255,0.06"] {
    background: #f1f5f9 !important;
    border-color: #e5e7eb !important;
    color: #4b5563 !important;
}

/* Números decorativos bento (opacity muy baja) */
.light-section .bento-number,
.light-section span.absolute[style*="opacity:0.04"],
.light-section span.absolute[style*="opacity:0.07"] {
    color: var(--color-primary, #1B3A5C) !important;
    opacity: 0.06 !important;
}

/* Cards con fondo semitransparente blanco → fondo blanco sólido */
.light-section .rounded-3xl[style*="rgba(255,255,255,0.03"],
.light-section .rounded-3xl[style*="rgba(255,255,255,0.04"],
.light-section .rounded-2xl[style*="rgba(255,255,255,0.03"],
.light-section .rounded-2xl[style*="rgba(255,255,255,0.04"] {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* Texto del grid decorativo — invisible en claro */
.light-section [style*="background-image:linear-gradient(rgba(255,255,255"] {
    opacity: 0 !important;
}

/* Quote banner */
.light-section .quote-banner blockquote { color: var(--color-primary, #1B3A5C); }
.light-section .quote-banner cite      { color: #9ca3af; }

/* ── Fade-up animation (aplicada vía JS IntersectionObserver en el blade) ── */

/* ================================================================
   HOME PAGE — Clases extraídas de estilos inline
================================================================ */

/* ── Hero ── */
.hero-section { height: 100vh; min-height: 560px; }
.hero-bg-primary { background: linear-gradient(135deg, var(--color-primary) 0%, #0d1d2b 100%); }
.hero-bg-dark    { background: linear-gradient(135deg, var(--color-primary) 0%, #0d1d2b 60%, #1a1a1a 100%); }
.hero-iframe {
    position: absolute; top: -60px; left: -5%;
    width: 110%; height: calc(100% + 120px);
    pointer-events: none;
}
.text-accent      { color: var(--color-accent); }
.bg-accent        { background: var(--color-accent); }
.text-primary-color   { color: var(--color-primary); }
.text-secondary-color { color: var(--color-secondary); }
.btn-primary   { background-color: var(--color-primary); }
.btn-secondary { background-color: var(--color-secondary); }
.bg-secondary  { background-color: var(--color-secondary); }

/* ── Text gradient dorado ── */
.text-gradient-gold {
    background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent) 50%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Metals Ticker ── */
.metals-ticker      { background: #050e1a; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ticker-label       { background: #050e1a; border-right: 1px solid rgba(255,255,255,0.08); }
.ticker-scroll-area { mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent); }
.ticker-track       { animation: tickerScroll 40s linear infinite; }

@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
#tickerTrack:hover { animation-play-state: paused; }

/* ── Sección Gold Chart ── */
.gold-section          { background: linear-gradient(180deg, var(--color-primary) 0%, #0a1628 100%); }
.chart-card            { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.chart-canvas-wrapper  { height: 280px; padding: 16px; }
.chart-loader          { background: rgba(10,22,40,0.7); }
.stat-card-dark        { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }

/* ── Fondos de sección ── */
.bg-section-1 { background: #f8fafc; }
.bg-section-2 { background: #f1f5f9; }
.bg-section-3 { background: #ffffff; }

/* ── Orbs decorativos ── */
.orb-gold-tr    { background: radial-gradient(circle, rgba(201,168,76,0.07), transparent 70%);                      transform: translate(20%,-20%); }
.orb-blue-bl    { background: radial-gradient(circle, rgba(30,90,180,0.08), transparent 70%);                       transform: translate(-20%,20%); }
.orb-top-gold   { background: radial-gradient(ellipse 80% 50% at 50% 0%,   rgba(201,168,76,0.04), transparent); }
.orb-bottom-gold{ background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(201,168,76,0.06), transparent); }
.orb-center-gold{ background: radial-gradient(ellipse 70% 70% at 50% 50%,  rgba(201,168,76,0.04), transparent); }

/* ── Cards de cristal / gradiente ── */
.card-glass        { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(16px); }
.card-glass-subtle { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.card-gold-gradient  { background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.02));  border: 1px solid rgba(201,168,76,0.18); }
.card-blue-gradient  { background: linear-gradient(135deg, rgba(30,90,180,0.12),  rgba(30,90,180,0.02));   border: 1px solid rgba(59,130,246,0.15); }
.card-alcance-gold   { background: linear-gradient(135deg, rgba(223,223,223,0.95), rgba(240,240,240,0.97)); border: 1px solid rgba(180,180,180,0.6); }
.card-alcance-blue   { background: linear-gradient(135deg, rgba(223,223,223,0.95), rgba(240,240,240,0.97)); border: 1px solid rgba(180,180,180,0.6); }
.card-quote          { background: linear-gradient(135deg, rgba(201,168,76,0.1),  rgba(201,168,76,0.03));  border: 1px solid rgba(201,168,76,0.15); }

/* ── Fondos de iconos ── */
.icon-bg-gold    { background: rgba(201,168,76,0.15); }
.icon-bg-gold-md { background: rgba(201,168,76,0.18); }
.icon-bg-gold-lg { background: rgba(201,168,76,0.2);  }
.icon-bg-blue    { background: rgba(59,130,246,0.15); }
.icon-bg-blue-lg { background: rgba(59,130,246,0.2);  }
.icon-bg-purple  { background: rgba(168,85,247,0.15); }
.icon-bg-green   { background: rgba(34,197,94,0.15);  }
.icon-bg-green-lg{ background: rgba(34,197,94,0.2);   }
.icon-bg-orange  { background: rgba(251,146,60,0.15); }

/* ── Números decorativos bento ── */
.bento-num-gold { color: rgba(201,168,76,0.07); }

/* ── Grid overlay decorativo ── */
.grid-overlay {
    background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ── Step connector ── */
.step-connector-bg { background: linear-gradient(to right, transparent, rgba(201,168,76,0.3) 20%, rgba(201,168,76,0.3) 80%, transparent); }
.step-line-fill    { background: var(--color-accent); transition: width 1.5s ease; width: 0; }

/* ── Step by Step fondo global ── */
.step-global-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}
.step-global-bg img {
    width: 80%;
    height: auto;
    opacity: 0.50;
}

/* ── Quote radial ── */
.quote-radial { background: radial-gradient(circle at 50% 0%, var(--color-accent), transparent 60%); }

/* ── Proyectos sin imagen ── */
.project-no-img { background: linear-gradient(135deg, var(--color-primary), #0d1d2b); }

/* ── Nombre aliado ── */
.ally-name { color: #374151; }