/* =========================================================================
   brand.css — Identidad de marca Conexión Market sobre Bootstrap 5
   Fuente: Manual de Marca 4.0 (pág. 14-17) — ver GUIA_MARCA_IA.md
   Cargar DESPUÉS de bootstrap.min.css y ANTES de site.css
   ========================================================================= */

/* -------------------------------------------------------------------------
   1.1 Tokens de marca
   ------------------------------------------------------------------------- */
:root{
  --cm-green-deep:   #26301A;
  --cm-green:        #386C0B;
  --cm-green-bright: #38A700;
  --cm-blue-light:   #569FD7;
  --cm-off-white:    #F0F2EF;
  --cm-blue-deep:    #193E73;

  /* Derivados de UI — NO están en el manual de marca. Pendientes de
     aprobación. Usar solo en la tabla comparativa (Fase 8.3). */
  --cm-teal:   #1CDCC7;
  --cm-orange: #F08C00;
  --cm-grey:   #7E7E7E;

  --cm-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* -------------------------------------------------------------------------
   1.2 Override de variables globales de Bootstrap
   ------------------------------------------------------------------------- */
:root{
  --bs-body-font-family: var(--cm-font);
  --bs-body-color: var(--cm-green-deep);
  --bs-body-bg: #FFFFFF;
  --bs-emphasis-color: var(--cm-green-deep);

  --bs-primary:   #386C0B;
  --bs-secondary: #193E73;
  --bs-success:   #38A700;
  --bs-info:      #569FD7;
  --bs-dark:      #26301A;
  --bs-light:     #F0F2EF;

  --bs-primary-rgb:   56,108,11;
  --bs-secondary-rgb: 25,62,115;
  --bs-success-rgb:   56,167,0;
  --bs-info-rgb:      86,159,215;
  --bs-dark-rgb:      38,48,26;
  --bs-light-rgb:     240,242,239;

  --bs-link-color: var(--cm-green);
  --bs-link-hover-color: var(--cm-green-bright);
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
}

/* -------------------------------------------------------------------------
   1.3 Override a nivel componente (crítico: .btn-primary NO lee --bs-primary)
   ------------------------------------------------------------------------- */
.btn-primary{
  --bs-btn-bg: var(--cm-green);              --bs-btn-border-color: var(--cm-green);
  --bs-btn-hover-bg: var(--cm-green-bright); --bs-btn-hover-border-color: var(--cm-green-bright);
  --bs-btn-active-bg: var(--cm-green-deep);  --bs-btn-active-border-color: var(--cm-green-deep);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--cm-green); --bs-btn-disabled-border-color: var(--cm-green);
}
.btn-success{
  --bs-btn-bg: var(--cm-green-bright); --bs-btn-border-color: var(--cm-green-bright);
  --bs-btn-hover-bg: var(--cm-green);  --bs-btn-hover-border-color: var(--cm-green);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color:#fff;
}
.btn-secondary{
  --bs-btn-bg: var(--cm-blue-deep); --bs-btn-border-color: var(--cm-blue-deep);
  --bs-btn-hover-bg: #14315C; --bs-btn-hover-border-color: #14315C;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color:#fff;
}
.btn-outline-light{
  --bs-btn-color:#fff; --bs-btn-border-color: rgba(255,255,255,.8);
  --bs-btn-hover-bg: rgba(255,255,255,.15); --bs-btn-hover-border-color:#fff; --bs-btn-hover-color:#fff;
}
.btn-light{
  --bs-btn-bg:#fff; --bs-btn-border-color:#fff; --bs-btn-color: var(--cm-green-deep);
  --bs-btn-hover-bg:#fff; --bs-btn-hover-color: var(--cm-green);
}
.accordion{
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(56,108,11,.25);
  --bs-accordion-active-color: var(--cm-green-deep);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-border-color: rgba(38,48,26,.15);
}
.form-control, .form-select{
  --bs-border-color: rgba(38,48,26,.25);
}
.form-control:focus, .form-select:focus{
  border-color: var(--cm-green); box-shadow: 0 0 0 .2rem rgba(56,108,11,.20);
}
.nav-pills{
  --bs-nav-pills-link-active-bg: var(--cm-blue-deep);
}
.form-check-input:checked{
  background-color: var(--cm-green); border-color: var(--cm-green);
}
.form-check-input:focus{
  box-shadow: 0 0 0 .2rem rgba(56,108,11,.20);
}

/* -------------------------------------------------------------------------
   1.4 Escala tipográfica (Manual pág. 16)
   ------------------------------------------------------------------------- */
body{ font-family: var(--cm-font); font-weight:400; line-height:1.6; }

.cm-hero-title{ font-weight:300; font-size:clamp(2.25rem,4.5vw,3.5rem); line-height:1.08; }
.cm-hero-title strong{ font-weight:800; }

h2, .h2{ font-weight:300; font-size:clamp(1.75rem,3vw,2.4rem); line-height:1.15; }
h2 strong, .h2 strong{ font-weight:700; }

.cm-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cm-green); margin-bottom:.75rem;
}
.cm-eyebrow svg{ flex:0 0 auto; }
.cm-eyebrow.is-light{ color: var(--cm-green-bright); }
.cm-eyebrow.is-white{ color: var(--cm-off-white); }
.cm-eyebrow.is-white .cm-icon-bars span { background: var(--cm-off-white); }
.cm-eyebrow.is-green .cm-icon-bars span { background: var(--cm-green); }
.cm-icon-bars.is-green span { background: var(--cm-green); }

.btn{ font-weight:600; }
small, .small{ font-weight:500; }

/* -------------------------------------------------------------------------
   1.5 Reglas de contraste
   ------------------------------------------------------------------------- */
/* --cm-green-bright y --cm-blue-light NUNCA llevan texto normal blanco encima.
   Se documenta acá para que quede a la vista al mantener este archivo. */
.bg-cm-bright, .bg-cm-blue-light{ color: var(--cm-green-deep); }
.bg-cm-bright a, .bg-cm-blue-light a{ color: var(--cm-green-deep); }

/* Utilidades de fondo/color de marca reutilizadas en site.css */
.bg-cm-deep{ background-color: var(--cm-green-deep); color: var(--cm-off-white); }
.bg-cm-green{ background-color: var(--cm-green); color:#fff; }
.bg-cm-bright{ background-color: var(--cm-green-bright); }
.bg-cm-blue-deep{ background-color: var(--cm-blue-deep); color: var(--cm-off-white); }
.bg-cm-blue-light{ background-color: var(--cm-blue-light); }
.bg-cm-offwhite{ background-color: var(--cm-off-white); }

.text-cm-deep{ color: var(--cm-green-deep) !important; }
.text-cm-green{ color: var(--cm-green) !important; }
.text-cm-bright{ color: var(--cm-green-bright) !important; }
.text-cm-blue-deep{ color: var(--cm-blue-deep) !important; }
.text-cm-offwhite{ color: var(--cm-off-white) !important; }