/* ============================================== */
/* Design tokens — Vital landing                  */
/* Dirección industrial: negro cálido + amarillo   */
/* de marca (#FEDD00), tipografía condensada.      */
/* ============================================== */

@layer theme {
  :root {
    /* === Fonts === */
    --font-body:
      "Archivo", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", sans-serif;
    --font-display:
      "Big Shoulders Display", "Archivo Black", "Archivo", ui-sans-serif,
      sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* === Backgrounds (negro cálido, escala editorial 4 niveles) === */
    --bg-deep: 20 15% 5%;
    --bg: 20 10% 8%;
    --bg-raised: 20 8% 11%;
    --bg-elev: 20 8% 14%;

    /* === Ink (jerarquía de texto, cálida) === */
    --ink: 40 12% 96%;
    --ink-dim: 30 6% 68%;
    --ink-faint: 30 6% 56%;
    --ink-ghost: 30 8% 30%;

    /* === Brand — amarillo real del logo (#FEDD00) === */
    --dorado: 52 100% 50%;
    --dorado-light: 52 100% 62%;
    --dorado-dark: 46 100% 42%;

    /* === Lines === */
    --line: 30 10% 20%;
    --line-soft: 30 12% 18%;

    /* === Typography scale (fluido 360→1440px) === */
    --fs-display: clamp(2.5rem, 6vw + 1.5rem, 6rem); /* 40 → 96px (hero) */
    --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem); /* 32 → 56px (section heads) */
    --fs-h2: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem); /* 24 → 36px */
    --fs-h3: 1.5rem; /* 24px */
    --fs-body-lg: 1.125rem; /* 18px */
    --fs-body: 1rem; /* 16px */
    --fs-sm: 0.875rem; /* 14px */
    --fs-xs: 0.75rem; /* 12px */

    --lh-display: 0.95;
    --lh-heading: 1.1;
    --lh-body: 1.55;

    --tracking-display: -0.03em;
    --tracking-heading: -0.015em;
    --tracking-overline: 0.14em;

    /* === Spacing (escala 4pt) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
    --space-32: 128px;
    --space-48: 192px;

    /* === Radius (esquinas rectas, no card redondeada genérica) === */
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-full: 9999px;

    /* === Shadows (3 niveles, dark-friendly) === */
    --shadow-sm: 0 2px 4px -1px hsl(220 20% 3% / 0.4);
    --shadow-md: 0 8px 16px -4px hsl(220 20% 3% / 0.5);
    --shadow-lg: 0 24px 40px -12px hsl(220 20% 3% / 0.7);

    /* === Container widths === */
    --container-sm: 640px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-reading: 720px;

    /* === Motion === */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;
    --dur-hero: 700ms;

    /* === Z-index === */
    /* Header > drawer: el burger sigue accesible para cerrar el drawer. */
    --z-drawer: 100;
    --z-header: 200;
    --z-modal: 300;

    color-scheme: dark;
  }
}

/* ============================================== */
/* Base — reset, body, tipografía, container      */
/* ============================================== */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: hsl(var(--ink));
    background: hsl(var(--bg));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100svh;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  img,
  picture,
  video,
  svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid hsl(var(--dorado));
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    color: hsl(var(--ink));
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
  }

  h2 {
    font-size: var(--fs-h1);
  }

  h3 {
    font-size: var(--fs-h2);
  }

  h4 {
    font-size: var(--fs-h3);
  }

  p {
    max-width: 60ch;
    text-wrap: pretty;
  }

  ul,
  ol {
    padding-left: var(--space-6);
  }

  ::selection {
    background: hsl(var(--dorado));
    color: hsl(var(--bg-deep));
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer utilities {
  .container {
    width: 100%;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .container-reading {
    max-width: var(--container-reading);
  }

  .overline {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: hsl(var(--ink-dim));
    font-weight: 500;
  }

  .muted {
    color: hsl(var(--ink-dim));
  }

  .faint {
    color: hsl(var(--ink-faint));
  }

  .dorado {
    color: hsl(var(--dorado));
  }

  .text-balance {
    text-wrap: balance;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: calc(var(--z-header) + 1);
    padding: var(--space-3) var(--space-4);
    background: hsl(var(--dorado));
    color: hsl(var(--bg-deep));
    font-weight: 600;
    border-radius: var(--radius-md);
    transform: translateY(-150%);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
    text-decoration: none;
    outline: 2px solid hsl(var(--ink));
    outline-offset: 2px;
  }

  /* Scroll reveal — gated behind .js (set by an inline script in <head>)
     so content stays fully visible if JS fails to load or run. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .js [data-reveal-group] > *:nth-child(1) { transition-delay: 0ms; }
  .js [data-reveal-group] > *:nth-child(2) { transition-delay: 90ms; }
  .js [data-reveal-group] > *:nth-child(3) { transition-delay: 180ms; }
  .js [data-reveal-group] > *:nth-child(n + 4) { transition-delay: 270ms; }
}

/* ============================================== */
/* Components — botones, nav, footer, badges      */
/* ============================================== */

@layer components {
  /* ============================================== */
  /* Section wrapper                                */
  /* ============================================== */

  .section {
    padding-block: var(--space-16);
  }

  @media (min-width: 960px) {
    .section {
      padding-block: var(--space-24);
    }
  }

  /* ============================================== */
  /* Botón                                          */
  /* ============================================== */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 24px;
    min-height: 48px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
      transform var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn-primary {
    background: hsl(var(--dorado));
    color: hsl(var(--bg-deep));
  }

  .btn-primary:hover {
    background: hsl(var(--dorado-light));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
  }

  .btn-primary:active {
    box-shadow: none;
  }

  .btn-ghost {
    background: transparent;
    color: hsl(var(--ink));
    border-color: hsl(var(--line));
  }

  .btn-ghost:hover {
    background: hsl(var(--bg-raised));
    border-color: hsl(var(--ink-faint));
    transform: translateY(-2px);
    text-decoration: none;
  }

  /* ============================================== */
  /* Nav (header sticky)                            */
  /* ============================================== */

  .nav {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: hsl(var(--bg) / 0.97);
    border-bottom: 2px solid hsl(var(--line));
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    padding-block: var(--space-3);
  }

  @media (min-width: 960px) {
    .nav-inner {
      gap: var(--space-8);
    }
  }

  .nav-logo {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.375rem;
    letter-spacing: 0.06em;
    color: hsl(var(--ink));
  }

  .nav-logo:hover {
    text-decoration: none;
    color: hsl(var(--dorado));
  }

  .nav-links {
    display: none;
    gap: var(--space-8);
    align-items: center;
  }

  .nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: hsl(var(--ink-dim));
    transition: color var(--dur-fast) var(--ease-out);
  }

  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: hsl(var(--dorado));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .nav-links a:hover::after {
    transform: scaleX(1);
  }

  .nav-links a:hover {
    color: hsl(var(--ink));
    text-decoration: none;
  }

  .nav-cta {
    margin-inline-start: auto;
    padding: 8px 12px;
    min-height: 36px;
    font-size: var(--fs-xs);
  }

  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: hsl(var(--ink));
    font-size: var(--fs-h3);
    line-height: 1;
  }

  .nav-burger::before {
    content: "☰";
  }

  .nav-burger[aria-expanded="true"]::before {
    content: "✕";
  }

  @media (min-width: 960px) {
    .nav-links {
      display: inline-flex;
    }

    .nav-burger {
      display: none;
    }
  }

  /* ============================================== */
  /* Drawer mobile                                  */
  /* ============================================== */

  .nav-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: hsl(var(--bg-deep) / 0.98);
    backdrop-filter: blur(8px);
    padding: calc(var(--space-16) + 44px) var(--space-6) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transform: translateY(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    visibility: hidden;
  }

  .nav-drawer[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
  }

  .nav-drawer a {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 900;
    color: hsl(var(--ink));
    padding-block: var(--space-3);
    border-bottom: 1px solid hsl(var(--line-soft));
  }

  .nav-drawer a:hover {
    color: hsl(var(--dorado));
    text-decoration: none;
  }

  .nav-drawer .btn {
    margin-top: var(--space-6);
    border-bottom: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
  }

  @media (min-width: 960px) {
    .nav-drawer {
      display: none;
    }
  }

  /* ============================================== */
  /* Footer                                         */
  /* ============================================== */

  .footer {
    border-top: 1px solid hsl(var(--line-soft));
    padding-block: var(--space-16) var(--space-8);
    margin-top: var(--space-16);
    color: hsl(var(--ink-dim));
    font-size: var(--fs-sm);
    background: hsl(var(--bg-deep));
  }

  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
  }

  @media (min-width: 720px) {
    .footer-grid {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
  }

  .footer .nav-logo {
    display: inline-block;
    margin-bottom: var(--space-3);
  }

  .footer p {
    margin-bottom: var(--space-1);
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: hsl(var(--ink-faint));
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: hsl(var(--ink-faint));
    transition: color var(--dur-fast) var(--ease-out);
  }

  .footer-links a:hover {
    color: hsl(var(--ink));
    text-decoration: none;
  }

  .footer-bottom {
    padding-top: var(--space-8);
    border-top: 1px solid hsl(var(--line-soft));
  }

  /* ============================================== */
  /* Placeholder visual                             */
  /* ============================================== */
  /* Cualquier .placeholder se ve como bloque       */
  /* identificable hasta que haya foto/asset real.  */

  .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8);
    background: repeating-linear-gradient(
      45deg,
      hsl(var(--bg-raised)),
      hsl(var(--bg-raised)) 12px,
      hsl(var(--bg-elev)) 12px,
      hsl(var(--bg-elev)) 24px
    );
    color: hsl(var(--ink-faint));
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    border: 1px dashed hsl(var(--line));
    border-radius: var(--radius-lg);
    min-height: 200px;
  }

  /* Cuando se reemplace el contenido por <img>, eliminar la clase .placeholder
     del elemento. Las dimensiones reales las define cada layout en layout.css. */
}