/* ==========================================================================
   LATENTMINE — SITIO DEFINITIVO · MULTI-PÁGINA
   Lujo editorial claro-dominante + BANDAS que alternan claro/oscuro con
   costuras diagonales y veta de oro. Dos climas (claro / oscuro), ambos
   con bandas de ambas polaridades. Cero recursos remotos.

   Sistema de bandas:
   .b-main     → banda dominante   (clara en clima claro · oscura en clima oscuro)
   .b-contrast → banda opuesta     (navy en clima claro  · hueso en clima oscuro)
   .b-navy     → banda navy profunda, SIEMPRE oscura (drama constante)
   El oro #C9A227 y el núcleo del triskel son constantes en todo clima.
   ========================================================================== */
:root{
  /* paleta oficial */
  --gold:#C9A227;
  --gold-hi:#DCB43F;
  --gold-glow:#F0C24A;
  --gold-deep:#B8862B;
  --navy:#0E1A2C;
  --bone:#ECE5DA;
  --white:#FFFFFF;

  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Cascadia Code",Consolas,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
  --elastic:cubic-bezier(.2,1.8,.3,1);
  --pad-section:clamp(84px,12vh,150px);
  --pad-x:clamp(20px,5vw,64px);
  --maxw:1240px;

  /* ---- clima CLARO (defecto): dominante claro, contraste navy ---- */
  color-scheme:light;
  --bg-main:#FFFFFF;
  --bg-main-soft:#F8F5EF;
  --bg-contrast:#13233A;
  --bg-contrast-2:#0E1A2C;
  --bg-navy:#0E1A2C;
  --bg-navy-2:#0A1422;
  --header-bg:rgba(255,255,255,.86);
  --hdr-ink:#0E1A2C;
  --hdr-text:#5A6472;
  --hdr-muted:#7d8794;
  --hdr-line:rgba(14,26,44,.10);
  --hdr-tri:#0E1A2C;
  --spine:rgba(184,134,43,.5);
}
:root[data-theme="dark"]{
  /* ---- clima OSCURO "subsuelo": dominante oscuro, contraste hueso ---- */
  color-scheme:dark;
  --bg-main:#0A0F16;
  --bg-main-soft:#0d1420;
  --bg-contrast:#ECE5DA;
  --bg-contrast-2:#F3EDE3;
  --bg-navy:#0E1A2C;
  --bg-navy-2:#0A1422;
  --header-bg:rgba(10,15,22,.85);
  --hdr-ink:#ECE5DA;
  --hdr-text:#a8b1bd;
  --hdr-muted:#7d8794;
  --hdr-line:rgba(236,229,218,.10);
  --hdr-tri:#ECE5DA;
  --spine:rgba(201,162,39,.45);
}

/* ==========================================================================
   TOKENS POR POLARIDAD DE BANDA
   Un mismo mercado de variables (--ink/--text/--card/--foil-*…) que cada
   banda resuelve según sea clara u oscura EN EL CLIMA ACTUAL.
   ========================================================================== */
/* banda de polaridad CLARA (b-main en claro · b-contrast en oscuro) */
.b-main,
:root[data-theme="dark"] .b-contrast{
  --ink:#0E1A2C;
  --text:#5A6472;
  --muted:#7d8794;
  --line:rgba(14,26,44,.14);
  --line-soft:rgba(14,26,44,.08);
  --card:#FFFFFF;
  --card-hover:#FDFBF7;
  --card-border:rgba(14,26,44,.10);
  --tri:#0E1A2C;
  --gold-text:#B8862B;
  --foil-a:#DCB43F; --foil-b:#C9A227; --foil-c:#B8862B;   /* foil profundo, legible en claro */
  --shadow:0 24px 60px -30px rgba(14,26,44,.25);
  --shadow-soft:0 12px 40px -20px rgba(14,26,44,.16);
  --input-bg:#FFFFFF;
  --spot:rgba(201,162,39,.13);
  color:var(--text);
}
/* banda de polaridad OSCURA (b-contrast en claro · b-navy siempre · b-main en oscuro) */
.b-contrast,
.b-navy,
:root[data-theme="dark"] .b-main{
  --ink:#ECE5DA;
  --text:#a8b1bd;
  --muted:#8b95a3;
  --line:rgba(236,229,218,.16);
  --line-soft:rgba(236,229,218,.09);
  --card:rgba(236,229,218,.045);
  --card-hover:rgba(236,229,218,.075);
  --card-border:rgba(236,229,218,.12);
  --tri:#ECE5DA;
  --gold-text:#DCB43F;
  --foil-a:#F0C24A; --foil-b:#DCB43F; --foil-c:#C9A227;   /* foil luminoso sobre oscuro */
  --shadow:0 24px 60px -30px rgba(0,0,0,.65);
  --shadow-soft:0 12px 40px -20px rgba(0,0,0,.5);
  --input-bg:rgba(236,229,218,.05);
  --spot:rgba(240,194,74,.10);
  color:var(--text);
}
/* fondos de banda (planos: las costuras empatan al pixel) */
.b-main{background:var(--bg-main)}
.b-main.soft{background:var(--bg-main-soft)}
.b-contrast{background:var(--bg-contrast)}
.b-navy{background:var(--bg-navy)}

/* ============================= BASE ============================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}   /* clip (no hidden): no rompe el header sticky */
body{
  background:var(--bg-main);
  color:var(--hdr-text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .35s ease;
}
::selection{background:var(--gold);color:var(--navy)}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

h1,h2,h3,.serif{font-family:var(--serif);color:var(--ink);font-weight:400;letter-spacing:-.01em}
/* remates tipográficos finos: títulos sin viudas raras, párrafos mejor cortados
   (progresivos: se ignoran donde el navegador no los soporte) */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* texto "foil" dorado (se recalibra por banda) */
.gf{
  font-style:normal;
  background:linear-gradient(115deg,var(--foil-a) 0%,var(--foil-b) 45%,var(--foil-c) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.kicker{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-text);
  display:flex;align-items:center;gap:16px;
}
.kicker::before{content:"";display:block;width:44px;height:1px;background:var(--gold);flex:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
section{padding-top:var(--pad-section);padding-bottom:var(--pad-section);scroll-margin-top:84px;position:relative}
.hairline{border:none;border-top:1px solid var(--line-soft);max-width:var(--maxw);margin:0 auto}

.sec-head{max-width:760px;margin-bottom:clamp(40px,6vh,72px);position:relative}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;margin-top:22px;letter-spacing:-.014em}
.sec-head p{margin-top:18px;font-size:1.06rem;max-width:640px;line-height:1.7}
/* ritmo en pantallas pequeñas: secciones más compactas, sin vacíos */
@media (max-width:760px){
  :root{--pad-section:clamp(64px,9vh,104px)}
  .sec-head{margin-bottom:clamp(30px,5vh,48px)}
}

/* monograma "3 puntitos" — motivo de marca (equipo, sellos, detalles) */
.mono3{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}

/* barra fina de progreso de scroll */
#pbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi));
  transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* veta conductora vertical: se dibuja al bajar (solo pantallas anchas) */
main{position:relative}
#spine{
  position:absolute;top:0;width:60px;z-index:1;
  pointer-events:none;display:none;
  left:calc((100% - var(--maxw))/2 - 66px);
}
@media (min-width:1280px){ #spine{display:block} }
#spine .sp-ghost{stroke:var(--spine);stroke-width:1;fill:none;opacity:.14}
#spine .sp-path{stroke:var(--spine);stroke-width:1.4;fill:none;stroke-linecap:round}
#spine .sp-tip{fill:var(--gold-glow)}
#spine .sp-tip-glow{fill:none;stroke:var(--gold-glow);stroke-width:1;opacity:.5}

/* ==========================================================================
   COSTURAS ENTRE BANDAS — transición DIAGONAL (clip-path) con veta de oro
   que se dibuja al entrar en vista + nodo-rombo dorado en el cruce.
   Colores por --sf (desde) y --st (hacia); .fuse = fundido vertical.
   ========================================================================== */
.seam{position:relative;height:92px;background:var(--sf);pointer-events:none;z-index:2}
.seam::before{
  content:"";position:absolute;inset:0;background:var(--st);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
.seam.rev::before{clip-path:polygon(0 0, 0 100%, 100% 100%)}
.seam svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.seam line{
  stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke;
  opacity:.65;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--ease) .1s;
}
.seam.in line{stroke-dashoffset:0}
.seam .knot{
  position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg) scale(0);
  background:var(--gold-glow);box-shadow:0 0 14px rgba(240,194,74,.75);
  transition:transform .5s var(--elastic) 1.25s;
}
.seam.in .knot{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.seam.fuse{height:120px;background:linear-gradient(180deg,var(--sf),var(--st))}
.seam.fuse::before{display:none}
.seam.fuse::after{
  content:"";position:absolute;left:50%;top:10%;bottom:10%;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  opacity:.55;
}
@media (max-width:760px){.seam{height:52px}.seam.fuse{height:80px}}

/* ============================= HEADER ============================= */
header.site{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hdr-line);
  transition:background .35s ease,box-shadow .35s ease;
}
/* al despegar del tope, el header gana una sombra finísima (elevación sutil) */
header.site.scrolled{box-shadow:0 12px 32px -24px rgba(14,26,44,.35)}
:root[data-theme="dark"] header.site.scrolled{box-shadow:0 12px 32px -22px rgba(0,0,0,.65)}
.site-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad-x);
  height:72px;display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand svg{width:34px;height:34px;display:block}
.brand .name{
  font-family:var(--mono);font-weight:600;font-size:18px;
  letter-spacing:.05em;color:var(--hdr-ink);
}
.brand .name b{color:var(--gold);font-weight:600}
header.site .brand svg [stroke]{stroke:var(--hdr-tri)}
header.site .brand svg .dot{fill:var(--hdr-tri)}

/* pestañas: la página actual queda marcada con realce dorado */
nav.main{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.main a{
  position:relative;
  text-decoration:none;font-size:14px;color:var(--hdr-text);
  padding:9px 15px;border-radius:99px;
  transition:color .2s,background .2s;
}
nav.main a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold-deep));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
nav.main a:hover{color:var(--hdr-ink)}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a.active{color:var(--hdr-ink);background:var(--hdr-line)}
nav.main a.active::after{transform:scaleX(1)}

.ctrls{display:flex;align-items:center;gap:10px;flex:none}
.lang-pill{
  display:flex;border:1px solid var(--hdr-line);border-radius:99px;overflow:hidden;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
}
.lang-pill button{padding:7px 12px;color:var(--hdr-muted);transition:.2s}
.lang-pill button.on{background:var(--hdr-ink);color:var(--bg-main)}
.theme-btn{
  width:38px;height:38px;border:1px solid var(--hdr-line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.theme-btn:hover{border-color:var(--gold)}
.theme-btn svg{width:17px;height:17px;stroke:var(--hdr-ink);fill:none;stroke-width:1.6;stroke-linecap:round}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
:root[data-theme="dark"] .theme-btn .sun{display:none}
.burger{display:none;width:40px;height:40px;position:relative;flex:none}
.burger span{
  position:absolute;left:9px;right:9px;height:1.6px;background:var(--hdr-ink);
  transition:.28s var(--ease);
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
body.nav-open .burger span:nth-child(1){top:20px;transform:rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){top:20px;transform:rotate(-45deg)}

.mobile-nav{
  display:none;
  border-top:1px solid var(--hdr-line);
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.mobile-nav a{
  display:block;padding:16px var(--pad-x);text-decoration:none;
  font-family:var(--serif);font-size:1.25rem;color:var(--hdr-ink);
  border-bottom:1px solid var(--hdr-line);
}
.mobile-nav a.active{color:var(--gold-deep);border-left:3px solid var(--gold);padding-left:calc(var(--pad-x) - 3px)}
:root[data-theme="dark"] .mobile-nav a.active{color:var(--gold)}
body.nav-open .mobile-nav{display:block}

@media (max-width:960px){
  nav.main{display:none}
  .burger{display:block;margin-left:auto}
  .ctrls{margin-left:0}
}

/* ============================= HERO (Inicio) ============================= */
.hero{
  padding-top:clamp(56px,9vh,110px);
  padding-bottom:clamp(70px,10vh,130px);
  position:relative;
  overflow:clip;
}
.hero::before{ /* aurora sutil */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(201,162,39,.10), transparent 70%),
    radial-gradient(700px 380px at 8% 8%, rgba(236,229,218,.55), transparent 65%);
}
:root[data-theme="dark"] .hero::before{
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(201,162,39,.09), transparent 70%),
    radial-gradient(700px 380px at 8% 8%, rgba(13,20,32,.9), transparent 65%);
}
/* nodos dorados esparcidos por TODO el hero + estela del cursor */
#field{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, var(--bg-main) 0%, transparent 58%, transparent 100%);
  opacity:.6;
}
:root[data-theme="dark"] .hero-veil{opacity:.72}
.hero-grid{
  position:relative;
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.hero-copy .kicker{margin-bottom:30px}
.hero-copy h1{
  font-size:clamp(2.7rem,6.4vw,5.2rem);
  line-height:1.04;
  letter-spacing:-.018em;
}
.hero-copy .sub{
  margin-top:28px;font-size:clamp(1.05rem,1.6vw,1.22rem);
  max-width:540px;line-height:1.7;
}
.cta-row{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;font-size:15px;font-weight:600;
  padding:15px 30px;border-radius:2px;
  transition:transform .2s var(--ease),box-shadow .25s,background .25s,border-color .25s;
  will-change:transform;
}
.btn-gold{
  background:linear-gradient(115deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  color:var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 28px -12px rgba(184,134,43,.55);
}
.btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 16px 36px -12px rgba(184,134,43,.65)}
.btn-gold:active{box-shadow:inset 0 2px 6px rgba(120,85,10,.30),0 6px 18px -10px rgba(184,134,43,.5)}
.btn-ghost{border:1px solid var(--line,rgba(14,26,44,.14));color:var(--ink,var(--hdr-ink))}
.btn-ghost:hover{border-color:var(--gold);background:rgba(201,162,39,.06)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.hero-tag{
  margin-top:44px;font-family:var(--mono);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:14px;
}
.hero-tag::before{content:"";width:34px;height:1px;background:var(--line);display:block}

/* escenario de la animación oficial del isotipo */
.hero-stage-wrap{display:flex;justify-content:center;position:relative}
.stage{
  position:relative;
  width:clamp(250px,36vw,420px);
  aspect-ratio:1/1;
  cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.aura{
  position:absolute;inset:-22%;border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,39,.16) 0%, rgba(201,162,39,0) 60%);
  opacity:var(--aura,0);pointer-events:none;
}
:root[data-theme="dark"] .aura{
  background:radial-gradient(circle, rgba(240,194,74,.17) 0%, rgba(240,194,74,0) 60%);
}
.stage svg{position:absolute;left:12%;top:12%;width:76%;height:76%;overflow:visible;display:block}
/* el canvas de partículas cubre ~1.9× el escenario: el campo latente se
   esparce por todo el hero (el JS centra el logo; .hero lo recorta) */
.stage canvas{position:absolute;inset:-45%;width:190%;height:190%;pointer-events:none}
/* estructura del triskel: navy sobre claro, hueso sobre oscuro; núcleo SIEMPRE oro */
#logoMain .st:not(.dot){stroke:var(--tri)}
#logoMain .dot{fill:var(--tri)}
.stage-hint{
  text-align:center;margin-top:18px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);opacity:.55;
}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-stage-wrap{order:-1}
  .stage{width:clamp(220px,52vw,320px)}
}

/* ============================= PAGE-HERO (subpáginas) ============================= */
.page-hero{
  padding-top:clamp(64px,10vh,120px);
  padding-bottom:clamp(44px,7vh,84px);
  position:relative;
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 380px at 82% -14%, rgba(201,162,39,.10), transparent 70%),
    radial-gradient(640px 340px at 4% 4%, rgba(236,229,218,.5), transparent 65%);
}
:root[data-theme="dark"] .page-hero::before{
  background:
    radial-gradient(820px 380px at 82% -14%, rgba(201,162,39,.08), transparent 70%),
    radial-gradient(640px 340px at 4% 4%, rgba(13,20,32,.9), transparent 65%);
}
.page-hero .wrap{position:relative}
.page-hero .kicker{margin-bottom:26px}
.page-hero h1{
  font-size:clamp(2.4rem,5.6vw,4.4rem);
  line-height:1.06;letter-spacing:-.016em;max-width:900px;
}
.page-hero .lead{
  margin-top:24px;font-size:clamp(1.05rem,1.6vw,1.2rem);
  max-width:640px;line-height:1.7;
}

/* ============================= RESPALDOS ============================= */
.backers{padding-top:72px;padding-bottom:72px}
.backers-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 18px;
}
.backers .lbl{
  flex-basis:100%;text-align:center;margin-bottom:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.badge{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--ink);
  border:1px solid var(--line);border-radius:99px;
  padding:11px 22px;white-space:nowrap;
  transition:border-color .25s,transform .25s;
}
.badge:hover{border-color:var(--gold);transform:translateY(-2px)}
@media (max-width:560px){
  .badge{white-space:normal;text-align:center;font-size:11.5px;padding:10px 16px}
}

/* ============================= TARJETAS (beneficios · tilt + spotlight) ============================= */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
  perspective:1100px;
}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--card-border);
  padding:clamp(26px,3vw,38px);
  transition:border-color .3s,box-shadow .3s,background .3s,transform .3s var(--ease);
  will-change:transform;
}
.card::before{ /* filo dorado superior al hover */
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transition:opacity .35s;
}
.card:hover::before{opacity:1}
.card:hover{
  border-color:rgba(201,162,39,.5);
  box-shadow:var(--shadow-soft);
  background:var(--card-hover);
}
.card:not(.tilt):hover{transform:translateY(-6px)}
/* spotlight que sigue el cursor */
.card .spot{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 62%);
}
.card:hover .spot{opacity:1}
.card .ico{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:26px;transition:border-color .3s,transform .4s var(--ease);
}
.card:hover .ico{border-color:var(--gold);transform:translateY(-3px) rotate(-5deg)}
.card .ico svg{width:24px;height:24px;stroke:var(--gold-text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.28rem;line-height:1.3;margin-bottom:12px}
.card p{font-size:.96rem}
.card p + p{margin-top:12px}
.card .num{
  float:right;font-family:var(--serif);font-size:1rem;
  color:var(--muted);opacity:.55;
}
@media (max-width:960px){.cards,.cards.two{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards,.cards.two{grid-template-columns:1fr}}

.see-all{margin-top:clamp(36px,5vh,56px);display:flex;justify-content:center}

/* ============================= VETA CORTA (conector vertical) ============================= */
.vein{height:92px;display:flex;justify-content:center;pointer-events:none}
.vein i{
  position:relative;display:block;width:1px;height:100%;
  background:linear-gradient(180deg, transparent 0%, var(--gold) 45%, var(--gold) 55%, transparent 100%);
  opacity:.5;
}
.vein i::after{
  content:"";position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 12px 2px rgba(240,194,74,.6);
  animation:veinDrop 4.5s ease-in-out infinite;
}
@keyframes veinDrop{
  0%{top:-4%;opacity:0}
  16%{opacity:1}
  84%{opacity:1}
  100%{top:100%;opacity:0}
}

/* ============================= CÓMO FUNCIONA — veta de flujo + pasos interactivos =============================
   La VETA DE ORO que conecta los 4 pasos (heredera de las vetas de c2):
   .fl-ghost  → cauce tenue, siempre visible (la veta "dormida")
   .fl-draw   → trazo que se DIBUJA con el scroll (#railFill vía dashoffset en JS)
   .fl-pulse  → luz dorada que VIAJA en loop continuo por la veta (el mineral
                fluye; la información fluye con él). Con movimiento reducido
                el pulso se apaga y la veta queda dibujada, estática. */
.rail{position:relative;height:64px;margin:0 6px 26px;display:none}
@media (min-width:961px){.rail{display:block}}
.rail svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.rail .fl-ghost{
  stroke:var(--gold);stroke-width:1;fill:none;opacity:.16;
  vector-effect:non-scaling-stroke;
}
.rail .fl-draw{
  stroke:var(--gold);stroke-width:1.6;fill:none;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(240,194,74,.35));
}
.rail .fl-pulse{
  stroke:var(--gold-glow);stroke-width:2.2;fill:none;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:26 360;                       /* 3 luces recorren la veta */
  filter:drop-shadow(0 0 6px rgba(240,194,74,.8));
  animation:flowRun 7.5s linear infinite;
}
@keyframes flowRun{to{stroke-dashoffset:-386}}   /* = 26+360 → loop perfecto */
.rail .nd{
  position:absolute;top:27px;width:10px;height:10px;margin-left:-5px;
  transform:rotate(45deg) scale(.8);
  background:var(--bg-navy);border:1.5px solid var(--muted);
  transition:background .4s,border-color .4s,transform .4s var(--ease),box-shadow .4s;
}
.rail .nd.on{
  background:var(--gold);border-color:var(--gold-hi);
  transform:rotate(45deg) scale(1);
  box-shadow:0 0 14px rgba(240,194,74,.55);
}
.rail .nd.hh{
  transform:rotate(45deg) scale(1.45);
  background:var(--gold-glow);border-color:var(--gold-glow);
  box-shadow:0 0 22px rgba(240,194,74,.95);
}
.rail .nd:nth-of-type(1){left:12.5%}
.rail .nd:nth-of-type(2){left:37.5%}
.rail .nd:nth-of-type(3){left:62.5%}
.rail .nd:nth-of-type(4){left:87.5%}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}
.step{
  background:var(--card);border:1px solid var(--card-border);
  padding:26px 24px;position:relative;cursor:pointer;
  transition:transform .35s var(--ease),border-color .5s,box-shadow .5s,background .5s;
}
.step .num{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;width:100%;
  transition:color .5s;
}
.step .num::after{content:"";flex:1;height:1px;background:var(--line);min-width:34px;transition:background .5s}
.step h3{font-size:1.12rem;margin-bottom:9px}
.step p{font-size:.92rem}
.step.hl{background:linear-gradient(180deg,rgba(201,162,39,.10),var(--card))}
/* encendido en secuencia ligado al scroll */
.step.lit{border-color:rgba(201,162,39,.45);box-shadow:0 0 26px rgba(201,162,39,.10)}
.step.lit .num{color:var(--gold-text)}
.step.lit .num::after{background:linear-gradient(90deg,var(--gold),transparent)}
.step.hl.lit{border-color:rgba(201,162,39,.6);box-shadow:0 0 34px rgba(201,162,39,.18)}
/* estado activo (hover/tap/teclado): se eleva y expande su detalle */
.step.active{
  transform:translateY(-6px);
  border-color:rgba(201,162,39,.6);
  box-shadow:0 16px 44px rgba(0,0,0,.3), 0 0 30px rgba(201,162,39,.14);
}
.step .more{
  max-height:0;opacity:0;overflow:hidden;
  margin-top:0;font-size:.84rem;line-height:1.55;color:var(--gold-text);
  transition:max-height .55s var(--ease),opacity .45s,margin-top .55s var(--ease);
}
.step .more::before{content:"↳ "}
.step.active .more{max-height:170px;opacity:1;margin-top:12px}
.step .arrow{
  position:absolute;top:50%;right:-15px;transform:translateY(-50%);z-index:2;
  color:var(--gold);width:14px;height:14px;
  opacity:.35;transition:opacity .5s;
}
.step.lit .arrow{opacity:1}
@media (max-width:960px){.step .arrow{display:none}}
/* orbe-ícono de cada etapa (voladura · camión · núcleo · sala de control):
   SVG propio, trazo fino dorado; se enciende con el paso */
.step .orb{
  width:56px;height:56px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  transition:border-color .5s,box-shadow .5s,transform .4s var(--ease);
}
.step .orb svg{
  width:27px;height:27px;display:block;
  color:var(--gold-text);stroke:var(--gold-text);
  fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.step.lit .orb{border-color:rgba(201,162,39,.55);box-shadow:0 0 18px rgba(201,162,39,.20)}
.step.active .orb{transform:translateY(-3px) rotate(-4deg);border-color:var(--gold)}
.step.hl .orb{background:linear-gradient(150deg,rgba(201,162,39,.16),transparent 70%),var(--card)}
/* móvil (1 columna): la veta baja de paso en paso como conector vertical */
@media (max-width:620px){
  .step:not(:last-child)::after{
    content:"";position:absolute;left:50%;bottom:-18px;width:1px;height:18px;
    background:linear-gradient(180deg,var(--gold),transparent);opacity:.55;
  }
}
.flow-lede{
  font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.4rem);
  color:var(--ink);max-width:640px;line-height:1.55;
}
.flow-lede .gf{white-space:nowrap}

/* franja de "qué ganas" (banda clara tras los pasos) */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.gain{border-top:1px solid var(--gold);padding-top:22px}
.gain .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-text);display:block;margin-bottom:10px;
}
.gain p{font-size:.98rem;color:var(--ink)}
@media (max-width:820px){.gains{grid-template-columns:1fr;max-width:480px}}

/* ============================= COSTO (banda navy + contadores) ============================= */
.costo .stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
}
.stat{border-top:1px solid rgba(201,162,39,.45);padding-top:28px}
.stat .big{
  font-family:var(--serif);
  font-size:clamp(3.2rem,6vw,5rem);line-height:1;
  display:block;margin-bottom:18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
}
.stat p{font-size:.98rem}
.stat p b{color:var(--ink);font-weight:600}
.sources{
  margin-top:clamp(40px,6vh,64px);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--muted);opacity:.75;
}
@media (max-width:820px){.costo .stats{grid-template-columns:1fr;max-width:440px}}

/* ============================= ANTES / DESPUÉS — SLIDER ARRASTRABLE ============================= */
.ba{
  position:relative;border:1px solid var(--card-border);
  overflow:hidden;background:var(--card);box-shadow:var(--shadow-soft);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ba .pane{padding:34px 38px 30px}
.ba .pane-t{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  display:inline-block;padding:6px 14px;border-radius:999px;margin-bottom:22px;
}
.ba .pane.before .pane-t{color:var(--muted);border:1px solid var(--line)}
.ba .pane.after .pane-t{color:#0A0F16;background:linear-gradient(180deg,#DCB43F,#C9A227)}
.ba-row{
  display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center;
  padding:13px 0;min-height:66px;border-top:1px solid var(--line);
}
.ba .pane.after .ba-row{border-top:1px solid rgba(236,229,218,.12)}
.ba-row .kpi{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.ba-row .val{font-size:14.5px}
.ba .pane.before .val{color:var(--muted)}
.ba .pane.after{
  position:absolute;inset:0;
  background:linear-gradient(155deg,#13233A 0%,#0E1A2C 70%);
  clip-path:inset(0 calc(100% - var(--cut,56%)) 0 0);
}
.ba .pane.after .kpi{color:#DCB43F}
.ba .pane.after .val{color:#ECE5DA}
.ba .pane.after .val::before{content:"◆ ";color:#C9A227;font-size:10px}
/* divisor + mango dorado */
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--cut,56%);width:0;z-index:6;
  cursor:ew-resize;outline-offset:6px;
}
.ba-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 50%,var(--gold-deep));
  box-shadow:0 0 16px rgba(240,194,74,.5);
}
.ba-grip{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(180deg,#DCB43F,#C9A227);
  box-shadow:0 6px 22px rgba(201,162,39,.5);
  display:flex;align-items:center;justify-content:center;color:#0A0F16;
  transition:transform .3s var(--elastic);
}
.ba-handle:hover .ba-grip,.ba-handle:focus-visible .ba-grip{transform:translate(-50%,-50%) scale(1.12)}
.ba-grip svg{width:20px;height:20px}
.ba-hint{
  margin-top:14px;text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:760px){
  .ba .pane{padding:24px 20px 20px}
  .ba-row{grid-template-columns:1fr;gap:4px;min-height:96px;align-items:start;padding:12px 0}
  .ba-grip{width:40px;height:40px}
}
/* movimiento reducido (html.rm lo pone el JS): ambas mitades visibles */
html.rm .ba{display:grid;grid-template-columns:1fr 1fr}
html.rm .ba .pane.after{position:static;clip-path:none}
html.rm .ba-handle,html.rm .ba-hint{display:none}
@media (max-width:760px){ html.rm .ba{grid-template-columns:1fr} }

/* ============================= NOSOTROS ============================= */
.about-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,80px);
}
.about-copy p{margin-bottom:20px;font-size:1.04rem}
.about-copy p.lead-serif{
  font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.45rem);
  line-height:1.55;color:var(--ink);
}
.about-quote{
  margin-top:34px;padding-left:24px;
  border-left:2px solid var(--gold);
  font-family:var(--serif);font-style:italic;
  font-size:1.08rem;color:var(--ink);
}
.team{display:flex;flex-direction:column;gap:16px}
.team-card{
  display:flex;align-items:center;gap:20px;
  background:var(--card);border:1px solid var(--card-border);
  padding:20px 24px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.team-card:hover{transform:translateX(6px);border-color:rgba(201,162,39,.5);box-shadow:var(--shadow-soft)}
/* avatar monograma: círculo + 3 puntitos + núcleo de oro */
.team-card .ava{flex:none;width:64px;height:64px;color:var(--tri)}
.team-card h3{font-size:1.1rem}
.team-card .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-top:4px}
.team-card p{font-size:.9rem;margin-top:6px}
@media (max-width:880px){.about-grid{grid-template-columns:1fr}}

/* valores / diferenciadores */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.value{border-top:1px solid var(--gold);padding-top:24px}
.value h3{font-size:1.2rem;margin-bottom:10px}
.value p{font-size:.96rem}
.value .vnum{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  color:var(--gold-text);display:block;margin-bottom:14px;
}
@media (max-width:820px){.values{grid-template-columns:1fr;max-width:480px}}

/* ============================= CONTACTO ============================= */
.contact-grid{
  display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(36px,5vw,80px);align-items:start;
}
form.contact{display:grid;gap:18px}
.field label{
  display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;background:transparent;color:var(--ink);
  border:none;border-bottom:1px solid var(--line);
  padding:10px 2px 12px;font:inherit;font-size:1rem;
  transition:border-color .25s;border-radius:0;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field textarea{resize:vertical;min-height:120px}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.two-cols{grid-template-columns:1fr}}
form.contact .btn{justify-self:start;margin-top:8px}
.direct h3{font-size:1.2rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.direct h3 .mono3{color:var(--tri)}
.direct-links{display:flex;flex-direction:column;gap:12px}
.dlink{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  border:1px solid var(--card-border);padding:15px 20px;
  transition:border-color .25s,transform .25s;
  color:var(--ink);font-size:.95rem;
}
.dlink:hover{border-color:var(--gold);transform:translateX(4px)}
.dlink svg{width:19px;height:19px;flex:none;stroke:var(--gold-text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dlink .sm{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}

/* ============================= CTA FINAL (banda con glow que respira) ============================= */
.cta-final{text-align:center;overflow:clip}
.cta-final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 340px at 50% 115%, rgba(201,162,39,.18), transparent 70%);
  animation:finalGlow 6s ease-in-out infinite;
}
@keyframes finalGlow{0%,100%{opacity:.75}50%{opacity:1}}
.cta-final .wrap{position:relative}
.cta-final h2{
  font-size:clamp(2rem,4.8vw,3.6rem);line-height:1.15;
  max-width:820px;margin:0 auto 20px;
}
.cta-final p{max-width:560px;margin:0 auto 36px;font-size:1.05rem}

/* ============================= FOOTER ============================= */
footer.site{
  border-top:1px solid var(--line-soft);
  padding:52px 0 44px;
}
.foot-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.foot-inner .brand svg{width:28px;height:28px}
.foot-inner .brand svg [stroke]{stroke:var(--tri)}
.foot-inner .brand .name{font-size:15px;color:var(--ink)}
.foot-nav{
  display:flex;gap:4px 18px;flex-wrap:wrap;margin-left:28px;
  font-size:13px;
}
.foot-nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.foot-nav a:hover{color:var(--gold-text)}
.foot-nav a.active{color:var(--ink)}
.foot-meta{
  margin-left:auto;text-align:right;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted);
  line-height:2;
}
.foot-meta a{text-decoration:none;transition:color .2s}
.foot-meta a:hover{color:var(--gold-text)}
@media (max-width:760px){
  .foot-inner{flex-direction:column;align-items:flex-start}
  .foot-nav{margin-left:0}
  .foot-meta{margin-left:0;text-align:left}
}

/* ==========================================================================
   SISTEMA DE INFOGRAFÍAS — clases reutilizables para TODAS las páginas
   --------------------------------------------------------------------------
   GUÍA DE ESTILO (mini manual):
   · Paleta: navy #0E1A2C como tinta estructural, oro #C9A227 SOLO para lo
     que importa (flujo, foco, dato clave). Nunca más de ~15% de oro.
   · Líneas finas (1–1.6px), remates redondeados, sin rellenos pesados.
   · Etiquetas en mono (var(--mono)), MAYÚSCULAS espaciadas; cifras en serif.
   · Todo hereda los tokens de banda (--ink/--text/--line/--card/--gold-text),
     así que la MISMA infografía se ve premium en banda clara y oscura.
   · Animación: trazos que se dibujan (.svg-draw + .in), flujo continuo
     (.svg-flow), nodos que laten (.svg-pulse). Solo stroke/transform/opacity.
   · Con prefers-reduced-motion todo queda dibujado y estático (ver bloque
     final de este archivo).
   USO TÍPICO:
     <figure class="figure">
       <div class="infographic"> …SVG con .svg-draw/.svg-flow… </div>
       <figcaption class="fig-cap" data-es="…" data-en="…">…</figcaption>
     </figure>
   ========================================================================== */

/* --- figura con leyenda: envuelve cualquier infografía o placeholder --- */
.figure{margin:0;display:block}
.figure .fig-cap,
.fig-cap{
  margin-top:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.fig-cap::before{content:"";width:22px;height:1px;background:var(--gold);flex:none}

/* --- panel de infografía: lienzo neutro con borde fino --- */
.infographic{
  position:relative;
  background:var(--card);border:1px solid var(--card-border);
  padding:clamp(22px,3vw,36px);
  overflow:hidden;                    /* nada se sale del panel */
}
.infographic svg{display:block;width:100%;height:auto;overflow:visible}

/* --- viz-card: tarjeta compacta para una visual + título + nota --- */
.viz-card{
  background:var(--card);border:1px solid var(--card-border);
  padding:clamp(20px,2.6vw,30px);
  transition:border-color .3s,box-shadow .3s;
}
.viz-card:hover{border-color:rgba(201,162,39,.45);box-shadow:var(--shadow-soft)}
.viz-card h4{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.06rem;margin-bottom:6px;
}
.viz-card .note{font-size:.86rem;color:var(--muted)}

/* --- flow: cadena horizontal de nodos conectados (mina → planta) --- */
.flow{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.flow-node{
  flex:1 1 120px;min-width:110px;text-align:center;
  padding:14px 8px;position:relative;
}
.flow-node .ico{
  width:52px;height:52px;margin:0 auto 12px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s,box-shadow .3s;
}
.flow-node .ico svg{
  width:24px;height:24px;color:var(--gold-text);stroke:var(--gold-text);
  fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.flow-node:hover .ico{border-color:var(--gold);box-shadow:0 0 16px rgba(201,162,39,.22)}
.flow-node .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);display:block;
}
.flow-node .sub{font-size:.82rem;color:var(--muted);margin-top:4px}
.flow-node.gold .ico{border-color:rgba(201,162,39,.55);background:linear-gradient(150deg,rgba(201,162,39,.14),transparent 70%),var(--card)}
/* conector entre nodos: veta corta con dashes que FLUYEN */
.flow-line{
  flex:0 1 64px;min-width:34px;height:2px;align-self:center;position:relative;
  background:
    repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 14px);
  background-size:14px 2px;opacity:.65;
  animation:flowDash 1.1s linear infinite;
}
@keyframes flowDash{to{background-position:14px 0}}
.flow-line.v{width:2px;height:34px;flex:none;margin:0 auto;
  background:repeating-linear-gradient(180deg,var(--gold) 0 7px,transparent 7px 14px);
  background-size:2px 14px;
  animation:flowDashV 1.1s linear infinite;
}
@keyframes flowDashV{to{background-position:0 14px}}
@media (max-width:620px){
  .flow{flex-direction:column;align-items:stretch}
  .flow-line{width:2px;height:30px;flex:none;margin:0 auto;
    background:repeating-linear-gradient(180deg,var(--gold) 0 7px,transparent 7px 14px);
    background-size:2px 14px;animation-name:flowDashV}
}

/* --- stat-viz: cifra grande + barra de proporción dorada --- */
.stat-viz{border-top:1px solid var(--gold);padding-top:20px}
.stat-viz .big{
  font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);
  line-height:1;color:var(--ink);display:block;
  font-variant-numeric:tabular-nums;
}
.stat-viz .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-text);
  display:block;margin:10px 0 12px;
}
.stat-viz .bar{
  height:3px;background:var(--line-soft);position:relative;overflow:hidden;
}
.stat-viz .bar i{
  position:absolute;inset:0;transform-origin:0 50%;
  transform:scaleX(var(--v,.5));                 /* --v: 0–1 = proporción */
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi));
}
.stat-viz.in .bar i{transition:transform 1.2s var(--ease) .2s}

/* --- diagram: envoltorio para SVG técnico (etiquetas mono + trazos finos) --- */
.diagram{position:relative}
.diagram text,.viz-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  fill:var(--muted);text-transform:uppercase;
}
.diagram .viz-value{font-family:var(--serif);font-size:15px;fill:var(--ink);letter-spacing:0}
.diagram .dg-stroke{stroke:var(--ink);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.diagram .dg-soft{stroke:var(--line);stroke-width:1;fill:none}
.diagram .dg-gold{stroke:var(--gold);stroke-width:1.5;fill:none;stroke-linecap:round}
.diagram .dg-fill-gold{fill:var(--gold);stroke:none}

/* --- utilidades SVG animables (aplicar a <path>/<line>/<circle>) ---
   .svg-draw    → el trazo se dibuja al entrar en vista: añade también la
                  clase .reveal al contenedor; cuando el observer le pone
                  .in, el trazo fluye de 0 a 1 (pathLength="1" en el SVG).
   .svg-flow    → dashes dorados que viajan en loop por el trazo (continuo).
   .svg-pulse   → nodo que late (opacidad/escala) — para puntos clave.     */
.svg-draw{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease) .15s;
}
.reveal.in .svg-draw,.in .svg-draw,.svg-draw.in{stroke-dashoffset:0}
.svg-flow{
  stroke:var(--gold-glow);fill:none;stroke-linecap:round;
  stroke-dasharray:.06 .94;                       /* con pathLength="1" */
  animation:svgFlow 3.2s linear infinite;
  filter:drop-shadow(0 0 4px rgba(240,194,74,.7));
}
@keyframes svgFlow{to{stroke-dashoffset:-1}}
.svg-pulse{transform-box:fill-box;transform-origin:center;animation:svgPulse 2.6s ease-in-out infinite}
@keyframes svgPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

/* ==========================================================================
   CONCEPTO — "De la roca al espacio latente" (canvas §13 de assets/app.js)
   Escenario subsuelo navy CONSTANTE (idéntico en ambos climas): de la mina
   en bancos suben Cu·Zn·Ag·Au, se vuelven datos, se agrupan y se decide.
   Las etiquetas son HTML (bilingües vía data-es/data-en); el JS las
   "enciende" por fase con .hot. Con movimiento reducido el canvas pinta
   una composición estática y las etiquetas quedan en reposo.
   ========================================================================== */
.concept-stage{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;max-height:580px;
  background:linear-gradient(168deg,#13233A 0%,#0E1A2C 52%,#0A0F16 100%);
  border:1px solid rgba(236,229,218,.14);
}
.concept-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.c-lbl{
  position:absolute;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(236,229,218,.42);
  display:flex;align-items:center;gap:9px;
  transition:color .9s ease,text-shadow .9s ease;
}
.c-lbl.hot{color:rgba(236,229,218,.88)}
.c-lbl.c-dec.hot{color:#DCB43F;text-shadow:0 0 14px rgba(240,194,74,.35)}
.c-lbl i{width:7px;height:7px;border-radius:50%;background:var(--c,#ECE5DA);flex:none;opacity:.85}
.c-lbl span+i{margin-left:6px}
.c-min{left:4.5%;bottom:7%}
.c-lat{left:4.5%;top:9%}
.c-lat::before{content:"";width:20px;height:1px;background:var(--gold);opacity:.7;flex:none}
.c-clu{right:4.5%;bottom:9%}
.c-dec{right:4.5%;top:10%}
@media (max-width:640px){
  .concept-stage{aspect-ratio:4/5;max-height:none}
  .c-lbl{font-size:9px;letter-spacing:.18em}
}
/* los 3 momentos del concepto, bajo la animación */
.c-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);margin-top:clamp(34px,5vh,56px);
}
.c-step{border-top:1px solid var(--gold);padding-top:18px}
.c-step .n{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-text);
  display:block;margin-bottom:10px;
}
.c-step p{font-size:.95rem}
@media (max-width:720px){.c-steps{grid-template-columns:1fr;max-width:460px}}

/* ============================= REVEALS ============================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.rv-l{transform:translateX(-28px)}
.reveal.rv-r{transform:translateX(28px)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.4s}

/* ==========================================================================
   FONDOS DE CONCEPTO EN LOS HEROS DE PÁGINA (animaciones A/B/C integradas)
   .lm-hero-anim  → sección page-hero que lleva una animación de fondo
   .lm-hero-fx    → canvas a pantalla de la sección, DETRÁS del contenido
   .lm-hero-veil  → velo (hueso en clima claro / navy en oscuro) que
                    garantiza la legibilidad del copy encima del canvas
   .lm-hero-mark  → triskel oficial como pieza sutil del hero (currentColor
                    = --tri: navy sobre claro, hueso sobre oscuro; núcleo
                    SIEMPRE oro). El .wrap queda por encima de todo.
   ========================================================================== */
.lm-hero-anim{overflow:clip}
.lm-hero-anim .wrap{position:relative;z-index:2}
.lm-hero-fx{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;pointer-events:none;
}
.lm-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 40%, rgba(255,255,255,.20) 72%, rgba(255,255,255,.06) 100%),
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, transparent 34%);
}
:root[data-theme="dark"] .lm-hero-veil{
  background:
    linear-gradient(90deg, rgba(10,15,22,.90) 0%, rgba(10,15,22,.58) 40%, rgba(10,15,22,.20) 72%, rgba(10,15,22,.06) 100%),
    linear-gradient(180deg, rgba(10,15,22,.30) 0%, transparent 34%);
}
@media (max-width:880px){
  .lm-hero-veil{
    background:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.58) 55%, rgba(255,255,255,.32) 100%);
  }
  :root[data-theme="dark"] .lm-hero-veil{
    background:linear-gradient(180deg, rgba(10,15,22,.88) 0%, rgba(10,15,22,.56) 55%, rgba(10,15,22,.32) 100%);
  }
}
.lm-hero-mark{
  position:absolute;z-index:1;top:50%;right:clamp(20px,7vw,110px);
  transform:translateY(-50%);
  width:clamp(120px,18vw,230px);height:auto;
  color:var(--tri);opacity:.14;pointer-events:none;
}
@media (max-width:880px){
  .lm-hero-mark{width:96px;right:5%;opacity:.10}
}

/* ============================= REDUCED MOTION ============================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card,.badge,.team-card,.dlink,.step{transition:none}
  .stage{cursor:default}
  .vein i::after{animation:none;top:48%}
  .seam line{stroke-dashoffset:0;transition:none}
  .seam .knot{transform:translate(-50%,-50%) rotate(45deg) scale(1);transition:none}
  .cta-final::before{animation:none}
  /* veta de flujo: dibujada completa, sin luz viajera */
  .rail .fill{transform:scaleX(1)}
  .rail .fl-pulse{animation:none;opacity:0}
  #railFill{stroke-dashoffset:0}
  /* infografías: todo dibujado y quieto */
  .flow-line,.flow-line.v{animation:none}
  .svg-flow{animation:none;opacity:0}
  .svg-pulse{animation:none;opacity:.8}
  .svg-draw{stroke-dashoffset:0;transition:none}
  .stat-viz.in .bar i{transition:none}
  .step .more{max-height:none;opacity:1;margin-top:12px}
  .step .num,.step h3{transition:none}
  #pbar,#spine{display:none}
  .card .spot{display:none}
  /* concepto: etiquetas en reposo, sin transiciones (frame estático) */
  .c-lbl{transition:none}
}