/* ══════════════════════════════════════════════
   RESET & BASE — idéntico al resto de páginas
══════════════════════════════════════════════ */
    *, *::before, *::after {
      margin: 0; padding: 0;
      box-sizing: border-box;
    }

    :root {
      --bg:        #0d0d0d;
      --bg-alt:    #121212;
      --white:     #f0ede8;
      --gray:      #666;
      --gray-lt:   #999;
      --display:   'Anton', sans-serif;
      --body:      'DM Sans', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--body);
      font-weight: 300;
      overflow-x: hidden;
      cursor: none;
    }

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

/* ══════════════════════════════════════════════
   CURSOR
══════════════════════════════════════════════ */
    #cursor {
      width: 6px; height: 6px;
      background: var(--white);
      border-radius: 50%;
      position: fixed; top: 0; left: 0;
      pointer-events: none; z-index: 9999;
      transform: translate(-50%, -50%);
    }
    #cursor-ring {
      width: 32px; height: 32px;
      border: 1px solid rgba(240,237,232,0.35);
      border-radius: 50%;
      position: fixed; top: 0; left: 0;
      pointer-events: none; z-index: 9998;
      transform: translate(-50%, -50%);
    }

/* ══════════════════════════════════════════════
   NAV
══════════════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      display: flex;
      justify-content: center;
      gap: 3.5rem;
      padding: 1.6rem 2rem;
    }
    nav a {
      font-family: var(--body);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--white);
      opacity: 0.7;
      transition: opacity 0.3s;
    }
    nav a:hover  { opacity: 1; }
    nav a.active { opacity: 1; }
    #nav a       { opacity: 1; }

/* ══════════════════════════════════════════════
   PÁGINA LEGAL
══════════════════════════════════════════════ */
    #legal-page {
      background: var(--bg);
      color:      var(--white);
      min-height: 100vh;
      padding:    clamp(6rem, 12vh, 10rem)
                  clamp(1.5rem, 6vw, 6rem)
                  var(--space-2xl, 7rem);
    }

    .legal-content {
      max-width:  70ch;
      margin:     0 auto;
    }

    /* ── Título ── */
    .legal-title {
      font-family:    var(--display);
      font-size:      clamp(2.5rem, 7vw, 6rem);
      color:          var(--white);
      line-height:    0.95;
      letter-spacing: -0.01em;
      margin-bottom:  var(--space-xl, 5rem);
      text-transform: uppercase;
    }

    /* ── Cuerpo ── */
    .legal-body {
      font-family: var(--body);
      font-size:   clamp(0.8rem, 1.2vw, 1rem);
      color:       var(--white);
      line-height: 1.7;
    }

    .legal-body h2 {
      font-family:    var(--display);
      font-size:      clamp(1.5rem, 3vw, 2.5rem);
      color:          var(--white);
      line-height:    1;
      letter-spacing: -0.01em;
      margin-top:     var(--space-xl, 5rem);
      margin-bottom:  var(--space-md, 2rem);
      text-transform: uppercase;
    }

    .legal-body h3 {
      font-family:    var(--body);
      font-size:      clamp(0.9rem, 1.5vw, 1.1rem);
      color:          var(--white);
      font-weight:    400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-top:     var(--space-lg, 3rem);
      margin-bottom:  var(--space-sm, 1rem);
    }

    .legal-body p {
      margin-bottom: var(--space-md, 2rem);
      color:         var(--white);
    }

    .legal-body a {
      color:           var(--white);
      text-decoration: underline;
      text-underline-offset: 3px;
      opacity: 0.85;
    }
    .legal-body a:hover { opacity: 1; }

    .legal-body ul,
    .legal-body ol {
      margin: var(--space-sm, 1rem) 0 var(--space-md, 2rem) var(--space-lg, 3rem);
    }
    .legal-body li {
      margin-bottom: var(--space-xs, 0.5rem);
      color:         var(--white);
    }

    .legal-body strong { color: var(--white); font-weight: 500; }

    /* ── Tablas (Complianz las genera para la cookie policy) ── */
    .legal-body table {
      width:           100%;
      border-collapse: collapse;
      margin:          var(--space-md, 2rem) 0;
      font-size:       clamp(0.65rem, 0.9vw, 0.8rem);
    }
    .legal-body table th,
    .legal-body table td {
      border:     1px solid var(--gray);
      padding:    var(--space-xs, 0.5rem) var(--space-sm, 1rem);
      text-align: left;
      color:      var(--white);
    }
    .legal-body table th {
      background:      var(--bg-alt);
      text-transform:  uppercase;
      letter-spacing:  0.05em;
      font-size:       0.6rem;
    }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
    footer {
      padding:    3.5rem 3rem 2rem;
      background: #0a0a0a;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .footer-title-wrap { overflow: hidden; }
    .footer-title {
      font-family:    var(--display);
      font-size:      clamp(5rem, 17vw, 14rem);
      line-height:    0.88;
      letter-spacing: -0.02em;
      margin-bottom:  2rem;
    }
    .footer-bottom {
      display:               grid;
      grid-template-columns: 1fr auto 1fr;
      align-items:           center;
      font-size:             0.6rem;
      letter-spacing:        0.14em;
      text-transform:        uppercase;
      color:                 var(--gray);
    }
    .footer-bottom .stars {
      font-size:      0.78rem;
      letter-spacing: 0.22em;
      color:          var(--white);
      text-align:     center;
    }
    .footer-bottom span:last-child { text-align: right; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
    @media (hover: none), (pointer: coarse) {
      body { cursor: auto; }
      #cursor, #cursor-ring { display: none; }
    }

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

    @media (max-width: 768px) {
      nav {
        flex-wrap: wrap; gap: 0.5rem 1.4rem;
        padding: 0.9rem var(--px, 1rem); justify-content: center;
      }
      #legal-page { padding-top: 5rem; }
      .footer-bottom {
        grid-template-columns: 1fr; text-align: center; gap: 0.4rem;
      }
      .footer-bottom span:last-child { text-align: center; }
    }