/* ═══════════════════════════════════════════════
   reset.css — VEKSU
   Variables globales, reset, base, tipografía
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
       DESIGN TOKENS
    ═══════════════════════════════════════════════ */
    :root {
      /* Brand colours */
      --negro:        #080808;
      --negro-puro:   #000000;
      --cobre:        #B87333;
      --cobre-claro:  #D4956A;
      --cobre-oscuro: #8B5523;
      --crema:        #F0EBE1;
      --blanco:       #FFFFFF;
      --gris-1:       #111111;
      --gris-2:       #1A1A1A;
      --gris-3:       #2A2A2A;
      --gris-4:       rgba(255,255,255,0.06);

      /* Typography */
      --font-logo:    'Nunito', system-ui, sans-serif;
      --font-serif:   'Cormorant Garamond', Georgia, serif;
      --font-sans:    'DM Sans', system-ui, sans-serif;

      /* Motion */
      --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
      --dur-micro:    180ms;
      --dur-base:     280ms;
      --dur-enter:    520ms;
      --dur-reveal:   800ms;

      /* Layout */
      --sec-pad:      clamp(90px, 11vw, 160px);
      --container:    1240px;
      --gutter:       clamp(20px, 5vw, 72px);
    }

    /* ═══════════════════════════════════════════════
       RESET + BASE
    ═══════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      background: var(--negro);
      color: var(--crema);
      font-family: var(--font-sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    img  { max-width: 100%; display: block; }
    a    { text-decoration: none; color: inherit; }
    button { font-family: inherit; }

    /* Visible focus rings for keyboard nav */
    :focus-visible {
      outline: 2px solid var(--cobre);
      outline-offset: 3px;
    }

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

    /* ═══════════════════════════════════════════════
       LOGO — imagen real (logo-veksu.png)
       Guarda el archivo en la carpeta del proyecto
       con ese nombre exacto.
    ═══════════════════════════════════════════════ */
    .logo-img {
      height: clamp(38px, 5vw, 52px);
      width: auto;
      display: block;
    }
    /* Fallback CSS — se muestra solo si no carga logo-veksu.png */
    .logo-css {
      font-family: var(--font-logo);
      font-weight: 900;
      font-size: clamp(2.1rem, 4vw, 2.9rem);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      line-height: 1;
      display: none; /* oculto por defecto, visible si falla la imagen */
      align-items: baseline;
      gap: 0;
      user-select: none;
    }
    .logo-char { color: var(--blanco); }
    .logo-k {
      position: relative;
      display: inline-block;
      color: var(--blanco);
    }
    .logo-k::before {
      content: 'K';
      position: absolute; top: 0; left: 0;
      font-family: var(--font-logo); font-weight: 900; letter-spacing: 0;
      background: linear-gradient(140deg, #E0A96A 0%, #C48A40 40%, #A06830 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      clip-path: polygon(38% 0%, 100% 0%, 100% 56%, 59% 56%);
      pointer-events: none;
    }

    /* ═══════════════════════════════════════════════
       TIPO
    ═══════════════════════════════════════════════ */
    .t-eyebrow {
      display: inline-block;
      font-family: var(--font-sans);
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--cobre);
    }
    .t-hero-xl {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(3.6rem, 9vw, 9.5rem);
      line-height: 0.95;
      letter-spacing: -0.03em;
      padding-bottom: 0.15em;
    }
    .t-hero {
      font-family: var(--font-serif);
      font-weight: 600;
      font-size: clamp(2.4rem, 6vw, 5.5rem);
      line-height: 1.03;
      letter-spacing: -0.025em;
    }
    .t-section {
      font-family: var(--font-serif);
      font-weight: 600;
      font-size: clamp(1.8rem, 4vw, 3.4rem);
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    .t-body {
      font-family: var(--font-sans);
      font-size: clamp(0.88rem, 1.6vw, 1rem);
      line-height: 1.9;
      font-weight: 300;
      color: rgba(240,235,225,0.52);
    }
    .t-small {
      font-family: var(--font-sans);
      font-size: 0.78rem;
      line-height: 1.7;
      color: rgba(240,235,225,0.38);
    }