/* ============================================================================
   Sistema Soshally — tokens
   ----------------------------------------------------------------------------
   Cada valor aquí tiene una entrada trazable en mediciones.md. No se añade
   ningún token que no aparezca en la fuente real. Los valores se agrupan
   por función (color · tipografía · escala · layout · radios · motion), y las
   variaciones desktop→mobile viven en el mismo bloque bajo `@media`.

   Reglas del sistema (ver definicion.md):
   - Peso comunica rol: 500 = editorial suave · 600 = estructura · 700 = impacto
     · 900 = aparato (services2 uppercase).
   - Una sola fuente cross-familia: Playfair Display 600 italic. Sólo dos
     apariciones: <em> del hero h1 y .sfull-title del overlay sectores.
   - Coral #e63946 del menú permanece HARDCODED en .menu — no promocionar a
     variable ni reusar en otros sitios.
   - Radios se declaran por-elemento (no colapsados a --radius-lg/md).
   - Padding lateral mantiene la escala 56/64/72 (no colapsado).
   - Sin dividers por defecto — --line sólo en cform inputs, .lnav y footer legal.
   ============================================================================ */

:root {
  /* ---------- COLOR ---------- */
  --bg:   #ffffff;          /* fondo por defecto */
  --ink:  #0e0e0e;          /* texto y titulares */
  --mut:  #6c6c6c;          /* muteado (kickers, sub, copyright, legal body) */
  --soft: #3a3a3a;          /* intermedio (.sintro estudio, .lintro legal) */
  --line: #e9e9e9;          /* hairline: inputs, lnav, footer legal, .email */
  --red:  #eb0000;          /* acento único (punto del logo, topdot) */
  /* Coral #e63946 del overlay del menú NO va aquí — hardcoded en .menu por diseño */
  --divider-services2: rgba(0, 0, 0, .22); /* border-top de services2-row (único uso) */

  /* ---------- TIPOGRAFÍA — familias ---------- */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display-italic: "Playfair Display", Georgia, serif;

  /* ---------- TIPOGRAFÍA — escala display (desktop, se sobreescribe en mobile) ---------- */
  /* Rol: impacto (weight 700) */
  --fs-hero-h1:        103.68px;   /* .hero h1 */
  --lh-hero-h1:        103.68px;
  --ls-hero-h1:        -3.6288px;

  --fs-contact-h2:     90px;       /* .closing h2 */
  --lh-contact-h2:     90px;
  --ls-contact-h2:     -3.15px;

  --fs-legal-h1:       84px;       /* legal h1 */
  --lh-legal-h1:       84px;
  --ls-legal-h1:       -2.94px;

  --fs-wordmark:       374.4px;    /* .footwm y .hbig */
  --lh-wordmark:       280.8px;
  --ls-wordmark:       -20.592px;

  --fs-menu-link:      122.4px;    /* .menu nav a .mtxt */

  /* Rol: editorial suave (weight 500) */
  --fs-trabajos-h2:    74px;       /* .winner h2 */
  --lh-trabajos-h2:    76.96px;
  --ls-trabajos-h2:    -1.85px;

  --fs-estudio-h2:     60px;       /* .studio h2 */

  /* Rol: aparato (weight 900 + uppercase) */
  --fs-services2:      72px;       /* .services2-row-title */
  --lh-services2:      72px;
  --ls-services2:      -1.08px;

  /* Rol: signature italic (Playfair 600) */
  --fs-sfull-title:    51.84px;    /* .sfull-title (sectores overlay) */
  --lh-sfull-title:    54.432px;
  --ls-sfull-title:    -0.5184px;

  /* Rol: estructura (weight 600) */
  --fs-pcard-h:        52px;       /* .pcard h3 */
  --lh-pcard-h:        52px;
  --ls-pcard-h:        -1.3px;

  --fs-legal-h2:       42px;       /* legal h2 */
  --lh-legal-h2:       46.2px;
  --ls-legal-h2:       -1.05px;

  --fs-legal-h3:       18px;       /* legal h3 */
  --ls-legal-h3:       -0.18px;

  /* ---------- TIPOGRAFÍA — cuerpo y complementos ---------- */
  --fs-sintro:         21px;       /* .sintro (estudio) */
  --fs-pcard-body:     19px;       /* .pcard p */
  --lh-pcard-body:     25.65px;

  --fs-cform-input:    18px;       /* .cform input/textarea */

  --fs-hero-sub:       16.992px;   /* .hero .sub */
  --lh-hero-sub:       26.3376px;

  --fs-legal-intro:    17px;       /* .lintro */
  --lh-legal-intro:    26.35px;    /* también aplicado a p con lh similar */

  --fs-body:           16px;       /* body base + winner .ssub */
  --lh-body:           24.8px;

  --fs-btn-primary:    15.5px;     /* .cform button */
  --fs-hero-link:      15px;       /* .hero .link */
  --fs-btn-plain:      14.5px;     /* .hero .btn.plain */

  --fs-lnav:           13.5px;     /* .lnav a */
  --ls-lnav:           0.27px;

  --fs-rcard-q:        13.68px;    /* .rcard-q */
  --fs-legal-body:     12.5px;     /* main p, footer a */
  --lh-legal-body:     20.625px;
  --fs-rcard-n:        12px;       /* .rcard-n nombre */
  --fs-copyright:      12px;       /* .fbottom span, .flegal */

  --fs-kicker:         11.5px;     /* .lab, .ekick, .lkick */
  --ls-kicker:         1.84px;     /* uppercase kicker */

  --fs-rcard-r:        10px;       /* .rcard-r rol */

  /* ---------- LAYOUT — padding lateral (escala mantenida por decisión) ---------- */
  --pad-hero-left:     72px;       /* .hleft (clamp 24,5vw,72 desktop) */
  --pad-hero-right:    40px;       /* .hleft right (clamp 20,3vw,40) */
  --pad-x-wide:        64px;       /* .wside, .services2-row-btn */
  --pad-x-standard:    56px;       /* .studio, .hrail, header/main/footer legal */

  --pad-hero-y:        96px 0 14px;   /* .hero desktop */
  --pad-studio-y:      126px;      /* top y bottom de .studio (padding 126 56) */
  --pad-process-top:   198px;      /* .process padding-top */
  --pad-lhero:         80px 56px 40px;

  --gutter-contact:    56px;       /* .contact-grid gap desktop */
  --gutter-cta:        22px;       /* .cta gap */
  --gutter-cform:      32px;       /* .cform gap (form flex column) */
  --gutter-logotrack:  74px;

  --container-legal:   900px;      /* max-width main y .lhero */
  --container-studio:  1080px;     /* max-width .studio */
  --container-sub:     653.639px;  /* .hero .sub max-width (~56ch) */

  /* ---------- RADIOS (por-elemento, no colapsados) ---------- */
  --radius-card-worm:      22px;   /* .card (hero cluster) */
  --radius-wscard:         20px;   /* .wscard (trabajos) */
  --radius-pcard:          26px;   /* .pcard desktop */
  --radius-rcard:          18px;   /* .rcard (testimonio) desktop */
  --radius-pill:           100px;  /* .btn.plain, .cform button */
  --radius-toplogo-dot:    50%;    /* punto rojo del topdot */

  /* ---------- MOTION ---------- */
  --dur-topdot-hover:      .3s;
  --ease-topdot-hover:     cubic-bezier(.4, 0, .2, 1);

  --dur-menu:              .55s;
  --ease-menu:             cubic-bezier(.7, 0, .3, 1);

  --dur-invert:            400ms;             /* closing invert (footwm-wrap) */
  --ease-invert:           cubic-bezier(.22, .61, .36, 1);

  --dur-toplogo-color:     .3s;
  --dur-toplogo-fade:      .4s;
  --ease-toplogo:          ease;

  --anim-logotrack:        55s linear infinite reverse logoscroll;

  /* Hero worm (leídos por el IIFE, no como CSS variables activas — documentados aquí para trazabilidad) */
  --worm-eng-in:  0.06;
  --worm-eng-out: 0.14;
  --worm-smooth:  0.18;
  --worm-lag:     7;      /* frames */
  --worm-lerp:    0.28;

  /* Services2 snap (JS) — documentados para trazabilidad */
  --s2-snap-zone: 110;    /* px */
  --s2-snap-ms:   320;    /* ms */
  --s2-idle-ms:   150;    /* ms */

  /* Sectores reveal (JS) — documentados */
  --sectores-reveal-threshold: 0.3;
  --sectores-reveal-delay-base: 220ms;
  --sectores-reveal-delay-step: 85ms;

  /* ---------- SHADOWS ---------- */
  /* .card del hero worm */
  --shadow-card-worm: 0 22px 60px rgba(14, 14, 14, .13);
  /* .wscard cinematográfica */
  --shadow-wscard:
    0 50px 90px -28px rgba(14, 14, 14, .55),
    0 14px 30px -14px rgba(14, 14, 14, .25);
  /* .pcard (glass) */
  --shadow-pcard:
    0 30px 60px -22px rgba(14, 14, 14, .22),
    inset 0 1px 0 0 rgba(255, 255, 255, .6);

  /* ---------- GLASS (pcard) ---------- */
  --glass-pcard-bg:     rgba(255, 255, 255, .55);
  --glass-pcard-blur:   blur(18px) saturate(1.15);   /* desktop; mobile lo desactiva */

  /* ---------- MASK ---------- */
  --mask-logoband: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* ============================================================================
   Mobile — @media (max-width: 880px)
   Sobreescribimos sólo lo que la fuente cambia realmente en 390×844.
   Cada valor aquí también está en mediciones.md (bloque Mobile).
   ============================================================================ */
@media (max-width: 880px) {
  :root {
    /* Display — impacto */
    --fs-hero-h1:      58px;
    --lh-hero-h1:      58px;
    --ls-hero-h1:      -2.03px;

    --fs-contact-h2:   40px;
    --lh-contact-h2:   40px;
    --ls-contact-h2:   -1.4px;

    --fs-legal-h1:     44px;
    --lh-legal-h1:     44px;
    --ls-legal-h1:     -1.54px;

    /* Wordmark ratio 0.30× — mantenido por decisión (intención: mobile compacto) */
    --fs-wordmark:     101.4px;    /* .footwm mobile */
    --lh-wordmark:     76.05px;
    --ls-wordmark:     -6.2868px;

    /* Display — editorial suave */
    --fs-trabajos-h2:  32px;
    --lh-trabajos-h2:  32px;
    --ls-trabajos-h2:  -0.8px;

    --fs-estudio-h2:   32px;

    /* Aparato */
    --fs-services2:    26px;
    --lh-services2:    26px;
    --ls-services2:    -0.39px;

    /* Signature Playfair */
    --fs-sfull-title:  26px;
    --lh-sfull-title:  27.3px;
    --ls-sfull-title:  -0.26px;

    /* Estructura */
    --fs-pcard-h:      36px;
    --lh-pcard-h:      36px;
    --ls-pcard-h:      -0.9px;

    --fs-legal-h2:     28px;
    --lh-legal-h2:     30.8px;
    --ls-legal-h2:     -0.7px;

    /* Cuerpo secundario */
    --fs-hero-sub:     15px;
    --lh-hero-sub:     23.25px;

    /* Layout — padding lateral colapsa a 22–28 en móvil (mantiene escala pero comprimida) */
    --pad-hero-left:   28px;       /* .hleft mobile 0 28 */
    --pad-hero-right:  28px;
    --pad-x-wide:      20px;       /* .services2-row-btn mobile 22 20 */
    --pad-x-standard:  22px;       /* .studio, header, main, footer, .lhero, .lnav mobile */

    --pad-hero-y:      110px 0 24px;

    /* Gutter */
    --gutter-contact:  40px;
    --gutter-hrail:    16px;

    /* Radios ligeramente reducidos en móvil (por-elemento, no colapsados) */
    --radius-pcard:    20px;       /* pcard mobile */
    --radius-rcard:    14px;       /* rcard mobile */

    /* Cluster: cards en vw (memoria + mediciones) */
    /* En mobile los tamaños son 32-36vw, se aplican en el HTML como valores
       directos porque son responsive por naturaleza. No se tokenizan aquí. */

    /* Proceso mobile — sin backdrop-filter (rendimiento). El translate3d del rail
       lo hace el JS; no lo declaramos en CSS. */
    --glass-pcard-blur: none;
  }
}