/* ============================================================
   GUIZMO Torre Urbana — Tokens de marca
   Fuente: deck de línea gráfica, Creorama 2026.
   El rojo #C85544 del deck es un error de captura; el valor real
   muestreado del logotipo es #F1543A.
   ============================================================ */

@font-face {
  font-family: "Noirden";
  src: url("../assets/fonts/Noirden-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Noirden";
  src: url("../assets/fonts/Noirden-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../assets/fonts/RobotoMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Paleta de marca */
  --negro: #070508;
  --beige: #d6d1c7;
  --rojo: #f1543a;
  --sobre-rojo: #070508;   /* blanco sobre este rojo = 3.46:1; negro = 5.87:1 */
  --teal: #427c76;          /* marca: rellenos y chips sobre fondo oscuro */
  --teal-fondo: #2c5651;    /* superficie: el blanco sobre #427c76 solo da 4.80:1 */
  --teal-txt: #4a8a83;      /* texto chico sobre negro: #427c76 solo da 4.23:1 */
  --azul: #82a3c2;

  /* Derivados para superficies y jerarquía de texto */
  --negro-suave: #12100f;
  --negro-borde: #241f1d;
  --beige-tenue: rgba(214, 209, 199, 0.66);
  --beige-debil: rgba(214, 209, 199, 0.46);

  /* Acento: lo reescribe el switch de perfil */
  --acento: var(--teal);
  --acento-contraste: #ffffff;

  /* ---- Tokens por superficie ----
     Cada sección de color redefine este bloque. Los componentes NUNCA
     referencian --beige o --negro-suave directamente: usan estos tokens,
     y así funcionan igual sobre negro, teal, azul o beige. */
  --txt: var(--beige);                        /* texto principal */
  --txt-2: rgba(214, 209, 199, 0.66);         /* texto secundario  6.07:1 */
  --txt-3: rgba(214, 209, 199, 0.60);         /* etiquetas y datos 5.03:1 */
  --panel: var(--negro-suave);                /* fondo de tarjeta */
  --borde: var(--negro-borde);                /* bordes y separadores */
  --acento-local: var(--acento);              /* rellenos y texto grande */
  --acento-local-txt: var(--acento-contraste);
  --acento-txt: var(--teal-txt);              /* variante legible para texto chico */

  /* Tipografía */
  --font-display: "Noirden", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala fluida — de móvil 360px a escritorio 1440px */
  --paso--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.76rem);
  --paso--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.95rem);
  --paso-0:  clamp(1rem, 0.93rem + 0.31vw, 1.19rem);
  --paso-1:  clamp(1.2rem, 1.09rem + 0.5vw, 1.48rem);
  --paso-2:  clamp(1.44rem, 1.27rem + 0.76vw, 1.86rem);
  --paso-3:  clamp(1.73rem, 1.48rem + 1.13vw, 2.32rem);
  --paso-4:  clamp(2.07rem, 1.71rem + 1.64vw, 2.9rem);
  --paso-5:  clamp(2.49rem, 1.97rem + 2.33vw, 3.62rem);
  --paso-6:  clamp(2.99rem, 2.26rem + 3.28vw, 4.53rem);

  /* Espaciado */
  --espacio-3xs: 0.25rem;
  --espacio-2xs: 0.5rem;
  --espacio-xs:  0.75rem;
  --espacio-s:   1rem;
  --espacio-m:   1.5rem;
  --espacio-l:   2.5rem;
  --espacio-xl:  4rem;
  --espacio-2xl: 6rem;
  --espacio-3xl: 9rem;

  /* Layout */
  --ancho-contenido: 68rem;
  --ancho-ancho: 82rem;
  --radio: 14px;
  --radio-grande: 28px;
  /* La "G" del logotipo es un círculo con una esquina cuadrada. Ese contraste
     entre redondeado y recto es la firma de forma de la marca: toda superficie
     lleva tres esquinas suaves y una a escuadra. */
  --radio-g: var(--radio-grande) var(--radio-grande) var(--radio-grande) 2px;
  --radio-g-chico: var(--radio) var(--radio) var(--radio) 2px;

  /* Movimiento */
  --transicion: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Entra rápido y se asienta: la curva que da la sensación de "flow". */
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* El switch de perfil reescribe el acento en la raíz. */
:root[data-perfil="inversionista"] { --acento: var(--teal); --acento-txt: var(--teal-txt); }
:root[data-perfil="familia"]       { --acento: var(--azul); --acento-contraste: #070508; --acento-txt: var(--azul); }

@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 1ms; }
  html { scroll-behavior: auto; }
}