/* ===========================================================================
   The colors of influence · sistema visual compartido
   Del voto individual al ADN colectivo · ATREVIA
   =========================================================================== */

/* ----------------------------------------------------------------- tokens */
:root {
  /* Fondo: azul casi negro + trazas de luz por detrás. */
  --ink:        #04060e;
  --ink-raise:  #070b16;

  /* Texto. Los cuatro niveles están medidos sobre --ink:
     t1 ≈ 18:1 · t2 ≈ 9.5:1 · t3 ≈ 5.5:1 (mínimo AA) · t4 solo decorativo. */
  --t1: rgba(255,255,255,.95);
  --t2: rgba(255,255,255,.70);
  --t3: rgba(255,255,255,.52);
  --t4: rgba(255,255,255,.34);

  --line:    rgba(255,255,255,.12);
  --line-2:  rgba(255,255,255,.22);
  --line-3:  rgba(255,255,255,.34);
  --fill:    rgba(255,255,255,.035);
  --fill-2:  rgba(255,255,255,.07);

  /* Verde ATREVIA */
  --accent:   #4DA817;
  --accent-2: #8fd45f;
  --danger:   #ff9a8f;
  --live:     #ff3b30;   /* rojo de directo, tipo streaming */

  /* Gama cromática de valores */
  --v-confianza:  #0056ce;
  --v-liderazgo:  #aa26ff;
  --v-proposito:  #02b101;
  --v-innovacion: #e58300;
  --v-conexion:   #ffd900;
  --v-excelencia: #d61718;

  /* Ritmo */
  --gut: clamp(18px, 5vw, 40px);
  --r:   2px;                      /* radio: casi recto, lenguaje editorial */

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .22s;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
/* El atributo hidden debe ganar SIEMPRE: .stack/.error/.card declaran display
   y, sin esto, seguirían viéndose los bloques ocultos (gracias, errores…). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: Archivo, 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--t1);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }

/* Trazas de iluminación por detrás de la oscuridad. */
.coi-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* Trazas de luz por detrás de la oscuridad. */
    radial-gradient(1250px 860px at 50% -12%, rgba(16,72,170,.40), transparent 64%),
    radial-gradient(1000px 760px at 3% 104%,  rgba(120,42,200,.24), transparent 62%),
    radial-gradient( 860px 660px at 99% 84%,  rgba(0,120,170,.17),  transparent 60%),
    /* Rampa vertical de azul muy oscuro a casi negro: da la profundidad. */
    linear-gradient(175deg, #0b1528 0%, #081024 34%, #050a18 68%, var(--ink) 100%);
}
/* Grano finísimo: quita el banding de los degradados en pantalla grande. */
.coi-bg::after {
  content: ''; position: absolute; inset: 0; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------------- tipografía */
.display {
  font-size: clamp(27px, 6.2vw, 42px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.021em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(22px, 4.6vw, 30px);
  line-height: 1.12; font-weight: 600; letter-spacing: -.016em;
}
.lede  { font-size: 14.5px; line-height: 1.55; color: var(--t2); max-width: 46ch; }
.micro { font-size: 12px;   line-height: 1.5;  color: var(--t3); }
.num   { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--t2);
}
.eyebrow::before {
  content: ''; width: 9px; height: 9px; flex: 0 0 auto; background: var(--accent);
}
.eyebrow--plain::before { display: none; }

.rule {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: .75px solid var(--line-2);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t2);
}

/* ------------------------------------------------------------------- foco */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: var(--r);
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: #05140a; padding: 10px 16px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ----------------------------------------------------------------- botones */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #06160b;
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 54px; padding: 0 20px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), opacity var(--dur);
}
.btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn__arrow { flex: 0 0 auto; transition: transform var(--dur) var(--ease); }
.btn:hover:not(:disabled) .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--t1);
  border: .75px solid var(--line-3);
}
.btn--ghost:hover:not(:disabled) { background: var(--fill-2); filter: none; }

.btn--sm { min-height: 40px; padding: 0 14px; font-size: 13px; gap: 10px; }

/* Estado "enviando": el botón no puede pulsarse dos veces. */
.btn.is-busy { pointer-events: none; opacity: .6; }

/* ------------------------------------------------------------------ campos */
.field { display: flex; flex-direction: column; gap: 12px; }
.input {
  width: 100%; min-height: 54px; padding: 14px 16px;
  background: var(--fill); border: .75px solid var(--line-2); border-radius: var(--r);
  color: var(--t1); font-size: 16px;                   /* 16px evita el zoom en iOS */
  transition: border-color var(--dur), background var(--dur);
}
.input::placeholder { color: var(--t4); }
.input:hover { border-color: var(--line-3); }
.input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.08); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.check {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: 12.5px; line-height: 1.5; color: var(--t2);
}
.check input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; min-width: 20px; margin: 1px 0 0;
  border: .75px solid var(--line-3); border-radius: var(--r);
  background: transparent; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur), border-color var(--dur);
}
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2px solid #06160b; border-bottom: 2px solid #06160b;
  transform: translateY(-1px) rotate(-45deg);
}

/* ------------------------------------------------------------------ tarjeta */
.card {
  border: .75px solid var(--line);
  border-radius: 20px;
  background: var(--fill);
  padding: clamp(22px, 5vw, 34px);
}

/* ------------------------------------------------------- cinta del ADN */
.ribbon { display: flex; height: 13px; width: 100%; gap: 2px; }
.ribbon span {
  min-width: 2px; border-radius: 1px;
  transition: flex-grow .7s var(--ease);
}

/* ------------------------------------------------- selector de vista */
/* Control segmentado: dos vistas hermanas, no una navegación jerárquica.
   Por eso va en píldora y no en menú. */
.tabs {
  position: absolute; top: clamp(14px, 2vh, 22px); left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; gap: 3px; padding: 3px;
  background: rgba(8,12,26,.72);
  border: .75px solid var(--line-2);
  border-radius: 100px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tabs__a {
  display: block; padding: 8px clamp(12px, 1.6vw, 20px); border-radius: 100px;
  font-size: clamp(10px, 1.3vh, 12px); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--t3); text-decoration: none;
  transition: color var(--dur), background var(--dur);
}
.tabs__a:hover { color: var(--t1); }
.tabs__a[aria-current="page"] {
  background: rgba(255,255,255,.94); color: #060a14;
}

@media (max-width: 700px) {
  /* Arriba chocaría con el titular: abajo, donde hay aire. */
  .tabs { top: auto; bottom: clamp(12px, 2vh, 18px); }
  .tabs__a { padding: 7px 13px; letter-spacing: .08em; }
}

/* ---------------------------------------------------------------- logotipo */
/* El logotipo vive dentro de contenedores flex, algunos en columna, donde el
   align-items:stretch por defecto lo estiraría a lo ancho (width:auto no lo
   impide: es justo lo que lo habilita). align-self lo saca de ese reparto y
   object-fit protege de cualquier caja con proporción equivocada.
   El PNG va recortado a la marca (1222 × 150 = 8.147 : 1). El original traía
   59 px de margen transparente por lado: la altura declarada rendía sólo un
   56 % de marca visible y el logotipo se veía la mitad de grande. */
.coi-logo {
  /* Al 60 % del tamaño anterior (48 → 28,8 px). Sigue siendo un clamp por
     anchura de pantalla: a tamaño máximo son 235 px de ancho. */
  height: clamp(17px, 4.5vw, 29px);
  width: auto;
  max-width: none;   /* el `img { max-width:100% }` del reset se resuelve contra
                        un ancho indefinido dentro de un flex en columna y
                        colapsa el logotipo a 0 px de ancho */
  align-self: flex-start;
  flex: 0 0 auto;
  object-fit: contain;
}

/* ------------------------------------------------------------------ footer */
.coi-footer {
  color: #fff;
  font-size: 11.5px;
  letter-spacing: .06em;
  padding-top: 16px;
  border-top: .75px solid var(--line);
}

/* ---------------------------------------------------------------- utilidades */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.grow    { flex: 1 1 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes coi-in   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes coi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes coi-pulse{ 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
.anim-in { animation: coi-in .5s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}