/* ─────────────────────────────────────────────────────────────────────────────
   dyrweb.cl — sistema de diseño (un solo lugar)
   Todo el color, la tipografía, el espaciado, los radios y las sombras del sitio
   salen de acá. Si algo se ve distinto en una página, es porque usa un token
   distinto — no porque tenga un valor suelto.

   Paleta elegida (alternativa 1 de dos, la otra queda anotada en el README):
     base neutra cálida  +  verde profundo para pymes  +  azul pizarra para legal.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Neutros comunes a las dos verticales ───────────────────────────────── */
  --papel:        #fcfbf9;   /* fondo principal */
  --papel-2:      #f4f2ed;   /* fondo de sección alterna */
  --papel-3:      #ebe8e1;
  --tinta:        #141a20;   /* texto principal — 15.8:1 sobre --papel */
  --tinta-media:  #46525d;   /* texto secundario — 7.4:1 */
  --tinta-suave:  #656f7a;   /* apoyos — 4.9:1 sobre --papel, pasa AA justo */
  --linea:        #e2ded5;
  --linea-fuerte: #cdc7ba;
  --blanco:       #ffffff;

  /* Superficie de tarjetas y paneles, y color del texto que va ENCIMA del
     acento. Existen como token porque la rama de IA es de tema oscuro: ahí la
     "superficie" no es blanca y el texto sobre el neón no puede ser blanco. */
  --superficie:   #ffffff;
  --sobre-acento: #ffffff;

  /* El pie es oscuro en las tres ramas, así que no puede depender de --tinta
     (que en la rama oscura es casi blanco). */
  --pie-fondo:  #141a20;
  --pie-texto:  #b9bdc1;
  --pie-titulo: #fcfbf9;

  /* ── Acento por vertical ────────────────────────────────────────────────── */
  /* Las dos ramas tienen que distinguirse de un vistazo, así que se eligieron
     dos familias de color distintas —verde y azul— y no dos tonos vecinos.
     Todos los valores están medidos: pasan AA sobre --papel y con blanco encima. */

  /* Pymes: verde esmeralda. Tecnológico y con vida. 5.2:1 sobre --papel. */
  --pymes-acento:  #05795c;
  --pymes-claro:   #12b489;
  --pymes-tenue:   #e3f4ee;
  --pymes-papel:   #eef8f4;   /* fondo de sección dentro del vertical */
  --pymes-fuerte:  #04513e;

  /* Legal: azul rey profundo. Sobrio y sin parentesco con el verde. 9.4:1. */
  --legal-acento:  #1b418a;
  --legal-claro:   #3f6fc4;
  --legal-tenue:   #e7eefb;
  --legal-papel:   #eff3fc;
  --legal-fuerte:  #122c5e;
  --legal-bronce:  #8a6c42;   /* detalle de sello, uso muy puntual */

  /* Tonos de piel y pelo de las ilustraciones con personas. Dos de cada uno,
     para que dos figuras en la misma escena no salgan clonadas. */
  --piel-a: #e8c4a0;
  --piel-b: #c68e63;
  --pelo-a: #2f2822;
  --pelo-b: #4a3a2c;

  /* Estados */
  --exito:  #0d6e5c;
  --error:  #a3221f;
  --error-tenue: #fbeceb;
  --alerta: #8a5a08;
  --alerta-tenue: #fdf4e3;

  /* El acento "vivo": cada vertical lo redefine (ver [data-vertical]). En la
     home y en las páginas comunes es un gris pizarra deliberadamente neutro:
     la portada no puede tirar para ninguno de los dos lados. */
  --acento:        #33414f;
  --acento-claro:  #5a6c7d;
  --acento-tenue:  #eef0f2;
  --acento-fuerte: #1f2a34;

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  /* Dos familias, ambas del sistema: cero descargas, cero parpadeo al cargar y
     acentos y ñ garantizados en cualquier equipo. Serif editorial para los
     títulos (lee sobrio y confiable), sans del sistema para el texto. */
  --fuente-titulo: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --fuente-texto:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono:   ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica fluida: crece con el ancho de la ventana sin saltos. */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --t-lg:   clamp(1.35rem, 1.2rem + 0.8vw, 1.7rem);
  --t-xl:   clamp(1.7rem, 1.4rem + 1.5vw, 2.4rem);
  --t-2xl:  clamp(2.05rem, 1.6rem + 2.4vw, 3.2rem);
  --t-3xl:  clamp(2.4rem, 1.7rem + 3.4vw, 4rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-fuerte: 600;
  --peso-negro:  700;

  --alto-titulo: 1.12;
  --alto-texto:  1.65;
  --track-titulo: -0.02em;
  --track-eyebrow: 0.1em;

  /* ── Espaciado (escala de 4) ─────────────────────────────────────────────── */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 2.5rem;   --e-8: 3rem;
  --e-9: 4rem;     --e-10: 5rem;    --e-11: 6.5rem;

  --seccion-y: clamp(3.25rem, 2rem + 5vw, 6rem);
  --ancho-max: 1140px;
  --ancho-texto: 68ch;

  /* ── Radios y sombras ────────────────────────────────────────────────────── */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;  --r-full: 999px;

  --s-1: 0 1px 2px rgba(20, 26, 32, 0.05);
  --s-2: 0 2px 4px rgba(20, 26, 32, 0.05), 0 8px 20px -8px rgba(20, 26, 32, 0.09);
  --s-3: 0 4px 8px rgba(20, 26, 32, 0.05), 0 18px 40px -12px rgba(20, 26, 32, 0.14);
  --anillo: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);

  --trans: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── El acento vivo, según la vertical de la página ────────────────────────── */
/* Cada rama no solo cambia el color de los botones: también tiñe los fondos de
   sección y el filo superior de la cabecera. Así el cambio de contexto se nota
   entrando a la página, no buscando un detalle. */
/* ── RAMA IA: tema oscuro ─────────────────────────────────────────────────────
   La rama de inteligencia artificial va en negro con acentos fluorescentes. No
   es capricho: es la forma más rápida de que se note que son dos mundos
   distintos, y es el registro que la gente asocia a lo tecnológico. La rama
   legal va en azul noche (bloque siguiente) y la portada, en fondo dual.

   Este mismo bloque aplica a la tarjeta de IA de la portada (`.puerta`), así que
   en la home cada puerta se ve con el tema de su rama: se elige de un vistazo,
   sin leer.

   Todos los pares están medidos: el texto principal queda sobre 15:1 y el neón
   sobre 12:1 contra el fondo. */
[data-vertical="pymes"] {
  --papel:         #060d13;
  --papel-2:       #0a141c;
  --papel-3:       #16242f;
  --superficie:    #0d1a23;
  --tinta:         #e9f7f4;
  --tinta-media:   #a4bfc4;
  --tinta-suave:   #89a4ab;
  --linea:         #1c2f3a;
  --linea-fuerte:  #2b4553;

  --acento:        #2ff0c2;   /* verde menta fluorescente */
  --acento-claro:  #4ce3ff;   /* cian de apoyo, para degradados */
  --acento-fuerte: #7dfbdc;
  --acento-tenue:  #0e2a2c;
  --sobre-acento:  #04150f;   /* el neón es tan claro que encima va tinta oscura */

  /* En negro una sombra no se ve: se reemplaza por un halo del propio acento. */
  --s-1: 0 0 0 1px rgba(47, 240, 194, 0.08);
  --s-2: 0 0 0 1px rgba(47, 240, 194, 0.12), 0 10px 30px -14px rgba(47, 240, 194, 0.45);
  --s-3: 0 0 0 1px rgba(47, 240, 194, 0.2), 0 18px 50px -18px rgba(47, 240, 194, 0.55);

  --pie-fondo:  #04090d;
  --pie-texto:  #9fb8bc;
  --pie-titulo: #e9f7f4;

  /* El rojo de :root (#a3221f) queda en 2,6:1 sobre este negro, y un campo
     inválido se pintaba rosado claro bajo texto casi blanco (1:1). Rojo claro
     sobre rojo oscuro: 8,6:1 sobre --papel, 7,7:1 sobre --superficie, 7,1:1
     dentro del mensaje de error y 14,8:1 el texto de un campo inválido. */
  --error:       #ff8a80;
  --error-tenue: #3a1418;

  color-scheme: dark;
}

/* ── RAMA LEGAL: azul noche ───────────────────────────────────────────────────
   También va en oscuro, pero en el registro opuesto al de IA: azul profundo,
   sin neón y sin efectos. El azul marino es el color con el que la gente asocia
   confianza y oficio; el detalle en oro suave (`--legal-oro`) es el guiño
   sobrio de estudio jurídico, y se usa con cuentagotas.

   Que las dos ramas sean oscuras no las confunde: una es negra con verde
   fluorescente y la otra azul noche con azul claro y oro. Y la portada, clara. */
[data-vertical="legal"] {
  --papel:         #08132a;
  --papel-2:       #0c1b34;
  --papel-3:       #16294a;
  --superficie:    #0f2039;
  --tinta:         #e8eefb;
  --tinta-media:   #adbcd8;
  --tinta-suave:   #90a2c2;
  --linea:         #1d3055;
  --linea-fuerte:  #2c4570;

  --acento:        #7db1ff;
  --acento-claro:  #9cc4ff;
  --acento-fuerte: #b6d5ff;
  --acento-tenue:  #12294d;
  --sobre-acento:  #061021;
  --legal-oro:     #d8bd85;   /* sellos y detalles, nunca texto largo */

  --s-1: 0 0 0 1px rgba(125, 177, 255, 0.08);
  --s-2: 0 0 0 1px rgba(125, 177, 255, 0.1), 0 10px 30px -14px rgba(0, 0, 0, 0.8);
  --s-3: 0 0 0 1px rgba(125, 177, 255, 0.16), 0 18px 50px -18px rgba(0, 0, 0, 0.9);

  --pie-fondo:  #050c1a;
  --pie-texto:  #a3b4d2;
  --pie-titulo: #e8eefb;

  /* Mismo arreglo que la rama de IA: el rojo de :root queda en 2,5:1 sobre el
     azul noche. Con estos, 8,1:1 sobre --papel, 7,2:1 sobre --superficie y
     14:1 el texto de un campo inválido. */
  --error:       #ff8a80;
  --error-tenue: #3a1418;

  color-scheme: dark;
}

/* ── PORTADA Y PÁGINAS COMUNES: fondo dual ────────────────────────────────────
   La portada muestra las dos plataformas, así que su fondo va partido: una
   mitad en los tonos de IA (negro verdoso) y la otra en los de la rama legal
   (azul noche). El acento propio de la portada es un cian acerado que queda
   justo entre el verde menta y el azul: no favorece a ninguna de las dos.

   Desde el 16/08/2026 lo usan también las páginas comunes —nosotros, contacto,
   privacidad, términos— y las de error (404 y 500): son la casa de la marca,
   no de una rama. */
[data-tema="dual"] {
  --ia-fondo:    #060d13;
  --legal-fondo: #08132a;

  --papel:         #071019;   /* de respaldo, para lo que no vea el degradado */
  --papel-2:       #0b1622;
  --papel-3:       #17242f;
  --superficie:    #0e1a26;
  --tinta:         #eaf3f7;
  --tinta-media:   #aec2ce;
  --tinta-suave:   #93a8b5;
  --linea:         #1d2c3a;
  --linea-fuerte:  #2c4253;

  --acento:        #8fd0d8;
  --acento-claro:  #b3e3e6;
  --acento-fuerte: #c6ecee;
  --acento-tenue:  #10262e;
  --sobre-acento:  #04121a;

  --s-1: 0 0 0 1px rgba(143, 208, 216, 0.08);
  --s-2: 0 0 0 1px rgba(143, 208, 216, 0.1), 0 10px 30px -14px rgba(0, 0, 0, 0.8);
  --s-3: 0 0 0 1px rgba(143, 208, 216, 0.16), 0 18px 50px -18px rgba(0, 0, 0, 0.9);

  --pie-fondo:  #04090f;
  --pie-texto:  #a4b7c2;
  --pie-titulo: #eaf3f7;

  /* /contacto tiene formulario, así que el rojo también se redefine acá:
     8,4:1 sobre --papel, 7,7:1 sobre --superficie. */
  --error:       #ff8a80;
  --error-tenue: #3a1418;

  color-scheme: dark;
}

/* El tema no depende de la preferencia del sistema: lo decide la página (rama
   de IA, rama legal, portada dual o página común clara). Se le avisa al
   navegador para que no invente colores en los controles del formulario. */
:root { color-scheme: light; }