/* ============================================
   HEADER / NAV
   ============================================ */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:200;
  padding-block:14px;
  transition:padding var(--dur-1) var(--ease-out), background var(--dur-1), box-shadow var(--dur-1);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-pill);
  padding:8px 10px 8px 22px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-1), background var(--dur-1);
}
html[dir="rtl"] .site-header .bar{ padding:8px 22px 8px 10px; }
.site-header.scrolled .bar{
  background:rgba(255,255,255,.85);
  box-shadow:var(--shadow-md);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:38px; width:auto; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--blue-900); letter-spacing:-.01em; }
.brand-name span{ color:var(--orange-500); }

.main-nav ul{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  display:inline-block;
  padding:10px 16px;
  font-size:.92rem; font-weight:600;
  color:var(--ink);
  border-radius:var(--radius-pill);
  transition:background var(--dur-1), color var(--dur-1);
  position:relative;
}
.main-nav a:hover, .main-nav a.active{ background:var(--blue-100); color:var(--blue-700); }

.header-actions{ display:flex; align-items:center; gap:.6rem; }

.lang-switch{
  display:flex; border:1px solid var(--line); border-radius:var(--radius-pill);
  overflow:hidden; font-family:var(--font-mono); font-size:.74rem; font-weight:600;
}
.lang-switch button{
  background:transparent; border:none; padding:8px 12px; color:var(--ink-soft);
  transition:background var(--dur-1), color var(--dur-1);
}
.lang-switch button.active{ background:var(--blue-700); color:#fff; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:13px 26px;
  border-radius:var(--radius-pill);
  font-weight:700; font-size:.92rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1), background var(--dur-1), color var(--dur-1);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--orange-500), var(--orange-600));
  color:#fff;
  box-shadow:var(--shadow-glow-orange);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(242,148,29,.42); }
.btn-ghost{
  background:rgba(255,255,255,.5);
  border-color:rgba(11,95,168,.25);
  color:var(--blue-800);
}
.btn-ghost:hover{ background:#fff; transform:translateY(-2px); }
.btn-light{
  background:#fff; color:var(--blue-800);
}
.btn-light:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-outline-light{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4);
}
.btn-outline-light:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-sm{ padding:9px 18px; font-size:.82rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.icon-btn{
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.55); border:1px solid rgba(11,95,168,.18);
  color:var(--blue-800);
  transition:background var(--dur-1), transform var(--dur-1);
}
.icon-btn:hover{ background:#fff; transform:translateY(-2px) rotate(8deg); }

.menu-toggle{
  display:none;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:#fff;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.menu-toggle span{ width:18px; height:2px; background:var(--blue-900); border-radius:2px; transition:transform .25s, opacity .25s; }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:980px){
  .main-nav{ position:fixed; inset:0; top:0; z-index:199; background:var(--grad-ocean);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s; }
  .main-nav.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .main-nav ul{ flex-direction:column; gap:.4rem; text-align:center; }
  .main-nav a{ color:#fff; font-size:1.5rem; padding:14px 30px; font-family:var(--font-display); }
  .main-nav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
  .header-actions .btn-ghost{ display:none; }
  .menu-toggle{ display:inline-flex; }
}

/* ============================================
   FLOATING BACKGROUND DECOR
   ============================================ */
.blob{
  position:absolute; border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  opacity:.55;
  animation:float-blob 18s var(--ease-in-out) infinite;
}
@keyframes float-blob{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(3%,-4%) scale(1.06); }
  66%{ transform:translate(-3%,3%) scale(.96); }
}
.bubble{
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,.05) 60%);
  pointer-events:none;
  animation:drift 12s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-22px) translateX(8px); }
}

/* ============================================
   GLASS CARD / PILL TAGS
   ============================================ */
.glass{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.55);
}
.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em;
  padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--blue-100); color:var(--blue-700); font-weight:600;
}

/* ============================================
   REVEAL ANIMATION UTILITIES
   ============================================ */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--delay, 0s);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(0) scale(.92); }
[data-reveal="scale"].in-view{ transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-36px); }
[data-reveal="left"].in-view{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(36px); }
[data-reveal="right"].in-view{ transform:translateX(0); }

/* ============================================
   FOOTER
   ============================================ */
.site-footer{
  background:var(--blue-900);
  color:#BBD6EA;
  padding-block:var(--sp-6) var(--sp-3);
  position:relative; overflow:hidden;
}
.footer-grid{
  display:grid; gap:var(--sp-4);
  grid-template-columns:1.4fr 1fr 1fr 1fr;
}
@media(max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:#fff; font-family:var(--font-display); font-size:1.05rem; margin-bottom:1rem; }
.footer-grid ul li{ margin-bottom:.6rem; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{
  margin-top:var(--sp-5);
  padding-top:var(--sp-3);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.85rem; color:#8FB1CC;
}
.social-row{ display:flex; gap:.6rem; }

/* ============================================
   FLOATING WHATSAPP + BACK TO TOP
   ============================================ */
.float-stack{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:150;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.fab{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
  transition:transform var(--dur-1) var(--ease-out);
}
.fab:hover{ transform:translateY(-4px) scale(1.05); }
.fab-whatsapp{ background:#25D366; color:#fff; }
.fab-whatsapp::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  80%{ box-shadow:0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
.fab-top{
  background:#fff; color:var(--blue-800); border:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, transform .3s, visibility .3s;
}
.fab-top.show{ opacity:1; visibility:visible; transform:translateY(0); }