:root{
  --accent:#F2632E; --accent-600:#D84F21; --accent-700:#B33F1A;
  --text-color:#0f2544; --muted-text:#475569;
  --ok:#10b981; --bad:#ef4444;
  --header-h:64px;
  --nav-fs:16px; --nav-fs-mobile:15px;
}
*{box-sizing:border-box}
html,body{margin:0}
.container{width:min(1200px,92%);margin-inline:auto}

.site-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  position:sticky;top:0;z-index:1000;
  border-bottom:1px solid rgba(0,0,0,.07);
  box-shadow:0 2px 4px rgba(0,0,0,.04);
  color:var(--text-color);
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0; min-height:var(--header-h);
}

.brand{flex:0 0 auto}
.brand-logo{height:36px;width:auto}

.main-nav{
  position: fixed; left: 0; right: 0; top: var(--header-h);
  background:#fff; z-index:10030; display:block !important;
  transform: translateY(-100%); opacity:0; visibility:hidden; pointer-events:none;
  transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.main-nav ul{
  display:flex; gap:24px; list-style:none; margin:0; padding:0; align-items:center;
  font-weight:700;
}
.main-nav a{
  color:var(--text-color); text-decoration:none; transition:opacity .2s; white-space:nowrap;
  font-size:var(--nav-fs); line-height:1;
}
.main-nav a:hover{opacity:.85}

.header-actions{flex:0 0 auto;display:flex;align-items:center;gap:22px}
.phones{display:flex;gap:10px;align-items:flex-start}
.phones .icon-phone{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;color:#fff;background:var(--accent);
  box-shadow:0 2px 8px rgba(242,99,46,.35); animation:phoneRing 1.8s ease-in-out infinite;margin-top:2px;
}
.phones .icon-phone::before{content:"\f095";font-family:"Font Awesome 6 Free";font-weight:900;font-size:13px}
.phones span, .phones a{font-size:14px;font-weight:800;color:inherit;text-decoration:none}
.open-state{font-size:12px;color:var(--muted-text);font-weight:600}
.open-state .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--muted-text)}
.open-state.is-open .dot{background:var(--ok)}
.open-state.is-closed .dot{background:var(--bad)}

.pill{
  background:#fff;color:var(--text-color);padding:8px 16px;border-radius:999px;border:1px solid rgba(0,0,0,.08);
  font-weight:800;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:.2s
}
.pill:hover{filter:brightness(.98)}

.header-actions a[href*="zona"]{
  background:var(--accent)!important;color:#0b1e2a!important;border:1px solid rgba(0,0,0,.06);
  border-radius:999px;padding:8px 16px;font-weight:800;text-align:center;
  box-shadow:0 8px 18px rgba(242,99,46,.22);display:inline-flex;align-items:center;gap:6px;
}

.main-nav .nav-cta a{
  background:var(--accent)!important;color:#0b1e2a!important;border:1px solid rgba(0,0,0,.06);
  border-radius:999px;padding:12px;font-weight:800;text-align:center;
  box-shadow:0 8px 18px rgba(242,99,46,.22);display:inline-flex;align-items:center;gap:6px;
}

.nav-toggle{
  display:flex;width:40px;height:40px;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,.12);
  padding:0;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:10040;
}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:"";display:block;width:22px;height:2px;background:var(--text-color);border-radius:2px;position:relative}
.nav-toggle .bars::before{top:-6px;position:relative}
.nav-toggle .bars::after{top:4px;position:relative}

@keyframes phoneRing{
  0%{ transform:rotate(0); box-shadow:0 0 0 0 rgba(242,99,46,.45) }
  10%{ transform:rotate(-15deg) } 20%{ transform:rotate(12deg) }
  30%{ transform:rotate(-8deg) }  40%{ transform:rotate(6deg) }
  50%{ transform:rotate(0) }     60%{ box-shadow:0 0 0 6px rgba(242,99,46,.15) }
  100%{ box-shadow:0 0 0 0 rgba(242,99,46,0) }
}

@media (min-width:769px){
  .mobile-only{ display:none !important; }
  .main-nav .nav-cta{ display:none !important; }
  .main-nav .nav-speedtest{ display:none !important; }

  .main-nav{
    position: static !important; transform: none !important;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    background: transparent !important; box-shadow: none !important; display: block !important;
  }
  .main-nav ul{ flex-direction: row; }
  .nav-toggle{ display: none !important; }
  .header-actions{ display: flex !important; }
}

@media (max-width:768px){
  .mobile-only{ display:block !important; }

  .header-inner { gap: 12px; }
  .brand { margin-right: auto; }
  .nav-toggle{ display:flex !important; }
  .header-actions{ display:none !important; }

  .main-nav{
    position: fixed; left: 0; right: 0; top: var(--header-h);
    background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12);
    z-index:10030; display:block !important;
    transform: translateY(-100%); opacity:0; visibility:hidden; pointer-events:none;
    transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s;
  }
  .main-nav.open{
    transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto;
  }

  .main-nav ul{
    flex-direction: column !important;
    gap: 12px; margin: 0; padding: 16px 20px;
  }
  .main-nav li{ width:100%; }
  .main-nav a{
    font-size: var(--nav-fs-mobile);
    display:block; width:100%;
    padding:12px 10px; border-radius:10px;
  }
  .main-nav .nav-speedtest a{
    text-align:center; font-weight:800; border:1px dashed rgba(0,0,0,.15);
  }

  .main-nav .nav-cta{ width:100%; margin-top:4px; }
  .main-nav .nav-cta a{
    display:flex !important;      
    width:100%;
    justify-content:center;
    align-items:center;
    gap:8px;
    text-align:center;
    padding:12px;
  }
}