/* Amura Energy — muestra de hero. Reutiliza los tokens de marca del grupo
   (Bodoni Moda + Satoshi + oro #C6A15B) pero vive en su propia hoja: esta
   carpeta no toca /assets/css/holding.css.
   Tema: claro por defecto (papel/bone), oro como acento tipográfico y de
   línea, no como ambiente. Los tonos oscuros (--ink-deep/--ink/--bone-hi/
   --faint*) se conservan solo para las superficies que siguen siendo oscuras
   a propósito: el hero fotográfico, el footer y el menú móvil a pantalla
   completa. */

:root{
  --ink-deep:  #0E1013;
  --ink:       #14171A;
  --bone-hi:   #F3F2ED;
  --faint:     rgba(243,242,237,.62);
  --faint-lo:  rgba(243,242,237,.38);
  --line:      rgba(243,242,237,.14);
  --line-2:    rgba(243,242,237,.24);

  --paper:      #F6F4EE;
  --paper-alt:  #ECE7DA;
  --ink-text:   #1B1D1F;
  --ink-soft:   rgba(27,29,31,.68);
  --ink-soft-lo:rgba(27,29,31,.46);
  --line-l:     rgba(27,29,31,.10);
  --line-l2:    rgba(27,29,31,.18);

  --gold:      #C6A15B;
  --gold-ink:  #7E5F28;
  --gold-soft: rgba(198,161,91,.55);
  --gold-tint: rgba(198,161,91,.14);

  --ff-display: 'Bodoni Moda', 'Cabinet Grotesk', Georgia, serif;
  --ff-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1280px;
  --banner-h: 37px;

  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-sharp:  cubic-bezier(.4,0,.2,1);
  --dur-base: 200ms;
  --dur-slow: 420ms;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--ff-body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2{ margin:0; font-family:var(--ff-display); font-weight:600; letter-spacing:-.01em; line-height:1.05; }
p{ margin:0; }
sup{ font-size:.6em; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink-text); color:var(--paper); padding:12px 18px; font-family:var(--ff-body);
}
.skip-link:focus{ left:var(--pad); top:var(--pad); }

a, button{ color:inherit; font:inherit; }
:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:3px; }

.preview-banner{
  position:fixed; top:0; left:0; right:0; z-index:56; height:var(--banner-h); box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-deep); background:var(--gold); padding:0 12px;
}

/* barra de progreso de scroll: comunica posición, no decoración */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:60;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .1s linear;
}

/* ================= HERO ================= */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100dvh;
  display:flex; align-items:center;
  padding-top:calc(var(--banner-h) + clamp(72px,10vw,120px)); padding-bottom:clamp(96px,10vw,140px);
  background:var(--ink-deep);
}

.hero-layer{ position:absolute; inset:0; pointer-events:none; will-change:transform; }

/* capa 1: retícula de plano técnico, apenas visible, la más lejana */
.layer-grid{
  z-index:0;
  background-image:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,  var(--line) 0 1px, transparent 1px 88px);
  opacity:.35;
  mask-image:radial-gradient(ellipse 80% 70% at 68% 45%, #000 40%, transparent 90%);
}

/* capa 2: arco de oro, mitad fuera de encuadre.
   Dos transforms independientes en dos elementos anidados: el JS controla el
   parallax (scroll/puntero) del contenedor .layer-ring; la rotación continua
   vive solo en .ring-spin para que animation y JS no se pisen en la misma
   propiedad transform del mismo elemento. */
.layer-ring{
  z-index:0;
  width:min(70vw,900px); height:min(70vw,900px);
  right:clamp(-320px,-14vw,-120px); top:50%;
  left:auto; inset:auto;
  transform:translateY(-50%);
  opacity:.4;
}
.ring-spin{
  position:absolute; inset:0;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  animation:ring-spin 140s linear infinite;
}
.ring-spin::before{
  content:""; position:absolute; inset:10%;
  border:1px solid var(--line-2); border-radius:50%;
}
@keyframes ring-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* capa 3: diagrama del proceso — el elemento de firma de esta página */
.layer-diagram{
  z-index:1;
  position:absolute; inset:auto clamp(-6%,-2vw,0%) auto auto; top:50%;
  width:min(64vw,860px);
  aspect-ratio:900/420;
  transform:translateY(-50%);
}
.flow-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.flow-path{
  fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1.1s var(--ease-smooth);
}
.diagram-draw.is-drawn .flow-path{ stroke-dashoffset:0; }
.flow-in{ stroke:var(--line-2); }
.diagram-draw.is-drawn .flow-in{ stroke:var(--faint); }
.node-hex{
  fill:var(--ink-deep); stroke:var(--gold); stroke-width:1.6;
  transform-origin:420px 210px;
  animation:node-breathe 7s var(--ease-smooth) infinite;
}
.node-glow{
  fill:url(#none); fill:var(--gold-tint); opacity:.5;
  animation:node-breathe 7s var(--ease-smooth) infinite;
}
@keyframes node-breathe{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.035); opacity:.82; } }
.flow-dot{ fill:var(--gold); opacity:0; transition:opacity .3s ease .9s; }
.diagram-draw.is-drawn .flow-dot{ opacity:1; }

.flow-label{
  position:absolute; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; opacity:0; transition:opacity .5s ease .5s;
}
.diagram-draw.is-drawn .flow-label{ opacity:1; }
.flow-label span{ display:block; color:var(--faint-lo); font-size:.92em; letter-spacing:.04em; margin-top:2px; }
.flow-label-in{     left:6%;   top:44%; }
.flow-label-node{   left:46.6%; top:71%; transform:translateX(-50%); color:var(--gold); }
.flow-label-main{   left:78%;  top:26%; }
.flow-label-sub{    left:78%;  top:66%; }

/* diagrama inline (fuera del hero, sobre fondo claro): mismas clases, otra paleta */
.diagram-inline .flow-path{ stroke:var(--gold-ink); }
.diagram-inline .flow-in{ stroke:var(--line-l2); }
.diagram-draw.is-drawn .diagram-inline .flow-in{ stroke:var(--ink-soft-lo); }
.diagram-inline .node-hex{ fill:var(--paper); stroke:var(--gold-ink); }
.diagram-inline .node-glow{ fill:var(--gold-tint); }
.diagram-inline .flow-dot{ fill:var(--gold-ink); }
.diagram-inline .flow-label{ color:var(--ink-soft); }
.diagram-inline .flow-label span{ color:var(--ink-soft-lo); }

.hero-grid{ position:relative; z-index:2; width:100%; }
.hero-copy{ max-width:52ch; }
.hero-copy h1{
  font-size:clamp(2.1rem,5.6vw,4rem); letter-spacing:-.015em; color:#fff;
  text-wrap:balance;
}
.hero-copy h1 em{ font-style:italic; font-weight:500; color:var(--gold); }
.hero-copy .sub{
  margin-top:clamp(18px,2.6vw,26px); font-size:clamp(1rem,1.3vw,1.12rem);
  color:var(--faint); max-width:46ch;
}

.hero-metrics{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,40px);
  margin-top:clamp(30px,4vw,42px); padding-top:22px; border-top:1px solid var(--line-2);
}
.metric .n{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; font-weight:500; font-size:clamp(1.7rem,2.6vw,2.2rem); color:var(--gold); line-height:1; }
.metric .n span{ font-size:.55em; }
.metric.metric-status .n{ font-family:var(--ff-display); font-style:italic; font-size:clamp(1.3rem,2vw,1.7rem); font-weight:500; }
.metric .k{ margin-top:6px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint-lo); }
.hero-foot{ margin-top:16px; font-size:.72rem; color:var(--faint-lo); max-width:46ch; }

.scroll-cue{
  position:absolute; left:var(--pad); bottom:clamp(20px,3vw,34px); z-index:3;
  display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  transition:color var(--dur-base) ease;
}
.scroll-cue .line{
  display:block; width:1px; height:26px; background:var(--gold);
  animation:cue-pulse 2.2s ease-in-out infinite;
}
@keyframes cue-pulse{ 0%,100%{ opacity:.35; transform:scaleY(.7); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); transform-origin:top; } }
.scroll-cue:hover, .scroll-cue:focus-visible{ color:var(--bone-hi); }

/* ================= SECCIONES ================= */
.section{ padding-top:clamp(64px,9vw,110px); padding-bottom:clamp(64px,9vw,110px); }
.band{ background:var(--paper-alt); }

.section-head{ position:relative; padding-left:60px; font-size:clamp(1.5rem,2.4vw,2rem); max-width:40ch; }
.section-head::before{ content:""; position:absolute; left:0; top:.5em; width:44px; height:2px; background:var(--gold-ink); }

.section-lead{ margin-top:22px; max-width:62ch; font-size:clamp(1rem,1.3vw,1.1rem); color:var(--ink-soft); }
.footnote{ margin-top:26px; max-width:70ch; font-family:var(--ff-mono); font-size:.72rem; line-height:1.7; color:var(--ink-soft-lo); }

.step-row{ margin-top:clamp(36px,5vw,56px); display:grid; gap:clamp(24px,4vw,20px); grid-template-columns:1fr; }
.step{ border-top:1px solid var(--line-l2); padding-top:18px; }
.step-n{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:8px; }
.step p{ color:var(--ink-soft); max-width:38ch; }

/* ================= REVEAL AL SCROLL ================= */
.reveal{ opacity:0; transform:translate3d(0,18px,0); transition:opacity var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-smooth); }
.reveal.in{ opacity:1; transform:none; }

/* ================= BOTONES ================= */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--gold-ink); color:var(--ink-text); text-decoration:none;
  transition:background var(--dur-base) var(--ease-sharp), color var(--dur-base) var(--ease-sharp), border-color var(--dur-base) var(--ease-sharp);
}
.btn:hover, .btn:focus-visible{ background:var(--gold-ink); color:var(--paper); border-color:var(--gold-ink); }
.btn-primary{ background:var(--gold-ink); color:var(--paper); border-color:var(--gold-ink); }
.btn-primary:hover, .btn-primary:focus-visible{ background:transparent; color:var(--gold-ink); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:clamp(24px,3vw,32px); }

/* ================= NAV =================
   Por defecto asume que flota sobre el hero oscuro (texto claro, fondo
   transparente). Dos excepciones necesitan texto oscuro desde el principio:
   páginas cuyo hero es claro (.hero--light, marcado en <body> con
   .hero-light) y, en cualquier página, el estado ya-hizo-scroll — a partir
   de ahí el fondo detrás del nav siempre es el papel claro del contenido. */
.site-nav{
  position:fixed; top:var(--banner-h); left:0; right:0; z-index:50; background:transparent; border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-sharp), border-color var(--dur-base) var(--ease-sharp);
}
.site-nav.is-scrolled{ background:rgba(246,244,238,.92); backdrop-filter:blur(10px); border-bottom-color:var(--line-l); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.nav-logo{ font-family:var(--ff-display); font-size:1.05rem; letter-spacing:.02em; color:var(--bone-hi); text-decoration:none; white-space:nowrap; transition:color var(--dur-base) ease; }
.nav-logo span{ color:var(--gold); margin-left:.4em; font-style:italic; transition:color var(--dur-base) ease; }
.nav-menu{ display:flex; align-items:center; gap:clamp(18px,3vw,38px); }
.nav-menu a{
  position:relative; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); text-decoration:none; padding:6px 0; transition:color var(--dur-base) ease;
}
.nav-menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:0 50%; transition:transform var(--dur-base) var(--ease-sharp);
}
.nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a.is-active{ color:var(--bone-hi); }
.nav-menu a:hover::after, .nav-menu a:focus-visible::after, .nav-menu a.is-active::after{ transform:scaleX(1); }
.nav-menu a.nav-cta{ border:1px solid var(--gold-soft); padding:9px 18px; color:var(--bone-hi); }
.nav-menu a.nav-cta::after{ display:none; }
.nav-menu a.nav-cta:hover, .nav-menu a.nav-cta:focus-visible{ background:var(--gold); color:var(--ink-deep); border-color:var(--gold); }

body.hero-light .site-nav:not(.is-scrolled) .nav-logo,
.site-nav.is-scrolled .nav-logo{ color:var(--ink-text); }
body.hero-light .site-nav:not(.is-scrolled) .nav-logo span,
.site-nav.is-scrolled .nav-logo span{ color:var(--gold-ink); }
body.hero-light .site-nav:not(.is-scrolled) .nav-menu a,
.site-nav.is-scrolled .nav-menu a{ color:var(--ink-soft); }
body.hero-light .site-nav:not(.is-scrolled) .nav-menu a::after,
.site-nav.is-scrolled .nav-menu a::after{ background:var(--gold-ink); }
body.hero-light .site-nav:not(.is-scrolled) .nav-menu a:hover,
body.hero-light .site-nav:not(.is-scrolled) .nav-menu a:focus-visible,
body.hero-light .site-nav:not(.is-scrolled) .nav-menu a.is-active,
.site-nav.is-scrolled .nav-menu a:hover,
.site-nav.is-scrolled .nav-menu a:focus-visible,
.site-nav.is-scrolled .nav-menu a.is-active{ color:var(--ink-text); }
body.hero-light .site-nav:not(.is-scrolled) .nav-menu a.nav-cta,
.site-nav.is-scrolled .nav-menu a.nav-cta{ color:var(--ink-text); }
body.hero-light .site-nav:not(.is-scrolled) .nav-toggle span,
.site-nav.is-scrolled .nav-toggle span{ background:var(--ink-text); }

.lang-switch{ display:flex; align-items:center; gap:2px; margin-left:6px; }
.lang-switch button{
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.06em; background:none; border:0; cursor:pointer;
  padding:6px 5px; color:var(--faint); transition:color var(--dur-base) ease;
}
.lang-switch button:hover, .lang-switch button:focus-visible{ color:var(--bone-hi); }
.lang-switch button.is-active{ color:var(--gold); }
.lang-switch .sep{ font-family:var(--ff-mono); font-size:.68rem; color:var(--faint); opacity:.5; }

body.hero-light .site-nav:not(.is-scrolled) .lang-switch button,
.site-nav.is-scrolled .lang-switch button{ color:var(--ink-soft); }
body.hero-light .site-nav:not(.is-scrolled) .lang-switch button:hover,
body.hero-light .site-nav:not(.is-scrolled) .lang-switch button:focus-visible,
.site-nav.is-scrolled .lang-switch button:hover,
.site-nav.is-scrolled .lang-switch button:focus-visible{ color:var(--ink-text); }
body.hero-light .site-nav:not(.is-scrolled) .lang-switch button.is-active,
.site-nav.is-scrolled .lang-switch button.is-active{ color:var(--gold-ink); }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:0; cursor:pointer; padding:0; }
.nav-toggle span{ display:block; width:100%; height:1px; background:var(--bone-hi); transition:transform var(--dur-base) var(--ease-sharp), opacity var(--dur-base) var(--ease-sharp), background var(--dur-base) ease; }
.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); }
body.nav-open{ overflow:hidden; }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:fixed; inset:calc(var(--banner-h) + 76px) 0 0 0; z-index:49;
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; padding:12px var(--pad) 40px; background:var(--ink-deep); overflow-y:auto;
    transform:translate3d(0,-8px,0); opacity:0; pointer-events:none;
    transition:opacity var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-smooth);
  }
  .nav-menu.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-menu a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:.85rem; }
  .nav-menu a.nav-cta{ margin-top:16px; text-align:center; }
  /* el cajón móvil es siempre oscuro (pantalla completa), pase lo que pase
     con el tema del hero o el scroll debajo: sin esto, las reglas de "nav
     sobre fondo claro" de arriba dejarían el texto oscuro sobre su propio
     fondo oscuro, ilegible. */
  /* Antes: en Soluciones/Empresa (hero-light), al abrir el menú la regla de "nav
     sobre fondo claro" (línea ~286, MAYOR especificidad) ganaba y dejaba el texto
     OSCURO sobre el panel oscuro -> invisible (Alex 07/09). Igualamos la
     especificidad (con .site-nav:not(.is-scrolled)) para que aquí gane el CLARO. */
  body.hero-light .site-nav:not(.is-scrolled) .nav-menu a,
  body.hero-light .site-nav.is-scrolled .nav-menu a,
  .site-nav.is-scrolled .nav-menu a,
  .nav-menu a{ color:var(--faint); }
  body.hero-light .site-nav:not(.is-scrolled) .nav-menu a::after,
  .site-nav.is-scrolled .nav-menu a::after{ background:var(--gold); }
  body.hero-light .site-nav:not(.is-scrolled) .nav-menu a:hover,
  body.hero-light .site-nav:not(.is-scrolled) .nav-menu a.is-active,
  .site-nav.is-scrolled .nav-menu a:hover,
  .site-nav.is-scrolled .nav-menu a.is-active,
  .nav-menu a:hover, .nav-menu a.is-active{ color:var(--bone-hi); }
  body.hero-light .site-nav:not(.is-scrolled) .nav-menu a.nav-cta,
  .site-nav.is-scrolled .nav-menu a.nav-cta,
  .nav-menu a.nav-cta{ color:var(--bone-hi); }

  .lang-switch{ margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line); width:100%; justify-content:flex-start; gap:10px; }
  .lang-switch button{ padding:6px 4px; font-size:.72rem; }
  /* mismo arreglo de especificidad que el menú: en el cajón oscuro los botones de
     idioma van SIEMPRE claros, con el activo en oro brillante (no --gold-ink). */
  body.hero-light .site-nav:not(.is-scrolled) .lang-switch button,
  body.hero-light .site-nav.is-scrolled .lang-switch button,
  .site-nav.is-scrolled .lang-switch button,
  .lang-switch button{ color:var(--faint); }
  body.hero-light .site-nav:not(.is-scrolled) .lang-switch button.is-active,
  .site-nav.is-scrolled .lang-switch button.is-active,
  .lang-switch button.is-active{ color:var(--gold); }
}

/* ================= HERO DE PÁGINA (interiores) ================= */
.hero--page{ min-height:auto; padding-top:calc(var(--banner-h) + clamp(64px,10vw,96px)); padding-bottom:clamp(56px,7vw,90px); }
.page-hero-content{ position:relative; z-index:2; max-width:64ch; }
.rule-mark{ display:block; width:44px; height:2px; background:var(--gold); margin-bottom:22px; }
.page-hero-content h1{ font-size:clamp(2rem,4.6vw,3.2rem); color:#fff; text-wrap:balance; }
.page-hero-content h1 em{ font-style:italic; font-weight:500; color:var(--gold); }
.page-hero-content .sub{ margin-top:18px; font-size:clamp(1rem,1.25vw,1.1rem); color:var(--faint); max-width:58ch; }

/* variante clara: soluciones y empresa no tienen foto de cabecera, así que
   en vez de dejarlas en tinta oscura (el problema original) pasan a papel
   claro; tecnología e inicio conservan la cabecera fotográfica oscura. */
.hero--light{ background:var(--paper); }
.hero--light .layer-grid{
  background-image:
    repeating-linear-gradient(90deg, var(--line-l) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,  var(--line-l) 0 1px, transparent 1px 88px);
}
.hero--light .ring-spin{ border-color:rgba(126,95,40,.32); }
.hero--light .ring-spin::before{ border-color:var(--line-l2); }
.hero--light .rule-mark{ background:var(--gold-ink); }
.hero--light .page-hero-content h1{ color:var(--ink-text); }
.hero--light .page-hero-content h1 em{ color:var(--gold-ink); }
.hero--light .page-hero-content .sub{ color:var(--ink-soft); }

/* ================= FOTOGRAFÍA REAL A COLOR =================
   Las fotos (mar, flota, puerto, planta) llevan un grado de color sutil
   (contraste + un split-tone tenue) pero NUNCA duotono: el azul del mar, el
   verde y el cielo son el color real de la imagen. Tres usos: fondo de hero
   a sangre completa con velo tonal para legibilidad del texto, banda entre
   secciones y imagen de apoyo junto al texto (split-row). */
.layer-photo{ z-index:0; opacity:1; }
.layer-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.layer-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgba(14,16,19,.93) 0%, rgba(14,16,19,.74) 26%, rgba(14,16,19,.38) 50%, rgba(14,16,19,.14) 72%),
    linear-gradient(180deg, rgba(14,16,19,.22) 0%, rgba(14,16,19,.04) 24%, rgba(14,16,19,.08) 58%, rgba(14,16,19,.56) 100%);
}

.photo-band{
  position:relative; width:100%; overflow:hidden;
  height:clamp(240px,38vw,420px);
  margin-top:clamp(36px,5vw,56px);
}
.photo-band img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,16,19,.02) 0%, rgba(14,16,19,.28) 68%, rgba(14,16,19,.72) 100%);
}
.photo-band::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 90px rgba(14,16,19,.35);
}
.photo-band-cap{
  position:absolute; left:var(--pad); bottom:20px; z-index:3;
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  max-width:60ch;
}
.photo-band-cap .rule-mark{ margin-bottom:10px; background:var(--gold); }

.split-row{
  margin-top:clamp(36px,5vw,56px); display:grid; gap:clamp(28px,4vw,44px);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){
  .split-row{ grid-template-columns:1.05fr .95fr; }
  .split-row.media-left{ grid-template-columns:.95fr 1.05fr; }
  .split-row.media-left .split-media{ order:-1; }
}
.split-media{ position:relative; border:1px solid var(--line-l2); }
.split-media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; }
.split-media.ratio-tall img{ aspect-ratio:3/4; }
.split-media::before{
  content:""; position:absolute; top:-1px; left:-1px; width:26px; height:26px;
  border-top:1px solid var(--gold-ink); border-left:1px solid var(--gold-ink); pointer-events:none;
}
.split-media::after{
  content:""; position:absolute; bottom:-1px; right:-1px; width:26px; height:26px;
  border-bottom:1px solid var(--gold-ink); border-right:1px solid var(--gold-ink); pointer-events:none;
}
.split-copy .step-n{ margin-bottom:10px; }

/* ================= AVISO / DISCLAIMER ================= */
.disclaimer-box{
  margin-top:clamp(28px,4vw,40px); padding:18px 22px; border:1px solid var(--line-l2);
  font-family:var(--ff-mono); font-size:.72rem; line-height:1.75; color:var(--ink-soft-lo); max-width:72ch;
}

/* ================= TARJETAS ================= */
.card-grid{ margin-top:clamp(36px,5vw,56px); display:grid; gap:clamp(28px,4vw,36px); grid-template-columns:1fr; }
@media (min-width:768px){
  .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
}
.card{ border-top:1px solid var(--line-l2); padding-top:20px; transition:border-color var(--dur-base) var(--ease-sharp); }
.card:hover{ border-top-color:var(--gold-ink); }
.card-n{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:10px; }
.card h3{ font-family:var(--ff-display); font-size:1.25rem; font-weight:600; color:var(--ink-text); margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:.94rem; max-width:38ch; }
.card a.card-link{
  display:inline-block; margin-top:16px; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-ink); text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--dur-base) ease;
}
.card a.card-link:hover{ border-color:var(--gold-ink); }
.team-card .role{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink); margin-top:2px; }
.team-card .org{ margin-top:10px; font-size:.82rem; color:var(--ink-soft-lo); max-width:none; }

/* ================= LÍNEA DE TIEMPO ================= */
.timeline{ margin-top:clamp(36px,5vw,56px); }
.timeline-item{ position:relative; padding:0 0 clamp(26px,3vw,34px) 32px; border-left:1px solid var(--line-l2); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-4.5px; top:2px; width:8px; height:8px; border-radius:50%; background:var(--gold-ink); }
.timeline-year{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; color:var(--gold-ink); }
.timeline-item h4{ margin-top:8px; font-family:var(--ff-display); font-weight:600; font-size:1.05rem; color:var(--ink-text); }
.timeline-item p{ margin-top:8px; color:var(--ink-soft); max-width:62ch; font-size:.92rem; }

/* ================= DIAGRAMA EN LÍNEA (fuera del hero) ================= */
.diagram-inline{ position:relative; width:100%; max-width:820px; margin:clamp(40px,6vw,64px) auto 0; aspect-ratio:900/300; }
.diagram-inline .flow-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* ================= FOOTER (se mantiene oscuro a propósito: un único ancla
   sólida al final de una página mayoritariamente clara) ================= */
.site-footer{ padding:clamp(48px,7vw,80px) 0 clamp(26px,4vw,36px); border-top:1px solid var(--line); background:var(--ink); color:var(--bone-hi); }
.footer-grid{ display:grid; gap:clamp(28px,4vw,40px); grid-template-columns:1fr; }
@media (min-width:860px){ .footer-grid{ grid-template-columns:1.1fr .9fr 1.1fr; } }
.footer-brand p{ margin-top:14px; color:var(--faint-lo); font-size:.88rem; max-width:32ch; }
.footer-head{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.footer-contact a{ display:block; color:var(--faint); text-decoration:none; margin-bottom:8px; transition:color var(--dur-base) ease; width:fit-content; }
.footer-contact a:hover, .footer-contact a:focus-visible{ color:var(--gold); }
.footer-contact p{ margin-top:10px; color:var(--faint-lo); font-size:.85rem; max-width:32ch; }
.footer-legal p{ color:var(--faint-lo); font-size:.78rem; line-height:1.7; max-width:40ch; }
.footer-legal .footnote{ margin-top:10px; font-family:var(--ff-mono); font-size:.68rem; color:var(--faint-lo); }
.footer-legal-link{ display:inline-block; margin-top:12px; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.04em; color:var(--faint); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); transition:color var(--dur-base) ease, text-decoration-color var(--dur-base) ease; }
.footer-legal-link:hover, .footer-legal-link:focus-visible{ color:var(--gold); text-decoration-color:var(--gold); }
.footer-bottom{ margin-top:clamp(32px,4vw,44px); padding-top:20px; border-top:1px solid var(--line); font-family:var(--ff-mono); font-size:.68rem; color:var(--faint-lo); letter-spacing:.04em; }

/* ================= RESPONSIVE ================= */
@media (min-width:1024px){
  .hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; }
  .step-row{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1023px){
  /* .layer-diagram deja de ser absoluto y pasa a estar en el flujo: sin fijar
     flex-direction:column aquí, compite en fila con .hero-grid (el .hero
     base es flex row) y ambos se encogen — por eso se apilan explícitamente
     con order, en vez de dejarlo al valor por defecto. */
  .hero{ flex-direction:column; align-items:stretch; padding-bottom:40px; }
  .hero-grid{ order:1; }
  .layer-diagram{ order:2; position:relative; inset:auto; width:100%; margin-top:40px; transform:none; opacity:.9; }
  .layer-ring{ opacity:.24; }
  .hero-copy{ max-width:none; }
}
@media (max-width:640px){
  .flow-label{ font-size:.56rem; }
  .hero-metrics{ gap:22px 28px; }
}

/* ================= ACCESIBILIDAD — reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-layer{ transform:none !important; }
  .reveal{ opacity:1; transform:none; }
}