/* ════════════════════════════════════════════════════════
  DESIGN TOKENS — luxpont.com brand system (tema claro)
════════════════════════════════════════════════════════ */
:root {
 /* "Apple white" page background — cleaner/less saturated than the old
    warm ivory (#f6f3ec had a heavier cream cast); cards use --card-white
    (pure white) with --shadow-card so they read as a distinct, elevated
    surface instead of blending into the page, matching the design
    reference in Downloads/Sugerencias sitio web paginas. */
 --marfil:    #fbfbfa; /* near-white; the old #faf8f4 read too beige/warm */
 --marfil-2:  #f1efe9;
 --card-white: #ffffff;
 --shadow-card: 0 1px 2px rgba(22,34,63,0.04), 0 14px 32px rgba(22,34,63,0.07);
 --navy:      #16223f;
 --navy-2:    #0f1830;
 --oro:       #b7944e;
 --oro-claro: #cdb072;
 --oro-texto: #8a6e2e; /* guide --gold; 4.66:1 on paper (AA pass) */ /* oro oscurecido, solo para texto: b7944e sobre marfil da 2.6:1 (falla AA); este da 5:1 */
 --texto:     #222a3d;
 --texto-sec: #5a6172;
 --linea:     rgba(22,34,63,.18);

 /* nombres heredados del sistema original, remapeados al tema claro */
 --black:  var(--navy);
 --black2: var(--navy-2);
 --white:  var(--marfil);
 --gold:   var(--oro);
 --gold2:  var(--oro-claro);
 --muted:  var(--texto-sec);
 --border: var(--linea);
 --light:  var(--marfil-2);

 /* Two typefaces, one message: Cormorant Garamond (classic serif) for headlines
    and the brand signature; DM Sans (geometric) for body, UI, navigation and
    text labels; DM Mono for figures, dates and technical data only.
    --serif/--accent/--mono kept as aliases so legacy usage maps to the new roles:
    text labels default to DM Sans; the few numeric elements opt into --data. */
 --display: 'Cormorant Garamond', 'Didot', Georgia, 'Times New Roman', serif;
 --sans:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
 --data:    'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
 --serif:  var(--display);
 --accent: var(--sans);
 --mono:   var(--data);   /* DM Mono: kickers, numbers, technical labels (typography guide) */
 --font-display: var(--display);
 --font-sans:    var(--sans);
 --font-mono:    var(--data);
 --ink:      var(--navy);
 --ink-soft: #4a5169;   /* lead / secondary text */
 --ink-faint:#8a8fa0;   /* metadata */
 --line:     var(--linea);

 --t-xs:  10px;
 --t-sm:  12px;
 --t-base: 14px;
 --t-md:  16px;
 --t-lg:  20px;
 --t-xl:  28px;
 --t-2xl: 36px;
 --t-3xl: 48px;
 --t-hero: clamp(32px, 4.4vw, 60px);

 --section: 108px;
 --gutter: 8vw;
 --hero-edge: clamp(20px, 2.2vw, 40px);
 --ease: cubic-bezier(0.16,1,0.3,1);
 --ease-snap: cubic-bezier(0.2,0.8,0.2,1);
}

/* ════════════════════════════════════════════════════════
  RESET & BASE
════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
 font-family: var(--sans); font-size:16px; font-weight:400;
 line-height:1.7; background:var(--white); color:var(--ink); overflow-x:hidden;
 -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { text-decoration:none; color:inherit; }
img, svg { display:block; max-width:100%; }
button { font-family:inherit; }
::selection { background:rgba(183,148,78,0.28); }
:focus-visible { outline:2px solid var(--oro-texto); outline-offset:2px; }
.skip-link { position:absolute; top:-60px; left:12px; z-index:10000; background:var(--black); color:var(--white); padding:10px 18px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; transition:top 0.2s; }
.skip-link:focus { top:12px; }

@media (prefers-reduced-motion: reduce) {
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ════════════════════════════════════════════════════════
  TYPOGRAPHY HELPERS
════════════════════════════════════════════════════════ */
.label { font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:0.24em; text-transform:uppercase; color:var(--oro-texto); margin-bottom:14px; }
.label.on-dark { color:var(--oro-texto); }
.h2-display { font-family:var(--serif); font-size:clamp(32px,4.5vw,56px); font-weight:600; letter-spacing:-0.005em; line-height:1.08; color:var(--ink); margin:0 0 clamp(18px,2.2vw,30px); }
/* MONOCROMO: los titulares van íntegros en marino (#16223f). <em> se conserva
   como marca semántica de la frase de remate, pero NO cambia de color — el
   titular bicolor marino+dorado leía a plantilla. El dorado queda reservado
   al kicker en mayúsculas (.label / .card-kicker / .tag / eyebrow). */
.h2-display em { font-family:inherit; font-style:normal; font-weight:inherit; font-stretch:inherit; letter-spacing:inherit; color:inherit; }
.h2-display.on-dark { color:var(--navy); }
/* El remate de un titular en oro. Dos variantes, según lo que pida el titular:
   el manifiesto del método sólo cambia de color, porque sus frases ya van cada
   una en su línea; los de Cobertura llevan además display:block, que es lo que
   baja el remate a una línea propia debajo de la frase que lo introduce.
   Van con mayor especificidad (.h2-display.x em) que la regla de arriba, que
   fuerza color:inherit y si no ganaría por orden. Y el oro es --oro-texto: el
   de marca no pasa AA como texto sobre marfil. */
.h2-display.metodo-manifesto em { color:var(--oro-texto); }
.h2-display.remate-oro em { display:block; color:var(--oro-texto); }
.body-text { font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.7; color:var(--ink-soft); }
.body-text p { margin-bottom:16px; }
.body-text p:last-child { margin-bottom:0; }
.body-text strong { color:var(--black); font-weight:500; }
.body-text em { font-style:italic; }

.reveal { opacity:0; transform:translateY(26px) scale(0.98); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); will-change:opacity, transform; }
.reveal.in { opacity:1; transform:none; }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ════════════════════════════════════════════════════════
  LANGUAGE DETECTION BANNER
════════════════════════════════════════════════════════ */
#lang-banner{ display:none; position:fixed; top:0; left:0; right:0; z-index:9100; background:var(--marfil-2); border-bottom:1px solid rgba(183,148,78,0.35); padding:10px var(--gutter); justify-content:center; align-items:center; gap:20px; font-family:var(--sans); font-size:12px; animation:slideDown 0.4s var(--ease) forwards; }
#lang-banner.visible{ display:flex; }
@keyframes slideDown{ from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} }
.lang-banner-text{ color:var(--texto-sec); }
.lang-banner-btn{ font-family:var(--accent); font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; background:transparent; color:var(--oro-texto); border:1px solid rgba(183,148,78,0.5); border-radius:999px; padding:6px 18px; cursor:pointer; transition:background 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap), transform 0.15s var(--ease-snap); text-decoration:none; white-space:nowrap; }
.lang-banner-btn:active{ transform:scale(0.96); transition-duration:0.1s; }
.lang-banner-btn:hover{ background:rgba(183,148,78,0.1); border-color:var(--gold); }
.lang-banner-close{ background:none; border:none; color:rgba(22,34,63,0.3); font-size:18px; cursor:pointer; padding:0 4px; line-height:1; flex-shrink:0; }
.lang-banner-close:hover{ color:rgba(22,34,63,0.7); }
body.lang-banner-active #nav{ top:57px; }

/* ════════════════════════════════════════════════════════
  NAV — Kuts style: fully transparent, no chrome over hero
════════════════════════════════════════════════════════ */
#nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  width:min(calc(100% - 32px), 1180px); height:60px; padding:0 10px 0 22px;
  border-radius:999px; border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(28px) saturate(200%); -webkit-backdrop-filter:blur(28px) saturate(200%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    0 1px 1px rgba(22,34,63,0.03),
    0 14px 34px rgba(22,34,63,0.1);
  transition:background 0.4s var(--ease-snap), border-color 0.4s var(--ease-snap), box-shadow 0.4s var(--ease-snap), width 0.4s var(--ease-snap);
}
#nav.scrolled{
  background:rgba(255,255,255,0.28);
  border-color:rgba(255,255,255,0.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(255,255,255,0.2),
    0 1px 1px rgba(22,34,63,0.05),
    0 18px 40px rgba(22,34,63,0.16);
}
.nav-logo{ display:flex; align-items:center; gap:11px; font-family:var(--serif); font-size:25px; letter-spacing:0.02em; font-weight:600; color:var(--navy); text-shadow:0 1px 3px rgba(246,243,236,0.7); transition:color 0.35s, text-shadow 0.35s; white-space:nowrap; }
.nav-logo img{ height:34px; width:auto; display:block; flex-shrink:0; }
#nav.scrolled .nav-logo{ color:var(--black); text-shadow:none; }
.nav-right{ display:flex; align-items:center; gap:clamp(20px,2.6vw,36px); }
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.2vw,32px); }
.nav-links a{ font-family:var(--accent); font-size:13px; font-weight:400; letter-spacing:0.16em; text-transform:uppercase; color:rgba(22,34,63,0.75); text-shadow:0 1px 3px rgba(246,243,236,0.6); transition:color 0.25s var(--ease-snap); white-space:nowrap; }
.nav-links a:hover{ color:var(--navy); }
#nav.scrolled .nav-links a{ color:rgba(22,34,63,0.55); text-shadow:none; }
#nav.scrolled .nav-links a:hover{ color:var(--black); }
.nav-langs{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; }
.nav-langs a{ color:rgba(22,34,63,0.55); text-shadow:0 1px 3px rgba(246,243,236,0.6); transition:color 0.2s; }
.nav-langs a.current{ color:var(--oro-texto); text-shadow:none; }
.nav-langs a:hover{ color:var(--navy); }
#nav.scrolled .nav-langs a{ color:rgba(22,34,63,0.35); text-shadow:none; }
#nav.scrolled .nav-langs a.current{ color:var(--oro-texto); }
#nav.scrolled .nav-langs a:hover{ color:var(--black); }
.nav-langs .sep{ color:rgba(22,34,63,0.3); }
#nav.scrolled .nav-langs .sep{ color:rgba(22,34,63,0.2); }
.nav-burger{ display:none; background:transparent; border:none; cursor:pointer; padding:6px; width:30px; height:30px; flex-direction:column; justify-content:center; gap:6px; }
.nav-burger span{ display:block; height:1px; background:var(--navy); transition:background 0.35s; }
#nav.scrolled .nav-burger span{ background:var(--black); }

/* Menú móvil a pantalla completa. Antes era una hoja desplegable cuya altura la
   marcaba el contenido: 606px fijos, o sea el 72% de un iPhone y el 51% de un
   iPad, con la página asomando debajo y el banner de cookies por encima. Ahora
   ocupa el alto real de ventana (100dvh: en iOS descuenta la barra del
   navegador) y reparte el espacio en tres franjas —cabecera, índice, idiomas—
   así que se ve proporcionado en cualquier pantalla. z-index por encima del
   banner de cookies (9000) y del de idioma (9100), por debajo del modal. */
#nav-mobile{
  position:fixed; inset:0; z-index:9500; background:var(--white);
  transform:translateY(-100%); transition:transform 0.4s var(--ease);
  padding:0 var(--gutter) max(28px, env(safe-area-inset-bottom));
  box-shadow:0 20px 50px rgba(0,0,0,0.18);
  height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
}
#nav-mobile.open{ transform:translateY(0); }
.nav-mobile-top{ display:flex; align-items:center; justify-content:space-between; height:clamp(56px,8vh,76px); flex:0 0 auto; }
.nav-mobile-close{ background:transparent; border:none; font-size:26px; line-height:1; color:var(--black); cursor:pointer; transition:transform 0.2s var(--ease-snap); width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-right:-10px; }
.nav-mobile-close:hover{ transform:rotate(90deg); }
/* El índice se queda con el espacio sobrante y se centra en él; flex-basis auto
   + shrink 0 para que en apaisado crezca y sea el panel el que haga scroll. */
.nav-mobile-links{ display:flex; flex-direction:column; justify-content:center; flex:1 0 auto; width:100%; max-width:560px; margin:0; }
.nav-mobile-links a{ font-family:var(--accent); font-size:clamp(21px,5.2vw,30px); font-weight:400; color:var(--black); padding:clamp(13px,3vh,26px) 0; border-bottom:1px solid var(--border); transition:color 0.2s var(--ease-snap), padding-left 0.2s var(--ease-snap); display:block; }
.nav-mobile-links a:hover{ color:var(--oro-texto); padding-left:6px; }
.nav-mobile-langs{ display:flex; gap:18px; flex:0 0 auto; padding-top:clamp(20px,3vh,30px); font-family:var(--mono); font-size:11px; letter-spacing:0.1em; }
.nav-mobile-langs a{ color:rgba(22,34,63,0.5); }
.nav-mobile-langs a.current{ color:var(--oro-texto); }

@media(max-width:960px){
  .nav-links, .nav-langs{ display:none; }
  .nav-burger{ display:flex; }
  #nav{ top:12px; width:calc(100% - 24px); height:56px; padding:0 8px 0 18px; }
  body.lang-banner-active #nav{ top:53px; }
}

/* ════════════════════════════════════════════════════════
  HERO — imagen 4K full-bleed, tema claro
════════════════════════════════════════════════════════ */
#hero-track{ position:relative; height:1540vh; }
.pin-anchor{ position:absolute; left:0; width:1px; height:1px; pointer-events:none; }
.pin-wrapper{ position:sticky; top:0; height:100vh; min-height:600px; overflow:hidden; }
.pin-layer{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:none; }
.pin-layer:first-child{ opacity:1; pointer-events:auto; }
.pin-layer.in-view{ pointer-events:auto; }
#hero{ display:flex; align-items:center; justify-content:flex-start; overflow:hidden; background:#fff; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#fff; }
.hero-bg canvas{ display:block; width:100%; height:100%; }
.hero-whiteout{ position:absolute; inset:0; z-index:2; background:var(--marfil); opacity:0; pointer-events:none; }
.hero-grain{ position:absolute; inset:0; z-index:3; opacity:0.02; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-content{ position:relative; z-index:4; padding:0 var(--gutter); max-width:780px; width:100%; margin:0; text-align:left; }
.hero-eyebrow{ font-family:var(--mono); font-size:11px; color:var(--oro-texto); letter-spacing:0.24em; text-transform:uppercase; margin-bottom:20px; opacity:0; animation:fadeUp 0.8s var(--ease) 0.3s forwards; }
.hero-h1{ font-family:var(--serif); font-size:clamp(40px,5vw,64px); font-weight:600; line-height:1.05; color:var(--ink); text-shadow:0 0 22px rgba(255,255,255,0.7); margin:0 0 24px; max-width:780px; letter-spacing:-0.01em; opacity:0; animation:fadeUp 0.9s var(--ease) 0.45s forwards; }
.hero-h1 em{ font-family:var(--serif); font-style:italic; font-weight:500; font-stretch:normal; letter-spacing:-0.01em; color:inherit; }
/* El H1 vuelve a dos colores: se tiñe de oro la frase que le toca al landmark
   activo — "Preserva tu legado" mientras está el Coliseo, "Expande tu futuro"
   cuando entra Metropolis — y la otra se queda en marino.

   El color NO puede colgar de la clase .mirrored. particles.js la aplica con
   un setTimeout a los 880ms del relevo, y ese temporizador compite con el
   dibujado del campo de partículas, que ocupa el hilo principal entero cada
   frame: llega tarde, y para entonces el titular ya ha reaparecido con los
   colores viejos, así que el cambio se ve ocurrir. La posición y la opacidad
   no sufrían ese retraso porque las lleva la animación CSS, que va por su
   propia línea de tiempo.
   Así que el color se muda a esa misma línea de tiempo: las keyframes del
   relevo llevan ahora los dos tonos, y cambian entre el 38% y el 40%, que es
   la ventana en la que el titular está a opacity:0. Al ir dentro de la
   animación es imposible que se desincronice del salto de lado. Reaparece ya
   con el color definitivo, siempre.
   Van como custom properties registradas para que las keyframes puedan
   interpolarlas; @property no admite var() en initial-value, de ahí que los
   dos tonos estén en crudo: #8a6e2e es --oro-texto y #16223f es --navy. Los
   valores iniciales son los del Coliseo, que es el estado de partida antes
   de que corra ninguna animación.
   Ojo con el tono: el oro de texto es #8a6e2e, no el de marca (#b7944e), que
   sobre marfil da 2.6:1 y no pasa AA. */
@property --h1-a{ syntax:'<color>'; inherits:true; initial-value:#8a6e2e; }
@property --h1-b{ syntax:'<color>'; inherits:true; initial-value:#16223f; }
.hero-h1-a, .hero-h1-b{ display:block; }
.hero-h1-a{ color:var(--h1-a); }
.hero-h1-b{ color:var(--h1-b); }
/* El reposo lo fija la clase, igual que la posición. Hace falta porque
   particles.js borra la animación inline en cuanto termina (el animationend de
   ahí arriba): si el color viviera solo en las keyframes, al limpiarlas volvería
   al valor inicial con Metropolis todavía en pantalla otros 17 segundos, que es
   justo lo que pasaba. Los dos mecanismos coinciden, así que el relevo entre
   ellos no se ve.
   Y la clase habla en custom properties, no en `color`, a propósito: las
   animaciones ganan a las declaraciones normales pase lo que pase con la
   especificidad, así que mientras corre el relevo mandan las keyframes aunque
   la clase ya esté puesta. Eso desactiva por completo el retraso del setTimeout
   que la aplica, en los dos sentidos del ciclo. */
.hero-content{ --h1-a:#8a6e2e; --h1-b:#16223f; }
.hero-content.mirrored{ --h1-a:#16223f; --h1-b:#8a6e2e; }
.hero-lead{ font-family:var(--sans); font-size:clamp(18px,1.8vw,20px); font-weight:400; color:var(--ink-soft); text-shadow:0 1px 3px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,255,0.85), 0 0 30px rgba(255,255,255,0.6); max-width:520px; margin:0 0 40px; line-height:1.55; letter-spacing:0; opacity:0; animation:fadeUp 0.9s var(--ease) 0.6s forwards; }
.hero-lead em{ font-style:italic; color:var(--navy); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start; opacity:0; animation:fadeUp 0.9s var(--ease) 0.75s forwards; }
/* Hero alignment: the particle field alternates between landmarks built
   right (text stays left), left (text moves right, .mirrored) and centered
   full-bleed (text moves to the middle, .centered) — so the text block
   itself has to slide/re-center in sync with whichever is active.
   position:absolute + a slow transition on `left` is what lets that motion
   read as organic rather than a jump cut, since all three states are
   expressed as plain `left` values (no structural transform change), so a
   single CSS transition interpolates cleanly between any pair of them.
   particles.js toggles the align class and re-measures this element's live
   position every frame while it's moving, so the particle field's own
   "cover" region tracks the text continuously as it slides. Scoped to
   width>1100px: a 780px text column plus a legible particle region plus
   margins needs roughly that much room to not crowd together — verified
   this was a real bug at 1024px (iPad landscape), where the split layout
   left text and dense particles directly overlapping and unreadable.
   Below the threshold there's no room for a side split, so it falls back
   to centered — mobile AND tablets both get that fallback now, not just
   phones. */
/* --hero-edge (defined in :root above, not here — a custom property
   declared directly inside a bare @media block with no selector is
   invalid CSS and gets silently dropped, which briefly broke this exact
   layout: var(--hero-edge) resolved to nothing, `left`/`width` became
   invalid declarations, and .hero-content fell back to `left:0`). It's a
   dedicated edge margin for the hero text block, deliberately decoupled
   from the sitewide --gutter (8vw — up to 150px+ on wide desktops): using
   the full section gutter here made the outer margin (text-to-viewport-
   edge) much wider than the inner one (text-to-particles, 24px in
   particles.js), so the text read as pinned off to one side with a big
   imbalanced gap instead of sitting evenly framed. */
/* The handoff between the left (Coliseo) and right (Metropolis) resting
   positions is a fade-out/fade-in, not a slide: the text dims out at its
   current position, jumps to the new one while fully invisible (so the
   position/text-align change is never seen happening), then fades back
   in already settled. No visible travel across the screen and no
   artificial "pass through centre" moment — centring is reserved for an
   actually-centred landmark's own held state, not manufactured as a
   transitional stop for these two. particles.js triggers these via
   .style.animation (not this file's own trigger) because the direction
   depends on which landmark is becoming active — see the comment there. */
@keyframes hero-fade-to-mirrored{
  0%   { opacity:1; left:var(--hero-edge); text-align:left; --h1-a:#8a6e2e; --h1-b:#16223f; }
  38%  { opacity:0; --h1-a:#8a6e2e; --h1-b:#16223f; }
  40%  { opacity:0; left:calc(100% - var(--hero-edge) - min(780px, calc(100% - 2 * var(--hero-edge)))); text-align:right; --h1-a:#16223f; --h1-b:#8a6e2e; }
  100% { opacity:1; --h1-a:#16223f; --h1-b:#8a6e2e; }
}
@keyframes hero-fade-to-normal{
  0%   { opacity:1; left:calc(100% - var(--hero-edge) - min(780px, calc(100% - 2 * var(--hero-edge)))); text-align:right; --h1-a:#16223f; --h1-b:#8a6e2e; }
  38%  { opacity:0; --h1-a:#16223f; --h1-b:#8a6e2e; }
  40%  { opacity:0; left:var(--hero-edge); text-align:left; --h1-a:#8a6e2e; --h1-b:#16223f; }
  100% { opacity:1; --h1-a:#8a6e2e; --h1-b:#16223f; }
}
@media(min-width:1101px){
  .hero-content{
    position:absolute; top:50%; left:var(--hero-edge); right:auto;
    transform:translateY(-50%);
    width:min(780px, calc(100% - 2 * var(--hero-edge)));
  }
  .hero-content.mirrored{
    left:calc(100% - var(--hero-edge) - min(780px, calc(100% - 2 * var(--hero-edge))));
    text-align:right;
  }
  .hero-content.mirrored .hero-lead{ margin-left:auto; margin-right:0; }
  .hero-content.mirrored .hero-actions{ justify-content:flex-end; }
  .hero-content.centered{
    left:calc(50% - min(780px, calc(100% - 2 * var(--hero-edge))) / 2);
    text-align:center;
  }
  .hero-content.centered .hero-lead{ margin-left:auto; margin-right:auto; }
  .hero-content.centered .hero-actions{ justify-content:center; }
  /* Castillo sits almost full-bleed directly behind this text, dense
     enough in tone that plain text (even with the existing text-shadow)
     gets hard to read through it. A soft radial glow behind the text
     block only, no full panel, keeps the castle visible around the edges
     while giving the copy enough contrast to actually read. */
  .hero-content.centered::before{
    content:''; position:absolute; inset:-28px -48px; z-index:-1;
    background:radial-gradient(ellipse at center, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0) 100%);
  }
}
@media(max-width:1100px){
  .hero-content{ max-width:100%; text-align:center; position:relative; }
  .hero-h1{ margin:0 auto 24px; max-width:100%; }
  .hero-lead{ margin:0 auto 44px; }
  .hero-actions{ justify-content:center; }
  /* Below the split-layout threshold the particles centre themselves
     behind the (also centred) text — the same overlap Castillo had at
     desktop sizes, here for whichever landmark is active. Same fix: a
     soft glow behind the text instead of a full opaque panel. */
  .hero-content::before{
    content:''; position:absolute; inset:-28px -20px; z-index:-1;
    background:radial-gradient(ellipse at center, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0) 100%);
  }
}
/* Primary hero CTA — a clean, fully solid navy pill. The earlier liquid-glass
   treatment read as muddy/opaque over the particle field, so it's gone: no
   backdrop-filter, no translucency, no inset specular edges. Just a crisp
   solid button with a soft drop shadow. */
.btn-solid{
  font-family:var(--accent); font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--marfil);
  background:var(--navy);
  border:1px solid var(--navy);
  border-radius:999px; padding:15px 36px;
  box-shadow:0 8px 22px rgba(22,34,63,0.22);
  transition:background 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap), transform 0.15s var(--ease-snap);
  cursor:pointer;
}
.btn-solid:hover{
  background:var(--navy-2);
  box-shadow:0 12px 30px rgba(22,34,63,0.3);
  transform:translateY(-1px);
}
.btn-solid:active{ transform:scale(0.97); transition-duration:0.1s; }
.btn-outline{ font-family:var(--accent); font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--navy); background:rgba(246,243,236,0.5); border:1px solid rgba(22,34,63,0.35); border-radius:999px; padding:13px 36px; transition:background 0.25s var(--ease-snap), border-color 0.25s var(--ease-snap), box-shadow 0.25s var(--ease-snap), transform 0.15s var(--ease-snap); cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn-outline:hover{ background:rgba(246,243,236,0.85); border-color:var(--navy); box-shadow:0 10px 24px rgba(22,34,63,0.1); transform:translateY(-1px); }
.btn-outline:active{ transform:scale(0.97); transition-duration:0.1s; }
.hero-scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:40px; z-index:4; transition:opacity 0.3s; }
.hs-line{ width:1px; height:44px; background:linear-gradient(180deg,transparent,var(--oro)); animation:dropLine 2.2s ease-in-out infinite; }
@keyframes dropLine{ 0%,100%{transform:scaleY(0);transform-origin:top;opacity:0} 45%{transform:scaleY(1);opacity:1} 85%{transform:scaleY(1);transform-origin:bottom} 95%{transform:scaleY(0);transform-origin:bottom;opacity:0} }

/* ════════════════════════════════════════════════════════
  DIAPOSITIVAS — bloques compartidos por cada .pin-layer que no es
  el hero ni bespoke: título+cuerpo centrados verticalmente en 100vh
════════════════════════════════════════════════════════ */
.slide{ display:flex; flex-direction:column; justify-content:center; background:var(--marfil); padding:96px var(--gutter) 32px; overflow:hidden; }
.slide-inner{ width:100%; max-width:1180px; margin:0 auto; }
.h2-display.compact{ font-size:clamp(24px,3.4vw,38px); }
.ct-h2.compact{ font-size:clamp(24px,3vw,36px); }

/* Pieza de galería — texto a un lado, imagen enmarcada al otro, como un
   cuadro con su cartela (usada en Firma, GBP, Cobertura) */
/* Narrower text column so the copy block reads as a tall, vertical measure in
   proportion with the portrait image beside it; body copy justified for an
   editorial, magazine-set feel. */
.gallery-piece{ display:grid; grid-template-columns:0.82fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.gallery-piece.reverse .gallery-piece-frame{ order:-1; }
.gallery-piece-copy{ text-align:justify; hyphens:auto; }
.gallery-piece-copy p{ font-size:12.5px; line-height:1.7; margin-bottom:12px; }
.gallery-piece-frame{ margin:0; height:clamp(440px,72vh,680px); border-radius:0; overflow:hidden; }
.gallery-piece-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
/* GBP/pounds photo: the Union Jack sits at the very top of the frame, so bias
   the cover crop upward (instead of centre) to keep the flag always visible. */
.gallery-piece-frame img[src*="uk.webp"]{ object-position:center 8%; }
/* Cobertura's Madrid/Four Seasons photo specifically — taller than the
   other two gallery-piece-frame photos. */
.gallery-piece-frame--tall{ height:clamp(560px,86vh,840px); }
@media(max-width:960px){
  .gallery-piece, .gallery-piece.reverse{ grid-template-columns:1fr; }
  .gallery-piece-frame{ height:clamp(320px,52vh,460px); order:-1; }
  .gallery-piece-frame--tall{ height:clamp(380px,62vh,540px); }
}

/* ════════════════════════════════════════════════════════
  MICROESTRUCTURA EDITORIAL — el patrón único de contenido
  ────────────────────────────────────────────────────────
  Ninguna pieza de contenido vive dentro de una caja. Toda pieza
  —valor, pregunta, módulo, mandato, perfil— se compone siempre en
  el mismo orden, como una columna de revista:

      visual  → foto a sangre, o el NÚMERO GRANDE donde no hay foto
      kicker  → DM Mono, versalitas anchas, oro
      titular → Cormorant Garamond
      firma   → línea de cierre en cuerpo pequeño, tras un filete

  Lo único que separa una columna de la siguiente es el aire: sin
  fondo, sin borde, sin sombra, sin radio. El filete bajo el número
  hace de "pie de foto" y le da al numeral la misma huella que
  tendría la imagen que sustituye.
════════════════════════════════════════════════════════ */
.card-num,
.pregunta-num,
.modulo-card .n{
  display:block;
  font-family:var(--serif); font-weight:500; font-style:normal;
  font-size:clamp(52px,5.4vw,88px); line-height:0.88;
  letter-spacing:-0.02em;
  /* MONOCROMO: el numeral display va en marino como el resto del titular.
     El dorado queda solo para el kicker en mayúsculas. */
  color:var(--ink); opacity:0.9;
  font-variant-numeric:lining-nums tabular-nums;
  margin:0 0 clamp(14px,1.7vw,22px);
  padding-bottom:clamp(12px,1.4vw,18px);
  border-bottom:1px solid rgba(183,148,78,0.3);
}
/* Firma — la línea de cierre de la columna, separada por filete */
.card-result,
.modulo-card p,
.value-card .card-desc,
[data-gallery-track="perfiles"] .card-desc{
  margin-top:clamp(12px,1.4vw,18px);
  padding-top:clamp(10px,1.2vw,14px);
  border-top:1px solid rgba(22,34,63,0.12);
}

/* Método CBCA — seis preguntas, sin caja */
.preguntas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.6vw,60px); margin-top:clamp(24px,4vh,40px); }
.pregunta-chip{ background:none; border:0; border-radius:0; box-shadow:none; padding:0; }
.pregunta-chip p{ font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.5vw,19px); font-weight:500; color:var(--ink); line-height:1.35; margin-top:0; }
@media(max-width:760px){ .preguntas-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .preguntas-grid{ grid-template-columns:1fr; } }

/* La Metodología — cuatro módulos en cuatro columnas de aire */
.modulos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(26px,3.2vw,56px); margin-top:clamp(26px,4vh,44px); align-items:start; }
.modulo-card{ background:none; border:0; border-radius:0; box-shadow:none; padding:0; }
.modulo-card .tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--oro-texto); margin:0 0 8px; }
.modulo-card h3{ font-family:var(--serif); font-size:clamp(17px,1.6vw,21px); font-weight:600; color:var(--ink); line-height:1.22; margin:0; }
.modulo-card p{ font-family:var(--sans); font-size:12.5px; font-weight:400; color:var(--ink-soft); line-height:1.65; }
/* Disciplina de retícula: en las cuatro columnas de escritorio, numeral,
   kicker, titular y firma comparten pauta, de modo que los filetes cruzan
   la página a la misma altura aunque los títulos midan distinto. Sin
   subgrid (navegadores antiguos) cada columna simplemente fluye: se pierde
   la alineación, no el orden. */
@media(min-width:961px){
  @supports (grid-template-rows: subgrid){
    .modulos-grid{ grid-template-rows:auto auto auto auto; }
    .modulo-card{ display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; }
  }
}
@media(max-width:960px){ .modulos-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .modulos-grid{ grid-template-columns:1fr; } }

.foco-list.compact .foco-item{ padding:12px 0; }
.dossier-slide, .contacto-slide{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; }
@media(max-width:960px){ .dossier-slide, .contacto-slide{ grid-template-columns:1fr; gap:32px; } }
.ct-form.compact{ gap:10px; }
.ct-form.compact .f-in{ padding:10px 13px; }

@media(prefers-reduced-motion: reduce){
  .hero-whiteout{ display:none; }
}
@media (prefers-reduced-motion: reduce), (max-width:760px) {
  #hero-track{ height:auto; }
  .pin-wrapper{ position:relative; height:auto; }
  .pin-layer{ position:relative; inset:auto; opacity:1; pointer-events:auto; }
  #hero{ height:100vh; min-height:600px; }
  .slide{ min-height:0; padding:72px var(--gutter) 56px; }
  /* Con las capas en flujo, el ancla cae justo en el borde superior de su
     sección y la barra fija del nav taparía el kicker. Este margen la deja
     por debajo. Pineado no hace falta: allí la capa ocupa toda la ventana. */
  .pin-anchor{ scroll-margin-top:84px; }
}
@media(max-width:960px){ .hero-h1{ font-size:clamp(40px,6vw,64px); } }
@media(max-width:600px){ .hero-h1{ font-size:clamp(32px,9vw,48px); } .hero-lead{ font-size:16px; max-width:100%; } .hero-actions{ flex-direction:column; gap:10px; } .btn-solid,.btn-outline{ text-align:center; } }

/* ════════════════════════════════════════════════════════
  SECTION SHELL / GRID 2-COL
════════════════════════════════════════════════════════ */
.section{ padding:var(--section) var(--gutter); }
.section.bg-light{ background:var(--light); }
.section.bg-black{ background:var(--marfil-2); color:var(--navy); }
.section.border-t{ border-top:1px solid var(--border); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:stretch; }
@media(max-width:960px){ .grid-2{ grid-template-columns:1fr; gap:48px; } }

.media-frame{ position:relative; display:block; overflow:hidden; min-height:420px; height:100%; align-self:stretch; margin:0; padding:0; background:none; border:1px solid var(--border); border-radius:14px; }
.media-frame img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; position:absolute; inset:0; margin:0; padding:0; border:none; }
@media(max-width:960px){ .media-frame{ min-height:320px; height:auto; } }

/* Split screen, full-bleed image half — no white frame, no gutter on the media side */
.section.split{ padding:0; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0; }
.split-text{ padding:var(--section) var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.split-media{ position:relative; display:block; overflow:hidden; min-height:480px; height:100%; margin:0; padding:0; background:none; border:none; border-radius:0; }
.split-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; position:absolute; inset:0; margin:0; padding:0; border:none; }
@media(max-width:960px){
  .section.split{ grid-template-columns:1fr; }
  .split-text{ padding:64px var(--gutter) 44px; }
  .split-media{ min-height:320px; height:64vw; }
}

.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.pill{ font-family:var(--mono); font-size:8px; letter-spacing:0.14em; text-transform:uppercase; color:var(--black); opacity:0.55; border:1px solid rgba(22,34,63,0.18); border-radius:999px; padding:5px 13px; }
.pull-quote{ border-left:2px solid var(--gold); padding-left:24px; margin-top:38px; }
.pull-quote p{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(20px,2.4vw,28px); line-height:1.4; color:var(--ink); margin-bottom:10px; }
.pull-quote .cite{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:rgba(22,34,63,0.45); }

/* ════════════════════════════════════════════════════════
  QUOTE — barcos
════════════════════════════════════════════════════════ */
#bespoke{ display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:55vh; }
.bespoke-bg{ position:absolute; inset:0; background-size:cover; background-position:center 58%; }
.bespoke-overlay{ position:absolute; inset:0; background:rgba(246,243,236,0.72); }
.bespoke-inner{ position:relative; z-index:2; text-align:center; max-width:800px; padding:80px var(--gutter); }
.bespoke-attr{ font-family:var(--mono); font-size:11px; color:var(--oro-texto); letter-spacing:0.24em; text-transform:uppercase; margin-bottom:28px; }
.bespoke-q{ font-family:var(--serif); font-size:clamp(24px,3.2vw,40px); font-weight:500; font-style:italic; color:var(--ink); line-height:1.4; text-shadow:0 1px 2px rgba(246,243,236,0.8); margin:0; }
.bespoke-q em{ color:inherit; font-style:normal; }
.bespoke-rule{ width:40px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:24px auto 0; }

/* ════════════════════════════════════════════════════════
  HORIZONTAL GALLERY — shared pattern (Valores / Con quién / Mandatos)
════════════════════════════════════════════════════════ */
.gallery-section{ overflow:hidden; }
.gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:14px; padding-right:var(--gutter); }
.gallery-nav{ display:flex; gap:10px; flex-shrink:0; padding-bottom:4px; }
.gallery-nav button{ width:36px; height:36px; border:1px solid rgba(22,34,63,0.22); border-radius:50%; background:transparent; color:var(--black); font-family:var(--mono); font-size:14px; cursor:pointer; transition:border-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap), transform 0.15s var(--ease-snap); }
.gallery-nav button:hover{ border-color:var(--gold); color:var(--oro-texto); transform:scale(1.08); }
.gallery-nav button:active{ transform:scale(0.92); transition-duration:0.1s; }
.bg-black .gallery-nav button{ border-color:rgba(22,34,63,0.22); color:var(--navy); }
.bg-black .gallery-nav button:hover{ border-color:var(--gold); color:var(--oro-texto); }
.gallery-note{ font-family:var(--mono); font-size:10px; color:rgba(22,34,63,0.4); letter-spacing:0.08em; margin:14px 0 0; max-width:560px; }
.bg-black .gallery-note{ color:rgba(22,34,63,0.4); }

/* El aire entre columnas es la única separación: nada de marcos. */
.gallery{ display:flex; gap:clamp(34px,4.2vw,72px); overflow-x:auto; padding-right:var(--gutter); padding-top:4px; padding-bottom:16px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(183,148,78,0.3) transparent; }
.gallery::-webkit-scrollbar{ height:2px; }
.gallery::-webkit-scrollbar-thumb{ background:rgba(183,148,78,0.3); }

.card{ flex:0 0 clamp(260px,27vw,330px); scroll-snap-align:start; background:none; border:0; border-radius:0; box-shadow:none; }
.card-img{ width:100%; height:clamp(150px,24vh,240px); position:relative; overflow:hidden; margin-bottom:clamp(14px,1.7vw,22px); }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease-snap); }
.card:hover .card-img img{ transform:scale(1.04); }
.card-body{ padding:0; }
.card-kicker{ font-family:var(--mono); font-size:10px; color:var(--oro-texto); letter-spacing:0.22em; text-transform:uppercase; margin-bottom:10px; }
.card-title{ font-family:var(--serif); font-size:clamp(20px,1.8vw,23px); font-weight:600; color:var(--ink); line-height:1.2; margin-bottom:0; }
.card-desc{ font-family:var(--sans); font-size:13px; font-weight:400; color:var(--ink-soft); line-height:1.7; margin-top:clamp(10px,1.2vw,14px); }
.card-result{ font-family:var(--sans); font-size:12.5px; font-weight:400; color:var(--ink-soft); line-height:1.65; }
.card-result strong{ color:var(--black); font-weight:600; }

/* Valores — sin foto: el número grande ocupa su lugar */
.card.value-card{ flex:0 0 clamp(240px,25vw,300px); }
.card.value-card .card-title{ font-size:clamp(19px,1.7vw,22px); }
.card.value-card .card-desc{ font-size:12.5px; color:var(--muted); }

@media(max-width:960px){ .card{ flex:0 0 clamp(240px,64vw,290px); } .card.value-card{ flex:0 0 clamp(230px,62vw,270px); } }

/* Mandatos — la pieza más densa de la página (foto + kicker + titular +
   descripción + firma) y la única que se apila dentro de una diapositiva
   fijada a 100vh con overflow:hidden. Al quitar la caja desaparece el
   padding del marco, pero el riesgo de desbordar sigue ahí, así que todo
   lo que ocupa alto —foto y cuerpo— se dimensiona con vh: la columna
   respira en pantallas altas y se comprime sin recortar contenido en las
   bajas, en lugar de volver a tumbar la foto al lado del texto.
   Antes esto era horizontal (foto al lado) precisamente por ese motivo;
   ahora se apila para respetar el orden foto → kicker → titular → firma. */
[data-gallery-track="mandatos"] .card{ flex:0 0 clamp(280px,30vw,360px); }
[data-gallery-track="mandatos"] .card-img{ height:clamp(110px,17vh,190px); }
[data-gallery-track="mandatos"] .card-title{ font-size:clamp(18px,1.6vw,21px); }
[data-gallery-track="mandatos"] .card-desc{ font-size:12.5px; line-height:1.6; }

/* Portátiles bajos (1280×720 y similares): la diapositiva sigue fijada a
   100vh con overflow:hidden, así que ahí se recorta el margen —no el
   contenido— para que la columna de mandatos, que es la más alta, entre
   entera. */
@media(min-width:761px) and (max-height:820px){
  .slide{ padding-top:76px; padding-bottom:24px; }
  .gallery-note{ margin-top:8px; }
  [data-gallery-track="mandatos"] .card-img{ height:clamp(88px,13vh,150px); }
  [data-gallery-track="mandatos"] .card-desc{ font-size:12px; line-height:1.55; }
  [data-gallery-track="mandatos"] .card-result{ font-size:12px; }
}

/* ════════════════════════════════════════════════════════
  METODO CBCA — el número de pregunta comparte el tratamiento de
  numeral-sustituto-de-foto (bloque MICROESTRUCTURA EDITORIAL);
  el resto del layout vive en el bloque DIAPOSITIVAS de arriba
════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
  COBERTURA
════════════════════════════════════════════════════════ */
.foco-list{ display:flex; flex-direction:column; margin-top:12px; }
.foco-item{ padding:20px 0; border-bottom:1px solid var(--border); }
.foco-item:first-child{ border-top:1px solid var(--border); }
.foco-item .t{ font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink); margin-bottom:6px; }
.foco-item p{ font-family:var(--sans); font-size:13.5px; font-weight:400; color:var(--ink-soft); line-height:1.7; }

/* COBERTURA — lista editorial, no tabla. Sin cabeceras de columna, sin caja y
   sin fondo: la jerarquía la hacen la tipografía (serif para la zona, DM Sans
   para descripción y jurisdicciones) y el espacio. Los ítems se separan con un
   filete de 1px del color hairline, nada más. */
.cov-list{ list-style:none; margin:clamp(26px,3vw,34px) 0 0; padding:0; border-top:1px solid var(--border); }
.cov-item{ padding:clamp(18px,2.2vw,24px) 0; border-bottom:1px solid var(--border); }
.cov-zona{ font-family:var(--serif); font-size:clamp(20px,1.9vw,26px); font-weight:600; letter-spacing:-0.005em; line-height:1.15; color:var(--ink); margin:0 0 8px; }
.cov-desc{ font-family:var(--sans); font-size:14px; font-weight:300; line-height:1.65; color:var(--muted); margin:0 0 6px; max-width:54ch; }
.cov-juris{ font-family:var(--sans); font-size:14px; font-weight:400; line-height:1.65; color:var(--ink-soft); margin:0; max-width:54ch; }
/* El segundo titular de la sección necesita su propio aire, pero con la lista
   en dos ítems ya no hay riesgo de que se pisen: sube y se acerca al bloque. */
.cov-cierre{ margin-top:clamp(36px,4vw,52px); }
.cov-cierre .h2-display{ margin-bottom:14px; }
@media(max-width:960px){
  .cov-item{ padding:18px 0; }
  .cov-zona{ font-size:20px; }
  .cov-desc, .cov-juris{ font-size:13.5px; }
  .cov-cierre{ margin-top:36px; }
}

/* ════════════════════════════════════════════════════════
  DOSSIER
════════════════════════════════════════════════════════ */
.dossier-sub{ font-family:var(--sans); font-size:15px; font-weight:400; color:var(--ink-soft); line-height:1.7; max-width:400px; margin-top:18px; }
.dossier-btns{ display:flex; flex-direction:column; gap:10px; }
.dossier-btn{ display:flex; align-items:center; gap:16px; background:var(--marfil); border:1px solid rgba(183,148,78,0.3); border-radius:10px; padding:17px 24px; color:var(--navy); transition:background 0.25s var(--ease-snap), border-color 0.25s var(--ease-snap), box-shadow 0.25s var(--ease-snap), transform 0.25s var(--ease-snap); }
.dossier-btn:hover{ background:rgba(183,148,78,0.1); border-color:rgba(183,148,78,0.6); color:var(--navy); box-shadow:0 8px 20px rgba(22,34,63,0.08); transform:translateX(4px); }
.db-flag{ font-size:16px; flex-shrink:0; }
.db-text{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; flex:1; }
.db-arrow{ color:var(--oro-texto); font-family:var(--mono); font-size:14px; }
.dossier-note{ font-family:var(--mono); font-size:10px; color:rgba(22,34,63,0.4); letter-spacing:0.16em; text-transform:uppercase; margin-top:10px; }

/* ════════════════════════════════════════════════════════
  CONTACTO
════════════════════════════════════════════════════════ */
.ct-h2{ font-family:var(--serif); font-size:clamp(32px,4.5vw,56px); font-weight:600; letter-spacing:-0.005em; color:var(--ink); margin-bottom:18px; line-height:1.08; }
.ct-h2 em{ font-family:var(--serif); font-style:normal; font-weight:inherit; font-stretch:normal; letter-spacing:inherit; color:inherit; }
.ct-sub{ font-family:var(--sans); font-size:15px; font-weight:400; color:var(--ink-soft); line-height:1.7; max-width:400px; margin-bottom:36px; }
.ct-detail{ display:flex; flex-direction:column; }
.ct-row{ display:flex; justify-content:space-between; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--border); gap:16px; }
.ct-row:first-child{ border-top:1px solid var(--border); }
.ct-lbl{ font-family:var(--mono); font-size:10px; color:rgba(22,34,63,0.4); letter-spacing:0.14em; text-transform:uppercase; flex-shrink:0; }
.ct-val{ font-family:var(--sans); font-size:12px; font-weight:300; color:var(--black); text-align:right; }
.ct-val a{ color:var(--black); }
.ct-form{ display:flex; flex-direction:column; gap:14px; }
.f-lbl{ font-family:var(--mono); font-size:10px; color:rgba(22,34,63,0.45); letter-spacing:0.14em; text-transform:uppercase; display:block; margin-bottom:6px; }
.f-in{ width:100%; background:rgba(22,34,63,0.04); border:1px solid rgba(22,34,63,0.10); border-radius:12px; color:var(--ink); padding:14px 16px; font-family:var(--sans); font-size:15px; font-weight:400; line-height:1.6; outline:none; transition:border-color 0.2s var(--ease-snap), box-shadow 0.2s var(--ease-snap), background 0.2s var(--ease-snap); }
.f-in:focus{ border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(119,102,72,0.12); }
.f-in::placeholder{ color:rgba(22,34,63,0.32); }
.f-consent{ display:flex; gap:10px; align-items:flex-start; }
.f-consent input{ margin-top:3px; accent-color:var(--gold); flex-shrink:0; }
.f-consent-lbl{ font-family:var(--sans); font-size:11px; font-weight:300; color:rgba(22,34,63,0.55); line-height:1.7; cursor:pointer; }
.f-consent-lbl a{ color:var(--oro-texto); text-decoration:underline; }
.f-note{ font-family:var(--mono); font-size:10px; color:rgba(22,34,63,0.35); letter-spacing:0.08em; line-height:1.8; border-top:1px solid var(--border); padding-top:12px; }
/* Solid navy submit button — its "real" colour. It stays visibly muted
   (translucent navy) until the required fields are filled and consent is
   given, then snaps to the full solid navy so the form reads as ready. */
.f-btn{
  font-family:var(--accent); font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  background:var(--navy); color:var(--marfil); border:1px solid var(--navy); border-radius:999px; padding:16px 32px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; width:100%;
  box-shadow:0 8px 22px rgba(22,34,63,0.22);
  transition:background 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap), color 0.3s var(--ease-snap), transform 0.15s var(--ease-snap);
  margin-top:4px;
}
.f-btn:not(:disabled):hover{ background:var(--navy-2); box-shadow:0 12px 30px rgba(22,34,63,0.3); transform:translateY(-1px); }
.f-btn:not(:disabled):active{ transform:scale(0.985); transition-duration:0.1s; }
.f-btn:disabled{ background:rgba(22,34,63,0.22); border-color:transparent; color:rgba(255,255,255,0.9); box-shadow:none; cursor:not-allowed; }

/* ════════════════════════════════════════════════════════
  FOOTER
════════════════════════════════════════════════════════ */
footer{ background:var(--white); padding:14px var(--gutter); display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); flex-wrap:wrap; gap:16px; }
.ft-word{ display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); }
.ft-word img{ height:26px; width:auto; display:block; flex-shrink:0; }
/* El pie estaba a 8px: por debajo del suelo de legibilidad, y en móvil sus
   enlaces medían 14px de alto frente a los ~44px de área táctil recomendada.
   10px en mono es el mismo cuerpo que .card-kicker y .tag, así que sigue
   siendo tipografía de metadato —discreta— pero se lee. */
.ft-cities{ font-family:var(--mono); font-size:10px; color:rgba(22,34,63,0.45); letter-spacing:0.1em; }
.ft-links{ display:flex; gap:20px; }
.ft-links a{ font-family:var(--mono); font-size:10px; color:rgba(22,34,63,0.42); letter-spacing:0.1em; text-transform:uppercase; transition:color 0.2s var(--ease-snap); }
.ft-links a:hover{ color:var(--oro-texto); }
.ft-copy{ font-family:var(--sans); font-size:11px; font-weight:300; color:rgba(22,34,63,0.4); }

/* ════════════════════════════════════════════════════════
  PRIVACY MODAL
════════════════════════════════════════════════════════ */
#privacyModal{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px; }
.modal-box{ background:var(--white); max-width:640px; width:100%; max-height:84vh; overflow-y:auto; padding:48px; position:relative; border:1px solid var(--linea); }
.modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:20px; color:rgba(22,34,63,0.4); cursor:pointer; transition:color 0.2s var(--ease-snap), transform 0.2s var(--ease-snap); }
.modal-close:hover{ color:var(--navy); transform:rotate(90deg); }
.modal-kicker{ font-family:var(--mono); font-size:11px; color:var(--oro-texto); letter-spacing:0.24em; text-transform:uppercase; margin-bottom:12px; }
.modal-title{ font-family:var(--serif); font-size:clamp(26px,2.4vw,32px); font-weight:600; color:var(--ink); margin-bottom:24px; }
.modal-body{ font-family:var(--sans); font-size:14px; font-weight:400; color:var(--ink-soft); line-height:1.75; }
.modal-body h3{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--black); margin:20px 0 7px; }
.modal-body p{ margin-bottom:10px; }
.modal-body a{ color:var(--oro-texto); }
.modal-cta{ margin-top:24px; font-family:var(--sans); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; background:var(--black); color:var(--white); border:none; border-radius:999px; padding:12px 28px; cursor:pointer; transition:background 0.2s var(--ease-snap), transform 0.15s var(--ease-snap); }
.modal-cta:hover{ background:var(--black2); }
.modal-cta:active{ transform:scale(0.97); transition-duration:0.1s; }

/* ════ COOKIE BANNER ════ */
#cookie-banner{ position:fixed; bottom:0; left:0; right:0; z-index:9000; display:none; background:rgba(246,243,236,0.97); border-top:1px solid rgba(183,148,78,0.3); padding:20px var(--gutter); align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; transform:translateY(100%); transition:transform 0.4s var(--ease); backdrop-filter:blur(8px); }
#cookie-banner.visible{ transform:translateY(0); }
.cookie-text{ font-family:var(--sans); font-size:13px; font-weight:400; color:var(--ink-soft); line-height:1.65; max-width:680px; flex:1; }
.cookie-text a{ color:var(--oro-texto); text-decoration:underline; cursor:pointer; }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.btn-cookie-accept{ font-family:var(--accent); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; background:var(--gold); color:var(--black); border:none; border-radius:999px; padding:10px 24px; cursor:pointer; transition:background 0.2s var(--ease-snap), transform 0.15s var(--ease-snap); }
.btn-cookie-accept:hover{ background:var(--gold2); }
.btn-cookie-accept:active{ transform:scale(0.96); transition-duration:0.1s; }
.btn-cookie-reject{ font-family:var(--accent); font-size:10px; font-weight:300; letter-spacing:0.1em; text-transform:uppercase; background:transparent; color:rgba(22,34,63,0.5); border:1px solid rgba(22,34,63,0.25); border-radius:999px; padding:10px 20px; cursor:pointer; transition:color 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap), transform 0.15s var(--ease-snap); }
.btn-cookie-reject:hover{ color:rgba(22,34,63,0.85); border-color:rgba(22,34,63,0.45); }
.btn-cookie-reject:active{ transform:scale(0.96); transition-duration:0.1s; }

/* Áreas táctiles en pantallas de dedo. Los enlaces del pie y el email de
   contacto son objetivos aislados —no van dentro de un párrafo—, así que les
   toca el mínimo de 44px: se lo damos con padding, sin tocar el cuerpo de
   letra ni el ritmo del pie en escritorio. Los enlaces en línea dentro de
   prosa (la Política de Privacidad del consentimiento) quedan fuera: partirles
   la caja rompería el interlineado y la propia norma los exceptúa. */
@media(hover:none) and (pointer:coarse), (max-width:960px){
  .ft-links a{ display:inline-flex; align-items:center; min-height:44px; }
  .ct-val a{ display:inline-block; padding:12px 0; }
}
@media(max-width:960px){ :root{ --section:72px; --gutter:6vw; } }
@media(max-width:600px){ :root{ --t-hero:clamp(38px,11vw,52px); } .grid-2{ gap:36px; } .section{ padding-left:6vw; padding-right:6vw; } }

/* ══ INTRO SPLASH ══
   Gold Luxpont lockup on a deep black field, then dissolves slowly to give way
   to the site. pointer-events:none is critical — the splash is purely
   decorative and must NEVER intercept scroll or clicks, even if its removal
   script is delayed on a slow load. A small script also drops it from the
   layout once the fade ends, but the page is usable regardless. */
#intro-splash{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:#0f0f0f;
  animation:introSplashOut 3s var(--ease) 1.8s forwards;
  will-change:opacity;
}
.intro-splash-logo{
  width:min(80vw, 560px); height:auto; display:block;
  opacity:0;
  animation:introLogoIn 1.2s var(--ease) 0.2s forwards;
  will-change:opacity, transform;
}
@keyframes introLogoIn{
  0%{ opacity:0; transform:translateY(12px) scale(0.975); }
  100%{ opacity:1; transform:none; }
}
@keyframes introSplashOut{
  0%{ opacity:1; visibility:visible; filter:blur(0); }
  99%{ visibility:visible; }
  100%{ opacity:0; visibility:hidden; filter:blur(5px); } /* soft dissolve ("difuminado") as it clears */
}
@media(max-width:600px){ .intro-splash-logo{ width:min(86vw, 420px); } }

/* ══ SPLIT GALLERY (Valores Centrales · Método CBCA) ══
   A big, left-aligned heading holds the left column; the items live in a
   horizontal-scroll track on the right, as bare editorial columns — no
   panel, no frame. The frosted "liquid glass" cards that used to live here
   were removed: they boxed the content instead of setting it. */
.gallery-split{ display:grid; grid-template-columns:minmax(300px, 38%) 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
.gallery-split-head{ align-self:center; min-width:0; }
.gallery-split-head .h2-display{ font-size:clamp(30px,3.8vw,54px); text-align:left; max-width:none; margin-bottom:clamp(14px,1.8vw,22px); }
/* Método heading: one sentence per line, with a light breath between each so
   the anaphora reads calm rather than cramped. */
.metodo-h span, .metodo-h em{ display:block; }
.metodo-h span{ margin-bottom:0.34em; }
/* Standalone manifesto slide (Método, section 1): larger, prominent statement. */
.metodo-manifesto{ font-size:clamp(38px,5.2vw,66px); max-width:none; }
.gallery-split-head .body-text{ margin-bottom:0; }
.gallery-split-head .gallery-nav{ margin-top:28px; }
/* Columnas alineadas por arriba: sin caja, lo que ordena la retícula es la
   línea superior de cada numeral, no un panel de altura común. */
.gallery-split .gallery{ min-width:0; align-items:flex-start; padding-top:8px; padding-bottom:20px; }
.gallery-split .pregunta-chip{ flex:0 0 clamp(230px,25vw,300px); scroll-snap-align:start; }
.gallery-split .pregunta-chip p{ font-size:clamp(18px,1.6vw,24px); line-height:1.45; }

@media(max-width:900px){
  .gallery-split{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .gallery-split-head .h2-display{ font-size:clamp(26px,7vw,40px); }
  .gallery-split .pregunta-chip{ flex:0 0 clamp(230px,64vw,280px); }
}

/* ══ Valores Centrales · Método CBCA ══
   Mismo fondo que el resto de la página. */
.slide-dark{ background:var(--marfil); }