/* ==========================================================================
   LAYOUT — marquee strip, header/nav, mobile drawer, footer, floating actions
   ========================================================================== */

/* ---- Trust marquee ---- */
.marquee{
  background:var(--teal-950);
  color:var(--gold-300);
  font-family:var(--font-label);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid rgba(229,194,116,.18);
}
.marquee__track{
  display:inline-flex;
  gap:3.5rem;
  padding-block:9px;
  animation:marquee 32s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ display:inline-flex; align-items:center; gap:3.5rem; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:200;
  border-bottom:1px solid rgba(229,194,116,.14);
  /* NOTE: backdrop-filter is intentionally NOT set directly on this element.
     Per spec, transform/filter/backdrop-filter on an element creates a new
     containing block for any position:fixed descendant — and our mobile
     nav drawer (.nav__links) lives inside this header. Putting the blur on
     a ::before layer instead keeps the header a plain, unfiltered ancestor
     so the drawer stays truly fixed to the viewport (not reachable by
     horizontal swipe/pan on mobile). */
}
.site-header::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:rgba(10,44,45,.92);
  backdrop-filter:blur(10px);
}
.nav{
  display:flex;
  align-items:center;

  justify-content:space-between;
  gap:24px;
  padding-block:12px;
}
.nav__brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.nav__brand img{ width:52px; height:52px; border-radius:50%; }
.nav__brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.nav__brand-text strong{
  font-family:var(--font-display);
  font-size:1.32rem;
  color:var(--white);
  letter-spacing:.02em;
}
.nav__brand-text span{
  font-family:var(--font-label);
  font-size:.55rem;
  letter-spacing:.16em;
  color:var(--gold-300);
  text-transform:uppercase;
}

.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,38px);
}
.nav__links a{
  font-family:var(--font-label);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#e8e2d2;
  position:relative;
  padding-bottom:4px;
}
.nav__links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--gold-300);
  transition:width .3s var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-active::after{ width:100%; }
.nav__links a.is-active{ color:var(--gold-300); }
.nav__links .btn{ margin-left:6px; }

.nav__actions{ display:flex; align-items:center; gap:14px; }
.nav__icon-link{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(229,194,116,.4);
  border-radius:50%;
  color:var(--gold-300);
  transition:background .3s, transform .3s;
}
.nav__icon-link:hover{ background:rgba(229,194,116,.15); transform:translateY(-2px); }
.nav__icon-link svg{ width:17px; height:17px; }

.nav__burger{
  display:none;
  width:42px; height:42px;
  border:1px solid rgba(229,194,116,.4);
  border-radius:50%;
  background:transparent;
  position:relative;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after{
  content:'';
  position:absolute; left:11px; right:11px; height:1px;
  background:var(--gold-300);
  transition:transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease);
}
.nav__burger span{ top:50%; }
.nav__burger span::before{ top:-6px; }
.nav__burger span::after{ top:6px; }
.nav__burger[aria-expanded="true"] span{ background:transparent; }
.nav__burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:920px){
  .nav__links{
    position:fixed; inset:0 0 0 auto;
    width:min(320px,82vw);
    height:100vh;
    background:var(--teal-950);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:100px 32px 32px;
    gap:26px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    border-left:1px solid rgba(229,194,116,.2);
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ font-size:.9rem; }
  .nav__links .btn{ margin-left:0; margin-top:8px; }
  .nav__burger{ display:block; }
  .nav-scrim{
    position:fixed; inset:0; background:rgba(8,33,31,.55);
    opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
    z-index:190;
  }
  .nav-scrim.is-open{ opacity:1; pointer-events:auto; }
}

/* ---- Footer ---- */
.site-footer{
  background:var(--teal-950);
  color:#cfe0da;
  padding-top:clamp(48px,7vw,84px);
  position:relative;
  overflow:hidden;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(229,194,116,.15);
}
.footer-brand{ display:flex; gap:14px; margin-bottom:14px; }
.footer-brand img{ width:56px; height:56px; border-radius:50%; }
.footer-brand strong{ font-family:var(--font-display); font-size:1.4rem; color:#fff; }
.footer-brand span{ display:block; font-family:var(--font-label); font-size:.58rem; letter-spacing:.16em; color:var(--gold-300); text-transform:uppercase; margin-top:3px; }
.site-footer p{ color:#9fb5ad; font-size:.92rem; max-width:34ch; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-col h4{
  font-family:var(--font-label);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-300);
  margin-bottom:18px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ color:#c7d9d3; font-size:.92rem; transition:color .25s; }
.footer-col a:hover{ color:var(--gold-300); }
.footer-col .muted{ color:#8fa39c; font-size:.88rem; line-height:1.7; }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-block:22px;
  font-size:.82rem;
  color:#7f958d;
}
.footer-bottom a{ color:var(--gold-300); }
.footer-bottom a:hover{ text-decoration:underline; }

.footer-credit{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.footer-credit:hover{ text-decoration:none; }
.footer-credit:hover span{ text-decoration:underline; }
.footer-credit__logo{
  height:22px;
  width:auto;
  background:#fff;
  border-radius:4px;
  padding:3px 6px;
  display:block;
}
.footer-credit span{ color:#7f958d; }
.footer-credit strong{ color:var(--gold-300); font-weight:600; }

@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---- Floating WhatsApp action ---- */
.fab-whatsapp{
  position:fixed;
  right:22px; bottom:22px;
  z-index:150;
  width:58px; height:58px;
  border-radius:50%;
  background:#1f5c47;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.45);
  animation:fab-pop .5s var(--ease) both, fab-pulse 2.8s ease-in-out 1.2s infinite;
}
.fab-whatsapp svg{ width:28px; height:28px; fill:#fff; }
@keyframes fab-pop{ from{ transform:scale(0); opacity:0;} to{ transform:scale(1); opacity:1;} }
@keyframes fab-pulse{ 0%,100%{ box-shadow:0 12px 28px -8px rgba(0,0,0,.45),0 0 0 0 rgba(31,92,71,.5);} 50%{ box-shadow:0 12px 28px -8px rgba(0,0,0,.45),0 0 0 10px rgba(31,92,71,0);} }
@media (prefers-reduced-motion:reduce){ .fab-whatsapp{ animation:none; } }