/* ══════════════════════════════════════════════════════════════
   BICOMERS · VERSIÓN CLARA (white)
   Se carga DESPUÉS de styles.css. Mantiene estructura, textos,
   video y animaciones; solo pasa las zonas oscuras a claras.
══════════════════════════════════════════════════════════════ */
:root {
  --blue-text: #3b6894;           /* azul legible sobre blanco (AA) */
  --ink-2: #3c4652;
  --soft: #eef3f8;                /* fondo suave para secciones antes oscuras */
  --accent: var(--blue-text);
}

/* ── Header ───────────────────────── */
.site-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); }
.site-header.is-scrolled { background: rgba(255, 255, 255, .99); border-bottom-color: var(--line); box-shadow: 0 8px 28px rgba(30, 36, 44, .08); }
.brand, .brand-word { color: var(--graphite); }
.brand:hover .brand-word { color: var(--blue); }
.brand small { color: var(--muted); }
.nav-links { color: var(--ink-2); }
.nav-links a:not(.button):hover { color: var(--blue-text); }
.menu-toggle { color: var(--graphite); border-color: rgba(30, 36, 44, .18); }

/* ── Home hero (video + slider + form) ── */
.home-hero { color: var(--graphite); }
.home-background-video { filter: saturate(.55) contrast(1) brightness(1.08); }
.home-hero::after {
  background: linear-gradient(105deg,
    rgba(255, 255, 255, .96) 0%,
    rgba(247, 249, 252, .90) 48%,
    rgba(247, 249, 252, .58) 100%);
}
.home-hero::before { background-image: linear-gradient(rgba(30, 36, 44, .05) 1px, transparent 1px); }
.hero-slide .slide-kicker { color: var(--blue-text); }
.hero-slide .slide-kicker::before { background: var(--blue); }
.hero-slide h1 { color: var(--graphite); }
.hero-slide p { color: #4a5561; }
.slider-dots button { background: rgba(30, 36, 44, .18); }
.slider-dots button.is-active { background: var(--blue); }
.hero-form-compact { border-color: var(--line); box-shadow: 0 24px 56px rgba(30, 36, 44, .14); }

/* ── Page hero (páginas internas) ── */
.page-hero { color: var(--graphite); background: linear-gradient(135deg, #f7f9fc 0%, #eef3f8 58%, #e4ecf4 100%); border-bottom: 1px solid var(--line); }
.page-hero::after { background-image: linear-gradient(rgba(30, 36, 44, .05) 1px, transparent 1px); }
.page-hero h1, .page-hero h2 { color: var(--graphite); }
.page-hero p { color: #4a5561; }
.page-hero .button.secondary { color: var(--graphite); border-color: rgba(30, 36, 44, .2); }
.page-hero .eyebrow, .hero .eyebrow, .audience .eyebrow { color: var(--blue-text); }

/* ── Hero genérico / sección de contacto ── */
.hero { color: var(--graphite); }
.hero::after { filter: blur(7px) saturate(.4) brightness(1.1); }
.hero::before { background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(247, 249, 252, .9) 55%, rgba(238, 243, 248, .8) 100%); }
.hero h1, .hero h2, .hero h3 { color: var(--graphite); }
.hero-copy { color: #4a5561; }
.hero .section-kicker { color: var(--blue-text); }
.contact-form-horizontal .field label { color: var(--muted); }
.contact-form-horizontal .field input,
.contact-form-horizontal .field select { color: var(--graphite); background: var(--white); border-color: #cfd8e2; }
.contact-form-horizontal .field input::placeholder { color: #8a96a3; }
.contact-form-horizontal .field select option { background: var(--white); color: var(--graphite); }
.contact-footnote { color: var(--muted); }
.contact-footnote a { color: var(--blue-text); }
.contact-footnote a:hover { color: var(--graphite); }
.trust-item strong, .contact-mini-grid b { color: var(--graphite); }
.trust-item span, .contact-mini-grid small { color: var(--muted); }

/* ── "Para quién trabajamos" ── */
.audience { color: var(--graphite); }
.audience::before { filter: blur(6px) saturate(.4) brightness(1.1); }
.audience::after { background: linear-gradient(135deg, rgba(247, 249, 252, .95) 0%, rgba(238, 243, 248, .88) 100%); }
.audience h2 { color: var(--graphite); }
.audience .section-lead { color: #4a5561; }
.audience .section-kicker { color: var(--blue-text) !important; }
.audience-card { background: rgba(255, 255, 255, .85); border-color: var(--line); box-shadow: var(--shadow); }
.audience-card:hover { background: var(--white); border-color: rgba(74, 123, 171, .45); box-shadow: var(--shadow-md); }
.audience-card b { color: var(--graphite); }
.audience-card span { color: #4a5561; }

/* ── Tarjetas y bloques que eran oscuros ── */
.dual-card.dark { background: var(--soft); border-color: rgba(74, 123, 171, .22); color: var(--ink-2); }
.dual-card.dark .dual-card-body h3 { color: var(--graphite); }
.dual-card.dark .dual-card-body p { color: #4a5561; }
.dual-card.dark .dual-card-list { color: var(--ink-2); }
.dual-card.dark .dual-card-list li::before { background: var(--blue); }
.dual-card.dark .dual-card-cta { color: var(--blue-text); }
.dual-card.dark .dual-card-cta:hover { color: var(--graphite); }

.feature-image-card { background: var(--white); }
.risk-panel, .side-cta, .cta-box, .service-card.highlight { color: var(--graphite); background: var(--soft); border: 1px solid var(--line); }
.cta-box h2, .risk-panel h2, .risk-panel h3, .side-cta h2, .side-cta h3, .service-card.highlight h3 { color: var(--graphite); }
.risk-panel p, .side-cta p, .cta-box p, .service-card.highlight p { color: #4a5561; }
.check-list li { color: var(--ink-2); }
.step-number { background: var(--blue); }
.dashboard-section.dark { background: var(--soft); border-top-color: var(--line); border-bottom-color: var(--line); }
.dashboard-section.dark h2 { color: var(--graphite); }
.dashboard-section.dark .section-lead, .dashboard-section.dark p { color: #4a5561; }
.clients { background: var(--paper); border-top: 1px solid var(--line); }
.clients-title { color: var(--muted); }
.client-logo { box-shadow: 0 8px 24px rgba(30, 36, 44, .10); }
.client-logo:hover { box-shadow: 0 14px 32px rgba(30, 36, 44, .16); }

/* ── Footer claro ── */
footer { color: var(--muted); background: var(--soft); border-top: 1px solid var(--line); }
.footer-brand .brand, .footer-brand .brand-word { color: var(--graphite); }
.footer-brand .brand small { color: var(--muted); }
.footer-brand p { color: #4a5561; }
.footer-column h3 { color: var(--graphite); }
.footer-column a { color: #4a5561; }
.footer-column a:hover { color: var(--blue-text); }
.footer-address { color: var(--muted); }
.footer-bottom { border-top-color: var(--line); color: var(--muted); }

/* ══════════════════════════════════════
   LOGO TIPOGRÁFICO · | BICOMERS (una barra)
══════════════════════════════════════ */
.brand-word { position: relative; padding-left: 15px; color: var(--graphite); }
.brand-word::after {
  content: "";
  position: absolute;
  width: 4px;
  border-radius: 2px;
}
.brand-word::after  { left: 0; top: 0; height: 1em; background: var(--blue); }  /* barra alta */
.brand-word small { color: var(--blue-text); }
.brand:hover .brand-word { color: var(--graphite); }
.brand:hover .brand-word::after { background: var(--blue-dim); }
.footer-brand .brand-word { color: var(--graphite); }