@charset "UTF-8";
/* =========================================================
   GEKKORIOS — Sistema de diseño / Design tokens
   Identidad: "Sala de operaciones de ingresos".
   Paleta propia (sin depender del cliché azul-cian de IA):
     - Noche profunda (fondo) + cobre señal (acento primario,
       evoca radar / detección / alerta temprana) + violeta
       cognitivo (acento secundario, reservado para lo que
       piensa: agentes GekkoAI).
   ========================================================= */
:root{
  /* --- Superficies --- */
  --ink:            #0A0C10;   /* fondo base, negro cálido neutro */
  --ink-raised:     #12151C;   /* paneles */
  --ink-raised-2:   #191D26;   /* paneles elevados / hover */
  --hairline:       rgba(232,230,224,.09);
  --hairline-strong:rgba(232,230,224,.18);

  /* --- Texto --- */
  --paper:          #EDEBE6;   /* texto principal, blanco cálido de papel */
  --ash:            #9A9791;   /* ligeramente cálido, secundario */
  --ash-dim:        #66645F;   /* terciario / notas */

  /* --- Acentos de marca --- */
  --copper:         #E38B4C;   /* señal / CTA / alerta temprana */
  --copper-strong:  #F2A05F;
  --violet:         #8D82E8;   /* cognición / agentes GekkoAI */
  --violet-strong:  #A79BF2;
  --grad-signal:    linear-gradient(120deg, var(--copper) 0%, var(--violet) 100%);
  --grad-signal-soft: linear-gradient(120deg, rgba(227,139,76,.14), rgba(141,130,232,.14));

  /* --- Semánticos (estado de negocio, no de marca) --- */
  --state-risk:     #E8677E;   /* riesgo / churn */
  --state-warn:     #E3B54C;   /* fuga detectada */
  --state-good:     #4FC79A;   /* oportunidad / positivo */

  /* --- Tipografía --- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  /* --- Forma --- */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  /* --- Ritmo --- */
  --container: 1180px;
  --container-narrow: 760px;
  --section-pad: clamp(88px, 10vw, 148px);

  /* --- Movimiento --- */
  --ease: cubic-bezier(.16,.8,.28,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  margin: 0;
  color: var(--paper);
  font-weight: 600;
  letter-spacing: -0.01em;
}
p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }
::selection{ background: rgba(227,139,76,.32); color: #fff; }

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

:focus-visible{ outline: 2px solid var(--copper-strong); outline-offset: 3px; border-radius: 4px; }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--paper); color: var(--ink); padding: 10px 16px;
  border-radius: var(--radius-s); font-weight: 600; font-size: 14px;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 12px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}