/* =====================================================================
   tokens.css — el único archivo del sitio con valores literales. Todo
   lo demás consume estos custom properties; si falta un valor, se
   agrega un token acá, no se lo escribe donde se lo necesita.

   No incluye --fuente-titulos ni --fuente-texto: esas dos, junto a los
   @font-face de Montserrat, viven en tipografia.css, para que cambiar
   la tipografía de marca sea editar un solo archivo chico.
   ===================================================================== */

:root {
  /* Superficies: el ritmo del sitio es oscuro/blanco/gris/acento.
     Inversa y acento ya están confirmadas contra el navy del mockup
     aprobado (#00305b): el navy que había acá (#1b3a6b) era un tono
     propio, más claro y más gris, que no correspondía a ninguna
     referencia — ver el veredicto de color-y-marca. */
  --color-superficie: #ffffff;
  /* Bajada de saturación: #f4f7fa se leía celeste, no gris, sobre todo
     en bloques grandes (el placeholder del mapa de contacto). */
  --color-superficie-alterna: #f8fafc;
  /* Único navy oscuro del sitio (antes había cuatro tonos distintos
     entre superficie inversa, su "suave" y los dos acentos, separados
     por saltos de apenas 1,2-1,3:1 que se leían como una costura mal
     impresa entre secciones). Mismo tono que --color-acento-fuerte:
     de acá para abajo el sistema tiene dos navies, no cuatro. */
  --color-superficie-inversa: #03223c;
  /* Ya no es una superficie independiente: queda solo como el extremo
     claro del degradado de la lateral del panel (admin.css) y de
     --imagen-hero, más abajo. Un paso más claro que la inversa para
     que el degradado se note sin introducir un tercer navy visible. */
  --color-superficie-inversa-suave: #123c66;

  /* Acento: --color-acento-fuerte es un paso más oscuro a propósito
     —el botón primario se hunde hacia el institucional en vez de
     aclararse en :hover—, pero ya no es idéntico a la superficie
     inversa: eso era lo que sumaba un tercer navy al sistema. */
  --color-acento: #00305b;
  --color-acento-fuerte: #002c54;
  --color-acento-tenue: #e6ecf5;

  /* Enlaces: más luminosos que el acento porque el acento es superficie
     y el enlace es acción. El visitado se iguala al acento a propósito:
     en un sitio institucional de cuatro páginas el estado visitado no
     aporta información, y así queda atado al mismo navy si el día de
     mañana se retoca --color-acento. */
  --color-enlace: #1d4ed8;
  --color-enlace-visitado: var(--color-acento);
  /* Enlace "local": el valor real de un enlace depende de la superficie
     en la que cae. Las hojas que consumen esto (sitio.css, admin.css)
     redefinen --color-enlace-local dentro de cada superficie oscura
     (franjas inversas, hero, pie, tarjeta de acceso, lateral del panel)
     y dejan la regla global `a { color: var(--color-enlace-local) }`
     sin tocar. Antes solo `.franja--inversa a` redefinía el color, así
     que cualquier enlace en otra superficie oscura (la tarjeta navy de
     contacto, la marca del panel) caía al azul de enlace sobre navy. */
  --color-enlace-local: var(--color-enlace);

  /* Texto: nunca negro puro sobre blanco. Tres niveles claros graduados
     por contraste real. Tenue mide 5,3:1 sobre blanco y 4,9:1 sobre la
     superficie alterna — el valor anterior (#6b7a8b) no llegaba a AA
     en texto chico sobre la alterna, y ahí es donde vive (eyebrows,
     etiquetas de datos de contacto, badges del panel).

     Suave ya medía 7,08:1 sobre blanco (6,77:1 sobre la alterna), así que
     nunca fue un problema de AA: el problema era de PESO. A --texto-sm el
     cuerpo de las tarjetas de servicio se leía lavado -un gris que ya pasa
     el mínimo legal pero no sostiene un párrafo entero-. Se lo oscurece a
     #3a4655 (9,60:1 sobre blanco, 9,18:1 sobre la alterna): más cuerpo sin
     llegar al negro de --color-texto, y sigue siendo un escalón por debajo
     de tenue en la jerarquía. Es un token compartido por todo el sitio
     (tarjetas, prosa, formularios): corregirlo acá alcanza para todos los
     lugares que lo usan, no hace falta tocarlos uno por uno. */
  --color-texto: #14202e;
  --color-texto-suave: #3a4655;
  --color-texto-tenue: #5c6b7d;
  --color-texto-inverso: #ffffff;
  --color-texto-inverso-suave: #c3d0e0;

  /* Filetes: la estructura del sitio se lee por bordes de 1px, no por
     sombra. Es el color que sostiene la grilla de servicios. */
  --color-borde: #dce3ec;
  --color-borde-fuerte: #b9c6d6;
  --color-borde-inverso: #2a4874;

  /* Foco: dos anillos porque medio sitio es fondo oscuro (hero, "¿Por
     qué elegirnos?", pie); sin el segundo el foco desaparece justo
     donde están el CTA principal y la navegación secundaria. */
  --color-foco: #1d4ed8;
  --color-foco-inverso: #9dc1ff;

  /* Canal RGB crudo del navy: las sombras del sitio son azules, no
     grises neutras. Se compone con rgb(var(--color-sombra) / alfa).
     Recalculado junto con --color-superficie-inversa para que la
     sombra siga siendo el mismo navy y no un tono que quedó atrás. */
  --color-sombra: 3 34 60;

  /* Escala tipográfica fluida entre 320px y 1920px, para no depender de
     saltos por media query en cada tamaño de texto. El contraste de
     tracking entre título (negativo) y eyebrow (abierto) reemplaza a
     la segunda familia tipográfica que no tenemos. */
  --texto-xs: 0.75rem;
  /* Un escalón por debajo de --texto-xs: eyebrows y la bajada del
     logotipo (.marca__linea / .admin__marca-sub), donde --texto-xs
     todavía se leía como cuerpo de texto y no como rótulo. */
  --texto-2xs: 0.625rem;
  --texto-sm: 0.875rem;
  --texto-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --texto-md: 1.125rem;
  --texto-lg: clamp(1.125rem, 1.04rem + 0.36vw, 1.375rem);
  /* Antes clamp(1.0625rem, ..., 1.1875rem): a 320px valía menos que
     --texto-md y a cualquier ancho quedaba por debajo de --texto-lg,
     así que el h3 no se despegaba del cuerpo que rotula (el título de
     tarjeta de servicio se distinguía del párrafo solo por el peso).
     Regla de oro del archivo: ningún --titulo-* vale menos que el
     mayor --texto-* en ningún ancho. Este nuevo rango (20→24px) queda
     siempre por encima de --texto-lg (18→22px). */
  --titulo-sm: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --titulo-md: clamp(1.5rem, 1.24rem + 1.05vw, 2.125rem);
  --titulo-lg: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --titulo-hero: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);

  --peso-normal: 400;
  --peso-medio: 600;
  --peso-fuerte: 700;
  /* Antes 800: no existe ningún @font-face de Montserrat en ese peso
     (tipografia.css solo sirve 400/600/700), así que todo lo que pedía
     --peso-titular caía al 700 más cercano igual, pero seguía pidiendo
     un peso inexistente. Ahora el valor nominal coincide con el real:
     400 texto / 600 títulos chicos y UI / 700 h1-h2. */
  --peso-titular: 700;
  --tracking-titulo: -0.02em;
  /* Tracking negativo solo para títulos grandes (h1/h2). A 19px y
     menos (h3, .fila-servicio__titulo) el mismo -0.02em cerraba las
     contraformas de forma visible: se usa este cero en su lugar. */
  --tracking-titulo-corto: 0;
  /* Antes 0.14em: sobre "NUESTROS SERVICIOS" a 1440px eso son ~28,6px
     repartidos en puro espacio entre letras, el 17% del ancho del
     eyebrow. 0.10em sigue leyéndose como versalita abierta sin ese
     desperdicio. */
  --tracking-eyebrow: 0.10em;
  /* Tracking de marca: uppercase + un poquito de aire para "AMADO" en
     .marca__nombre / .admin__marca-nombre, mucho menos abierto que el
     eyebrow porque es un wordmark, no un rótulo. */
  --tracking-marca: 0.02em;
  /* Antes un solo --interlinea-titulo: 1.12 para h1, h2 y h3 por igual.
     1.12 queda por debajo de la caja em real de Montserrat (0,968 +
     0,251 = 1,219em), así que a 19px el descendente de una línea tocaba
     las astas de la siguiente (3px de separación medidos en "Informes y
     Rendición / de Cuentas"). Se parte en tres para que cada escalón
     de la escala tenga aire real:
     - hero: el h1 grande, que puede ir más apretado porque su tamaño
       ya separa las líneas en píxeles absolutos, y .celda-servicio__numero.
     - titulo: h2, el término medio.
     - titulo-corta: h3 y todo lo que corre en --titulo-sm, donde el
       texto es chico y necesita más interlínea relativa para no comerse
       los descendentes/ascendentes contra la línea vecina. */
  --interlinea-titulo-hero: 1.06;
  --interlinea-titulo: 1.18;
  --interlinea-titulo-corta: 1.3;
  --interlinea-texto: 1.65;

  /* Espaciado, base 4px. Dos ritmos verticales a propósito:
     --espacio-seccion respira, --espacio-seccion-densa comprime las
     franjas oscuras para que actúen como cesura. */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 2.5rem;
  --espacio-8: 3rem;
  --espacio-10: 4rem;
  --espacio-seccion: clamp(3.5rem, 2.4rem + 4.2vw, 6.5rem);
  --espacio-seccion-densa: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);

  /* Medidas. --ancho-texto en "ch" para que la línea de lectura quede
     corta sin importar el tamaño de fuente que termine sirviéndose. */
  --ancho-contenido: 1200px;
  --ancho-estrecho: 780px;
  --ancho-texto: 68ch;
  --canaleta: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* Ancho fijo de la lateral del panel de administración (admin.css). No es
     fluido como el resto de las medidas de arriba porque es un riel de
     navegación -se lee de un vistazo, no de una línea de texto- y no una
     columna de lectura. El fondo del panel y los tintes tenues de los
     íconos de sus tarjetas NO suman token nuevo: ya existen
     (--color-superficie-alterna y --color-acento-tenue respectivamente)
     y admin.css los reusa tal cual, ver el comentario al tope de ese
     archivo. */
  --ancho-panel-lateral: 280px;

  /* Radios: cada valor significa algo. Sutil es institucional (tarjetas
     y campos); pill queda reservado a un único botón y a los badges. */
  --radio-nulo: 0;
  --radio-sutil: 3px;
  --radio-boton: 4px;
  --radio-pill: 999px;

  /* Sombras: solo dos, y ninguna en reposo — son señal de interacción
     (hover / focus-within), no decoración de base. */
  --sombra-hover: 0 8px 24px -10px rgb(var(--color-sombra) / 0.3);
  --sombra-flotante: 0 2px 4px -2px rgb(var(--color-sombra) / 0.16);

  /* Movimiento: duraciones cortas, una sola curva de salida — el sitio
     es institucional, no juguetón. Ver el bloque de
     prefers-reduced-motion, que las reduce sin tocar quien las usa. */
  --duracion-rapida: 120ms;
  --duracion-normal: 220ms;
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fotografía institucional: el día que el cliente entregue las fotos reales se
     sustituye este único valor por un url(...) y no se toca nada más.

     El valor es el patrón, y no `none` con el patrón como respaldo del `var()`:
     el respaldo de `var()` se usa cuando la variable NO EXISTE, no cuando vale
     algo vacío. Declarada en `none`, la figura del bloque de Quiénes Somos
     quedaba sin fondo —media pantalla en blanco a 1024 y más— mientras el
     respaldo escrito al lado no se aplicaba nunca.

     Antes era un repeating-linear-gradient a rayas de 2px: de cerca se lee
     como una textura de tela o un error de renderizado ("lo sucio" que
     señaló el cliente), no como un placeholder institucional. Un degradado
     liso entre los dos navies cubre el mismo rol —ocupar el rectángulo
     hasta que haya foto real— sin ese ruido visual. El aspect-ratio y el
     layout que consumen este token no se mueven.

     El degradado liso a secas seguía sin alcanzar: en un rectángulo grande
     dos navies tan cercanos casi no se distinguen, así que se leía como un
     bloque de color plano —la misma sospecha de "imagen rota" que las
     rayas, solo que lisa en vez de sucia—. Se le suma un resplandor radial
     desde la esquina superior izquierda, en el azul de marca
     (--color-acento, no un color nuevo), que le da profundidad real a la
     superficie: dos capas, no una, para que se lea como una decisión de
     diseño y no como un fondo sin cargar. */
  --imagen-hero:
    radial-gradient(
      120% 120% at 15% 10%,
      color-mix(in srgb, var(--color-acento) 55%, transparent),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      var(--color-superficie-inversa),
      var(--color-superficie-inversa-suave)
    );
}

/* El arnés de capturas del CI activa prefers-reduced-motion para que la
   corrida sea determinista. Alcanza con redefinir acá los tokens de
   duración porque todo el sitio anima solo a través de ellos. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-rapida: 1ms;
    --duracion-normal: 1ms;
  }
}