/* ==========================================================================
   VITOOLSA INDUSTRIAL — Sistema de diseño "Ruta 02 · Ingeniería Plex"
   Crezco360 · 2026
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Color */
  --navy:#0B2545;
  --navy-deep:#07162C;
  --cobalto:#2A6FDB;
  --cobalto-dark:#1D57B0;
  --ambar:#FFB400;
  --ambar-dark:#E85D04;
  --grafito:#0F1623;
  --tinta:#28323F;
  --gris:#5B6B7F;
  --gris-suave:#7C93B3;
  --blanco:#FFFFFF;
  --plano:#EEF1F5;
  --plano-alt:#F6F8FA;
  --linea:rgba(15,22,35,.12);
  --linea-fina:rgba(15,22,35,.07);
  --linea-tec:rgba(42,111,219,.15);
  --linea-oscura:rgba(122,147,179,.2);
  --texto-oscuro:#C8D3E2;

  /* Tipografía */
  --f-title:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --max:1200px;
  --nav-h:72px;
  --r:2px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px);}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;}
img{height:auto; display:block;}
a{color:var(--cobalto); text-decoration:none;}
a:hover{color:var(--cobalto-dark);}
p{margin:0 0 1em;}
ul{margin:0 0 1em; padding-left:1.15em;}
li{margin-bottom:.4em;}
table{border-collapse:collapse; width:100%;}

/* ---------- 3. Tipografía ---------- */
h1,h2,h3,h4{
  font-family:var(--f-title);
  text-transform:uppercase;
  color:var(--grafito);
  margin:0 0 .4em;
  letter-spacing:.01em;
}
h1{font-weight:700; font-size:clamp(38px,6vw,68px); line-height:.94;}
h2{font-weight:600; font-size:clamp(28px,4vw,42px); line-height:.98;}
h3{font-weight:600; font-size:clamp(20px,2.4vw,26px); line-height:1.05;}
h4{font-weight:600; font-size:18px; line-height:1.12; letter-spacing:.02em;}
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cobalto);
  margin:0 0 16px;
  display:block;
}
.eyebrow--ambar{color:var(--ambar);}
.eyebrow--gris{color:var(--gris-suave);}
.lead{font-size:17px; line-height:1.62; color:var(--gris);}
.mono{font-family:var(--f-mono); font-size:13px; letter-spacing:.02em;}
.caption{font-size:13px; line-height:1.5; color:var(--gris);}
strong{font-weight:600;}

/* ---------- 4. Layout ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.wrap--narrow{max-width:880px;}
.section{padding:88px 0;}
.section--tight{padding:60px 0;}
.section--plano{background:var(--plano-alt); border-top:1px solid var(--linea-fina); border-bottom:1px solid var(--linea-fina);}
.section--dark{background:var(--navy); color:var(--texto-oscuro);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark .lead{color:var(--texto-oscuro);}
.section-head{max-width:760px; margin-bottom:44px;}
.section-head p{color:var(--gris); font-size:17px; line-height:1.62; margin-bottom:0;}
.section--dark .section-head p{color:var(--texto-oscuro);}

.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.rule{height:1px; background:var(--linea); border:0; margin:0;}

/* ---------- 5. Logo ---------- */
.logo{display:inline-flex; align-items:center; gap:14px; color:inherit;}
.logo__mark{width:38px; height:41px; flex:none;}
.logo__bar{width:2px; height:32px; background:rgba(255,255,255,.22); flex:none;}
.logo--light .logo__bar{background:var(--linea);}
.logo__text{line-height:1;}
.logo__word{
  font-family:var(--f-title); font-weight:700; text-transform:uppercase;
  font-size:26px; line-height:.82; letter-spacing:.01em; color:#fff;
  display:flex; align-items:baseline;
}
.logo--light .logo__word{color:var(--grafito);}
.logo__o{display:inline-block; width:.54em; height:.78em;}
.logo__sub{
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.44em;
  color:var(--gris-suave); margin-top:5px; padding-left:2px;
}
.logo--light .logo__sub{color:var(--gris);}

/* ---------- 6. Navegación ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--navy);
  border-bottom:1px solid var(--linea-oscura);
}
.nav__inner{
  max-width:var(--max); margin:0 auto; padding:0 24px;
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__links{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0;}
.nav__links li{margin:0;}
.nav__links a{
  font-family:var(--f-title); font-weight:600; text-transform:uppercase;
  font-size:15px; letter-spacing:.05em; color:#C8D3E2;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s;
  white-space:nowrap;
}
.nav__links a:hover{color:#fff; border-bottom-color:var(--ambar);}
.nav__links a.is-active{color:#fff; border-bottom-color:var(--ambar);}
.nav__cta{display:flex; align-items:center; gap:12px;}
.nav__toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.28);
  width:42px; height:38px; border-radius:var(--r); cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav__toggle span{display:block; width:18px; height:2px; background:#fff; position:relative;}
.nav__toggle span::before,.nav__toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:#fff;
}
.nav__toggle span::before{top:-6px;}
.nav__toggle span::after{top:6px;}

/* ---------- 7. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-title); font-weight:600; text-transform:uppercase;
  font-size:16px; letter-spacing:.08em; line-height:1;
  padding:13px 24px; border-radius:var(--r); border:1.5px solid transparent;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .12s;
  text-align:center;
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--ambar); color:var(--navy); border-color:var(--ambar);}
.btn--primary:hover{background:#ffc433; color:var(--navy);}
.btn--navy{background:var(--navy); color:#fff; border-color:var(--navy);}
.btn--navy:hover{background:#14345c; color:#fff;}
.btn--outline{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn--outline:hover{background:var(--navy); color:#fff;}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.btn--ghost:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff;}
.btn--sm{font-size:14px; padding:9px 16px; letter-spacing:.06em;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- 8. Badges ---------- */
.badge{
  display:inline-block; font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r);
  background:var(--plano); color:var(--navy); border:1px solid var(--linea-tec);
  white-space:nowrap;
}
.badge--ambar{background:rgba(255,180,0,.14); color:#8a5f00; border-color:rgba(255,180,0,.45);}
.badge--cobalto{background:rgba(42,111,219,.1); color:var(--cobalto-dark); border-color:rgba(42,111,219,.3);}
.badge--dark{background:rgba(255,255,255,.07); color:#9AAECF; border-color:rgba(122,147,179,.28);}
.badge-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}

/* ---------- 9. Tarjetas ---------- */
.card{
  background:#fff; border:1px solid var(--linea-tec); border-radius:var(--r);
  padding:28px; transition:border-color .2s, box-shadow .2s, transform .2s;
  display:flex; flex-direction:column;
}
.card--link:hover{border-color:var(--cobalto); box-shadow:0 6px 20px rgba(11,37,69,.09); transform:translateY(-2px);}
.card__icon{width:48px; height:48px; margin-bottom:18px;}
.card h3{margin-bottom:10px;}
.card p{font-size:14.5px; line-height:1.6; color:var(--gris); margin-bottom:16px;}
.card__more{
  margin-top:auto; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cobalto);
}
.card--dark{background:rgba(255,255,255,.04); border-color:rgba(122,147,179,.22);}
.card--dark h3,.card--dark h4{color:#fff;}
.card--dark p{color:var(--texto-oscuro);}

/* Tarjeta técnica de producto */
.spec-card{
  background:#fff; border:1px solid var(--linea-tec); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.spec-card__head{
  padding:18px 22px; background:var(--plano-alt); border-bottom:1px solid var(--linea-tec);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.spec-card__ref{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--gris); text-transform:uppercase;}
.spec-card__body{padding:22px; flex:1;}
.spec-card__body p:last-child{margin-bottom:0;}

/* ---------- 10. Tablas técnicas ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--linea-tec); border-radius:var(--r); background:#fff;}
.spec-table{font-family:var(--f-mono); font-size:13px; min-width:560px;}
.spec-table th{
  background:var(--navy); color:#fff; text-align:left; padding:12px 16px;
  font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.spec-table td{padding:12px 16px; border-top:1px solid var(--linea-fina); color:var(--tinta); vertical-align:top;}
.spec-table tbody tr:nth-child(even){background:var(--plano-alt);}
.spec-table td:first-child{font-weight:600; color:var(--navy); white-space:nowrap;}

/* Lista de datos clave */
.datalist{list-style:none; padding:0; margin:0;}
.datalist li{
  display:flex; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--linea-fina);
  font-family:var(--f-mono); font-size:12.5px; margin:0;
}
.datalist li:last-child{border-bottom:0;}
.datalist dt,.datalist .k{color:var(--gris); text-transform:uppercase; letter-spacing:.08em; font-size:11px;}
.datalist .v{color:var(--navy); font-weight:600; text-align:right;}

/* ---------- 11. Hero ---------- */
.hero{position:relative; background:var(--navy); overflow:hidden;}
.hero__pattern{position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none;}
.hero__glow{
  position:absolute; top:-20%; right:-10%; width:60%; height:140%;
  background:radial-gradient(ellipse at center, rgba(42,111,219,.28) 0%, rgba(11,37,69,0) 68%);
  pointer-events:none;
}
.hero__inner{position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:96px 24px 88px;}
.hero__inner--sm{padding:70px 24px 60px;}
.hero h1{color:#fff; max-width:16ch;}
.hero h1 .accent{color:var(--ambar);}
.hero p{max-width:600px; font-size:17.5px; line-height:1.6; color:var(--texto-oscuro); margin-top:24px;}
.hero .btn-row{margin-top:34px;}

/* Banda de marcas */
.brandband{
  position:relative; z-index:2; background:rgba(7,22,44,.75);
  border-top:1px solid var(--linea-oscura);
}
.brandband__inner{
  max-width:var(--max); margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; gap:32px; flex-wrap:wrap;
}
.brandband__label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-suave); white-space:nowrap; flex:none;
}
.brandband__list{
  display:flex; align-items:center; gap:34px; flex:1;
  justify-content:space-between; flex-wrap:wrap;
}
.brandband__list span{
  font-family:var(--f-title); font-weight:700; font-size:21px;
  letter-spacing:.06em; color:#9AAECF; white-space:nowrap;
}

/* ---------- 12. Breadcrumb ---------- */
.crumb{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-suave); margin-bottom:18px;
}
.crumb a{color:var(--gris-suave);}
.crumb a:hover{color:#fff;}

/* ---------- 13. Pilares / valor ---------- */
.pillar{border-left:2px solid var(--ambar); padding-left:20px;}
.pillar h4{margin-bottom:8px;}
.pillar p{font-size:14.5px; line-height:1.6; color:var(--gris); margin:0;}
.section--dark .pillar p{color:var(--texto-oscuro);}

.quote{
  font-family:var(--f-title); font-weight:600; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,38px); line-height:1.04; color:#fff;
  border-left:3px solid var(--ambar); padding-left:26px; margin:0;
}

/* ---------- 14. Pasos numerados ---------- */
.steps{counter-reset:step; display:grid; gap:20px;}
.step{
  position:relative; padding:26px 26px 26px 78px;
  background:#fff; border:1px solid var(--linea-tec); border-radius:var(--r);
}
.step::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; left:26px; top:24px;
  font-family:var(--f-mono); font-size:20px; font-weight:600; color:var(--cobalto);
}
.step h4{margin-bottom:8px;}
.step p{font-size:14.5px; line-height:1.6; color:var(--gris); margin:0;}

/* ---------- 15. Timeline ---------- */
.timeline{border-left:2px solid var(--linea-tec); padding-left:28px; margin-left:6px;}
.timeline__item{position:relative; padding-bottom:34px;}
.timeline__item:last-child{padding-bottom:0;}
.timeline__item::before{
  content:''; position:absolute; left:-35px; top:6px;
  width:12px; height:12px; border-radius:50%; background:var(--ambar);
  box-shadow:0 0 0 3px #fff;
}
.timeline__year{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--cobalto); margin-bottom:6px;}
.timeline__item p{font-size:14.5px; color:var(--gris); margin:0;}

/* ---------- 16. Tabs ---------- */
.tabs__nav{
  display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--linea-tec); margin-bottom:28px;
}
.tabs__btn{
  font-family:var(--f-title); font-weight:600; text-transform:uppercase; font-size:15px;
  letter-spacing:.05em; color:var(--gris); background:transparent; border:0;
  border-bottom:2px solid transparent; padding:12px 18px; cursor:pointer; transition:color .18s, border-color .18s;
}
.tabs__btn:hover{color:var(--navy);}
.tabs__btn.is-active{color:var(--navy); border-bottom-color:var(--ambar);}
.tabs__panel{display:none;}
.tabs__panel.is-active{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

/* ---------- 17. Formulario ---------- */
.form{display:grid; gap:18px;}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris);
}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:15px; color:var(--tinta);
  padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r);
  background:#fff; transition:border-color .18s, box-shadow .18s; width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--cobalto); box-shadow:0 0 0 3px rgba(42,111,219,.14);
}
.field textarea{resize:vertical; min-height:120px;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#D1453B;}
.field__error{font-family:var(--f-mono); font-size:11px; color:#D1453B; display:none;}
.field.has-error .field__error{display:block;}
.form__note{font-size:12.5px; color:var(--gris); margin:0;}
.form-ok{
  display:none; padding:16px 18px; border-radius:var(--r);
  background:rgba(61,163,93,.1); border:1px solid rgba(61,163,93,.35);
  font-family:var(--f-mono); font-size:12.5px; color:#1F8A5B;
}
.form-ok.is-visible{display:block;}

/* Formulario sobre fondo oscuro */
.section--dark .field label{color:var(--gris-suave);}
.section--dark .field input,.section--dark .field select,.section--dark .field textarea{
  background:rgba(255,255,255,.06); border-color:rgba(122,147,179,.3); color:#fff;
}
.section--dark .field input::placeholder,.section--dark .field textarea::placeholder{color:rgba(200,211,226,.5);}
.section--dark .form__note{color:var(--gris-suave);}

/* ---------- 18. Contacto ---------- */
.contact-card{
  background:#fff; border:1px solid var(--linea-tec); border-radius:var(--r); padding:26px;
}
.contact-card h4{margin-bottom:4px;}
.contact-card__role{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cobalto); margin-bottom:16px;}
.contact-card a{display:block; font-size:14.5px; margin-bottom:6px; word-break:break-word;}

/* ---------- 19. Sectores ---------- */
.sector{
  padding:22px; background:rgba(255,255,255,.04);
  border:1px solid rgba(122,147,179,.2); border-radius:var(--r);
}
.sector h4{color:#fff; margin-bottom:8px;}
.sector p{font-size:13.5px; line-height:1.55; color:var(--texto-oscuro); margin:0;}

/* ---------- 20. Nota / callout ---------- */
.callout{
  border-left:3px solid var(--cobalto); background:var(--plano-alt);
  padding:20px 24px; border-radius:0 var(--r) var(--r) 0;
}
.callout p:last-child{margin-bottom:0;}
.callout--ambar{border-left-color:var(--ambar); background:rgba(255,180,0,.07);}
.callout__title{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cobalto); margin-bottom:8px;
}
.callout--ambar .callout__title{color:#8a5f00;}

/* ---------- 21. CTA global ---------- */
.cta-band{background:var(--navy-deep); position:relative; overflow:hidden;}
.cta-band__inner{
  position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:70px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-band h2{color:#fff; margin-bottom:10px;}
.cta-band p{color:var(--texto-oscuro); margin:0; max-width:52ch;}

/* ---------- 22. Footer ---------- */
.footer{background:var(--navy); color:var(--texto-oscuro); padding:64px 0 0;}
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px;
  padding-bottom:44px;
}
.footer h4{color:#fff; font-size:15px; letter-spacing:.06em; margin-bottom:16px;}
.footer ul{list-style:none; padding:0; margin:0;}
.footer li{margin-bottom:9px;}
.footer a{color:var(--texto-oscuro); font-size:14px;}
.footer a:hover{color:var(--ambar);}
.footer p{font-size:14px; line-height:1.6; color:var(--texto-oscuro);}
.footer__bottom{
  border-top:1px solid var(--linea-oscura); padding:20px 0;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--gris-suave);
}

/* ---------- 23. WhatsApp flotante ---------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:200;
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#0B2545; border-radius:40px;
  padding:12px 18px; box-shadow:0 6px 20px rgba(0,0,0,.22);
  font-family:var(--f-title); font-weight:600; text-transform:uppercase;
  font-size:14px; letter-spacing:.06em; transition:transform .18s, box-shadow .18s;
}
.wa:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28); color:#0B2545;}
.wa svg{width:20px; height:20px; flex:none;}

/* ---------- 24. Utilidades ---------- */
.mb-0{margin-bottom:0;}
.mt-32{margin-top:32px;}
.mt-48{margin-top:48px;}
.center{text-align:center;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- 25. Responsive ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr; gap:32px;}
  .nav__links{gap:18px;}
  .nav__links a{font-size:14px;}
}
@media (max-width:900px){
  .nav__toggle{display:inline-flex;}
  .nav__links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy-deep); border-bottom:1px solid var(--linea-oscura);
    padding:8px 24px 20px; display:none;
  }
  .nav__links.is-open{display:flex;}
  .nav__links a{
    display:block; padding:13px 0; font-size:16px;
    border-bottom:1px solid rgba(122,147,179,.14);
  }
  .nav__links a:hover,.nav__links a.is-active{border-bottom-color:rgba(122,147,179,.14);}
  .nav__cta .btn{display:none;}
  .nav{position:sticky;}
}
@media (max-width:768px){
  .section{padding:60px 0;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .form__row{grid-template-columns:1fr;}
  .hero__inner{padding:64px 24px 56px;}
  .brandband__list{gap:20px; justify-content:flex-start;}
  .brandband__list span{font-size:18px;}
  .footer__grid{grid-template-columns:1fr;}
  .cta-band__inner{padding:52px 24px;}
  .wa span{display:none;}
  .wa{padding:14px; border-radius:50%;}
}
@media (max-width:420px){
  .btn{font-size:15px; padding:12px 18px;}
  .btn-row{gap:10px;}
  .btn-row .btn{flex:1 1 100%;}
}

/* ---------- 26. Impresión ---------- */
@media print{
  .nav,.wa,.cta-band,.footer{display:none;}
  body{color:#000;}
}