/* ============================================================
   SOLINE — DESIGN SYSTEM
   Brutalismo técnico + industrial premium
   ============================================================ */
:root{
  --navy-ink:#05101F;
  --navy:#0A1628;
  --navy-2:#0F1D34;
  --navy-steel:#142B47;
  --red:#D10F20;
  --red-ember:#A60B18;
  --red-glow:rgba(209,15,32,.35);
  --graphite:#1A1D22;
  --steel:#8491A3;
  --steel-2:#A9B3C1;
  --fog:#D9DEE4;
  --smoke:#F3F5F8;
  --paper:#FFFFFF;
  --line:rgba(10,22,40,.08);
  --line-2:rgba(10,22,40,.16);
  --line-dark:rgba(255,255,255,.08);
  --line-dark-2:rgba(255,255,255,.16);

  --f-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --container:100%;
  --gutter:clamp(28px,4vw,80px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--graphite);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;   /* clip (no hidden) → no crea contenedor de scroll, no rompe el nav sticky */
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:transparent}

/* ——— TYPOGRAPHY ——— */
.label{
  font-family:var(--f-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
}
.label--red{ color:var(--red) }
.label--light{ color:var(--steel-2) }
.label--accent::before{
  content:""; display:inline-block; width:24px; height:1px;
  background:currentColor; margin-right:12px; transform:translateY(-3px);
}
.h-display{
  font-family:var(--f-display);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.02;
  margin:0;
}
.h1{ font-size:clamp(40px,6.2vw,88px); font-weight:500 }
.h2{ font-size:clamp(32px,4.6vw,64px); font-weight:500 }
.h3{ font-size:clamp(24px,2.6vw,36px); font-weight:500 }
.h4{ font-size:clamp(18px,1.5vw,22px); font-weight:600; line-height:1.3 }
.lead{
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.6;
  color:var(--steel);
  font-weight:400;
  max-width:60ch;
}
.body-lg{ font-size:17px; line-height:1.65 }

/* ——— LAYOUT ——— */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(80px,10vw,140px); position:relative }
.section--dark{ background:var(--navy); color:#fff }
.section--dark .label{ color:var(--steel-2) }
.section--dark .lead{ color:#B6C0CE }
.section--ink{ background:var(--navy-ink); color:#fff }
.section--smoke{ background:var(--smoke) }

/* ——— GRID HELPERS ——— */
.g-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:32px }

/* ——— BUTTONS ——— */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-body); font-weight:500; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:18px 28px;
  border:1px solid transparent;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease);
  position:relative;
  cursor:pointer;
}
.btn svg{ width:14px; height:14px; transition:transform .3s var(--ease) }
.btn:hover svg{ transform:translateX(4px) }
.btn--primary{
  background:var(--red); color:#fff;
  box-shadow:0 0 0 0 var(--red-glow);
}
.btn--primary:hover{
  background:var(--red-ember);
  box-shadow:0 0 0 6px var(--red-glow);
}
.btn--ghost-light{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.3);
}
.btn--ghost-light:hover{
  border-color:#fff; background:rgba(255,255,255,.06);
}
.btn--ghost-dark{
  background:transparent; color:var(--navy); border-color:rgba(10,22,40,.2);
}
.btn--ghost-dark:hover{
  border-color:var(--navy); background:rgba(10,22,40,.04);
}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.utility{
  background:var(--navy-ink); color:var(--steel-2);
  font-size:12px; letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.utility__inner{
  display:flex; justify-content:space-between; align-items:center;
  height:36px;
}
.utility__left{ display:flex; gap:24px; align-items:center }
.utility__left b{ color:#fff; font-weight:500 }
.utility__right{ display:flex; gap:20px; align-items:center }
.utility__right span{ display:inline-flex; align-items:center; gap:6px }
.utility__dot{
  width:6px; height:6px; border-radius:50%; background:var(--red);
  box-shadow:0 0 8px var(--red-glow);
}
@media (max-width:780px){
  .utility__left b+span, .utility__right span:not(:first-child){ display:none }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-display); font-weight:700; font-size:22px;
  letter-spacing:.02em; color:var(--navy);
}
.logo__mark{
  width:26px; height:26px; position:relative; display:inline-block;
}
.logo__mark::before,
.logo__mark::after{
  content:""; position:absolute; left:0; right:0; height:3px; background:var(--navy);
}
.logo__mark::before{ top:5px }
.logo__mark::after{ bottom:5px; background:var(--red) }
.logo__mark span{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:3px; background:var(--navy);
}
.logo__reg{ font-size:10px; vertical-align:super; color:var(--red); margin-left:2px; font-weight:500 }
.nav__menu{ display:flex; gap:2px; list-style:none; margin:0; padding:0 }
.nav__menu a{
  display:inline-block; padding:10px 16px;
  font-size:14px; font-weight:500; color:var(--navy);
  letter-spacing:.01em;
  position:relative;
  transition:color .2s var(--ease);
}
.nav__menu a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px;
  height:1px; background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__menu a:hover::after,
.nav__menu a.is-active::after{ transform:scaleX(1) }
.nav__cta{ display:flex; gap:10px; align-items:center }
.nav__mobile{ display:none }
@media (max-width:980px){
  .nav__menu{ display:none }
  .nav__cta .btn{ padding:14px 18px; font-size:12px }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy-ink); color:#fff;
  min-height:100svh;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-block:clamp(40px,5vh,72px) clamp(40px,6vh,72px);
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
}
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.8) brightness(.48) contrast(1.15);
  transform:scale(1.05);
  will-change:transform;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,16,31,.5) 0%, rgba(5,16,31,.8) 60%, rgba(5,16,31,.95) 100%),
    radial-gradient(1200px 600px at 25% 40%, rgba(209,15,32,.14), transparent 60%);
}
.hero__grid-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.hero__inner{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  flex:1; width:100%;
}
.hero__meta{
  display:flex; gap:28px; align-items:center; justify-content:center; flex-wrap:wrap;
  margin-bottom:32px;
  font-family:var(--f-mono); font-size:11px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel-2);
}
.hero__meta span{ display:inline-flex; align-items:center; gap:8px }
.hero__meta .sep{ width:1px; height:16px; background:var(--line-dark-2); margin:0 4px }
/* Móvil: forzar los 3 ítems en UNA sola línea (reducir tamaño, spacing y gaps) */
@media (max-width:560px){
  .hero__meta{ gap:8px; font-size:8px; letter-spacing:.06em; flex-wrap:nowrap; white-space:nowrap; }
  .hero__meta span{ gap:5px }
  .hero__meta .sep{ height:11px; margin:0 1px }
}
@media (max-width:360px){
  .hero__meta{ gap:6px; font-size:7.2px; letter-spacing:.03em; }
}
.hero__title{
  max-width:28ch;
  font-size:clamp(42px,5.7vw,86px);
  font-weight:500; letter-spacing:-.024em; line-height:1.04;
  margin:0 auto 28px;
}
.hero__title em{
  font-style:normal;
  background:linear-gradient(180deg, #fff 60%, #ADBCC9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title .accent{ color:var(--red) }
.hero__sub{
  max-width:62ch;
  font-size:clamp(16px,1.2vw,19px); line-height:1.6; color:#BCC6D2;
  margin:0 auto 36px;
}
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center }
.hero__scroll-hint{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:auto;
  padding-top:clamp(32px,4vh,56px);
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel-2);
  animation:fadePulse 2.6s ease-in-out infinite;
}
.hero__scroll-hint .line{
  width:48px; height:1px; background:currentColor; opacity:.5;
}
.hero__scroll-hint svg{ width:14px; height:14px; animation:bob 2.2s ease-in-out infinite }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
@keyframes fadePulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

/* HERO-STATS — separate section revealed on scroll */
.hero-stats{
  background:var(--navy-ink); color:#fff;
  position:relative;
  padding:72px 0 100px;
  border-top:1px solid rgba(255,255,255,.08);
}
.hero-stats__label{
  display:flex; align-items:center; gap:16px;
  margin-bottom:44px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel-2);
}
.hero-stats__label .line{
  flex:1; height:1px; background:rgba(255,255,255,.14);
}
.hero__tickers{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:28px;
}
.hero__ticker .n{
  font-family:var(--f-display); font-size:clamp(28px,3vw,40px); font-weight:500;
  letter-spacing:-.02em; color:#fff;
}
.hero__ticker .l{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel-2); margin-top:6px;
}
.hero__flow{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--red) 50%, transparent 100%);
  z-index:3; opacity:.8;
}
.hero__flow::after{
  content:""; position:absolute; top:-1px; left:0; width:140px; height:3px;
  background:var(--red); box-shadow:0 0 18px var(--red-glow);
  animation:flow 6s linear infinite;
}
@keyframes flow{
  0%{ transform:translateX(-140px) }
  100%{ transform:translateX(calc(100vw + 140px)) }
}
@media (max-width:780px){
  .hero__tickers{ grid-template-columns:repeat(2,1fr); gap:22px }
}

/* ============================================================
   S2 — Qué hace Soline
   ============================================================ */
.qh{ background:var(--paper) }
.qh__head{
  display:grid; grid-template-columns:1fr 1.4fr; gap:60px;
  margin-bottom:72px; align-items:end;
}
.qh__head .h2{ max-width:14ch }
.qh__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.pillar{
  position:relative; padding:44px 36px 40px;
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.pillar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(209,15,32,.04) 100%);
  opacity:0; transition:opacity .4s var(--ease);
}
.pillar::after{
  content:""; position:absolute; left:0; top:0; width:3px; height:0; background:var(--red);
  transition:height .5s var(--ease);
}
.pillar:hover{
  transform:translateY(-6px);
  border-color:var(--line-2);
  box-shadow:0 30px 50px -30px rgba(10,22,40,.18);
}
.pillar:hover::before{ opacity:1 }
.pillar:hover::after{ height:100% }
.pillar__num{
  font-family:var(--f-mono); font-size:12px; color:var(--steel);
  margin-bottom:28px; letter-spacing:.1em;
}
.pillar__icon{
  width:48px; height:48px; margin-bottom:28px;
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
}
.pillar__icon svg{ width:100%; height:100% }
.pillar h3{
  font-family:var(--f-display); font-size:26px; font-weight:500; letter-spacing:-.01em;
  margin:0 0 14px; color:var(--navy);
}
.pillar p{
  font-size:15px; line-height:1.65; color:#5B6472; margin:0 0 10px;
}
.pillar small{ font-size:13px; color:var(--steel); display:block; margin-top:18px; }
@media (max-width:900px){
  .qh__head{ grid-template-columns:1fr; gap:24px }
  .qh__grid{ grid-template-columns:1fr }
}

/* ============================================================
   S3 — Lo que está en juego (dark editorial)
   ============================================================ */
.risk{ background:var(--navy) }
.risk__head{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:end; margin-bottom:72px;
}
.risk__head .h2{ max-width:18ch; color:#fff }
.risk__head p{ color:#B6C0CE; max-width:48ch }
.risk__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line-dark-2);
  border-left:1px solid var(--line-dark-2);
}
.risk__card{
  padding:40px 32px 44px;
  border-right:1px solid var(--line-dark-2);
  border-bottom:1px solid var(--line-dark-2);
  position:relative;
  transition:background .3s var(--ease);
}
.risk__card:hover{
  background:rgba(209,15,32,.05);
}
.risk__card .n{
  font-family:var(--f-mono); font-size:12px; color:var(--red);
  letter-spacing:.1em; margin-bottom:28px;
}
.risk__card h4{
  font-family:var(--f-display); font-size:22px; font-weight:500; letter-spacing:-.01em;
  color:#fff; margin:0 0 14px; line-height:1.3;
}
.risk__card p{
  font-size:14px; line-height:1.6; color:#B6C0CE; margin:0;
}
@media (max-width:900px){
  .risk__head{ grid-template-columns:1fr; gap:16px }
  .risk__grid{ grid-template-columns:1fr }
}

/* ============================================================
   S4 — Cobertura del sistema (flow diagram)
   ============================================================ */
.flow{ background:var(--smoke) }
.flow__head{
  text-align:center; max-width:760px; margin:0 auto 80px;
}
.flow__diagram{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  padding:72px 40px;
}
.flow__line{
  position:absolute; left:40px; right:40px; top:50%;
  height:2px; background:var(--line-2);
  transform:translateY(-50%);
}
.flow__line-fill{
  position:absolute; left:40px; top:50%; width:0; height:2px;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-ember) 100%);
  box-shadow:0 0 12px var(--red-glow);
  transform:translateY(-50%);
  transition:width 1.6s var(--ease-in-out);
}
.flow__line-fill.is-active{ width:calc(100% - 80px) }
.flow__stations{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:8px; position:relative;
}
.station{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; position:relative;
}
.station__dot{
  width:44px; height:44px; border-radius:50%;
  background:var(--paper);
  border:2px solid var(--fog);
  display:flex; align-items:center; justify-content:center;
  color:var(--steel);
  position:relative; z-index:2;
  transition:border-color .4s var(--ease), color .4s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
}
.station__dot svg{ width:20px; height:20px }
.station.is-lit .station__dot{
  border-color:var(--red); color:var(--red);
  box-shadow:0 0 0 6px rgba(209,15,32,.12);
}
.station:hover .station__dot{
  transform:scale(1.08);
  border-color:var(--navy); color:var(--navy);
}
.station__label{
  font-size:12px; font-weight:500; color:var(--navy);
  line-height:1.3; max-width:14ch;
}
.station__num{
  font-family:var(--f-mono); font-size:10px; color:var(--steel);
  letter-spacing:.1em;
}
.flow__legend{
  margin-top:48px; display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--steel); letter-spacing:.06em;
  padding-top:24px; border-top:1px solid var(--line);
}
.flow__legend b{ color:var(--navy); font-weight:500 }
@media (max-width:900px){
  .flow__stations{ grid-template-columns:repeat(2,1fr); gap:32px 8px }
  .flow__line, .flow__line-fill{ display:none }
}

/* ============================================================
   S5 — Capacidades (big counters on dark bg)
   ============================================================ */
.stats{
  position:relative; background:var(--navy-ink); color:#fff; overflow:hidden;
}
.stats__bg{
  position:absolute; inset:0; z-index:0;
}
.stats__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.3) contrast(1.1) blur(2px);
}
.stats__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,16,31,.92) 0%, rgba(5,16,31,.85) 100%);
}
.stats__inner{ position:relative; z-index:1 }
.stats__head{
  max-width:700px; margin:0 auto 72px; text-align:center;
}
.stats__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line-dark-2);
  border:1px solid var(--line-dark-2);
}
.stat{
  background:var(--navy-ink);
  padding:56px 40px 48px;
  text-align:center;
}
.stat__n{
  display:flex; align-items:flex-start; justify-content:center;
  font-family:var(--f-display); font-size:clamp(64px,9vw,128px); font-weight:500;
  letter-spacing:-.04em; line-height:1; color:#fff;
  margin-bottom:16px;
}
.stat__n .plus{
  font-size:.45em; margin-top:.2em; color:var(--red); margin-left:.08em;
}
.stat__t{
  font-size:14px; font-weight:500; color:var(--steel-2);
  letter-spacing:.04em; max-width:24ch; margin:0 auto;
}
@media (max-width:780px){
  .stats__grid{ grid-template-columns:1fr }
}

/* ============================================================
   S6 — Respaldo normativo
   ============================================================ */
.cred{ background:var(--paper) }
.cred__head{
  display:grid; grid-template-columns:1.3fr 1fr; gap:60px;
  align-items:end; margin-bottom:72px;
}
.cred__head .h2{ max-width:18ch }
.cred__grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.cred__item{
  padding:40px 28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
  transition:background .3s var(--ease);
  cursor:default;
}
.cred__item:hover{ background:var(--smoke) }
.cred__item .seal{
  width:132px; height:88px; border-radius:6px;
  border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 24px;
  font-family:var(--f-display); font-size:16px; font-weight:600; color:var(--navy);
  background:var(--paper);
  transition:border-color .4s var(--ease), color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
  padding:14px 18px;
}
.cred__item .seal--img{ padding:10px 14px }
.cred__item .seal--img img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
  transition:transform .4s var(--ease), filter .4s var(--ease);
  filter:saturate(.95);
}
.cred__item:hover .seal{
  border-color:var(--red);
  transform:translateY(-2px);
  box-shadow:0 14px 32px -14px rgba(10,22,40,.22), 0 0 0 1px var(--red);
}
.cred__item:hover .seal--img img{
  transform:scale(1.04);
  filter:saturate(1.15);
}
.cred__item h5{
  font-family:var(--f-display); font-size:15px; font-weight:600; margin:0 0 8px;
  color:var(--navy); letter-spacing:-.005em;
}
.cred__item p{
  font-size:12px; color:var(--steel); margin:0; line-height:1.5;
}
@media (max-width:900px){
  .cred__head{ grid-template-columns:1fr; gap:20px }
  .cred__grid{ grid-template-columns:repeat(2,1fr) }
}

/* ============================================================
   S7 — Metodología
   ============================================================ */
.method{ background:var(--smoke); overflow:hidden }
.method__head{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end;
  margin-bottom:80px;
}
.method__head .h2{ max-width:16ch }
.method__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative;
}
.method__grid::before{
  content:""; position:absolute; left:0; right:0; top:38px;
  height:1px; background:var(--line-2); z-index:0;
}
.step{
  position:relative; z-index:1;
  padding-right:32px;
}
.step__num{
  width:76px; height:76px; border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line-2);
  font-family:var(--f-display); font-size:26px; font-weight:500; color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px;
  position:relative; transition:all .4s var(--ease);
}
.step__num::before{
  content:""; position:absolute; inset:-6px; border:1px solid transparent;
  border-radius:50%; transition:border-color .4s var(--ease);
}
.step:hover .step__num{
  color:var(--red); border-color:var(--red);
}
.step:hover .step__num::before{
  border-color:rgba(209,15,32,.3);
}
.step h4{
  font-family:var(--f-display); font-size:20px; font-weight:500;
  margin:0 0 12px; color:var(--navy); letter-spacing:-.005em;
}
.step p{
  font-size:14px; line-height:1.6; color:#5B6472; margin:0;
}
.step__label{
  font-family:var(--f-mono); font-size:11px; color:var(--red);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:12px;
}
@media (max-width:900px){
  .method__head{ grid-template-columns:1fr; gap:18px }
  .method__grid{ grid-template-columns:1fr; gap:32px }
  .method__grid::before{ display:none }
}

/* ============================================================
   CTA FINAL (dramatic dark with photo)
   ============================================================ */
.cta{
  position:relative; color:#fff; overflow:hidden;
  padding-block:clamp(100px,12vw,160px);
}
.cta__bg{
  position:absolute; inset:0; z-index:0;
}
.cta__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.9) brightness(.32) contrast(1.2);
}
.cta__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,16,31,.7), rgba(5,16,31,.9)),
    radial-gradient(800px 500px at 80% 50%, rgba(209,15,32,.2), transparent 60%);
}
.cta__inner{ position:relative; z-index:1 }
.cta__grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:end;
}
.cta h2{
  font-family:var(--f-display); font-size:clamp(36px,5vw,72px); font-weight:500;
  letter-spacing:-.02em; line-height:1.05; margin:0 0 28px; max-width:16ch;
}
.cta p{ color:#B6C0CE; font-size:17px; line-height:1.65; max-width:48ch; margin:0 0 40px }
.cta__meta{
  padding-top:32px; border-top:1px solid var(--line-dark-2);
  display:flex; flex-direction:column; gap:20px;
}
.cta__meta > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  font-size:13px; color:var(--steel-2); letter-spacing:.04em;
}
.cta__meta b{ color:#fff; font-weight:500; font-size:15px }
.cta__ctas{ display:flex; gap:14px; flex-wrap:wrap }
@media (max-width:900px){
  .cta__grid{ grid-template-columns:1fr; gap:48px }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--graphite); color:#B6BAC0; padding-block:80px 40px }
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:60px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer__brand .logo{ color:#fff }
.footer__brand .logo__mark::before{ background:#fff }
.footer__brand .logo__mark span{ background:#fff }
.footer__brand p{ margin:20px 0 0; font-size:14px; line-height:1.6; max-width:36ch; color:#8E9299 }
.footer h6{
  font-family:var(--f-body); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 24px;
}
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px; font-size:14px }
.footer ul a{ color:#B6BAC0; transition:color .2s var(--ease) }
.footer ul a:hover{ color:#fff }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:32px; font-size:12px; color:#8E9299; flex-wrap:wrap; gap:16px;
}
.footer__bottom span{ display:inline-flex; align-items:center; gap:8px }
.footer__bottom .dot{ width:4px; height:4px; background:#8E9299; border-radius:50% }
@media (max-width:900px){
  .footer__top{ grid-template-columns:1fr 1fr; gap:40px }
}
@media (max-width:560px){
  .footer__top{ grid-template-columns:1fr }
}

/* ============================================================
   FLOATING WHATSAPP / UTILITY
   ============================================================ */
.floater{
  position:fixed; right:22px; bottom:22px; z-index:80;
  display:flex; flex-direction:column; gap:10px;
}
.floater a{
  width:52px; height:52px; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 24px -6px var(--red-glow), 0 4px 12px -2px rgba(0,0,0,.15);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.floater a:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 16px 36px -6px var(--red-glow), 0 6px 14px -2px rgba(0,0,0,.2) }
.floater a svg{ width:22px; height:22px }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease-in-out), transform .9s var(--ease-in-out) }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal-delay="1"]{ transition-delay:.08s }
[data-reveal-delay="2"]{ transition-delay:.16s }
[data-reveal-delay="3"]{ transition-delay:.24s }
[data-reveal-delay="4"]{ transition-delay:.32s }
[data-reveal-delay="5"]{ transition-delay:.40s }
[data-reveal-delay="6"]{ transition-delay:.48s }
[data-reveal-delay="7"]{ transition-delay:.56s }
[data-reveal-delay="8"]{ transition-delay:.64s }

/* ============================================================
   ENHANCED MULTIMEDIA LAYER
   - Ken Burns cinematic loop in hero
   - Photo strips on pillars (S2)
   - Background imagery on risk cards (S3)
   - Industrial blur behind flow diagram (S4)
   - Technical bg on methodology (S7)
   - Micro pulse on CTA (S8)
   - Scroll progress indicator (top)
   ============================================================ */

/* HERO — cinematic Ken Burns loop (independent from parallax) */
.hero__bg-inner{
  position:absolute; inset:0; will-change:transform;
}
.hero__bg .hero__bg-inner img{
  animation:kenburns 22s ease-in-out infinite alternate;
  will-change:transform;
  transform-origin:55% 45%;
}
@keyframes kenburns{
  0%   { transform:scale(1.05) translate(0, 0); }
  100% { transform:scale(1.14) translate(-2%, -1.5%); }
}

/* SCROLL PROGRESS BAR — thin red bar at the very top */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:transparent; z-index:200; pointer-events:none;
}
.progress__fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-ember) 100%);
  box-shadow:0 0 8px var(--red-glow);
  transition:width .08s linear;
}

/* S2 — pillar photos (override padding, add photo+body structure) */
.pillar{ padding:0 }
.pillar__photo{
  position:relative; height:200px; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.pillar__photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.85) contrast(1.1) brightness(.92);
  transform:scale(1.05);
  transition:filter .7s var(--ease), transform .9s var(--ease);
}
.pillar__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,22,40,.15) 0%, rgba(10,22,40,.5) 100%);
  transition:background .6s var(--ease);
}
.pillar__photo::before{
  content:""; position:absolute; left:-1px; top:-1px; width:28px; height:28px;
  border-top:2px solid var(--red); border-left:2px solid var(--red);
  opacity:0; transition:opacity .4s var(--ease); z-index:2;
}
.pillar:hover .pillar__photo img{
  filter:grayscale(.25) contrast(1.05) brightness(1);
  transform:scale(1);
}
.pillar:hover .pillar__photo::after{
  background:linear-gradient(180deg, rgba(10,22,40,.05) 0%, rgba(209,15,32,.18) 100%);
}
.pillar:hover .pillar__photo::before{ opacity:1 }
.pillar__body{ padding:40px 36px 44px; position:relative }
.pillar__body .pillar__num{ margin-bottom:20px }
.pillar__body .pillar__icon{ margin-bottom:24px }

/* S3 — risk cards with image variant */
.risk__card--image{ overflow:hidden; min-height:240px }
.risk__card-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.risk__card-bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.55);
  transform:scale(1.04);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.risk__card-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,22,40,.55) 0%, rgba(5,16,31,.88) 100%);
  transition:background .6s var(--ease);
}
.risk__card--image > *:not(.risk__card-bg){ position:relative; z-index:1 }
.risk__card--image:hover .risk__card-bg img{
  transform:scale(1.08);
  filter:grayscale(.7) contrast(1.1) brightness(.6);
}
.risk__card--image:hover .risk__card-bg::after{
  background:linear-gradient(180deg, rgba(10,22,40,.45) 0%, rgba(166,11,24,.78) 100%);
}
.risk__card--image h4{ color:#fff }
.risk__card--image .n{ color:#fff; opacity:.85 }

/* S4 — industrial blur behind flow diagram */
.flow{ position:relative }
.flow::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url('assets/images/interconexion.jpg') center/cover no-repeat;
  filter:grayscale(1) blur(28px) brightness(.95);
  opacity:.18;
  transform:scale(1.1);
}
.flow::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, var(--smoke) 0%, rgba(243,245,248,.7) 50%, var(--smoke) 100%);
}
.flow > .container{ position:relative; z-index:1 }

/* S7 — technical bg on methodology */
.method{ position:relative }
.method::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url('assets/images/method-bg.jpg') center/cover no-repeat;
  filter:grayscale(1) blur(32px) brightness(1.05);
  opacity:.14;
}
.method::after{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(10,22,40,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,22,40,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.method > .container{ position:relative; z-index:1 }
.method .step__num{ background:var(--paper); backdrop-filter:blur(4px) }

/* S8 — CTA micro pulse on primary button */
.cta .cta__ctas .btn--primary{
  animation:pulse-red 2.8s ease-in-out infinite;
}
.cta .cta__ctas .btn--primary:hover{ animation:none }
@keyframes pulse-red{
  0%,100% { box-shadow:0 0 0 0 var(--red-glow) }
  60%     { box-shadow:0 0 0 14px rgba(209,15,32,0) }
}

/* Accreditations — mini evidence strip (S6) */
.cred__head{ margin-bottom:56px }
.cred__visual{
  position:relative; height:120px; margin-bottom:56px;
  overflow:hidden; border:1px solid var(--line);
}
.cred__visual img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(.9);
  transform:scale(1.02);
  transition:transform 1.5s var(--ease);
}
.cred__visual:hover img{ transform:scale(1.06) }
.cred__visual::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,22,40,.85) 0%, rgba(10,22,40,.35) 40%, rgba(10,22,40,.35) 60%, rgba(10,22,40,.85) 100%),
    linear-gradient(180deg, transparent 0%, rgba(10,22,40,.5) 100%);
}
.cred__visual__caption{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; color:#fff;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.cred__visual__caption b{ color:#fff; font-weight:500 }
.cred__visual__caption .mid{
  flex:1; height:1px; background:rgba(255,255,255,.2); margin:0 24px;
}

/* Micro-interaction: highlight line sweep on section titles (entrance) */
[data-reveal].in .h2{
  position:relative;
}

/* ============================================================
   LOADER — full-screen splash with breathing logo
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy-ink);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  animation:loaderOut .8s ease-in-out 2s forwards;
}
.loader__bg{ position:absolute; inset:0; z-index:0 }
.loader__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.7) brightness(.5) blur(7px);
  transform:scale(1.06);
}
.loader__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(10,22,40,.15) 0%, rgba(5,16,31,.7) 100%),
    radial-gradient(800px 500px at 50% 40%, rgba(209,15,32,.18), transparent 60%);
}
.loader__content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:28px;
}
.loader__logo{
  width:clamp(140px,16vw,200px); height:auto;
  animation:breath 2.4s ease-in-out infinite;
  filter:drop-shadow(0 10px 40px rgba(209,15,32,.4));
}
.loader__label{
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--steel-2);
  animation:fadePulse 2s ease-in-out infinite;
  display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.loader__label span{ display:inline-flex; align-items:center; gap:7px }
.loader__label b{ color:var(--red); font-weight:500 }
@media (max-width:640px){
  .loader__label{ flex-direction:column; gap:12px; letter-spacing:.34em; }
}
@keyframes breath{
  0%,100%{ transform:scale(1); opacity:.92 }
  50%    { transform:scale(1.08); opacity:1 }
}
@keyframes loaderOut{
  0%  { opacity:1; visibility:visible; filter:blur(0) }
  60% { filter:blur(3px) }
  100%{ opacity:0; visibility:hidden; pointer-events:none; filter:blur(6px) }
}

/* ============================================================
   LOGO IMG — shared rule for navbar, hero, footer
   ============================================================ */
.logo__img{ height:88px; width:auto; display:block }
.logo__img--dark{ height:56px; filter:drop-shadow(0 4px 16px rgba(209,15,32,.2)) }
@media (max-width:780px){
  .logo__img{ height:76px }
}

/* HERO LOGO — centered above meta labels */
.hero__logo{
  width:clamp(96px,9vw,140px); height:auto;
  margin:0 auto clamp(20px,2.6vh,36px);
  display:block;
  filter:drop-shadow(0 6px 24px rgba(209,15,32,.25));
  animation:breath 3.6s ease-in-out infinite;
}

/* ============================================================
   VIDEO SECTION — institutional
   ============================================================ */
.video{
  background:var(--smoke); position:relative; overflow:hidden;
}
.video::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(10,22,40,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,22,40,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.video > .container{ position:relative; z-index:1 }
.video__head{
  text-align:center; max-width:740px; margin:0 auto 56px;
}
.video__insight{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  margin-bottom:24px;
}
.video__insight::before{
  content:""; width:32px; height:1px; background:currentColor;
}
.video__head h2{ margin:0 0 20px; max-width:22ch; margin-inline:auto }
.video__head p{
  font-size:17px; line-height:1.6; color:var(--steel);
  max-width:54ch; margin:0 auto;
}
.video__frame{
  max-width:88%; margin:0 auto;
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:var(--navy-ink);
  box-shadow:
    0 40px 80px -30px rgba(10,22,40,.35),
    0 20px 40px -20px rgba(10,22,40,.18);
  transform:scale(.97);
  transition:transform 1s var(--ease), box-shadow .6s var(--ease);
}
[data-reveal].in .video__frame,
.video__frame.is-visible{ transform:scale(1) }
.video__frame:hover{
  box-shadow:
    0 60px 100px -30px rgba(10,22,40,.45),
    0 30px 50px -20px rgba(10,22,40,.25);
}
.video__frame iframe,
.video__frame video,
.video-institucional{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  object-fit:cover;
  background:var(--navy-ink);
}
/* Method 5 steps grid override (default 4) */
.method__grid--5{ grid-template-columns:repeat(5,1fr); gap:32px 28px; }
@media (max-width:1100px){ .method__grid--5{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:700px){ .method__grid--5{ grid-template-columns:1fr; gap:32px } }
.video__divider{
  width:1px; height:56px;
  background:linear-gradient(180deg, transparent, var(--red));
  margin:0 auto 32px;
}
@media (max-width:780px){
  .video__frame{ max-width:100%; border-radius:8px }
}

/* ============================================================
   FLOW SECTION UPGRADE — dark theme + blueprint icons
   Continuous flow animation with SVG stroke draw + node pulse
   ============================================================ */
.flow{
  background:var(--navy-ink);
  color:#fff;
}
.flow::before{
  filter:grayscale(1) blur(24px) brightness(.35);
  opacity:.35;
}
.flow::after{
  background:
    radial-gradient(ellipse at center, rgba(5,16,31,.55) 0%, rgba(5,16,31,.92) 100%);
}
.flow .h2{ color:#fff }
.flow .lead{ color:rgba(255,255,255,.75) }

.flow__diagram{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.flow__line{
  background:rgba(255,255,255,.14);
}

/* GRAY segment — outside Soline's scope (E.01 → E.02 transition) */
.flow__line-fill--gray{
  position:absolute; left:40px; top:50%;
  transform:translateY(-50%);
  width:0; height:2px;
  background:linear-gradient(90deg, rgba(169,179,193,.3), rgba(169,179,193,.6));
  box-shadow:0 0 6px rgba(169,179,193,.22);
  transition:width .55s cubic-bezier(.4,.05,.25,1), opacity .4s;
  z-index:2;
}

/* RED segment — Soline's scope (E.02 → E.08) */
.flow__line-fill{
  left:calc(40px + (100% - 80px) / 7) !important;
  transition:width .55s cubic-bezier(.4,.05,.25,1), opacity .4s;
  box-shadow:0 0 18px var(--red-glow), 0 0 4px var(--red);
}

/* Step-based sequential progression —
   line pauses at each station while its icon draws, then resumes */
.flow__diagram[data-step="1"] .flow__line-fill--gray,
.flow__diagram[data-step="2"] .flow__line-fill--gray,
.flow__diagram[data-step="3"] .flow__line-fill--gray,
.flow__diagram[data-step="4"] .flow__line-fill--gray,
.flow__diagram[data-step="5"] .flow__line-fill--gray,
.flow__diagram[data-step="6"] .flow__line-fill--gray,
.flow__diagram[data-step="7"] .flow__line-fill--gray{
  width:calc((100% - 80px) / 7);
}
.flow__diagram[data-step="2"] .flow__line-fill{ width:calc((100% - 80px) * 1 / 7) !important; }
.flow__diagram[data-step="3"] .flow__line-fill{ width:calc((100% - 80px) * 2 / 7) !important; }
.flow__diagram[data-step="4"] .flow__line-fill{ width:calc((100% - 80px) * 3 / 7) !important; }
.flow__diagram[data-step="5"] .flow__line-fill{ width:calc((100% - 80px) * 4 / 7) !important; }
.flow__diagram[data-step="6"] .flow__line-fill{ width:calc((100% - 80px) * 5 / 7) !important; }
.flow__diagram[data-step="7"] .flow__line-fill{ width:calc((100% - 80px) * 6 / 7) !important; }

/* Station E.01 — gray treatment (outside scope) */
.station:first-child.is-lit .station__dot{
  border-color:rgba(169,179,193,.85);
  color:var(--steel-2);
  box-shadow:0 0 0 6px rgba(169,179,193,.1), 0 0 18px rgba(169,179,193,.18);
}
.station:first-child .station__num{
  color:rgba(169,179,193,.55);
}

/* Scope legend tags */
.flow__scope{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:44px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  gap:24px; flex-wrap:wrap;
}
.flow__scope-tag{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.flow__scope-tag b{ color:#fff; font-weight:500 }
.flow__scope-txt em{ font-style:normal }
.flow__scope-txt em::before{ content:" · " }
.flow__legend-noms span:not(:last-child)::after{ content:" · " }
.flow__scope-bar{
  width:32px; height:2px; display:inline-block; border-radius:1px;
}
.flow__scope-tag--out .flow__scope-bar{
  background:linear-gradient(90deg, rgba(169,179,193,.25), rgba(169,179,193,.55));
}
.flow__scope-tag--in .flow__scope-bar{
  background:linear-gradient(90deg, var(--red), var(--red-ember));
  box-shadow:0 0 8px var(--red-glow);
}

/* Station base state — dim */
.station__dot{
  background:rgba(10,22,40,.7);
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.55);
  transition:background .4s, border-color .5s, color .5s, box-shadow .5s, transform .4s;
}
.station__label{ color:rgba(255,255,255,.82) }
.station__num{ color:rgba(255,255,255,.45) }

/* Override hover for dark theme */
.flow .station:hover .station__dot{
  border-color:#fff;
  color:#fff;
  transform:scale(1.08);
}

/* SVG drawing base — paths start undrawn */
.station__dot svg path,
.station__dot svg circle:not([fill]),
.station__dot svg rect,
.station__dot svg line{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  fill:none;
  transition:stroke-dashoffset .35s ease-out;
}
.station__dot svg circle[fill="currentColor"]{
  opacity:0;
  transition:opacity .35s ease-out;
}

/* Station active state — lit + drawing */
.station.is-lit .station__dot{
  background:rgba(10,22,40,.92);
  border-color:var(--red);
  color:var(--red);
  box-shadow:0 0 0 6px rgba(209,15,32,.15), 0 0 22px rgba(209,15,32,.28);
  transform:scale(1.06);
}
.station.is-lit .station__dot svg path,
.station.is-lit .station__dot svg circle:not([fill]),
.station.is-lit .station__dot svg rect,
.station.is-lit .station__dot svg line{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s ease-out;
}
.station.is-lit .station__dot svg circle[fill="currentColor"]{
  opacity:1;
  transition:opacity .3s ease-out .9s;
}

/* Station 4 (Compresión) — pressure pulse on inner circle */
.station:nth-child(4).is-lit .station__dot svg > circle:first-of-type{
  animation:pressurePulse 1.8s ease-in-out infinite 1.2s;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes pressurePulse{
  0%, 100%{ transform:scale(1); opacity:1 }
  50%    { transform:scale(.88); opacity:.7 }
}

/* Legend — dark theme */
.flow__legend{
  color:rgba(255,255,255,.65);
  border-top-color:rgba(255,255,255,.1);
}
.flow__legend b{ color:#fff }

/* ============================================================
   SUBPAGE COMPONENTS — reused across Servicios, Proyectos,
   Normatividad, Nosotros. Inherit all design tokens from above.
   ============================================================ */

/* PAGE HERO — a shorter hero than Home (no 100vh). Uses same bg/overlay
   treatment but content fits naturally inside a constrained height. */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--navy-ink); color:#fff;
  padding-block:clamp(140px,18vh,200px) clamp(80px,10vh,120px);
}
.page-hero__bg{ position:absolute; inset:0; z-index:0 }
.page-hero__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.75) brightness(.42) contrast(1.12);
  transform:scale(1.05);
}
.page-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,16,31,.45) 0%, rgba(5,16,31,.92) 100%),
    radial-gradient(1000px 500px at 25% 50%, rgba(209,15,32,.12), transparent 60%);
}
.page-hero__inner{ position:relative; z-index:2; max-width:960px }
.page-hero__crumb{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-bottom:24px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel-2);
}
.page-hero__crumb a{ color:var(--steel-2); transition:color .2s }
.page-hero__crumb a:hover{ color:#fff }
.page-hero__crumb .chevron{ color:var(--red); font-size:14px }
.page-hero h1{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(36px,5.2vw,74px); line-height:1.04; letter-spacing:-.022em;
  margin:0 0 24px; max-width:22ch;
}
.page-hero h1 em{
  font-style:normal;
  background:linear-gradient(180deg, #fff 60%, #ADBCC9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-hero h1 .accent{ color:var(--red) }
.page-hero p{
  font-size:clamp(16px,1.2vw,19px); line-height:1.6; color:#BCC6D2;
  max-width:60ch; margin:0;
}
.page-hero__flow{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--red) 50%, transparent 100%);
  z-index:3; opacity:.8;
}
.page-hero__flow::after{
  content:""; position:absolute; top:-1px; left:0; width:140px; height:3px;
  background:var(--red); box-shadow:0 0 18px var(--red-glow);
  animation:flow 6s linear infinite;
}

/* SERVICE BLOCK — split layout with photo on one side, content on the other */
.service{
  position:relative; background:var(--paper);
  padding-block:clamp(80px,10vw,140px);
  border-bottom:1px solid var(--line);
}
.service--dark{
  background:var(--navy); color:#fff;
  border-bottom-color:rgba(255,255,255,.06);
}
.service.service--dark h2, .service--dark .service__list li b{ color:#fff }
.service--dark .service__lead{ color:#B6C0CE }
.service--dark .service__list li{ color:#B6C0CE; border-top-color:rgba(255,255,255,.1) }
.service--dark .service__list li::before{ background:rgba(255,255,255,.5) }
.service--dark .service__num{ color:var(--steel-2) }
.service__split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,6vw,88px);
  align-items:center;
}
.service--reverse .service__split{ direction:rtl }
.service--reverse .service__split > *{ direction:ltr }
.service__visual{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:4px;
}
.service__visual img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.85) contrast(1.1);
  transform:scale(1.03);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.service__visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,22,40,.1), rgba(10,22,40,.4));
}
.service:hover .service__visual img{
  transform:scale(1.06);
  filter:grayscale(.35) contrast(1);
}
.service__num{
  font-family:var(--f-mono); font-size:12px; color:var(--red);
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px;
}
.service h2{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(28px,3.2vw,44px); line-height:1.08; letter-spacing:-.015em;
  margin:0 0 24px; max-width:24ch; color:var(--navy);
}
.service__lead{
  font-size:17px; line-height:1.65; color:#5B6472;
  margin:0 0 32px; max-width:52ch;
}
.service__list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--line);
}
.service__list--single{ grid-template-columns:1fr }
.service__list li{
  position:relative;
  padding:14px 0 14px 22px;
  font-size:14px; line-height:1.45; color:#5B6472;
  border-bottom:1px solid var(--line);
  padding-right:16px;
}
.service__list li::before{
  content:""; position:absolute; left:0; top:22px;
  width:10px; height:1px; background:var(--red);
}
.service__list li:hover{ color:var(--navy) }
.service__list li b{ display:block; color:var(--navy); font-weight:500; margin-bottom:2px }
@media (max-width:900px){
  .service__split{ grid-template-columns:1fr; gap:40px }
  .service--reverse .service__split{ direction:ltr }
  .service__list{ grid-template-columns:1fr }
  .service__visual{ aspect-ratio:16/10 }
}

/* CAROUSEL — horizontal scroll with snap */
.carousel-sec{
  padding-block:clamp(72px,9vw,120px);
  background:var(--smoke);
  position:relative;
}
.carousel__head{
  display:flex; justify-content:space-between; align-items:end;
  gap:32px; margin-bottom:48px; flex-wrap:wrap;
}
.carousel__head .h2{ margin:0; max-width:20ch }
.carousel__nav{ display:flex; gap:8px }
.carousel__nav button{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--paper);
  color:var(--navy); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, color .3s, transform .2s;
}
.carousel__nav button:hover{
  background:var(--navy); border-color:var(--navy); color:#fff;
  transform:translateY(-1px);
}
.carousel__nav button:active{ transform:translateY(0) scale(.98) }
.carousel__nav svg{ width:16px; height:16px }
.carousel__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:360px; gap:20px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:8px;
  padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1);
}
.carousel__track::-webkit-scrollbar{ display:none }
.carousel__card{
  scroll-snap-align:start;
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden; border-radius:4px;
  background:var(--navy-ink);
  cursor:default;
}
.carousel__card img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.85) contrast(1.1) brightness(.85);
  transform:scale(1.04);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.carousel__card:hover img{
  transform:scale(1.08);
  filter:grayscale(.3) brightness(.95);
}
.carousel__card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(5,16,31,.92) 100%);
}
.carousel__card-meta{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:28px 28px 32px; color:#fff;
}
.carousel__card-meta .tag{
  display:inline-block;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red);
  margin-bottom:10px;
}
.carousel__card-meta h4{
  font-family:var(--f-display); font-weight:500; font-size:22px;
  margin:0 0 8px; line-height:1.2; letter-spacing:-.005em;
}
.carousel__card-meta p{
  font-size:13px; line-height:1.5; color:rgba(255,255,255,.75); margin:0;
}
@media (max-width:780px){
  .carousel__track{ grid-auto-columns:80vw }
}

/* BENEFITS — compact chip grid */
.benefits{
  background:var(--paper);
  padding-block:clamp(80px,10vw,140px);
}
.benefits__head{ max-width:860px; margin:0 auto 64px; text-align:center }
.benefits__head .h2{ margin:16px 0 0 }
.benefits__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.benefit{
  padding:40px 32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex; gap:20px; align-items:flex-start;
  transition:background .3s var(--ease);
}
.benefit:hover{ background:var(--smoke) }
.benefit__icon{
  width:44px; height:44px; flex-shrink:0;
  border-radius:50%;
  background:rgba(209,15,32,.08);
  color:var(--red);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.benefit:hover .benefit__icon{
  background:var(--red); color:#fff;
  transform:scale(1.06);
}
.benefit__icon svg{ width:20px; height:20px }
.benefit h4{
  font-family:var(--f-display); font-size:18px; font-weight:500;
  margin:0 0 6px; color:var(--navy); letter-spacing:-.005em; line-height:1.25;
}
.benefit p{
  font-size:14px; line-height:1.55; color:#5B6472; margin:0;
}
@media (max-width:900px){
  .benefits__grid{ grid-template-columns:1fr }
}

/* STATS BAND (for page-stats style) */
.stats-band{
  background:var(--navy-ink); color:#fff;
  padding-block:clamp(64px,8vw,100px);
  position:relative; overflow:hidden;
}
.stats-band__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.stats-band__item{
  background:var(--navy-ink);
  padding:48px 36px; text-align:center;
}
.stats-band__n{
  font-family:var(--f-display); font-size:clamp(48px,6vw,88px); font-weight:500;
  letter-spacing:-.03em; line-height:1; margin-bottom:10px; color:#fff;
}
.stats-band__n .plus{ color:var(--red); font-size:.6em; margin-left:.08em }
.stats-band__t{
  font-size:13px; letter-spacing:.04em; color:var(--steel-2);
  max-width:22ch; margin:0 auto;
}
@media (max-width:780px){ .stats-band__grid{ grid-template-columns:1fr } }

/* TIPOLOGIAS (Proyectos types) */
.tipos{ background:var(--smoke); padding-block:clamp(80px,10vw,140px) }
.tipos__head{ margin-bottom:56px }
.tipos__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.tipo{
  background:var(--paper);
  border:1px solid var(--line);
  padding:32px 28px 36px;
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.tipo::before{
  content:""; position:absolute; left:0; top:0; width:0; height:2px;
  background:var(--red);
  transition:width .4s var(--ease);
}
.tipo:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:0 28px 48px -30px rgba(10,22,40,.18);
}
.tipo:hover::before{ width:100% }
.tipo__num{
  font-family:var(--f-mono); font-size:11px; color:var(--steel);
  letter-spacing:.12em; margin-bottom:18px;
}
.tipo h4{
  font-family:var(--f-display); font-size:20px; font-weight:500;
  margin:0 0 10px; color:var(--navy); letter-spacing:-.005em;
}
.tipo p{ font-size:14px; line-height:1.55; color:#5B6472; margin:0 }
@media (max-width:900px){ .tipos__grid{ grid-template-columns:1fr } }

/* GALERIA EDITORIAL (Proyectos mosaic) */
.galeria{ background:var(--paper); padding-block:clamp(80px,10vw,140px) }
.galeria__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:180px;
  gap:12px;
}
.galeria__item{
  position:relative; overflow:hidden; border-radius:2px;
  background:var(--navy-ink);
}
.galeria__item img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.8) contrast(1.1);
  transform:scale(1.03);
  transition:transform 1s var(--ease), filter .5s var(--ease);
}
.galeria__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(5,16,31,.9) 100%);
}
.galeria__item:hover img{
  transform:scale(1.06);
  filter:grayscale(.2) contrast(1);
}
.galeria__item-meta{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:22px;
  transform:translateY(8px); opacity:.85;
  transition:transform .4s var(--ease), opacity .4s;
}
.galeria__item:hover .galeria__item-meta{
  transform:translateY(0); opacity:1;
}
.galeria__item .tag{
  display:inline-block;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red);
  margin-bottom:6px;
}
.galeria__item h5{
  font-family:var(--f-display); font-size:16px; font-weight:500; color:#fff;
  margin:0; letter-spacing:-.005em;
}
.galeria__item--lg{ grid-column:span 3; grid-row:span 2 }
.galeria__item--md{ grid-column:span 2; grid-row:span 2 }
.galeria__item--sm{ grid-column:span 1; grid-row:span 1 }
.galeria__item--wide{ grid-column:span 2; grid-row:span 1 }
@media (max-width:900px){
  .galeria__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px }
  .galeria__item--lg, .galeria__item--md, .galeria__item--wide{ grid-column:span 2; grid-row:span 1 }
  .galeria__item--sm{ grid-column:span 1 }
}
/* Móvil: TODOS los proyectos ocupan todo el ancho en formato rectangular */
@media (max-width:640px){
  .galeria__grid{ grid-template-columns:1fr; grid-auto-rows:auto; gap:14px }
  .galeria__item,
  .galeria__item--lg, .galeria__item--md,
  .galeria__item--sm, .galeria__item--wide{
    grid-column:1; grid-row:auto;
    aspect-ratio:16/10; height:auto;
  }
}

/* NORMAS — list with explicit badges */
.normas{ background:var(--paper); padding-block:clamp(80px,10vw,140px) }
.normas__grid{
  display:grid; gap:0;
  border-top:1px solid var(--line);
}
.norma{
  display:grid; grid-template-columns:180px 1fr 200px; gap:40px;
  padding:36px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
  transition:background .3s;
}
.norma:hover{ background:var(--smoke) }
.norma__code{
  font-family:var(--f-mono); font-size:14px; font-weight:500;
  letter-spacing:.04em; color:var(--red);
}
.norma__title{
  font-family:var(--f-display); font-size:20px; font-weight:500;
  color:var(--navy); letter-spacing:-.005em; line-height:1.3;
}
.norma__scope{
  font-size:13px; line-height:1.5; color:#5B6472;
}
@media (max-width:900px){
  .norma{ grid-template-columns:1fr; gap:10px; padding:28px 0 }
}

/* FILOSOFIA — 3-card horizontal stack for Nosotros */
.filo{ background:var(--paper); padding-block:clamp(80px,10vw,140px) }
.filo__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.pilar-filo{
  padding:40px 32px;
  background:var(--smoke);
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s;
}
.pilar-filo:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 52px -30px rgba(10,22,40,.2);
}
.pilar-filo::after{
  content:""; position:absolute; right:0; bottom:0; width:60px; height:60px;
  background:linear-gradient(135deg, transparent 50%, rgba(209,15,32,.08) 50%);
  transition:width .4s, height .4s;
}
.pilar-filo:hover::after{ width:120px; height:120px }
.pilar-filo .n{
  font-family:var(--f-mono); font-size:11px; color:var(--red);
  letter-spacing:.16em; margin-bottom:20px;
}
.pilar-filo h3{
  font-family:var(--f-display); font-size:24px; font-weight:500; letter-spacing:-.01em;
  margin:0 0 14px; color:var(--navy);
}
.pilar-filo p{
  font-size:15px; line-height:1.65; color:#5B6472; margin:0;
}
@media (max-width:900px){ .filo__grid{ grid-template-columns:1fr } }

/* DIFERENCIADORES — dark band */
.dif{ background:var(--navy); color:#fff; padding-block:clamp(80px,10vw,140px); position:relative }
.dif__head .h2{ color:#fff; max-width:22ch }
.dif__head p{ color:#B6C0CE }
.dif__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(255,255,255,.1);
  border-left:1px solid rgba(255,255,255,.1);
  margin-top:48px;
}
.dif__item{
  padding:36px 32px;
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; gap:20px; align-items:flex-start;
  transition:background .3s;
}
.dif__item:hover{ background:rgba(209,15,32,.06) }
.dif__item .num{
  font-family:var(--f-mono); font-size:11px; color:var(--red);
  letter-spacing:.14em; flex-shrink:0; padding-top:4px;
}
.dif__item h4{
  font-family:var(--f-display); font-size:19px; font-weight:500;
  margin:0 0 6px; color:#fff; letter-spacing:-.005em;
}
.dif__item p{ font-size:14px; line-height:1.55; color:#B6C0CE; margin:0 }
@media (max-width:780px){ .dif__grid{ grid-template-columns:1fr } }

/* MANIFIESTO — large editorial quote block */
.manifiesto{
  background:var(--smoke);
  padding-block:clamp(100px,12vw,160px);
  text-align:center;
}
.manifiesto__inner{ max-width:820px; margin:0 auto }
.manifiesto__label{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red);
  margin-bottom:32px;
}
.manifiesto__label::before, .manifiesto__label::after{
  content:""; width:32px; height:1px; background:currentColor;
}
.manifiesto blockquote{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(26px,3vw,40px); line-height:1.25; letter-spacing:-.015em;
  color:var(--navy); margin:0;
}
.manifiesto blockquote em{ font-style:normal; color:var(--red) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  [data-reveal]{ opacity:1; transform:none }
  .hero__bg .hero__bg-inner img{ animation:none }
  .cta .cta__ctas .btn--primary{ animation:none }
  .loader{ display:none }
  .loader__logo, .hero__logo{ animation:none }
  .station__dot svg path, .station__dot svg circle, .station__dot svg rect, .station__dot svg line{ stroke-dashoffset:0 !important }
  .station__dot svg circle[fill="currentColor"]{ opacity:1 !important }
}
/* ============================================================
   SLIDESHOW ROTATIVO — crossfade entre imágenes (v6.4)
   Cualquier contenedor .ss-rotate con varias <img> directas
   las apila y hace crossfade con desfase orgánico via JS.
   ============================================================ */
/* NO forzar position: cada contenedor ya define la suya (relative o absolute).
   Forzar relative rompería page-hero__bg / risk__card-bg / stats__bg / hero__bg-inner
   que son position:absolute y colapsarían a 0 de altura. */
.ss-rotate > img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 1.4s ease, transform .9s var(--ease), filter .7s var(--ease);
}
.ss-rotate > img.ss-on{ opacity:1; }
/* Fallback sin JS: muestra la primera imagen */
.ss-rotate > img:first-child{ opacity:1; }
.ss-rotate.ss-ready > img:first-child:not(.ss-on){ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .ss-rotate > img{ transition:none; }
}

/* ============================================================
   NORMAS / ISO — tarjetas con imagen (v6.4 override)
   ============================================================ */
.normas__grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  border-top:none !important;
}
.norma{
  display:flex !important; flex-direction:column;
  grid-template-columns:none !important;
  background:var(--smoke);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  padding:0 !important;
  align-items:stretch !important;
  transition:transform .4s var(--ease), box-shadow .4s, background .3s;
}
.norma:hover{
  background:var(--paper);
  transform:translateY(-6px);
  box-shadow:0 28px 52px -30px rgba(10,22,40,.22);
}
.norma__img{
  position:relative; height:172px; overflow:hidden;
  background:var(--navy-ink);
}
.norma__img > img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(1.06) brightness(.92);
  transform:scale(1.04);
  transition:transform 1s var(--ease), filter .5s var(--ease);
}
.norma:hover .norma__img > img{ transform:scale(1.08); filter:grayscale(.15) contrast(1) brightness(1); }
.norma__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(5,16,31,.45) 100%);
}
.norma__body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.norma__title{ margin:0 }
.norma__scope{ margin-top:auto; padding-top:6px }
@media (max-width:900px){
  .normas__grid{ grid-template-columns:1fr }
}

/* ISO — mismo patrón de tarjeta */
.iso__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
@media (max-width:900px){ .iso__grid{ grid-template-columns:1fr } }

/* ACREDITACIONES — apartado de documentos reales */
.acred-docs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:56px;
}
.acred-doc{
  position:relative; height:240px; overflow:hidden;
  border:1px solid var(--line); border-radius:2px;
  background:var(--navy-ink);
}
.acred-doc > img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.04);
  transition:transform 1s var(--ease);
}
.acred-doc:hover > img{ transform:scale(1.05) }
.acred-doc__cap{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:18px 20px;
  background:linear-gradient(180deg, transparent, rgba(5,16,31,.92));
  color:#fff;
}
.acred-doc__cap b{ display:block; font-family:var(--f-display); font-size:15px; font-weight:500 }
.acred-doc__cap span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-2) }
@media (max-width:900px){ .acred-docs{ grid-template-columns:1fr } }

/* ============================================================
   PILAR-FILO con imagen rotando (v6.4)
   ============================================================ */
.pilar-filo.has-img{ padding:0 !important; display:flex; flex-direction:column; }
.pilar-filo__img{
  position:relative; height:176px; overflow:hidden; background:var(--navy-ink);
}
.pilar-filo__img > img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.6) contrast(1.06) brightness(.94);
  transform:scale(1.04);
  transition:transform 1s var(--ease), filter .5s var(--ease), opacity 1.4s ease;
}
.pilar-filo.has-img:hover .pilar-filo__img > img{ transform:scale(1.08); filter:grayscale(.2) contrast(1) brightness(1); }
.pilar-filo__body{ padding:32px 30px 36px; position:relative; flex:1; }

/* ============================================================
   AJUSTES v6.4.1 — altura 16:9 + sombra roja sutil
   ============================================================ */
/* Imágenes angostas → proporción ~16:9 */
.norma__img{ height:auto; aspect-ratio:16/9; }
.pilar-filo__img{ height:auto; aspect-ratio:16/9; }
.cred__visual{ height:auto; aspect-ratio:32/9; }   /* banda ancha, un poco más alta */

/* Sombra roja sutil — difuminada hacia afuera en los CUATRO lados (sin offset) */
.pillar,
.norma,
.pilar-filo,
.galeria__item,
.carousel__card,
.acred-doc,
.service__visual,
.cred__visual,
.risk__card--image{
  box-shadow:0 0 30px 0 rgba(209,15,32,.38);
}
/* Hover: intensifica ligeramente, manteniendo los cuatro lados */
.pillar:hover,
.norma:hover,
.pilar-filo:hover,
.galeria__item:hover,
.carousel__card:hover,
.acred-doc:hover,
.service__visual:hover,
.cred__visual:hover,
.risk__card--image:hover{
  box-shadow:0 0 42px 2px rgba(209,15,32,.52);
}


/* === MKT4U-MOBILE === */
.cta-short{ display:none; }
.nav__burger{ display:none; width:48px; height:48px; padding:0; border:0; background:transparent;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.nav__burger span{ display:block; width:29px; height:2.4px; border-radius:2px; background:var(--red);
  transition:transform .3s var(--ease), opacity .2s var(--ease); }
.nav__burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-menu{ position:fixed; inset:0; z-index:99; background:rgba(10,22,40,.5);
  overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-menu__panel{ position:absolute; top:0; right:0; height:100%; width:min(82vw,320px);
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px);
  padding:96px 26px 32px; display:flex; flex-direction:column; gap:2px;
  box-shadow:-24px 0 60px -24px rgba(10,22,40,.45);
  transform:translateX(100%); transition:transform .35s var(--ease); }
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }
.mobile-menu__panel a{ padding:16px 6px; text-decoration:none; color:var(--navy);
  font-family:var(--f-display); font-size:18px; font-weight:600;
  border-bottom:1px solid var(--line);
  transition:color .2s var(--ease), padding-left .2s var(--ease); }
.mobile-menu__panel a:hover, .mobile-menu__panel a.is-active{ color:var(--red); padding-left:12px; }

.to-top{ width:52px; height:52px; border:0; border-radius:50%; cursor:pointer;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 24px -6px rgba(10,22,40,.4), 0 4px 12px -2px rgba(0,0,0,.15);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s var(--ease); }
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--red); }
.to-top svg{ width:20px; height:20px; }

@media (max-width:980px){
  .nav__burger{ display:inline-flex; flex:0 0 auto; }   /* nunca se recorta */
  .cta-full{ display:inline; }   /* texto completo: SOLICITAR EVALUACIÓN */
  .cta-short{ display:none; }
  .nav__inner{ position:relative; gap:8px; }
  .nav__inner > nav{ display:none; }
  /* Logo a la IZQUIERDA · CTA + burger a la derecha · los 3 siempre visibles */
  .nav__inner .logo{ position:static; transform:none; margin-right:auto; flex:0 0 auto; }
  .nav__cta{ margin-left:auto; gap:8px; align-items:center; flex:0 0 auto; }
  .logo__img{ height:64px; }   /* logo grande, dentro de la barra de 76px */
  .nav__cta{ position:static; }   /* el botón se posiciona respecto al nav__inner */
  /* Botón centrado en el ESPACIO entre el logo (izq, más ancho) y el burger (der).
     El offset compensa que el logo es más ancho que el burger → gaps iguales. */
  .nav__cta .btn--primary{ display:inline-flex; padding:13px 18px; font-size:13px; letter-spacing:.04em; white-space:nowrap; gap:11px;
    position:absolute; left:calc(50% + 4px); top:50%; transform:translate(-50%,-50%); }
  .nav__cta .btn--primary svg{ width:14px; height:14px; }
  .nav__burger{ margin-left:auto; }   /* burger a la derecha */
}
/* Menos gutter lateral en móvil → más ancho útil. El logo conserva su tamaño grande. */
@media (max-width:560px){
  :root{ --gutter:16px; }
  .logo__img{ height:60px; }
  .nav__cta{ gap:8px; }
  .nav__cta .btn--primary{ padding:12px 16px; font-size:12.5px; gap:10px; left:calc(50% + 2px); }
  .nav__cta .btn--primary svg{ width:13px; height:13px; }
}
@media (max-width:420px){
  :root{ --gutter:13px; }
  .logo__img{ height:56px; }
  .nav__cta{ gap:7px; }
  .nav__cta .btn--primary{ padding:11px 13px; font-size:12px; letter-spacing:.02em; gap:8px; left:calc(50% + 4px); }
  .nav__cta .btn--primary svg{ width:12px; height:12px; }
}

/* Fix scroll lateral en Respaldo institucional (sellos de ancho fijo) */
@media (max-width:560px){
  .cred__item{ padding:26px 14px; }
  .cred__item .seal{ width:100%; max-width:120px; height:78px; }
}
/* === /MKT4U-MOBILE === */

/* ============================================================
   MÓVIL — texto centrado a lo largo de la página (v6.5)
   Títulos y párrafos centrados para que no se vean cargados a la izquierda.
   ============================================================ */
@media (max-width:768px){
  /* Heads de sección, héroes y bloques de texto */
  .hero__inner,
  .qh__head, .qh__head > div,
  .risk__head, .risk__head > div,
  .flow__head, .stats__head, .cred__head, .method__head,
  .tipos__head, .benefits__head, .video__head, .carousel__head,
  .manifiesto__inner, .dif__head,
  .page-hero__inner,
  .service__split > div,
  .pillar__body, .risk__card, .tipo, .norma__body, .pilar-filo__body,
  .dif__item, .stats-band__item, .stat, .cta__grid > div,
  .galeria__item-meta, .acred-doc__cap{
    text-align:center;
  }

  /* Párrafos y leads sueltos dentro de secciones */
  .section p, .section .lead, .hero__sub,
  .page-hero p, .manifiesto blockquote{
    text-align:center;
  }

  /* Labels con línea decorativa → centrados como bloque inline */
  .label{ display:inline-flex; align-items:center; justify-content:center; }
  /* Línea simétrica al otro lado para que el TEXTO quede centrado real */
  .label--accent::after{
    content:""; display:inline-block; width:24px; height:1px;
    background:currentColor; margin-left:12px; transform:translateY(-3px);
  }

  /* Listas de servicios: 1 columna, texto centrado, sin guion a la izquierda */
  .service__list{ grid-template-columns:1fr; }
  .service__list li{ padding-left:0; padding-right:0; text-align:center; }
  .service__list li::before{ display:none; }

  /* Metas de hero y separadores quedan centrados (ya lo están por flex) */
  .hero__meta, .hero-stats__label, .video__insight{ justify-content:center; text-align:center; }

  /* CTA meta (lista de datos) centrada */
  .cta__meta{ text-align:center; }
  .cta__meta > div{ align-items:center; }

  /* Tickers del hero-stats (cifras de continuidad) */
  .hero__ticker{ text-align:center; }

  /* Pasos de metodología (títulos y descripciones) */
  .step, .step h4, .method__grid > div{ text-align:center; }

  /* Footer — centrar marca, columnas y listas en móvil */
  .footer__top, .footer__brand, .footer__brand p,
  .footer__top > div, .footer h6, .footer ul, .footer li{ text-align:center; }
  .footer__bottom{ text-align:center; }

  /* ── Correcciones de centrado para elementos flex/block ── */

  /* Page-hero de subpáginas: inner centrado + breadcrumb (es flex) + título */
  .page-hero__inner{ margin-inline:auto; text-align:center; }
  .page-hero__inner h1, .page-hero__inner p{ text-align:center; }
  .page-hero__crumb{ justify-content:center; }

  /* Números de metodología (círculos block) centrados horizontalmente */
  .step{ padding-right:0; }
  .step__num{ margin-left:auto; margin-right:auto; }

  /* Grupos de botones centrados (son flex) */
  .cta__ctas, .hero__ctas, .service__split .hero__ctas{ justify-content:center; }

  /* CTA meta (Tiempo de respuesta / Ámbito / Alcance…): apilar cada par centrado */
  .cta__meta > div{ flex-direction:column; justify-content:center; align-items:center; gap:4px; text-align:center; }

  /* Íconos de los pilares centrados horizontalmente */
  .pillar__icon{ margin-left:auto; margin-right:auto; }

  /* Método de PROYECTOS (6 pasos): 2 columnas × 3 filas en móvil
     (el index usa .method__grid--5 que queda en 1 columna, no se toca) */
  .method__grid:not(.method__grid--5){ grid-template-columns:repeat(2,1fr) !important; gap:0 !important; }

  /* Diferenciadores (Nosotros): número rojo ARRIBA del título, centrado */
  .dif__item{ flex-direction:column; align-items:center; text-align:center; gap:8px; }
  .dif__item .num{ padding-top:0; }

  /* Reducir gap entre imagen y texto de los servicios (evita espacios grandes) */
  .service__split{ gap:24px !important; }
  .service__split > div{ align-self:start; }

  /* ── FIX iPhone (GLOBAL): TODOS los títulos y textos con max-width
     centrados como BLOQUE en cualquier ancho. El texto ya está centrado,
     pero la caja (con max-width en ch) quedaba pegada a la izquierda. ── */
  .container h1, .container h2, .container h3, .container h4, .container h5,
  .h1, .h2, .h3, .h4,
  .hero__title, .manifiesto blockquote,
  .lead, .service__lead, .footer__brand p, .benefits__head p, .tipos__head p,
  .cta p, .cta h2, .page-hero h1, .page-hero p{
    margin-left:auto !important; margin-right:auto !important;
  }

  /* Beneficios (Servicios): ícono ARRIBA del título, centrado */
  .benefit{ flex-direction:column; align-items:center; text-align:center; gap:14px; }
  .benefit > div{ text-align:center; }

  /* Sección de FLUJO — leyenda de alcance en 2 líneas cada una, centrada */
  .flow__scope{ flex-direction:column; align-items:center; gap:22px; }
  .flow__scope-tag{ flex-direction:column; align-items:center; gap:8px; text-align:center; }
  .flow__scope-txt{ display:flex; flex-direction:column; align-items:center; gap:3px; }
  .flow__scope-txt em::before{ content:none; }   /* sin "·" en móvil (van en 2 líneas) */

  /* Leyenda final: párrafo a todo el ancho + NOMs apiladas */
  .flow__legend{ flex-direction:column; align-items:center; gap:14px; text-align:center; }
  .flow__legend-text{ width:100%; }
  .flow__legend-noms{ display:flex; flex-direction:column; align-items:center; gap:4px;
    font-family:var(--f-mono); letter-spacing:.08em; }
  .flow__legend-noms span:not(:last-child)::after{ content:none; }   /* sin "·", van apiladas */

  /* Carrusel: botones ← → centrados */
  .carousel__head{ justify-content:center; }
  .carousel__nav{ justify-content:center; width:100%; }
}