/* ===========================================================
   Layout — fixed header, dropdowns, drawer, footer, FABs
   =========================================================== */

/* --- Header ------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--bar-h);
  background: rgba(10, 19, 34, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled { background: rgba(10,19,34,.98); box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); }

.site-header__bar {
  display: flex; align-items: center; gap: var(--space-4);
  height: 100%;
}

/* --- Brand lockup -----------------------------------------
   "SafeView" is fitted by nav.js to exactly the visual width of the tagline
   line below it; these font sizes are close no-JS defaults. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto;
}
/* Sized by height; the width follows the logo's own proportions */
.brand__mark {
  position: relative; display: block; flex: none;
  height: 44px; width: auto;
  aspect-ratio: var(--logo-ratio, 1);
}
.brand__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Shine layer, masked to the logo's own shape */
.brand__mark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 150% 0;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
.brand__text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand__name {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.36rem; line-height: 1; letter-spacing: -.02em;
  color: #fff; white-space: nowrap;
}
.brand__sub {
  margin-top: 4px;
  font-family: var(--font-heading); font-size: .6rem; font-weight: 600;
  line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: var(--a-300); white-space: nowrap;
}
@media (min-width: 1024px) {
  .brand__mark { height: 52px; }
  .brand__name { font-size: 1.6rem; }
  .brand__sub { font-size: .7rem; }
}
.brand--drawer .brand__mark { height: 42px; }
.brand--footer .brand__mark { height: 56px; }
.brand--footer .brand__name { font-size: 1.7rem; }
.brand--footer .brand__sub  { font-size: .74rem; }

/* Name sheen: the name is painted through a gradient so a soft highlight can
   travel across the letters. Plain white where background-clip is unsupported. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand__name {
    background-image: linear-gradient(100deg, #fff 0%, #fff 40%, #bfd4fe 47%, #fed0aa 52%, #fff 59%, #fff 100%);
    background-size: 320% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Motion — all behind prefers-reduced-motion:
   - header: on every page load the mark springs in out of a soft blur, the
     name rises out of a mask and the tagline wipes in
   - drawer: the same entrance each time the menu opens
   - everywhere: a light sweep across the mark and the name every 7s, and a
     tilt with a sweep on hover or keyboard focus
   Entrances fill backwards only, so they never pin a transform that would
   block the hover state once they finish. */
@media (prefers-reduced-motion: no-preference) {
  .brand__mark { transition: transform var(--dur) var(--ease-out); }
  .brand:hover .brand__mark,
  .brand:focus-visible .brand__mark { transform: rotate(-6deg) scale(1.07); }

  .brand__mark::after { animation: brand-shine-loop 7s var(--ease-in-out) 1.4s infinite; }
  .brand__name        { animation: brand-sheen-loop 7s var(--ease-in-out) 1.55s infinite; }
  .brand:hover .brand__mark::after,
  .brand:focus-visible .brand__mark::after { animation: brand-shine 900ms var(--ease-out); }

  .site-header .brand__mark,
  .drawer.is-open .brand__mark {
    animation: brand-mark-in 900ms cubic-bezier(.34, 1.56, .64, 1) backwards;
  }
  .drawer.is-open .brand__mark { animation-delay: 120ms; }
  .site-header .brand__name,
  .drawer.is-open .brand__name {
    animation: brand-name-in 700ms var(--ease-out) 220ms backwards,
               brand-sheen-loop 7s var(--ease-in-out) 1.55s infinite;
  }
  .site-header .brand__sub,
  .drawer.is-open .brand__sub {
    animation: brand-sub-in 760ms var(--ease-out) 460ms backwards;
  }
}
@keyframes brand-mark-in {
  0%   { opacity: 0; transform: translateY(6px) scale(.6) rotate(-14deg); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes brand-shine-loop {
  0%, 74% { opacity: 0; background-position: 150% 0; }
  78%     { opacity: 1; }
  96%     { opacity: 1; }
  100%    { opacity: 0; background-position: -50% 0; }
}
@keyframes brand-sheen-loop {
  0%, 74% { background-position: 100% 0; }
  100%    { background-position: 0% 0; }
}
@keyframes brand-shine {
  0%   { opacity: 0; background-position: 150% 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; background-position: -50% 0; }
}
@keyframes brand-name-in {
  from { opacity: 0; transform: translateY(55%); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;            clip-path: inset(-20% -5% -20% -5%); }
}
@keyframes brand-sub-in {
  from { opacity: 0; clip-path: inset(-20% 100% -20% 0); }
  to   { opacity: 1; clip-path: inset(-20% -5% -20% 0); }
}

/* --- Desktop nav ------------------------------------------- */
.nav-primary { display: none; }
@media (min-width: 1024px) {
  .nav-primary { display: block; }
  .nav-primary__list { display: flex; align-items: center; gap: var(--space-1); }
}
.nav-primary__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3);
  border: 0; background: none;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.88);
  font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.nav-primary__link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-primary__link[aria-current="page"] { color: var(--a-300); }
.nav-dd { position: relative; }
.nav-dd__chev { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.nav-dd__toggle[aria-expanded="true"] .nav-dd__chev { transform: rotate(180deg); }

.nav-dd__panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 300px; padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.nav-dd:hover .nav-dd__panel,
.nav-dd:focus-within .nav-dd__panel,
.nav-dd__toggle[aria-expanded="true"] + .nav-dd__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd__panel--services {
  min-width: 660px;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
.nav-dd__heading {
  margin: 0 0 var(--space-2); padding: 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-muted);
}
.nav-dd__col + .nav-dd__col { border-left: 1px solid var(--color-border); padding-left: var(--space-4); }
.nav-dd__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--r-sm);
  text-decoration: none; color: var(--color-text);
  transition: background-color var(--dur) var(--ease-out);
}
.nav-dd__item:hover { background: var(--color-accent-soft); color: var(--color-text); }
.nav-dd__item[aria-current="page"] { background: var(--color-accent-soft); }
.nav-dd__icon {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--color-accent-soft); color: var(--color-accent);
}
.nav-dd__icon .icon { width: 20px; height: 20px; }
.nav-dd__label { display: flex; flex-direction: column; line-height: 1.25; }
.nav-dd__label strong { font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; }
.nav-dd__label small { color: var(--color-muted); font-size: var(--fs-xs); }

/* --- Header actions ---------------------------------------- */
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }

/* Hidden on phones: the floating call button already covers that, and the
   drawer carries a full-width call action. */
.header-phone { display: none; }
.header-phone:hover { background: rgba(255,255,255,.10); color: #fff; }
.header-phone .icon { width: 20px; height: 20px; color: var(--a-300); }
.header-phone__num { display: inline; }
@media (min-width: 768px) {
  .header-phone {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding: var(--space-2) var(--space-3);
    border-radius: var(--r-pill);
    color: #fff; text-decoration: none; font-weight: 600;
    font-family: var(--font-heading); font-size: var(--fs-sm);
    transition: background-color var(--dur) var(--ease-out);
  }
}

.header-quote { display: none; }
@media (min-width: 768px) { .header-quote { display: inline-flex; } }

/* Modern asymmetric burger in a soft glass tile; the bars even up into a
   clean X when the drawer opens. */
.burger {
  position: relative;
  display: inline-block;
  width: 48px; height: 48px; padding: 0;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.burger:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); }
.burger span {
  position: absolute; top: 50%; left: 50%;
  height: 2px; margin-left: -10px; border-radius: 2px;
  background: #fff;
  transition: transform var(--dur) var(--ease-out),
              width var(--dur) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.burger span:first-child  { width: 20px; transform: translateY(-7px); }
.burger span:nth-child(2) { width: 12px; transform: translateY(0); }
.burger span:last-child   { width: 16px; transform: translateY(7px); }
.burger:hover span:nth-child(2) { width: 20px; }
.burger:hover span:last-child   { width: 20px; }
.burger[aria-expanded="true"] span:first-child  { width: 20px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 20px; }
.burger[aria-expanded="true"] span:last-child   { width: 20px; transform: rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

.burger-fallback { display: none; color: #fff; font-weight: 600; }
.no-js .burger { display: none; }
.no-js .burger-fallback { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3); }

/* --- Drawer ------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.drawer.is-open { visibility: visible; }

.drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 9, 18, .6);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }

.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(400px, 88vw);
  display: flex; flex-direction: column;
  background: var(--color-dark);
  border-left: 1px solid rgba(255,255,255,.10);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.drawer__close {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-sm); color: #fff; cursor: pointer;
}

.drawer__nav { padding: var(--space-4) var(--space-5); flex: 1; }
.drawer__links > li + li { margin-top: var(--space-1); }
.drawer__link, .drawer__acc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 52px;
  padding: var(--space-3) var(--space-3);
  background: none; border: 0; border-radius: var(--r-sm);
  color: rgba(255,255,255,.92);
  font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.drawer__link:hover, .drawer__acc:hover { background: rgba(255,255,255,.07); color: #fff; }
.drawer__link[aria-current="page"] { color: var(--a-300); }
.drawer__acc .icon { transition: transform var(--dur) var(--ease-out); }
.drawer__acc[aria-expanded="true"] .icon { transform: rotate(180deg); }

.drawer__sub { margin: var(--space-1) 0 var(--space-3) var(--space-3); }
.drawer__sub[hidden] { display: none; }
.drawer__sublink {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 46px; padding: var(--space-2) var(--space-3);
  border-left: 2px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.78);
  font-size: var(--fs-sm); text-decoration: none;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.drawer__sublink:hover { color: #fff; border-color: var(--a-400); }
.drawer__sublabel {
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-300);
}
.drawer__sublink .icon { width: 18px; height: 18px; color: var(--a-300); }

.drawer__cta {
  padding: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid; gap: var(--space-3);
}
.drawer__offer {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin: 0; color: var(--color-on-dark-muted); font-size: var(--fs-sm);
}
.drawer__offer .icon { width: 18px; height: 18px; color: var(--wa-500); margin-top: 3px; }

body.is-locked { overflow: hidden; }   /* lightbox */

/* Drawer scroll lock: overflow only. The page itself never moves, so closing
   the menu has no scroll position to restore and nothing to animate.
   scrollbar-gutter keeps a desktop scrollbar's space so nothing shifts. */
html.is-scroll-locked { overflow: hidden; scrollbar-gutter: stable; }
html.is-scroll-locked body { overflow: hidden; }
.drawer__backdrop { touch-action: none; }

/* --- Floating actions --------------------------------------- */
.floating-actions {
  position: fixed; z-index: 120;
  right: var(--space-4);
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: grid; gap: var(--space-3);
}
.floating-action {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-out);
}
.floating-action .icon { width: 27px; height: 27px; }
.floating-action:hover { transform: scale(1.07); color: #fff; }
.floating-action--whatsapp { background: var(--wa-700); }
.floating-action--call { background: var(--color-cta); }
@media (min-width: 1024px) {
  .floating-actions { right: var(--space-6); bottom: var(--space-6); }
}

/* --- Footer -------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  background: var(--color-dark);
  color: var(--color-on-dark-muted);
  overflow: hidden;
}
.site-footer__glow {
  position: absolute; top: -180px; right: -120px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(30,79,216,.30), transparent 68%);
  pointer-events: none;
}
.site-footer__grid {
  position: relative;
  display: grid; gap: var(--space-7);
  padding-bottom: var(--space-8);
}
@media (min-width: 768px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-6); } }

.site-footer__blurb { margin: var(--space-4) 0 var(--space-5); max-width: 46ch; }
.site-footer a { color: var(--color-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
}
.site-footer__col li + li { margin-top: var(--space-2); }
.site-footer__col a { display: inline-block; padding-block: 3px; font-size: var(--fs-sm); }
.site-footer__offer {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--a-300);
}
.site-footer__offer .icon { width: 18px; height: 18px; margin-top: 3px; }

.nap { font-style: normal; display: grid; gap: var(--space-3); }
.nap__row { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; font-size: var(--fs-sm); }
.nap__row .icon { width: 19px; height: 19px; color: var(--a-300); margin-top: 3px; flex: none; }
.nap__row strong { color: #fff; }

.site-footer__bottom {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: space-between;
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: var(--fs-sm);
}
.site-footer__bottom p { margin: 0; }
/* keep the last footer line clear of the floating buttons */
@media (max-width: 1023px) { .site-footer__bottom { padding-bottom: calc(var(--space-8) + 40px); } }