/* Base (kept) */
:root{
  --bg:#0c0f12; --card:#12161b; --ink:#e8eef6; --muted:#9aa7b4;
  --blue-2:#0f5f86; --accent:#cfd7df; --ring:#9fb3c8;
  --shadow:0 10px 30px rgba(0,0,0,.45); --radius:18px; --icon:42px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.page{max-width:1100px;margin-inline:auto;padding:24px}

/* Header */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__logo{width:64px;height:64px;border-radius:50%;flex:0 0 auto;overflow:hidden;position:relative;box-shadow:inset 0 0 0 3px #2b3947, inset 0 0 18px rgba(255,255,255,.15), var(--shadow)}
.brand__logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand__name{font-weight:800;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand__name b{display:block;font-size:1.05rem;color:var(--accent)}
.brand__name small{display:block;color:var(--muted)}

/* Socials */
.social{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:hidden}
.social a{width:var(--icon);height:var(--icon);display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(145deg,#0c1218,#18202a);box-shadow:inset 0 0 1px #3b4a59,0 6px 16px rgba(0,0,0,.35);flex:0 0 auto}
.social svg{width:calc(var(--icon) * .52);height:calc(var(--icon) * .52);fill:var(--accent)}

/* Weather strip */
.weather{margin:18px 0;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);background:linear-gradient(180deg,#121821,#0e141b);box-shadow:var(--shadow);padding:12px}
.weather__row{display:flex;align-items:center;gap:14px;overflow-x:auto;padding:6px}
.weather__now{display:flex;align-items:center;gap:10px;min-width:max(240px,30%);padding:10px 12px;border-radius:14px;background:linear-gradient(145deg,#0f1a22,#0b1117);border:1px solid rgba(255,255,255,.06)}
.weather__now .t{font-size:28px;font-weight:700}
.weather__now small{color:var(--muted)}
.weather__chip{flex:0 0 auto;display:grid;place-items:center;min-width:88px;padding:8px 10px;border-radius:12px;background:#0e141b;border:1px solid rgba(255,255,255,.07)}
.weather__chip b{font-size:14px}
.weather__chip span{color:var(--muted);font-size:12px}

/* Hero (slight polish) */
.hero{margin:28px 0 18px;border:1px solid rgba(255,255,255,.06);background:
  radial-gradient(1200px 300px at 50% -100px, rgba(77,109,137,.25), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.hero__title{font-size:clamp(28px, 3.1vw, 46px);line-height:1.08;margin:0 0 8px;font-weight:900;letter-spacing:.2px;
  background:linear-gradient(180deg,#f6f9ff, #a9b8c8 85%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero__subtitle{margin:0;color:var(--muted);font-size:clamp(14px,1.3vw,16px)}
.hero__badge{margin-top:12px;display:inline-flex;gap:8px;align-items:center;padding:9px 12px;border-radius:12px;background:linear-gradient(145deg,#0f1a22,#0a0f14); border:1px solid rgba(255,255,255,.06); color:var(--ring)}

/* === NUEVO hero__logo con destello leve === */
.hero__logo {
  width:150px;
  aspect-ratio:1/1;
  border-radius:50%;
  margin-inline:auto;
  overflow:hidden;
  position:relative;
  box-shadow:0 0 8px rgba(255,255,255,.3),
             0 0 14px rgba(0,174,255,.5);
  animation:pulseGlow 2.5s infinite alternate;
}
.hero__logo img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
@keyframes pulseGlow {
  from {
    box-shadow:0 0 6px rgba(0,174,255,.4),
               0 0 10px rgba(0,174,255,.5);
  }
  to {
    box-shadow:0 0 10px rgba(0,174,255,.6),
               0 0 16px rgba(0,174,255,.8);
  }
}

@media(max-width:900px){.hero__grid{grid-template-columns:1fr}}

/* Sections/cards */
.sections{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;background:linear-gradient(180deg,#121821,#0e141b);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h2{margin:0 0 10px;font-size:clamp(19px,2.1vw,26px)}

/* Services (added) */
.services{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.service{grid-column:span 6;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:#0f141b;border:1px solid rgba(255,255,255,.06)}
.service__head{display:flex;align-items:center;gap:10px}
.service__icon{width:36px;height:36px;border-radius:12px;background:#0e141b;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center}
.service__title{font-weight:800}
.service__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.service__grid img{width:100%;height:90px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.07);cursor:zoom-in}
@media(min-width:760px){.service{grid-column:span 3}.service__grid img{height:100px}}

/* Brands strip (added) */
.brands{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;align-items:center}
.brandlogo{aspect-ratio:1/1;border-radius:12px;background:#0e141b;border:1px solid rgba(255,255,255,.06);display:grid;place-items:center;overflow:hidden}
.brandlogo img{width:70%;height:70%;object-fit:contain}

/* Gallery (kept) */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.gallery a{grid-column:span 6;position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:#0e1318}
.gallery img{width:100%;height:180px;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
@media(min-width:760px){.gallery a{grid-column:span 3}.gallery img{height:160px}}

/* Lightbox (kept) */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:60}
.lightbox.open{display:flex}
.lightbox__img{max-width:92vw;max-height:86vh;border-radius:12px;box-shadow:var(--shadow)}

/* Contact (kept previous) */
form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .full{grid-column:span 2}
label{font-size:.9rem;color:var(--muted)}
input,textarea{width:100%;margin-top:6px;background:#0e141b;border:1px solid rgba(255,255,255,.08);color:var(--ink);padding:12px;border-radius:12px;outline:none}
textarea{min-height:110px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,#0f1a22,#0c1218);color:var(--ink);cursor:pointer}
.btn--primary{background:linear-gradient(145deg,var(--blue-2),#0b2b3d);border-color:#2a4b62}

/* WhatsApp bubble showing your original logo image (no background) */
.wa-bubble{position:fixed;right:16px;bottom:16px;width:58px;height:58px;z-index:90}
.wa-bubble img{width:100%;height:100%;object-fit:contain}

/* Footer */
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.9rem;margin:18px 0 6px}


/* === Lightweight animations === */
@media (prefers-reduced-motion: no-preference){
  .social a{ transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
  .social a:hover, .social a:focus-visible{
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 6px rgba(159,179,200,.12) inset;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
    outline: none;
  }

  .wa-bubble{ 
    animation: waFloat 3.2s ease-in-out infinite; 
    will-change: transform;
    transition: filter .18s ease;
  }
  .wa-bubble:hover, .wa-bubble:focus-visible{ filter: brightness(1.08) drop-shadow(0 6px 18px rgba(37,211,102,.35)); outline:none; }
  @keyframes waFloat{
    0%{ transform: translateY(0) }
    50%{ transform: translateY(-3px) }
    100%{ transform: translateY(0) }
  }
}

.call{
  flex:0 0 auto;
}

#topPhone{
  margin-left:12px;
}

@media(max-width:600px){
  .topbar{
    flex-wrap:wrap;
    gap:10px;
  }
  #topPhone{
    width:100%;
    text-align:center;
    margin:8px 0 0;
  }
  #topPhone a{
    display:inline-block;
    width:auto;
  }
}

/* Phone icon before number */
#topPhone a#callBtn {
  position: relative;
  padding-left: 36px;
}

/* 🔴 Eliminado el ::before para que no duplique el icono */

/* Inline phone icon inside callBtn */
#topPhone #callBtn{
  display:inline-flex; align-items:center; gap:10px; padding-left:14px; padding-right:14px;
}
#topPhone #callBtn .ico-phone{ display:inline-flex; width:16px; height:16px; }
#topPhone #callBtn .ico-phone svg{ width:16px; height:16px; opacity:.95; }

.call a{ touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* === AÑADIDO: navegación del lightbox (prev/next) === */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
}
.lightbox__nav:hover { background: rgba(0,0,0,0.8); }
.lightbox__nav.prev { left: 20px; }
.lightbox__nav.next { right: 20px; }