/* ══════════════════════════════════════════════════════════════════════════
   QMT · QUIROGA MAQUINARIAS LTDA. — SISTEMA DE DISEÑO (DEMO)
   Base blanca dominante · negro de alto contraste · amarillo industrial
   ══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────── 1. TOKENS ──────────────────────────── */
:root{
  color-scheme: light;

  --white:      #FFFFFF;
  --alt:        #E9EEF4;   /* banda clara: 1,17:1 vs blanco, para que las tarjetas blancas se lean */
  --alt-2:      #DCE4EE;   /* superficie hundida sobre la banda gris */
  --line:       #DCE3EB;
  --line-2:     #C2CCD8;

  --ink:        #131B2A;   /* azul profundo: texto y bloques de contraste */
  --ink-2:      #1C2637;   /* superficie de tarjeta sobre bloque oscuro */
  --ink-3:      #0E1522;   /* footer, un paso más profundo */
  --line-dk:    #2C3849;   /* hairline sobre bloque oscuro */
  --line-alt:   #C8D3E0;   /* hairline sobre la banda gris (1,30:1) */
  --border-dk:  #66748A;   /* borde de control sobre azul: 3,64:1, mínimo 3:1 de WCAG 1.4.11 */
  --text:       #131B2A;
  --muted:      #55637A;
  --muted-2:    #5E6A7E;   /* 5,47:1 sobre blanco · 4,69:1 sobre la banda gris */
  --on-dark:    #E8EDF4;
  --on-dark-mut:#94A3B4;
  --on-dark-mut2:#8190AB;  /* etiquetas secundarias sobre azul: 5.35:1 */

  --yellow:     #FFC400;
  --yellow-2:   #FFD84D;
  --yellow-dk:  #7A5700;
  --navy:       #123E5C;

  --maxw:       1300px;
  --gut:        clamp(1.15rem, 4vw, 3.25rem);
  --r:          2px;

  --f-disp: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --f-cond: 'Barlow Condensed', 'Archivo Narrow', 'Segoe UI', sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --sh:   0 1px 2px rgba(13,17,23,.05), 0 8px 24px -12px rgba(13,17,23,.12);
  --sh-2: 0 2px 4px rgba(13,17,23,.06), 0 18px 44px -18px rgba(13,17,23,.20);
}

/* ──────────────────────────── 2. RESET / BASE ──────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px}
/* en páginas con sub-navegación el ancla debe dejar espacio para header + subnav */
html:has(.subnav){scroll-padding-top:128px}
body{
  margin:0; background:var(--white); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
[hidden]{display:none!important}   /* .lb{display:grid} le gana al UA: sin esto el
                                      lightbox cerrado tapa la página y come clicks */
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-disp); font-weight:800; line-height:1.03;
  letter-spacing:-.024em; margin:0; color:var(--ink); text-wrap:balance}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
strong{font-weight:600; color:var(--ink)}

::selection{background:var(--yellow); color:#0A0A0A}
:focus-visible{outline:2.5px solid var(--yellow-dk); outline-offset:3px; border-radius:2px}
/* sobre azul el ocre queda en 2,3:1: hace falta el amarillo claro (12,5:1) */
.hdr :focus-visible,.bg-dark :focus-visible,.lb :focus-visible{outline-color:var(--yellow-2)}
.skip:focus{outline-color:var(--ink)}

.skip{position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--yellow); color:#0A0A0A; padding:.7rem 1.1rem; font-weight:600}
.skip:focus{left:.5rem; top:.5rem}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.sec{position:relative; padding-block:clamp(4rem, 8vw, 7.5rem)}
.sec--tight{padding-block:clamp(3rem, 5.5vw, 5rem)}
.bg-alt{background:var(--alt)}
.bg-dark{background:var(--ink); color:var(--on-dark)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff}

.eyebrow{
  font-family:var(--f-cond); font-weight:600; font-size:.84rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{content:''; width:2.1rem; height:3px; background:var(--yellow); flex:none}
.bg-dark .eyebrow{color:var(--yellow-2)}
.bg-dark .eyebrow::before{background:var(--yellow)}

.h-lg{font-size:clamp(1.95rem, 4.2vw, 3.2rem)}
.h-md{font-size:clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing:-.016em}
.lead{font-size:clamp(1.02rem, 1.35vw, 1.15rem); color:var(--muted); max-width:58ch}
.bg-dark .lead{color:var(--on-dark-mut)}
.muted{color:var(--muted)}

.sec-head{display:grid; gap:1.15rem; margin-bottom:clamp(2.4rem,5vw,3.75rem)}
@media (min-width:960px){
  .sec-head.split{grid-template-columns:1.1fr .9fr; align-items:end; gap:2.25rem 4rem}
  .sec-head.split .eyebrow{grid-column:1/-1}
}

/* ──────────────────────────── 3. BOTONES ──────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-cond); font-weight:600; font-size:1.02rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.95rem 1.6rem; border:1.5px solid transparent; border-radius:var(--r);
  transition:transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn svg{width:1.05em; height:1.05em; transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--yellow); color:#0A0A0A; box-shadow:var(--sh)}
.btn--primary:hover{background:var(--yellow-2); transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn--ghost{border-color:var(--line-2); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.bg-dark .btn--ghost{border-color:var(--border-dk); color:var(--on-dark)}
.bg-dark .btn--ghost:hover{border-color:var(--yellow); color:var(--yellow-2)}

/* enlace de texto con flecha */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-cond);
  font-weight:600; font-size:.98rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); padding-bottom:.2rem; border-bottom:2px solid var(--yellow);
  transition:gap .3s, color .25s;
}
.tlink:hover{gap:.85rem}
.tlink svg{width:1em; height:1em}
.bg-dark .tlink{color:#fff}

/* ──────────────────────────── 4. HEADER ──────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:120; background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line); transition:box-shadow .35s;
}
.hdr.is-stuck{box-shadow:0 1px 20px -8px rgba(13,17,23,.18)}
.hdr__in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  height:76px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  transition:height .35s;
}
.hdr.is-stuck .hdr__in{height:64px}

.logo{display:flex; align-items:center; gap:.75rem; flex:none}
.logo__image{display:block; width:auto; height:48px; object-fit:contain; transition:height .35s}
.logo__image--footer{height:58px}
.logo__mark{width:38px; height:38px; flex:none}
.logo__txt{display:flex; flex-direction:column; line-height:1}
.logo__txt b{font-family:var(--f-disp); font-weight:900; font-size:1.34rem; letter-spacing:.02em; color:var(--ink)}
.logo__txt span{font-family:var(--f-cond); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-top:.28rem}

.hdr.is-stuck .logo__image{height:42px}
@media (max-width:480px){
  .logo__image{height:40px}
  .logo__image--footer{height:50px}
}

.nav{display:none}
@media (min-width:1100px){
  .nav{display:flex; align-items:center; gap:.2rem}
  .nav a{
    font-family:var(--f-cond); font-weight:500; font-size:.96rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); padding:.55rem .7rem;
    position:relative; transition:color .22s;
  }
  .nav a::after{
    content:''; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:3px;
    background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .3s;
  }
  .nav a:hover{color:var(--ink)}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a[aria-current="page"]{color:var(--ink); font-weight:600}
  .nav a[aria-current="page"]::after{transform:scaleX(1)}
}
.hdr__cta{display:none}
@media (min-width:640px){ .hdr__cta{display:inline-flex; padding:.72rem 1.2rem; font-size:.94rem} }

.burger{display:grid; place-items:center; width:44px; height:44px; background:none;
  border:1.5px solid var(--border-dk); border-radius:var(--r); color:var(--ink)}
@media (min-width:1100px){ .burger{display:none} }
.burger span{display:block; width:18px; height:2px; background:currentColor; transition:transform .3s, opacity .3s}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.progress{position:fixed; top:0; left:0; height:3px; background:var(--yellow); width:0; z-index:130}

.mob{
  position:fixed; inset:0; z-index:119; background:var(--white);
  display:grid; align-content:center; padding:5.5rem var(--gut) 2rem;
  clip-path:inset(0 0 100% 0); pointer-events:none; overflow-y:auto;
}
.mob.is-open{pointer-events:auto}
.mob a{
  font-family:var(--f-disp); font-weight:800; font-size:clamp(1.4rem,6vw,2.1rem);
  letter-spacing:-.022em; padding:.42rem 0; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:1rem; color:var(--ink);
}
.mob a i{font-family:var(--f-cond); font-style:normal; font-size:.74rem;
  letter-spacing:.18em; color:var(--yellow-dk); font-weight:600}
.mob a[aria-current="page"]{color:var(--yellow-dk)}

/* ──────────────────────────── 5. HERO HOME ──────────────────────────── */
.hero{padding-top:clamp(7rem, 12vw, 9.5rem); position:relative; overflow:hidden}
.hero__grid{display:grid; gap:clamp(2.5rem, 5vw, 3.5rem)}
@media (min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,40%);
    align-items:center; gap:clamp(2rem,3vw,3.25rem)}
}

.hero h1{font-size:clamp(2.1rem, 5.6vw, 4.5rem); font-weight:900;
  letter-spacing:-.036em; max-width:18ch}
.hl{position:relative; display:inline-block; z-index:1; padding-inline:.08em}
.hl::before{
  content:''; position:absolute; z-index:-1; left:0; right:0; bottom:.06em; height:.34em;
  background:var(--yellow); transform:scaleX(0); transform-origin:left;
}
.mask{display:block; overflow:hidden; padding-bottom:.05em}
.mask>span{display:block}

.hero__sub{margin-top:1.7rem; max-width:50ch; color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.17rem)}
.hero__acts{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}

.hero__media{position:relative}
.hero__shot{position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--alt)}
@media (max-width:1023px){
  .hero__shot{aspect-ratio:16/10}
}
.hero__shot img{width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  filter:saturate(.9) contrast(1.05)}
.hero__shot img[src$="casa-matriz-qmt.jpg"]{object-position:60% 50%}
.hero__shot::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(255,255,255,.14), transparent 40%, rgba(13,17,23,.22))}
.hero__plate{position:absolute; z-index:3; left:0; bottom:0; background:var(--yellow);
  color:#0A0A0A; padding:1rem 1.35rem; max-width:15rem}
.hero__plate b{display:block; font-family:var(--f-disp); font-weight:900; font-size:2rem;
  letter-spacing:-.03em; line-height:1}
.hero__plate > span{font-family:var(--f-cond); font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; font-weight:600}

/* ──────────────────────────── 6. HERO DE PÁGINA INTERIOR ──────────────────────────── */
.phero{padding-top:clamp(6.5rem,11vw,8.5rem); padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.phero__grid{display:grid; gap:1.4rem}
@media (min-width:960px){
  .phero__grid{grid-template-columns:1.15fr .85fr; align-items:end; gap:2rem 4rem}
  .phero__grid .crumbs, .phero__grid .eyebrow{grid-column:1/-1}
}
.phero h1{font-size:clamp(1.85rem,4.8vw,3.7rem); font-weight:900; letter-spacing:-.034em; max-width:22ch}
.phero .lead{max-width:52ch}

.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-family:var(--f-cond); font-size:.84rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:1.2rem}
.crumbs a{color:var(--muted); transition:color .22s}
.crumbs a:hover{color:var(--ink)}
.crumbs svg{width:.85em; height:.85em; opacity:.55}
.crumbs [aria-current]{color:var(--ink); font-weight:600}

.band{position:relative; overflow:hidden; background:var(--alt)}
.band img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.04)}
.band--hero{aspect-ratio:21/8}
@media (max-width:700px){ .band--hero{aspect-ratio:16/10} }
.band__tag{position:absolute; z-index:3; left:0; bottom:0; background:var(--yellow);
  color:#0A0A0A; font-family:var(--f-cond); font-weight:600; font-size:.84rem;
  letter-spacing:.16em; text-transform:uppercase; padding:.58rem 1.1rem}

/* ──────────────────────────── 7. TICKER ──────────────────────────── */
.ticker{background:var(--yellow); color:#0A0A0A; overflow:hidden; padding:.8rem 0}
.ticker__row{display:flex; width:max-content; will-change:transform}
.ticker__row span{
  font-family:var(--f-cond); font-weight:600; font-size:1.02rem; letter-spacing:.16em;
  text-transform:uppercase; padding-inline:1.5rem; display:flex; align-items:center;
  gap:1.5rem; white-space:nowrap;
}
.ticker__row span::after{content:''; width:5px; height:5px; background:#0A0A0A;
  border-radius:50%; opacity:.5}

/* ──────────────────────────── 8. CIFRAS ──────────────────────────── */
.stats{border-block:1px solid var(--line)}
.hero .stats{margin-top:clamp(3rem,6vw,5rem)}
.stats__in{max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(2,1fr)}
@media (min-width:880px){ .stats__in{grid-template-columns:repeat(4,1fr)} }
.stat{padding:1.55rem 0; border-right:1px solid var(--line)}
.stat:nth-child(2n){padding-left:1.2rem}
@media (min-width:880px){
  .stat{padding:1.9rem 0}
  .stat:nth-child(2n){padding-left:0}
  .stat+.stat{padding-left:1.7rem}
  .stat:last-child{border-right:0}
}
@media (max-width:879px){
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
/* Cifra: número y unidad en una sola línea, con regla amarilla de encabezado.
   Los selectores usan `>` a propósito: el contador es un <span> DENTRO del <b>,
   y un `.stat span` descendiente lo capturaba y lo rompía. */
.stat::before{content:''; display:block; width:1.75rem; height:3px;
  background:var(--yellow); margin-bottom:.95rem}
.stat > b{
  display:flex; align-items:baseline; gap:.14em; white-space:nowrap;
  font-family:var(--f-disp); font-weight:800; font-size:clamp(1.85rem,3.4vw,2.65rem);
  letter-spacing:-.034em; color:var(--ink); line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat > b > span{font:inherit; color:inherit; letter-spacing:inherit}
.stat > b > i{font-style:normal; font-weight:700; font-size:.4em; letter-spacing:.01em;
  color:var(--yellow-dk); align-self:flex-start; margin-top:.16em}
.stat > span{display:block; margin-top:.6rem; font-family:var(--f-cond); font-weight:600;
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}

/* ──────────────────────────── 9. TARJETAS ──────────────────────────── */
.grid-serv{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:640px){ .grid-serv{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1180px){ .grid-serv{grid-template-columns:repeat(4,1fr)} }
.grid-3{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:640px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

.card{
  background:var(--white); padding:clamp(1.6rem,2.6vw,2.1rem);
  display:flex; flex-direction:column; gap:.9rem; position:relative; isolation:isolate;
  transition:box-shadow .35s;
}
.card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--yellow);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1); z-index:2;
}
.card:hover{box-shadow:var(--sh-2)}
.card:hover::before{transform:scaleX(1)}
.card__ico{
  width:48px; height:48px; border:1.5px solid var(--line); border-radius:var(--r);
  display:grid; place-items:center; color:var(--ink); flex:none;
  transition:border-color .35s, background .35s, transform .35s;
}
.card:hover .card__ico{border-color:var(--yellow); background:var(--yellow); transform:translateY(-2px)}
.card__ico svg{width:24px; height:24px}
.card__n{position:absolute; top:1.2rem; right:1.3rem; font-family:var(--f-cond);
  font-size:.8rem; letter-spacing:.16em; color:var(--muted-2)}
.card h3{font-size:1.16rem; font-weight:700; letter-spacing:-.014em; margin-top:.2rem}
.card p{font-size:.93rem; color:var(--muted); line-height:1.62}
.card__more{margin-top:auto; padding-top:.4rem; font-family:var(--f-cond); font-weight:600;
  font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow-dk)}
a.card{color:inherit}

/* ──────────────────────────── 10. SPLIT ──────────────────────────── */
.split{display:grid; gap:clamp(2.2rem,5vw,4.5rem); align-items:center}
@media (min-width:980px){
  .split{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:stretch}
  .split--rev>.split__media{order:2}
  /* La imagen ocupa toda la altura de la fila para que su bloque calce con el
     del texto; el texto queda centrado respecto a ella. */
  .split > :not(.split__media){align-self:center}
  .split__media{display:flex; flex-direction:column}
  .split__media > .frame{flex:1 1 auto; aspect-ratio:auto; min-height:23rem}
}
.split__media{position:relative}
.frame{position:relative; overflow:hidden; background:var(--alt); box-shadow:var(--sh)}
.frame img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.04)}
.frame--tall{aspect-ratio:4/5}
.frame--wide{aspect-ratio:16/10}
.frame::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(255,255,255,.1), transparent 45%, rgba(13,17,23,.18))}
.frame__tag{position:absolute; z-index:3; left:0; bottom:0; background:var(--yellow);
  color:#0A0A0A; font-family:var(--f-cond); font-weight:600; font-size:.84rem;
  letter-spacing:.16em; text-transform:uppercase; padding:.58rem 1.1rem}

/* Fotografías reales de faena insertadas entre bloques de contenido. */
.media-strip{display:grid; grid-template-columns:1fr; gap:clamp(.8rem,1.5vw,1.2rem); margin-top:clamp(2rem,4vw,3.2rem)}
@media (min-width:700px){
  .media-strip--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-strip--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.media-strip__item{position:relative; overflow:hidden; width:100%; min-width:0; min-height:0; margin:0; aspect-ratio:4/3; background:var(--alt); box-shadow:var(--sh)}
.media-strip__item--wide{aspect-ratio:16/9}
.media-strip--3 .media-strip__item--wide{aspect-ratio:4/3}
.media-strip__item img{width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.04); transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.media-strip__item--haul img{object-position:right center}
.media-strip__item:hover img{transform:scale(1.035)}
.media-strip__item figcaption{position:absolute; z-index:2; left:0; bottom:0; max-width:90%; padding:.62rem 1rem; background:var(--yellow); color:#0a0a0a; font-family:var(--f-cond); font-size:.8rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase}

.plate{position:absolute; z-index:4; background:var(--white); border:1px solid var(--line);
  box-shadow:var(--sh-2); padding:1.1rem 1.3rem; max-width:14rem}
.plate b{display:block; font-family:var(--f-disp); font-weight:900; font-size:1.9rem;
  letter-spacing:-.03em; color:var(--ink); line-height:1}
.plate b > span,.hero__plate b > span{font:inherit; color:inherit; letter-spacing:inherit; display:inline}
.plate > span{font-family:var(--f-cond); font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted)}
.plate::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--yellow)}
.plate--br{right:-.75rem; bottom:-1.25rem}
@media (min-width:980px){ .plate--br{right:-1.75rem; bottom:-1.75rem} }

.checks{display:grid; gap:.78rem; margin-top:1.9rem}
.checks li{display:flex; gap:.85rem; align-items:flex-start; font-size:.97rem; color:var(--text)}
.checks .tick{width:21px; height:21px; flex:none; margin-top:.22rem; border-radius:50%;
  background:var(--yellow); display:grid; place-items:center}
.checks .tick svg{width:12px; height:12px; color:#0A0A0A}
.bg-dark .checks li{color:var(--on-dark)}

.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem}
.chip{font-family:var(--f-cond); font-size:.88rem; letter-spacing:.11em; text-transform:uppercase;
  border:1.5px solid var(--line); padding:.42rem .85rem; border-radius:100px; color:var(--muted);
  transition:border-color .3s, color .3s, background .3s}
.chip:hover{border-color:var(--yellow); background:var(--yellow); color:#0A0A0A}
.bg-dark .chip{border-color:#333D48; color:var(--on-dark-mut)}

.clients{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.65rem,1.6vw,1.2rem); margin:2rem 0 0; padding:0; list-style:none}
@media (min-width:640px){.clients{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.clients{grid-template-columns:repeat(5,minmax(0,1fr))}}
.clients li{display:grid; place-items:center; min-width:0; margin:0; padding:clamp(.45rem,1vw,.8rem); aspect-ratio:2/1; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.clients img{display:block; width:100%; height:100%; object-fit:contain}

.blueprint{position:absolute; inset:0; pointer-events:none; opacity:.85;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(70% 58% at 50% 42%, #000 0%, transparent 76%);
}

/* ──────────────────────────── 11. BLOQUE DE SERVICIO DETALLADO ──────────────────────────── */
.svc{border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem)}
.svc:first-of-type{border-top:2px solid var(--ink)}
.svc__grid{display:grid; gap:clamp(1.6rem,3.5vw,3rem)}
@media (min-width:900px){
  .svc__grid{grid-template-columns:5.5rem minmax(0,1fr) minmax(0,32%); align-items:start}
  /* bloques sin imagen: el texto ocupa el ancho restante */
  .svc__grid:not(:has(.svc__media)){grid-template-columns:5.5rem minmax(0,1fr)}
}
.svc__n{font-family:var(--f-disp); font-weight:900; font-size:clamp(2.2rem,4vw,3.1rem);
  letter-spacing:-.04em; line-height:.9; color:var(--yellow-dk)}
.svc h2{font-size:clamp(1.5rem,2.8vw,2.1rem); margin-bottom:.85rem}
.svc__media{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--alt); box-shadow:var(--sh)}
.svc__media img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.04)}
.svc__list{display:grid; gap:.5rem; margin-top:1.3rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.svc__list li{display:flex; gap:.65rem; align-items:baseline; font-size:.94rem; color:var(--text)}
.svc__list li::before{content:''; width:7px; height:7px; background:var(--yellow); flex:none; margin-top:.48rem}

/* ──────────────────────────── 12. FLOTA ──────────────────────────── */
.fleet{display:grid; gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:1024px){ .fleet{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.fleet__list{display:grid; border-top:2px solid var(--ink)}
.fleet__list li{display:flex; align-items:baseline; gap:1rem; padding:.9rem .25rem;
  border-bottom:1px solid var(--line); transition:padding-left .35s, background .35s}
.fleet__list li:hover{padding-left:.9rem; background:var(--alt)}
.bg-alt .fleet__list li:hover{background:var(--white)}
.fleet__list i{font-family:var(--f-cond); font-style:normal; font-size:.78rem;
  letter-spacing:.14em; color:var(--muted-2); flex:none; width:2.1rem}
.fleet__list b{font-weight:600; font-size:1rem; color:var(--ink)}
.fleet__list em{margin-left:auto; font-style:normal; font-size:.85rem; color:var(--muted); text-align:right}

.metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line)}
@media (min-width:980px){ .metrics--4{grid-template-columns:repeat(4,1fr)} }
.metric{background:var(--white); padding:1.5rem 1.35rem}
.metric::before{content:''; display:block; width:1.75rem; height:3px;
  background:var(--yellow); margin-bottom:.9rem}
.metric > b{
  display:flex; align-items:baseline; gap:.14em; white-space:nowrap;
  font-family:var(--f-disp); font-weight:800; font-size:clamp(1.65rem,2.9vw,2.25rem);
  letter-spacing:-.032em; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.metric > b > span{font:inherit; color:inherit; letter-spacing:inherit}
.metric > b > i{font-style:normal; font-weight:700; font-size:.4em; letter-spacing:.01em;
  color:var(--yellow-dk); align-self:flex-start; margin-top:.16em}
.metric > span{display:block; margin-top:.55rem; font-family:var(--f-cond); font-weight:600;
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}

/* ──────────────────────────── 13. PILARES ──────────────────────────── */
.pillars{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:840px){ .pillars{grid-template-columns:repeat(3,1fr)} }
.pillar{background:var(--white); padding:clamp(1.7rem,3vw,2.4rem);
  display:flex; flex-direction:column; gap:.85rem; transition:box-shadow .35s}
.pillar:hover{box-shadow:var(--sh-2)}
.pillar__ico{width:46px; height:46px; color:var(--ink); padding:.55rem;
  background:var(--yellow); border-radius:var(--r)}
.pillar h3{font-size:1.18rem}
.pillar p{font-size:.95rem; color:var(--muted)}
.pillar__note{margin-top:auto; padding-top:1.1rem; font-family:var(--f-cond);
  font-size:.79rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)}

/* ──────────────────────────── 15. FAQ ──────────────────────────── */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.4rem .25rem; display:flex; gap:1.2rem;
  align-items:flex-start; font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.02rem,1.7vw,1.24rem); letter-spacing:-.014em; color:var(--ink);
  transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--yellow-dk)}
.faq summary::after{content:''; margin-left:auto; flex:none; width:24px; height:24px;
  margin-top:.1rem; background:var(--yellow); border-radius:var(--r); transition:transform .3s;
  clip-path:polygon(43% 20%,57% 20%,57% 43%,80% 43%,80% 57%,57% 57%,57% 80%,43% 80%,43% 57%,20% 57%,20% 43%,43% 43%)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__q{font-family:var(--f-cond); font-weight:600; font-size:.82rem; letter-spacing:.16em;
  color:var(--muted-2); flex:none; padding-top:.3rem; width:2.2rem}
.faq__a{padding:0 .25rem 1.6rem 3.4rem; color:var(--muted); font-size:.99rem; max-width:80ch}
@media (max-width:600px){ .faq__a{padding-left:.25rem} }
/* contenedor que JS inserta para poder animar la altura del desplegable */
.faq__wrap{overflow:hidden; will-change:height}

/* ──────────────────────────── 16. HITOS / PROSA ──────────────────────────── */
.prose{max-width:70ch; display:grid; gap:1.15rem}
.prose p{color:var(--muted); font-size:1.02rem}
.prose h3{margin-top:.8rem}

.tl{display:grid; gap:0; border-left:2px solid var(--line); padding-left:0}
.tl li{position:relative; padding:0 0 1.9rem 2rem}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:''; position:absolute; left:-7px; top:.42rem; width:12px; height:12px;
  background:var(--yellow); border:2px solid var(--white); border-radius:50%}
.tl b{display:block; font-family:var(--f-cond); font-size:.86rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--yellow-dk); font-weight:600}
.tl strong{display:block; font-family:var(--f-disp); font-size:1.1rem; margin-top:.15rem}
.tl p{color:var(--muted); font-size:.95rem; margin-top:.3rem}

/* ──────────────────────────── 17. CTA + FORM ──────────────────────────── */
.cta{position:relative; overflow:hidden}
.cta__bg{position:absolute; inset:0; z-index:0}
/* la opacidad va en la imagen, no en el contenedor: si va en el padre arrastra
   también a su propio ::after y el degradado se dibuja a 1/5 de lo escrito */
.cta__bg img{width:100%; height:100%; object-fit:cover; opacity:.22; filter:grayscale(.5) contrast(1.1)}
.cta__bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--ink) 10%, rgba(13,17,23,.72) 60%, rgba(13,17,23,.9))}
.cta__in{position:relative; z-index:1; display:grid; gap:clamp(2.4rem,5vw,4rem)}
@media (min-width:1080px){
  .cta__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:start}
}
.cta--simple{text-align:left}
.cta--simple .cta__in{display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; max-width:60ch}

.contact-list{display:grid; gap:1.6rem; margin-top:2.2rem}
.ci{display:flex; gap:1rem; align-items:flex-start}
.ci__ico{width:42px; height:42px; flex:none; background:var(--yellow); border-radius:var(--r);
  display:grid; place-items:center; color:#0A0A0A}
.ci__ico svg{width:20px; height:20px}
.ci b{display:block; font-family:var(--f-cond); font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--yellow-2); font-weight:600}
.ci p,.ci a{display:block; font-size:1rem; color:var(--on-dark); margin-top:.25rem}
.ci a:hover{color:var(--yellow-2)}
/* variante sobre blanco */

/* ──────────────────────────── 18. NAVEGACIÓN ENTRE PÁGINAS ──────────────────────────── */
.pnext{display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line)}
@media (min-width:760px){ .pnext{grid-template-columns:repeat(2,1fr)} }
.pnext a{background:var(--white); padding:clamp(1.5rem,3vw,2.25rem) var(--gut);
  display:flex; flex-direction:column; gap:.35rem; transition:background .3s}
.pnext a:hover{background:var(--alt)}
.pnext i{font-family:var(--f-cond); font-style:normal; font-size:.79rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2)}
.pnext b{font-family:var(--f-disp); font-weight:800; font-size:clamp(1.15rem,2vw,1.5rem);
  letter-spacing:-.02em; color:var(--ink); display:flex; align-items:center; gap:.6rem}
.pnext b svg{width:1em; height:1em; color:var(--yellow-dk); transition:transform .3s}
.pnext a:hover b svg{transform:translateX(5px)}

/* ──────────────────────────── 19. FOOTER ──────────────────────────── */
.ftr{background:var(--ink-2); color:var(--on-dark); padding-top:clamp(3rem,6vw,4.5rem)}
.ftr__top{display:grid; gap:2.5rem; padding-bottom:3rem}
@media (min-width:880px){ .ftr__top{grid-template-columns:1.4fr 1fr 1fr 1.1fr} }
.ftr .logo__txt b{color:#fff}
.ftr .logo__txt span{color:var(--on-dark-mut)}
.ftr h4{font-family:var(--f-cond); font-weight:600; font-size:.82rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:1.05rem}
.ftr ul{display:grid; gap:.6rem}
.ftr li a,.ftr li span{font-size:.94rem; color:var(--on-dark-mut); transition:color .25s}
.ftr li a:hover{color:#fff}
.ftr__blurb{font-size:.94rem; color:var(--on-dark-mut); max-width:38ch; margin-top:1.15rem}
.ftr__bot{border-top:1px solid #2A333D; padding-block:1.4rem; display:flex; flex-wrap:wrap;
  gap:.8rem 1.5rem; align-items:center; justify-content:space-between;
  font-family:var(--f-cond); font-size:.84rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--on-dark-mut)}

/* ══════════════════════════════════════════════════════════════════════════
   20. BLOQUES DE CONTRASTE (#131B2A) — variantes de cada componente
   Se aplican con .bg-dark en la sección. Rompen el blanco sin cambiar la
   estructura: mismos componentes, superficie y hairlines invertidos.
   ══════════════════════════════════════════════════════════════════════════ */
.bg-dark{background:var(--ink); color:var(--on-dark)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff}
.bg-dark .lead,.bg-dark .muted,.bg-dark .hero__sub{color:var(--on-dark-mut)}
.bg-dark .eyebrow{color:var(--yellow-2)}
.bg-dark .eyebrow::before{background:var(--yellow)}
.bg-dark strong{color:#fff}
.bg-dark em{color:var(--on-dark)}

/* rejillas y tarjetas */
.bg-dark .grid-serv,.bg-dark .grid-3,.bg-dark .pillars,.bg-dark .metrics{
  background:var(--line-dk); border-color:var(--line-dk)}
.bg-dark .card,.bg-dark .pillar,.bg-dark .metric{background:var(--ink-2)}
.bg-dark .card:hover,.bg-dark .pillar:hover{background:#222E42; box-shadow:none}
.bg-dark .card h3,.bg-dark .pillar h3{color:#fff}
.bg-dark .card p,.bg-dark .pillar p{color:var(--on-dark-mut)}
.bg-dark .card__ico{border-color:#4A5768; color:var(--yellow-2)}
.bg-dark .card:hover .card__ico{border-color:var(--yellow); background:var(--yellow); color:#0A0A0A}
.bg-dark .card__n{color:var(--on-dark-mut2)}
.bg-dark .card__more{color:var(--yellow-2)}
.bg-dark .metric > b{color:#fff}
.bg-dark .metric > b > i{color:var(--yellow-2)}
.bg-dark .metric > span,.bg-dark .pillar__note{color:var(--on-dark-mut)}

/* cifras, listas, FAQ, marcos */
.bg-dark .stat{border-right-color:var(--line-dk)}
.bg-dark .stat > b{color:#fff}
.bg-dark .stat > b > i{color:var(--yellow-2)}
.bg-dark .stat > span{color:var(--on-dark-mut)}
.bg-dark .fleet__list{border-top-color:var(--yellow)}
.bg-dark .fleet__list li{border-bottom-color:var(--line-dk)}
.bg-dark .fleet__list li:hover{background:var(--ink-2)}
.bg-dark .fleet__list b{color:#fff}
.bg-dark .fleet__list em{color:var(--on-dark-mut)}
.bg-dark .fleet__list i{color:var(--on-dark-mut2)}
.bg-dark .svc__list li{color:var(--on-dark)}
.bg-dark .faq{border-top-color:var(--yellow)}
.bg-dark .faq details{border-bottom-color:var(--line-dk)}
.bg-dark .faq summary{color:#fff}
.bg-dark .faq summary:hover{color:var(--yellow-2)}
.bg-dark .faq__q{color:var(--on-dark-mut2)}
.bg-dark .faq__a{color:var(--on-dark-mut)}
.bg-dark .frame,.bg-dark .band,.bg-dark .svc__media,.bg-dark .hero__shot{
  background:var(--ink-2); box-shadow:none}
.bg-dark .plate{background:var(--ink-2); border-color:var(--line-dk); box-shadow:none}
.bg-dark .plate b{color:#fff}
.bg-dark .plate > span{color:var(--on-dark-mut)}
.bg-dark .svc{border-top-color:var(--line-dk)}
.bg-dark .svc:first-of-type{border-top-color:var(--yellow)}
.bg-dark .svc__n{color:var(--on-dark-mut2)}
.bg-dark .tl{border-left-color:var(--line-dk)}
.bg-dark .tl li::before{border-color:var(--ink)}
.bg-dark .tl b{color:var(--yellow-2)}
.bg-dark .tl strong{color:#fff}
.bg-dark .tl p{color:var(--on-dark-mut)}
.bg-dark .crumbs{color:var(--on-dark-mut2)}
.bg-dark .crumbs a{color:var(--on-dark-mut)}
.bg-dark .crumbs a:hover{color:#fff}
.bg-dark .crumbs [aria-current]{color:#fff}
.bg-dark .prose p{color:var(--on-dark-mut)}
.bg-dark .blueprint{
  background-image:
    linear-gradient(var(--line-dk) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dk) 1px, transparent 1px)}

/* footer un paso más profundo que los bloques de contraste */
.ftr{background:var(--ink-3)}
.ftr__bot{border-top-color:var(--line-dk)}

/* ──────────────────────────── 21. ESTADO INICIAL DE ANIMACIÓN ──────────────────────────── */
.js .mask>span{transform:translateY(105%)}
.js [data-anim]{opacity:0}
.js [data-clip]{clip-path:inset(0 0 100% 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .mask>span,.js [data-anim]{transform:none!important; opacity:1!important}
  .js [data-clip]{clip-path:none!important}
  .hl::before{transform:scaleX(1)!important}
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ──────────────────────────── 22. AJUSTES FINOS ──────────────────────────── */
.card p a,.faq__a a{border-bottom:2px solid var(--yellow); transition:color .25s}
.card p a:hover,.faq__a a:hover{color:var(--yellow-dk)}
.bg-dark .card p a:hover,.bg-dark .faq__a a:hover{color:var(--yellow-2)}

/* ══════════════════════════════════════════════════════════════════════════
   23. SUB-NAVEGACIÓN DE PÁGINA (anclas dentro de "Sobre nosotros")
   ══════════════════════════════════════════════════════════════════════════ */
.subnav{
  position:sticky; top:64px; z-index:100; background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px) saturate(1.3);
  border-block:1px solid var(--line);
}
.subnav__in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  display:flex; gap:.2rem; overflow-x:auto; scrollbar-width:none;
}
.subnav__in::-webkit-scrollbar{display:none}
/* señal de que quedan ítems fuera de vista (la clase la pone assets/qmt.js) */
.subnav::after{
  content:''; position:absolute; z-index:2; top:0; bottom:0; right:0; width:3.5rem;
  pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.96));
}
.subnav.has-more::after{opacity:1}
.subnav a{
  flex:none; z-index:3; font-family:var(--f-cond); font-weight:600; font-size:.92rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  padding:.95rem .85rem; position:relative; white-space:nowrap; transition:color .22s;
}
.subnav a::after{
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:0; height:3px;
  background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.subnav a:hover{color:var(--ink)}
.subnav a.is-active{color:var(--ink)}
.subnav a:hover::after,.subnav a.is-active::after{transform:scaleX(1)}
@media (max-width:640px){ .subnav a{padding:.85rem .7rem; font-size:.86rem} }

/* línea de tiempo en fila (etapas de ingeniería) */
@media (min-width:820px){
  .tl--row{
    grid-template-columns:repeat(4,1fr); border-left:0;
    border-top:2px solid var(--line); gap:0;
  }
  .tl--row li{padding:1.9rem 1.5rem 0 0}
  .tl--row li:last-child{padding-bottom:0}
  .tl--row li::before{left:0; top:-7px}
}
.bg-dark .tl--row{border-top-color:var(--line-dk)}

/* checks en rejilla (compromisos HSE) */
.checks--grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1rem; margin-top:clamp(2rem,4vw,3rem);
}

/* ══════════════════════════════════════════════════════════════════════════
   24. TARJETAS DE ACCIÓN (contacto: llamar / escribir / WhatsApp)
   ══════════════════════════════════════════════════════════════════════════ */
.card--action{cursor:pointer}
.card__big{
  font-family:var(--f-disp); font-weight:800; font-size:clamp(1.15rem,2vw,1.4rem);
  letter-spacing:-.02em; color:var(--ink); margin-top:.15rem;
}
.card--action:hover .card__big{color:var(--yellow-dk)}
.bg-dark .card__big{color:#fff}

/* espacio reservado para el mapa */
.mapslot{
  aspect-ratio:21/8; display:grid; place-items:center;
  border:1px dashed var(--line-2); background:var(--alt);
}
.mapslot p{text-align:center; padding:2rem; max-width:46ch; color:var(--muted); font-size:.95rem}
@media (max-width:700px){ .mapslot{aspect-ratio:4/3} }

/* ══════════════════════════════════════════════════════════════════════════
   25. GALERÍA
   ══════════════════════════════════════════════════════════════════════════ */
.gal{display:grid; gap:clamp(1.25rem,2.2vw,2rem); grid-template-columns:1fr; align-items:start}
@media (min-width:620px){ .gal{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .gal{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .gal--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.gal__item,.gal__item--wide,.gal__item--tall{
  grid-column:auto; grid-row:auto; min-width:0; margin:0;
  display:flex; flex-direction:column; background:var(--white)
}
.bg-dark .gal__item,.bg-alt .gal__item{background:transparent}

.gal__btn{
  display:block; width:100%; padding:0; border:0; background:var(--alt);
  position:relative; overflow:hidden; aspect-ratio:4/3; cursor:zoom-in;
  border-radius:var(--r);
}
.gal__item--tall .gal__btn{aspect-ratio:4/3}
.gal__btn img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) contrast(1.04);
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.gal__btn::after{
  content:''; position:absolute; inset:0; background:var(--yellow);
  opacity:0; transition:opacity .35s; mix-blend-mode:multiply;
}
.gal__btn:hover img{transform:scale(1.05)}
.gal__btn:hover::after{opacity:.14}
/* lupa */
.gal__btn::before{
  content:''; position:absolute; z-index:2; right:.7rem; bottom:.7rem;
  width:34px; height:34px; border-radius:var(--r); background:var(--yellow);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:19px;
}
.gal__btn:hover::before,.gal__btn:focus-visible::before{opacity:1; transform:translateY(0)}

.gal figcaption{min-height:4.25rem; padding:.85rem .1rem 0; display:flex; flex-direction:column; gap:.15rem}
.gal figcaption b{font-family:var(--f-disp); font-weight:700; font-size:.98rem;
  letter-spacing:-.01em; color:var(--ink)}
.gal figcaption span{font-family:var(--f-cond); font-size:.84rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted)}
.bg-dark .gal figcaption b{color:#fff}
.bg-dark .gal figcaption span{color:var(--on-dark-mut)}

/* ══════════════════════════════════════════════════════════════════════════
   26. LIGHTBOX
   ══════════════════════════════════════════════════════════════════════════ */
.lb{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(9,13,20,.94); padding:clamp(1rem,4vw,3rem);
  opacity:0; backdrop-filter:blur(6px);
}
.lb.is-open{opacity:1}
.lb__fig{margin:0; display:flex; flex-direction:column; gap:1rem; align-items:center;
  max-width:100%; max-height:100%}
.lb__fig img{
  max-width:min(100%, 1400px); max-height:78vh; width:auto; height:auto;
  object-fit:contain; box-shadow:0 30px 90px -30px rgba(0,0,0,.8);
}
.lb__fig figcaption{
  font-family:var(--f-cond); font-size:.95rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-dark-mut); text-align:center;
}
.lb__close,.lb__nav{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:48px; height:48px; border:1.5px solid var(--border-dk); border-radius:var(--r);
  background:rgba(19,27,42,.85); color:var(--on-dark);
  transition:background .25s, border-color .25s, color .25s, transform .25s;
}
.lb__close svg,.lb__nav svg{width:22px; height:22px}
.lb__close:hover,.lb__nav:hover{background:var(--yellow); border-color:var(--yellow); color:#0A0A0A}
.lb__close{top:clamp(.75rem,2vw,1.5rem); right:clamp(.75rem,2vw,1.5rem)}
.lb__nav{top:50%; margin-top:-24px}
.lb__nav--prev{left:clamp(.5rem,2vw,1.5rem)}
.lb__nav--next{right:clamp(.5rem,2vw,1.5rem)}
.lb__nav:hover{transform:scale(1.06)}
@media (max-width:620px){
  .lb__nav{top:auto; bottom:clamp(.75rem,3vw,1.5rem); margin-top:0}
  .lb__fig img{max-height:66vh}
}
body.lb-open{overflow:hidden}

/* contenedor derecho del header (CTA + hamburguesa) */
.hdr__end{display:flex; gap:.6rem; align-items:center}

/* ══════════════════════════════════════════════════════════════════════════
   27. MÁS PRESENCIA DEL AZUL
   El sitio abría en blanco en todas las páginas (header + hero + banda).
   Ahora el header es azul permanente y los heroes interiores son un masthead
   azul, de modo que cada página entra con peso y el blanco queda como base
   de lectura, no como impresión general.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── header azul permanente ── */
.hdr{
  background:rgba(19,27,42,.93); border-bottom-color:var(--line-dk);
}
.hdr.is-stuck{box-shadow:0 2px 24px -8px rgba(0,0,0,.55)}
.hdr .logo__txt b{color:#fff}
.hdr .logo__txt span{color:var(--on-dark-mut)}
@media (min-width:1100px){
  .nav a{color:var(--on-dark-mut)}
  .nav a:hover{color:#fff}
  .nav a[aria-current="page"]{color:#fff}
}
.burger{border-color:var(--border-dk); color:var(--on-dark)}
.burger:hover{border-color:var(--yellow); color:var(--yellow-2)}

/* ── menú móvil azul ── */
.mob{background:var(--ink)}
.mob a{color:#fff; border-bottom-color:var(--line-dk)}
.mob a i{color:var(--yellow-2)}
.mob a[aria-current="page"]{color:var(--yellow-2)}

/* ── titular destacado sobre azul ──
   El bloque amarillo detrás del texto solo funciona con texto oscuro. Sobre
   azul se cambia por texto amarillo, que da 12,5:1 de contraste. */
.bg-dark .hl{color:var(--yellow)}
.bg-dark .hl::before{display:none}

/* ── masthead: hero interior azul ── */
.phero.bg-dark{padding-bottom:clamp(3rem,6vw,4.5rem)}
.phero.bg-dark + .wrap > .band{margin-top:0}

/* ── cifras del hero sobre azul ── */
.stats.bg-dark{border-color:var(--line-dk)}

/* ── sub-navegación sobre azul ── */
.subnav.bg-dark{
  background:rgba(19,27,42,.95); border-color:var(--line-dk);
}
.subnav.bg-dark a{color:var(--on-dark-mut)}
.subnav.bg-dark a:hover,.subnav.bg-dark a.is-active{color:#fff}
.subnav.bg-dark::after{
  background:linear-gradient(to right, rgba(19,27,42,0), rgba(19,27,42,.97));
}

/* ── franja «siguiente» sobre azul ── */
.pnext.bg-dark{background:var(--line-dk); border-color:var(--line-dk)}
.pnext.bg-dark a{background:var(--ink-2)}
.pnext.bg-dark a:hover{background:#222E42}
.pnext.bg-dark b{color:#fff}
.pnext.bg-dark b svg{color:var(--yellow-2)}
.pnext.bg-dark i{color:var(--on-dark-mut)}

/* ── espacio del mapa sobre azul ── */
.bg-dark .mapslot{background:var(--ink-2); border-color:var(--line-dk)}
.bg-dark .mapslot p{color:var(--on-dark-mut)}
.bg-dark .mapslot strong{color:#fff}

/* ── tarjetas de acción sobre azul ── */
.bg-dark .card--action:hover .card__big{color:var(--yellow-2)}

/* ══════════════════════════════════════════════════════════════════════════
   28. CONTRAPARTE CLARA (.bg-alt)
   Toda la hoja tenía juego oscuro (--line-dk) pero nada para la banda gris:
   los hairlines --line quedaban en 1,11:1 sobre ella, es decir el ritmo
   estructural de la página desaparecía justo donde más se apoya.
   ══════════════════════════════════════════════════════════════════════════ */
.bg-alt .grid-serv,.bg-alt .grid-3,.bg-alt .pillars,.bg-alt .metrics{
  background:var(--line-alt); border-color:var(--line-alt)}
.bg-alt .svc{border-top-color:var(--line-alt)}
.bg-alt .chip{border-color:var(--line-alt)}
.bg-alt .fleet__list li{border-bottom-color:var(--line-alt)}
.bg-alt .faq details{border-bottom-color:var(--line-alt)}
.bg-alt .tl{border-left-color:var(--line-alt)}
.bg-alt .tl--row{border-top-color:var(--line-alt)}
.bg-alt .tl li::before{border-color:var(--alt)}
.bg-alt .blueprint{
  background-image:
    linear-gradient(var(--line-alt) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-alt) 1px, transparent 1px)}
.bg-alt .plate{border-color:var(--line-alt)}
.bg-alt .btn--ghost{border-color:var(--line-alt)}
.bg-alt .btn--ghost:hover{border-color:var(--ink)}

/* Superficies que quedaban del mismo color que su sección y por lo tanto
   desaparecían (el hueco reservado se leía como texto suelto). */
.bg-alt .band,.bg-alt .svc__media,.bg-alt .mapslot,.bg-alt .gal__btn,
.bg-alt .frame,.bg-alt .hero__shot{background:var(--alt-2)}
.bg-alt .mapslot{border-color:var(--line-alt)}
.bg-dark .gal__btn{background:var(--ink-2)}

/* ══════════════════════════════════════════════════════════════════════════
   29. LÍMITES ENTRE BLOQUES OSCUROS CONTIGUOS
   Dos secciones .bg-dark seguidas sumaban ~15rem de azul continuo sin ningún
   corte legible; lo mismo en la pila sección → .pnext → footer.
   ══════════════════════════════════════════════════════════════════════════ */
.bg-dark + .bg-dark{border-top:1px solid var(--line-dk)}
.ftr{border-top:1px solid var(--line-dk)}

/* el hairline claro de las cifras en móvil quedaba sobre el azul nuevo */
@media (max-width:879px){
  .bg-dark .stat:nth-child(-n+2){border-bottom-color:var(--line-dk)}
}