:root{
  --navy:#061a31;
  --navy-2:#0b2b4e;
  --navy-3:#10395f;
  --orange:#ff6b00;
  --orange-2:#ff8533;
  --ink:#0c1b2c;
  --muted:#5f6f81;
  --line:#dfe6ed;
  --soft:#f4f7fa;
  --white:#fff;
  --shell-r:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#d9dde1;color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.display{
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;letter-spacing:-.045em;line-height:.86;text-transform:none;
}
.mono{
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- Marco tipo ventana, como la referencia ---------- */
.shell{
  position:relative;
  max-width:1440px;margin:26px auto;background:var(--white);
  border-radius:var(--shell-r);overflow:clip;
  box-shadow:0 40px 120px rgba(6,26,49,.22);
}
.pad{padding:0 clamp(20px,4vw,64px)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:center;gap:clamp(16px,3vw,42px);
  padding:18px clamp(20px,4vw,64px);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.nav.solido{
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom-color:rgba(223,230,237,.7);
}
.nav.on-dark{background:rgba(6,26,49,.6);border-bottom-color:rgba(255,255,255,.12)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand img{height:48px;width:auto}
.nav-links{display:flex;gap:clamp(14px,2.2vw,30px);font-size:14px;color:var(--ink)}
.nav-links a{padding:16px 2px;position:relative;display:inline-block}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--orange);transition:right .35s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover::after{right:0}
.btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:Inter,sans-serif;font-size:14px;font-weight:500;
  padding:15px 26px;border-radius:999px;transition:transform .3s,background .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-orange{background:var(--orange);color:var(--navy);font-weight:600}
.btn-orange:hover{background:var(--orange-2);color:var(--navy)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.burger{display:flex;flex-direction:column;gap:4px;margin-left:6px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink)}

/* ---------- Portada ---------- */
.hero{position:relative;z-index:2;padding-block:clamp(30px,4.4vw,64px) clamp(44px,6vw,90px)}
/* el fondo arranca en la barra superior: el diseño empieza ahí */
.top-bg{
  position:absolute;left:0;right:0;top:0;z-index:0;height:70vh;
  background:url("../img/hero-puerto.webp") right center/cover no-repeat;
}
.top-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,#fff 0 22%,rgba(255,255,255,.86) 42%,
             rgba(255,255,255,.35) 64%,rgba(255,255,255,.12) 100%);
}
.hero-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.15fr);
  gap:clamp(16px,3vw,48px);align-items:center;
}
.hero-copy .mono{color:var(--muted)}
.hero-copy .mono b{color:var(--navy);font-weight:600}
.hero-copy h1{
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:900;
  font-size:clamp(38px,6.1vw,84px);line-height:.94;letter-spacing:-.042em;
  color:var(--navy);margin:16px 0 20px;text-wrap:balance;
}
.hero-copy h1 em{font-style:normal;color:var(--orange)}
.hero-copy .lead{
  font-size:clamp(15px,1.35vw,19px);color:var(--ink-2);max-width:44ch;margin:0;
}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:clamp(22px,3vw,34px)}
.btn-linea{
  background:transparent;color:var(--navy);border:1px solid var(--line-2,#c6d2dd);
}
.btn-linea:hover{border-color:var(--navy)}
.stats{
  display:flex;gap:clamp(20px,3.2vw,56px);flex-wrap:wrap;
  margin-top:clamp(30px,4.2vw,58px);padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid rgba(6,26,49,.14);
}
.stat .n{
  font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(30px,3.8vw,50px);line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.stat .n span{color:var(--orange)}
.stat small{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
.hero-art{position:relative;margin-right:calc(-1 * clamp(20px,4vw,64px))}
.hero-art .producto{width:100%;height:auto}
.hero-art .ground-shadow{bottom:4%}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-art{margin-right:0;order:-1;padding-top:90px}
  .hero-art .box{--w:min(300px,72vw);--h:min(139px,33vw);--d:min(133px,32vw)}
  .mission .box{--w:min(280px,68vw);--h:min(129px,31vw);--d:min(124px,30vw)}
  .hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.92) 0 48%,rgba(255,255,255,.6))}
}

/* ---------- El contenedor (render) con lente de color ---------- */
.scene{position:relative;width:100%;display:grid;place-items:center}
.mission .scene{align-items:end}
.mission-stage .scene{width:min(660px,86%)}
.hero-art .scene{width:min(620px,100%)}
.rig{position:relative;will-change:transform;width:100%}
.cont-sway{transform-origin:50% -45%;will-change:transform}
.cont{position:relative;width:100%;cursor:crosshair;line-height:0}
.cont img{width:100%;height:auto;display:block}
.cont-base{position:relative;z-index:1}
/* sombra propia, bajo el cuerpo del contenedor y no bajo los cables */
.cont::after{
  content:"";position:absolute;left:50%;bottom:-5%;
  width:74%;height:9%;margin-left:-37%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(6,26,49,.30),rgba(6,26,49,.10) 45%,rgba(6,26,49,0) 72%);
  pointer-events:none;z-index:0;
}
/* capas que se revelan dentro del círculo: el azul cubre TODO el contenedor */
.cont-tinte,.cont-carga{
  position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;
  --lr:0px; --lx:50%; --ly:50%;
  -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 92%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 92%,rgba(0,0,0,0) 100%);
}
@property --lr{syntax:'<length>';inherits:true;initial-value:0px}
.cont{--lr:0px;--lx:50%;--ly:50%;transition:--lr .36s cubic-bezier(.4,0,.2,1)}
.cont.lens-on{--lr:150px}
.lens-ring{
  position:absolute;left:0;top:0;z-index:3;
  width:calc(var(--lr) * 2);height:calc(var(--lr) * 2);
  transform:translate(calc(var(--lx) - var(--lr)),calc(var(--ly) - var(--lr)));
  border:2px solid rgba(255,255,255,.9);border-radius:50%;
  box-shadow:0 0 0 1px rgba(6,26,49,.16),0 10px 30px rgba(6,26,49,.26);
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.cont.lens-on .lens-ring{opacity:1}
.lens-hit{position:absolute;inset:0;z-index:4}
.peek-hint{
  position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);
  color:var(--muted);white-space:nowrap;transition:opacity .4s;pointer-events:none;
}
.peek-hint::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--orange);margin-right:9px;vertical-align:middle}
.mission-stage:hover .peek-hint{opacity:0}
.ground-shadow{display:none}

/* ---------- Manifiesto naranja ---------- */
.manifesto{position:relative;z-index:5;will-change:clip-path;background:var(--orange);color:var(--navy);padding-block:clamp(40px,5.5vw,72px);text-align:center;overflow:hidden}
.manifesto .mono{color:#0b2b4e}
.manifesto h2{
  font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(26px,3.6vw,50px);line-height:1.12;
  max-width:30ch;margin:14px auto 26px;text-wrap:balance;
}
.manifesto .stage{height:clamp(150px,22vw,280px);display:grid;place-items:center;margin-top:34px}
.manifesto .box-copy,.manifesto .box-micro{color:var(--orange)}
.manifesto .stripes i{background:var(--orange)}
.manifesto .box-logo{filter:none}

/* ---------- Misión con llamadas ---------- */
.mission{padding-block:clamp(64px,9vw,120px);position:relative;z-index:1}
.mission-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,64px);align-items:start;
}
.mission-head .mono{color:var(--muted)}
.mission-head h2{
  font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(30px,4.6vw,62px);line-height:.98;color:var(--navy);margin:14px 0 0;
}
.mission-intro p{font-size:clamp(15px,1.35vw,18px);color:var(--ink-2);margin:0;max-width:44ch}
.mission-intro .firma{
  font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);margin-top:18px;
}
.mission-stage{position:relative;height:clamp(240px,30vw,400px);display:grid;place-items:center;margin-top:clamp(48px,6vw,90px)}
.mission .scene{align-items:end}
.callout{position:absolute;display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--navy);line-height:1.25;white-space:nowrap;z-index:3}
.callout .lead{width:clamp(30px,6vw,84px);height:1px;background:var(--muted);position:relative;flex:none}
.callout .lead::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--orange);top:-2px}
.callout.l .lead::after{right:-1px}
.callout.r .lead::after{left:-1px}
.callout.r{flex-direction:row-reverse;text-align:left}
.callout.l{text-align:right}
.c1{right:100%;top:26%;margin-right:14px}
.c2{left:100%;top:18%;margin-left:14px}
.c3{right:100%;bottom:24%;margin-right:14px}
.c4{left:100%;bottom:12%;margin-left:14px}


/* ---------- La cadena: de tu proveedor a tu bodega ---------- */
.chain{position:relative;background:var(--navy);will-change:clip-path}
.chain-foto{
  position:absolute;inset:0;z-index:0;
  background:url("../img/cadena-fondo.webp") center 58%/cover no-repeat;
}
.chain-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,49,.86),rgba(6,26,49,.66) 40%,rgba(6,26,49,.90));
}
.chain-sticky{position:sticky;z-index:2}
.chain-scroll{height:calc(100vh + 330px)}
.chain-sticky{
  position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding-block:100px 70px;
}
.chain-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,64px);align-items:start;
}
.chain .mono{color:rgba(255,255,255,.68)}
.chain h2{
  font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(30px,4.6vw,62px);line-height:.98;color:#fff;
  margin:14px 0 0;text-wrap:balance;text-shadow:0 2px 24px rgba(6,26,49,.4);
}
.chain-intro p{font-size:clamp(15px,1.35vw,18px);color:rgba(255,255,255,.88);margin:0 0 22px;max-width:44ch}

/* --- los cinco pasos --- */
.pasos{
  list-style:none;margin:clamp(38px,5.4vw,74px) 0 0;padding:0;
  display:grid;align-items:start;gap:clamp(6px,1vw,18px);
  grid-template-columns:repeat(4,minmax(0,1fr) auto) minmax(0,1fr);
}
.paso{text-align:center}
/* el icono nace en gris y toma color cuando la cadena lo alcanza */
.paso .ic svg{filter:grayscale(1) opacity(.45);transition:filter .55s ease}
.paso.on .ic svg{filter:grayscale(0) opacity(1)}
.paso .ic{height:clamp(76px,9vw,124px);display:grid;place-items:center;margin-bottom:clamp(14px,2vw,26px)}
.paso .ic svg{width:100%;height:100%;max-width:150px}
.paso h3{
  font-family:Inter,sans-serif;font-weight:600;color:rgba(255,255,255,.42);
  font-size:clamp(15px,1.6vw,21px);line-height:1.2;margin:0 0 8px;
  transition:color .5s ease;
}
.paso.on h3{color:#fff}
.paso h3 b{font-weight:700}
.paso p{font-size:clamp(12.5px,1.05vw,14.5px);color:rgba(255,255,255,.32);margin:0;line-height:1.45;transition:color .5s ease}
.paso.on p{color:rgba(255,255,255,.78)}
.flecha{
  align-self:start;margin-top:clamp(30px,3.6vw,52px);
  color:rgba(255,255,255,.30);transition:color .5s ease;
}
.flecha.on{color:var(--orange)}
.flecha svg{width:clamp(20px,2.4vw,34px);height:auto;display:block}

@media (max-width:900px){
  .chain-head{grid-template-columns:1fr;gap:20px}
  .chain-scroll{height:calc(100vh + 420px)}
  .pasos{grid-template-columns:1fr;gap:26px}
  .flecha{display:none}
  .paso{display:grid;grid-template-columns:78px 1fr;gap:4px 16px;text-align:left;align-items:center}
  .paso .ic{height:78px;margin:0;grid-row:1 / span 2}
  .paso h3{grid-column:2;align-self:end;margin:0 0 2px}
  .paso p{grid-column:2;align-self:start}
}

/* ---------- Rutas y tiempos ---------- */
.rutas{background:var(--soft);padding-block:clamp(58px,7.5vw,110px)}
.rutas-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:end}
.rutas .mono{color:var(--muted)}
.rutas h2{
  font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(28px,4.2vw,56px);line-height:.99;color:var(--navy);margin:14px 0 0;
}
.rutas-head p{font-size:clamp(14px,1.25vw,17px);color:var(--ink-2);margin:0;max-width:46ch}
.tabla-rutas{overflow-x:auto;margin-top:clamp(28px,3.6vw,48px);
  background:var(--white);border:1px solid var(--line);border-radius:14px}
.tabla-rutas table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.tabla-rutas th,.tabla-rutas td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--line)}
.tabla-rutas thead th{
  font-family:"Roboto Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--surface-2,#f7f9fa);
}
.tabla-rutas tbody tr:last-child th,.tabla-rutas tbody tr:last-child td{border-bottom:0}
.tabla-rutas tbody th{font-weight:600;color:var(--navy);font-size:15px}
.tabla-rutas td{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-rutas .aereo{color:var(--orange);font-weight:600}
.rutas-pie{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;
  font-size:13px;color:var(--muted);
}
.rutas-pie b{color:var(--navy);font-weight:600}
@media (max-width:900px){ .rutas-head{grid-template-columns:1fr;gap:16px} }

/* ---------- Operaciones (acordeón) ---------- */
.ops{padding-block:clamp(64px,9vw,120px)}
.ops-head{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start}
.ops-head h2{
  font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(26px,4vw,56px);line-height:1.06;margin:0 0 26px;text-wrap:balance;
}
.acc{margin-top:52px;border-top:1px solid var(--line);position:relative}
.row{
  display:grid;grid-template-columns:minmax(150px,1fr) 2.1fr auto;gap:20px;align-items:center;
  padding:24px 0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:opacity .35s;
}
.row .name a{color:inherit;display:block;padding:11px 0;margin:-11px 0}
.row .name{
  font-family:Archivo,sans-serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(17px,2.1vw,26px);color:var(--muted);transition:color .35s;
}
.row:hover .name,.row.active .name{color:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--ink-2);
  transition:border-color .35s,color .35s;
}
.row:hover .chip,.row.active .chip{border-color:var(--navy);color:var(--navy)}
.row .arrow{color:var(--muted);transition:transform .35s,color .35s}
.row:hover .arrow{transform:translateX(6px);color:var(--orange)}
.peek{
  position:absolute;width:min(230px,40vw);aspect-ratio:3/4;border-radius:4px;
  background:var(--navy);overflow:hidden;
  left:22%;top:0;pointer-events:none;opacity:0;transform:rotate(-6deg) scale(.94);
  transition:opacity .4s,transform .4s;box-shadow:0 26px 60px rgba(6,26,49,.3);
  z-index:2;
}
.peek img{width:100%;height:100%;object-fit:cover}
.peek.show{opacity:1;transform:rotate(-6deg) scale(1)}

/* ---------- Casos y rubros ---------- */
.casos{padding-block:clamp(58px,7.5vw,110px)}
.casos h2{
  font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(28px,4.2vw,56px);line-height:.99;color:var(--navy);margin:14px 0 0;max-width:16ch;
}
.casos .mono{color:var(--muted)}
.casos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(30px,4vw,52px)}
.caso{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:26px 24px 28px}
.caso .et{font-family:"Roboto Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.caso h3{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.02em;font-size:clamp(19px,2vw,25px);line-height:1.1;color:var(--navy);margin:12px 0 10px}
.caso p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.55}
.caso .dato{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--navy);font-weight:600}
.rubros{margin-top:clamp(34px,4.4vw,60px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.rubros p.tit{font-family:"Roboto Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.rubros ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rubros li{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px;color:var(--ink-2)}

/* ---------- Cierre ---------- */
.closing{
  position:relative;background:linear-gradient(180deg,#8fc3e8,#b9daee 58%,#d3e7f4);
  padding-block:clamp(50px,7vw,90px) 0;overflow:hidden;text-align:center;
}
.closing .wordmark{
  font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.05em;
  font-size:clamp(80px,21vw,320px);line-height:.8;color:#fff;
  opacity:.96;user-select:none;position:relative;z-index:1;pointer-events:none;
}
/* --- escena marina --- */
.seascape{
  position:relative;z-index:2;height:clamp(300px,38vw,520px);
  margin-top:clamp(-210px,-15vw,-70px);
}
.sea{
  position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,#5e97c4,#3f7aa8);
}
.wave-top{
  position:absolute;left:-2%;right:-2%;bottom:38%;width:104%;
  height:clamp(26px,3.6vw,52px);z-index:2;display:block;
}
.ship-wrap{
  position:absolute;left:0;bottom:24.2%;width:min(1150px,88vw);
  z-index:3;will-change:transform;
}
.ship{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 22px rgba(6,26,49,.28))}
.wave-front{
  position:absolute;left:-2%;right:-2%;bottom:0;width:104%;
  height:clamp(96px,13vw,178px);z-index:4;display:block;
}
.closing .tag{
  position:absolute;left:6%;bottom:11%;z-index:5;color:#fff;text-align:left;
  font-family:Archivo,sans-serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(18px,2.6vw,34px);line-height:1.05;
  text-shadow:0 2px 14px rgba(6,26,49,.35);
}
.foot{background:var(--navy);color:rgba(255,255,255,.72);padding:34px 0 22px}
.foot-in{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:20px 30px;align-items:start}
.foot img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.foot .foot-h{color:#fff;font-size:11px;margin:0 0 8px;font-weight:600;font-family:Inter,sans-serif;letter-spacing:0}
.foot a{display:block;font-size:13px;padding:4px 0;line-height:1.35}
.foot a:hover{color:var(--orange-2)}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:14px;
  font-size:11px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}

@media (max-width:900px){
  .mission-head,.ops-head{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-stats{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:24px}
  .row{grid-template-columns:1fr;gap:12px}
  .peek{display:none}
  .rail{display:none}
  .nav-links{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* --- ajustes móviles: al final para ganar en la cascada --- */
@media (max-width:900px){
  .mission-stage .callout{display:none}
  .mission-stage .peek-hint{display:none}
  .mission-stage{height:clamp(260px,46vw,380px);margin-top:clamp(40px,6vw,70px)}
  .hero-art{padding-top:80px}
}

/* ---------- Páginas internas ---------- */
.pg{position:relative;padding-block:clamp(46px,6vw,90px) clamp(40px,5vw,70px);background:var(--soft)}
.pg .mono{color:var(--muted)}
.pg h1{
  font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.04em;
  font-size:clamp(32px,5.2vw,68px);line-height:.98;color:var(--navy);
  margin:14px 0 18px;max-width:20ch;text-wrap:balance;
}
.pg .bajada{font-size:clamp(16px,1.5vw,20px);color:var(--ink-2);max-width:60ch;margin:0}
.miga{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.miga a{color:var(--muted)}
.miga a:hover{color:var(--orange)}

.art{padding-block:clamp(44px,6vw,84px)}
.art-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:start}
.art-cuerpo h2{
  font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(23px,2.7vw,34px);line-height:1.06;color:var(--navy);
  margin:clamp(34px,4vw,52px) 0 14px;
}
.art-cuerpo h2:first-child{margin-top:0}
.art-cuerpo h3{
  font-family:Inter,sans-serif;font-weight:600;font-size:clamp(16px,1.5vw,19px);
  color:var(--navy);margin:26px 0 8px;
}
.art-cuerpo p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:66ch}
.art-cuerpo ul{margin:0 0 18px;padding-left:0;list-style:none;max-width:66ch}
.art-cuerpo ul li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--ink-2);line-height:1.6}
.art-cuerpo ul li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:2px;background:var(--orange)}
.art-cuerpo b{color:var(--navy)}
.dato-fuerte{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:0 12px 12px 0;padding:20px 24px;margin:24px 0;max-width:66ch;
}
.dato-fuerte p{margin:0;color:var(--navy);font-size:15.5px}
.art-lado{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.ficha{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.ficha h3{font-family:"Roboto Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.ficha dl{margin:0;display:grid;grid-template-columns:1fr;gap:12px}
.ficha dt{font-size:12px;color:var(--muted);margin-bottom:2px}
.ficha dd{margin:0;font-size:15px;color:var(--navy);font-weight:600;line-height:1.35}
.ficha-cta{background:var(--navy);color:#fff;border-radius:16px;padding:24px}
.ficha-cta p{color:rgba(255,255,255,.78);font-size:14.5px;margin:0 0 16px;line-height:1.5}
.ficha-cta strong{display:block;color:#fff;font-family:Archivo,sans-serif;font-weight:700;
  font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.tabla-simple{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 20px;max-width:66ch}
.tabla-simple th,.tabla-simple td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.tabla-simple thead th{font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.tabla-simple tbody th{font-weight:600;color:var(--navy)}
.tabla-simple td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.faq{border-top:1px solid var(--line);margin-top:clamp(34px,4vw,54px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:20px 40px 20px 0;position:relative;list-style:none;
  font-family:Inter,sans-serif;font-weight:600;font-size:clamp(15px,1.5vw,18px);color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;color:var(--orange);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px;color:var(--ink-2);line-height:1.65;max-width:70ch}
.otras{background:var(--soft);padding-block:clamp(44px,5.5vw,80px)}
.otras h2{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(22px,2.6vw,32px);color:var(--navy);margin:0 0 24px}
.otras-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.otras a{display:block;background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;transition:border-color .3s,transform .3s}
.otras a:hover{border-color:var(--navy);transform:translateY(-2px)}
.otras a b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:18px;
  color:var(--navy);letter-spacing:-.02em;margin-bottom:5px}
.otras a span{font-size:13.5px;color:var(--muted);line-height:1.45}
@media (max-width:900px){
  .art-grid{grid-template-columns:1fr;gap:34px}
  .art-lado{position:static}
}

/* ---------- Formulario de cotización ---------- */
.form-cotiza{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;max-width:640px;margin-top:8px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1 / -1}
.campo label{font-size:13px;color:var(--muted)}
.campo input,.campo select,.campo textarea{
  font-family:Inter,sans-serif;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:var(--white);
  transition:border-color .25s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--orange)}
.campo textarea{resize:vertical}
.acepta label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.acepta input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--orange)}
.acepta a{color:var(--orange);text-decoration:underline;display:inline-block;padding:3px 0}
.aviso{margin:14px 0 0;font-size:14px;padding:12px 16px;border-radius:10px;
  background:var(--soft);border:1px solid var(--line);color:var(--ink-2)}
@media (max-width:700px){ .form-cotiza{grid-template-columns:1fr} }

/* Botón de la barra: más ancho */
.nav .btn{padding-inline:34px}

/* ---------- Contacto al cierre del home ---------- */
.contacto{background:var(--soft);padding-block:clamp(56px,7vw,100px)}
.contacto-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(28px,4.5vw,72px);align-items:start}
.contacto .mono{color:var(--muted)}
.contacto h2{
  font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(28px,4vw,52px);line-height:.99;color:var(--navy);margin:14px 0 12px;max-width:15ch;
}
.contacto .bajada{font-size:clamp(15px,1.35vw,18px);color:var(--ink-2);margin:0 0 26px;max-width:46ch}
.tarjeta-directo{background:var(--navy);color:#fff;border-radius:18px;padding:clamp(24px,3vw,34px)}
.tarjeta-directo h3{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,2.2vw,27px);line-height:1.1;margin:0 0 10px;color:#fff}
.tarjeta-directo p{color:rgba(255,255,255,.76);font-size:14.5px;line-height:1.55;margin:0 0 22px}
.btn-wsp{
  display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  background:#25D366;color:#0b2b1a;border:0;border-radius:999px;cursor:pointer;
  font-family:Inter,sans-serif;font-size:15px;font-weight:600;padding:16px 22px;
  transition:transform .25s,background .25s;
}
.btn-wsp:hover{transform:translateY(-2px);background:#1fbe5a}
.btn-wsp svg{width:21px;height:21px;flex:none}
.directo-datos{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:grid;gap:16px}
.directo-datos a,.directo-datos span{display:block;color:#fff;font-size:15.5px;font-weight:600;text-decoration:none}
.directo-datos small{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:4px;font-family:"Roboto Mono",monospace}
.directo-datos a:hover{color:var(--orange-2)}
@media (max-width:900px){ .contacto-grid{grid-template-columns:1fr;gap:32px} }

/* Pie: en pantallas táctiles los enlaces vuelven a tener área cómoda */
@media (max-width:900px){
  .foot-in{grid-template-columns:1fr 1fr;gap:22px}
  .foot a{padding:13px 0}
}
@media (max-width:520px){ .foot-in{grid-template-columns:1fr} }

/* ---------- Lente de color: el círculo repinta el contenedor ---------- */
.tinte{
  position:absolute;left:0;top:0;width:var(--w);height:var(--h);
  transform:translateZ(calc(var(--d) / 2 + 2px));overflow:hidden;
  background:var(--navy);
  -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 92%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 92%,rgba(0,0,0,0) 100%);
}
.tinte .corr-capa{position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,
    rgba(0,0,0,.22) 0 3px,rgba(255,255,255,.07) 3px 7px,transparent 7px 15px)}
.hero-art .box{cursor:crosshair}

/* el contenido del manifiesto entra después de que la banda termina de abrirse */
.manifesto .pad{position:relative}
.manifesto-int{will-change:transform,opacity}

/* el botón de la cadena, sobre foto */
.chain .btn-linea{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.45)}
.chain .btn-linea:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ---------- Botón flotante de WhatsApp ---------- */
.wsp-flotante{
  position:fixed;right:20px;bottom:20px;z-index:900;
  display:flex;align-items:center;gap:0;overflow:hidden;
  height:58px;padding:0 17px;border-radius:999px;
  background:#25D366;color:#0b2b1a;text-decoration:none;
  box-shadow:0 12px 32px rgba(6,26,49,.28);
  transition:gap .3s cubic-bezier(.4,0,.2,1),padding .3s,transform .25s,box-shadow .25s;
}
.wsp-flotante:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(6,26,49,.34);gap:11px;padding-right:24px}
.wsp-flotante svg{width:26px;height:26px;flex:none;fill:currentColor}
.wsp-flotante span{
  font-family:Inter,sans-serif;font-size:14.5px;font-weight:600;white-space:nowrap;
  max-width:0;opacity:0;transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .25s;
}
.wsp-flotante:hover span{max-width:190px;opacity:1}
.wsp-flotante:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
@media (max-width:520px){
  .wsp-flotante{right:14px;bottom:14px;height:54px;padding:0 15px}
  .wsp-flotante svg{width:25px;height:25px}
}
/* el panel de revisión se va a la izquierda para no chocar */
.rev-barra{right:auto!important;left:18px!important}

/* Estados del aviso del formulario */
.aviso-ok{background:#e6f5ee;border-color:#0e6b57;color:#0e6b57}
.aviso-error{background:#fdecea;border-color:#a82a1e;color:#a82a1e}
.aviso-espera{background:var(--soft);border-color:var(--line);color:var(--muted)}
.aviso-ok a,.aviso-error a{display:inline-flex}