/* ─────────────────────────────────────────────────────────────────
   Teramot Home V2 — design tokens
   Extraídos de teramot-landing @ 12a1ec0 (la home anterior a Landing v14,
   en producción 2026-08-25 → 2026-10-05). Fuentes: sites/landing/home.css,
   hero-nav.css y landing.css. Valores literales, sin reinterpretar.
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/GoogleSansFlex-VariableFont.ttf") format("truetype-variations");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Marca ─────────────────────────────────────────────────── */
  --tm-blue-deep:   #253DE5;  /* acento principal: links, eyebrows, CTA final */
  --tm-blue-hero:   #2F43D6;  /* inicio del gradiente, sección Diferenciales */
  --tm-blue-night:  #263185;  /* fin del gradiente, footer */
  --tm-blue-hover:  #1D2FB0;  /* hover de links */
  --tm-blue-soft:   #5A6DF3;  /* loader / ilustraciones */
  --tm-mint:        #91DFC8;  /* acento sobre fondo azul */
  --tm-mint-ink:    #0F6E58;  /* texto mint sobre fondo claro */
  --tm-mint-check:  #7BC1AD;  /* checks / bullets */
  --tm-ink:         #0B0F14;
  --tm-paper:       #FAFAF7;

  /* ── Gradientes ────────────────────────────────────────────── */
  --tm-hero-gradient: linear-gradient(281deg, #2F43D6 4.97%, #263185 97.32%);
  --tm-loader-gradient: radial-gradient(120% 130% at 50% 18%, #16276E 0%, #0F1B4C 48%, #0A1234 100%);
  --tm-mockup-frame: linear-gradient(150deg, #E4E9FB 0%, #F0F2FC 46%, #EAF3F0 100%);

  /* ── Superficies de sección ────────────────────────────────── */
  --tm-surface:          #FFFFFF;
  --tm-surface-lavender: #EFF1FE;  /* Casos de uso, Prensa */
  --tm-surface-cool:     #F7F9FC;  /* Consultoría, paneles, support card */
  --tm-surface-muted:    #F3F4F6;
  --tm-surface-illo:     #EEF1FB;

  /* ── Texto ─────────────────────────────────────────────────── */
  --tm-heading:  #1C2536;
  --tm-body:     #4B5563;
  --tm-body-2:   #334155;   /* respuestas FAQ */
  --tm-muted:    #6B7280;
  --tm-faint:    #9CA3AF;
  --tm-on-dark:        #FFFFFF;
  --tm-on-dark-body:   rgba(255,255,255,.82);
  --tm-on-dark-muted:  rgba(255,255,255,.72);

  /* ── Líneas ────────────────────────────────────────────────── */
  --tm-rule:       #E5E7EB;
  --tm-rule-cool:  #E6EAF0;
  --tm-rule-hover: #D1D5DB;

  /* ── Tintes del acento ─────────────────────────────────────── */
  --tm-blue-tint-07: rgba(37,61,229,.07);   /* fondo chip / icono */
  --tm-blue-tint-16: rgba(37,61,229,.16);   /* borde chip */
  --tm-mint-tint-12: rgba(145,223,200,.12);
  --tm-mint-tint-24: rgba(145,223,200,.24);

  /* ── Semánticos (solo comparativo Antes/Después) ───────────── */
  --tm-red:        #BE3A31;  --tm-red-bg:   #FFF6F5;  --tm-red-border:   #F7D9D5;
  --tm-red-chip:   #FBE1DD;  --tm-red-icon: #C9453C;  --tm-red-text:     #6B4742;
  --tm-green:      #0B7C62;  --tm-green-bg: #F1FAF6;  --tm-green-border: #CBE9DB;
  --tm-green-chip: #D5EFE3;  --tm-green-icon: #128A63; --tm-green-text:  #3A574D;

  /* ── Nota crema (MCP) ──────────────────────────────────────── */
  --tm-cream:        #FFF8EE;
  --tm-cream-border: #F5E4CB;
  --tm-cream-text:   #3B3730;

  /* ── Tipografía ────────────────────────────────────────────── */
  --tm-font: "Google Sans Flex", Manrope, Inter, system-ui, sans-serif;

  --tm-h1-size:   clamp(34px, 3.6vw, 48px);  /* peso 600 */
  --tm-h2-size:   clamp(24px, 2.6vw, 34px);  /* peso 400 */
  --tm-cta-size:  clamp(28px, 3.1vw, 40px);  /* peso 400, ls -.04em */
  --tm-statement: clamp(26px, 2.6vw, 34px);  /* peso 400, lh 1.18 */
  --tm-h3-size:   clamp(20px, 2vw, 24px);
  --tm-lede:      17px;
  --tm-body-size: 14.5px;
  --tm-eyebrow:   11px;    /* 600, .14em, uppercase */
  --tm-chip:      9.5px;   /* 600, .10em, uppercase */

  --tm-tracking-tight: -.035em;
  --tm-lh-heading: 1.12;
  --tm-lh-body: 1.6;

  /* ── Forma ─────────────────────────────────────────────────── */
  --tm-radius-icon:  8px;
  --tm-radius-card-dark: 12px;
  --tm-radius-panel: 14px;
  --tm-radius-card:  16px;
  --tm-radius-lg:    22px;
  --tm-radius-frame: 26px;
  --tm-radius-pill:  9999px;
  --tm-hero-corners: 0 0 75px 44px;  /* esquinas inferiores asimétricas */

  /* ── Sombras (tinte azul-noche 11,27,43) ───────────────────── */
  --tm-shadow-card:       0 1px 2px 0 rgba(11,27,43,.04), 0 8px 24px 0 rgba(11,27,43,.06);
  --tm-shadow-card-hover: 0 2px 4px 0 rgba(11,27,43,.06), 0 12px 32px 0 rgba(11,27,43,.09);
  --tm-shadow-lift:       0 12px 32px rgba(11,27,43,.12);
  --tm-shadow-btn-white:  0 10px 26px rgba(11,27,43,.18);
  --tm-shadow-mockup:     0 18px 44px rgba(37,61,229,.12), 0 2px 6px rgba(11,15,20,.04);

  /* ── Layout ────────────────────────────────────────────────── */
  --tm-container: 1180px;
  --tm-gutter: 24px;
  --tm-section-y: 96px;         /* 72px en < 1024px */
  --tm-section-head-w: 760px;
  --tm-section-head-gap: 56px;

  /* ── Movimiento ────────────────────────────────────────────── */
  --tm-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* botones, hover */
  --tm-ease-enter:  cubic-bezier(0.2, 0, 0, 1);      /* entradas del hero, reveal */
  --tm-ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);  /* cards, FAQ */
  --tm-dur-btn:     240ms;
  --tm-dur-card:    250ms;
  --tm-dur-reveal:  640ms;
}