/* =========================================================
   ADRIMA GLOBAL — v3
   Boutique internacional de coordinación, advisory
   e intermediación estratégica.

   Esquema claro con bloques oscuros de acento.
   Los componentes no llevan colores fijos: leen variables.
   La clase .on-dark redefine esas variables, de modo que
   el mismo componente funciona sobre claro y sobre oscuro.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* Fondos claros (gris azulado, nunca blanco puro) */
  --paper-a:   #F4F7FA;
  --paper-b:   #E9EEF5;
  --paper-c:   #EEF2F6;

  /* Fondos oscuros de acento */
  --dark-1:    #0B1220;
  --dark-2:    #111A2B;
  --dark-3:    #14233A;
  --dark-card: #17273F;

  /* Azul de marca */
  --accent:    #6E8FBF;   /* decorativo: reglas, aureolas, hover */
  --accent-hi: #9DB6D9;   /* acento sobre fondo oscuro */
  --accent-dk: #2B4A7A;   /* acento como texto sobre fondo claro */

  /* --- Variables temáticas (valores para fondo CLARO) --- */
  --bg:          var(--paper-a);
  --text:        #0E1A2B;   /* titulares y texto principal */
  --text-2:      #3A4A61;   /* texto secundario  · 7.9:1 */
  --text-3:      #5B6B82;   /* micro-etiquetas   · 4.9:1 */
  --accent-text: var(--accent-dk);
  --card:        #FCFDFE;
  --line:        #CBD7E5;
  --line-soft:   #DEE6F0;
  --rule:        var(--accent-dk);

  /* Tipografía */
  --font-serif: "Cormorant Garamond", "Adobe Garamond Pro", Garamond, "Times New Roman", serif;
  --font-sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Métrica */
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --sec-y: clamp(58px, 6.4vw, 96px);   /* ritmo vertical compacto pero con aire */
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Los mismos componentes, sobre fondo OSCURO --- */
.on-dark{
  --text:        #F2F4F7;
  --text-2:      #C6D0DD;
  --text-3:      #9DAABC;
  --accent-text: var(--accent-hi);
  --card:        var(--dark-card);
  --line:        #2C3E57;
  --line-soft:   #24344B;
  --rule:        var(--accent);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper-a);
  color:var(--text-2);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:17px;            /* cuerpo nunca por debajo de 16 px */
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-weight:400;color:var(--text);}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--accent-dk);color:#fff;}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent-dk);color:#fff;padding:12px 20px;font-size:14px;letter-spacing:.06em;}
.skip-link:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid var(--accent-dk);outline-offset:3px;}
.on-dark :focus-visible{outline-color:var(--accent-hi);}

/* =========================================================
   HEADER — siempre oscuro, translúcido al desplazar
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:#2C3E57;opacity:0;transition:opacity .4s var(--ease);
}
/* Velo superior: mantiene legibles logo y menú sobre el hero animado
   sin recurrir a una barra sólida que rompería la entrada. */
.header-scrim{
  position:absolute;left:0;right:0;top:0;height:210%;pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,13,23,.92) 0%, rgba(8,13,23,.62) 42%, rgba(8,13,23,0) 100%);
  transition:opacity .45s var(--ease);
}
.site-header.is-stuck .header-scrim{opacity:0;}
.site-header.is-stuck{
  background:rgba(11,18,32,.93);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  box-shadow:0 14px 44px -24px rgba(11,18,32,.55);
}
.site-header.is-stuck::after{opacity:1;}

.site-header .shell{max-width:1440px;}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  height:88px;transition:height .4s var(--ease);
}
.site-header.is-stuck .header-inner{height:70px;}

/* Marca */
.brand{display:flex;align-items:center;gap:14px;color:#F2F4F7;flex:0 0 auto;position:relative;z-index:3;}
.brand-mark{width:36px;height:36px;color:#B9CDE6;flex:0 0 auto;transition:color .4s var(--ease), transform .6s var(--ease);}
.brand:hover .brand-mark{transform:rotate(-14deg);color:#fff;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-name{font-size:20.5px;letter-spacing:.02em;white-space:nowrap;color:#FFFFFF;}
.brand-name em{font-family:var(--font-serif);font-style:normal;font-weight:500;letter-spacing:.14em;}
.brand-name b{font-family:var(--font-sans);font-weight:300;letter-spacing:.26em;margin-left:.5em;font-size:.86em;color:var(--accent-hi);}
.brand-tag{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#B6C3D4;margin-top:5px;font-weight:400;}
.site-header .brand-tag{font-size:7.8px;letter-spacing:.14em;margin-top:6px;}

/* Navegación */
.nav{display:flex;align-items:center;gap:34px;}
.nav-link{
  position:relative;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;color:#D6DEE9;transition:color .3s var(--ease);padding:6px 0;
}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent-hi);transition:right .45s var(--ease);}
.nav-link:hover{color:#fff;}
.nav-link:hover::after,.nav-link.is-active::after{right:0;}
.nav-link.is-active{color:#fff;}

.nav-toggle{display:none;width:44px;height:44px;position:relative;z-index:3;margin-right:-10px;}
.nav-toggle span{position:absolute;left:11px;right:11px;height:1.5px;background:#F2F4F7;transition:transform .4s var(--ease),opacity .3s var(--ease);}
.nav-toggle span:nth-child(1){top:16px;}
.nav-toggle span:nth-child(2){top:22px;}
.nav-toggle span:nth-child(3){top:28px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Selector ES | EN */
.lang{display:flex;align-items:center;gap:9px;margin-left:8px;padding-left:26px;position:relative;}
.lang::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:#3B506E;}
.lang-on,.lang-off{font-size:12px;letter-spacing:.14em;font-weight:500;padding:4px 2px;}
.lang-on{color:#FFFFFF;border-bottom:1px solid var(--accent-hi);}
.lang-sep{color:#7E8FA5;font-size:11px;}
.lang-off{color:#A9B7C9;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);}
.lang-off:hover{color:#FFFFFF;border-bottom-color:var(--accent-hi);}

.header-progress{position:absolute;left:0;bottom:0;height:1.5px;width:0;background:linear-gradient(90deg,#2C3E57,var(--accent-hi));transition:width .1s linear;}

/* =========================================================
   BOTONES
   ========================================================= */

/* =========================================================
   HERO — bloque oscuro de entrada
   ========================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:150px 0 130px;overflow:hidden;background:var(--dark-1);
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 88% at 76% 16%, rgba(23,40,66,.95) 0%, rgba(11,18,32,0) 62%),
    radial-gradient(85% 65% at 4% 96%, rgba(17,26,43,.9) 0%, rgba(11,18,32,0) 66%),
    linear-gradient(158deg, #0D1626 0%, #101C30 45%, #0B1220 100%);
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;}
/* Velo más denso bajo la columna de texto: el globo se mantiene
   visible a la derecha, pero el texto gana contraste real. */
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(96deg,
    rgba(9,15,26,.97) 0%, rgba(9,15,26,.95) 34%, rgba(9,15,26,.72) 50%,
    rgba(9,15,26,.14) 68%, rgba(9,15,26,.26) 100%);
}
.hero-veil-b{position:absolute;inset:auto 0 0 0;height:32%;background:linear-gradient(to bottom, rgba(11,18,32,0), var(--dark-1));}

.hero-inner{position:relative;z-index:2;max-width:1000px;}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-text);margin-bottom:30px;}

.hero-title{
  font-family:var(--font-serif);font-weight:300;color:#FFFFFF;
  font-size:clamp(38px,6.6vw,84px);line-height:1.06;letter-spacing:-.012em;
}
.hero-title span{color:#BFD0E6;}

.hero-sub{
  margin-top:34px;max-width:730px;color:#E4EAF2;   /* 14.6:1 sobre el velo */
  font-size:clamp(16px,1.25vw,18px);line-height:1.85;font-weight:400;
}
.hero-claim{
  display:flex;align-items:center;gap:18px;margin-top:36px;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#FFFFFF;font-weight:500;
}
.hero-claim .rule{display:block;width:56px;height:1px;background:var(--accent-hi);flex:0 0 auto;}

.hero-scroll{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);z-index:3;width:24px;height:56px;display:flex;justify-content:center;}
.hero-scroll-line{width:1px;height:100%;background:linear-gradient(to bottom,rgba(242,244,247,0),rgba(242,244,247,.5));position:relative;overflow:hidden;}
.hero-scroll-line::after{content:"";position:absolute;left:0;width:1px;height:22px;background:var(--accent-hi);animation:scrollDot 2.8s var(--ease) infinite;}
@keyframes scrollDot{0%{top:-24px;opacity:0;}25%{opacity:1;}100%{top:56px;opacity:0;}}

/* =========================================================
   SECCIONES — base
   ========================================================= */
.section{position:relative;padding:var(--sec-y) 0;overflow:hidden;}
.section--a{background:var(--paper-a);}
.section--b{background:var(--paper-b);}
.section--c{background:var(--paper-c);}
.section--dark{background:var(--dark-1);}
/* Cada sección respira en proporción a su contenido: las que llevan un módulo
   grande (método, mapa) se ajustan; las breves (diferencial, contacto) más aún.
   Así ninguna pantalla queda vacía ni todas miden lo mismo. */
.section--snug{--sec-y:clamp(48px,5.2vw,78px);}
.section--tight{--sec-y:clamp(40px,4.4vw,64px);}

.h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(30px,4.1vw,54px);line-height:1.14;letter-spacing:-.008em;color:var(--text);}
.section-head{max-width:830px;margin:0 auto clamp(34px,4vw,56px);text-align:center;}
.section-head-left{margin-inline:0;text-align:left;}
.section-intro{margin-top:22px;color:var(--text-2);font-size:clamp(16px,1.15vw,17px);line-height:1.82;}
.section-intro + .section-intro{margin-top:16px;}
.hairline{display:block;width:64px;height:1px;background:var(--rule);margin-top:26px;}

/* ---------- NOSOTROS ---------- */
/* Sección deliberadamente visual: titular y texto lateral a la izquierda,
   red de trazabilidad a la derecha ocupando la altura de la columna. */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(36px,6vw,88px);align-items:center;
}
.about-head .h2{margin-top:6px;font-size:clamp(28px,3.2vw,44px);}
.about-aside{margin-top:30px;max-width:40ch;font-size:15.5px;line-height:1.85;color:var(--text-2);}

/* Red de trazabilidad documental */
.about-visual{display:flex;justify-content:center;}
.trace{margin:0;padding:0;width:100%;max-width:400px;}
.trace svg{width:100%;height:auto;display:block;}
.trace figcaption{
  margin-top:18px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);line-height:1.5;text-align:center;
}
.trace-nodes circle{animation:traceNode 6.5s ease-in-out infinite;}
.trace-nodes circle:nth-child(2n){animation-delay:-1.8s;}
.trace-nodes circle:nth-child(3n){animation-delay:-3.4s;}
@keyframes traceNode{0%,100%{opacity:.35;}50%{opacity:1;}}
.trace-halo{transform-box:fill-box;transform-origin:center;animation:traceHalo 7.2s ease-in-out infinite;}
@keyframes traceHalo{0%,100%{transform:scale(.72);opacity:.09;}50%{transform:scale(1.12);opacity:.2;}}
/* Punto que recorre la red pasando por los nodos */
.trace-dot{
  fill:var(--accent-dk);
  offset-distance:0%;offset-rotate:0deg;
  animation:traceDot 9.5s linear infinite;
}
@keyframes traceDot{
  0%{offset-distance:0%;opacity:0;}
  8%{opacity:1;}
  88%{opacity:1;}
  100%{offset-distance:100%;opacity:0;}
}

.lede{font-family:var(--font-serif);font-size:clamp(21px,2.1vw,28px);line-height:1.52;font-weight:400;color:var(--accent-dk);}
.on-dark .lede{color:#DCE6F4;}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);}
.pillar{
  padding:26px 26px 24px 0;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:12px;justify-content:flex-start;
}
.pillar:nth-child(3n){border-right:0;}
.pillar:nth-last-child(-n+3){border-bottom:0;}
.pillar-num{font-family:var(--font-serif);font-size:clamp(32px,3vw,42px);line-height:1;color:var(--accent-dk);font-weight:500;}
.pillar-mark{width:22px;height:22px;border:1px solid var(--accent-dk);border-radius:50%;position:relative;}
.pillar-mark::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--accent-dk);}
.pillar-label{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);line-height:1.6;font-weight:500;}

/* =========================================================
   MÉTODO — módulo interactivo de 6 fases
   Traslada a la web el gráfico del protocolo operativo:
   raíl de fases + tres calles (vendedora · ADRIMA · compradora).
   ========================================================= */
.method{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  border:1px solid var(--line);background:var(--card);
}

/* --- Raíl de fases --- */
.rail{position:relative;padding:14px 0;border-right:1px solid var(--line);background:rgba(203,215,229,.16);}
.rail-line{position:absolute;left:34px;top:34px;bottom:34px;width:1px;background:var(--line);}
.rail-line-fill{
  position:absolute;left:0;top:0;width:1px;height:var(--fill,0%);background:var(--accent-dk);
  transition:height .55s var(--ease), width .55s var(--ease);
}
.rail-item{position:relative;}
.rail-btn{
  position:relative;z-index:1;width:100%;display:grid;
  grid-template-columns:auto auto 1fr;align-items:center;gap:0 14px;
  padding:16px 22px 16px 24px;text-align:left;
  transition:background .35s var(--ease);
}
.rail-btn:hover{background:rgba(43,74,122,.06);}
.rail-dot{
  width:11px;height:11px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.rail-num{
  font-family:var(--font-serif);font-size:14px;letter-spacing:.1em;
  color:var(--text-2);transition:color .35s var(--ease);font-weight:500;
}
.rail-title{
  font-size:15px;line-height:1.35;color:var(--text-2);
  transition:color .35s var(--ease);grid-column:3;
}
.rail-item.is-on .rail-dot{border-color:var(--accent-dk);background:var(--accent-dk);box-shadow:0 0 0 4px rgba(43,74,122,.14);}
.rail-item.is-on .rail-num{color:var(--accent-dk);}
.rail-item.is-on .rail-title{color:var(--text);font-weight:500;}
.rail-btn:focus-visible{outline-offset:-3px;}

/* --- Panel de la fase activa --- */
.method-stage{position:relative;padding:clamp(28px,3.4vw,46px);min-height:400px;display:flex;flex-direction:column;}
.mpanel[hidden]{display:none;}
.mpanel{animation:panelIn .5s var(--ease) both;}
@keyframes panelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.mpanel-step{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-text);font-weight:500;}
.mpanel-title{font-family:var(--font-serif);font-size:clamp(26px,2.6vw,36px);line-height:1.18;color:var(--text);margin-top:10px;font-weight:500;}
.mpanel-desc{margin-top:16px;color:var(--text-2);font-size:16.5px;line-height:1.8;max-width:62ch;}

/* --- Las tres calles del protocolo --- */
.lanes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(24px,2.6vw,34px);background:var(--line);border:1px solid var(--line);
}
.lane{background:var(--card);padding:20px 20px 22px;position:relative;}
.lane-head{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  font-weight:600;line-height:1.4;
}
.lane-head em{display:block;font-style:italic;font-weight:400;letter-spacing:.04em;
  text-transform:none;color:var(--text-3);font-size:11.5px;margin-top:3px;}
.lane-list{margin-top:14px;display:grid;gap:8px;}
.lane-list li{
  font-size:14.5px;line-height:1.5;color:var(--text);
  padding-left:16px;position:relative;
  animation:laneIn .45s var(--ease) both;
}
.lane-list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--accent-dk);}
.lane-list li:nth-child(2){animation-delay:.07s;}
.lane-list li:nth-child(3){animation-delay:.14s;}
@keyframes laneIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}

/* Calle central: ADRIMA como punto de coordinación */
.lane-core{background:linear-gradient(168deg,#16283F 0%,#1C3050 100%);z-index:1;}
.lane-core .lane-head{color:#F2F4F7;}
.lane-core .lane-head em{color:var(--accent-hi);}
.lane-core .lane-list li{color:#E4EAF2;}
.lane-core .lane-list li::before{background:var(--accent-hi);}
/* Flechas de convergencia hacia la calle central */
.lane-core::before,.lane-core::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.lane-core::before{left:-11px;border-left:6px solid var(--accent-dk);}
.lane-core::after{right:-11px;border-right:6px solid var(--accent-dk);}

/* --- Navegación (visible solo en móvil/tablet) --- */
.mnav{display:none;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
.mnav-btn{
  width:44px;height:44px;border:1px solid var(--line);color:var(--text);
  font-size:17px;line-height:1;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.mnav-btn:hover{border-color:var(--accent-dk);background:rgba(43,74,122,.06);}
.mdots{display:flex;gap:9px;}
.mdot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s var(--ease),transform .3s var(--ease);}
.mdot.is-on{background:var(--accent-dk);transform:scale(1.35);}

.closing-line{margin-top:clamp(30px,3.4vw,46px);text-align:center;font-family:var(--font-serif);font-size:clamp(19px,2vw,26px);line-height:1.6;color:var(--accent-dk);font-weight:400;max-width:860px;margin-inline:auto;}
.on-dark .closing-line{color:var(--accent-hi);}

/* ---------- OPERACIONES ---------- */
.scopes{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(36px,6vw,88px);align-items:start;}
.scope-list{border-top:1px solid var(--line);}
.scope{display:flex;align-items:baseline;gap:22px;padding:22px 8px 22px 0;border-bottom:1px solid var(--line-soft);transition:padding-left .4s var(--ease),background .4s var(--ease);}
.scope:hover{padding-left:14px;background:rgba(43,74,122,.05);}
.on-dark .scope:hover{background:rgba(110,143,191,.09);}
.scope-idx{font-family:var(--font-serif);font-size:14px;letter-spacing:.12em;color:var(--accent-text);flex:0 0 36px;font-weight:500;}
.scope-name{font-size:clamp(16.5px,1.5vw,19px);line-height:1.5;color:var(--text);font-weight:400;}

.scope-note{position:relative;padding:34px 34px 34px 40px;background:var(--card);border:1px solid var(--line);}
.quote-bar{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent-dk);}
.scope-note p{font-family:var(--font-serif);font-size:clamp(19px,1.8vw,23px);line-height:1.6;color:var(--text);}
.scope-note strong{font-weight:600;color:var(--accent-dk);}
.on-dark .scope-note strong{color:var(--accent-hi);}

/* ---------- DIFERENCIAL ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,26px);}
.value{
  background:var(--card);border:1px solid var(--line);padding:clamp(26px,2.8vw,36px);
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
/* Regla superior que se completa al pasar el cursor */
.value::before{content:"";position:absolute;left:0;top:0;height:2px;width:34px;background:var(--accent-dk);transition:width .55s var(--ease);}
.value:hover::before{width:100%;}
/* Escuadra inferior derecha: mismo recurso que el marco del mapa */
.value::after{
  content:"";position:absolute;right:12px;bottom:12px;width:10px;height:10px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:border-color .45s var(--ease);
}
.value:hover{transform:translateY(-5px);box-shadow:0 26px 56px -34px rgba(14,26,43,.42);border-color:var(--accent-dk);}
.value:hover::after{border-color:var(--accent-dk);}
.value-idx{
  font-family:var(--font-serif);font-size:34px;line-height:1;color:#7C8DA6;
  display:block;margin-bottom:18px;font-weight:500;
  transition:color .45s var(--ease);
}
.value:hover .value-idx{color:var(--accent-dk);}
.value-title{font-family:var(--font-serif);font-size:clamp(23px,2.1vw,29px);color:var(--text);font-weight:500;}
.value-text{margin-top:12px;color:var(--text-2);font-size:16px;line-height:1.75;}

/* =========================================================
   RED INTERNACIONAL — bloque oscuro con el mapa
   ========================================================= */
.section-network{background:linear-gradient(180deg,#0B1220 0%,#101C30 42%,#14233A 100%);}
.map-wrap{position:relative;margin-top:clamp(16px,2.2vw,30px);}
.map-frame{
  position:relative;width:100%;
  border:1px solid #2C3E57;
  background:
    radial-gradient(70% 120% at 50% 42%, rgba(30,52,86,.6) 0%, rgba(11,18,32,0) 70%),
    linear-gradient(180deg,#0C1524 0%,#101B2D 100%);
  padding:clamp(12px,1.8vw,26px);
}
.map-frame::before,.map-frame::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--accent);opacity:.8;}
.map-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.map-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}

.world{display:block;width:100%;height:auto;overflow:visible;}
.world-dots{stroke:#46658F;stroke-width:2.9;stroke-linecap:round;fill:none;}
.world-arc{stroke:url(#arcGrad);stroke-width:.9;fill:none;opacity:.45;stroke-linecap:round;}
.world-arc.flow{opacity:.95;stroke-width:1.5;stroke-dasharray:22 240;animation:arcFlow 11s linear infinite;}
.world-arcs .flow:nth-of-type(4n)  {animation-duration:14s;animation-delay:-3s;}
.world-arcs .flow:nth-of-type(4n+1){animation-duration:12s;animation-delay:-7s;}
.world-arcs .flow:nth-of-type(4n+2){animation-duration:16s;animation-delay:-11s;}
@keyframes arcFlow{to{stroke-dashoffset:-262;}}

.node{cursor:pointer;}
/* Solo el círculo invisible captura el puntero: evita que la aureola
   animada de un nodo robe el hover del nodo vecino. */
.node-halo,.node-ring,.node-core{pointer-events:none;}
.node-hit{pointer-events:all;}
.node-halo{fill:var(--accent);opacity:.16;transform-box:fill-box;transform-origin:center;animation:nodePulse 5.4s ease-in-out infinite;}
.node-ring{fill:none;stroke:var(--accent-hi);stroke-width:.9;opacity:.8;transition:stroke-width .3s var(--ease),opacity .3s var(--ease);}
.node-core{fill:#E4ECF7;transition:r .3s var(--ease);}
.node:hover .node-ring,.node.is-on .node-ring{stroke-width:1.6;opacity:1;}
.node:hover .node-core,.node.is-on .node-core{r:3.4;}
.node:focus{outline:none;}
.node:focus-visible .node-ring{stroke:#fff;stroke-width:2;}
@keyframes nodePulse{0%,100%{transform:scale(.75);opacity:.10;}50%{transform:scale(1.5);opacity:.30;}}

.map-tip{
  position:absolute;left:0;top:0;pointer-events:none;transform:translate(-50%,-140%);
  background:rgba(9,15,26,.96);border:1px solid var(--accent);padding:9px 15px;white-space:nowrap;
  opacity:0;transition:opacity .25s var(--ease);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.map-tip.is-below{transform:translate(-50%,40%);}
.map-tip.is-on{opacity:1;}
.map-tip b{display:block;font-family:var(--font-serif);font-size:17px;font-weight:500;color:#fff;letter-spacing:.02em;}
.map-tip i{display:block;font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hi);margin-top:2px;}

.map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:26px;padding-top:22px;border-top:1px solid #24344B;}
.map-legend-title{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9DAABC;margin-right:6px;}
.map-legend button{font-size:14px;letter-spacing:.03em;color:#C6D0DD;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease);}
.map-legend button:hover,.map-legend button.is-on{color:#fff;border-color:var(--accent-hi);}
.map-legend button span{color:#9DAABC;font-size:10.5px;letter-spacing:.12em;margin-left:5px;}

/* ---------- CONTACTO ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,30px);}
.contact-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);padding:clamp(32px,3.4vw,48px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 30px 64px -38px rgba(14,26,43,.5);border-color:var(--accent-dk);}
.contact-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-text);font-weight:500;}
.contact-mail{font-family:var(--font-serif);font-size:clamp(23px,2.6vw,34px);color:var(--text);margin-top:20px;word-break:break-word;line-height:1.2;}
.contact-desc{margin-top:16px;color:var(--text-2);font-size:16px;line-height:1.78;max-width:44ch;}
.contact-arrow{margin-top:30px;font-size:21px;color:var(--accent-dk);transition:transform .45s var(--ease);align-self:flex-start;}
.contact-card:hover .contact-arrow{transform:translateX(10px);}

/* Tarjeta destacada: oscura sobre sección clara */
.contact-card-accent{
  background:linear-gradient(158deg,#16283F 0%,#1C3050 100%);border-color:#1C3050;
  --text:#F2F4F7; --text-2:#C6D0DD; --accent-text:var(--accent-hi);
  color:var(--text-2);
}
.contact-card-accent .contact-arrow{color:var(--accent-hi);}
.contact-card-accent:hover{border-color:var(--accent);box-shadow:0 30px 64px -38px rgba(14,26,43,.75);}

.contact-note{margin-top:clamp(34px,4vw,50px);padding-top:30px;border-top:1px solid var(--line);color:var(--text-2);font-size:16px;line-height:1.85;max-width:900px;}

/* =========================================================
   FOOTER — cierre oscuro
   ========================================================= */
.site-footer{background:#0B1220;color:var(--text-2);padding:clamp(56px,7vw,88px) 0 40px;}
.footer-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,4vw,56px);padding-bottom:44px;border-bottom:1px solid var(--line-soft);}
.footer-brand{display:flex;align-items:center;gap:14px;color:var(--text);}
.footer-brand .brand-mark{width:38px;height:38px;color:var(--accent-hi);}
.footer-nav{display:flex;flex-direction:column;gap:12px;}
.footer-nav a{font-size:14px;letter-spacing:.06em;color:var(--text-2);transition:color .3s var(--ease);}
.footer-nav a:hover{color:var(--text);}
.footer-mails{display:flex;flex-direction:column;gap:12px;}
.footer-mails a{font-size:15px;color:var(--text);border-bottom:1px solid transparent;align-self:flex-start;transition:border-color .3s var(--ease);}
.footer-mails a:hover{border-color:var(--accent-hi);}

/* Pie legal: tamaño y contraste reales, no letra pequeña decorativa */
.footer-legal{padding:36px 0;border-bottom:1px solid var(--line-soft);display:grid;gap:16px;}
.footer-legal p{font-size:14px;line-height:1.8;color:var(--text-2);max-width:1000px;}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:26px;}
.footer-bottom p{font-size:13.5px;letter-spacing:.04em;color:var(--text-2);}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 26px;}
.footer-links a{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .3s var(--ease);
}
.footer-links a:hover,.footer-links a[aria-current="page"]{border-color:var(--accent-hi);}

/* =========================================================
   PÁGINAS LEGALES
   ========================================================= */
.legal-hero{background:linear-gradient(158deg,#101C30 0%,#0D1626 55%,#0B1220 100%);padding:clamp(132px,15vw,178px) 0 clamp(46px,5.5vw,70px);}
.legal-body{padding:clamp(48px,6vw,80px) 0 clamp(60px,7vw,96px);background:var(--paper-a);}
.legal-body .shell{max-width:860px;}
.legal-updated{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi);margin-top:22px;}
.legal-block{padding-top:30px;margin-top:30px;border-top:1px solid var(--line-soft);}
.legal-block:first-child{padding-top:0;margin-top:0;border-top:0;}
.legal-block h2{font-family:var(--font-serif);font-size:clamp(21px,2vw,26px);font-weight:500;color:var(--text);margin-bottom:12px;}
.legal-block p,.legal-block li{color:var(--text-2);font-size:15.5px;line-height:1.8;}
.legal-block p + p{margin-top:12px;}
.legal-block ul{margin-top:12px;display:grid;gap:8px;}
.legal-block li{padding-left:22px;position:relative;}
.legal-block li::before{content:"";position:absolute;left:0;top:12px;width:10px;height:1px;background:var(--accent-dk);}
.legal-block a{color:var(--accent-dk);border-bottom:1px solid var(--line);}
.legal-block a:hover{border-color:var(--accent-dk);}
.legal-block strong{color:var(--text);font-weight:600;}
.legal-back{display:inline-flex;align-items:center;gap:10px;margin-top:44px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:4px;}
.legal-back:hover{border-color:var(--accent-dk);}

/* =========================================================
   ANIMACIONES DE ENTRADA
   ========================================================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1320px){
  .site-header .brand-tag{display:none;}
  .nav{gap:26px;}
}

@media (max-width:1080px){
  .about-grid{grid-template-columns:1fr;gap:clamp(30px,5vw,44px);}
  .about-visual{margin-top:4px;}
  .trace{max-width:340px;}
  .values{grid-template-columns:repeat(2,1fr);}

  .method{grid-template-columns:1fr;}
  .rail{
    display:flex;overflow-x:auto;overscroll-behavior-x:contain;
    border-right:0;border-bottom:1px solid var(--line);padding:0;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .rail::-webkit-scrollbar{display:none;}
  .rail-line{left:0;right:0;top:auto;bottom:0;height:1px;width:auto;}
  .rail-line-fill{width:var(--fill,0%);height:1px;top:auto;bottom:0;}
  .rail-item{flex:0 0 auto;}
  .rail-btn{padding:16px 20px;gap:0 11px;}
  .rail-title{grid-column:3;white-space:nowrap;font-size:14px;}
  .method-stage{min-height:0;}
  .mnav{display:flex;}
  .scopes{grid-template-columns:1fr;}
  .pillars{grid-template-columns:repeat(3,1fr);}
  .pillar{border-bottom:1px solid var(--line-soft);padding-bottom:26px;}
  .pillar:nth-child(3n){border-right:0;}
}

@media (max-width:900px){
  html{scroll-padding-top:76px;}
  .nav-toggle{display:block;}
  .nav{
    position:fixed;inset:0 0 auto 0;top:0;z-index:2;padding:104px var(--gutter) 44px;
    flex-direction:column;align-items:flex-start;gap:0;
    background:linear-gradient(168deg,#101B2D 0%,#0B1220 100%);
    transform:translateY(-102%);transition:transform .6s var(--ease);
    max-height:100svh;overflow-y:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  }
  .nav.is-open{transform:translateY(0);}
  .nav-link{width:100%;padding:19px 0;font-size:15px;letter-spacing:.1em;border-bottom:1px solid #24344B;color:#F2F4F7;}
  .nav-link::after{display:none;}
  .lang{margin:28px 0 0;padding-left:0;gap:14px;}
  .lang::before{display:none;}
  .lang-on,.lang-off{font-size:14px;letter-spacing:.16em;}
  .footer-top{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .map-frame{padding:10px;}
  .map-legend{gap:10px 20px;}
}

@media (max-width:760px){
  .lanes{grid-template-columns:1fr;}
  .lane-core::before,.lane-core::after{display:none;}
  .lane-core{border-left:2px solid var(--accent-hi);}
}

@media (max-width:720px){
  body{font-size:16px;}
  .header-inner{height:70px;}
  .site-header.is-stuck .header-inner{height:62px;}
  .brand-mark{width:30px;height:30px;}
  .brand-name{font-size:17px;}

  .hero{min-height:auto;padding:128px 0 96px;}
  .hero-title{font-size:clamp(32px,9vw,44px);}
  .hero-claim{align-items:flex-start;gap:12px;font-size:11.5px;line-height:1.7;}
  .hero-claim .rule{width:28px;margin-top:9px;}
  .hero-scroll{display:none;}
  .hero-veil{background:linear-gradient(180deg, rgba(9,15,26,.82) 0%, rgba(9,15,26,.90) 55%, rgba(9,15,26,.97) 100%);}

  .values{grid-template-columns:1fr;}
  .rail-title{display:none;}
  .rail-btn{padding:15px 16px;}
  .mpanel-desc{font-size:16px;}
  .pillars{grid-template-columns:repeat(2,1fr);}
  .pillar{padding:26px 18px 22px 0;}
  .pillar:nth-child(3n){border-right:1px solid var(--line-soft);}
  .pillar:nth-child(2n){border-right:0;}
  .pillar:last-child{border-bottom:0;}
  .scope{gap:14px;padding:18px 0;}
  .scope-idx{flex-basis:30px;font-size:12.5px;}
  .section-head{text-align:left;}
  .map-legend-title{width:100%;margin-bottom:4px;}
}

@media (max-width:400px){
  .pillars{grid-template-columns:1fr;}
  .pillar{border-right:0!important;}
}

/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .reveal{opacity:1;transform:none;}
  .trace-dot{display:none;}
}

/* Impresión */
@media print{
  .site-header,.hero-bg,.hero-scroll,.nav-toggle,.map-tip{display:none!important;}
  body,.section,.hero,.site-footer{background:#fff!important;color:#111!important;}
  h1,h2,h3,.h2,.hero-title,.step-title,.value-title{color:#14233A!important;}
  .section,.hero{padding:24px 0;}
}