:root{
  --red:#004DB7;       /* brand blue (from logo) — kept variable name so all existing rules below still work */
  --red-dark:#00306E;  /* deeper navy-blue for hover states */
  --red-bright:#2F8CFF;/* brighter blue for accents on dark backgrounds */
  --black:#0B1220;     /* deep navy-black */
  --steel:#3C4A5C;
  --white:#F5F8FC;
  --amber:#FF8A3D;
  --gap:clamp(1.2rem,3vw,2.5rem);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--black);
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.18em;
  color:var(--red);text-transform:uppercase;font-weight:600;margin-bottom:.6rem;
}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--red);display:inline-block;transform:skewX(-20deg);}
.section-title{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;margin-bottom:1rem;}
.btn{
  display:inline-block;font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;font-size:.9rem;padding:.9rem 2rem;
  background:var(--red);color:#fff;border:none;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.btn::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .5s ease;
}
.btn:hover::before{left:100%;}
.btn:hover{background:var(--red-dark);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,77,183,.35);}
.btn.alt{background:transparent;border:2px solid #fff;color:#fff;clip-path:none;padding:.8rem 1.9rem;}
.btn.alt:hover{background:#fff;color:var(--black);box-shadow:none;}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}

/* ===== HEADER ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,18,32,0.92);backdrop-filter:blur(6px);
  border-bottom:3px solid var(--red-bright);
  transition:background .3s ease;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.6rem clamp(1rem,4vw,2.5rem);gap:1.2rem;flex-wrap:wrap;}
.logo-link{display:flex;align-items:center;gap:.7rem;order:1;}
.logo-img{height:62px;width:auto;}
.brand-title{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:1.3rem;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;white-space:nowrap;
}
.nav-links{display:flex;gap:2rem;list-style:none;order:2;}
.nav-links a{color:#fff;font-family:'Oswald',sans-serif;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;position:relative;padding-bottom:4px;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red-bright);transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}

.header-contact{display:flex;align-items:center;gap:1.2rem;order:3;}
.nav-phone{color:#fff;font-family:'Oswald',sans-serif;font-weight:600;display:flex;align-items:center;gap:.4rem;white-space:nowrap;transition:color .2s;font-size:.95rem;}
.nav-phone:hover{color:var(--amber);}
.header-social{display:flex;gap:.6rem;}
.header-social a{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.3);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.header-social a:hover{background:var(--red-bright);border-color:var(--red-bright);}
.header-social svg{width:15px;height:15px;}

.burger{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;order:4;}

@media (max-width:900px){
  .nav-wrap{justify-content:space-between;}
  .logo-link{order:1;}
  .burger{display:block;order:2;}
  .header-contact{
    order:3;width:100%;justify-content:center;flex-wrap:wrap;
    padding-top:.6rem;margin-top:.3rem;border-top:1px solid rgba(255,255,255,.1);
  }
  .nav-links{
    order:4;
    position:absolute;top:100%;left:0;right:0;background:rgba(20,20,26,.98);
    flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .nav-links.mobile-open{max-height:400px;border-bottom:3px solid var(--red-bright);}
  .nav-links li{border-top:1px solid rgba(255,255,255,.08);}
  .nav-links a{display:block;padding:1rem clamp(1rem,4vw,2.5rem);}
  .logo-img{height:48px;}
  .brand-title{font-size:1.05rem;}
}

/* ===== SLIDER =====
   Rebuilt for two guarantees at every screen size:
   1. Full-bleed width - 100vw + negative margins forces the slider to
      span the full viewport edge-to-edge, regardless of any parent
      padding/margin/constraint (more robust than width:100%, which can
      be broken by things outside this stylesheet).
   2. Full, uncropped image - aspect-ratio locks the container to the
      exact same 1920x960 (2:1) shape as the recommended banner size,
      so the image is always shown in full at every width, never cropped. */
.slider{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  aspect-ratio:1920/960;
  overflow:hidden;
  background:var(--black);
}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s ease;z-index:1;}
.slide.active{opacity:1;visibility:visible;z-index:2;}
.slide-bg{
  position:absolute;inset:0;background-size:contain;background-position:center;background-repeat:no-repeat;
  transform:scale(0.94);transition:transform 8s ease-out;
}
/* Gentle grow-in effect that never crops: scaling UP TO 1 (not past it)
   means the full image stays visible the entire time, since contain
   never crops - a smaller-than-1 scale just shows a bit more of the
   dark backdrop around the edges, which shrinks to zero as it reaches 1. */
.slide.active .slide-bg{transform:scale(1);animation:kenburns 9s ease-in-out forwards;}
@keyframes kenburns{
  0%{transform:scale(0.94);}
  100%{transform:scale(1);}
}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,14,.88) 8%,rgba(10,10,14,.4) 55%,rgba(10,10,14,.6) 100%);z-index:1;}
.slide-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:640px;padding:0 clamp(1.2rem,6vw,4rem);}
.slide-content > *{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.slide.active .slide-content > *{opacity:1;transform:translateY(0);}
.slide.active .slide-content .eyebrow{transition-delay:.15s;}
.slide.active .slide-content h2{transition-delay:.3s;}
.slide.active .slide-content p{transition-delay:.45s;}
.slide.active .slide-content .slide-btns{transition-delay:.6s;}
.slide-content .eyebrow{color:var(--amber);}
.slide-content .eyebrow::before{background:var(--amber);}
.slide-content h2{color:#fff;font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.05;margin-bottom:1rem;}
.slide-content h2 em{font-style:normal;color:var(--red-bright);}
.slide-content p{color:#e7e5e0;max-width:480px;margin-bottom:1.8rem;font-size:1.05rem;}
.slide-btns{display:flex;gap:1rem;flex-wrap:wrap;}
.slider-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:.7rem;z-index:3;}
.dot{width:38px;height:5px;background:rgba(255,255,255,.3);cursor:pointer;position:relative;overflow:hidden;}
.dot i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red-bright);}
.dot.active i{animation:dotfill 6s linear forwards;}
@keyframes dotfill{from{width:0;}to{width:100%;}}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:rgba(20,20,26,.45);border:1px solid rgba(255,255,255,.4);color:#fff;
  width:46px;height:46px;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.slider-arrow:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-50%) scale(1.08);}
.slider-arrow.prev{left:20px;}
.slider-arrow.next{right:20px;}
@media (max-width:768px){
  /* Text overlay needs more vertical room than a 2:1 image naturally
     has on a narrow phone screen, so on mobile the slider shows the
     full image only (no title/description/buttons on top of it) -
     aspect-ratio keeps the image itself 100% visible, never cropped. */
  .slide-content{display:none;}
  .slide::after{display:none;} /* that gradient was only for text contrast - no text here, so no need to darken the photo */
  .slider-arrow{width:36px;height:36px;font-size:1.1rem;}

  /* The fixed header floats over the page, so without help the slider
     (which starts at the very top of the document) sits partly behind
     it. Rather than guessing the header's height in CSS (which was
     never quite exact), script.js measures the REAL rendered header
     height in JavaScript and sets this margin-top precisely - see
     adjustMobileSliderOffset() in script.js. That means the slider's
     own box can stay pure aspect-ratio (no extra padding tricks),
     so the image fills it exactly with no gaps, and the arrows
     (vertically centered on this box) land exactly on the image. */
  .slider{margin-top:var(--mobile-header-h, 0px);}
}

/* ===== Scroll-reveal ===== */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ===== WELCOME ===== */
.welcome{padding:clamp(4rem,8vw,6rem) 0;}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center;}
.welcome-text p{color:var(--steel);margin-bottom:1rem;max-width:52ch;}
.welcome-img{position:relative;}
.welcome-img img{width:100%;height:420px;object-fit:cover;}
.welcome-img::before{content:"";position:absolute;top:-18px;left:-18px;width:120px;height:120px;border-top:5px solid var(--red);border-left:5px solid var(--red);}
.welcome-img::after{content:"";position:absolute;bottom:-18px;right:-18px;width:120px;height:120px;border-bottom:5px solid var(--red);border-right:5px solid var(--red);}

/* ===== SERVICES ===== */
.services{background:var(--black);padding:clamp(4rem,8vw,6rem) 0;}
.services .eyebrow{color:var(--amber);}
.services .eyebrow::before{background:var(--amber);}
.services h2{color:#fff;}
.services-sub{color:#b9b8c0;max-width:56ch;margin-bottom:2.5rem;}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.service-card{
  background:#1b1b23;padding:2.4rem 1.8rem;position:relative;overflow:hidden;
  border-top:3px solid var(--red);transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.service-card::before{
  content:"";position:absolute;top:0;right:0;width:70px;height:70px;
  background:var(--red);opacity:.08;clip-path:polygon(100% 0,0 0,100% 100%);
  transition:transform .35s ease;
}
.service-card:hover{transform:translateY(-10px);background:#22222c;box-shadow:0 18px 40px rgba(0,0,0,.4);}
.service-card:hover::before{transform:scale(1.3);}
.service-num{font-family:'Oswald',sans-serif;font-size:.85rem;color:var(--red-bright);letter-spacing:.15em;margin-bottom:1rem;display:block;}
.service-card h3{color:#fff;font-size:1.35rem;margin-bottom:.8rem;}
.service-card p{color:#b9b8c0;font-size:.95rem;}

/* ===== STATS ===== */
.stats{padding:clamp(3rem,6vw,4.5rem) 0;background:var(--red);position:relative;overflow:hidden;}
.stats::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 40px);}
.stats-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center;}
.stat-item{display:flex;flex-direction:column;align-items:center;}
.stat-num{font-family:'Oswald',sans-serif;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;color:#fff;line-height:1;display:inline-block;}
.stat-plus{font-family:'Oswald',sans-serif;font-size:1.4rem;color:#fff;display:inline-block;margin-top:-.6rem;}
.stat-label{color:#ffe0e4;font-family:'Oswald',sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;margin-top:.5rem;}

/* ===== MAP + FORM ===== */
.contact-block{padding:clamp(4rem,8vw,6rem) 0;}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--gap);}
.map-wrap{min-height:420px;position:relative;border:3px solid var(--black);}
.map-wrap iframe{width:100%;height:100%;min-height:420px;border:0;filter:grayscale(25%);}
.form-wrap{background:var(--black);padding:2.4rem;}
.form-wrap h3{color:#fff;font-size:1.5rem;margin-bottom:.4rem;}
.form-wrap p.sub{color:#b9b8c0;margin-bottom:1.6rem;font-size:.92rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.field{position:relative;margin-bottom:1.1rem;}
.form-wrap input, .form-wrap textarea, .form-wrap select{
  width:100%;background:#1b1b23;border:1px solid #3a3a46;color:#fff;
  padding:1rem 1rem .5rem;font-family:'Inter',sans-serif;font-size:.95rem;
  transition:border-color .2s ease;
}
.form-wrap select{padding:.9rem 1rem;}
.form-wrap textarea{resize:vertical;min-height:100px;}
.field label{
  position:absolute;left:1rem;top:.95rem;color:#8a8a94;font-size:.95rem;
  pointer-events:none;transition:all .18s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:.35rem;font-size:.68rem;color:var(--amber);letter-spacing:.05em;text-transform:uppercase;
}
.form-wrap input:focus, .form-wrap textarea:focus, .form-wrap select:focus{outline:none;border-color:var(--red-bright);box-shadow:0 0 0 3px rgba(47,140,255,.25);}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;}
.form-status{margin-top:1rem;font-size:.9rem;min-height:1.2em;}
.form-status.success{color:#7CD992;}
.form-status.error{color:#FF8A8A;}
.submit-btn{display:flex;align-items:center;justify-content:center;}

/* ===== GALLERY ===== */
.gallery{padding:clamp(4rem,8vw,6rem) 0;background:#efece5;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:.8rem;}
.gallery-item{
  position:relative;overflow:hidden;cursor:zoom-in;background:#000;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .4s ease;}
.gallery-item:hover img{transform:scale(1.18) rotate(0.5deg);filter:brightness(.75);}
.gallery-item .cap{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);
  color:#fff;font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.04em;
  opacity:0;transform:translateY(10px);transition:.3s ease;
}
.gallery-item:hover .cap{opacity:1;transform:translateY(0);}
.zoom-icon{
  position:absolute;top:50%;left:50%;width:52px;height:52px;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  background:rgba(0,77,183,.9);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1.4), opacity .3s ease;
  pointer-events:none;
}
.gallery-item:hover .zoom-icon{opacity:1;transform:translate(-50%,-50%) scale(1);}
.zoom-icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.4;}

.link-icon{
  position:absolute;top:12px;right:12px;width:36px;height:36px;
  background:rgba(11,18,32,.72);border:1px solid rgba(255,255,255,.35);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-8px);
  transition:transform .3s ease, opacity .3s ease, background .2s ease, border-color .2s ease;
  z-index:2;
}
.gallery-item:hover .link-icon{opacity:1;transform:translateY(0);}
.link-icon:hover{background:var(--red-bright);border-color:var(--red-bright);}
.link-icon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2;}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,10,14,.95);display:none;align-items:center;justify-content:center;z-index:1000;padding:2rem;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border:3px solid #fff;animation:lbIn .3s ease;}
@keyframes lbIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
.lightbox-close{position:absolute;top:24px;right:32px;color:#fff;font-size:2.2rem;cursor:pointer;background:none;border:none;line-height:1;transition:transform .2s ease;}
.lightbox-close:hover{transform:rotate(90deg);}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2rem;background:none;border:none;cursor:pointer;padding:.5rem 1rem;transition:color .2s ease;}
.lightbox-nav:hover{color:var(--red-bright);}
.lightbox-nav.prev{left:10px;}
.lightbox-nav.next{right:10px;}

/* ===== FOOTER ===== */
footer{background:var(--black);color:#c9c8ce;padding:3.5rem 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid #2a2a34;}
.footer-logo-img{height:40px;width:auto;margin-bottom:1rem;}
.footer-col p, .footer-col a{display:block;color:#c9c8ce;font-size:.92rem;margin-bottom:.7rem;}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:1.1rem;letter-spacing:.05em;}
.footer-col a:hover{color:var(--red-bright);}
.social-row{display:flex;gap:.8rem;margin-top:1rem;}
.social-row a{width:38px;height:38px;border:1px solid #3a3a46;display:flex;align-items:center;justify-content:center;font-size:.9rem;border-radius:50%;transition:background .2s ease, border-color .2s ease;}
.social-row a:hover{background:var(--red-bright);border-color:var(--red-bright);color:#fff;}
.footer-bottom{text-align:center;padding:1.4rem 0;font-size:.82rem;color:#7c7b84;}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .welcome-grid, .contact-grid{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr;gap:2.2rem;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;}
  .footer-grid{grid-template-columns:1fr;gap:2rem;}
  .form-row{grid-template-columns:1fr;}
}
/* ===== FLOATING WHATSAPP ===== */
.float-whatsapp{
  position:fixed;bottom:22px;right:22px;z-index:200;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.7);
  animation:waPulse 2.6s infinite;
}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}