/* COHERSA · base compartida por el sitio web y la Agenda Corporativa
   Colores tomados del logo original: azul #0A2363 y amarillo #FEB801. */

/* Letras del sitio, guardadas aquí mismo (assets/fonts) para que los visitantes no se conecten a Google.
   DM Sans (texto, un solo archivo variable para 400, 500 y 700) y Poppins (títulos, 500, 600 y 700).
   Licencia libre SIL Open Font License 1.1 (assets/fonts/OFL-*.txt). Solo el juego latino: cubre todo el español. */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/poppins-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/poppins-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --azul: #0A2363;
  --azul-900: #06173F;
  --azul-800: #0B1D52;
  --azul-700: #133A8A;
  --azul-500: #3558B0;
  --azul-100: #DCE4F5;
  --azul-50: #EEF2FA;
  --amarillo: #FEB801;
  --amarillo-600: #E5A400;
  --amarillo-800: #8A6200; /* dorado oscuro para textos sobre fondo claro: se lee bien (contraste 5.5 a 1 sobre blanco) */
  --amarillo-100: #FFEDB8;
  --amarillo-50: #FFF8E3;
  --tinta: #0E1730;
  --gris-700: #36415A;
  --gris: #5A6782;
  --gris-300: #C9D1E0;
  --linea: #E3E8F1;
  --fondo: #F5F7FB;
  --blanco: #FFFFFF;
  --verde: #16825D;
  --verde-50: #E6F5EE;
  --rojo: #C2362F;
  --rojo-50: #FCEBEA;
  --ambar: #B45F06;
  --ambar-50: #FFF3E0;
  --spca: #1D395E;
  --incoma: #6E1A34;

  --fuente-titulos: "Poppins", "Segoe UI", system-ui, sans-serif;
  --fuente: "DM Sans", "Segoe UI", system-ui, sans-serif;

  --radio-s: 10px;
  --radio: 16px;
  --radio-l: 24px;
  --sombra-s: 0 1px 2px rgba(10, 35, 99, .06), 0 2px 8px rgba(10, 35, 99, .06);
  --sombra: 0 10px 30px rgba(10, 35, 99, .10);
  --sombra-l: 0 24px 60px rgba(10, 35, 99, .18);
  --transicion: 220ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 16px/1.6 var(--fuente);
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--fuente-titulos); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
/* Detalles del navegador con el estilo de la marca: subrayado separado del texto y cursor de escritura azul */
a { text-underline-offset: .2em; text-decoration-thickness: from-font; }
input, textarea { caret-color: var(--azul); }
/* Marco de foco para quien usa el teclado: azul sobre fondos claros. Sobre fondos oscuros se cambia a amarillo (ver sitio.css) */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amarillo-100); color: var(--azul); }

.solo-lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Botones */
.boton {
  --b-fondo: var(--amarillo); --b-texto: var(--azul); --b-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  border: 2px solid var(--b-borde); background: var(--b-fondo); color: var(--b-texto);
  font: 600 15px/1.2 var(--fuente-titulos); text-decoration: none; white-space: nowrap;
  transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion), color var(--transicion);
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(254, 184, 1, .32); --b-fondo: #FFC21F; }
.boton:active { transform: translateY(0); }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton--azul { --b-fondo: var(--azul); --b-texto: var(--blanco); }
.boton--azul:hover { --b-fondo: var(--azul-700); box-shadow: 0 10px 24px rgba(10, 35, 99, .28); }
.boton--contorno { --b-fondo: transparent; --b-texto: var(--blanco); --b-borde: rgba(255, 255, 255, .55); }
.boton--contorno:hover { --b-fondo: rgba(255, 255, 255, .12); box-shadow: none; --b-borde: var(--blanco); }
.boton--contorno-azul { --b-fondo: transparent; --b-texto: var(--azul); --b-borde: var(--azul-100); }
.boton--contorno-azul:hover { --b-fondo: var(--azul-50); --b-borde: var(--azul); box-shadow: none; }
.boton--chico { min-height: 40px; padding: 8px 18px; font-size: 14px; }

/* Pantalla de carga: la «C» late mientras carga y, al terminar, la I y la H la rodean para formar el logo CH.
   La C es justo el espacio libre entre la I y la H, por eso encajan sin sobreponerse. */
.intro {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: var(--amarillo); color: var(--azul); cursor: pointer;
  animation: intro-seguro 1ms linear 9s forwards; /* si algo falla, se quita sola */
}
.intro__logo { width: auto; height: clamp(150px, 32vmin, 250px); overflow: visible; fill: currentColor; }
.intro__i, .intro__h, .intro__nombre { opacity: 0; }
.intro__c { animation: intro-latido 1s ease-in-out infinite; }
.intro__nombre { font: 700 340px/1 var(--fuente-titulos); letter-spacing: .1em; }
.intro--forma .intro__c { animation: intro-se-va .4s ease .2s both; }
.intro--forma .intro__i { --desde: -260px; animation: intro-llega .65s cubic-bezier(.2, .8, .2, 1) both; }
.intro--forma .intro__h { --desde: 260px; animation: intro-llega .65s cubic-bezier(.2, .8, .2, 1) both; }
.intro--forma .intro__nombre { animation: intro-sube .5s cubic-bezier(.2, .8, .2, 1) .45s both; }
.intro--sale { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
@keyframes intro-latido { 50% { opacity: .12; } }
@keyframes intro-se-va { to { opacity: 0; } }
@keyframes intro-llega { from { opacity: 0; transform: translateX(var(--desde)); } to { opacity: 1; transform: none; } }
@keyframes intro-sube { from { opacity: 0; transform: translateY(160px); } to { opacity: 1; transform: none; } }
@keyframes intro-seguro { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  /* Sin movimiento: el logo completo aparece quieto */
  .intro__c { visibility: hidden; }
  .intro__i, .intro__h, .intro__nombre { opacity: 1; }
  .intro--forma .intro__i, .intro--forma .intro__h, .intro--forma .intro__nombre { animation: none; }
}