/* ============================================================
   WABILON — premium dark landing page
   ============================================================ */

:root {
  --bg: #1e1f29;
  --surface: #24252e;
  --surface-2: #292a34;
  --surface-3: #272834;
  --graphite: #20202a;
  --gray: #2a2a35;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.13);
  --text: #ffffff;
  --text-mute: rgba(255,255,255,0.62);
  --text-soft: rgba(255,255,255,0.42);
  --blue: #0003ff;
  --blue-soft: rgba(0, 3, 255, 0.14);
  --blue-glow: rgba(0, 3, 255, 0.35);
  --font-head: 'Instrument Sans', 'Switzer', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Lock horizontal scroll at the root level — some mobile browsers (notably
     iOS Safari) ignore overflow-x:hidden on body alone when decorative
     elements like the ambient blobs sit just outside the viewport. */
  overflow-x: hidden;
  width: 100%;
  overscroll-behavior-x: none;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  position: relative;
  overscroll-behavior-x: none;
  font-size: 15px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, button { font-family: inherit; }

::selection { background: var(--blue); color: #fff; }

/* =====================  Reveal  ===================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =====================  Buttons  ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  background: transparent;
  color: var(--text);
  transition: transform 300ms ease, background 300ms ease, border-color 300ms ease, box-shadow 300ms ease, color 300ms ease;
  white-space: nowrap;
}
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 14px 22px; font-size: 14.5px; }
.btn-block { width: 100%; justify-content: center; }

.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 0 var(--blue-glow);
}
.btn-primary:hover {
  transform: scale(1.02);
  box-shadow: 0 0 32px -6px var(--blue-glow), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.btn-ghost {
  border-color: rgba(255,255,255,0.16);
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.05);
  transform: scale(1.02);
}
/* Solid white button — used for "Inicia sessió" so it stands out on the dark glass nav */
.btn-white {
  background: #ffffff;
  color: #1e1f29;
  border-color: #ffffff;
  font-weight: 600;
}
.btn-white:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
  transform: scale(1.02);
}

/* =====================  Logo  ===================== */
.wb-logo { display: inline-flex; align-items: center; }
.wb-logo-img { display: block; width: auto; user-select: none; -webkit-user-drag: none; }

/* =====================  Nav  ===================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background 400ms ease, backdrop-filter 400ms ease, border-color 400ms ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(12,12,16,0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: 1520px;
  margin: 0 auto;
  height: 64px;
  padding: 0 40px;
  /* 3-column grid keeps the menu strictly centered regardless of how wide the
     logo or right-side group end up being. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 56px;
}
.nav-logo { display: inline-flex; align-items: center; justify-self: end; }
.nav-center { display: flex; gap: 20px; justify-self: center; }
.nav-link {
  font-size: 13.5px;
  color: var(--text-mute);
  transition: color 200ms ease;
  position: relative;
  white-space: nowrap;
}
.nav-link:hover { color: #fff; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms ease;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 18px; justify-self: start; }
/* Top-bar actions as text links with an underline that thickens downward on
   hover. "Inicia sessió" = white line; "Sol·licita una demo" = blue line. */
.nav-action {
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #fff;
  white-space: nowrap;
  padding-bottom: 7px;
}
.nav-action::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 2px;
  border-radius: 2px;
  transition: height 220ms cubic-bezier(.22,.61,.36,1);
}
.nav-action--login::after { background: #fff; }
.nav-action--demo::after  { background: var(--blue); }
.nav-action:hover::after  { height: 8px; }
@media (prefers-reduced-motion: reduce) {
  .nav-action::after { transition: none; }
}
.nav-mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: #fff;
  width: 38px; height: 38px;
  border-radius: 999px;
  align-items: center; justify-content: center;
}
.nav-mobile {
  display: none;
  background: rgba(12,12,16,0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding: 18px 24px 22px;
  flex-direction: column; gap: 14px;
}
.nav-mobile-link { font-family: var(--font-head); font-size: 18px; color: #fff; padding: 6px 0; }
.nav-mobile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
/* In the dropdown the underline links shouldn't stretch to the language pill's
   height (that pushed the underline far below the text); keep it hugging. */
.nav-mobile-actions .nav-action { align-self: center; padding-bottom: 4px; }

/* =====================  Lang switcher  ===================== */
.lang-switcher { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-strong);
  color: #fff;
  padding: 7px 11px 7px 8px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.05em;
  transition: border-color 200ms ease, background 200ms ease;
}
.lang-trigger:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); }
.lang-code { font-weight: 500; letter-spacing: 0.08em; }
.lang-chev { opacity: 0.6; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 6px;
  min-width: 130px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
  z-index: 250;
  animation: lang-menu-in 180ms ease-out;
}
@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.lang-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  transition: background 160ms ease;
}
.lang-item:hover { background: rgba(255,255,255,0.05); }
.lang-item.is-active { background: rgba(0,3,255,0.10); }
.lang-tick { margin-left: auto; color: var(--blue); }

/* =====================  Hero  ===================== */
.hero {
  position: relative;
  /* Cap on big screens (27"+) so the centred content doesn't sit hundreds of
     pixels below the nav. On smaller screens 100vh wins. */
  min-height: min(100vh, 860px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: 130px 28px 36px;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bands {
  position: absolute; inset: -10%;
  display: grid; grid-template-columns: repeat(14, 1fr);
  gap: 0;
  filter: blur(0.4px);
}
.hero-band {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.025) 70%, transparent);
  border-left: 1px solid rgba(255,255,255,0.035);
  position: relative;
  animation: band-breathe 12s ease-in-out infinite;
  transform-origin: center;
}
.hero-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(80,100,255,0.12) 50%, transparent 100%);
  opacity: 0;
  animation: band-glow 18s ease-in-out infinite;
}
.hero-band-0 { animation-delay: 0s; }
.hero-band-1 { animation-delay: -2s; }
.hero-band-2 { animation-delay: -4s; }
.hero-band-3::after { animation-delay: -3s; opacity: 0.6; }
.hero-band-4 { animation-delay: -1s; }
.hero-band-5 { animation-delay: -3s; }
.hero-band-6::after { animation-delay: -8s; opacity: 0.8; }
.hero-band-7 { animation-delay: -5s; }
.hero-band-8 { animation-delay: -7s; }
.hero-band-9::after { animation-delay: -12s; opacity: 0.5; }
.hero-band-10 { animation-delay: -9s; }
.hero-band-11 { animation-delay: -11s; }
.hero-band-12 { animation-delay: -2s; }
.hero-band-13::after { animation-delay: -6s; opacity: 0.4; }

@keyframes band-breathe {
  0%, 100% { opacity: 0.7; transform: scaleY(1); }
  50%      { opacity: 1.0; transform: scaleY(1.015); }
}
@keyframes band-glow {
  0%, 100% { opacity: 0; }
  40%      { opacity: 0.9; }
  60%      { opacity: 0.5; }
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.45;
}
.hero-glow-1 {
  top: 30%; left: 18%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(80,110,255,0.55), transparent 60%);
  animation: glow-drift-1 22s ease-in-out infinite;
}
.hero-glow-2 {
  bottom: -10%; right: 15%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(60,90,255,0.40), transparent 60%);
  animation: glow-drift-2 28s ease-in-out infinite;
}
@keyframes glow-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}
@keyframes glow-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 30px) scale(0.95); }
}
.hero-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) 0 0 / 90px 100%;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  opacity: 0.5;
}
.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(12,12,16,0.85) 95%),
    linear-gradient(180deg, rgba(12,12,16,0.6) 0%, transparent 25%, transparent 70%, rgba(12,12,16,0.95) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  animation: hero-in 1100ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(0,3,255,0.45);
  border-radius: 999px;
  background: rgba(0,3,255,0.06);
  backdrop-filter: blur(8px);
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
  animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}
.hero-headline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(36px, 5.6vw, 72px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin: 0;
  padding-bottom: 0.08em;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff 0%, #fff 55%, rgba(255,255,255,0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-paragraph {
  max-width: 640px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0;
  text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-trust {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  width: 100%;
  max-width: 540px;
  justify-content: center;
}
.hero-trust > svg { color: rgba(255,255,255,0.5); }

/* =====================  Housing context (redesign)  ===================== */
.housing {
  --blue-bright: #2e34ff;
  --blue-glow: rgba(46, 52, 255, 0.30);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  position: relative;
  padding: 40px 32px 120px;
  color: var(--text);
  font-family: var(--font-body);
}
.housing *,
.housing *::before,
.housing *::after { box-sizing: border-box; }
.housing-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

/* Eyebrow */
.housing .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.housing .eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--blue-bright);
  display: inline-block;
}

/* Top grid */
.housing-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 96px;
  align-items: start;
}

/* Left: lead statement */
.housing .lead {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: housing-fade-up 900ms cubic-bezier(.22,.61,.36,1) both;
}
.housing .lead-intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.42;
  color: var(--text-mute);
  font-weight: 400;
  text-wrap: balance;
  max-width: 30ch;
}
.housing .lead-headline {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: #fff;
  text-wrap: balance;
}
.housing .lead-headline em {
  font-style: italic;
  font-weight: 700;
  /* Per-line blue highlight that hugs each line's text (+ a small overhang), so
     when the headline wraps on mobile the bar ends just after the word instead
     of stretching to the inline-block box / screen edge. */
  background-image: linear-gradient(rgba(0, 3, 255, 0.18), rgba(0, 3, 255, 0.18));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.30em;
  padding: 0 0.06em;
  margin: 0 -0.02em;
  border-radius: 2px;
  animation: housing-underline-grow 1100ms 400ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes housing-underline-grow {
  from { background-size: 0% 0.30em; }
  to   { background-size: 100% 0.30em; }
}

/* Right: causes list */
.housing .causes { display: flex; flex-direction: column; gap: 26px; }
.housing .causes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.housing .causes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.housing .cause {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 16px 4px 16px 16px;
  border-bottom: 1px solid var(--border);
  animation: housing-fade-up 700ms both cubic-bezier(.22,.61,.36,1);
}
.housing .cause:nth-child(1) { animation-delay:  60ms; }
.housing .cause:nth-child(2) { animation-delay: 130ms; }
.housing .cause:nth-child(3) { animation-delay: 200ms; }
.housing .cause:nth-child(4) { animation-delay: 270ms; }
.housing .cause:nth-child(5) { animation-delay: 340ms; }
.housing .cause-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.06em;
  align-self: start;
  padding-top: 4px;
}
.housing .cause-text {
  font-family: var(--font-head);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.4;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  letter-spacing: -0.015em;
  text-wrap: pretty;
  min-width: 0;
  overflow-wrap: break-word;
}
.housing .cause-tag { display: none; }

/* The two highlighted causes (Wabilon's domain) */
.housing .cause.is-wabilon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--blue-bright);
  box-shadow: 0 0 12px var(--blue-glow);
  animation: housing-bar-glow 3.4s ease-in-out infinite;
}
@keyframes housing-bar-glow {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 10px var(--blue-glow); }
  50%      { opacity: 1;    box-shadow: 0 0 22px var(--blue-glow); }
}
.housing .cause.is-wabilon .cause-num { color: var(--blue-bright); font-weight: 600; }
.housing .cause.is-wabilon .cause-text { color: #fff; font-weight: 600; }
.housing .cause.is-wabilon .cause-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-bright);
  font-weight: 500;
  white-space: nowrap;
  align-self: start;
  padding-top: 6px;
  animation: housing-tag-flash 2.6s ease-in-out infinite;
}
.housing .cause.is-wabilon .cause-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 8px var(--blue-glow);
}
@keyframes housing-tag-flash {
  0%, 6%    { opacity: 0; transform: translateX(-3px); }
  12%, 78%  { opacity: 1; transform: translateX(0); }
  88%, 100% { opacity: 0; transform: translateX(-3px); }
}

/* Bottom: conclusion + sign-off */
.housing .foot {
  position: relative;
  z-index: 1;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.housing .foot-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
}
.housing .foot-text {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
  text-wrap: balance;
  max-width: min(56ch, 100%);
  overflow-wrap: break-word;
}
.housing .foot-text strong {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(180deg, transparent 70%, rgba(0,3,255,0.16) 70%);
  padding: 0 2px;
}
.housing .sign-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.housing .sign-off-text {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--text-mute);
  letter-spacing: -0.012em;
}
.housing .sign-off-logo {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(0,3,255,0.20));
}

/* Entrance animation */
@keyframes housing-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .housing .lead,
  .housing .cause { animation: none; }
  .housing .cause.is-wabilon::before { animation: none; }
  .housing .cause.is-wabilon .cause-tag { animation: none; opacity: 1; transform: none; }
  .housing .lead-headline em { animation: none; background-size: 100% 0.30em; }
}

/* Responsive */
@media (max-width: 960px) {
  .housing { padding: 36px 24px 72px; }
  .housing-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .housing .lead { position: static; gap: 16px; }
  .housing .lead-intro { max-width: none; }
  .housing .foot { margin-top: 72px; gap: 28px; }
  .housing .cause { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 16px 4px 16px 14px; }
}
@media (max-width: 560px) {
  .housing { padding: 32px 20px 72px; }
  .housing .lead { gap: 12px; }
  .housing .lead-headline { font-size: clamp(40px, 12vw, 56px); }
  .housing-grid { gap: 28px; }
  .housing .cause { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 2px 12px 12px; }
  .housing .cause-tag { grid-column: 2; }
  .housing .cause.is-wabilon .cause-tag { display: inline-flex; margin-top: 2px; padding-top: 0; }
  .housing .sign-off { gap: 12px; }
  .housing .sign-off-logo { height: 30px; }
}

/* =====================  Sections / Containers  ===================== */
.section { padding: 110px 28px; position: relative; }
#about.section { padding-top: 50px; }
.container { max-width: var(--max); margin: 0 auto; }
.container-narrow { max-width: 880px; margin: 0 auto; }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; max-width: 760px; }
.section-head-center { text-align: center; align-items: center; margin-left: auto; margin-right: auto; }
.section-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--blue);
  display: inline-block;
}
.section-head-center .section-label { justify-content: center; align-self: center; }
.section-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
  color: #fff;
}
.section-sub {
  font-size: 16px;
  color: var(--text-mute);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
  text-wrap: pretty;
}
.section-head-center .section-sub { margin-left: auto; margin-right: auto; }

/* =====================  Cards (about)  ===================== */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px 30px;
  transition: transform 350ms ease, border-color 350ms ease, box-shadow 350ms ease, background 350ms ease;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 260px;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,3,255,0.45);
  background: var(--surface-3);
  box-shadow: 0 20px 60px -30px var(--blue-glow), 0 0 0 1px rgba(0,3,255,0.08);
}
.card-num {
  font-family: var(--font-head);
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.card-title {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.card-text { font-size: 14.5px; color: var(--text-mute); line-height: 1.6; margin: 0; }

/* =====================  Product cards  ===================== */
.products-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  margin: -24px 0 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.products-tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-mute);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 220ms ease, color 220ms ease;
}
.products-tab:hover {
  color: #fff;
}
.products-tab.is-active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 30px -12px var(--blue-glow);
}
.products-tab.is-active:hover {
  color: #fff;
}
.cards-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 18px;
}
.products-dev-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-mute);
  opacity: 0.75;
  letter-spacing: 0.01em;
}
.products-audience {
  margin: 28px 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.products-audience-text {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: rgba(255,255,255,0.95);
  text-align: center;
  animation: products-tab-rise 460ms cubic-bezier(.22,.61,.36,1) both;
}
/* Translucent blue highlight (same idea as the housing headline "vivienda"),
   reused on key words across sections via [[...]] markers and on the products
   audience text. Painted as a per-line background so it underlines every line if
   the text wraps; a little horizontal padding makes the bar extend slightly past
   the words on both sides (incl. the right). Draws in (0 -> full width) on mount. */
.hl-underline {
  background-image: linear-gradient(rgba(0, 3, 255, 0.18), rgba(0, 3, 255, 0.18));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.42em;
  padding: 0 0.14em;
  margin: 0 -0.04em;
  border-radius: 2px;
  animation: hl-underline-draw 700ms 200ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes hl-underline-draw {
  from { background-size: 0% 0.42em; }
  to   { background-size: 100% 0.42em; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-underline { animation: none; background-size: 100% 0.42em; }
}
/* Two-cell grid that overlays both logos in the same position. Whichever has
   .is-active is opaque and translated to its final position; the other is
   invisible. CSS transitions ensure identical timing in both directions. */
.products-logo-stack {
  display: grid;
  justify-items: center;
  align-items: center;
}
.products-studio-logo {
  grid-area: 1 / 1;
  /* Using max-height (not fixed height) lets the image shrink proportionally
     when max-width: 100% kicks in on narrow viewports. With both maxes set and
     width/height: auto, the browser preserves the intrinsic aspect ratio
     instead of vertically stretching the PNG. */
  height: auto;
  width: auto;
  max-height: 88px;
  max-width: 100%;
  display: block;
  opacity: 0;
  transition: opacity 460ms cubic-bezier(.22,.61,.36,1),
              transform 460ms cubic-bezier(.22,.61,.36,1);
  user-select: none;
  pointer-events: none;
}
/* Each PNG has its wordmark left-aligned with different right-side empty space
   inside a 2737px-wide canvas: Studio's content centre sits 303px (= 11.07% of
   canvas width) left of the canvas centre, Compliance's 71px (= 2.6%). We shift
   each image right by that percentage so the visible wordmark lands dead-centre.
   Using % (not px) keeps the centring correct at any rendered size — the offset
   scales with the image. The translateY portion is what the transition animates
   between the inactive (rise) and active (rest) states; X stays constant so the
   animation is perfectly symmetric in both directions. */
.products-studio-logo--studio     { transform: translate(11.1%, 22px); }
.products-studio-logo--studio.is-active     { transform: translate(11.1%, 0); opacity: 0.95; pointer-events: auto; }
.products-studio-logo--compliance { transform: translate(2.6%, 22px); }
.products-studio-logo--compliance.is-active { transform: translate(2.6%, 0); opacity: 0.95; pointer-events: auto; }
@keyframes products-tab-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .products-audience { margin: 22px 0 28px; gap: 16px; }
  .products-audience-text { font-size: 21px; }
  .products-studio-logo { max-height: 70px; }
  /* translateX is percentage-based above, so it scales automatically — no
     per-breakpoint override needed. */
}
.product-card {
  position: relative;
  background:
    radial-gradient(ellipse at top left, rgba(0,3,255,0.10), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 44px 40px 40px;
  min-height: 320px;
  transition: transform 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
}
.product-card-edge {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--blue) 30%, var(--blue) 70%, transparent);
  opacity: 0.7;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,3,255,0.40);
  box-shadow: 0 30px 80px -40px var(--blue-glow);
}
.product-card-tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-family: var(--font-head);
}
.product-card-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.product-card-text { font-size: 15px; color: var(--text-mute); line-height: 1.6; margin: 0; flex: 1; }
.product-card-foot {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute);
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.product-card:hover .product-card-foot { background: var(--blue); color: #fff; border-color: var(--blue); }

/* "Com funciona" toggle button replaces the legacy round arrow icon */
.product-card-toggle {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.product-card-toggle:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.product-card-toggle-arrow { transition: transform 320ms cubic-bezier(.4, 0, .2, 1); }
.product-card.is-expanded .product-card-toggle {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.product-card.is-expanded .product-card-toggle-arrow { transform: rotate(90deg); }

/* Expandable panel — back to the max-height approach (the grid version
   leaked a sliver of the panel's border-top when collapsed). The default
   rule is the closing transition; the .is-open rule is the opening
   transition, which is what we tune for smoothness. */
.product-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms ease-in, opacity 240ms ease-in;
}
.product-panel.is-open {
  /* Generous max-height to fit 4 long steps in any language. The panel only
     visually expands to the real content height — this is just the ceiling
     for the open-state transition. */
  max-height: 2000px;
  opacity: 1;
  /* Slow, smooth ease-out so the curtain feels like it just glides open
     without any perceived "kick" at the start or buffering at the end. */
  transition: max-height 620ms cubic-bezier(.16, 1, .3, 1),
              opacity 420ms cubic-bezier(.16, 1, .3, 1);
}
.product-panel-inner {
  padding: 32px 36px;
  background: #0a0a0a;
  border-radius: 14px;
  border-top: 2px solid rgba(0, 3, 255, 0.30);
}
.product-panel-intro {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 28px;
  text-wrap: balance;
}
.product-panel-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Subtle vertical line connecting the step number circles */
.product-panel-steps::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.product-panel-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
}
.product-panel-step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #0a0a0a;
  border: 1px solid rgba(0, 3, 255, 0.5);
  color: #0003ff;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.product-panel-step-body { flex: 1; padding-top: 4px; }
.product-panel-step-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 6px;
}
.product-panel-step-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  margin: 0;
}

/* =====================  Diff grid  ===================== */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  /* Opaque so the skyline image behind doesn't bleed through the 1px gaps
     when card backgrounds change on hover / .is-active. */
  background: #2c2d37;
  border: 1px solid #2c2d37;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.diff-item {
  background: var(--surface);
  padding: 32px 28px 36px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: background 320ms ease;
  min-height: 220px;
}
.diff-item:hover { background: var(--surface-3); }
.diff-item::before {
  content: '';
  position: absolute; left: 0; top: 28px; bottom: 28px;
  width: 2px;
  background: var(--blue);
  opacity: 0;
  transition: opacity 280ms ease;
}
.diff-item:hover::before { opacity: 1; }
.diff-item-num {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #fff;
  font-weight: 500;
}
.diff-item-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  color: #fff;
}
.diff-item-text { font-size: 14px; color: var(--text-mute); line-height: 1.55; margin: 0; }

/* =====================  FAQ  ===================== */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 280ms ease;
}
.faq.is-open { border-color: rgba(0,3,255,0.40); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 22px 26px;
  text-align: left;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  gap: 16px;
}
.faq-q-text { flex: 1; }
.faq-q-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  color: var(--text-mute);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
  flex-shrink: 0;
}
.faq.is-open .faq-q-icon {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.faq-a-wrap {
  overflow: hidden;
  transition: max-height 380ms cubic-bezier(.22,.61,.36,1);
}
.faq-a {
  padding: 0 26px 24px;
  font-size: 14.5px;
  color: var(--text-mute);
  line-height: 1.65;
  max-width: 720px;
}

/* =====================  Contact  ===================== */
.section-contact { position: relative; padding-bottom: 160px; }
.contact-glow {
  position: absolute;
  left: 50%; top: 30%;
  transform: translateX(-50%);
  width: 720px; height: 480px;
  background: radial-gradient(ellipse, rgba(0,3,255,0.25), transparent 65%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}
.section-contact > .container { position: relative; z-index: 1; }
.form-card {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 40px 40px 36px;
  margin-top: 48px;
  box-shadow: 0 40px 100px -50px rgba(0,3,255,0.30);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.field-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.field-req { color: var(--blue); }
.field-counter {
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.field-counter.is-max { color: rgba(255, 120, 120, 0.85); }
.field-input {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-strong);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  resize: vertical;
}
.field-input:focus {
  border-color: var(--blue);
  background: rgba(0,3,255,0.04);
  box-shadow: 0 0 0 3px rgba(0,3,255,0.18);
}
.field-input::placeholder { color: var(--text-soft); }
.field.has-err .field-input { border-color: rgba(255,80,80,0.6); }

.checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  color: var(--text-mute);
  margin: 18px 0 22px;
  cursor: pointer;
  user-select: none;
}
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-box {
  width: 18px; height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  flex-shrink: 0;
  margin-top: 1px;
}
.checkbox input:checked + .checkbox-box {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.checkbox.has-err .checkbox-box { border-color: rgba(255,80,80,0.6); }
.link {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-underline-offset: 3px;
}

.form-success {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 12px;
  text-align: center;
  color: var(--blue);
}
.form-success p { color: #fff; font-family: var(--font-head); font-size: 18px; font-weight: 500; margin: 0; }

/* =====================  Footer  ===================== */
.footer {
  background: #0a0a0e;
  border-top: 1px solid var(--border);
  padding: 64px 28px 48px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 60px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-rights { font-size: 12.5px; color: var(--text-soft); margin: 0; }
.footer-email { font-size: 13px; color: var(--text-mute); transition: color 200ms ease; }
.footer-email:hover { color: var(--blue); }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  opacity: 0.9;
  transition: color 200ms ease, opacity 200ms ease;
}
.footer-social:hover { color: var(--blue); opacity: 1; }

/* =====================  Cookie banner  ===================== */
.cookie-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  max-width: 340px;
  background: rgba(20, 22, 30, 0.94);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 14px 14px 12px;
  z-index: 9990;
  box-shadow: 0 18px 36px -16px rgba(0,0,0,0.6);
  animation: cookie-in 280ms ease-out;
}
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-text {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}
.cookie-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cookie-link {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
  transition: color 200ms ease;
}
.cookie-link:hover { color: #fff; }
.cookie-accept {
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.cookie-accept:hover {
  transform: scale(1.03);
  box-shadow: 0 0 14px -2px var(--blue-glow);
}
@media (max-width: 640px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  margin: 0 0 6px;
}
.footer-link {
  font-size: 13.5px;
  color: var(--text-mute);
  transition: color 180ms ease;
}
.footer-link:hover { color: #fff; }

/* =====================  Legal overlay  ===================== */
.legal-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: #0c0c10;
  overflow-y: auto;
  animation: legal-in 320ms cubic-bezier(.22,.61,.36,1);
}
@keyframes legal-in { from { opacity: 0; } to { opacity: 1; } }
.legal-overlay-bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(60,90,255,0.10), transparent 60%),
    #0c0c10;
  z-index: -1;
}
.legal-overlay-header {
  position: sticky; top: 0;
  background: rgba(12,12,16,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 18px 28px;
  z-index: 2;
}
.legal-back {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: #fff;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 200ms ease, background 200ms ease;
}
.legal-back:hover { border-color: var(--blue); background: rgba(0,3,255,0.06); }
.legal-overlay-main { padding: 80px 28px 120px; }
.legal-doc {
  max-width: 780px;
  margin: 0 auto;
  font-family: var(--font-body);
}
.legal-h1 {
  font-family: var(--font-head);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 8px;
  color: #fff;
}
.legal-meta {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  text-transform: uppercase;
  margin: 0 0 48px;
}
.legal-h2 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.legal-h2:first-of-type { margin-top: 24px; }
.legal-p {
  font-size: 14.5px;
  color: var(--text-mute);
  line-height: 1.7;
  margin: 0 0 14px;
  white-space: pre-wrap;
  text-wrap: pretty;
}

/* =====================  Responsive  ===================== */
@media (max-width: 980px) {
  /* Nav becomes a simple flex row: logo at the left, sign-in + hamburger
     grouped at the right. We override the desktop grid layout. */
  .nav-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 88px;
  }
  .nav-logo { justify-self: initial; }
  .nav-center { display: none; }
  /* Top bar shows only the logo + hamburger; the sign-in / demo / language
     controls move inside the dropdown menu. */
  .nav-right { display: none; }
  .nav-mobile-toggle { display: inline-flex; margin-left: auto; }
  .nav.is-open + .nav-mobile, .nav-mobile { display: flex; }
  .cards-3 { grid-template-columns: 1fr; }
  .cards-2 { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 90px 24px; }
  .form-card { padding: 28px 24px; }
  .form-row { grid-template-columns: 1fr; }
  /* On mobile/tablet the hero content sticks to the top so the badge always
     sits below the fixed nav. Without this, align-items: center can push
     the badge up behind the nav on shorter viewports. */
  /* Hug the content height on tablet (portrait) so there's no empty hero space
     pushing the next section down; the gap becomes just the paddings. */
  .hero { padding: 100px 24px 36px; min-height: auto; align-items: flex-start; }
  #about.section { padding-top: 36px; }
}
@media (max-width: 640px) {
  .diff-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero { padding: 84px 22px 40px; min-height: min(92vh, 640px); }
  .nav-inner { padding: 0 20px; height: 72px; }
  .hero-headline { font-size: clamp(32px, 9vw, 44px); }
  .hero-paragraph { font-size: 15.5px; }
  /* Keep the trust icons hugging the text instead of being pushed to the
     container edges when the line wraps on mobile. */
  .hero-trust { gap: 8px; }
  .hero-trust > span { max-width: 240px; text-align: center; text-wrap: balance; }
  .product-card { padding: 32px 26px; min-height: 280px; }
  .product-card-title { font-size: 23px; }
  /* Compact the expanded "Com funciona" panel on mobile so all 4 steps fit
     comfortably in any language without feeling sprawling. */
  .product-panel-inner { padding: 22px 22px; }
  .product-panel-steps { gap: 18px; }
  .product-panel-steps::before { left: 15px; }
  .product-panel-step { gap: 14px; }
  .product-panel-step-num { width: 32px; height: 32px; font-size: 12.5px; }
  .product-panel-intro { font-size: 14.5px; margin-bottom: 20px; }
  .product-panel-step-title { font-size: 15px; }
  .product-panel-step-text { font-size: 13.5px; line-height: 1.55; }
  .products-tabs { width: 100%; justify-content: stretch; }
  .products-tab { flex: 1; padding: 11px 14px; font-size: 13px; }
  .faq-q { padding: 18px 20px; font-size: 15.5px; }
  .faq-a { padding: 0 20px 20px; }
  .legal-overlay-main { padding: 56px 22px 80px; }
  .section { padding: 70px 22px; }
  #about.section { padding-top: 28px; }
}
/* Big screens (27"+ / large monitors) — keep things from feeling sparse. */
@media (min-width: 1440px) {
  .hero { min-height: 860px; padding: 130px 28px 70px; }
  .section { padding: 100px 28px; }
}
/* Logo scales down on smaller viewports — overrides the inline height set
   in WabilonLogo so the 55px nav logo doesn't crowd a shorter nav bar. */
@media (max-width: 980px) {
  .nav-logo .wb-logo,
  .nav-logo .wb-logo-img { height: 44px !important; }
}
@media (max-width: 640px) {
  .nav-logo .wb-logo,
  .nav-logo .wb-logo-img { height: 36px !important; }
}

/* =====================  About carousel  ===================== */
.carousel { position: relative; width: 100%; }
.carousel-stage {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1300px;
  transform-style: preserve-3d;
}
.cc-card {
  position: absolute;
  top: 50%; left: 50%;
  background: linear-gradient(180deg, #0e0e0e 0%, #0a0a0a 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 460ms cubic-bezier(.22, 1, .36, 1),
              opacity 380ms cubic-bezier(.22, 1, .36, 1),
              filter 460ms cubic-bezier(.22, 1, .36, 1),
              border-color 460ms ease,
              box-shadow 460ms ease;
  cursor: pointer;
  will-change: transform, opacity;
}
.cc-card.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) translate(0, 0) translateZ(-300px) rotateY(0deg) scale(0.7); }
.cc-edge {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,3,255,0.7) 50%, transparent);
  opacity: 0.6;
}
.cc-card.is-active .cc-edge { opacity: 1; }

/* Position: center */
.cc-pos-0 {
  width: min(60%, 720px);
  height: 400px;
  transform: translate(-50%, -50%) translate(0, 0) translateZ(0) rotateY(0deg) scale(1);
  z-index: 3;
  opacity: 1;
  filter: blur(0);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 40px 100px -50px rgba(0,3,255,0.45), 0 0 0 1px rgba(0,3,255,0.05);
  cursor: default;
}

/* Position: side previews */
/* Side cards peek out from behind the active one in a 3D circular arc.
   They sit BEHIND the active card (lower z-index) and are tilted inward via rotateY,
   so they read as the next/previous in a rotating coverflow. */
.cc-pos--1, .cc-pos-1 {
  width: 42%;
  height: 360px;
  z-index: 1;
  opacity: 0.42;
  filter: blur(5px);
}
.cc-pos--1 {
  transform: translate(-50%, -50%) translate(-72%, 0) translateZ(-180px) rotateY(34deg) scale(0.88);
  transform-origin: center center;
}
.cc-pos-1 {
  transform: translate(-50%, -50%) translate(72%, 0) translateZ(-180px) rotateY(-34deg) scale(0.88);
  transform-origin: center center;
}
.cc-pos--1:hover, .cc-pos-1:hover { opacity: 0.7; filter: blur(2.5px); }

/* Active card inner layout */
.cc-inner {
  display: grid;
  grid-template-columns: 55% 45%;
  height: 100%;
  align-items: stretch;
}
.cc-text {
  padding: 44px 40px 40px;
  display: flex; flex-direction: column; gap: 16px;
  justify-content: center;
}
.cc-num {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #fff;
  font-weight: 500;
  animation: cc-fadein 320ms 60ms both ease-out;
}
.cc-title {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  color: #fff;
  text-wrap: balance;
  animation: cc-fadein 340ms 100ms both ease-out;
}
.cc-desc {
  font-size: 14.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin: 0;
  text-wrap: pretty;
  animation: cc-fadein 360ms 140ms both ease-out;
}
.cc-illus-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at center, rgba(0,3,255,0.08), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.02), transparent 50%);
  border-left: 1px solid rgba(255,255,255,0.05);
}
.cc-illus-wrap::before {
  content: '';
  position: absolute; inset: 16px;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse, #000 30%, transparent 80%);
  pointer-events: none;
}
.illus { width: 100%; height: auto; max-height: 280px; position: relative; z-index: 1; }
@keyframes cc-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Side preview content */
.cc-preview {
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  justify-content: flex-end;
}
.cc-prev-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: rgba(255,255,255,0.85);
  text-wrap: balance;
}

/* Illustration animations (when active) */
.illus.is-active .il1-node { animation: il-node-in 600ms both ease-out; }
.illus.is-active .il1-center { animation: il-pop-in 700ms 280ms both cubic-bezier(.34,1.56,.64,1); transform-origin: 160px 130px; }
.illus.is-active .il1-lines path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: il-line-draw 900ms 400ms forwards ease-out; }

.illus .il2-ring-0 { transform-origin: 160px 130px; animation: il-spin 38s linear infinite; }
.illus .il2-ring-1 { transform-origin: 160px 130px; animation: il-spin-rev 22s linear infinite; }
.illus .il2-ring-2 { transform-origin: 160px 130px; animation: il-spin 14s linear infinite; }
.illus .il2-orbit-1 { transform-origin: 160px 130px; animation: il-spin 10s linear infinite; }
.illus .il2-orbit-2 { transform-origin: 160px 130px; animation: il-spin-rev 7s linear infinite; }
.illus .il2-orbit-3 { transform-origin: 160px 130px; animation: il-spin 5s linear infinite; }
.illus .il2-pulse { transform-origin: 160px 130px; animation: il-pulse 2.6s ease-out infinite; }
@keyframes il-spin { to { transform: rotate(360deg); } }
@keyframes il-spin-rev { to { transform: rotate(-360deg); } }
@keyframes il-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

.illus.is-active .il3-row { animation: il-row-in 500ms both ease-out; }
.illus.is-active .il3-pipe { animation: cc-fadein 600ms 200ms both ease-out; }
.illus.is-active .il3-gear { transform-origin: 264px 130px; animation: il-pop-in 700ms 380ms both cubic-bezier(.34,1.56,.64,1), il-spin 18s linear infinite 1.2s; }

/* Continuous wave animation on the document checks: each tick pulses
   bigger in sequence from top to bottom, then loops. The per-row delay
   is set inline in JSX (i * 400ms) so the wave is staggered. */
.illus .il3-check {
  transform-box: fill-box;
  transform-origin: center;
  animation: il-tick-pulse 3.6s ease-in-out infinite;
}
@keyframes il-tick-pulse {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.35); }
  20%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .illus .il3-check { animation: none; }
}

@keyframes il-node-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes il-pop-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes il-line-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes il-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Controls */
.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin-top: 32px;
}
.cc-arrow {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-strong);
  color: var(--text-mute);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease, transform 200ms ease;
}
.cc-arrow:hover { border-color: var(--blue); color: #fff; background: rgba(0,3,255,0.08); transform: scale(1.04); }
.cc-dots { display: flex; gap: 16px; }
.cc-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, width 220ms ease;
}
/* Invisible pseudo-element extends the click/tap target without changing
   the visible dot — meets accessibility recommendations for touch targets. */
.cc-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.cc-dot:hover { background: rgba(255,255,255,0.4); }
.cc-dot.is-active { background: var(--blue); width: 24px; }

/* Responsive
   From tablet portrait (<=1024px) down we switch the carousel to a vertical
   stacked layout — illustration on top, text below — so descriptions are
   always fully readable in every language. The 760px and 420px breakpoints
   override only the sizes/paddings to keep things proportional. */
@media (max-width: 1024px) {
  /* Trim About section padding so the card has more room horizontally. Card
     height tuned for tablet: descriptions wrap to only 2-3 lines at this
     width, so the card stays compact (no big empty gap below the text). */
  #about.section { padding-left: 16px; padding-right: 16px; }
  .carousel-stage { height: auto; min-height: 420px; }
  .cc-pos-0 { width: 100%; max-width: 680px; height: auto; min-height: 410px; }
  .cc-pos--1, .cc-pos-1 { display: none; }
  .cc-inner { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; height: 100%; }
  .cc-illus-wrap {
    order: -1;
    padding: 20px;
    border-left: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .cc-text { padding: 20px 24px 22px; gap: 10px; justify-content: center; }
  .cc-title { font-size: 22px; line-height: 1.22; }
  .cc-desc { font-size: 14.5px; line-height: 1.6; }
  .cc-num { font-size: 11px; }
}
@media (max-width: 760px) {
  /* Compact card — text padding reduced + min-height tightened so CA card
     01/03 fills exactly. Stage matches card so no empty gap between card
     bottom and the carousel controls. */
  #about.section { padding-left: 18px; padding-right: 18px; }
  .carousel-stage { min-height: 445px; }
  .cc-pos-0 { max-width: 520px; min-height: 435px; }
  .cc-inner { grid-template-rows: 180px 1fr; }
  .cc-illus-wrap { padding: 14px; }
  .cc-text { padding: 18px 22px 18px; gap: 10px; }
  .cc-title { font-size: 20px; line-height: 1.22; }
  .cc-desc { font-size: 13.5px; line-height: 1.55; }
  .cc-num { font-size: 10.5px; }
}
@media (max-width: 420px) {
  #about.section { padding-left: 14px; padding-right: 14px; }
  .carousel-stage { min-height: 425px; }
  .cc-pos-0 { min-height: 415px; }
  .cc-inner { grid-template-rows: 165px 1fr; }
  .cc-illus-wrap { padding: 12px; }
  .cc-text { padding: 14px 18px 14px; gap: 8px; }
  .cc-title { font-size: 18.5px; }
  .cc-desc { font-size: 13px; line-height: 1.5; }
}


/* =====================  Global ambient backdrop  ===================== */
/* App is the positioned ancestor for the absolute background layers below */
.app { position: relative; }
.bg-ambient {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(40, 60, 200, 0.08), transparent 60%),
    linear-gradient(180deg, #1e1f29 0%, #1b1c25 50%, #181922 100%);
}
.bg-ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
/* Network background — absolute full-document SVG layer above ambient blobs, behind content.
   Scrolls naturally with the page. Lines and nodes are nearly invisible by default;
   they reveal smoothly around the cursor. */
.network-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .network-bg { opacity: 0.6; }
}
.bg-ambient-blob-1 {
  width: 720px; height: 720px;
  top: -10%; left: -8%;
  background: radial-gradient(circle, rgba(15, 35, 255, 0.45), transparent 65%);
  animation: blob-1 38s ease-in-out infinite;
}
.bg-ambient-blob-2 {
  width: 640px; height: 640px;
  top: 30%; right: -10%;
  background: radial-gradient(circle, rgba(35, 55, 255, 0.38), transparent 65%);
  animation: blob-2 46s ease-in-out infinite;
}
.bg-ambient-blob-3 {
  width: 560px; height: 560px;
  bottom: -10%; left: 20%;
  background: radial-gradient(circle, rgba(0, 20, 230, 0.34), transparent 65%);
  animation: blob-3 52s ease-in-out infinite;
}
.bg-ambient-blob-4 {
  width: 460px; height: 460px;
  top: 60%; left: 38%;
  background: radial-gradient(circle, rgba(45, 65, 255, 0.24), transparent 65%);
  animation: blob-4 64s ease-in-out infinite;
}
.bg-ambient-blob-5 {
  width: 600px; height: 600px;
  top: 15%; right: 5%;
  background: radial-gradient(circle, rgba(25, 45, 255, 0.34), transparent 65%);
  animation: blob-2 50s ease-in-out infinite reverse;
}
.bg-ambient-blob-6 {
  width: 540px; height: 540px;
  top: 45%; left: -5%;
  background: radial-gradient(circle, rgba(50, 70, 255, 0.28), transparent 65%);
  animation: blob-3 56s ease-in-out infinite reverse;
}
.bg-ambient-blob-7 {
  width: 680px; height: 680px;
  top: 78%; right: 15%;
  background: radial-gradient(circle, rgba(15, 35, 255, 0.30), transparent 65%);
  animation: blob-1 60s ease-in-out infinite reverse;
}
.bg-ambient-blob-8 {
  width: 500px; height: 500px;
  top: 92%; left: 18%;
  background: radial-gradient(circle, rgba(40, 60, 255, 0.22), transparent 65%);
  animation: blob-4 70s ease-in-out infinite;
}
/* Extra hero-area blobs (rendered only on the landing) — strengthen the corner
   blue glow above the fold so the home page reads as warmly as the blog page. */
.bg-ambient-blob-9 {
  width: 820px; height: 820px;
  top: 2%; right: -12%;
  background: radial-gradient(circle, rgba(20, 40, 255, 0.50), transparent 65%);
  animation: blob-2 44s ease-in-out infinite;
}
.bg-ambient-blob-10 {
  width: 640px; height: 640px;
  top: 22%; left: -10%;
  background: radial-gradient(circle, rgba(30, 50, 255, 0.42), transparent 65%);
  animation: blob-3 50s ease-in-out infinite;
}
.bg-ambient-blob-11 {
  width: 520px; height: 520px;
  top: 8%; left: 38%;
  background: radial-gradient(circle, rgba(50, 70, 255, 0.32), transparent 65%);
  animation: blob-1 56s ease-in-out infinite;
}

@keyframes blob-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(120px, 80px) scale(1.12); }
  66%      { transform: translate(60px, 180px) scale(0.94); }
}
@keyframes blob-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-160px, 100px) scale(1.08); }
  70%      { transform: translate(-80px, -60px) scale(0.92); }
}
@keyframes blob-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(140px, -140px) scale(1.15); }
}
@keyframes blob-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-180px, -120px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-ambient-blob { animation: none; }
}


/* =====================  Logo / Nav adjustments  ===================== */
/* Desktop only — at mobile/tablet portrait we use the 88px/72px heights set
   in the responsive media queries (otherwise this rule overrides them due
   to source order and the hero badge ends up hidden behind the nav). */
@media (min-width: 981px) {
  .nav-inner { height: 120px; }
}
.nav-logo svg { display: block; }

/* Top nav and footer share the same translucent glass treatment so they don't
   appear darker than the page body. Bolder white text so links clearly stand out. */
.nav {
  background: rgba(30, 31, 41, 0.45);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav.is-scrolled {
  background: rgba(30, 31, 41, 0.65);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.footer {
  background: rgba(30, 31, 41, 0.45);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
/* Stronger white text in nav + footer so it stands out over the glass */
.nav-link {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}
.nav-link:hover { color: #fff; }
.footer-link {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}
.footer-link:hover { color: #fff; }
.footer-rights { color: rgba(255, 255, 255, 0.75); }
.footer-email { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.footer-col h4 {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}

/* Larger carousel cards — desktop only. These rules used to apply at all
   viewports and were silently overriding the mobile/tablet @media rules
   (height: 460px clipped long CA descriptions; the huge padding squeezed
   the text container even further). Scoping them to desktop fixes that. */
@media (min-width: 1025px) {
  .cc-pos-0 { width: min(64%, 800px); height: 460px; }
  .cc-pos--1, .cc-pos-1 { height: 380px; }
  .cc-text { padding: 56px 48px 52px; }
  .illus { max-height: 360px; }
}

/* Lighter carousel cards — match FAQ surface */
.cc-card,
.cc-card.cc-pos-0 {
  background: var(--surface-2);
}
.cc-card { background: var(--surface-2); }

/* Hi-res illustrations — give SVGs more breathing room so vector detail reads */
.illus { max-height: 420px; shape-rendering: geometricPrecision; }
.cc-illus-wrap { padding: 16px; }
.cc-illus-wrap svg { width: 100%; height: 100%; }
.cc-pos-0 {
  box-shadow: 0 40px 100px -50px rgba(0,3,255,0.45), 0 0 0 1px rgba(0,3,255,0.05);
}
.cc-illus-wrap {
  background:
    radial-gradient(ellipse at center, rgba(60,90,255,0.10), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.025), transparent 50%);
  border-left-color: rgba(255,255,255,0.06);
}

/* Demo CTA: rotate arrow up on hover */
.btn-primary svg {
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
}
.btn-primary:hover svg {
  transform: rotate(-90deg);
}

/* Form: error message + disabled button + invisible captcha container */
.form-error {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 90, 90, 0.35);
  background: rgba(255, 90, 90, 0.08);
  color: #ff8a8a;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}
.h-captcha-container { display: none; }
.h-captcha-container iframe { display: block; }

/* =====================  Blog index page  ===================== */
.blog-page { padding: 180px 28px 120px; }
.blog-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.blog-title {
  font-family: var(--font-head);
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.blog-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
  text-wrap: pretty;
}
.blog-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 80px 0;
  font-style: italic;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 1040px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: 1fr; } }

/* Blog card — same surface treatment as the product cards but image-first */
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at top left, rgba(0, 3, 255, 0.10), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 3, 255, 0.40);
  box-shadow: 0 30px 80px -40px var(--blue-glow);
}
.blog-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0c0c12;
  overflow: hidden;
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
}
.blog-card:hover .blog-card-image img { transform: scale(1.04); }
.blog-card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.blog-card-meta-dot { opacity: 0.6; }
.blog-card-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.22;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.blog-card-subtitle {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* =====================  Article page  ===================== */
.article-page { padding: 160px 28px 100px; }
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 200ms ease;
}
.article-back:hover { color: #fff; }
.article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.article-meta-dot { opacity: 0.6; }
.article-title {
  font-family: var(--font-head);
  font-size: clamp(32px, 4.6vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #fff;
  text-wrap: balance;
}
.article-subtitle {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  text-wrap: pretty;
}
.article-hero {
  margin: 48px 0 56px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  background: #0c0c12;
}
.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-lang-note {
  display: inline-block;
  margin: 0 0 32px;
  padding: 10px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 3, 255, 0.08);
  border: 1px solid rgba(0, 3, 255, 0.25);
  border-radius: 10px;
}
.article-not-found {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 80px 0;
}
.article-body { color: rgba(255, 255, 255, 0.82); font-size: 16.5px; line-height: 1.75; }
.article-lead {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 24px;
  font-weight: 500;
  text-wrap: pretty;
}
.article-p { margin: 0 0 22px; text-wrap: pretty; }
.article-h2 {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 56px 0 18px;
  color: #fff;
  text-wrap: balance;
}
.article-h3 {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  margin: 32px 0 10px;
  color: #fff;
}
@media (max-width: 720px) {
  .blog-page { padding-top: 140px; }
  .article-page { padding-top: 130px; }
  .article-hero { margin: 32px 0 36px; }
  .article-h2 { font-size: 22px; margin-top: 40px; }
  .article-h3 { font-size: 17px; margin-top: 26px; }
  .article-body { font-size: 16px; }
  .article-lead { font-size: 17px; }
}

/* =====================  Blueprint city skyline (between About / Productes) =====================
   Decorative blueprint image that "constructs itself" as the user scrolls.
   Animation is a CSS mask that rises from bottom to top — set imperatively in
   JS for performance. mix-blend-mode: screen drops the image's opaque black
   background so only the blue line work blends with the dark page bg.
   Negative margins pull the layer slightly into the surrounding sections so
   the skyline appears to slip behind the section content (z-index: -1). */
.app { isolation: isolate; }

/* =====================  Diff section + skyline reveal  =====================
   "Què ens diferencia" is a regular section. Behind the 6 cards sits a
   blueprint skyline image whose CSS mask is animated by JS as the section
   scrolls into view, giving the impression that the city is being built.
   No pinning / scroll-jacking — the page scrolls normally. */
.diff-section { overflow: hidden; }

/* Wrapper around .diff-grid so the skyline can size itself relative to the
   grid (and overflow above/below proportionally) instead of using viewport
   units. This keeps the skyline scale tied to the cards on every screen. */
.diff-grid-wrap { position: relative; }
.diff-skyline {
  position: absolute;
  /* Anchored slightly above the grid centre so the buildings (bottom of
     the image) sit lower visually and don't get clipped by the section's
     overflow at the bottom. The sky (top of the image) is allowed to
     overflow further upward — that area is fine to be clipped. */
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: auto;
  max-width: none;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Default mask: nothing visible. JS overrides on every scroll frame. */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 0%, transparent 6%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 0%, transparent 6%, transparent 100%);
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  /* Honour reduced-motion: skip the mask and show the full skyline. */
  .diff-skyline {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
}

.blueprint-skyline {
  display: block;
  width: 100%;
  /* Big negative top: physically pulls the image higher in the layout so the
     reveal animation triggers earlier as the user scrolls. The animation
     itself is the gradual elemCenter-based one in blueprint-skyline.jsx. */
  margin: -120px 0 -80px;
  padding: 0;
  pointer-events: none;
  position: relative;
  z-index: -1;
  overflow: visible;
  text-align: center;     /* centres the size-capped image */
}
.blueprint-skyline-img {
  display: inline-block;
  width: 100%;
  max-width: 1480px;      /* a bit larger again */
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  /* Lines kept very faint — they should read like a soft architectural ghost
     behind the section content, not jump forward. */
  opacity: 0.22;
  /* Initial mask state — only a thin slice at the bottom is visible. JS
     overrides this on mount and on every scroll frame. */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 0%, transparent 8%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 0%, transparent 8%, transparent 100%);
}
@media (max-width: 1024px) { .blueprint-skyline { margin: -80px 0 -55px; } }
@media (max-width: 768px)  { .blueprint-skyline { margin: -50px 0 -35px; } }
@media (prefers-reduced-motion: reduce) {
  /* Honour reduced-motion: skip the reveal and keep the full image. */
  .blueprint-skyline-img {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
}

/* =====================  Article tag chips (above title)  ===================== */
.article-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.article-tag {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid;
}
.article-tag-blue  { background: rgba(0, 3, 255, 0.10); color: #b9c4ff; border-color: rgba(120, 140, 255, 0.32); }
.article-tag-green { background: rgba(40, 180, 110, 0.10); color: #a3e6c4; border-color: rgba(80, 200, 130, 0.30); }
.article-tag-gray  { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.12); }

/* =====================  Article body rich content (dark theme)  ===================== */
.article-body-rich h2,
.article-body-rich h3 {
  font-family: var(--font-head);
  color: #fff;
  text-wrap: balance;
}
.article-body-rich h2 { font-size: 26px; font-weight: 600; line-height: 1.22; margin: 56px 0 18px; }
.article-body-rich h3 { font-size: 19px; font-weight: 600; line-height: 1.3; margin: 32px 0 12px; }
.article-body-rich p {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.article-body-rich p strong { color: #fff; font-weight: 600; }
.article-body-rich em { color: rgba(255, 255, 255, 0.92); font-style: italic; }

/* Stat grid */
.article-body-rich .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  margin: 28px 0 32px;
}
.article-body-rich .stat-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 16px;
}
.article-body-rich .stat-num {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #6f80ff;
}
.article-body-rich .stat-num span {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 4px;
}
.article-body-rich .stat-label {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 8px;
  line-height: 1.4;
}
.article-body-rich .stat-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 4px;
}

/* Municipalities table */
.article-body-rich .table-wrap { overflow-x: auto; margin: 24px 0 32px; }
.article-body-rich table.mun-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.article-body-rich table.mun-table th {
  text-align: left;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.article-body-rich table.mun-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  vertical-align: middle;
}
.article-body-rich table.mun-table td strong { color: #fff; font-weight: 500; }
.article-body-rich table.mun-table tr:last-child td { border-bottom: none; }
.article-body-rich .bar-wrap { display: flex; align-items: center; gap: 10px; }
.article-body-rich .bar { height: 8px; border-radius: 4px; display: inline-block; }
.article-body-rich .bar-red    { background: #e25555; }
.article-body-rich .bar-orange { background: #e89642; }
.article-body-rich .bar-green  { background: #2eb578; }
.article-body-rich .trend-up { color: #ff8a8a; font-weight: 500; font-size: 13px; }
.article-body-rich .trend-ok { color: #6fd9a3; font-weight: 500; font-size: 13px; }

/* Callout / quote */
.article-body-rich .callout {
  border-left: 3px solid var(--blue);
  background: rgba(0, 3, 255, 0.07);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 28px 0;
}
.article-body-rich .callout p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}
.article-body-rich .callout-author {
  font-size: 13px;
  color: #b9c4ff;
  margin-top: 10px;
  font-style: normal;
}

/* Pill list */
.article-body-rich .pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 22px;
}
.article-body-rich .pill {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  font-weight: 400;
}
.article-body-rich .pill strong { color: #fff; font-weight: 600; }

/* Wabilon CTA box */
.article-body-rich .wabilon-box {
  background: linear-gradient(180deg, rgba(0, 3, 255, 0.08), rgba(0, 3, 255, 0.02));
  border: 1px solid rgba(0, 3, 255, 0.30);
  border-radius: 14px;
  padding: 26px 28px 28px;
  margin: 36px 0;
}
.article-body-rich .wabilon-box .wab-eyebrow {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  color: #6f80ff;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 10px;
}
.article-body-rich .wabilon-box h3 {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
}
.article-body-rich .wabilon-box p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin: 0 0 14px;
}
.article-body-rich .feat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.article-body-rich .feat-list li {
  position: relative;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin: 0;
  list-style: none;
}
.article-body-rich .feat-list li:last-child { border-bottom: none; }
.article-body-rich .feat-list li .check {
  position: absolute;
  left: 0;
  top: 11px;
  color: #6fd9a3;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.65;
}
.article-body-rich .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--blue);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.article-body-rich .cta-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 32px -6px var(--blue-glow);
}

/* FAQ items */
.article-body-rich .faq-item {
  margin-bottom: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.article-body-rich .faq-item:last-of-type { border-bottom: none; }
.article-body-rich .faq-item strong {
  display: block;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.article-body-rich .faq-item p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  margin: 0;
}

/* SEO footer (related topics) */
.article-body-rich .seo-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.article-body-rich .seo-footer .kw-label {
  font-family: var(--font-head);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
}
.article-body-rich .seo-footer .pill { font-size: 12px; }

/* Mobile tightening */
@media (max-width: 720px) {
  .article-body-rich h2 { font-size: 22px; margin: 40px 0 14px; }
  .article-body-rich p { font-size: 16px; }
  .article-body-rich .stat-card { padding: 14px 14px 12px; }
  .article-body-rich .stat-num { font-size: 24px; }
  .article-body-rich .wabilon-box { padding: 22px 22px 24px; }
  .article-body-rich table.mun-table th,
  .article-body-rich table.mun-table td { padding: 10px 12px; font-size: 13px; }
}

/* ============================================================
   PRICING PAGE (/precios, /ca/precios)
   Design by Claude Design; integrated as a standalone page.
   Tokens (--bg, --blue, --font-*) inherited from :root above.
   Section backgrounds are transparent so the global ambient
   background shows through, like the rest of the site.
   ============================================================ */
.pricing-page { position: relative; z-index: 1; }

/* ---------- Section base ---------- */
.pricing-section {
  position: relative;
  padding: 150px 28px 40px;   /* top clears the fixed nav */
  color: var(--text);
  font-family: var(--font-body);
}
.pricing-container { max-width: var(--max); margin: 0 auto; }

/* ---------- Page header ---------- */
.pricing-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; text-align: center; margin: 0 auto 72px;
  max-width: 900px;
}
.pricing-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-soft); font-weight: 500;
  display: inline-flex; align-items: center; gap: 12px;
}
.pricing-eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--blue);
  display: inline-block;
}
.pricing-title {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.04; letter-spacing: -0.03em; margin: 0;
  text-wrap: balance; color: #fff;
  white-space: nowrap; /* keep the title on one line (wraps again on phones, below) */
}
.pricing-hl {
  background-image: linear-gradient(rgba(0,3,255,0.22), rgba(0,3,255,0.22));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.42em;
  padding: 0 0.14em; margin: 0 -0.04em; border-radius: 2px;
}
.pricing-sub {
  font-size: 16px; color: var(--text-mute); line-height: 1.6; margin: 0;
  max-width: 560px; text-wrap: pretty;
}

/* ---------- Audience selector — three words, single underline ---------- */
.pricing-audience {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin: 0 auto 40px;
  padding: 0 8px;
  max-width: 720px;
}
.pricing-audience-row {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(20px, 5vw, 64px);
  padding-bottom: 18px;
}
.pricing-audience-row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.16);
}
.pricing-audience-btn {
  appearance: none; background: transparent; border: 0; padding: 0;
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400; letter-spacing: -0.018em;
  color: var(--text-mute);
  cursor: pointer;
  line-height: 1.2;
  transition: color 240ms ease, font-weight 240ms ease, opacity 240ms ease;
  position: relative;
}
.pricing-audience-btn:hover { color: rgba(255,255,255,0.85); }
.pricing-audience-btn[aria-selected="true"] {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.pricing-audience-indicator {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--blue);
  box-shadow: 0 0 12px -1px var(--blue-glow);
  transition: transform 380ms cubic-bezier(.22,.61,.36,1),
              width 380ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pricing-audience-indicator { transition: none; }
}

/* ---------- Billing toggle — elliptical switch (Anual / Mensual) ----------
   Annual (default): blue track, white knob on the left, label "Anual -10%".
   Monthly: knob slides right, track turns gray, label "Mensual". */
.pricing-billing {
  display: flex; justify-content: center;
  margin: 0 auto 40px;
}
.pricing-billing-switch {
  display: inline-flex; align-items: center; gap: 14px;
  appearance: none; background: transparent; border: 0; padding: 6px;
  cursor: pointer;
}
.pricing-billing-track {
  position: relative;
  flex-shrink: 0;
  width: 52px; height: 20px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 8px 22px -10px var(--blue-glow);
  transition: background 280ms cubic-bezier(.22,.61,.36,1), box-shadow 280ms ease;
}
.pricing-billing-switch[data-billing="monthly"] .pricing-billing-track {
  background: #4b4c57;
  box-shadow: none;
}
/* Elliptical knob (wider than tall), not a perfect circle. */
.pricing-billing-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px -1px rgba(0,0,0,0.45);
  transition: transform 280ms cubic-bezier(.22,.61,.36,1);
}
.pricing-billing-switch[data-billing="monthly"] .pricing-billing-knob {
  transform: translateX(22px);
}
.pricing-billing-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  color: #fff;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
/* -10% in a white rectangular chip so it pops. */
.pricing-billing-discount {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  color: #1e1f29;
  background: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.01em;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .pricing-billing-track, .pricing-billing-knob { transition: none; }
}

/* ---------- Plans grid + cards ---------- */
.pricing-plans { display: none; opacity: 0; transition: opacity 380ms ease; }
.pricing-plans.is-active { display: block; opacity: 1; }
.pricing-plans.is-fading { opacity: 0; }

.pricing-grid { display: grid; gap: 22px; }
.pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }
.pricing-grid-1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }

.pricing-card {
  position: relative;
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,0.07), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 32px 32px;
  transition: transform 350ms ease, border-color 350ms ease,
              box-shadow 350ms ease, background 350ms ease;
  display: flex; flex-direction: column; gap: 22px;
  overflow: hidden;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 28px 70px -40px rgba(0,0,0,0.6);
}
.pricing-card[data-featured="true"]:hover {
  border-color: rgba(0,3,255,0.40);
  box-shadow: 0 30px 80px -40px var(--blue-glow);
}
/* Accent edge + corner. Default is WHITE (subtle) on every card; the featured
   ("recomendado") card overrides it to blue so it stands out more. */
.pricing-card-edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.3) 70%, transparent);
}
.pricing-card-edge-br {
  position: absolute; right: 0; bottom: 0;
  width: 65%; height: 78%;
  border-right: 2px solid rgba(255,255,255,0.28);
  border-bottom: 2px solid rgba(255,255,255,0.28);
  border-bottom-right-radius: 18px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(130% 150% at 100% 100%, #000 0%, #000 26%, transparent 68%);
          mask-image: radial-gradient(130% 150% at 100% 100%, #000 0%, #000 26%, transparent 68%);
}
.pricing-card[data-featured="true"] .pricing-card-edge {
  background: linear-gradient(180deg, transparent, var(--blue) 30%, var(--blue) 70%, transparent);
  opacity: 0.8;
}
.pricing-card[data-featured="true"] .pricing-card-edge-br {
  border-right-color: var(--blue);
  border-bottom-color: var(--blue);
  opacity: 0.85;
}
.pricing-card[data-featured="true"] {
  background: var(--surface-2);
  border-color: rgba(0,3,255,0.22);
}

/* ---------- Card head ---------- */
.pricing-card-head { display: flex; flex-direction: column; gap: 10px; }
/* Title + badge on the same row so the badge sits at the top-right and all the
   pack names line up at the same height across cards (badged or not). */
.pricing-card-titlerow {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.pricing-card-tag-badge {
  flex-shrink: 0;
  margin-top: 5px;
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 0 18px -4px var(--blue-glow);
}
.pricing-card-title {
  font-family: var(--font-head); font-size: 26px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.1; margin: 0; color: #fff;
}
.pricing-card-blurb {
  font-size: 14px; color: var(--text-mute); line-height: 1.55; margin: 0;
}

/* ---------- Feature list ---------- */
.pricing-features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.pricing-feature {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  align-items: start;
  font-size: 14px; color: var(--text-mute); line-height: 1.5;
}
.pricing-feature-check {
  width: 20px; height: 20px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.pricing-placeholder {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.005em;
}

/* ---------- Card foot: price + CTAs ---------- */
.pricing-card-foot {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  align-items: center;
  text-align: center;
}
.pricing-price {
  display: inline-flex; align-items: baseline; justify-content: center;
  gap: 8px;
  font-family: var(--font-head); color: #fff;
}
.pricing-price-amount { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.pricing-price-period {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--text-soft); letter-spacing: 0.06em;
}
.pricing-price-consult {
  font-family: var(--font-head);
  font-size: 32px; font-weight: 600; letter-spacing: -0.025em;
  color: #fff; display: inline-block;
}
.pricing-vat {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  text-align: center;
}
.pricing-vat-annual, .pricing-vat-monthly { display: none; }
.pricing-card[data-billing="annual"] .pricing-vat-annual { display: inline; }
.pricing-card[data-billing="monthly"] .pricing-vat-monthly { display: inline; }

/* Billing toggle shows the active price */
.pricing-price [data-billing-period] { display: none; }
.pricing-card[data-billing="monthly"] .pricing-price [data-billing-period="monthly"],
.pricing-card[data-billing="annual"]  .pricing-price [data-billing-period="annual"] { display: inline-flex; align-items: baseline; gap: 8px; }

.pricing-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }

/* ---------- Buttons ---------- */
.pricing-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em;
  background: transparent; color: var(--text);
  cursor: pointer; text-decoration: none;
  transition: transform 300ms ease, background 300ms ease,
              border-color 300ms ease, box-shadow 300ms ease, color 300ms ease;
  white-space: nowrap; width: 100%;
}
.pricing-btn-primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 0 0 0 var(--blue-glow);
}
.pricing-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px -6px var(--blue-glow), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.pricing-btn-ghost {
  border-color: rgba(255,255,255,0.16);
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.pricing-btn-ghost:hover {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}
.pricing-btn-outline {
  width: auto;
  background: #ffffff;
  color: var(--bg);
  border-color: var(--bg);
  padding: 12px 24px;
}
.pricing-btn-outline:hover {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 0 32px -8px var(--blue-glow);
  transform: translateY(-1px);
}

/* ---------- Eyebrow variant — white text (dash stays blue) ---------- */
.pricing-eyebrow-blue { color: #ffffff; font-weight: 500; }
.pricing-eyebrow-blue::before { background: var(--blue); }

/* ---------- Horizontal rule separator ---------- */
.pricing-rule {
  border: 0; height: 1px;
  background: rgba(255,255,255,0.16);
  margin: 0 auto;
  max-width: var(--max);
  width: calc(100% - 56px);
}

/* ---------- "Pruébalo ahora" callout ---------- */
.pricing-extra { position: relative; padding: 40px 28px; }
.pricing-extra-bg {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  min-height: 420px; padding: 80px 32px;
  background-image:
    linear-gradient(rgba(8,10,40,0.42), rgba(8,10,40,0.55)),
    url('/assets/pruebalo-bg.webp');
  background-size: cover; background-position: center 50%; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.pricing-extra-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; max-width: 640px;
}
.pricing-extra-text {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15; letter-spacing: -0.025em;
  color: #fff; margin: 0; text-wrap: balance;
}
.pricing-extra-actions { margin-top: 8px; }

/* ---------- FAQs ---------- */
.pricing-faq-section { padding: 40px 28px 110px; }
.pricing-faq-head { display: flex; flex-direction: column; gap: 16px; margin: 0 0 40px; max-width: 720px; }
.pricing-faq-title {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05; letter-spacing: -0.028em;
  color: #fff; margin: 0; text-wrap: balance;
}
.pricing-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.pricing-faq-item { border-bottom: 1px solid var(--border); }
.pricing-faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: flex-start; gap: 18px;
  padding: 22px 6px; cursor: pointer; user-select: none;
}
.pricing-faq-item summary::-webkit-details-marker { display: none; }
.pricing-faq-q {
  font-family: var(--font-head);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500; letter-spacing: -0.015em;
  color: #fff; line-height: 1.35;
}
@keyframes pricing-faq-rotate { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
.pricing-faq-toggle {
  flex-shrink: 0; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #ffffff;
  position: relative; transform: rotate(0deg);
}
.pricing-faq-item:not([open]) summary:hover .pricing-faq-toggle {
  animation: pricing-faq-rotate 650ms cubic-bezier(.4,.0,.2,1) forwards;
}
.pricing-faq-toggle::before, .pricing-faq-toggle::after {
  content: ''; position: absolute;
  background: #ffffff; border-radius: 2px;
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease;
}
.pricing-faq-toggle::before { width: 14px; height: 2px; }
.pricing-faq-toggle::after  { width: 2px;  height: 14px; }
.pricing-faq-item[open] .pricing-faq-toggle { animation: none; transform: none; }
.pricing-faq-item[open] .pricing-faq-toggle::after { transform: scaleY(0); opacity: 0; }
.pricing-faq-body {
  padding: 0 48px 26px 6px;
  font-size: 14.5px; color: var(--text-mute); line-height: 1.65; max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .pricing-faq-toggle, .pricing-faq-toggle::before, .pricing-faq-toggle::after { transition: none; }
}

/* ---------- Scroll reveal ---------- */
.pricing-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 600ms cubic-bezier(.22,.61,.36,1),
              transform 600ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.pricing-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pricing-reveal { opacity: 1; transform: none; transition: none; }
  .pricing-card, .pricing-btn { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .pricing-section { padding: 130px 22px 40px; }
  /* Stack into one centered column at a comfortable width (tablet/large phone)
     so the cards don't stretch full-width with sparse content. */
  .pricing-grid-3 { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .pricing-grid-2 { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .pricing-section { padding: 120px 18px 24px; }
  .pricing-billing { margin: 0 auto 32px; }
  .pricing-extra { padding: 28px 18px; }
  .pricing-extra-bg { padding: 60px 22px; min-height: 340px; border-radius: 14px; }
  .pricing-faq-section { padding: 28px 18px 90px; }
  .pricing-faq-body { padding-right: 6px; }
  .pricing-head { margin-bottom: 48px; }
  .pricing-title { white-space: normal; }
  .pricing-audience { margin-bottom: 40px; }
  .pricing-audience-row { gap: 14px; padding-bottom: 14px; }
  .pricing-audience-btn { font-size: 16px; }
  .pricing-card { padding: 28px 22px 26px; }
  .pricing-price-amount { font-size: 34px; }
  .pricing-rule { width: calc(100% - 36px); }
}