/* ============================================================
   GARKO INDUSTRIES — sistema web v3
   Refinamiento premium B2B. Azul de marca, mucho aire, jerarquía fuerte.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --azul:#0E37AF;
  --azul-osc:#0A2A8C;
  --azul-vivo:#2F6BFF;
  --azul-claro:#8FAEFF;
  --azul-tenue:#EEF2FE;

  --marino:#0A1330;
  --tinta:#0B0C0F;
  --carbon:#14161B;
  --gris-900:#1F2229;
  --gris-600:#5A6072;
  --gris-500:#767D8F;
  --gris-400:#9AA1B1;
  --linea:#E6E8EE;
  --linea-2:#F0F1F5;
  --papel:#FFFFFF;
  --hueso:#FAFAFB;

  --display:'Inter Tight', 'Inter', -apple-system, Arial, sans-serif;
  --texto:'Inter', -apple-system, Arial, Helvetica, sans-serif;

  --max:1200px;
  --r:14px;
  --r-sm:10px;
  --sec:clamp(76px, 9vw, 132px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;}
::selection{background:var(--azul);color:#fff;}
:focus-visible{outline:2px solid var(--azul-vivo);outline-offset:3px;border-radius:3px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 22px;}}

/* ---------- escala tipográfica ---------- */
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;}
h1{font-size:clamp(3.1rem,7.6vw,6.6rem);line-height:.98;letter-spacing:-.036em;}
h2{font-size:clamp(2.2rem,4.8vw,4.1rem);line-height:1.02;letter-spacing:-.03em;}
h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.016em;font-weight:700;}
h4{font-size:1.02rem;line-height:1.3;letter-spacing:-.01em;font-weight:700;}
p{margin:0 0 1.1em;}

.etiqueta{
  font-size:.76rem;font-weight:600;letter-spacing:.115em;
  text-transform:uppercase;color:var(--azul);display:block;margin-bottom:20px;
}
.plomo{color:var(--gris-600);font-size:1.16rem;line-height:1.6;max-width:60ch;letter-spacing:-.006em;}
.oscuro .plomo{color:#A9B2C9;}
.oscuro .etiqueta{color:var(--azul-claro);}
.centro{text-align:center;}
.centro .plomo{margin-left:auto;margin-right:auto;}

/* ---------- animación de entrada ---------- */
.reveal{opacity:0;transform:translateY(26px) scale(.97);filter:blur(7px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);}
.reveal.visible{opacity:1;transform:none;filter:blur(0);}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}

/* ---------- barra de utilidad ---------- */
.utilidad{background:var(--tinta);color:#8D95A8;font-size:.78rem;letter-spacing:-.002em;}
.utilidad-inner{
  max-width:var(--max);margin:0 auto;padding:11px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.utilidad .promesas{display:flex;gap:26px;flex-wrap:wrap;}
.utilidad .promesas span{display:flex;align-items:center;gap:8px;}
.utilidad .promesas svg{width:13px;height:13px;stroke:var(--azul-claro);flex:0 0 auto;}
.utilidad a{color:#fff;text-decoration:none;font-weight:500;white-space:nowrap;transition:color .2s;}
.utilidad a:hover{color:var(--azul-claro);}
@media (max-width:960px){.utilidad .promesas span:nth-child(n+2){display:none;}}
@media (max-width:560px){.utilidad-inner{padding:9px 22px;font-size:.72rem;}}

/* ---------- navbar ---------- */
.encabezado{
  position:sticky;top:0;z-index:70;background:rgba(255,255,255,.88);
  border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s;
}
@media (min-width:961px){
  @supports (backdrop-filter:blur(1px)){
    .encabezado{backdrop-filter:saturate(180%) blur(14px);}
  }
}
@media (max-width:960px){ .encabezado{background:var(--papel);} }
.encabezado.fijo{border-bottom-color:var(--linea);box-shadow:0 1px 20px rgba(11,12,15,.05);}
.nav{display:flex;align-items:center;gap:30px;max-width:var(--max);margin:0 auto;padding:18px 32px;}
.nav .logo img{height:29px;width:auto;}
.nav-links{display:flex;gap:4px;list-style:none;margin:0 auto 0 16px;padding:0;
  font-size:.94rem;font-weight:500;letter-spacing:-.008em;}
.nav-links a{
  text-decoration:none;color:var(--gris-600);padding:9px 15px;border-radius:8px;
  transition:color .2s, background .2s;
}
.nav-links a:hover{color:var(--tinta);background:var(--linea-2);}
.nav-links a.activo{color:var(--azul);font-weight:600;}
.nav-boton{display:none;}
@media (max-width:960px){
  .nav{gap:14px;padding:15px 22px;}
  .nav > .boton{display:none;}
  .nav-links{
    position:fixed;left:0;right:0;top:var(--navtop,60px);bottom:0;background:var(--papel);
    flex-direction:column;padding:16px 22px;gap:0;margin:0;z-index:69;
    transform:translateX(100%);transition:transform .32s var(--ease);overflow-y:auto;
  }
  .nav-links.abierto{transform:translateX(0);}
  .nav-links a{display:block;width:100%;padding:19px 0;border-bottom:1px solid var(--linea);
    border-radius:0;font-size:1.06rem;font-weight:600;}
  .nav-boton{
    display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--linea);
    color:var(--tinta);font-family:var(--texto);font-size:.82rem;font-weight:600;
    padding:10px 15px;cursor:pointer;border-radius:9px;margin-left:auto;
  }
}

/* ---------- botones ---------- */
.boton{
  font-family:var(--texto);font-size:.95rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;padding:14px 26px;display:inline-flex;align-items:center;
  justify-content:center;text-align:center;gap:9px;
  border:1px solid transparent;cursor:pointer;border-radius:10px;white-space:nowrap;
  position:relative;
  transition:background-position .75s var(--ease), background-color .2s var(--ease),
             color .2s, border-color .2s, transform .18s var(--ease), box-shadow .28s var(--ease);
}
.boton svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;
  transition:transform .28s var(--ease);}
.boton:hover svg{transform:translateX(4px);}
.boton:active{transform:translateY(0) scale(.985);}

/* barrido de luz al pasar el cursor, sin tocar el texto */
.boton-accion{
  color:#fff;
  background-image:linear-gradient(112deg,
    var(--azul) 0%, var(--azul) 38%, #3D74FF 50%, var(--azul) 62%, var(--azul) 100%);
  background-size:280% 100%;background-position:100% 0;
  box-shadow:0 1px 2px rgba(14,55,175,.3);
}
.boton-accion:hover{background-position:0 0;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(14,55,175,.3);}

.boton-blanco{
  color:var(--tinta);
  background-image:linear-gradient(112deg,#fff 0%,#fff 38%,#E9EDF7 50%,#fff 62%,#fff 100%);
  background-size:280% 100%;background-position:100% 0;
}
.boton-blanco:hover{background-position:0 0;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.16);}

.boton-linea{border-color:var(--linea);color:var(--tinta);background:#fff;}
.boton-linea:hover{border-color:var(--gris-400);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(11,12,15,.08);}
.oscuro .boton-linea,.heroe .boton-linea,.cta-banda .boton-linea{
  border-color:rgba(255,255,255,.28);color:#fff;background:transparent;}
.oscuro .boton-linea:hover,.heroe .boton-linea:hover,.cta-banda .boton-linea:hover{
  border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.08);box-shadow:none;}

.acciones{display:flex;gap:13px;flex-wrap:wrap;margin-top:38px;}
.centro .acciones{justify-content:center;}
/* al apilarse, los botones igualan ancho para que las etiquetas queden centradas */
@media (max-width:520px){
  .acciones{flex-direction:column;align-items:stretch;}
  .acciones .boton{width:100%;}
}

/* ---------- héroe ---------- */
.heroe{
  position:relative;overflow:hidden;color:#fff;background:var(--marino);
  padding:clamp(96px,12vw,164px) 0 clamp(84px,10vw,140px);
}
.heroe-bg{
  position:absolute;left:0;right:0;top:-12%;bottom:-12%;z-index:0;
  background:var(--marino) url('img/hero.jpg') center/cover no-repeat;will-change:transform;
}
.heroe-bg video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.heroe::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg, rgba(5,9,22,.97) 0%, rgba(5,10,24,.94) 30%, rgba(6,12,30,.82) 54%, rgba(8,17,42,.55) 78%, rgba(10,22,56,.4) 100%);
}
.heroe .wrap{position:relative;z-index:2;}
@media (prefers-reduced-motion:reduce){
  .heroe-bg{transform:none !important;}
  .heroe-bg video{display:none;}
}
/* en celular el video de fondo se quita: menos datos, menos batería, sin problemas de autoplay */
@media (max-width:760px){
  .heroe-bg video{display:none;}
}

.vivo{
  display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;
  color:var(--azul-claro);background:rgba(143,174,255,.12);border:1px solid rgba(143,174,255,.3);
  padding:7px 14px 7px 12px;border-radius:999px;margin-bottom:22px;letter-spacing:.01em;
}
.vivo i{width:7px;height:7px;border-radius:50%;background:var(--azul-vivo);flex:0 0 auto;
  animation:pulso 1.8s ease-out infinite;}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(47,107,255,.55);}
  70%{box-shadow:0 0 0 9px rgba(47,107,255,0);}
  100%{box-shadow:0 0 0 0 rgba(47,107,255,0);}
}

/* ---------- cinta de grados ---------- */
.cinta-grados{
  background:var(--tinta);border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;white-space:nowrap;
}
.cinta-track{
  display:inline-flex;gap:26px;padding:13px 0;
  font-family:var(--display);font-weight:600;font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--azul-claro);
  animation:cinta 34s linear infinite;
}
.cinta-track span.punto{color:#454C5E;}
@keyframes cinta{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.cinta-track{animation:none;}}

/* ---------- cifras ---------- */
.cifras{background:var(--marino);color:#fff;position:relative;overflow:hidden;}
.cifras::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 12% 0%, rgba(47,107,255,.2), transparent 60%);
}
.cifras-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);overflow:hidden;
}
@media (max-width:560px){.cifras-grid{grid-template-columns:1fr;}}
.cifra{
  background:rgba(255,255,255,.025);padding:clamp(30px,4vw,46px) clamp(20px,3vw,30px);
  display:flex;flex-direction:column;gap:11px;
}
.cifra-num{
  font-family:var(--display);font-weight:800;font-size:clamp(2.05rem,3.9vw,3.05rem);
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;line-height:1;
}
.cifra-etq{font-size:.9rem;color:#A9B2C9;line-height:1.4;max-width:22ch;}
.heroe h1{max-width:17ch;}
.heroe h1 em{font-style:normal;color:var(--azul-claro);}
.heroe .etiqueta{color:var(--azul-claro);}
.heroe .plomo{color:#B9C2D8;margin-top:26px;font-size:1.24rem;max-width:48ch;}
.heroe-marcas{
  display:flex;gap:32px;flex-wrap:wrap;margin-top:52px;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.14);
}
.heroe-marcas span{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#B9C2D8;}
.heroe-marcas svg{width:17px;height:17px;stroke:var(--azul-claro);flex:0 0 auto;}

/* ---------- secciones ---------- */
section{padding:var(--sec) 0;}
.oscuro{background:var(--marino);color:#fff;}
.oscuro h1,.oscuro h2,.oscuro h3,.oscuro h4{color:#fff;}
.hueso{background:var(--hueso);}
.cab{margin-bottom:clamp(44px,5vw,66px);}
.cab h2 + .plomo{margin-top:20px;}

/* ---------- pilares (bajo el héroe) ---------- */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:860px){.pilares{grid-template-columns:1fr;gap:18px;}}
.pilar{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:32px 30px 34px;transition:border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pilar:hover{border-color:#D2D7E2;box-shadow:0 14px 40px rgba(11,12,15,.07);transform:translateY(-3px);}
.pilar .ico{
  width:42px;height:42px;border-radius:11px;background:var(--azul-tenue);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.pilar .ico svg{width:19px;height:19px;stroke:var(--azul);}
.pilar h3{margin-bottom:9px;}
.pilar p{font-size:.98rem;color:var(--gris-600);margin:0;}

/* ---------- propuesta de valor ---------- */
.valor{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;}
@media (max-width:800px){.valor{grid-template-columns:1fr;}}
.valor-item{background:var(--papel);padding:clamp(34px,4vw,52px);transition:background .3s var(--ease);}
.valor-item:hover{background:var(--hueso);}
.valor-num{
  font-size:.74rem;font-weight:600;letter-spacing:.11em;color:var(--azul);
  margin-bottom:24px;display:block;font-variant-numeric:tabular-nums;
}
.valor-item h3{font-size:clamp(1.4rem,2.2vw,1.85rem);letter-spacing:-.022em;font-weight:800;margin-bottom:12px;}
.valor-item p{color:var(--gris-600);font-size:1.02rem;margin:0;max-width:42ch;}

/* ---------- presencia estratégica ---------- */
.presencia{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,5.5vw,72px);align-items:center;}
.presencia h2{font-size:clamp(1.8rem,3vw,2.5rem);max-width:19ch;}
.nowrap{white-space:nowrap;}
.presencia .plomo{margin-top:22px;font-size:1.08rem;}
@media (max-width:900px){.presencia{grid-template-columns:1fr;gap:44px;}}
.corredor{
  background:linear-gradient(160deg,#111C42 0%,#0A1330 100%);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
  padding:clamp(36px,4vw,52px) clamp(28px,3.5vw,46px);
  position:relative;overflow:hidden;
}
.corredor::after{
  content:"";position:absolute;top:-40%;right:-90px;width:340px;height:180%;
  background:linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.045) 46% 56%,transparent 56%);
  pointer-events:none;
}
.corredor-rot{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--azul-claro);margin-bottom:34px;position:relative;z-index:2;
}
.mapa-bloque{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3.5vw,44px);
  align-items:center;position:relative;z-index:2;
}
.mapa-baja{width:clamp(150px,19vw,210px);height:auto;display:block;overflow:visible;}
.mapa-baja .tierra{fill:rgba(143,174,255,.22);stroke:rgba(143,174,255,.78);stroke-width:2.6;
  stroke-linejoin:round;}
.mapa-baja .municipios{fill:none;stroke:rgba(143,174,255,.36);stroke-width:1.5;stroke-linejoin:round;}
.mapa-baja .plazas-pin circle{fill:#A9C2FF;}
.mapa-baja .pin-base{fill:var(--azul-vivo);stroke:#0B1330;stroke-width:2.2;}

.plazas-lista{list-style:none;margin:0;padding:0;}
.plazas-lista li{
  display:flex;align-items:baseline;gap:11px;padding:9px 0;font-size:1rem;color:#C3CBDE;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.plazas-lista li:last-child{border-bottom:none;}
.plazas-lista .pt{width:7px;height:7px;border-radius:50%;background:#8FAEFF;flex:0 0 auto;
  position:relative;top:-2px;}
.plazas-lista li.base{color:#fff;}
.plazas-lista li.base .pt{background:var(--azul-vivo);box-shadow:0 0 0 4px rgba(47,107,255,.2);}
.plazas-lista li.base b{font-weight:600;}
.plazas-lista li.base em{font-style:normal;font-size:.82rem;color:#7B86A3;margin-left:auto;
  white-space:nowrap;}
@media (max-width:560px){
  .mapa-bloque{grid-template-columns:auto 1fr;gap:20px;}
  .mapa-baja{width:120px;}
  .plazas-lista li{font-size:.94rem;padding:8px 0;}
  .plazas-lista li.base em{display:none;}
}
.corredor-nota{
  margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  position:relative;z-index:2;
}
.corredor-nota p{font-size:.9rem;color:#7B86A3;margin:0;}

/* ---------- tarjetas de material ---------- */
.productos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:940px){.productos{grid-template-columns:repeat(2,1fr);gap:20px;}}
@media (max-width:600px){.productos{grid-template-columns:1fr;}}
.prod{
  display:block;text-decoration:none;color:inherit;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  transition:border-color .25s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.prod:hover{border-color:#D2D7E2;box-shadow:0 18px 46px rgba(11,12,15,.09);transform:translateY(-4px);}
.prod-img{background:var(--hueso);border-bottom:1px solid var(--linea);overflow:hidden;}
.prod-img img{width:100%;height:auto;display:block;transition:transform .55s var(--ease);}
.prod:hover .prod-img img{transform:scale(1.035);}
.prod-txt{padding:26px 28px 28px;}
.prod-txt h3{margin-bottom:9px;}
.prod-txt .grados{font-size:.88rem;font-weight:500;color:var(--azul);letter-spacing:.004em;font-variant-numeric:tabular-nums;}
.prod-txt p{font-size:.95rem;color:var(--gris-600);margin:12px 0 0;}
.prod-mas{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:.9rem;font-weight:600;color:var(--azul);}
.prod-mas svg{width:14px;height:14px;stroke:currentColor;fill:none;transition:transform .25s var(--ease);}
.prod:hover .prod-mas svg{transform:translateX(3px);}

/* ---------- tabla ---------- */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r);background:#fff;}
.tabla{width:100%;border-collapse:collapse;font-size:.95rem;min-width:800px;}
.tabla thead th{
  background:var(--tinta);color:#fff;text-align:left;padding:17px 20px;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.tabla td{padding:19px 20px;border-bottom:1px solid var(--linea-2);color:var(--gris-600);}
.tabla tbody tr:last-child td{border-bottom:none;}
.tabla tbody tr{transition:background .18s;}
.tabla tbody tr:hover{background:var(--azul-tenue);}
.tabla td.grado{color:var(--azul);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.004em;}
.tabla td.nombre{color:var(--tinta);font-weight:600;}
.btn-fila{
  color:#fff;text-decoration:none;font-size:.83rem;font-weight:600;
  padding:9px 18px;border-radius:8px;display:inline-flex;align-items:center;
  justify-content:center;text-align:center;min-width:86px;white-space:nowrap;
  background-image:linear-gradient(112deg,var(--azul) 0%,var(--azul) 38%,#3D74FF 50%,var(--azul) 62%,var(--azul) 100%);
  background-size:280% 100%;background-position:100% 0;
  transition:background-position .6s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
}
.btn-fila:hover{background-position:0 0;transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(14,55,175,.28);}
.btn-fila:active{transform:scale(.97);transition-duration:.08s;}
.nota-tabla{font-size:.9rem;color:var(--gris-500);margin-top:20px;max-width:80ch;}

/* ---------- pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px);}
@media (max-width:920px){.pasos{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pasos{grid-template-columns:1fr;}}
.paso .num{font-size:.74rem;font-weight:600;letter-spacing:.1em;color:var(--azul);
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--linea);font-variant-numeric:tabular-nums;}
.oscuro .paso .num{border-color:rgba(255,255,255,.15);color:var(--azul-claro);}
.paso h3{margin-bottom:10px;font-size:1.16rem;}
.paso p{color:var(--gris-600);font-size:.96rem;margin:0;}
.oscuro .paso p{color:#A9B2C9;}

/* ---------- capacidades ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.caps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.caps{grid-template-columns:1fr;}}
.cap{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-sm);padding:26px 24px;transition:background .25s, border-color .25s;}
.cap:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2);}
.cap-cab{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.cap-cab svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--azul-claro);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.cap h3{font-size:1.06rem;margin:0;}
.cap p{font-size:.92rem;color:#A9B2C9;margin:0;}

/* ---------- comparativa ---------- */
.comparativa{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:820px){.comparativa{grid-template-columns:1fr;}}
.col{border:1px solid var(--linea);border-radius:var(--r);padding:clamp(28px,3vw,38px);background:var(--papel);}
.col.destacada{background:var(--marino);border-color:var(--marino);color:#fff;}
.col-titulo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:78px;padding-bottom:24px;margin-bottom:26px;border-bottom:1px solid var(--linea);}
.col-titulo .rotulo{font-family:var(--display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.024em;color:var(--gris-500);line-height:1;}
.col.destacada .col-titulo{border-color:rgba(255,255,255,.18);}
.col-titulo .lockup{height:38px;width:auto;display:block;}
@media (max-width:480px){.col-titulo{min-height:68px;} .col-titulo .rotulo{font-size:1.3rem;} .col-titulo .lockup{height:31px;}}
.col ul{list-style:none;margin:0;padding:0;}
.col li{padding:16px 0;border-bottom:1px solid var(--linea-2);font-size:.98rem;color:var(--gris-600);}
.col li:last-child{border-bottom:none;}
.col li b{display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta);margin-bottom:6px;}
.col.destacada li{color:#A9B2C9;border-color:rgba(255,255,255,.12);}
.col.destacada li b{color:#fff;}

/* ---------- CTA ---------- */
.cta-banda{background:var(--azul);color:#fff;padding:clamp(72px,8vw,104px) 0;text-align:center;
  position:relative;overflow:hidden;}
.cta-banda::after{content:"";position:absolute;top:-30%;right:-120px;width:460px;height:160%;
  background:linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.06) 48% 58%,transparent 58%);
  pointer-events:none;}
.cta-banda .wrap{position:relative;z-index:2;}
.cta-banda h2{max-width:20ch;margin:0 auto;color:#fff;}
.cta-banda p{color:#C6D2F6;max-width:54ch;margin:20px auto 0;font-size:1.12rem;}

/* ---------- cobertura ---------- */
.plazas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.plaza{font-size:.9rem;padding:10px 18px;border:1px solid var(--linea);border-radius:100px;
  color:var(--gris-600);background:var(--papel);transition:border-color .2s,color .2s;}
.plaza:hover{border-color:var(--azul);color:var(--azul);}
.oscuro .plaza{border-color:rgba(255,255,255,.2);color:#B9C2D8;background:transparent;}

/* ---------- formulario ---------- */
label{display:block;font-size:.85rem;font-weight:600;color:var(--tinta);margin-bottom:9px;letter-spacing:-.008em;}
input,textarea,select{
  width:100%;padding:14px 16px;border:1px solid var(--linea);background:var(--papel);
  font-family:var(--texto);font-size:1rem;color:var(--tinta);border-radius:10px;
  transition:border-color .2s, box-shadow .2s;
}
input:focus,textarea:focus,select:focus{border-color:var(--azul);outline:none;
  box-shadow:0 0 0 3px rgba(14,55,175,.11);}
textarea{resize:vertical;min-height:130px;}
.campo{margin-bottom:20px;}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:540px){.campo-doble{grid-template-columns:1fr;}}
.form-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,5vw,72px);}
@media (max-width:920px){.form-grid{grid-template-columns:1fr;gap:48px;}}
.form-caja{background:var(--hueso);border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(30px,3.5vw,42px);}
.form-caja button.boton{width:100%;margin-top:4px;}
.oculto{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}
.lado h3{font-size:1.1rem;margin-bottom:10px;}
.lado p{font-size:.97rem;color:var(--gris-600);}
.lado .bloque{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--linea);}
.lado .bloque:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}

/* ---------- pie ---------- */
.pie{background:var(--tinta);color:#8D95A8;padding:clamp(60px,7vw,84px) 0 34px;font-size:.95rem;}
.pie img.lockup{height:27px;width:auto;margin-bottom:20px;}
.pie-rejilla{display:grid;grid-template-columns:1.9fr 1fr 1fr 1.15fr;gap:44px;}
@media (max-width:880px){.pie-rejilla{grid-template-columns:1fr 1fr;gap:36px;}}
@media (max-width:540px){.pie-rejilla{grid-template-columns:1fr;gap:32px;}}
.pie-rejilla h4{color:#fff;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:600;margin-bottom:18px;}
.pie-rejilla a{text-decoration:none;color:#8D95A8;display:block;padding:6px 0;transition:color .2s;}
.pie-rejilla a:hover{color:#fff;}
.pie-contacto div{display:flex;gap:10px;align-items:flex-start;padding:6px 0;}
.pie-contacto svg{width:15px;height:15px;stroke:var(--azul-claro);flex:0 0 auto;margin-top:5px;}
.pie-abajo{margin-top:52px;padding-top:24px;border-top:1px solid #23262E;
  font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#6E7689;}

/* ---------- declaración (statement tipográfico) ---------- */
.declaracion{background:var(--tinta);position:relative;overflow:hidden;}
.declaracion::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/100% 64px,
    radial-gradient(700px 380px at 88% 100%, rgba(47,107,255,.16), transparent 60%);
}
.declaracion .wrap{position:relative;z-index:2;}
.declaracion-texto{
  font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.16;letter-spacing:-.028em;
  max-width:19ch;margin:0;
}
.declaracion-texto span{color:var(--azul-claro);}

/* ---------- vitrina de materiales (filas alternadas) ---------- */
.mat-lista{border-top:1px solid var(--linea);}
.mat-fila{
  display:grid;grid-template-columns:80px 1fr 1fr;align-items:center;gap:clamp(24px,4vw,56px);
  padding:clamp(30px,4vw,50px) 0;border-bottom:1px solid var(--linea);
  text-decoration:none;color:inherit;transition:background .3s var(--ease);
}
.mat-fila:hover{background:var(--hueso);}
.mat-fila:nth-child(even) .mat-img{order:1;}
.mat-fila:nth-child(even) .mat-info{order:2;}
.mat-num{
  font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--azul);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.mat-info h3{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.024em;margin-bottom:12px;}
.mat-info h3 span{color:var(--gris-500);font-weight:600;}
.mat-info .grados{font-size:.9rem;font-weight:500;color:var(--azul);letter-spacing:.004em;
  font-variant-numeric:tabular-nums;margin-bottom:10px;display:block;}
.mat-info p{color:var(--gris-600);font-size:1rem;margin:0;max-width:44ch;}
.mat-img{
  position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--hueso);
  aspect-ratio:16/10;
}
.mat-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--ease);transform:scale(1.16);will-change:transform;
}
.mat-fila:hover .mat-img img{transform:scale(1.2) !important;}
.mat-img .cortina{
  position:absolute;inset:0;z-index:2;background:var(--marino);
  transform:translateX(0%);will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .mat-img .cortina{display:none;}
  .mat-img img{transform:none !important;}
}

/* ---------- botón magnético ---------- */
.boton{will-change:transform;}
@media (max-width:760px){
  .mat-fila{grid-template-columns:1fr !important;gap:18px;}
  .mat-fila .mat-img,.mat-fila .mat-info{order:initial !important;}
  .mat-num{order:-1;}
}

/* ---------- corte CNC monumental ---------- */
.corte-monumental{background:var(--marino);color:#fff;padding:0;position:relative;}
.corte-monumental-media{position:relative;width:100%;height:clamp(420px,72vh,760px);overflow:hidden;}
.corte-monumental-media img{
  position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;display:block;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){.corte-monumental-media img{transform:none !important;}}
.corte-monumental-media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, var(--marino) 0%, rgba(10,19,48,.86) 22%, rgba(10,19,48,.34) 52%, rgba(10,19,48,.12) 74%, rgba(10,19,48,.35) 100%);
}
.corte-monumental-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(40px,5vw,64px);
}
.corte-monumental-overlay h2{color:#fff;max-width:16ch;}
.corte-monumental-overlay h2 em{font-style:normal;color:var(--azul-claro);}
.corte-monumental-overlay .plomo{color:#B9C2D8;margin-top:22px;max-width:56ch;}
.corte-monumental .pasos,.corte-monumental .caps{padding-top:var(--sec);}
.corte-monumental .caps{padding-top:clamp(34px,4vw,52px);padding-bottom:var(--sec);}
.corte-monumental-overlay .etiqueta{color:#fff;}
.corte-monumental .paso .num{color:#fff;border-color:rgba(255,255,255,.25);}
.corte-monumental .paso p{color:#fff;}

/* ---------- banner interior ---------- */
.banner{color:#fff;padding:clamp(78px,9vw,120px) 0 clamp(66px,8vw,100px);
  position:relative;overflow:hidden;
  background:
    linear-gradient(96deg, rgba(5,9,22,.96) 0%, rgba(6,12,30,.9) 40%, rgba(8,17,42,.72) 68%, rgba(10,22,56,.55) 100%),
    var(--marino) url('img/hero.jpg') center/cover no-repeat;}
.banner::after{content:"";position:absolute;top:-20%;right:-140px;width:520px;height:150%;
  background:linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.05) 48% 58%,transparent 58%);
  pointer-events:none;}
.banner .wrap{position:relative;z-index:2;}
.banner h1{color:#fff;font-size:clamp(2.4rem,4.8vw,3.7rem);max-width:20ch;}
.banner .plomo{color:#A9B2C9;margin-top:22px;}
.banner .etiqueta{color:var(--azul-claro);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
  .boton,.btn-fila{background-position:0 0 !important;}
  .reveal{opacity:1 !important;transform:none !important;}
}

/* el salto a la tabla de grados no queda bajo el encabezado pegajoso */
#grados,#materiales,#proceso{scroll-margin-top:88px;}
@media (max-width:820px){#grados,#materiales,#proceso{scroll-margin-top:74px;}}