/* ─── VARIABLES.CSS ─── Track A ─── Landing Andres Herrera ─── */

:root {
  /* Colores */
  --color-bg: #141414;
  --color-bg-elevated: #171717;
  --color-text: #EDE8DE;
  --color-accent: #F8BC02;
  --color-text-muted: #EDE8DE;
  --color-border: #EDE8DE;

  /* Escala de opacidad — texto */
  --alpha-full: 1;
  --alpha-primary: 1;
  --alpha-secondary: 1;
  --alpha-muted: 1;
  --alpha-ghost: 1;

  /* Escala de opacidad — bordes */
  --alpha-border-strong: 1;
  --alpha-border-base: 1;
  --alpha-border-subtle: 1;
  --alpha-border-faint: 1;

  /* Superficies */
  --surface-veil-strong: rgba(20, 20, 20, 0.82);
  --surface-veil-base: rgba(20, 20, 20, 0.72);
  --surface-veil-soft: rgba(20, 20, 20, 0.6);
  --surface-panel: rgba(20, 20, 20, 0.56);
  --surface-panel-strong: rgba(18, 18, 18, 0.78);
  --surface-panel-soft: rgba(237, 232, 222, 0.03);

  /* Sistema de líneas y radios */
  --line-hairline: 1px;
  --line-underline: 1px;
  --radius-rect: 10px;
  --radius-soft: 14px;
  --radius-round: 999px;

  /* Tipografias (Adobe Fonts / Typekit) */
  --font-display: 'argent-cf', Georgia, serif;
  --font-body: 'halyard-text', system-ui, sans-serif;

  /* Pesos (Halyard Text: Light=300, Book=400, Medium=500, SemiBold=600) */
  --fw-thin: 100;
  --fw-display-thin: 100;
  --fw-light: 300;
  --fw-book: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-header: var(--fw-display-thin);
  --fw-body-base: var(--fw-light);

  /* Tipografia base legacy */
  --fs-hero: clamp(42px, 7vw, 88px);
  --fs-h1: clamp(36px, 5vw, 70px);
  --fs-body: clamp(15px, 1.35vw, 18px);
  --fs-label: clamp(11px, 0.9vw, 13px);
  --fs-micro: 12px;

  /* Tipografia desktop consolidada */
  --fs-display-xl: 104px;
  --fs-display: 78px;
  --fs-h2: clamp(30px, 4vw, 48px);
  --fs-h3: clamp(22px, 2.8vw, 32px);
  --fs-display-reel: 72px;
  --fs-display-pricing: 56px;
  --fs-title: 40px;
  --fs-intro: 34px;
  --fs-step-desc: 30px;
  --fs-quote: 28px;
  --fs-body-xl: 18px;
  --fs-body-sm: 16px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-button: 16px;
  --fs-toggle: 15px;
  --fs-label-ui: 13px;
  --fs-footer-fine: 12px;
  --fs-tooltip: 12px;
  --fs-label-desktop: var(--fs-label-ui);
  --fs-disclaimer: 13px;
  --fs-micro-label: 11px;

  /* Line heights */
  --lh-display: 0.88;
  --lh-h2: 0.9285714286;
  --lh-h3: 1;
  --lh-heading: 1.1;
  --lh-body: 24px;
  --lh-body-xl: var(--lh-body);
  --lh-body-sm: 1.4375;
  --lh-button: 1.25;
  --lh-label-ui: 1.2307692308;
  --lh-footer-fine: 1.3333333333;
  --lh-tooltip: 1.3333333333;
  --lh-display-tight: 0.625;
  --lh-display-half: 0.5;
  --lh-display-reel: 0.875;
  --lh-intro: 0.9411764706;
  --lh-step-desc: 0.8;
  --lh-quote: 1;
  --lh-body-solid: 1;
  --lh-body-tight: 1.2;
  --lh-body-md: 1.5;
  --lh-label-tight: var(--lh-label-ui);
  --lh-disclaimer: 1.2307692308;
  --lh-conversion-subtitle: 1.0277777778;
  --lh-micro-label: 1;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-display: -0.02em;
  --ls-derived: -0.01em;
  --ls-display-xl: -4.8px;
  --ls-display-process: -4px;
  --ls-display-reel: -2.4px;
  --ls-display-pricing: -1.92px;
  --ls-title: -0.48px;
  --ls-intro: -0.8px;
  --ls-step-desc: -1.08px;
  --ls-card: -0.4px;
  --ls-conversion-subtitle: -0.72px;
  --ls-quote: -0.64px;
  --ls-body-xl: -0.01em;
  --ls-body: -0.01em;
  --ls-body-md: -0.32px;
  --ls-toggle: -0.16px;
  --ls-label: var(--ls-derived);
  --ls-disclaimer: var(--ls-derived);
  --ls-micro-label: var(--ls-derived);

  /* Refinement aliases */
  --lh-solid: 1;
  --lh-header: 0.88;
  --ls-none: 0;
  --ls-header: -0.02em;

  /* Section spacing (vertical rhythm) */
  --space-section-fluid: clamp(120px, 13vw, 180px);
  --space-section-fluid-sm: clamp(88px, 12vw, 118px);
  --space-section-fluid-xs: clamp(72px, 11vw, 96px);

  /* Label tracking scale */
  --ls-label-uppercase: 0.04em;
  --ls-label-meta: 0.025em;

  /* Utility type */
  --fs-preloader-counter: 16px;
  --lh-preloader-counter: var(--lh-solid);
  --ls-preloader-counter: -0.1px;
  --fs-dots-label: 9px;
  --lh-dots-label: var(--lh-label-ui);
  --ls-dots-label: var(--ls-derived);
  --fs-footer-meta: var(--fs-footer-fine);
  --lh-footer-meta: var(--lh-footer-fine);
  --ls-footer-meta: var(--ls-derived);
  --fs-nav-mobile-link: clamp(22px, 5.2vw, 30px);
  --lh-nav-mobile-link: var(--lh-solid);
  --ls-nav-mobile-link: var(--ls-none);

  /* Fluid type by component */
  --fs-hero-headline-fluid: var(--fs-display);
  --lh-hero-headline-fluid: var(--lh-header);
  --ls-hero-headline-fluid: var(--ls-header);
  --fs-hero-subtitle-fluid: var(--fs-body-xl);
  --lh-hero-subtitle-fluid: var(--lh-body-xl);
  --ls-hero-subtitle-fluid: var(--ls-body);
  --fs-reel-pregunta-fluid: var(--fs-intro);
  --lh-reel-pregunta-fluid: var(--lh-intro);
  --ls-reel-pregunta-fluid: var(--ls-intro);
  --fs-reel-copy-fluid: var(--fs-display);
  --lh-reel-copy-fluid: var(--lh-header);
  --ls-reel-copy-fluid: var(--ls-header);
  --fs-servicios-intro-fluid: var(--fs-display);
  --lh-servicios-intro-fluid: var(--lh-header);
  --ls-servicios-intro-fluid: var(--ls-header);
  --fs-servicio-title-fluid: var(--fs-title);
  --lh-servicio-title-fluid: var(--lh-display-tight);
  --ls-servicio-title-fluid: var(--ls-title);
  --fs-servicio-body-fluid: var(--fs-body-sm);
  --lh-servicio-body-fluid: var(--lh-body-sm);
  --ls-servicio-body-fluid: var(--ls-body);
  --fs-closing-headline-fluid: var(--fs-display);
  --lh-closing-headline-fluid: var(--lh-header);
  --ls-closing-headline-fluid: var(--ls-header);
  --fs-conversion-subtitle-fluid: var(--fs-body-xl);
  --lh-conversion-subtitle-fluid: var(--lh-body);
  --ls-conversion-subtitle-fluid: var(--ls-body);
  --fs-toggle-pill-fluid: var(--fs-button);
  --lh-toggle-pill-fluid: var(--lh-button);
  --ls-toggle-pill-fluid: var(--ls-derived);
  --fs-conversion-card-headline-fluid: var(--fs-intro);
  --lh-conversion-card-headline-fluid: var(--lh-heading);
  --ls-conversion-card-headline-fluid: var(--ls-card);
  --fs-conversion-card-copy-fluid: var(--fs-body-sm);
  --lh-conversion-card-copy-fluid: var(--lh-body-solid);
  --ls-conversion-card-copy-fluid: var(--ls-body);
  --fs-conversion-input-fluid: var(--fs-body-sm);
  --lh-conversion-input-fluid: var(--lh-body-tight);
  --ls-conversion-input-fluid: var(--ls-body);
  --fs-conversion-card-pricing-fluid: var(--fs-display-pricing);
  --lh-conversion-card-pricing-fluid: var(--lh-display-reel);
  --ls-conversion-card-pricing-fluid: var(--ls-display-pricing);

  /* Spacing (escala 4pt) */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-120: 120px;

  /* Spacing aliases */
  --space-section: var(--sp-120);
  --space-section-md: 96px;
  --space-section-sm: 72px;
  --space-item: var(--sp-24);
  --space-item-sm: var(--sp-16);
  --space-card: 40px;
  --space-card-md: 32px;
  --space-card-sm: 24px;
  --space-card-xs: 20px;
  --space-pill-pad: 14px 18px;
  --space-pill-pad-sm: 14px 12px;
  --space-field-pad: 20px 22px;
  --space-field-pad-sm: 18px;
  --space-topbar: var(--sp-40) var(--grid-padding);
  --space-topbar-mobile: 24px 24px;
  --space-nav-mobile-panel: 108px 24px 28px;
  --space-nav-mobile-panel-sm: 96px 24px 28px;
  --space-nav-mobile-inner: 22px 24px 24px;
  --space-footer-y: 28px 0 48px;
  --space-footer-y-md: 32px 0 40px;
  --space-hero-intro: 130px 0 72px;
  --space-hero-intro-sm: 100px 0 56px;
  --space-hero-main: 140px 0 var(--space-section);
  --space-hero-main-sm: 100px 0 80px;
  --space-servicios-y: clamp(60px, 8vw, 110px) 0;
  --space-servicios-y-xs: clamp(40px, 8vw, 60px) 0;
  --space-conversion-y: var(--space-section) 0;
  --space-conversion-y-md: 96px 0;
  --space-conversion-y-sm: 72px 0;
  --space-cierre-y: 0 0 var(--space-section);
  --space-cierre-y-md: 0 0 96px;
  --space-cierre-y-sm: 0 0 72px;
  --space-hero-text-gap: 40px;
  --space-hero-text-gap-sm: 28px;
  --space-content-gap: 40px;
  --space-content-gap-md: 32px;
  --space-hero-cta-shell: 10px;
  --space-btn-outline: var(--sp-16) var(--space-item);
  --space-servicio-row: 8px 0;

  /* Grid */
  --grid-max: 1280px;
  --grid-padding: 80px;

  /* Z-Index */
  --z-base: 1;
  --z-content: 10;
  --z-nav: 100;
  --z-preloader: 9999;

  /* Transiciones */
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 1023px) {
  :root {
    --grid-padding: clamp(32px, 5vw, 60px);
    --space-topbar: var(--space-topbar-mobile);
    --fs-hero-headline-fluid: clamp(44px, 6.4vw, 64px);
    --lh-hero-headline-fluid: 0.86;
    --ls-hero-headline-fluid: -1.8px;
    --fs-reel-copy-fluid: clamp(42px, 5.6vw, 60px);
    --lh-reel-copy-fluid: 0.9;
    --ls-reel-copy-fluid: -1.6px;
    --fs-servicios-intro-fluid: clamp(32px, 4.5vw, 46px);
    --lh-servicios-intro-fluid: 0.92;
    --ls-servicios-intro-fluid: -0.9px;
    --fs-servicio-title-fluid: clamp(28px, 3.8vw, 40px);
    --lh-servicio-title-fluid: var(--lh-solid);
    --fs-closing-headline-fluid: clamp(44px, 6.4vw, 64px);
    --lh-closing-headline-fluid: 0.88;
    --ls-closing-headline-fluid: -1.8px;
    --fs-conversion-subtitle-fluid: var(--fs-body-xl);
    --lh-conversion-subtitle-fluid: var(--lh-body);
    --ls-conversion-subtitle-fluid: var(--ls-body);
    --space-conversion-y: var(--space-conversion-y-md);
    --space-cierre-y: var(--space-cierre-y-md);
    --space-content-gap: var(--space-content-gap-md);
  }
}

@media (max-width: 767px) {
  :root {
    --grid-padding: clamp(20px, 5vw, 40px);
    --fs-nav-mobile-link: clamp(18px, 7vw, 26px);
    --space-nav-mobile-panel: var(--space-nav-mobile-panel-sm);
    --fs-hero-headline-fluid: clamp(34px, 8.8vw, 48px);
    --lh-hero-headline-fluid: 0.88;
    --ls-hero-headline-fluid: -1px;
    --fs-hero-subtitle-fluid: clamp(15px, 3.6vw, 18px);
    --lh-hero-subtitle-fluid: 1.45;
    --fs-reel-pregunta-fluid: clamp(22px, 5.2vw, 30px);
    --lh-reel-pregunta-fluid: 1.1;
    --fs-reel-copy-fluid: clamp(32px, 7.8vw, 46px);
    --lh-reel-copy-fluid: 0.92;
    --ls-reel-copy-fluid: -0.9px;
    --fs-servicios-intro-fluid: clamp(26px, 6vw, 34px);
    --lh-servicios-intro-fluid: 0.98;
    --ls-servicios-intro-fluid: -0.5px;
    --fs-servicio-title-fluid: clamp(24px, 5.8vw, 34px);
    --lh-servicio-title-fluid: var(--lh-solid);
    --fs-servicio-body-fluid: clamp(15px, 3.6vw, 18px);
    --fs-closing-headline-fluid: clamp(34px, 8.4vw, 48px);
    --lh-closing-headline-fluid: 0.9;
    --ls-closing-headline-fluid: -1px;
    --fs-conversion-subtitle-fluid: var(--fs-body-xl);
    --lh-conversion-subtitle-fluid: var(--lh-body);
    --ls-conversion-subtitle-fluid: var(--ls-body);
    --fs-toggle-pill-fluid: 13px;
    --lh-toggle-pill-fluid: 13px;
    --ls-toggle-pill-fluid: -0.14px;
    --fs-conversion-card-headline-fluid: 28px;
    --lh-conversion-card-headline-fluid: 30px;
    --ls-conversion-card-headline-fluid: -0.32px;
    --fs-conversion-card-copy-fluid: 16px;
    --lh-conversion-card-copy-fluid: 19px;
    --ls-conversion-card-copy-fluid: -0.18px;
    --fs-conversion-input-fluid: 16px;
    --lh-conversion-input-fluid: 19px;
    --ls-conversion-input-fluid: -0.18px;
    --fs-conversion-card-pricing-fluid: 42px;
    --lh-conversion-card-pricing-fluid: 38px;
    --ls-conversion-card-pricing-fluid: -1.44px;
    --space-conversion-y: var(--space-conversion-y-sm);
    --space-cierre-y: var(--space-cierre-y-sm);
    --space-card: var(--space-card-sm);
    --space-pill-pad: var(--space-pill-pad-sm);
    --space-hero-text-gap: var(--space-hero-text-gap-sm);
  }
}

@media (max-width: 479px) {
  :root {
    --fs-hero-headline-fluid: clamp(28px, 10.2vw, 40px);
    --lh-hero-headline-fluid: 0.9;
    --ls-hero-headline-fluid: -0.7px;
    --fs-reel-copy-fluid: clamp(28px, 9.8vw, 38px);
    --lh-reel-copy-fluid: 0.94;
    --ls-reel-copy-fluid: -0.7px;
    --fs-servicios-intro-fluid: clamp(22px, 7.2vw, 28px);
    --lh-servicios-intro-fluid: 1;
    --ls-servicios-intro-fluid: -0.3px;
    --fs-servicio-title-fluid: clamp(22px, 7vw, 30px);
    --fs-closing-headline-fluid: clamp(28px, 9.6vw, 40px);
    --lh-closing-headline-fluid: 0.92;
    --ls-closing-headline-fluid: -0.7px;
    --fs-conversion-subtitle-fluid: var(--fs-body-xl);
    --lh-conversion-subtitle-fluid: var(--lh-body);
    --ls-conversion-subtitle-fluid: var(--ls-body);
    --fs-conversion-card-headline-fluid: 24px;
    --lh-conversion-card-headline-fluid: 26px;
    --ls-conversion-card-headline-fluid: -0.28px;
    --fs-conversion-card-pricing-fluid: 38px;
    --lh-conversion-card-pricing-fluid: 34px;
    --space-servicios-y: var(--space-servicios-y-xs);
    --space-card: var(--space-card-xs);
    --space-field-pad: var(--space-field-pad-sm);
  }
}