/* =============================================================
   ISELEC — Sistema de marca V02
   Portafolio Comercial 2026 V02. Los valores de --ise-* son los
   colores aprobados: no los cambies sin actualizar el portafolio.
   ============================================================= */

:root{
  /* Paleta V02 */
  --ise-azul:      #00457C;  /* Primario. Color exacto del logotipo */
  --ise-gris:      #6D6E71;  /* Segundo color del logotipo. Texto secundario */
  --ise-profundo:  #002B4E;  /* Fondos oscuros: hero, pie, cierres */
  --ise-naranja:   #F97316;  /* Acento. Máximo 10 % de la superficie */
  --ise-azul-claro:#2E7FC1;  /* Apoyo, gráficos, hover */
  --ise-nube:      #F2F5F8;  /* Fondo de tarjeta y sección alterna */
  --ise-borde:     #D8E0E8;  /* Separadores y bordes */
  --ise-texto:     #3A3C40;  /* Texto corrido */

  /* Tipografía */
  --ise-titulos: 'Montserrat', Arial, Helvetica, sans-serif;
  --ise-cuerpo:  'Open Sans', Arial, Helvetica, sans-serif;

  /* Ritmo */
  --ise-radio: 3px;
  --ise-ancho: 1180px;
  --ise-sec: 84px;
}

/* -------------------------------------------------------------
   ACCESIBILIDAD — contraste verificado (WCAG 2.1 AA)
   Blanco sobre #F97316 da 2.8:1 y NO pasa AA, ni siquiera para
   texto grande. Por eso el botón primario lleva texto en
   #002B4E, que da 5.1:1. No lo cambies a blanco.
   Pares verificados sobre blanco:
     #3A3C40 11.0:1 ✓   #6D6E71 5.1:1 ✓   #00457C 9.8:1 ✓
     #2E7FC1 4.3:1 — solo texto grande o gráficos, nunca cuerpo
   ------------------------------------------------------------- */

body{
  font-family: var(--ise-cuerpo);
  color: var(--ise-texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--ise-titulos);
  color: var(--ise-profundo);
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0;
}
h1{ font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 700; }
h3{ font-size: 1.075rem; font-weight: 700; }

a{ color: var(--ise-azul); }

.ise-wrap{ max-width: var(--ise-ancho); margin: 0 auto; padding: 0 28px; }
.ise-sec{ padding: var(--ise-sec) 0; }
.ise-sec--nube{ background: var(--ise-nube); }

.ise-eyebrow{
  font-family: var(--ise-titulos); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--ise-azul);
  display:flex; align-items:center; gap:10px;
}
.ise-eyebrow::before{ content:""; width:22px; height:3px; background: var(--ise-naranja); flex:none; }

/* ---------- Botones ---------- */
.ise-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--ise-titulos); font-weight:700; font-size:.94rem;
  padding:15px 28px; border-radius: var(--ise-radio);
  text-decoration:none; border:2px solid transparent; transition:.16s;
}
.ise-btn--pri{ background: var(--ise-naranja); color: var(--ise-profundo); }
.ise-btn--pri:hover{ background:#EA6A0C; color: var(--ise-profundo); }
.ise-btn--ghost{ border-color: var(--ise-borde); color: var(--ise-profundo); background:#fff; }
.ise-btn--ghost:hover{ border-color: var(--ise-azul); color: var(--ise-azul); }
.ise-btn--dark{ border-color: rgba(255,255,255,.45); color:#fff; background:transparent; }
.ise-btn--dark:hover{ border-color:#fff; background: rgba(255,255,255,.1); }

/* ---------- Hero duotono ----------
   La imagen va como background-image en .ise-hero__img mediante
   estilo en línea desde la plantilla. Solo se usan archivos
   hero_*.jpg / heroV_*.jpg del banco propio, ya procesados en
   duotono; el velo de aquí ajusta contraste, no crea el duotono. */
.ise-hero{ position:relative; color:#fff; overflow:hidden; background: var(--ise-profundo); }
.ise-hero__img{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.ise-hero__img::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(112deg, rgba(0,43,78,.90) 6%, rgba(0,69,124,.62) 48%, rgba(46,127,193,.30) 100%);
}
.ise-hero__in{ position:relative; padding:112px 0 100px; max-width:47rem; }
.ise-hero h1{ color:#fff; }
.ise-hero__sub{ margin-top:22px; font-size:1.14rem; color: rgba(255,255,255,.9); max-width:56ch; }
.ise-hero__cta{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }
.ise-hero__kicker{
  font-family: var(--ise-titulos); font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:.72; margin-bottom:18px;
}

/* ---------- Banda de licencias ---------- */
.ise-lic{ background: var(--ise-profundo); color:#fff; padding:64px 0; }
.ise-lic h2{ color:#fff; }
.ise-lic__hd{ display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:32px; }
.ise-lic__note{ font-size:.86rem; color: rgba(255,255,255,.62); max-width:34ch; }
.ise-lic__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ise-lic__card{ background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:4px; padding:26px 24px; }
.ise-lic__card h3{ color:#fff; font-size:1rem; }
.ise-lic__res{ font-family: var(--ise-titulos); font-size:.82rem; font-weight:600; color: var(--ise-azul-claro); margin-top:10px; }
.ise-lic__row{ display:flex; justify-content:space-between; gap:12px; font-size:.85rem; padding:9px 0; border-top:1px solid rgba(255,255,255,.14); margin-top:14px; }
.ise-lic__row:first-of-type{ margin-top:18px; }
.ise-lic__k{ color: rgba(255,255,255,.58); }
.ise-lic__v{ font-weight:700; text-align:right; }
.ise-lic__v small{ display:block; font-weight:400; color: rgba(255,255,255,.6); }
.ise-lic__norms{ margin-top:26px; font-size:.86rem; color: rgba(255,255,255,.72); }
.ise-lic__norms b{ color:#fff; }

/* ---------- Tarjetas ---------- */
.ise-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.ise-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.ise-card{
  background:#fff; border:1px solid var(--ise-borde); border-radius:4px;
  padding:30px 26px 28px; display:flex; flex-direction:column; gap:12px;
  text-decoration:none; transition:.16s;
}
.ise-card:hover{ border-color: var(--ise-azul); box-shadow:0 8px 26px rgba(0,43,78,.09); transform:translateY(-2px); }
.ise-card__n{ font-family: var(--ise-titulos); font-size:.72rem; font-weight:700; color: var(--ise-gris); letter-spacing:.12em; }
.ise-card p{ font-size:.92rem; color: var(--ise-gris); }
.ise-card__go{ margin-top:auto; padding-top:16px; font-family: var(--ise-titulos); font-size:.84rem; font-weight:700; color: var(--ise-azul); }

.ise-tag{
  align-self:flex-start; font-family: var(--ise-titulos); font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color: var(--ise-azul);
  background: var(--ise-nube); border:1px solid var(--ise-borde); padding:5px 10px; border-radius:2px;
}
.ise-chip{
  font-family: var(--ise-titulos); font-size:.83rem; font-weight:600; color: var(--ise-profundo);
  background:#fff; border:1px solid var(--ise-borde); border-radius: var(--ise-radio); padding:9px 15px;
}
.ise-chips{ display:flex; flex-wrap:wrap; gap:9px; }

/* ---------- Utilidades ---------- */
.ise-lead{ font-size:1.06rem; color: var(--ise-gris); max-width:64ch; }
.ise-rule{ border-left:3px solid var(--ise-naranja); padding-left:20px; }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.ise-skip:focus{ position:fixed; top:8px; left:8px; z-index:9999; background:#fff; padding:12px 18px; border:2px solid var(--ise-azul); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .ise-grid4{ grid-template-columns:repeat(2,1fr); }
  .ise-grid3, .ise-lic__grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .ise-grid4{ grid-template-columns:1fr; }
  .ise-sec{ padding:60px 0; }
  .ise-hero__in{ padding:76px 0 68px; }
}

/* ---------- Impresión y accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
  .ise-card:hover{ transform:none; }
}