:root{
    --foreground: #00506e;
    --background: #f7f6f2;
    --surface: #ffffff;
    --muted: #edece5;
    --muted-foreground: #6b6d70;
    --primary: #f2a900;
    --primary-text: #916500;
    --primary-ink: #15171a;
    --border: #e1dfd6;
    --dark: #00506e;
    --dark-soft: #6b6d70;
  }

*{ margin:0; padding:0; box-sizing:border-box; }

html{ background:var(--background); scroll-behavior:smooth; }

body{
    background:var(--background); color:var(--foreground);
    font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

::selection{ background:var(--primary); color:var(--primary-ink); }

h1,h2,h3,.display{ font-family:'Satoshi',sans-serif; font-weight:500; letter-spacing:-0.01em; line-height:1.05; }

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }

.accent{ color:var(--primary-text); }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--primary-text); margin-bottom:18px; }

/* ---------- NAV ---------- */
  header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(247,246,242,0.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease; }

header.scrolled{ border-color:var(--border); background:rgba(247,246,242,0.97); }

header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; }

.logo img{ height:clamp(40px, 5vw, 56px); width:auto; display:block; transition:height .3s ease; }

nav.main-nav ul{ list-style:none; display:flex; gap:36px; }

nav.main-nav a{ font-size:14px; font-weight:500; color:var(--dark-soft); transition:color .2s ease; }

nav.main-nav a:hover, nav.main-nav a.active{ color:var(--foreground); }

.header-actions{ display:flex; align-items:center; gap:22px; }

.header-phone{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }

.header-phone svg{ width:16px; height:16px; color:var(--primary-text); }

.lang-switch{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted-foreground); }

.lang-switch a{ padding:2px; color:var(--muted-foreground); }

.lang-switch a.active{ color:var(--foreground); }

.lang-switch .sep{ opacity:.4; }

.btn{
    display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
    padding:12px 22px; border-radius:999px; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }

.btn-primary{ background:var(--dark); color:var(--background); }

.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(21,23,26,0.35); }

.btn-primary .accent-dot{ width:7px; height:7px; border-radius:50%; background:var(--primary); }

.btn-ghost{ border:1px solid var(--border); color:var(--foreground); }

.btn-ghost:hover{ border-color:var(--foreground); }

.menu-toggle{ display:none; }

.mobile-nav{ display:none; }

/* ---------- FOOTER ---------- */
  footer{ background:var(--dark); color:rgba(247,246,242,0.6); padding:56px 0 28px; }

.footer-grid{ display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(247,246,242,0.12); }

.footer-brand .logo{ margin-bottom:16px; }

.footer-brand .logo img{ height:clamp(32px, 3vw, 40px); width:auto; border-radius:4px; }

.footer-brand p{ font-size:14px; line-height:1.6; max-width:280px; }

.footer-col h4{ font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:rgba(247,246,242,0.85); margin-bottom:16px; }

.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }

.footer-col a{ font-size:14px; transition:color .2s ease; }

.footer-col a:hover{ color:var(--background); }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; flex-wrap:wrap; gap:12px; }

.footer-legal{ display:flex; gap:16px; }

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.01ms !important; animation-iteration-count:1 !important;
      transition-duration:0.01ms !important; scroll-behavior:auto !important;
    }
  }

/* ---------- COOKIE CONSENT ---------- */
  .cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--dark); color:var(--background); padding:20px 32px; display:none; }

.cookie-banner.visible{ display:flex; }

.cookie-banner-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }

.cookie-banner p{ font-size:14px; line-height:1.5; margin:0; flex:1; min-width:240px; color:rgba(247,246,242,0.85); }

.cookie-banner p a{ color:var(--background); text-decoration:underline; }

.cookie-banner-actions{ display:flex; gap:12px; flex-shrink:0; }

.cookie-banner-actions button{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; padding:10px 20px; border-radius:999px; cursor:pointer; border:none; }

.cookie-accept{ background:var(--primary); color:var(--primary-ink); }

.cookie-decline{ background:transparent; color:var(--background); border:1px solid rgba(247,246,242,0.3) !important; }

@media (max-width:600px){ .cookie-banner-inner{ flex-direction:column; align-items:stretch; } .cookie-banner-actions{ justify-content:flex-end; } }

/* ---------- WHATSAPP WIDGET ---------- */
.wa-widget{ position:fixed; right:24px; bottom:24px; z-index:999; display:flex; flex-direction:column; align-items:flex-end; gap:10px; transition:bottom .2s ease, opacity .25s ease; }

/* --cookie-banner-h is set from JS to the banner's actual rendered
   height (it wraps to 2+ lines on narrow phones), so the widget always
   clears it instead of relying on a guessed pixel value per breakpoint. */
.wa-widget.above-banner{ bottom: calc(var(--cookie-banner-h, 74px) + 16px); }

.mobile-nav.open ~ .wa-widget{ display:none; }

/* Mobile-only: step out of the way while the page is actively
   scrolling, so the fixed button can't sit on top of content that
   happens to land in its corner (e.g. the homepage stats row). Fades
   back in shortly after scrolling stops. */
@media (max-width:900px){
  .wa-widget.wa-hide{ opacity:0; pointer-events:none; }
}

.wa-fab{ width:58px; height:58px; border-radius:50%; background:rgb(37,211,102); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; box-shadow:rgba(37,211,102,0.55) 0 10px 26px -6px; transition:transform .25s, box-shadow .25s; }

.wa-fab:hover{ transform:scale(1.08); box-shadow:rgba(37,211,102,0.65) 0 12px 30px -6px; }

.wa-fab svg{ width:30px; height:30px; display:block; }

.wa-menu{ display:flex; flex-direction:column; gap:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }

.wa-menu.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .2s ease, transform .2s ease; }

.wa-menu-item{ display:flex; align-items:center; gap:10px; background:var(--surface); color:var(--foreground); padding:12px 18px; border-radius:999px; box-shadow:0 10px 24px -10px rgba(21,23,26,0.3); font-size:14px; font-weight:600; border:1px solid var(--border); white-space:nowrap; }

.wa-menu-item:hover{ border-color:rgb(37,211,102); }

.wa-menu-item svg{ width:18px; height:18px; color:rgb(37,211,102); flex:0 0 auto; }

@media (max-width:900px){
  .wa-widget{ right:16px; bottom:16px; }
  .wa-fab{ width:52px; height:52px; }
  .wa-fab svg{ width:27px; height:27px; }
}