/**
 * Tokens de All Técnica.
 * Salen de la pieza de referencia (documentos/referencias/estetica-referencia.jpg).
 * Ningún componente declara un hex propio: usa estas variables.
 * Montserrat es OFL y está autoalojada, subconjunto latino.
 */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/montserrat-500.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/montserrat-600.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/montserrat-800.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/montserrat-800-italic.woff2") format("woff2");
}

/**
 * Arial con las métricas de Montserrat, para que el texto no salte al llegar el woff2.
 * Medido el 29 de septiembre de 2026 con el canvas del navegador, muestra «Agypq ALLTECNICA».
 */
@font-face {
  font-family: "Montserrat Ajuste";
  font-style: normal;
  font-weight: 500 600;
  src: local("Arial");
  size-adjust: 108.3%;
  ascent-override: 89.3%;
  descent-override: 23.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Ajuste";
  font-style: normal;
  font-weight: 700 800;
  src: local("Arial");
  size-adjust: 96.3%;
  ascent-override: 100.4%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Ajuste";
  font-style: italic;
  font-weight: 800;
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90%;
  descent-override: 23.3%;
  line-gap-override: 0%;
}

:root {
  /* Fondos medidos en la pieza: noche #01122C, borde iluminado #02306C. */
  --at-color-bg: #011433;
  --at-color-bg-elevated: #021e4a;
  --at-color-bg-deep: #000e24;
  --at-color-bg-pill: #012044;
  --at-color-text: #f4f8ff;
  --at-color-text-soft: #c5d4e8;
  --at-color-text-muted: #8aa4c0;

  /* Cian del wordmark (#00D0FF) y del arco (#4DE3FC / #0B74E9). */
  --at-color-cyan: #00d0ff;
  --at-color-cyan-bright: #4de3fc;
  --at-color-blue: #0b74e9;
  --at-color-blue-deep: #0553b8;

  /* El verde existe solo en la marca de WhatsApp, no como color de interfaz. */
  --at-color-whatsapp: #25d366;
  --at-color-line: rgba(244, 248, 255, 0.16);
  --at-color-line-strong: rgba(244, 248, 255, 0.4);

  /* Superficie clara: los logos de marca están pensados para fondo blanco. */
  --at-color-surface-light: #f4f8ff;
  --at-color-text-on-light: #011433;
  --at-color-text-on-light-soft: #3c516c;
  --at-color-white: #ffffff;

  --at-grad-wordmark: linear-gradient(90deg, #ffffff 0%, #e7f6ff 42%, #00d0ff 100%);
  --at-grad-ring: linear-gradient(160deg, #4de3fc 0%, #00d0ff 42%, #0b74e9 100%);
  --at-grad-bg:
    radial-gradient(90rem 40rem at 85% -8%, rgba(11, 116, 233, 0.42), transparent 58%),
    radial-gradient(50rem 32rem at -10% 110%, rgba(2, 48, 108, 0.85), transparent 55%),
    linear-gradient(180deg, #02306c 0%, #011433 32%, #01122c 100%);

  --at-font: "Montserrat", "Montserrat Ajuste", "Segoe UI", sans-serif;
  --at-weight-text: 500;
  --at-weight-label: 600;
  --at-weight-strong: 700;
  --at-weight-display: 800;

  --at-text-xs: 0.75rem;
  --at-text-sm: 0.875rem;
  --at-text-md: 1rem;
  --at-text-lg: clamp(1.125rem, 2vw, 1.35rem);
  --at-text-xl: clamp(1.45rem, 3vw, 2rem);
  --at-text-display: clamp(2.6rem, 8vw, 4.75rem);
  --at-text-phone: clamp(1.55rem, 4vw, 2.35rem);
  --at-leading-tight: 1.05;
  --at-leading-body: 1.55;
  --at-tracking-tag: 0.22em;
  --at-tracking-label: 0.06em;

  --at-space-1: 0.25rem;
  --at-space-2: 0.5rem;
  --at-space-3: 0.75rem;
  --at-space-4: 1rem;
  --at-space-5: 1.5rem;
  --at-space-6: 2rem;
  --at-space-7: 3rem;
  --at-space-8: 4rem;
  --at-space-9: 6rem;

  --at-radius-pill: 999px;
  --at-radius-card: 1.25rem;
  --at-radius-field: 0.75rem;
  --at-radius-dash: 2px;

  --at-medalla: 3.5rem;
  --at-content: 72rem;
  --at-poster: 26rem;

  --at-glow:
    0 0 0 1px rgba(0, 208, 255, 0.35),
    0 0 22px rgba(0, 208, 255, 0.38);
  --at-glow-strong:
    0 0 0 1px rgba(77, 227, 252, 0.7),
    0 0 32px rgba(0, 208, 255, 0.55);
  --at-duration: 180ms;
  --at-ease: ease;

  --at-focus: 2px solid var(--at-color-white);
  --at-focus-offset: 3px;
}