/* ═══════════════════════════════════════════════════════════════
   AMFA V3 — "Asphalt Editorial" · Premium Design System
   Inspiración: patrones editorial/news premium (collectui)
   Paleta: asfalto nocturno + dorado champán (marca AMFA)
   ═══════════════════════════════════════════════════════════════ */

/* Fuentes autoalojadas (sin peticiones a Google · RGPD). Subconjunto latin. */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('fonts/fraunces.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url('fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('fonts/manrope.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
}

/* Transición nativa entre páginas (sin retrasar la navegación) */
@view-transition { navigation: auto; }

/* ═══════════ 1 · RESET & TOKENS ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Asphalt palette */
  --void:    #07070C;
  --ink:     #0C0C13;
  --surface: #12121B;
  --panel:   #171722;
  --card:    #1D1D29;
  --raised:  #242433;

  /* Lines */
  --line:       rgba(236,232,220,.08);
  --line-hover: rgba(236,232,220,.16);
  --line-gold:  rgba(201,168,76,.28);

  /* Champagne gold (marca) */
  --gold:    #C9A84C;
  --gold-lt: #E8D189;
  --gold-dk: #8F742E;
  --gold-soft: rgba(201,168,76,.12);
  --gold-faint: rgba(201,168,76,.05);

  /* Text */
  --paper:  #F5F2E9;
  --white:  #F1F1F7;
  --silver: #D6D6E2;
  --muted:  #9A9AB0;
  --faint:  #808098; /* 4,6:1 sobre los fondos oscuros (WCAG AA) */

  /* Fonts */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  /* Spacing */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-28:112px;

  /* Radius */
  --r-sm:3px; --r-md:6px; --r-lg:12px; --r-xl:20px; --r-pill:999px;

  /* Shadows */
  --shadow-md: 0 10px 40px rgba(0,0,0,.5);
  --shadow-lg: 0 28px 80px rgba(0,0,0,.6);
  --shadow-gold: 0 12px 44px rgba(201,168,76,.22);

  /* Motion */
  --ease-out:  cubic-bezier(.19,1,.22,1);
  --ease-silk: cubic-bezier(.65,.05,.36,1);
  --ease-expo: cubic-bezier(.87,0,.13,1);
}

html { scroll-behavior: smooth; }

/* Los anclajes (#asociacion…) aterrizan dejando hueco para el header fijo (ticker 44px + navbar 78px) */
#contenido, #stats, #asociacion, #actualidad, #contacto, #boletin { scroll-margin-top: 132px; }

body {
  font-family: var(--font-body);
  background: var(--void);
  color: var(--silver);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--gold); color: var(--void); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #2A2A3A; border-radius: 8px; border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dk); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ═══════════ 2 · FILM GRAIN GLOBAL ═══════════ */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2000;
  animation: grainShift 9s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2%,1%); }
  40% { transform: translate(1%,-2%); }
  60% { transform: translate(-1%,2%); }
  80% { transform: translate(2%,-1%); }
}

/* ═══════════ 3 · ENLACE "SALTAR AL CONTENIDO" ═══════════ */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 5000;
  padding: 10px 18px;
  background: var(--gold); color: var(--void);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ═══════════ 4 · CURSOR PERSONALIZADO ═══════════ */
#cursor-dot, #cursor-ring { display: none; }
.has-cursor #cursor-dot, .has-cursor #cursor-ring { display: block; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
#cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 4000;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  transform: translate(-50%,-50%);
}
#cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 3999;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line-gold);
  pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width .3s var(--ease-out), height .3s var(--ease-out),
              border-color .3s, background .3s, opacity .3s;
}
#cursor-ring.cursor-hover {
  width: 64px; height: 64px;
  border-color: var(--gold);
  background: rgba(201,168,76,.08);
}
#cursor-ring.cursor-press { width: 24px; height: 24px; }

/* ═══════════ 5 · BARRA DE PROGRESO ═══════════ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1500;
  background: transparent;
}
.scroll-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold), var(--gold-lt));
  box-shadow: 0 0 12px rgba(201,168,76,.5);
}

/* ═══════════ 7 · TICKER · ÚLTIMA HORA ═══════════ */
.ticker {
  position: relative; z-index: 1300;
  display: flex; align-items: stretch;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  height: 44px;
  overflow: hidden;
}
.ticker-label {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--gold-dk), var(--gold) 55%, var(--gold-lt));
  color: var(--void);
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  padding: 0 22px; text-indent: .28em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  padding-right: 30px;
}
.tl-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--void);
  animation: tlBlink 1.2s ease-in-out infinite;
}
@keyframes tlBlink { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .3; transform: scale(.7);} }
.ticker-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-track {
  display: flex; width: max-content;
  animation: tickerScroll 55s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }
.ticker-group { display: flex; align-items: center; }
.ticker-item {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap; padding: 0 14px;
}
.ticker-item b { color: var(--gold); font-weight: 500; margin-right: 8px; }
.ticker-sep { color: var(--gold-dk); font-size: .6rem; }

/* ═══════════ 8 · NAVBAR ═══════════ */
.site-header {
  position: fixed; top: 44px; left: 0; right: 0; z-index: 1400;
  transition: top .45s var(--ease-out), background .45s, border-color .45s,
              backdrop-filter .45s, box-shadow .45s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  top: 0;
  background: rgba(8,8,14,.78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  height: 78px;
  padding: 0 var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.site-header.scrolled .nav-inner { height: 64px; }
.nav-inner { transition: height .45s var(--ease-out); }

.nav-logo { flex-shrink: 0; display: block; }
.nav-logo img {
  height: 46px; width: auto;
  background: rgba(255,255,255,.94);
  border-radius: var(--r-md);
  padding: 6px 16px;
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.nav-logo:hover img {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--line-gold), var(--shadow-gold);
}

.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav-links a {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 18px;
  transition: color .3s;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 18px; right: 18px; bottom: 4px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--gold); }
.nav-links a.active::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-4); }

/* Burger */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  align-items: center;
  transition: border-color .3s, background .3s;
  z-index: 1700;
}
.nav-burger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--silver);
  transition: transform .4s var(--ease-out), opacity .3s, width .3s;
}
.nav-burger:hover { border-color: var(--line-gold); background: var(--gold-faint); }
.nav-burger:hover span { background: var(--gold); }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Menú móvil */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1600;
  background: rgba(7,7,12,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-silk), visibility .5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mm-inner { width: min(520px, 88vw); display: flex; flex-direction: column; gap: var(--sp-8); }
.mm-link {
  display: flex; align-items: baseline; gap: var(--sp-5);
  text-decoration: none;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.mobile-menu.open .mm-link { opacity: 1; transform: none; }
.mobile-menu.open .mm-link:nth-child(1) { transition-delay: .12s; }
.mobile-menu.open .mm-link:nth-child(2) { transition-delay: .2s; }
.mobile-menu.open .mm-link:nth-child(3) { transition-delay: .28s; }
.mobile-menu.open .mm-link:nth-child(4) { transition-delay: .36s; }
.mm-idx { font-family: var(--font-mono); font-size: .7rem; color: var(--gold); letter-spacing: .2em; }
.mm-txt {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 500;
  color: var(--paper); line-height: 1.1;
  transition: color .3s, letter-spacing .4s;
}
.mm-link:hover .mm-txt { color: var(--gold); }
.mm-foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  color: var(--faint);
  opacity: 0; transition: opacity .6s .45s;
}
.mobile-menu.open .mm-foot { opacity: 1; }
.mm-foot a { color: var(--gold); text-decoration: none; }
.mm-foot a:hover { text-decoration: underline; }

/* ═══════════ 9 · BOTONES PREMIUM ═══════════ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 30px;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: color .4s, border-color .4s, transform .35s var(--ease-out), box-shadow .35s;
  isolation: isolate;
  white-space: nowrap;
}
.btn-fill {
  position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%);
  transition: transform .5s var(--ease-expo);
}
.btn:hover .btn-fill { transform: translateY(0); }
.btn:active { transform: scale(.97); }
.btn-ico { flex-shrink: 0; transition: transform .4s var(--ease-out); }
.btn:hover .btn-ico { transform: translateX(5px); }
.btn .btn-ico.up:hover, .btn:hover .btn-ico.up { transform: translateY(-2px); }

/* Dorado sólido */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-dk) 0%, var(--gold) 45%, var(--gold-lt) 100%);
  color: var(--void);
  box-shadow: 0 6px 24px rgba(201,168,76,.18);
}
.btn-gold .btn-fill { background: var(--paper); }
.btn-gold:hover { box-shadow: var(--shadow-gold); transform: translateY(-3px); }

/* Outline */
.btn-outline {
  border: 1px solid var(--line-hover);
  color: var(--silver);
  background: transparent;
}
.btn-outline .btn-fill { background: linear-gradient(135deg, var(--gold-dk), var(--gold) 55%, var(--gold-lt)); }
.btn-outline:hover { color: var(--void); border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-gold); }

/* Tamaño nav */
.btn-nav { padding: 12px 22px; font-size: .62rem; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  position: relative;
}
.link-arrow::after {
  content: '';
  position: absolute; bottom: -6px; left: 0; right: 0; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { transition: transform .4s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════ 10 · HERO INDEX ═══════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 160px var(--sp-6) 120px;
  overflow: hidden;
  background: var(--void);
}

/* Carretera SVG */
.hero-visual {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-visual svg { width: 100%; height: 100%; display: block; }
.road-rays line { stroke: rgba(236,232,220,.05); stroke-width: 1; }
.horizon-glow ellipse { fill: url(#heroGlow); }
.road-dash {
  stroke: var(--gold);
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(201,168,76,.55));
}
.road-dash.d1 { stroke-width: 3; stroke-dasharray: 42 66; animation: dashMove 1.15s linear infinite; opacity: .95; }
.road-dash.d2 { stroke-width: 2; stroke-dasharray: 24 52; animation: dashMove 2.1s linear infinite; opacity: .5; }
.road-dash.d3 { stroke-width: 2; stroke-dasharray: 24 52; animation: dashMove 2.1s linear infinite; opacity: .5; }
.road-dash.d4 { stroke-width: 1.4; stroke-dasharray: 14 40; animation: dashMove 3.2s linear infinite; opacity: .3; }
@keyframes dashMove { to { stroke-dashoffset: -216; } }
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 42% at 50% 46%, rgba(201,168,76,.09), transparent 70%),
    linear-gradient(180deg, var(--void) 0%, transparent 22%, transparent 60%, var(--void) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto;
  width: 100%;
}

/* Entrada por etapas */
/* Solo se oculta si hay JS (clase .js en <html>): sin JS el contenido se ve siempre */
.js .h-anim {
  opacity: 0; transform: translateY(46px);
  transition: opacity 1.1s var(--ease-silk), transform 1.1s var(--ease-out);
  transition-delay: var(--hd, 0s);
}
body.ready .h-anim { opacity: 1; transform: none; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-6);
}
.hero-eyebrow::before {
  content: '';
  width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8.2vw, 7.2rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--paper);
  max-width: 15ch;
}
.hero-title .it {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(100deg, var(--gold-dk) 0%, var(--gold-lt) 38%, var(--gold) 62%, var(--gold-dk) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 6s linear 1.6s infinite;
  padding-right: .08em;
}
@keyframes goldShimmer { 0% { background-position: 100% 0; } 100% { background-position: -120% 0; } }

.hero-sub {
  max-width: 54ch;
  font-size: 1.06rem; font-weight: 300;
  color: var(--muted);
  letter-spacing: .01em;
  margin-top: var(--sp-8);
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.hero-meta {
  display: flex; align-items: center; gap: var(--sp-8);
  margin-top: var(--sp-16);
  flex-wrap: wrap;
}
.hm-item {
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
  display: flex; align-items: center; gap: 10px;
}
.hm-item::before {
  content: '';
  width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--gold-dk);
}
.scroll-cue {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--faint); text-decoration: none;
  transition: color .3s;
}
.scroll-cue:hover { color: var(--gold); }
.sc-line {
  width: 54px; height: 1px; background: var(--line-hover);
  position: relative; overflow: hidden;
}
.sc-line::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
  animation: scSweep 2.2s var(--ease-silk) infinite;
}
@keyframes scSweep {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* Texto vertical lateral */
.hero-side {
  position: absolute; right: 38px; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--faint);
  display: flex; align-items: center; gap: 18px;
}
.hero-side::after {
  content: '';
  width: 1px; height: 72px;
  background: linear-gradient(180deg, transparent, var(--gold-dk), transparent);
}

/* Badge orbital */
.orbit-badge {
  position: absolute; right: 8%; bottom: 12%;
  width: 128px; height: 128px;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.orbit-badge svg.ring { position: absolute; inset: 0; animation: orbitSpin 22s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.orbit-badge text {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .3em;
  fill: var(--muted); text-transform: uppercase;
}
.orbit-center {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-gold);
  background: rgba(201,168,76,.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  transition: background .3s, transform .3s var(--ease-out);
}
.orbit-badge:hover .orbit-center { background: var(--gold-soft); transform: scale(1.08); }

/* ═══════════ 11 · PAGE HERO (páginas internas) ═══════════ */
.page-hero {
  position: relative;
  padding: 220px var(--sp-6) 90px;
  background: var(--void);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 82% 20%, rgba(201,168,76,.07), transparent 65%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(201,168,76,.04), transparent 60%);
}
.page-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold) 30%, var(--line-gold) 70%, transparent);
}
.ph-inner { position: relative; max-width: 1280px; margin: 0 auto; z-index: 1; }
.ph-breadcrumb {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--faint); text-decoration: none;
  margin-bottom: var(--sp-6);
}
.ph-breadcrumb b { color: var(--gold); font-weight: 500; }
.ph-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.04; letter-spacing: -.01em;
  color: var(--paper);
  max-width: 18ch;
}
.ph-title .it { font-style: italic; font-weight: 300; color: var(--gold); }
.ph-sub {
  max-width: 58ch;
  color: var(--muted); font-weight: 300;
  margin-top: var(--sp-6);
  font-size: 1.02rem;
}
.ph-tools {
  margin-top: var(--sp-10);
  display: flex; flex-direction: column; gap: var(--sp-6);
}

/* ═══════════ 12 · SECCIONES BASE ═══════════ */
.section { position: relative; padding: var(--sp-28) var(--sp-6); }
.section.alt { background: var(--ink); }
.section.darker { background: var(--void); }
.container { max-width: 1280px; margin: 0 auto; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
  flex-wrap: wrap;
}
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-5);
}
.kicker::after {
  content: '';
  width: 52px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.01em;
  color: var(--paper);
}
.section-title .it { font-style: italic; font-weight: 300; color: var(--gold); }
.section-lead {
  margin-top: var(--sp-5);
  max-width: 62ch;
  color: var(--muted); font-weight: 300;
  font-size: 1rem;
}
.head-action { flex-shrink: 0; padding-bottom: 6px; }

/* ═══════════ 13 · SCROLL REVEAL ═══════════ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s var(--ease-silk) var(--d,0s), transform 1s var(--ease-out) var(--d,0s);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-56px); }
.js [data-reveal="right"] { transform: translateX(56px); }
.js [data-reveal="zoom"]  { transform: scale(.92); }
.js [data-reveal].revealed { opacity: 1; transform: none; will-change: auto; }

/* ═══════════ 14 · STATS ═══════════ */
.stats {
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.45), transparent);
}
.stats-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: var(--sp-12) var(--sp-8);
  border-right: 1px solid var(--line);
  text-align: center;
  position: relative;
  transition: background .35s;
}
.stat:last-child { border-right: none; }
.stat:hover { background: var(--gold-faint); }
.stat::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width .5s var(--ease-out);
}
.stat:hover::after { width: 60%; }
.stat-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  line-height: 1;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.stat-suffix { font-size: .55em; }
.stat-label {
  margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}

/* ═══════════ 15 · QUIÉNES SOMOS ═══════════ */
.about-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-16);
  align-items: start;
}
.about-copy { position: sticky; top: 130px; }
.about-copy p {
  color: var(--muted); font-weight: 300;
  margin-bottom: var(--sp-5);
  font-size: 1.02rem;
}
.about-copy p strong { color: var(--silver); font-weight: 600; }
.about-quote {
  margin-top: var(--sp-8);
  padding-left: var(--sp-6);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 1.3rem; line-height: 1.5;
  color: var(--gold-lt);
}
.about-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
.about-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.about-card::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out);
}
.about-card:hover {
  transform: translateX(8px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow-md);
}
.about-card:hover::before { transform: scaleY(1); }
.ac-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--sp-3);
}
.ac-tag svg { opacity: .8; }
.about-card h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.35rem; color: var(--paper);
  margin-bottom: var(--sp-2);
}
.about-card p { font-size: .9rem; color: var(--muted); font-weight: 300; }

/* ═══════════ 16 · PILARES ═══════════ */
.pillars-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.pillar-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-6) var(--sp-10);
  overflow: hidden;
  transition: transform .45s var(--ease-out), border-color .45s, background .45s, box-shadow .45s;
  cursor: default;
}
.pillar-card::before {
  content: '';
  position: absolute; top: 0; left: -110%; right: 110%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: left .6s var(--ease-silk), right .6s var(--ease-silk);
}
.pillar-card:hover::before { left: 0; right: 0; }
.pillar-card:hover {
  transform: translateY(-10px);
  border-color: var(--line-gold);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.p-index {
  position: absolute; top: var(--sp-6); right: var(--sp-6);
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 1.5rem; color: rgba(201,168,76,.22);
  transition: color .4s;
}
.pillar-card:hover .p-index { color: var(--gold); }
.p-icon {
  width: 56px; height: 56px;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-md);
  background: var(--gold-faint);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-6);
  transition: background .4s, color .4s, transform .4s var(--ease-out), box-shadow .4s;
}
.pillar-card:hover .p-icon {
  background: linear-gradient(135deg, var(--gold-dk), var(--gold), var(--gold-lt));
  color: var(--void);
  transform: rotate(-6deg) scale(1.06);
  box-shadow: var(--shadow-gold);
}
.pillar-card h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.22rem; color: var(--paper);
  line-height: 1.25; margin-bottom: var(--sp-3);
  transition: color .3s;
}
.pillar-card p { font-size: .86rem; color: var(--muted); font-weight: 300; line-height: 1.75; }

/* ═══════════ 17 · SERVICIOS ═══════════ */
.services-band {
  margin-top: var(--sp-16);
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, var(--panel), var(--card) 70%);
  padding: var(--sp-12);
  overflow: hidden;
}
.services-band::after {
  content: '';
  position: absolute; bottom: -90px; right: -90px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft), transparent 70%);
  pointer-events: none;
}
.sb-head {
  display: flex; align-items: center; gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}
.sb-head h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--paper); white-space: nowrap;
}
.sb-head::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-gold), transparent);
}
.services-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.service-item {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  background: rgba(7,7,12,.45);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: transform .4s var(--ease-out), border-color .4s, background .4s;
  position: relative;
}
.service-item:hover {
  transform: translateY(-6px);
  border-color: var(--line-gold);
  background: rgba(201,168,76,.05);
}
.s-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: background .35s, color .35s, transform .35s;
}
.service-item:hover .s-icon {
  background: var(--gold); color: var(--void);
  transform: scale(1.1);
}
.service-item h4 {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: var(--sp-2);
}
.service-item p { font-size: .84rem; color: var(--muted); font-weight: 300; line-height: 1.7; }

/* ═══════════ 18 · NOTICIAS ═══════════ */
.news-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
#news-status {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  color: var(--faint); margin-top: var(--sp-8);
}

/* Grid home: destacada + 3 */
.home-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: var(--sp-4);
}
.home-news-grid .news-card.featured {
  grid-column: span 2;
  grid-row: span 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.home-news-grid .news-card.featured .nc-cover { height: 100%; min-height: 280px; }
.home-news-grid .news-card.featured .nc-body { padding: var(--sp-8); }
.home-news-grid .news-card.featured .nc-title { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.home-news-grid .news-card.featured .nc-excerpt { -webkit-line-clamp: 3; }

/* Página noticias: destacada horizontal */
.news-featured { margin-bottom: var(--sp-4); }
.news-featured .news-card.featured {
  display: grid; grid-template-columns: 1.1fr 1fr;
}
.news-featured .news-card.featured .nc-cover { height: 100%; min-height: 280px; }
.news-featured .news-card.featured .nc-body { padding: var(--sp-8); }
.news-featured .news-card.featured .nc-title { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }

.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

/* Tarjeta — compacta (patrón collectui: portada, chip de categoría,
   metadatos mínimos y flecha circular flotante) */
.news-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .45s var(--ease-out), border-color .45s, box-shadow .45s;
}
/* Línea de acento superior al hover */
.news-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--accent, var(--gold)), transparent);
  opacity: 0;
  transition: opacity .45s;
}
.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-gold);
  border-color: color-mix(in srgb, var(--accent, var(--gold)) 42%, transparent);
  box-shadow: var(--shadow-md);
}
.news-card:hover::after { opacity: 1; }

/* Acentos por categoría */
.news-card.acc-normativa      { --accent: #7C9EE8; }
.news-card.acc-juridico       { --accent: #D9A85E; }
.news-card.acc-inversion      { --accent: #E4C168; }
.news-card.acc-sostenibilidad { --accent: #7AD3A1; }
.news-card.acc-innovacion     { --accent: #B49AE8; }
.news-card.acc-jornadas       { --accent: #6EC8D8; }
.news-card.acc-actualidad     { --accent: #C9A84C; }

.nc-cover {
  position: relative; overflow: hidden;
  height: 150px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}
.nc-cover::before {
  /* patrón de líneas de carretera */
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.025) 26px 27px, transparent 27px 60px);
  opacity: .7;
  transition: transform .8s var(--ease-out), opacity .5s;
}
.news-card:hover .nc-cover::before { transform: translateX(-22px) scale(1.06); opacity: 1; }
.nc-watermark {
  position: absolute; right: -20px; bottom: -22px;
  width: 112px; height: 112px;
  color: rgba(255,255,255,.1);
  transform: rotate(-8deg);
  transition: transform .8s var(--ease-out), color .5s;
}
.news-card:hover .nc-watermark { transform: rotate(-2deg) scale(1.08); color: rgba(201,168,76,.28); }
.nc-watermark svg { width: 100%; height: 100%; }
.nc-num {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 1.05rem; color: rgba(255,255,255,.55);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  z-index: 2;
}
/* Chip de categoría con punto de color */
.nc-cat {
  position: absolute; bottom: 12px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .56rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(7,7,12,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  padding: 5px 11px; border-radius: var(--r-pill);
  z-index: 2;
}
.nc-cat::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent, var(--gold));
  box-shadow: 0 0 8px var(--accent, var(--gold));
  flex-shrink: 0;
}

/* Flecha circular flotante (sustituye al enlace inferior) */
.nc-go {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,7,12,.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(236,232,220,.22);
  color: var(--paper);
  opacity: 0; transform: translate(-6px, 6px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out),
              border-color .3s, color .3s, background .3s;
}
.nc-go svg { display: block; }
.news-card:hover .nc-go,
.news-card:focus-visible .nc-go { opacity: 1; transform: none; }
.news-card:hover .nc-go {
  border-color: var(--accent, var(--gold));
  color: var(--gold-lt);
  background: rgba(7,7,12,.85);
}
@media (hover: none) {
  .nc-go { opacity: 1; transform: none; }
}

/* Portada con imagen real */
.nc-cover.has-img { background: var(--surface); }
.nc-cover.has-img::before { display: none; }
.nc-cover.has-img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1) contrast(1.02) brightness(1.04);
  transition: transform .9s var(--ease-out), filter .6s;
}
.news-card:hover .nc-cover.has-img > img {
  transform: scale(1.08);
  filter: saturate(1.1) contrast(1.05) brightness(1.1);
}
/* tinte de categoría sobre la foto (código de color del sistema) */
.nc-tint {
  position: absolute; inset: 0;
  mix-blend-mode: multiply;
  opacity: .18;
  pointer-events: none;
}
/* degradado de legibilidad inferior */
.nc-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,12,.14) 0%, rgba(7,7,12,0) 34%, rgba(7,7,12,.42) 100%);
  pointer-events: none;
}
.nc-cover.has-img .nc-num { z-index: 2; text-shadow: 0 2px 18px rgba(0,0,0,.75); }
.nc-body {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 14px 16px 16px;
  gap: 7px;
}
.nc-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
  min-width: 0;
}
.nc-meta > * { min-width: 0; }
.nc-meta .nc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-dk); flex-shrink: 0; }
.nc-meta .nc-src {
  color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* tiempo de lectura solo en destacadas (metadatos compactos) */
.news-card:not(.featured) .nc-rt,
.news-card:not(.featured) .nc-dot-rt { display: none; }
.nc-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: .98rem; line-height: 1.38;
  color: var(--paper);
  transition: color .3s;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card:hover .nc-title { color: var(--gold-lt); }
.nc-excerpt {
  font-size: .8rem; line-height: 1.6; color: var(--muted); font-weight: 300;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-link {
  margin-top: auto; padding-top: var(--sp-3);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}
.nc-link svg { flex-shrink: 0; transition: transform .35s var(--ease-out); }
.news-card:hover .nc-link svg { transform: translateX(5px); }

/* Colores de categoría (portada) */
.cat-normativa     { background: linear-gradient(135deg, #141E33 0%, #1E2C48 55%, #2A3A5C 100%); }
.cat-juridico      { background: linear-gradient(135deg, #2B2114 0%, #43331C 55%, #5C4826 100%); }
.cat-inversion     { background: linear-gradient(135deg, #241A0C 0%, #3F2F11 55%, #5A4419 100%); }
.cat-sostenibilidad{ background: linear-gradient(135deg, #10221B 0%, #173629 55%, #1F4A38 100%); }
.cat-innovacion    { background: linear-gradient(135deg, #1D1533 0%, #2B1F4C 55%, #3B2C68 100%); }
.cat-jornadas      { background: linear-gradient(135deg, #101C2B 0%, #16293E 55%, #1D3652 100%); }
.cat-actualidad    { background: linear-gradient(135deg, #191922 0%, #232332 55%, #2D2D42 100%); }

/* Filtros */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease-out);
  text-decoration: none;
}
.chip:hover { color: var(--gold); border-color: var(--line-gold); transform: translateY(-2px); }
.chip.active {
  background: linear-gradient(135deg, var(--gold-dk), var(--gold) 60%, var(--gold-lt));
  color: var(--void); border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(201,168,76,.2);
}

/* Búsqueda */
.search-box {
  position: relative;
  max-width: 480px; width: 100%;
}
.search-box svg {
  position: absolute; left: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--faint); pointer-events: none;
}
.search-box input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 15px 22px 15px 48px;
  color: var(--silver);
  font-family: var(--font-body); font-size: .92rem; font-weight: 300;
  transition: border-color .3s, box-shadow .3s, background .3s;
  outline: none;
}
.search-box input::placeholder { color: var(--faint); }
.search-box input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,.1);
  background: var(--panel);
}

/* Estado vacío */
.news-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-20) var(--sp-6);
  border: 1px dashed var(--line-hover);
  border-radius: var(--r-xl);
  color: var(--muted);
}
.news-empty svg { width: 34px; height: 34px; color: var(--gold-dk); margin: 0 auto var(--sp-5); }
.news-empty h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--silver); margin-bottom: var(--sp-2); }
.news-empty p { font-size: .88rem; margin-bottom: var(--sp-6); }

/* ═══════════ 19 · BANDA CTA ═══════════ */
.cta-band {
  position: relative;
  padding: var(--sp-28) var(--sp-6);
  background: var(--void);
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 50% 115%, rgba(201,168,76,.14), transparent 65%),
    radial-gradient(ellipse 30% 40% at 15% 0%, rgba(201,168,76,.05), transparent 60%);
}
.cta-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 560px; height: 560px;
  color: var(--gold);
  opacity: .045;
  pointer-events: none;
  animation: ctaSpin 60s linear infinite;
}
@keyframes ctaSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.cta-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.cta-kicker {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-6);
}
.cta-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1.06; letter-spacing: -.01em;
  color: var(--paper);
}
.cta-title .it { font-style: italic; font-weight: 300; color: var(--gold); }
.cta-sub { color: var(--muted); font-weight: 300; max-width: 56ch; margin: var(--sp-6) auto 0; }
.cta-actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-10); }

/* ═══════════ 20 · CONTACTO ═══════════ */
.contact-grid {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: var(--sp-12);
  align-items: start;
}
.contact-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-card {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform .35s var(--ease-out), border-color .35s, background .35s;
}
.contact-card:hover {
  transform: translateX(6px);
  border-color: var(--line-gold);
  background: var(--card);
}
.cc-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-md);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-faint);
  transition: background .35s, color .35s;
}
.contact-card:hover .cc-icon { background: var(--gold); color: var(--void); }
.cc-txt h2 {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.cc-txt p, .cc-txt a {
  font-size: .95rem; color: var(--silver);
  text-decoration: none; font-weight: 400; line-height: 1.55;
}
.cc-txt a { transition: color .25s; border-bottom: 1px solid transparent; }
.cc-txt a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.map-wrap {
  margin-top: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  filter: grayscale(1) invert(.92) hue-rotate(180deg) brightness(.85) contrast(.9);
  transition: filter .5s;
}
.map-wrap:hover { filter: grayscale(.1) invert(0) hue-rotate(0) brightness(1) contrast(1); }
.map-wrap iframe { display: block; width: 100%; height: 250px; border: none; }

/* Formulario */
.form-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-lg);
  padding: var(--sp-10);
  position: relative;
}
.form-head { margin-bottom: var(--sp-8); }
.form-head h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.7rem; color: var(--paper);
}
.form-head p { font-size: .86rem; color: var(--muted); margin-top: 6px; font-weight: 300; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field { position: relative; }
.field.full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 16px 10px;
  color: var(--white);
  font-family: var(--font-body); font-size: .92rem; font-weight: 400;
  outline: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,.1);
  background: var(--ink);
}
.field label {
  position: absolute; left: 17px; top: 17px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
  transition: top .3s var(--ease-out), font-size .3s, color .3s, letter-spacing .3s;
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  top: 8px; font-size: .56rem; color: var(--gold); letter-spacing: .22em;
}
.field input::placeholder, .field textarea::placeholder { color: transparent; }

/* Select con etiqueta estática */
.field-select label {
  position: static; display: block;
  font-size: .58rem; letter-spacing: .22em; color: var(--muted);
  margin-bottom: var(--sp-2);
}
.field-select select {
  width: 100%; appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 44px 14px 16px;
  color: var(--white);
  font-family: var(--font-body); font-size: .92rem;
  outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.field-select select option { background: var(--surface); color: var(--white); }

.form-actions { margin-top: var(--sp-6); }
.form-actions .btn { width: 100%; }
.form-success {
  display: none;
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: rgba(110,210,140,.08);
  border: 1px solid rgba(110,210,140,.3);
  border-radius: var(--r-md);
  color: #8FE0AC;
  font-size: .88rem;
  text-align: center;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.form-success.show { display: flex; animation: successIn .5s var(--ease-out); }
@keyframes successIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.form-note {
  margin-top: var(--sp-4);
  font-size: .72rem; color: var(--faint);
  text-align: center;
}
.form-note a, .consent a, .nl-legal a { color: var(--gold); }

/* Consentimiento RGPD */
.consent {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-5);
  font-size: .8rem; color: var(--muted); font-weight: 300; line-height: 1.55;
  cursor: pointer;
}
.consent input {
  flex-shrink: 0;
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* Campo trampa anti-spam: invisible para personas, visible para bots */
.hp-field {
  position: absolute !important;
  left: -10000px; width: 1px; height: 1px; overflow: hidden;
}

/* Estados de envío */
.form-actions .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.form-actions .btn[aria-busy="true"] .btn-ico { animation: spin .8s linear infinite; }
.form-error {
  display: none;
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: rgba(224,168,127,.08);
  border: 1px solid rgba(224,168,127,.35);
  border-radius: var(--r-md);
  color: #E0A87F;
  font-size: .86rem;
  text-align: center;
}
.form-error.show { display: block; animation: successIn .5s var(--ease-out); }
.form-error a { color: inherit; }

/* Mapa bajo demanda: no se contacta con OpenStreetMap hasta que el usuario lo pide */
.map-load {
  width: 100%; height: 250px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--surface);
  color: var(--silver);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
}
.map-load small {
  font-family: var(--font-body); font-size: .74rem; letter-spacing: 0; text-transform: none;
  color: var(--faint); max-width: 36ch; text-align: center;
}
.map-load:hover { color: var(--gold); }

/* ═══════════ 21 · FOOTER ═══════════ */
.site-footer {
  position: relative;
  background: var(--ink);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.4), transparent);
}
.footer-top {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-20) var(--sp-6) var(--sp-12);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--sp-16);
}
.f-brand img {
  height: 52px; width: auto;
  background: rgba(255,255,255,.94);
  border-radius: var(--r-md);
  padding: 6px 16px;
  margin-bottom: var(--sp-6);
}
.f-brand > p {
  font-size: .88rem; color: var(--muted); font-weight: 300;
  max-width: 40ch; margin-bottom: var(--sp-8);
}
.f-col h2 {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-5);
}
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.f-col a {
  font-size: .88rem; color: var(--muted); font-weight: 300;
  text-decoration: none;
  position: relative;
  transition: color .3s, padding-left .3s var(--ease-out);
}
.f-col a::before {
  content: '→';
  position: absolute; left: -4px;
  opacity: 0; color: var(--gold);
  transition: opacity .3s, left .3s var(--ease-out);
}
.f-col a:hover { color: var(--white); padding-left: 20px; }
.f-col a:hover::before { opacity: 1; left: 0; }
.f-col .f-contact-item {
  font-size: .86rem; color: var(--muted); font-weight: 300;
  display: flex; flex-direction: column; gap: 2px;
}
.f-col .f-contact-item a { display: inline; font-size: .86rem; }
.f-col .f-contact-item a::before { display: none; }
.f-col .f-contact-item a:hover { padding-left: 0; }

/* Newsletter */
.newsletter { max-width: 380px; }
.nl-label {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-4);
}
.nl-form { display: flex; gap: 0; }
.nl-form input {
  flex: 1; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line); border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  padding: 13px 16px;
  color: var(--white);
  font-family: var(--font-body); font-size: .84rem;
  outline: none;
  transition: border-color .3s;
}
.nl-form input:focus { border-color: var(--gold); }
.nl-form button {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold-dk), var(--gold) 60%, var(--gold-lt));
  color: var(--void);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 0 18px;
  display: flex; align-items: center;
  transition: filter .3s;
}
.nl-form button:hover { filter: brightness(1.12); }
.nl-msg {
  display: none;
  margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em;
  color: #8FE0AC;
}
.nl-msg.show { display: block; animation: successIn .4s var(--ease-out); }
.nl-msg.is-error { color: #E0A87F; }
.nl-legal {
  margin-top: var(--sp-3);
  font-size: .7rem; color: var(--faint); font-weight: 300; line-height: 1.5;
}

/* Marca gigante */
.footer-giant {
  user-select: none; pointer-events: none;
  line-height: .78;
  text-align: center;
  transform: translateY(18%);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(6rem, 21vw, 19rem);
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,168,76,.14);
  position: relative;
}
.footer-bottom {
  position: relative;
  border-top: 1px solid var(--line);
  background: rgba(7,7,12,.6);
}
.footer-bottom-inner {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-5) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.footer-legal { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.footer-legal a { color: var(--faint); text-decoration: none; transition: color .3s; }
.footer-legal a:hover { color: var(--gold); }
.footer-credit a { color: inherit; text-decoration: none; transition: color .3s; }
.footer-credit a:hover { color: var(--gold); }

/* ═══════════ 22 · BACK TO TOP ═══════════ */
.to-top {
  position: fixed; right: 28px; bottom: 28px;
  width: 54px; height: 54px;
  border-radius: 50%;
  z-index: 1450;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,19,.8);
  backdrop-filter: blur(12px);
  color: var(--gold);
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.9);
  transition: opacity .45s, visibility .45s, transform .45s var(--ease-out), background .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: var(--void); }
.to-top svg.ring {
  position: absolute; inset: -1px;
  transform: rotate(-90deg);
}
.to-top .ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .2s linear;
}
.to-top:hover .ring circle { stroke: var(--void); }

/* ═══════════ 22b · PÁGINAS LEGALES Y 404 ═══════════ */
.legal {
  max-width: 78ch; margin: 0 auto;
  color: var(--silver); font-weight: 300;
}
.legal h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.6rem; line-height: 1.25; color: var(--paper);
  margin: var(--sp-12) 0 var(--sp-4);
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: var(--sp-8) 0 var(--sp-3);
}
.legal p, .legal li { margin-bottom: var(--sp-4); }
.legal ul { padding-left: 1.2em; }
.legal a { color: var(--gold); }
.legal strong { color: var(--paper); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0 var(--sp-6); font-size: .88rem; }
.legal th, .legal td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--paper); font-weight: 600; }
.legal .legal-updated {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.error-page { text-align: center; }
.error-page .ph-title, .error-page .ph-sub { margin-left: auto; margin-right: auto; }
.error-code {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(6rem, 18vw, 12rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(201,168,76,.4);
}
.error-page .hero-ctas { justify-content: center; margin-top: var(--sp-10); }

/* ═══════════ 23 · RESPONSIVE ═══════════ */
@media (max-width: 1120px) {
  .nav-links, .nav-actions .btn-nav { display: none; }
  .nav-burger { display: flex; }
  .orbit-badge, .hero-side { display: none; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .home-news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .about-copy { position: static; }
}

@media (max-width: 900px) {
  .section { padding: var(--sp-20) var(--sp-5); }
  .hero { padding: 140px var(--sp-5) 100px; }
  .page-hero { padding: 190px var(--sp-5) 70px; }
  .home-news-grid .news-card.featured,
  .news-featured .news-card.featured {
    grid-template-columns: 1fr;
  }
  .home-news-grid .news-card.featured { grid-column: span 2; grid-row: auto; }
  .home-news-grid .news-card.featured .nc-cover,
  .news-featured .news-card.featured .nc-cover { min-height: 200px; height: 200px; }
  .home-news-grid .news-card.featured .nc-body,
  .news-featured .news-card.featured .nc-body { padding: var(--sp-6); }
  .contact-grid { grid-template-columns: 1fr; }
  .services-list { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid var(--line); padding: var(--sp-8) var(--sp-4); }
  .stat:nth-child(odd) { border-right: 1px solid var(--line); }
  .stat:nth-last-child(-n+2) { border-bottom: none; }
  .pillars-grid { grid-template-columns: 1fr; }
  .home-news-grid { grid-template-columns: 1fr; }
  .home-news-grid .news-card.featured { grid-column: auto; }
  .news-grid { grid-template-columns: 1fr; }
  .nc-cover { height: 140px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; padding-top: var(--sp-16); }
  .footer-bottom-inner { justify-content: center; text-align: center; }
  .ticker-label { padding: 0 26px 0 14px; letter-spacing: .16em; }
  .ticker { height: 40px; }
  .site-header { top: 40px; }
  .hero-ctas .btn { width: 100%; }
  .services-band { padding: var(--sp-8) var(--sp-5); }
  .form-card { padding: var(--sp-6) var(--sp-5); }
  .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* ═══════════ 24 · ACCESIBILIDAD · MOVIMIENTO REDUCIDO ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none; }
  .js [data-reveal], .js .h-anim { opacity: 1; transform: none; }
  .road-dash { display: none; }
}