/* ============================================================
   EMPIRE INNOVATION — Sistema de diseño "Expediente institucional"
   Hoja única compartida por todas las páginas (ES y EN).
   Editar aquí una vez; se aplica a todo el sitio.
   Paleta derivada de activos reales de marca.
   ============================================================ */

/* ============================================================
   FUENTES AUTO-ALOJADAS (tarea 4, 08.2026)
   Descargadas de Google Fonts y servidas desde /assets/fonts/
   (cero peticiones a terceros; coherente con "sin rastreadores").
   Inter es variable (un archivo cubre 400-600); Source Serif 4
   lleva eje óptico (opsz) a peso 600; IBM Plex Mono es estática.
   Subsets: latin + latin-ext (cubren ES y EN completos).
   ============================================================ */
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/source-serif-4-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/source-serif-4-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4'; font-style:italic; font-weight:400; font-display:swap;
  src:url("/assets/fonts/source-serif-4-italic-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4'; font-style:italic; font-weight:400; font-display:swap;
  src:url("/assets/fonts/source-serif-4-italic-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================
   EMPIRE INNOVATION — v2 · Sistema "Expediente institucional"
   
   SISTEMA DE COLOR — identidad íntegra del logo oficial:
   · TINTA #0B0D11 y GRIS #6C6D71 → cuerpo
   · ROJO  #DF2526 → único acento: marca, acción, registro
   ============================================================ */
:root{
  --tinta:      #0B0D11;
  --rojo:       #DF2526;   /* logo — la "I" */
  --rojo-osc:   #A81B1E;
  --rojo-accion:#C01F22;  /* fondo de botón: contraste AA con texto blanco */
  --gris-logo:  #6C6D71;   /* logo — letras */
  --gris-claro: #9EA3AB;   /* derivado para texto sobre tinta */

  --papel:      #F5F6F8;
  --papel-2:    #FFFFFF;
  --linea:      #D9DCE3;
  --cuerpo:     #14171D;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --t: .18s ease;   /* cadencia única de estados interactivos */
  --ancho: 1120px;
  --radio: 2px;

  /* --- Tokens añadidos (tarea 5, 08.2026): consolidación de hex sueltos --- */
  --blanco:        #FFFFFF;  /* texto y bordes sobre tinta (distinto de --papel-2: superficie) */
  --texto-claro:   #EDEFF4;  /* texto principal sobre tinta (absorbe #E4E7EF, ΔE 3.2) */
  --texto-claro-2: #C9CEDA;  /* enlaces de navegación */
  --texto-claro-3: #B9BFCC;  /* subtítulos sobre tinta */
  --texto-medio:   #8A93A1;
  --gris-medio:    #7A8290;  /* micro-etiquetas y puntos de origen del mapa (absorbe #84878D, ΔE 5.4) */
  --texto-nota:    #5A6170;  /* notas, pies de foto, leyendas */
  --texto-suave:   #4A5160;  /* párrafos de tarjeta */
  --texto-denso:   #2A2F38;  /* párrafos destacados */
  /* canales RGB para variantes con alfa */
  --gris-claro-rgb: 158,163,171;
  --cuerpo-rgb:     20,23,29;
  --tinta-rgb:      11,13,17;
  --rojo-rgb:       223,37,38;
  /* escala tipográfica: 28 valores → 8 tokens (deriva máx. ±0.5px) + display en clamp() */
  --fs-micro:    0.625rem;  /* antes 9.5 y 10 */
  --fs-mini:     0.6875rem;  /* antes 10.5, 11 y 11.5 */
  --fs-dato:     0.8125rem;  /* antes 12.5, 13 y 13.5 */
  --fs-texto:    0.875rem;  /* antes 14 y 14.5 */
  --fs-cuerpo-s: 0.9375rem;
  --fs-cuerpo:   1rem;  /* antes 16 y 16.5 */
  --fs-lead:     1.0625rem;  /* antes 17 y 17.5 */
  --fs-h3:       1.3125rem;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--cuerpo);
  background-color:var(--papel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.025'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  font-size:var(--fs-cuerpo);
  line-height:1.6;
  font-synthesis:weight;
  -webkit-font-smoothing:antialiased;
}
p{ text-wrap:pretty; }

.wrap{ max-width:var(--ancho); margin:0 auto; padding:0 24px; }

.eyebrow .folio{ color:var(--rojo); font-weight:500; margin-right:10px; }
.eyebrow{
  font-family:var(--mono);
  font-size:var(--fs-mini);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
}

@keyframes subir{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.anim{ animation:subir .7s cubic-bezier(.22,.7,.3,1) both; }
.anim.d1{ animation-delay:.08s } .anim.d2{ animation-delay:.16s }
.anim.d3{ animation-delay:.24s } .anim.d4{ animation-delay:.34s }
@media (prefers-reduced-motion: reduce){
  .anim{ animation:none; }
  html{ scroll-behavior:auto; }
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--rojo);
  outline-offset:3px;
  box-shadow:0 0 0 2px var(--papel-2);
}
::selection{ background:var(--rojo); color:var(--blanco); }
section[id]{ scroll-margin-top:84px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--rojo-accion); color:var(--blanco);
  padding:10px 18px; font-size:var(--fs-dato); font-weight:600; text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

/* ============================================================
   CABECERA — logo oficial
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--tinta-rgb),.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(var(--gris-claro-rgb),.16);
}
.topbar-in{
  max-width:var(--ancho); margin:0 auto; padding:0 24px;
  height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo-link{ display:flex; align-items:center; }
.logo-link img{ height:38px; width:auto; display:block; }
.nav{ display:flex; gap:28px; align-items:center; align-self:stretch; }
.nav a{
  font-size:var(--fs-dato); font-weight:500; color:var(--texto-claro-2); text-decoration:none;
  letter-spacing:.01em;
  display:flex; align-items:center; padding:0 4px;
  transition:color var(--t);
}
.nav a:hover{ color:var(--blanco); }
.nav a[aria-current="page"]{ color:var(--blanco); border-bottom:1px solid var(--rojo); padding-bottom:2px; }
.nav a[aria-current="page"] b{ color:var(--rojo); }
.idiomas{
  font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.12em;
  color:var(--gris-claro); display:flex; gap:10px; align-items:center;
}
.idiomas .on{ color:var(--blanco); border-bottom:1px solid var(--rojo); padding-bottom:1px; }
.idiomas .off{ color:var(--gris-claro); text-decoration:none; transition:color var(--t); }
.idiomas .off:hover, .idiomas .off:focus-visible{ color:var(--blanco); }
.idiomas a, .idiomas span{ padding:12px 4px; }
@media (max-width:720px){
  .topbar-in{ flex-wrap:wrap; height:auto; padding:10px 24px 12px; row-gap:2px; }
  .nav{ order:4; width:100%; gap:18px; }
  .nav a{ padding:4px 0; }
  .logo-link img{ height:32px; }
  .hero{ padding:72px 0 128px; }
  .seccion{ padding:64px 0; }
  .compliance{ padding:64px 0; }
  .contacto{ padding:64px 0; }
}
@media (max-width:560px){
  .paso{ grid-template-columns:1fr; gap:8px; padding:22px 0; }
  .paso .num{ padding-top:0; }
}

/* ============================================================
   HERO — tinta con retícula cartográfica neutra
   ============================================================ */
.hero{
  background-color:var(--tinta);
  background-image:
    radial-gradient(ellipse 900px 480px at 85% -10%, rgba(var(--gris-claro-rgb),.09), transparent 60%),
    repeating-linear-gradient(0deg,  rgba(var(--gris-claro-rgb),.05) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, rgba(var(--gris-claro-rgb),.05) 0 1px, transparent 1px 84px);
  color:var(--texto-claro);
  padding:100px 0 150px;
}
.hero{ position:relative; overflow:hidden; }
.hero .wrap{ position:relative; z-index:2; }
.hero-mapa{
  position:absolute; z-index:1;
  right:-8%; top:50%; transform:translateY(-50%);
  width:min(52vw, 800px); height:auto;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 26%);
  mask-image:linear-gradient(to right, transparent, #000 26%);
}
.hm-base, .hm-orig, .hm-dest{ fill:none; stroke-linecap:round; stroke-width:5.4; }
/* Nota: el banner del hero se sirve como assets/hero-corredor.svg (img).
   El mapa animado con interacción vive en la sección #corredor (SVG inline). */
.hm-base{ stroke:rgba(var(--gris-claro-rgb),.12); }
.hm-orig{ stroke:rgba(var(--gris-claro-rgb),.22); }
.hm-dest{ stroke:rgba(237,239,244,.32); }
.hm-arco{
  fill:none; stroke:rgba(var(--rojo-rgb),.55); stroke-width:2.2;
  stroke-linecap:round; stroke-dasharray:3 6;
  animation:fluir 1.6s linear infinite;
}
.hm-alia{ opacity:.5; }
.hm-nucleo{ fill:var(--rojo); }
.hm-pulso{
  fill:none; stroke:var(--rojo); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
  animation:pulsar 2.6s cubic-bezier(.2,.6,.4,1) infinite;
}
@media (prefers-reduced-motion: reduce){
  .hm-arco{ animation:none; stroke-dasharray:none; }
  .hm-pulso{ animation:none; opacity:.35; }
}
@media (max-width:1000px){
  .hero-mapa{ display:none; }
}
.hero .eyebrow{ color:var(--gris-claro); margin-bottom:22px; }
.regla-roja{
  width:44px; height:3px; background:var(--rojo);
  margin-bottom:26px;
}
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(34px, 5.4vw, 58px);
  line-height:1.12;
  letter-spacing:-.012em;
  max-width:21ch;
  text-wrap:balance;
  margin-bottom:26px;
}
.hero h1 .suave{
  color:var(--gris-claro);
}
.hero p.sub{
  max-width:62ch;
  font-size:var(--fs-lead);
  line-height:1.75;
  color:var(--texto-claro-3);
  margin-bottom:40px;
}
.botones{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  font-size:var(--fs-texto); font-weight:600; letter-spacing:.02em;
  text-decoration:none;
  padding:13px 26px;
  border-radius:var(--radio);
  transition:background-color var(--t), border-color var(--t), color var(--t);
}
.btn-rojo{ background:var(--rojo-accion); color:var(--blanco); border:1px solid var(--rojo-accion); }
.btn-rojo:hover{ background:var(--rojo-osc); border-color:var(--rojo-osc); }
.btn:active, .btn-top:active{ transform:translateY(1px); }
.btn-linea{ background:transparent; color:var(--texto-claro); border:1px solid rgba(var(--gris-claro-rgb),.45); }
.btn-linea:hover{ border-color:var(--blanco); color:var(--blanco); }

/* ============================================================
   PLACA REGISTRAL — certificado (guilloché, roseta, esquinas)
   ============================================================ */
.placa-zona{ margin-top:-84px; position:relative; z-index:5; }
.placa{
  background-color:var(--papel-2);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%2728%27%3E%3Cpath%20d%3D%27M0%2014%20q15%20-13%2030%200%20t30%200%20t30%200%20t30%200%27%20fill%3D%27none%27%20stroke%3D%27%2314171D%27%20stroke-opacity%3D%27.045%27%2F%3E%3Cpath%20d%3D%27M0%2014%20q15%2013%2030%200%20t30%200%20t30%200%20t30%200%27%20fill%3D%27none%27%20stroke%3D%27%2314171D%27%20stroke-opacity%3D%27.045%27%2F%3E%3C%2Fsvg%3E");
  border:2px solid var(--cuerpo);
  position:relative;
  box-shadow:0 22px 50px -28px rgba(var(--tinta-rgb),.5);
  padding:26px 36px 32px;
}
.placa::after{
  content:"";
  position:absolute; inset:6px;
  border:1px solid rgba(var(--cuerpo-rgb),.22);
  background:
    linear-gradient(rgba(var(--cuerpo-rgb),.7),rgba(var(--cuerpo-rgb),.7)) left 0 top 0/14px 1.5px,
    linear-gradient(rgba(var(--cuerpo-rgb),.7),rgba(var(--cuerpo-rgb),.7)) left 0 top 0/1.5px 14px,
    linear-gradient(rgba(var(--cuerpo-rgb),.7),rgba(var(--cuerpo-rgb),.7)) right 0 top 0/14px 1.5px,
    linear-gradient(rgba(var(--cuerpo-rgb),.7),rgba(var(--cuerpo-rgb),.7)) right 0 top 0/1.5px 14px,
    linear-gradient(rgba(var(--cuerpo-rgb),.7),rgba(var(--cuerpo-rgb),.7)) left 0 bottom 0/14px 1.5px,
    linear-gradient(rgba(var(--cuerpo-rgb),.7),rgba(var(--cuerpo-rgb),.7)) left 0 bottom 0/1.5px 14px,
    linear-gradient(rgba(var(--cuerpo-rgb),.7),rgba(var(--cuerpo-rgb),.7)) right 0 bottom 0/14px 1.5px,
    linear-gradient(rgba(var(--cuerpo-rgb),.7),rgba(var(--cuerpo-rgb),.7)) right 0 bottom 0/1.5px 14px;
  background-repeat:no-repeat;
  pointer-events:none;
}
.placa-cab{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--gris-logo);
  padding-bottom:14px; margin-bottom:24px;
  border-bottom:1px solid var(--cuerpo);
}
.placa-cab b{ font-weight:500; color:var(--cuerpo); }
.placa-cuerpo{
  display:grid; grid-template-columns:300px 1fr;
  gap:40px; align-items:center;
}
.certdoc{ margin:0; width:300px; flex-shrink:0; }
.certdoc img{
  width:100%; display:block;
  border:1px solid var(--linea);
  box-shadow:0 12px 30px -14px rgba(var(--tinta-rgb),.38);
}
.certdoc figcaption{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris-logo);
  margin-top:10px; text-align:center;
}
.placa-datos{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px 36px;
}
.dato .k{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--gris-logo); margin-bottom:5px;
}
.dato .v{
  font-family:var(--mono); font-size:var(--fs-dato); font-weight:500;
  color:var(--cuerpo); line-height:1.5;
}
.dato .v .az{ color:var(--rojo); }
@media (max-width:860px){
  .placa{ padding:22px 22px 28px; }
  .placa-cuerpo{ grid-template-columns:1fr; gap:26px; justify-items:center; }
  .certdoc{ width:min(300px, 82%); }
  .placa-datos{ grid-template-columns:1fr; gap:18px; width:100%; }
}

/* ============================================================
   CORREDOR — infografía cartográfica (dot map)
   ============================================================ */
.mapa-marco{
  border:1px solid var(--linea);
  background:var(--papel-2);
  padding:26px 20px 16px;
  margin:0;
}
.mapa{ width:100%; height:auto; display:block; }
.pt-base, .pt-orig, .pt-dest{
  fill:none; stroke-linecap:round; stroke-width:5.4;
}
.pt-base{ stroke:var(--linea); }
.pt-orig{ stroke:var(--gris-medio); }
.pt-dest{ stroke:var(--cuerpo); }
.arco{
  fill:none; stroke:var(--rojo); stroke-width:2.4;
  stroke-linecap:round; stroke-dasharray:3 6;
  animation:fluir 1.6s linear infinite;
}
.arco-alia{ opacity:.5; }
@keyframes fluir{ to{ stroke-dashoffset:-18; } }
.madrid .nucleo{ fill:var(--rojo); }
.madrid .pulso{
  fill:none; stroke:var(--rojo); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
  animation:pulsar 2.6s cubic-bezier(.2,.6,.4,1) infinite;
}
@keyframes pulsar{
  0%{ transform:scale(.35); opacity:.9; }
  100%{ transform:scale(2); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .arco{ animation:none; stroke-dasharray:none; opacity:.8; }
  .madrid .pulso{ animation:none; opacity:.35; }
}
.etq{
  font-family:var(--mono); font-size:var(--fs-dato); letter-spacing:.18em;
  text-anchor:middle;
  paint-order:stroke; stroke:var(--papel-2); stroke-width:5px;
}
.etq-orig{ fill:var(--gris-logo); }
.etq-dest{ fill:var(--cuerpo); font-weight:500; }
.etq-madrid{ fill:var(--rojo); font-size:var(--fs-mini); letter-spacing:.16em; font-weight:500; text-anchor:end; }
.mapa-pausa{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-nota);
  background:none; border:1px solid var(--linea); border-radius:var(--radio);
  padding:6px 10px; cursor:pointer; margin-left:auto;
  transition:color var(--t), border-color var(--t);
}
.mapa-pausa:hover, .mapa-pausa:focus-visible{ color:var(--cuerpo); border-color:var(--gris-logo); }
.mapa-pausado .arco{ animation-play-state:paused; }
.mapa-pausado .madrid .pulso{ animation-play-state:paused; }
.flujo-nota{ margin-top:22px; max-width:66ch; font-size:var(--fs-cuerpo-s); line-height:1.7; color:var(--texto-nota); }
.mapa-leyenda{
  display:flex; gap:26px; flex-wrap:wrap;
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--linea);
  font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.14em;
  color:var(--texto-nota);
}
.mapa-leyenda i{
  width:9px; height:9px; border-radius:50%;
  display:inline-block; margin-right:8px; vertical-align:-1px;
}
.lg-o{ background:var(--gris-medio); } .lg-d{ background:var(--cuerpo); } .lg-e{ background:var(--rojo); }
@media (max-width:720px){
  .mapa-marco{ padding:16px 10px 12px; }
  .etq{ font-size:30px; stroke-width:9px; }
  .etq-madrid{ font-size:22px; }
  .mapa-leyenda{ gap:8px 20px; font-size:var(--fs-micro); }
}

/* ============================================================
   SECCIONES SOBRE PAPEL
   ============================================================ */
.seccion{ padding:96px 0; }
.cab-seccion{ margin-bottom:52px; max-width:640px; }
.cab-seccion .eyebrow{ color:var(--gris-logo); margin-bottom:14px; }
.cab-seccion h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px, 3.4vw, 38px);
  line-height:1.18; letter-spacing:-.01em;
  text-wrap:balance;
}

.pilares{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
}
.pilar{
  background:var(--papel-2);
  padding:34px 30px 38px;
}
.pilar .tag{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.22em;
  color:var(--gris-logo); text-transform:uppercase;
  display:inline-block; margin-bottom:18px;
  border:1px solid var(--linea);
  padding:4px 9px;
  transition:color .18s, border-color .18s;
}
@media (hover:hover){
  .pilar:hover .tag{ color:var(--rojo); border-color:var(--rojo); }
}
.pilar h3{
  font-family:var(--serif); font-size:var(--fs-h3); font-weight:600;
  margin-bottom:12px; letter-spacing:-.005em;
}
.pilar p{ font-size:var(--fs-texto); line-height:1.7; color:var(--texto-suave); }
@media (max-width:860px){
  .pilares{ grid-template-columns:1fr; }
}

.proceso-zona{ background:var(--papel-2); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.pasos{ display:grid; gap:0; max-width:820px; }
.paso{
  display:grid; grid-template-columns:88px 1fr; gap:26px;
  padding:26px 0;
  border-bottom:1px solid var(--linea);
}
.paso:last-child{ border-bottom:none; }
.paso .num{
  font-family:var(--mono); font-size:var(--fs-dato); font-weight:500;
  color:var(--rojo);
  padding-top:3px;
}
.paso h3{
  font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:6px;
}
.paso p{ font-size:var(--fs-texto); color:var(--texto-suave); max-width:56ch; }
.nota-prudencial{
  margin-top:34px;
  font-family:var(--serif); font-style:italic;
  font-size:var(--fs-cuerpo-s); color:var(--texto-nota);
  border-left:2px solid var(--rojo);
  padding-left:18px;
  max-width:60ch;
}

/* ============================================================
   FRANJA CUMPLIMIENTO — tinta con regla roja
   ============================================================ */
.compliance{
  background:var(--tinta);
  border-top:3px solid var(--rojo);
  color:var(--blanco);
  padding:88px 0;
}
.compliance .cita{
  text-wrap:balance;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px, 3.2vw, 34px);
  line-height:1.3; letter-spacing:-.008em;
  max-width:24ch;
  margin-bottom:36px;
}
.marcos{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;
  list-style:none; margin-top:0; padding:0;
}
.marcos li{
  font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.08em;
  border:1px solid rgba(var(--gris-claro-rgb),.4);
  padding:7px 12px;
  color:var(--linea);
  white-space:nowrap;
}
a.ir{
  color:var(--blanco); text-decoration:none;
  font-size:var(--fs-texto); font-weight:600;
  border-bottom:1px solid var(--rojo);
  padding-bottom:2px;
  transition:color var(--t);
}
a.ir::after{
  content:"→"; display:inline-block; margin-left:10px;
  transition:transform var(--t);
}
a.ir:hover{ color:var(--gris-claro); }
a.ir + a.ir{ margin-left:28px; }
main .seccion a.ir{ color:var(--cuerpo); }
main .seccion a.ir:hover{ color:var(--texto-suave); }
.reg-enlace{ margin-top:18px; }
a.ir:hover::after{ transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){
  a.ir::after{ transition:none; }
  a.ir:hover::after{ transform:none; }
}
.compliance .verif{
  margin-top:26px;
  font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.06em;
  color:var(--texto-medio); max-width:72ch; line-height:1.7;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto{
  background:var(--papel-2);
  border-top:1px solid var(--linea);
  color:var(--cuerpo);
  padding:96px 0;
}
.contacto .eyebrow{ color:var(--gris-logo); margin-bottom:18px; }
.contacto h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px, 3.6vw, 40px);
  margin-bottom:28px;
}
.email-grande{
  font-family:var(--mono); font-weight:500;
  font-size:clamp(17px, 2.6vw, 24px);
  color:var(--cuerpo); text-decoration:none;
  border-bottom:1px solid var(--rojo);
  padding-bottom:3px;
}
.email-grande:hover{ color:var(--rojo); }
.consulta-nota{
  margin-top:22px;
  font-family:var(--serif); font-style:italic;
  font-size:var(--fs-cuerpo-s); color:var(--texto-nota); max-width:58ch;
}
.contacto .datos{
  margin-top:30px;
  font-size:var(--fs-texto); color:var(--texto-nota); line-height:1.9;
}

/* ============================================================
   PIE
   ============================================================ */
.pie{
  background:var(--tinta);
  border-top:1px solid rgba(var(--gris-claro-rgb),.16);
  padding:40px 0 46px;
  color:var(--gris-claro);
  font-size:var(--fs-dato);
}
.pie-in{
  display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.pie .col{ line-height:1.9; }
.pie .mono{ font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.14em; }
.pie img{ height:26px; width:auto; display:block; margin-bottom:12px; opacity:.95; }
.pie a{ color:var(--texto-claro-3); text-decoration:none; transition:color var(--t); }
.pie a:hover{ color:var(--blanco); }
.pie .legal a{ margin-right:18px; }
.pie .rid{ color:var(--texto-claro-3); }
.pie .rid b{ color:var(--texto-claro); font-weight:500; }

/* ============================================================
   INTERIORES
   ============================================================ */
.hero-int{
  background-color:var(--tinta);
  background-image:
    repeating-linear-gradient(0deg,  rgba(var(--gris-claro-rgb),.05) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, rgba(var(--gris-claro-rgb),.05) 0 1px, transparent 1px 84px);
  color:var(--texto-claro);
  padding:72px 0 76px;
}
.hero-int .eyebrow{ color:var(--gris-claro); margin-bottom:18px; }
.hero-int h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(30px, 4.2vw, 46px);
  line-height:1.14; letter-spacing:-.012em;
  max-width:24ch; text-wrap:balance; margin-bottom:18px;
}
.hero-int p.sub{ max-width:64ch; font-size:var(--fs-cuerpo); line-height:1.75; color:var(--texto-claro-3); }
.bloques{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea); border:1px solid var(--linea); }
.bloque{ background:var(--papel-2); padding:34px 32px 38px; }
.bloque h3{ font-family:var(--serif); font-size:var(--fs-h3); font-weight:600; margin-bottom:12px; }
.bloque p{ font-size:var(--fs-texto); line-height:1.75; color:var(--texto-suave); }
@media (max-width:860px){ .bloques{ grid-template-columns:1fr; } }
.ml-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); }
.ml{ background:var(--papel-2); padding:24px 22px; }
.ml .cod{ font-family:var(--mono); font-size:var(--fs-dato); font-weight:500; color:var(--rojo); letter-spacing:.1em; display:block; margin-bottom:8px; }
.ml .nom{ font-family:var(--serif); font-size:var(--fs-cuerpo); font-weight:600; display:block; margin-bottom:6px; }
.ml p{ font-size:var(--fs-dato); line-height:1.6; color:var(--texto-nota); }
@media (max-width:860px){ .ml-grid{ grid-template-columns:1fr; } }
.nota-pie{ margin-top:22px; font-size:var(--fs-dato); color:var(--texto-nota); font-style:italic; font-family:var(--serif); max-width:74ch; }
.tabla-fases{ width:100%; border-collapse:collapse; max-width:880px; }
.tabla-fases td{ padding:18px 0; border-bottom:1px solid var(--linea); vertical-align:top; }
.tabla-fases td.f{ font-family:var(--mono); font-size:var(--fs-dato); color:var(--rojo-accion); width:92px; padding-top:21px; }
.tabla-fases td.t{ font-family:var(--serif); font-size:var(--fs-lead); font-weight:600; width:34%; padding-right:24px; }
.tabla-fases td.i{ font-family:var(--mono); font-size:var(--fs-dato); color:var(--texto-suave); line-height:1.8; }
@media (max-width:720px){ .tabla-fases td.t{ width:auto; display:block; border:none; padding-bottom:2px; } .tabla-fases td.i{ display:block; padding-top:0; } .tabla-fases tr{ display:block; border-bottom:1px solid var(--linea); padding:14px 0; } .tabla-fases td{ border:none; padding:4px 0; } }
.tabla-reg{ width:100%; max-width:760px; border-collapse:collapse; }
.tabla-reg td{ padding:13px 0; border-bottom:1px solid var(--linea); font-size:var(--fs-texto); vertical-align:top; }
.tabla-reg th.k{ text-align:left; font-weight:inherit; font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.16em; text-transform:uppercase; color:var(--gris-logo); width:38%; padding-right:20px; padding-top:16px; }
.tabla-reg td.v{ font-family:var(--mono); font-size:var(--fs-dato); color:var(--cuerpo); }
.principios{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 44px; max-width:900px; }
.principio h3{ font-family:var(--serif); font-size:18px; font-weight:600; margin-bottom:8px; }
.principio h3 b{ color:var(--rojo); font-weight:600; font-family:var(--mono); font-size:var(--fs-dato); margin-right:10px; letter-spacing:.08em; }
.principio p{ font-size:var(--fs-texto); line-height:1.7; color:var(--texto-suave); }
@media (max-width:720px){ .principios{ grid-template-columns:1fr; } }
.marco-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea); border:1px solid var(--linea); max-width:940px; }
.marco{ background:var(--papel-2); padding:26px 26px 30px; }
.marco .ref{ font-family:var(--mono); font-size:var(--fs-dato); font-weight:500; color:var(--rojo); display:block; margin-bottom:8px; letter-spacing:.06em; }
.marco p{ font-size:var(--fs-dato); line-height:1.7; color:var(--texto-suave); }
@media (max-width:720px){ .marco-grid{ grid-template-columns:1fr; } }
.reg-grid{ display:grid; grid-template-columns:420px 1fr; gap:44px; align-items:center; }
@media (max-width:860px){ .reg-grid{ grid-template-columns:1fr; gap:26px; } }
.kyc-lista{ max-width:820px; }
.kyc{ display:grid; grid-template-columns:52px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--linea); }
.kyc:last-child{ border-bottom:none; }
.kyc .n{ font-family:var(--mono); font-size:var(--fs-dato); color:var(--rojo-accion); padding-top:3px; }
.kyc h3{ font-family:var(--serif); font-size:var(--fs-lead); font-weight:600; margin-bottom:4px; }
.kyc p{ font-size:var(--fs-dato); color:var(--texto-suave); line-height:1.7; }
.banda-cta{ background:var(--tinta); border-top:3px solid var(--rojo); color:var(--texto-claro); padding:64px 0; }
.banda-cta h2{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3vw,30px); margin-bottom:20px; max-width:36ch; text-wrap:balance; }
.certdoc a, .cert-mini a{ display:block; }
.certdoc img, .cert-mini img{ transition:box-shadow var(--t); }
.certdoc a:hover img, .cert-mini a:hover img{ box-shadow:0 14px 36px -12px rgba(var(--tinta-rgb),.55); }
/* Retrato del fundador (Compañía 01.1) — foto tratada como lámina de expediente */
.fundador-grid{ display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:start; }
.retrato{ margin:0; }
.retrato img{ width:100%; height:auto; display:block; border:1px solid var(--linea); }
.retrato figcaption{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris-logo); margin-top:10px;
}
@media (max-width:860px){
  .fundador-grid{ grid-template-columns:1fr; gap:26px; }
  .retrato{ max-width:260px; }
}
.cert-mini{ max-width:420px; margin:0; }
.cert-mini img{ width:100%; display:block; border:1px solid var(--linea); box-shadow:0 12px 30px -14px rgba(var(--tinta-rgb),.38); }
.cert-mini figcaption{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--gris-logo); margin-top:10px; text-align:center; }
.nav a b{ font-family:var(--mono); font-size:var(--fs-micro); color:var(--texto-nota); margin-right:7px; font-weight:500; letter-spacing:.08em; }
.btn-top{
  font-size:var(--fs-dato); font-weight:600; color:var(--blanco); text-decoration:none;
  border:1px solid var(--rojo); padding:8px 16px; border-radius:var(--radio);
  transition:background-color var(--t), color var(--t); white-space:nowrap;
}
.btn-top:hover, .btn-top.act{ background:var(--rojo-accion); border-color:var(--rojo-accion); }
.compromisos{ padding:54px 0 0; }
.comp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); }
.comp{ background:var(--papel-2); padding:26px 24px 28px; }
.comp .n{ font-family:var(--serif); font-weight:600; font-size:34px; display:block; margin-bottom:9px; color:var(--cuerpo); }
.comp .l{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em; color:var(--gris-logo); line-height:1.7; display:block; text-transform:uppercase; }
@media (max-width:860px){ .comp-grid{ grid-template-columns:1fr 1fr; } }
.sla{ margin-top:16px; font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.14em; color:var(--gris-logo); }
.pie-tit{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.2em; color:var(--gris-medio); margin-bottom:12px; }
.pie .col a{ display:block; padding:5px 0; margin-bottom:2px; font-size:var(--fs-dato); }
.pie .tagline{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.18em; color:var(--gris-medio); margin:10px 0 14px; }
.pie-baja{
  border-top:1px solid rgba(var(--gris-claro-rgb),.14); margin-top:30px; padding-top:18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:var(--fs-mini); color:var(--gris-medio);
}

/* --- Componentes específicos de Capacidades --- */
.chips-claro{ display:flex; flex-wrap:wrap; gap:10px; }
.chips-claro span{
  font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.08em;
  border:1px solid var(--linea); background:var(--papel-2);
  padding:8px 13px; color:var(--texto-denso); white-space:nowrap;
}
.ref-nda{
  margin-top:30px; font-family:var(--serif); font-style:italic;
  font-size:var(--fs-cuerpo-s); color:var(--texto-nota); max-width:66ch;
  border-left:2px solid var(--rojo); padding-left:18px;
}

/* ============================================================
   IMPRESIÓN — la audiencia real (compliance, KYC) archiva en PDF.
   El expediente digital debe imprimir como documento: sin cromo,
   sin fondos de tinta, texto en tinta sobre blanco.
   ============================================================ */
@media print{
  .topbar, .skip, .botones, .banda-cta, .btn, .idiomas, .hero-mapa, .mapa-pausa{ display:none !important; }
  body{ background:#fff; }
  .hero, .hero-int, .compliance, .contacto, .compromisos, .proceso-zona, .pie{
    background:#fff !important; border-color:#000;
  }
  .hero *, .hero-int *, .compliance *, .contacto *, .compromisos *, .pie *{
    color:#000 !important;
  }
  .hero h1 .suave{ color:#444 !important; }
  .placa{ box-shadow:none; }
  .pie{ border-top:2px solid #000; }
  a{ text-decoration:none; }
  .arco, .hm-arco{ animation:none; }
}

/* Páginas legales — prosa de documento, mismo vocabulario del expediente */
.legal{ padding:120px 0 84px; }
.legal h1{ font-family:var(--serif); font-weight:600; font-size:clamp(28px, 3.6vw, 40px); letter-spacing:-.01em; margin-bottom:10px; }
.legal .fecha{ font-family:var(--mono); font-size:var(--fs-mini); letter-spacing:.14em; text-transform:uppercase; color:var(--gris-logo); margin-bottom:44px; }
.legal h2{ font-family:var(--serif); font-size:var(--fs-h3); font-weight:600; margin:40px 0 12px; }
.legal p, .legal li{ max-width:70ch; font-size:var(--fs-cuerpo-s); line-height:1.8; color:var(--texto-denso); }
.legal ul{ margin:10px 0 14px 20px; }
.legal li{ margin-bottom:6px; }
.legal .tabla-reg{ margin:18px 0 8px; }
.legal a{ color:var(--cuerpo); }

/* Filetes de tabla compuesta (booktabs): abre en tinta, cierra firme */
.tabla-reg, .tabla-fases{ border-top:2px solid var(--cuerpo); }
.tabla-reg tr:last-child th, .tabla-reg tr:last-child td,
.tabla-fases tr:last-child td{ border-bottom:1px solid var(--cuerpo); }
