/* ═══════════════════════════════════════════════════════════════════════
   VALINOR GLOBAL — SISTEMA DE DISEÑO
   Tokens y clases globales. Tailwind aporta las utilidades.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --v-obsidian:      #111415;
  --v-surface:       #1d2022;
  --v-surface-alt:   #111827;
  --v-surface-2:     #242729;
  --v-gold:          #D4AF37;
  --v-gold-bright:   #f2ca50;
  --v-gold-muted:    #99907c;
  --v-txt-primary:   #e1e2e4;
  --v-txt-secondary: #9ca3af;
  --v-txt-tertiary:  #D1D5DB;
  --v-border:        #2a2d30;
}

/* ── Accesibilidad: movimiento reducido ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Keyframes ────────────────────────────────────────────────────────── */
@keyframes v-pulse-dot {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}
@keyframes v-draw-path {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}
@keyframes v-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Contenedor maestro ───────────────────────────────────────────────── */
.sw { max-width: 1280px; margin-inline: auto; padding-inline: 2rem; }
@media (min-width: 768px) { .sw { padding-inline: 3rem; } }

/* ── Cuadrícula técnica de fondo ──────────────────────────────────────── */
.tech-grid-bg {
  background-image:
    linear-gradient(rgba(212,175,55,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.tech-grid-dense {
  background-image:
    linear-gradient(rgba(212,175,55,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.tech-grid-footer {
  background-image:
    linear-gradient(rgba(212,175,55,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.025) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero-vignette {
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, var(--v-obsidian) 100%);
}

/* ── Rutas SVG animadas ───────────────────────────────────────────────── */
.route-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: v-draw-path 2.8s ease-out .6s forwards;
}

/* ── Regla dorada decorativa ──────────────────────────────────────────── */
.gold-rule {
  display: block; width: 2.5rem; height: 1px;
  background: var(--v-gold); opacity: .6;
}

/* ── Animaciones de entrada ───────────────────────────────────────────── */
.animate-fade-up   { animation: v-fade-up .7s ease-out both; }
.animate-fade-up-2 { animation: v-fade-up .7s ease-out .15s both; }
.animate-fade-up-3 { animation: v-fade-up .7s ease-out .30s both; }
.animate-fade-up-4 { animation: v-fade-up .7s ease-out .45s both; }
.animate-pulse-dot   { animation: v-pulse-dot 2.4s ease-in-out infinite; }
.animate-pulse-dot-2 { animation: v-pulse-dot 2.4s ease-in-out infinite .8s; }
.animate-pulse-dot-3 { animation: v-pulse-dot 2.4s ease-in-out infinite 1.6s; }

/* ── Nav links con subrayado animado ──────────────────────────────────── */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: 0; left: .75rem; right: .75rem;
  height: 1px; background: var(--v-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after,
.nav-link.current-menu-item::after { transform: scaleX(1); }
.nav-link.current-menu-item { color: var(--v-gold); }

/* ── Links de footer ──────────────────────────────────────────────────── */
.footer-link {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: .6875rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--v-txt-tertiary);
  transition: color .25s ease;
  display: block; padding-block: .35rem;
}
.footer-link:hover { color: var(--v-gold); }

/* ── Componentes: Botones ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--v-gold); color: var(--v-obsidian);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .875rem 1.75rem; border-radius: 4px;
  border: none; cursor: pointer;
  transition: background .3s;
}
.btn-primary:hover { background: var(--v-gold-bright); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid var(--v-gold); color: var(--v-gold); background: transparent;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .875rem 1.75rem; border-radius: 4px;
  cursor: pointer; transition: all .3s;
}
.btn-secondary:hover { background: rgba(212,175,55,.1); }

.btn-ghost {
  color: var(--v-txt-secondary); background: transparent; border: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer; transition: color .3s;
}
.btn-ghost:hover { color: var(--v-gold); }

/* ── Componentes: Tarjetas ────────────────────────────────────────────── */
.card-gold {
  background: var(--v-surface);
  border: 1px solid rgba(212,175,55,.10);
  border-radius: 8px; padding: 2rem;
  transition: border-color .3s;
}
.card-gold:hover { border-color: rgba(212,175,55,.30); }

/* ── Componentes: Inputs ──────────────────────────────────────────────── */
.input-gold {
  display: block; width: 100%;
  padding: .75rem 1rem;
  background: var(--v-surface);
  border: 1px solid var(--v-border); border-radius: 4px;
  color: var(--v-txt-primary);
  font-family: 'Hanken Grotesk', sans-serif; font-size: .875rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.input-gold::placeholder { color: rgba(156,163,175,.5); }
.input-gold:focus { border-color: var(--v-gold); box-shadow: 0 0 0 1px var(--v-gold); }
.input-gold.error { border-color: #f43f5e; box-shadow: 0 0 0 1px #f43f5e; }
select.input-gold { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23D4AF37' stroke-width='1.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}

/* ── Scrollbar y selección ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--v-obsidian); }
::-webkit-scrollbar-thumb { background: var(--v-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--v-gold); }
::selection { background: rgba(212,175,55,.25); color: var(--v-txt-primary); }

/* ── Skip link (accesibilidad WP) ─────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; z-index: 999999;
  padding: 1rem 1.5rem; background: var(--v-gold); color: var(--v-obsidian);
  font-family: 'Hanken Grotesk', sans-serif; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── Contenido del editor WordPress (páginas genéricas) ───────────────── */
.entry-content h2 { font-family:'EB Garamond',serif; font-size:2rem; font-weight:500; color:var(--v-txt-primary); margin:2.5rem 0 1rem; letter-spacing:-.02em; }
.entry-content h3 { font-family:'EB Garamond',serif; font-size:1.5rem; font-weight:500; color:var(--v-txt-primary); margin:2rem 0 .75rem; }
.entry-content p  { font-size:.9375rem; font-weight:300; line-height:1.75; color:var(--v-txt-secondary); margin-bottom:1.25rem; }
.entry-content a  { color:var(--v-gold); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul, .entry-content ol { margin:0 0 1.5rem 1.25rem; color:var(--v-txt-secondary); font-weight:300; font-size:.9375rem; line-height:1.75; }
.entry-content ul { list-style:disc; } .entry-content ol { list-style:decimal; }
.entry-content li { margin-bottom:.5rem; }
.entry-content blockquote { border-left:2px solid var(--v-gold); padding-left:1.5rem; margin:2rem 0; font-family:'EB Garamond',serif; font-style:italic; font-size:1.125rem; color:var(--v-txt-secondary); }
.entry-content img { border-radius:8px; border:1px solid rgba(212,175,55,.1); }
.entry-content table { width:100%; border-collapse:collapse; margin:2rem 0; font-size:.875rem; }
.entry-content th, .entry-content td { border:1px solid var(--v-border); padding:.75rem 1rem; text-align:left; }
.entry-content th { background:var(--v-surface); color:var(--v-gold); text-transform:uppercase; font-size:.6875rem; letter-spacing:.1em; }

/* ── Alineaciones WP core ─────────────────────────────────────────────── */
.alignleft  { float:left;  margin:0 1.5rem 1rem 0; }
.alignright { float:right; margin:0 0 1rem 1.5rem; }
.aligncenter{ display:block; margin-inline:auto; }
.screen-reader-text {
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; word-wrap:normal;
}

/* ── Notificaciones de formulario ─────────────────────────────────────── */
.form-notice { padding:.875rem 1rem; border-radius:4px; font-size:.8125rem; margin-bottom:1rem; }
.form-notice.is-error   { background:rgba(244,63,94,.1);  border:1px solid rgba(244,63,94,.3);  color:#fda4af; }
.form-notice.is-success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#6ee7b7; }