:root{--orange:#ff5419}
.social-bar{height:32px;padding:0 clamp(24px,5vw,78px);display:flex;justify-content:flex-end;align-items:center;gap:22px;background:#05080d;color:#c9ced5;position:relative;z-index:11;width:100%;font-size:.65rem;letter-spacing:.07em}
.social-bar span{color:#727b87;text-transform:uppercase}
.social-bar a:hover{color:var(--orange)}
.header{height:138px;top:0;position:relative;background:#fff;color:var(--ink);border-color:rgba(11,16,24,.12)}
.brand-logo{width:224px;height:128px;overflow:hidden;display:block;position:relative;flex:0 0 auto}
.brand-logo img{position:absolute;width:230px;height:auto;left:-5px;top:-45px}
.header nav>a:not(.nav-cta){color:#333a43}
.nav-cta{border-color:#9aa0a7}
.hero-shade{background:linear-gradient(90deg,rgba(6,10,17,.84) 0%,rgba(6,10,17,.63) 32%,rgba(6,10,17,.03) 66%),linear-gradient(0deg,rgba(6,10,17,.7),transparent 28%)}
.hero{height:calc(100vh - 170px);min-height:650px}
.hero-copy{top:40%}
.hero .lead{margin:20px 0 24px;color:#fff}
.hero-actions{position:relative;z-index:2}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;border:0}
.service-card,.service-card.featured{min-height:500px;padding:0;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #d8dcdd}
.service-card.wide{grid-column:span 2;min-height:420px;display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch}
.service-image{height:260px;position:relative;overflow:hidden}
.service-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.service-card:hover .service-image img{transform:scale(1.035)}
.service-image span{position:absolute;left:20px;top:20px;background:var(--orange);color:#111;padding:9px 11px;font-weight:800;font-size:.75rem}
.service-content{padding:28px;display:flex;flex-direction:column;flex:1}
.service-card h3{font-size:1.35rem}
.service-card a{margin-top:auto;padding-top:30px}
.wide .service-image{height:100%;min-height:420px}
.wide .service-content{padding:45px}
.footer-brand{background:#fff;width:224px;height:128px;border-radius:2px}
@media(max-width:900px){
  .social-bar{justify-content:center;gap:13px}
  .social-bar span{display:none}
  .header{height:112px;top:0}
  .brand-logo{width:180px;height:102px}
  .brand-logo img{width:185px;top:-36px;left:-4px}
  .menu span{background:var(--ink)}
  .header nav{top:112px;background:#fff;color:var(--ink);box-shadow:0 18px 30px rgba(0,0,0,.12)}
  .hero{height:calc(100svh - 144px);min-height:670px}
  .hero-copy{top:36%}
  .lead{margin:22px 0 25px}
  .service-grid{grid-template-columns:1fr 1fr}
  .service-card.wide{grid-column:span 2}
}
@media(max-width:560px){
  .social-bar{font-size:.56rem}
  .hero h1{font-size:clamp(2.65rem,12vw,4rem)}
  .hero-copy{top:35%}
  .service-grid{grid-template-columns:1fr}
  .service-card.wide{grid-column:auto;display:flex;min-height:500px}
  .service-card.wide .service-image{height:260px;min-height:0}
  .service-card.wide .service-content{padding:28px}
}
@media(min-width:901px) and (max-height:720px){
  .hero{height:calc(100svh - 170px);min-height:360px}
  .hero-copy{top:38%;transform:translateY(-50%)}
  .hero h1{font-size:clamp(3.2rem,9vh,4.2rem)}
  .hero .eyebrow{margin-bottom:14px}
  .hero .lead{font-size:.94rem;line-height:1.45;margin:15px 0 18px;max-width:520px}
  .hero .btn{padding:12px 18px}
  .hero-proof{display:none}
}
@media(max-width:900px) and (max-height:700px){
  .hero{height:calc(100svh - 144px);min-height:410px}
  .hero-copy{top:36%;transform:translateY(-50%)}
  .hero h1{font-size:clamp(2.45rem,10vh,3.3rem)}
  .hero .eyebrow{margin-bottom:10px}
  .hero .lead{font-size:.88rem;line-height:1.4;margin:12px 0 15px}
  .hero .btn{padding:11px 16px}
  .hero-proof{display:none}
}

.whatsapp-float{
  position:fixed;
  right:clamp(18px,2.4vw,34px);
  bottom:clamp(18px,2.4vw,34px);
  z-index:100;
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:13px 19px 13px 14px;
  border-radius:999px;
  background:#25d366;
  color:#fff;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:-.01em;
  box-shadow:0 10px 28px rgba(0,0,0,.26);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.whatsapp-float svg{width:27px;height:27px;flex:none}
.whatsapp-float:hover{background:#20bd5a;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.whatsapp-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:560px){
  .whatsapp-float{right:16px;bottom:16px;padding:11px 16px 11px 12px;font-size:.84rem}
  .whatsapp-float svg{width:25px;height:25px}
}

/* Posición estable: mantiene las acciones visibles incluso con zoom o poca altura. */
.hero-copy{top:7%;transform:none}
.hero h1{font-size:clamp(3rem,5vw,5rem)}
@media(max-width:900px){
  .hero-copy{top:6%;transform:none}
  .hero h1{font-size:clamp(2.6rem,9vw,4rem)}
}
@media(max-width:560px){
  .hero-copy{top:4%;transform:none}
  .hero h1{font-size:clamp(2.2rem,10vw,3.2rem)}
}

/* Encuadre amplio para mostrar cada instalación completa. */
.service-card:not(.wide) .service-image{
  height:auto;
  aspect-ratio:4 / 3;
}
.service-card:not(.wide) .service-image img{
  object-fit:cover;
  object-position:center;
}
.service-card:hover .service-image img{transform:scale(1.01)}
.service-gallery .gallery-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease,transform .5s;width:100%;height:100%;object-fit:cover}
.service-gallery .gallery-slide.is-active{opacity:1}
.gallery-controls{position:absolute;right:18px;bottom:16px;display:flex;gap:8px;z-index:2;padding:8px 10px;background:rgba(5,8,13,.66)}
.gallery-dot{width:9px;height:9px;padding:0;border:1px solid #fff;border-radius:50%;background:transparent;cursor:pointer}
.gallery-dot.is-active{background:var(--orange);border-color:var(--orange)}
.gallery-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}