/* T.T AI Firm · base: tokens, reset, tipografía, atmósfera */

:root {
  /* superficies */
  --lienzo: #05060f;
  --placa: #2f343e;
  --vidrio: rgba(186, 214, 247, .03);
  --vidrio-2: rgba(186, 214, 247, .06);
  --vidrio-3: rgba(199, 211, 234, .12);
  --profundo: rgba(5, 6, 15, .97);

  /* texto */
  --titulo: #d8ecf8;
  --texto: #d1e4fa;
  --apagado: #c7d3ea;
  --tenue: #9da7ba;
  --blanco: #ffffff;

  /* acento único */
  --violeta: #663af3;
  --violeta-claro: #8b6bff;
  --azul: #b6d9fc;

  /* bordes y sombras */
  --filo: rgba(186, 215, 247, .12);
  --filo-fuerte: rgba(186, 215, 247, .24);
  --halo-tarjeta: inset 0 1px 1px rgba(199, 211, 234, .12), inset 0 24px 48px rgba(199, 211, 234, .05), 0 24px 32px rgba(6, 6, 14, .7);
  --halo-flotante: inset 0 1px 1px rgba(216, 236, 248, .2), inset 0 24px 48px rgba(168, 216, 245, .06), 0 16px 32px rgba(0, 0, 0, .3);
  --halo-luz: 0 0 6px rgba(186, 207, 247, .32), 0 0 12px rgba(238, 186, 247, .24);

  /* degradado del despliegue */
  --cielo: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);

  /* tipografía */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ritmo */
  --ancho: 1200px;
  --hueco-seccion: clamp(48px, 5.4vw, 64px);
  --pad-tarjeta: 24px;
  --hueco: 16px;

  /* radios */
  --r-tarjeta: 16px;
  --r-insignia: 6px;
  --r-pastilla: 999px;
  --r-circulo: 9999px;

  --curva: cubic-bezier(.16, 1, .3, 1);
  --curva-suave: cubic-bezier(.25, 1, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
html.trabado { overflow: hidden; height: 100%; }

body {
  min-height: 100vh;
  background: var(--lienzo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, canvas, video { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(102, 58, 243, .45); color: #fff; }

/* ── atmósfera: cuadrícula de plano y foco cenital ── */
.atmosfera { position: fixed; inset: 0; z-index: -3; pointer-events: none; }

.atmosfera .cuadricula {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(186, 215, 247, .06) 1px, transparent 1px) 0 0 / 100% 88px,
    linear-gradient(90deg, rgba(186, 215, 247, .06) 1px, transparent 1px) 0 0 / 88px 100%;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 25%, #000 25%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 25%, #000 25%, transparent 95%);
}

.atmosfera .foco {
  position: absolute; left: 50%; top: -12%;
  width: min(140vw, 1800px); aspect-ratio: 1;
  transform: translateX(-50%);
  background: conic-gradient(at 50% 0%, transparent 44%, rgba(124, 145, 182, .22) 49%, rgba(124, 145, 182, .42) 50%, rgba(124, 145, 182, .22) 51%, transparent 56%);
  mask-image: radial-gradient(ellipse 60% 45% at 50% 10%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 10%, #000 0%, transparent 70%);
  opacity: .85;
}

/* ── tipografía de la página ── */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.despliegue {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 1.04;
  letter-spacing: -.03em;
  background: var(--cielo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2.titular {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--titulo);
  text-wrap: balance;
}

h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.01em; color: var(--titulo); }

.parrafo { color: var(--apagado); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; max-width: 44ch; }
.parrafo b { color: var(--texto); font-weight: 500; }
.ayuda { color: var(--tenue); font-size: 14px; line-height: 1.5; }

/* ── envoltura ── */
.envoltura { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
@media (min-width: 640px) { .envoltura { width: min(100% - 80px, var(--ancho)); } }

section.bloque { position: relative; padding-block: var(--hueco-seccion); }

/* ── apariciones ── */
.ap { opacity: 0; transform: translateY(24px); transition: opacity .7s ease var(--dl, 0ms), transform .9s var(--curva) var(--dl, 0ms); will-change: transform, opacity; }
.ap.dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ap { transition-duration: 1ms !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}