/* Páginas públicas de Vaultix Invitaciones (legales y guía de venta).
   Tokens --ad-* idénticos a landing.html. Las media queries van al final (A-79). */
:root[data-paleta="vaultix"] {
  --ad-fondo: #FAF7F1; --ad-fondo-2: #F5F1EA; --ad-superficie: #FFFFFF;
  --ad-tinta: #1F1D1A; --ad-tinta-2: #6F675B;
  --ad-acento: #4E7A22; --ad-acento-texto: #4E7A22; --ad-acento-fuerte: #3B5E18; --ad-on-acento: #FFFFFF;
  --ad-borde: #E8E2D6; --ad-borde-fuerte: #D3CBBB; --ad-acento-suave: #EDF2E4; --ad-verde-borde: #D6E2C4;
  --ad-verde-logo: #88B347; --ad-verde-claro: #B7D58A;
  --ad-antracita: #19202A; --ad-noche: #19202A; --ad-sobre-noche: #F3EFE6; --ad-sobre-noche-2: #B8B3A8;
}
:root {
  --ad-r-sm: 12px; --ad-r-md: 18px; --ad-r-pill: 999px;
  --ad-linea: color-mix(in srgb, var(--ad-tinta) 8%, transparent);
  --ad-sombra-1: 0 1px 2px color-mix(in srgb, var(--ad-tinta) 5%, transparent), 0 2px 8px color-mix(in srgb, var(--ad-tinta) 4%, transparent);
  --ad-gutter: clamp(16px, 2.2vw, 24px);
  --ad-ancho: 1200px;
  --ad-serif: 'Fraunces', Georgia, serif;
  --ad-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ad-mono: 'JetBrains Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
body { margin: 0; background: var(--ad-fondo); color: var(--ad-tinta); font-family: var(--ad-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--ad-acento-texto); outline-offset: 3px; border-radius: 6px; }
.contenedor { width: 100%; max-width: var(--ad-ancho); margin-inline: auto; padding-inline: var(--ad-gutter); }

/* Nav flotante (igual a la landing) */
.nav { position: sticky; top: 8px; z-index: 50; padding-inline: var(--ad-gutter); }
.nav__caja { max-width: var(--ad-ancho); margin: 8px auto 0; display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 4px 6px 4px 18px; border-radius: 16px; background: color-mix(in srgb, var(--ad-superficie) 95%, transparent); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--ad-linea), var(--ad-sombra-1); }
.marca { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.marca img { height: 38px; width: auto; }
.marca__linea { padding-left: 10px; border-left: 1px solid var(--ad-borde-fuerte); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ad-tinta-2); line-height: 1.2; }
.nav__links { display: flex; gap: 4px; margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--ad-tinta-2); }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: var(--ad-r-sm); }
.nav__acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; min-height: 46px; padding: 0 22px; border-radius: var(--ad-r-pill); background: var(--ad-tinta); color: var(--ad-on-acento); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.2), 0 6px 18px -6px rgba(0,0,0,.35); }
.boton--acento { background: var(--ad-acento) linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.15), 0 10px 24px -8px var(--ad-acento); }
.boton--claro { background: var(--ad-superficie); color: var(--ad-tinta); box-shadow: 0 0 0 1px var(--ad-linea), var(--ad-sombra-1); }
.boton--chico { min-height: 44px; padding: 0 18px; font-size: 14px; }

/* Pie (igual a la landing, sobre antracita a sangre) */
.cierre { background: var(--ad-noche); color: var(--ad-sobre-noche); margin-top: clamp(56px, 8vw, 96px); }
.pie { padding-block: 36px 40px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.pie .marca { justify-content: center; }
.pie .marca__linea { color: var(--ad-sobre-noche-2); border-left-color: color-mix(in srgb, var(--ad-sobre-noche) 28%, transparent); }
.pie__producto { color: var(--ad-sobre-noche-2); font-size: 14px; }
.pie__producto a { display: inline-block; padding: 12px 4px; color: var(--ad-sobre-noche); text-decoration: underline; text-underline-offset: 3px; }
.pie__tag { color: var(--ad-sobre-noche-2); font-size: 15px; }
.pie__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; font-size: 14px; color: var(--ad-sobre-noche); }
.pie__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.pie__copy { font-size: 13px; color: var(--ad-sobre-noche-2); }

/* Texto legal: lectura cómoda */
.legal { max-width: 68ch; margin-inline: auto; padding: clamp(32px, 6vw, 64px) var(--ad-gutter) 0; font-size: 17px; line-height: 1.7; }
.legal__volver { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 20px; font-size: 15px; font-weight: 600; color: var(--ad-acento-fuerte); text-decoration: underline; text-underline-offset: 3px; }
.legal h1 { font-family: var(--ad-serif); font-weight: 600; font-size: clamp(32px, 6vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
.legal__fecha { margin: 10px 0 28px; font-size: 14px; color: var(--ad-tinta-2); }
.legal h2 { margin: 36px 0 10px; font-family: var(--ad-serif); font-weight: 600; font-size: clamp(21px, 4vw, 25px); line-height: 1.25; letter-spacing: -.01em; }
.legal p, .legal li { margin-bottom: 12px; color: var(--ad-tinta); overflow-wrap: anywhere; }
.legal ul { padding-left: 22px; list-style: disc; }
.legal li::marker { color: var(--ad-acento); }
.legal strong { font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { background: var(--ad-fondo-2); color: var(--ad-tinta); }
  .pie__links a:hover { text-decoration: underline; }
  .boton:hover { transform: translateY(-1px); }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .marca img { height: 32px; }
}
@media (max-width: 400px) {
  .nav__caja { padding-left: 12px; gap: 8px; }
  .marca__linea { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .boton { transition: transform .15s ease, box-shadow .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}