:root{
  --blue:#061a3f;
  --blue2:#0b2e73;
  --orange:#ff6b00;
  --orange2:#ff9a22;
  --dark:#050914;
  --white:#ffffff;
  --muted:#cbd5e1;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--dark);
  color:white;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{max-width:1240px;margin:auto;padding:0 24px}

.top-line{
  background:#020617;
  color:#e2e8f0;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.top-line .container{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:10px;
  padding-bottom:10px
}

.header{
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(90deg,#06142f,#09255b 60%,#071226);
  border-bottom:4px solid var(--orange);
  box-shadow:0 16px 36px rgba(0,0,0,.42)
}
.header-inner{
  min-height:118px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px
}
.logo-box{
  display:flex;
  align-items:center;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))
}
.logo-box img{
  height:112px;
  width:auto;
  max-width:310px;
  object-fit:contain
}
.nav{
  display:flex;
  gap:22px;
  align-items:center;
  font-weight:900;
  font-size:14px;
  letter-spacing:.4px;
  text-transform:uppercase
}
.nav a{
  position:relative;
  padding:8px 0;
  color:#f8fafc
}
.nav a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:0;
  background:var(--orange);
  transition:.25s
}
.nav a:hover:after{width:100%}
.header-btn{
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  padding:16px 26px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 14px 35px rgba(255,107,0,.35)
}

.hero{
  position:relative;
  min-height:calc(100vh - 118px);
  overflow:hidden;
  background:#061a3f
}
.hero-bg{
  position:absolute;
  inset:0;
  background:url('../img/empresa/flyer-ferretear.jpg') center right/cover no-repeat;
  transform:scale(1.03)
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 18%,rgba(255,107,0,.32),transparent 28%),
    linear-gradient(105deg,rgba(6,26,63,.98) 0%,rgba(6,26,63,.90) 45%,rgba(5,9,20,.42) 100%)
}
.hero:after{
  content:"";
  position:absolute;
  right:-160px;
  top:0;
  width:44%;
  height:100%;
  background:linear-gradient(135deg,transparent 0%,rgba(255,107,0,.78) 50%,transparent 51%);
  opacity:.85
}
.hero-grid{
  position:relative;
  z-index:2;
  min-height:calc(100vh - 118px);
  display:grid;
  grid-template-columns:1fr 340px;
  gap:40px;
  align-items:center;
  padding-top:60px;
  padding-bottom:105px
}
.badge{
  display:inline-block;
  color:#ffd7b0;
  background:rgba(255,107,0,.14);
  border:1px solid rgba(255,107,0,.65);
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:1px
}
.hero h1{
  margin:24px 0 22px;
  max-width:850px;
  font-size:clamp(48px,7.2vw,94px);
  line-height:.9;
  letter-spacing:-3px;
  text-transform:uppercase
}
.hero h1 span{color:var(--orange2)}
.hero p{
  max-width:720px;
  color:#e2e8f0;
  font-size:21px;
  line-height:1.5
}
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px
}
.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 24px;
  border-radius:999px;
  font-weight:900;
  text-transform:uppercase;
  box-shadow:0 16px 35px rgba(0,0,0,.25)
}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange2));}
.btn-secondary{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.btn-secondary.dark{background:#061a3f}

.hero-panel{
  background:rgba(2,6,23,.72);
  border:1px solid rgba(255,255,255,.16);
  border-bottom:5px solid var(--orange);
  border-radius:28px;
  padding:24px;
  backdrop-filter:blur(10px);
  box-shadow:0 25px 60px rgba(0,0,0,.36)
}
.panel-title{
  font-weight:900;
  font-size:18px;
  margin-bottom:18px;
  text-align:center
}
.brand-chip{
  padding:18px;
  border-radius:12px;
  margin:12px 0;
  font-size:30px;
  font-weight:950;
  text-align:center;
  letter-spacing:.5px
}
.brand-chip.orange{background:#ff6b00;color:#101010}
.brand-chip.black{background:#080808;color:#ff6b00;border:1px solid rgba(255,255,255,.1)}
.mini-card{
  margin-top:18px;
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:18px
}
.mini-card strong{display:block;color:var(--orange2);font-size:20px}
.mini-card span{display:block;color:#dbeafe;margin-top:8px}

.hero-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#030712;
  border-top:1px solid rgba(255,255,255,.12)
}
.hero-bottom div{
  padding:22px;
  text-align:center;
  font-weight:900;
  text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.14)
}

.section{padding:95px 0}
.section-head{text-align:center;margin-bottom:48px}
.section-head span,.empresa-text span,.service-content span,.contacto span{
  color:var(--orange2);
  font-weight:950;
  letter-spacing:1.1px;
  text-transform:uppercase
}
.section-head h2,.empresa-text h2,.service-content h2,.contacto h2{
  margin:10px 0 14px;
  font-size:clamp(36px,4.6vw,62px);
  line-height:1;
  text-transform:uppercase
}
.section-head p{
  color:var(--muted);
  max-width:760px;
  margin:auto;
  font-size:18px;
  line-height:1.55
}
.soluciones{
  background:linear-gradient(180deg,#050914,#071a3f)
}
.solution-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.solution-card{
  position:relative;
  min-height:190px;
  padding:26px;
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.13);
  overflow:hidden;
  box-shadow:0 25px 50px rgba(0,0,0,.22)
}
.solution-card:before{
  content:"";
  position:absolute;
  right:-35px;
  top:-35px;
  width:120px;
  height:120px;
  background:rgba(255,107,0,.16);
  border-radius:50%
}
.solution-card b{
  font-size:38px;
  display:block;
  margin-bottom:22px
}
.solution-card h3{
  margin:0;
  font-size:20px;
  text-transform:uppercase;
  line-height:1.2
}

.empresa{
  background:
    linear-gradient(90deg,rgba(5,9,20,.96),rgba(5,9,20,.82)),
    url('../img/empresa/frente-local.jpg') center/cover no-repeat
}
.empresa-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:46px;
  align-items:center
}
.photo-collage{
  position:relative;
  min-height:520px
}
.photo-main,.photo-small{
  position:absolute;
  object-fit:cover;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 70px rgba(0,0,0,.45)
}
.photo-main{
  left:0;
  top:0;
  width:82%;
  height:390px
}
.photo-small{
  right:0;
  bottom:0;
  width:55%;
  height:300px;
  border-bottom:6px solid var(--orange)
}
.empresa-text p{
  color:#dbeafe;
  font-size:19px;
  line-height:1.65
}
.empresa-text ul{
  margin:26px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:14px
}
.empresa-text li{
  font-weight:850;
  color:#f8fafc;
  background:rgba(255,255,255,.08);
  border-left:4px solid var(--orange);
  padding:16px 18px;
  border-radius:14px
}

.b2b{
  padding:90px 0;
  background:#071a3f
}
.b2b-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.b2b-card{
  min-height:360px;
  border-radius:32px;
  padding:38px;
  background:linear-gradient(135deg,#0b2e73,#050914);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 65px rgba(0,0,0,.28)
}
.b2b-card.orange-card{
  background:linear-gradient(135deg,#ff6b00,#ff9a22);
  color:#06142f
}
.b2b-card span{
  font-size:42px;
  font-weight:950
}
.b2b-card h2{
  font-size:42px;
  margin:18px 0 12px;
  text-transform:uppercase
}
.b2b-card p{
  font-size:20px;
  line-height:1.55;
  font-weight:750
}

.service{
  position:relative;
  min-height:570px;
  display:flex;
  align-items:center;
  background:url('../img/empresa/servicio-tecnico-frente.jpg') center/cover no-repeat
}
.service-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,9,20,.95),rgba(6,26,63,.82),rgba(255,107,0,.25))
}
.service-content{
  position:relative;
  z-index:2
}
.service-content h2{
  max-width:860px
}
.service-content p{
  max-width:720px;
  color:#e2e8f0;
  font-size:21px;
  line-height:1.55;
  margin-bottom:30px
}

.marcas{
  padding:90px 0;
  background:linear-gradient(180deg,#050914,#071a3f)
}
.brand-wall{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px
}
.brand-wall div{
  min-height:110px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-bottom:5px solid var(--orange);
  font-size:22px;
  font-weight:950;
  text-transform:uppercase
}

.contacto{
  padding:100px 0;
  background:#020617
}
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:40px;
  align-items:start
}
.contacto p{
  color:#dbeafe;
  font-size:20px;
  line-height:1.55
}
.contact-box{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.14);
  border-radius:32px;
  padding:34px;
  box-shadow:0 28px 65px rgba(0,0,0,.28)
}
.contact-box h3{
  margin:0 0 12px;
  color:var(--orange2);
  text-transform:uppercase
}
.contact-box a{
  display:block;
  font-size:42px;
  font-weight:950;
  margin:8px 0
}
.contact-box hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.14);
  margin:22px 0
}

.footer{
  background:#030712;
  border-top:1px solid rgba(255,255,255,.1);
  padding:26px 0;
  text-align:center;
  color:#cbd5e1;
  font-weight:800
}
.wsp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:200;
  background:#22c55e;
  color:white;
  padding:17px 24px;
  border-radius:999px;
  font-weight:950;
  box-shadow:0 18px 45px rgba(34,197,94,.38)
}

@media(max-width:980px){
  .header-inner{min-height:92px}
  .logo-box img{height:82px;max-width:230px}
  .nav{display:none}
  .header-btn{padding:12px 16px}
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding-top:70px}
  .hero-panel{display:none}
  .hero:after{display:none}
  .hero-bottom{position:relative;grid-template-columns:1fr}
  .solution-grid,.b2b-grid,.contact-grid,.empresa-grid{grid-template-columns:1fr}
  .brand-wall{grid-template-columns:1fr 1fr}
  .photo-collage{min-height:auto;display:grid;gap:16px}
  .photo-main,.photo-small{position:relative;width:100%;height:280px;left:auto;right:auto;top:auto;bottom:auto}
  .hero h1{font-size:44px;letter-spacing:-1px}
  .contact-box a{font-size:30px}
}