/* =========================================================================
   PARLARIO — public marketing + legal site
   =========================================================================
   Design system: this file follows the SAME :root structure and variable
   naming as the reference stylesheet at
   C:\Repository\GitHub\BridgewareTech Website\public_html\css\style.css
   (Bridgeware Technologies' own site — same navy/cyan/Space-Grotesk+Manrope
   system used by the Parlario app). Cross-reference the
   two files directly: same grouping order (Brand palette → Semantic → Type
   scale → Spacing → radius/shadow/easing → nav height), same variable
   names for everything that overlaps. Sections that file doesn't have
   (WhatsApp-green accents, cookie consent widget, the Guides docs section)
   are added as clearly-commented extensions, following its own convention.

   FILE SPLIT (for whoever edits this later):
     - style.css (this file)   — site-wide: variables, reset, buttons, nav,
       footer, hero/stats/cards/split sections, pricing page, legal prose,
       cookie widget. Loaded on every page.
     - guides.css              — Guides docs section only (sidebar, lesson
       layout, accordion, search). Loaded only on guides/*.html, so pages
       that don't need it don't pay for it.
   To add a new landing/pricing/legal component: add it here, in the
   matching commented section below. To add something guides-specific: it
   belongs in guides.css instead.
   ========================================================================= */

:root {
  /* ---- Brand palette ----
     Light is the default theme (see THEME SYSTEM note below) — this used
     to be the only palette this file had, hardcoded straight into :root,
     dark-only. It now lives unchanged under [data-theme="dark"] a few
     lines down; this block is the new light palette, same token names,
     same structure, so every rule already written against --bg-0/--text/
     etc. keeps working with zero changes anywhere else in the file. */
  --bg-0: #ffffff;
  --bg-1: #f5f7fa;
  --bg-2: #eaeef4;
  --navy: #dce9f6;
  --navy-soft: #e8f1fa;
  --cyan: #14b8c9;
  --cyan-soft: #3fdde8;
  --cyan-deep: #0e8a97;
  --text: #101828;
  --text-muted: #4b5768;
  --text-faint: #7c8798;
  --border: rgba(16, 24, 40, 0.1);
  --border-strong: rgba(16, 24, 40, 0.18);

  /* ---- Semantic ---- */
  --color-primary: var(--cyan);
  --color-on-primary: #04121e;
  /* A visible light gray, not near-white — --bg-0 is pure white, so a
     near-white card had almost no fill contrast against the page and only
     read as a "card" via its shadow (easy to miss) or on hover. This way
     a card is visible at rest, shadow or not. */
  --surface: rgba(241, 244, 248, 0.92);
  --surface-solid: #f2f4f8;
  --glow: rgba(20, 184, 201, 0.22);
  --glow-soft: rgba(20, 184, 201, 0.1);

  /* ---- Extension: WhatsApp green ----
     Not part of the Bridgeware Technologies reference palette (it hardcodes #25d366
     inline in its own WhatsApp-specific spots); tokenized here instead so
     it's never a repeated hardcoded hex. Scoped to genuinely
     WhatsApp-branded UI only: the hero eyebrow badge, list checkmarks, and
     the WhatsApp icon card — see USAGE NOTE at each usage site.
     --whatsapp-light is used as small-text color (e.g. the calculator's
     "Free today" badge) — on white it needs to be a deep, legible green,
     not the bright dark-mode tint that's only readable on navy. */
  --whatsapp: #25d366;
  --whatsapp-light: #0e8a45;
  --whatsapp-deep: #0c6b36;
  --whatsapp-ink: #eafbf1;
  --whatsapp-soft: rgba(37, 211, 102, 0.14);

  /* ---- Extension: status ---- */
  --danger: #c65c50;
  --warning: #96762c;
  --instagram: #e1306c;
  --telegram: #229ed9;
  /* Faint divider shade used only for the "not responsible for" side of the
     /terms responsibility split — not in the reference palette, distinct
     from --border-strong which is used for interactive-element borders. */
  --text-divider-faint: #c7cfdb;

  /* ---- Type scale ---- */
  --font-heading: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --fs-3xl: clamp(2rem, 4vw, 2.75rem);
  --fs-hero: clamp(2.5rem, 6vw, 4.25rem);

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  /* Extension: this site's landing page is longer than the reference's, one
     extra step is useful for the biggest section gaps. */
  --space-16: 8rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Both shadows are much lighter here than in dark mode — a shadow tuned
     against navy reads as a muddy gray smear on white. Same treatment
     guides.css already uses for its own light/dark pair. */
  --shadow-card: 0 10px 30px rgba(16, 24, 40, 0.08);
  --shadow-glow: 0 0 40px rgba(20, 184, 201, 0.14);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Floating pill header (padding around it) + a gap before content starts —
     bumped up from the old 72px flush bar to leave room for both. */
  --nav-height: 92px;
  /* Extension: max content width, used by .container (reference hardcodes
     72rem directly in the selector instead of tokenizing it). */
  --container-width: 72rem;

  color-scheme: light;
}

/* ==========================================================================
   THEME SYSTEM
   ==========================================================================
   Light is the default (the block above). This block is everything the
   site looked like before this file had a theme system at all — the exact
   values that were previously hardcoded straight into :root, moved here
   unchanged, so switching to dark reproduces the site's original look
   pixel-for-pixel. Toggled the same way the /guides section already does
   it (see guides.css and assets/js/theme-toggle.js): a `data-theme`
   attribute on <html>, set by an inline script in <head> before first
   paint (avoids a flash of the wrong theme) and by the theme-toggle pill
   in the header. Same localStorage key ("parlario.theme") as guides, so a
   visitor's choice carries across the whole site, not just one section. */
:root[data-theme="dark"] {
  --bg-0: #050c1a;
  --bg-1: #081326;
  --bg-2: #0c1b36;
  --navy: #16294e;
  --navy-soft: #1e3560;
  --cyan: #3fdde8;
  --cyan-soft: #6fd3df;
  --cyan-deep: #14b8c9;
  --text: #eaf2fb;
  --text-muted: #9dafc8;
  --text-faint: #6e82a3;
  --border: rgba(148, 190, 230, 0.14);
  --border-strong: rgba(148, 190, 230, 0.28);

  --color-primary: var(--cyan);
  --color-on-primary: #04121e;
  --surface: rgba(13, 27, 53, 0.62);
  --surface-solid: #0c1a33;
  --glow: rgba(63, 221, 232, 0.35);
  --glow-soft: rgba(63, 221, 232, 0.14);

  --whatsapp: #25d366;
  --whatsapp-light: #34e37f;
  --whatsapp-deep: #128c4a;
  --whatsapp-ink: #06210f;
  --whatsapp-soft: rgba(37, 211, 102, 0.14);

  --danger: #e0847a;
  --warning: #d7b56a;
  --instagram: #e1306c;
  --telegram: #229ed9;
  --text-divider-faint: #48597a;

  --shadow-card: 0 10px 40px rgba(2, 8, 20, 0.55);
  --shadow-glow: 0 0 40px rgba(63, 221, 232, 0.18);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(80% 50% at 50% -10%, rgba(63, 221, 232, 0.09), transparent 60%),
    var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* .navbar is now `position: fixed` (floating pill, see below) instead of
   `sticky`, so it no longer reserves its own space in the flex flow —
   this replaces that reserved space explicitly. */
main {
  padding-top: var(--nav-height);
}

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

button {
  font-family: inherit;
}

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

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(63, 221, 232, 0.35);
  border-radius: 999px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-4);
  z-index: 2000;
  background: var(--cyan);
  color: var(--color-on-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

p {
  color: var(--text-muted);
  margin: 0;
}

.container {
  width: min(100% - 2.5rem, var(--container-width));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2.5rem, 52rem);
  margin-inline: auto;
}

section {
  position: relative;
}

/* ---------- Shared surfaces ----------
   Base look-and-feel for every translucent, hoverable card on the site
   (stat cards, ecosystem cards, FAQ items use their own close variant).
   Combine with a component class for its specific padding/layout, e.g.
   class="stat surface-card" or class="card surface-card" — don't
   re-declare background/border/hover here on a new component; add
   `surface-card` to it instead. */

.surface-card {
  /* Flat surface (not the navy-tinted gradient .cta-banner uses) — on
     short cards that gradient's navy stop never fully fades into --bg-1
     before hitting the bottom edge, showing up as a hard darker band
     across the top. A solid --surface-solid plus a soft glow avoids that
     seam while still reading as a genuine surface, not a flat fill. */
  background: radial-gradient(80% 120% at 50% 0%, rgba(63, 221, 232, 0.1), transparent 60%),
    var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  /* Shadow used to be hover-only. That was fine in dark mode, where
     --surface already reads as a lighter panel against the darker page —
     but in light mode --surface and --bg-0 are both close to white, so a
     card had nothing but a faint border to read as a card at all until you
     hovered it. A resting shadow gives it real presence in both themes. */
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.surface-card:hover {
  transform: translateY(-5px);
  border-color: rgba(63, 221, 232, 0.4);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

/* .eyebrow itself is defined once, in the "Section shells" block below
   (kept next to .section-head so both are easy to find together). */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.2s var(--ease-out),
    background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.btn--primary {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color: var(--color-on-primary);
  padding: 16px 36px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(63, 221, 232, 0.32);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(63, 221, 232, 0.45);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan-soft);
  transform: translateY(-2px);
}

.btn--sm {
  min-height: 38px;
  padding: 0.45rem 1.15rem;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

/* ---------- Navbar ----------
   Floating pill, not a flush sticky bar: `.navbar` is a fixed, transparent,
   click-through wrapper that just reserves the top-of-viewport padding;
   `.navbar__inner` is the actual rounded bar with its own background/blur/
   border, sized to content instead of spanning edge-to-edge. Mega-menu
   panels (below) hang off this same pill, not off each trigger. */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 14px 1.25rem 0;
  pointer-events: none;
}

.navbar__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  width: min(100%, 78rem);
  padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  /* Was hardcoded to a fixed dark navy — invisible/low-contrast against
     itself in light mode, since the nav's own text correctly follows
     var(--text) (dark ink) while this stayed permanently dark. --surface
     already is this exact "translucent glass panel" role, themed. */
  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.brand__icon {
  height: 34px;
  width: auto;
  flex: none;
}

/* El logo tiene dos versiones: la cian en el tema claro y la crema-cian en
   el oscuro, donde la cian sola se apaga sobre el marino. El tema lo estampa
   el script del <head> en data-theme; sin JavaScript decide el sistema. */
.brand__icon--dark {
  display: none;
}

:root[data-theme="dark"] .brand__icon--light {
  display: none;
}

:root[data-theme="dark"] .brand__icon--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand__icon--light {
    display: none;
  }

  :root:not([data-theme]) .brand__icon--dark {
    display: block;
  }
}

.brand__word {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}

.brand__word-group {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
}

.brand__word-group em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--cyan);
}

.navbar__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  list-style: none;
  flex: 1;
  margin: 0;
  padding: 0;
}

.navbar__links a:not(.btn) {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}
.navbar__links a:not(.btn):hover {
  color: var(--text);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.navbar__toggle svg {
  width: 20px;
  height: 20px;
}

/* ---------- Locale toggle ---------- */

.locale-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
}

.locale-toggle a {
  min-width: 2.35rem;
  text-align: center;
  padding: 0.32rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}
.locale-toggle a:hover {
  color: var(--text);
}
.locale-toggle a.is-active {
  background: var(--cyan);
  color: var(--color-on-primary);
}

/* ---------- Theme toggle (light / dark / system) ----------
   Same pill, same three icons, same behavior as the one already live in
   /guides (see guides.css and assets/js/theme-toggle.js) — ported as-is
   rather than redesigned, so switching themes feels identical everywhere
   on the site. */
.theme-toggle {
  display: inline-flex;
  gap: 2px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  padding: 2px;
}

.theme-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  width: 1.6rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.theme-toggle button svg {
  height: 0.9rem;
  width: 0.9rem;
}

.theme-toggle button:hover {
  color: var(--text);
}

.theme-toggle button.is-active {
  background: var(--cyan);
  color: var(--color-on-primary);
}

@media (max-width: 900px) {
  .navbar__actions .theme-toggle {
    display: none;
  }
}

/* ---------- Mobile nav ---------- */

@media (max-width: 900px) {
  .navbar__links {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    z-index: 90;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-6) 1.75rem;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
    overflow-y: auto;
  }

  .navbar__links a:not(.btn) {
    font-size: var(--fs-lg);
    padding: 0.6rem 0;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  html.nav-open .navbar__links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .navbar__links .navbar__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-4);
    border-bottom: none;
  }

  .navbar__mobile-toggles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
  }

  /* Matches the theme-toggle pill's height here — the locale-toggle's
     default sizing (built for the spacious desktop top bar) otherwise
     reads visibly larger next to it in this compact drawer row. */
  .navbar__mobile-toggles .locale-toggle {
    padding: 2px;
  }

  .navbar__mobile-toggles .locale-toggle a {
    min-width: auto;
    height: 1.6rem;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
  }

  /* Language and theme toggles move into the burger drawer on mobile
     (next to Log in / See plans) instead of squeezing into the top bar
     alongside the logo and hamburger — see .navbar__mobile-toggles. */
  .navbar__actions .btn {
    display: none;
  }

  .navbar__actions .locale-toggle {
    display: none;
  }

  .navbar__toggle {
    display: inline-flex;
  }

  html.nav-open {
    overflow: hidden;
  }
}

.navbar__mobile-actions {
  display: none;
}

/* ---------- Mega menu (Producto / Recursos) ----------
   Full-width panel that drops from the pill itself, not from each trigger
   (respond.io-style — one shared panel position, centered under the whole
   header). Desktop: opens on hover-intent (close delay so moving the
   cursor from trigger to panel doesn't dismiss it) and on click/Enter for
   keyboard + touch. Animates open/closed by height, not opacity/translate:
   `max-height` starts at 0 here and assets/js/main.js sets it inline to
   the panel's real `scrollHeight` on open (and back to "" on close) — a
   fixed CSS max-height would either clip taller panels or leave a dead
   gap under shorter ones, since Producto and Recursos hold very different
   amounts of content. Mobile: folds into the existing full-screen nav as
   a plain accordion section instead — see assets/js/main.js. */

.nav-mega {
  position: static;
}

.nav-mega__trigger {
  position: relative;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s var(--ease-out);
}

.nav-mega__trigger:hover,
.nav-mega[data-expanded="true"] .nav-mega__trigger {
  color: var(--text);
}

.nav-mega__chevron {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.2s var(--ease-out);
}

.nav-mega[data-expanded="true"] .nav-mega__chevron {
  transform: rotate(180deg);
}

.nav-mega__panel {
  position: fixed;
  top: 82px;
  left: 50%;
  z-index: 90;
  width: min(calc(100vw - 2.5rem), 78rem);
  max-height: 0;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background: var(--surface-solid);
  box-shadow: var(--shadow-card);
  pointer-events: none;
  transition: max-height 0.32s var(--ease-out), border-color 0.32s var(--ease-out);
}

.nav-mega[data-expanded="true"] .nav-mega__panel {
  border-color: var(--border-strong);
  pointer-events: auto;
}

.nav-mega__panel-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 260px;
  gap: var(--space-8);
  padding: var(--space-7, 2.5rem);
}

/* El menu de Producto tiene una columna mas que el de Recursos (se le
   sumo "Automatizaciones" con Rutas y Google Calendar). Va como
   modificador y no cambiando la regla de arriba, que la comparten los
   dos menus: al otro le quedaria una columna vacia. */
.nav-mega__panel--4col .nav-mega__panel-inner {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 240px;
  gap: var(--space-6, 1.75rem);
}

.nav-mega__panel--compact .nav-mega__panel-inner {
  grid-template-columns: repeat(3, minmax(0, 1fr)) 260px;
}

.nav-mega__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-mega__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-2) var(--space-2);
}

.nav-mega__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.2s var(--ease-out);
}

.nav-mega__item:hover {
  background: rgba(148, 190, 230, 0.07);
}

.nav-mega__item--soon {
  cursor: default;
}

.nav-mega__item--soon:hover {
  background: transparent;
}

.nav-mega__item--soon .nav-mega__item-icon {
  opacity: 0.6;
}

.nav-mega__item-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  vertical-align: middle;
}

.nav-mega__item-icon {
  flex: none;
  width: 36px;
  height: 36px;
}

.nav-mega__item-icon svg {
  width: 18px;
  height: 18px;
}

.nav-mega__item-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
}

.nav-mega__item-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.nav-mega__highlight {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  /* Flat surface like .surface-card — the navy-tinted gradient left a hard
     seam across the top of a card this short. See .surface-card. */
  background: radial-gradient(80% 120% at 50% 0%, rgba(63, 221, 232, 0.1), transparent 60%),
    var(--surface-solid);
}

.nav-mega__highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(20, 184, 201, 0.12);
  color: var(--cyan-deep);
}

.nav-mega__highlight-icon svg {
  width: 20px;
  height: 20px;
}

.nav-mega__highlight-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
  margin-bottom: var(--space-2);
}

.nav-mega__highlight-desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.nav-mega__highlight-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--cyan);
}

.nav-mega__highlight-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease-out);
}

.nav-mega__highlight-link:hover svg {
  transform: translateX(3px);
}

/* Wraps 2+ .nav-mega__highlight-link anchors ("Contact us" + "Get
   support" in the Resources menu's "Have questions?" card) so they stack
   instead of sitting side by side — the link itself stays
   inline-flex (sized to its own content) for every other highlight card
   that still has just the one link. */
.nav-mega__highlight-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@media (max-width: 900px) {
  .nav-mega__trigger {
    width: 100%;
    justify-content: space-between;
    font-size: var(--fs-lg);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-mega__panel {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    transform: none;
    pointer-events: auto;
    display: none;
    box-shadow: none;
    border: none;
    background: transparent;
    transition: none;
  }

  .nav-mega[data-expanded="true"] .nav-mega__panel {
    display: block;
  }

  /* Also targets .nav-mega__panel--compact/--4col .nav-mega__panel-inner
     explicitly: those rules (2 classes) outrank a bare
     ".nav-mega__panel-inner" here (1 class) regardless of media-query
     order, so without this the Resources/Product menus' 3- and 4-column
     grids stayed multi-wide (icons/text overlapping and squeezed) on
     mobile instead of collapsing to one column. */
  .nav-mega__panel-inner,
  .nav-mega__panel--compact .nav-mega__panel-inner,
  .nav-mega__panel--4col .nav-mega__panel-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-3) 0 var(--space-2) var(--space-3);
  }

  .nav-mega__highlight {
    background: transparent;
    border: none;
    padding: var(--space-2) 0 0;
  }

  .nav-mega__eyebrow {
    margin-left: 0;
  }
}

/* ---------- Hero (ported from bridgewaretech.com/parlario, live-inspected) ---------- */

.hero {
  position: relative;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background: radial-gradient(55% 60% at 50% -5%, rgba(63, 221, 232, 0.16), transparent 70%),
    radial-gradient(70% 90% at 85% 15%, rgba(22, 41, 78, 0.75), transparent 65%),
    radial-gradient(70% 90% at 15% 20%, rgba(20, 184, 201, 0.12), transparent 60%);
  overflow: hidden;
}

.hero__content {
  position: relative;
  max-width: 64rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(37, 211, 102, 0.4);
  background: var(--whatsapp-soft);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--whatsapp);
}

.hero__badge svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.hero h1 {
  font-size: var(--fs-hero);
}

.text-gradient {
  /* Was a hardcoded #ffffff start — nearly invisible against a light-mode
     white page background. var(--text) keeps the exact same look in dark
     mode (--text there is #eaf2fb, close enough to white to be
     indistinguishable) and reads correctly in light mode too. */
  background: linear-gradient(100deg, var(--text) 20%, var(--cyan) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__lead {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  max-width: 48rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero__note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- Stat cards ("Parlario at a glance") ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

@media (max-width: 900px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* .stat gets its background/border/hover-lift from .surface-card (see
   "Shared surfaces" near the top of this file, applied via class="stat
   surface-card" in the HTML) — this block only holds what's different
   about a stat card specifically. */
.stat {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(20, 184, 201, 0.12);
}

.stat__icon svg {
  width: 22px;
  height: 22px;
  color: var(--cyan-deep);
}

.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  margin-bottom: var(--space-1);
}

.stat__label {
  display: block;
  max-width: 15rem;
  margin-inline: auto;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- Section shells ---------- */

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.section--alt {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015) 15%, rgba(255, 255, 255, 0.015) 85%, transparent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Used as the last wrapper before </main> on the home, pricing and guides
   pages — needs real bottom clearance of its own; unlike .section it isn't
   always followed by another section repeating the top gap, so top stays
   modest while bottom matches the breathing room before the footer. */
.section--tight {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.container--narrow {
  width: min(100% - 2.5rem, 52rem);
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--space-4);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head--center .eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--cyan);
  opacity: 0.7;
}

.section-head h2 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-4);
}

.section-head .lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-muted);
}

/* Body copy under a centered section-head (used by the no-screenshot
   sections: AI Agent, Pipeline Reminders, Teams & Templates, Why Parlario). */
.section-copy {
  text-align: center;
}

.section-body {
  font-size: var(--fs-lg);
  line-height: 1.7;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--cyan);
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease-out);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ---------- Ecosystem 3-card grid ---------- */

.grid--3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- 2-card grid (dedicated instance / talk to sales) ----------
   Same .card surface-card as the ecosystem grid, just two columns — used
   for the "need something more?" pair at the end of the homepage and
   pricing.html. */

.grid--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 720px) {
  .grid--2 {
    grid-template-columns: 1fr;
  }
}

/* On pricing.html, grid--2 sits directly after .byo-key-note in the same
   container with no section break between them — without this it reads
   as cramped, sitting right under the notice. Scoped to that adjacency
   only (not a bare .grid--2 margin-top) so the homepage's grid--2, which
   already gets its spacing from its own .section--tight wrapper, doesn't
   end up double-spaced. */
.byo-key-note + .grid--2 {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

/* Same problem, different adjacency: on the pricing calculator page,
   grid--2 sits directly after .pricing-faq with no section break —
   .pricing-faq only has margin-top (it's normally the last thing on the
   page, e.g. on pricing.html), so without this the CTA cards land right
   under the last FAQ answer. */
.pricing-faq + .grid--2 {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

/* .card gets its background/border/hover-lift from .surface-card (applied
   via class="card surface-card" in the HTML) — this block only holds what's
   different about the ecosystem cards specifically. flex column + the
   .btn rule below keep a CTA anchored to the bottom of the card no
   matter how many lines the paragraph above it wraps to — without this,
   two cards side by side with different copy lengths (grid--2) end up
   with their buttons sitting at different heights instead of lined up. */
.card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
}

.card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.card p {
  margin-bottom: var(--space-2);
}

/* Flat tinted tile — a solid low-opacity wash of the icon's own color,
   no gradient/gloss. The old glossy navy-to-cyan gradient badge was
   hardcoded dark-navy regardless of theme, so it sat oddly against the
   light card surface and read as dated next to a flat modern card. */
.card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 201, 0.12);
  margin-bottom: var(--space-4);
}

.card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--cyan-deep);
}

.card__icon--whatsapp {
  background: rgba(37, 211, 102, 0.14);
}
.card__icon--whatsapp svg {
  color: var(--whatsapp-light);
}

.card__icon--instagram {
  background: rgba(225, 48, 108, 0.14);
}
.card__icon--instagram svg {
  color: var(--instagram);
}

.card__icon--telegram {
  background: rgba(34, 158, 217, 0.14);
}
.card__icon--telegram svg {
  color: var(--telegram);
}

/* Second row under the three channel cards on the homepage. */
.eco-more {
  margin-top: var(--space-5);
}

.card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
}

.card p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.card .feature-list {
  margin-top: var(--space-4);
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.feature-list svg {
  width: 17px;
  height: 17px;
  color: var(--cyan);
  flex-shrink: 0;
  margin-top: 3px;
}

.eco-note {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

/* ---------- Feature sections (alternating image/text split) ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.split + .split {
  margin-top: clamp(4rem, 9vw, 7.5rem);
}

.split--media-last .split__media {
  order: 2;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--media-last .split__media {
    order: initial;
  }
}

.split__text h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
}

.split__text > p {
  font-size: var(--fs-base);
  margin-bottom: var(--space-4);
}

.app-shot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  background: var(--surface-solid);
  line-height: 0;
}

/* Sin `:hover` ni `cursor: zoom-in`: no hay lightbox ni ningún manejador de
   clic sobre .app-shot, así que ambos prometían una interacción que no
   existe. Son ilustraciones, y ahora se comportan como tales. */

.app-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.app-shot__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

/* ---------- Why Parlario / Responsible AI ---------- */

/* Uses .section-head--center + .container--narrow; no bespoke classes needed. */

/* ---------- Final CTA band ---------- */

.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: radial-gradient(80% 120% at 50% 0%, rgba(63, 221, 232, 0.16), transparent 60%),
    linear-gradient(170deg, var(--navy) 0%, var(--bg-1) 100%);
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.cta-banner__content {
  position: relative;
}

.cta-banner h2 {
  font-size: var(--fs-3xl);
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.cta-banner p {
  max-width: 34rem;
  margin: 0 auto var(--space-6);
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.cta-banner .hero__ctas {
  margin-bottom: 0;
}

/* ---------- Pricing page: product hero ---------- */

.product-hero {
  max-width: 56rem;
  margin-inline: auto;
  margin-top: clamp(3rem, 8vw, 6rem);
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.product-hero h1 {
  font-weight: 700;
}

.product-hero__lead {
  max-width: 44rem;
  color: var(--text-muted);
}

.product-hero__actions {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.product-hero__note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- Pricing page: how it works ---------- */

.how-it-works {
  max-width: 52rem;
  margin-inline: auto;
  margin-bottom: clamp(3.5rem, 8vw, 5rem);
  text-align: center;
}

.how-it-works h2 {
  font-size: var(--fs-2xl);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.how-it-works__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;
}

@media (max-width: 760px) {
  .how-it-works__steps {
    grid-template-columns: 1fr;
  }
}

.how-it-works__step {
  display: flex;
  gap: var(--space-3);
}

.how-it-works__number {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 50%;
  background: rgba(63, 221, 232, 0.12);
  border: 1px solid var(--border-strong);
  color: var(--cyan);
  font-family: var(--font-heading);
  font-weight: 700;
}

.how-it-works__step h3 {
  font-size: var(--fs-base);
  margin-bottom: 0.25rem;
}

.how-it-works__step p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- Pricing page: plan cards ---------- */

.pricing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  margin-top: clamp(3.5rem, 8vw, 5rem);
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  scroll-margin-top: var(--space-5);
}

.pricing-hero h2 {
  font-size: var(--fs-3xl);
  font-weight: 700;
}

.pricing-hero p {
  max-width: 32rem;
  margin-inline: auto;
  font-size: var(--fs-base);
  color: var(--text-muted);
}

.billing-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.billing-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
  padding: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
}

.billing-toggle__thumb {
  position: absolute;
  inset: 0.3rem auto 0.3rem 0.3rem;
  width: calc(50% - 0.3rem);
  border-radius: var(--radius-pill);
  background: var(--cyan);
  box-shadow: 0 4px 16px rgba(63, 221, 232, 0.35);
  transition: transform 0.25s var(--ease-out);
}

.billing-toggle--annual .billing-toggle__thumb {
  transform: translateX(100%);
}

.billing-toggle__option {
  position: relative;
  z-index: 1;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}

.billing-toggle--monthly .billing-toggle__option:first-child,
.billing-toggle--annual .billing-toggle__option:last-child {
  color: var(--color-on-primary);
}

/* Selector de MONEDA (solo la pagina en espanol). Deliberadamente mas
   discreto que el toggle de ciclo: el de ciclo es una decision de compra,
   este es "en que moneda quiero leer los numeros". Si pesaran igual,
   competirian por la misma atencion. */
.currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.currency-toggle__label {
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.currency-toggle__option {
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out);
}

.currency-toggle__option:hover {
  color: var(--text-1);
  border-color: var(--cyan);
}

.currency-toggle__option[aria-pressed="true"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--color-on-primary);
}

/* "¿Estas en Colombia? Mira tu precio" — un enlace, no un boton con peso:
   es una invitacion para quien la necesita, invisible para el resto. Se
   esconde sola cuando ya se esta viendo el precio en pesos. */
.currency-hint {
  padding: 0;
  border: none;
  background: none;
  color: var(--cyan);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.currency-hint:hover {
  text-decoration-thickness: 2px;
}

.currency-hint[hidden],
[data-currency-only][hidden] {
  display: none;
}

.billing-toggle__hint {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(37, 211, 102, 0.4);
  background: var(--whatsapp-soft);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--whatsapp-light);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: start;
  /* No longer nested inside .container (72rem cap) — .pricing-plans's
     parent is unpadded, so this needs the same "- 2.5rem" gutter formula
     .container itself uses, or wide-but-not-quite-full viewports (just
     above each breakpoint) would render edge-to-edge with zero margin. */
  width: min(100% - 2.5rem, 92rem);
  margin-inline: auto;
  /* Clearance for the featured card's "MÁS ELEGIDO" badge, which sits
     half-outside the card (translate(-50%,-50%) on .plan-card__badge)
     on top of the card's own -0.75rem raise (.plan-card--featured) —
     without this, the badge overlapped the billing-toggle hint text
     right above the grid. */
  margin-top: 2.5rem;
}

@media (max-width: 1180px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100% - 2.5rem, 46rem);
  }
}

@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    width: min(100% - 2.5rem, 26rem);
  }
}

.plan-card--custom {
  border-style: dashed;
  background: transparent;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  box-shadow: var(--shadow-card);
}

.plan-card--featured {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(63, 221, 232, 0.35), 0 0 48px rgba(63, 221, 232, 0.22), var(--shadow-card);
  transform: translateY(-0.75rem);
  padding-block: calc(var(--space-6) + var(--space-2));
}

@media (max-width: 900px) {
  .plan-card--featured {
    transform: none;
  }
}

.plan-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-card__eyebrow {
  margin-top: -0.75rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.plan-card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
}

.plan-card__price {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.plan-card__price-suffix {
  margin-left: 0.35rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-faint);
}

.plan-card__description {
  margin-top: calc(var(--space-3) * -1);
  font-size: var(--fs-sm);
  color: var(--cyan-soft);
}

.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.plan-card__feature svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--cyan);
}

.plan-card__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-card__trial-note {
  font-size: var(--fs-xs);
  color: var(--cyan-soft);
  text-align: center;
}

.plan-card__quota {
  margin-top: calc(var(--space-3) * -1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

/* Aclaración bajo un cupo ("WhatsApp e Instagram comparten el cupo"):
   acompaña a la cifra sin competir con ella. */
.plan-card__quota-note {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-faint);
}

.plan-card__feature--muted {
  color: var(--text-faint);
}

.plan-card__feature--muted svg {
  color: var(--text-faint);
}

/* Tabla comparativa completa debajo de las 3 tarjetas — reemplaza la
   lista de bullets repetida 3 veces (una por tarjeta) por una sola
   matriz func./plan, más fácil de escanear. */
.comparison-table-wrap {
  /* Same reasoning as .pricing-grid above — no longer nested inside
     .container, needs its own gutter formula. Matches .pricing-grid's
     92rem so the table lines up edge-to-edge with the cards above it. */
  width: min(100% - 2.5rem, 92rem);
  margin-inline: auto;
  margin-top: clamp(3rem, 6vw, 4rem);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
}

.comparison-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--bg-1);
  font-size: var(--fs-sm);
}

.comparison-table caption {
  caption-side: top;
  padding: var(--space-4) var(--space-5) var(--space-2);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-top: 1px solid var(--border-strong);
}

.comparison-table thead th {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-top: none;
}

.comparison-table tbody th {
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.comparison-table td {
  color: var(--text-muted);
}

/* Aclaración bajo el nombre de una fila. El th es nowrap; la nota sí se
   puede partir, para no ensanchar la tabla. */
.comparison-table .cmp-note {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: normal;
}

.comparison-table th[scope="col"]:not(:first-child),
.comparison-table td:not(:first-child) {
  text-align: center;
}

.comparison-table td svg,
.comparison-table .cmp-yes {
  color: var(--cyan);
}

.comparison-table .cmp-no {
  color: var(--text-faint);
}

.comparison-table tbody tr.comparison-table__group td,
.comparison-table tbody tr.comparison-table__group th {
  padding-top: var(--space-4);
  font-weight: 700;
  color: var(--text);
}

.byo-key-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: 44rem;
  margin-inline: auto;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(63, 221, 232, 0.35);
  background: rgba(63, 221, 232, 0.08);
  text-align: left;
}

@media (max-width: 640px) {
  .byo-key-note {
    flex-direction: column;
    text-align: center;
  }
}

.byo-key-note__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  background: rgba(63, 221, 232, 0.14);
  color: var(--cyan);
}

.byo-key-note p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text);
}

.byo-key-note strong {
  font-family: var(--font-heading);
  color: var(--cyan);
}

.pricing-footnote {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.pricing-footnote a {
  color: var(--cyan);
  font-weight: 600;
}

.pricing-footnote a:hover {
  color: var(--cyan-soft);
}

/* ---------- Self-hosted / dedicated instance note ----------
   Same visual family as .byo-key-note (bordered highlight card) but its
   own standalone section, since it's offering something distinct — a
   custom single-tenant deployment — not a tip about an existing plan.
   Reused on both the homepage and pricing.html, right after the pricing
   content on each. */

/* ---------- Contact page (hero + form/info split) ---------- */

.hero--sub {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(148, 190, 230, 0.13) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

.contact-panel {
  display: grid;
  gap: var(--space-4);
}

.contact-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.contact-item svg {
  width: 22px;
  height: 22px;
  color: var(--cyan);
  flex-shrink: 0;
  margin-top: 4px;
}

.contact-item h3 {
  font-size: var(--fs-base);
  margin-bottom: 2px;
}

.contact-item p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- Pricing page: FAQ accordion ---------- */

.pricing-faq {
  max-width: 44rem;
  margin-inline: auto;
  margin-top: clamp(3.5rem, 8vw, 5rem);
}

.pricing-faq__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-soft);
}

.pricing-faq__eyebrow::after,
.pricing-faq__eyebrow::before {
  content: "";
  height: 1px;
  width: 2rem;
  background: var(--border-strong);
}

.pricing-faq__heading {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  font-size: var(--fs-2xl);
  text-align: center;
}

.pricing-faq__heading-accent {
  color: var(--cyan);
}

.pricing-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pricing-faq__item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  transition: border-color 0.2s var(--ease-out);
}

.pricing-faq__item--open {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(63, 221, 232, 0.25);
}

.pricing-faq__question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.pricing-faq__question svg {
  flex: 0 0 auto;
  color: var(--cyan);
}

.pricing-faq__answer {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* El paso de la FAQ corta de la página de precios a la FAQ completa
   (/faq): va después del acordeón, antes del pie de página. */
.pricing-faq__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  text-align: center;
}

.pricing-faq__more p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- Footer ---------- */

.footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: radial-gradient(60% 100% at 50% 100%, rgba(63, 221, 232, 0.06), transparent 70%), var(--bg-1);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: var(--space-8);
}

@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__brand {
    grid-column: auto;
  }
}

.footer__brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--space-4);
}

.footer__brand-lockup .brand__icon {
  height: 38px;
  width: auto;
}

.footer__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.footer__wordmark strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}

.footer__wordmark em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.footer__brand p {
  font-size: var(--fs-sm);
  max-width: 22rem;
}

.footer h4 {
  position: relative;
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
}

/* Small accent underline beneath each column heading — a cheap, tasteful
   way to make the column headers read as a designed system rather than
   plain bold labels. */
.footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.5rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.footer ul {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

.footer ul a {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: color 0.2s var(--ease-out);
}
.footer ul a:hover {
  color: var(--cyan-soft);
}

.footer__bottom {
  border-top: 1px solid var(--border);
  padding: var(--space-5) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.footer__bottom a {
  color: var(--text-faint);
  transition: color 0.2s var(--ease-out);
}
.footer__bottom a:hover {
  color: var(--cyan-soft);
}

.footer__bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Legal links, moved here from their own column: same size and weight as
   the copyright line right next to them, not styled like a nav link, so
   the bottom bar reads as one continuous strip of fine print. */
.footer__bottom-legal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__bottom-sep {
  color: var(--border-strong);
}

/* ---------- Cookie consent (banner / floating fab / modal) ---------- */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cookie-banner p {
  flex: 1 1 24rem;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.cookie-banner__actions {
  display: flex;
  flex: none;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    max-height: 60vh;
    overflow-y: auto;
  }
  /* In a column the paragraph's `flex: 1 1 24rem` becomes a 24rem-tall
     basis, which is what made the banner swallow the screen and push the
     buttons out of view. */
  .cookie-banner p {
    flex: none;
    font-size: var(--fs-xs);
    line-height: 1.5;
  }
  .cookie-banner__actions {
    justify-content: stretch;
  }
  .cookie-banner__actions .btn {
    flex: 1 1 0;
    justify-content: center;
  }
}

.cookie-fab {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  color: var(--cyan);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.cookie-fab:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.cookie-fab svg {
  width: 22px;
  height: 22px;
}

.cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(2, 6, 16, 0.72);
  backdrop-filter: blur(4px);
}

/* The [hidden] attribute alone loses to the class rule's `display: flex`
   above (author styles beat the UA default), so the overlay stayed a
   full-viewport click-catcher even while "hidden" — this is what blocked
   every click on the cookie banner underneath it. */
.cookie-overlay[hidden] {
  display: none;
}

.cookie-modal {
  width: min(100%, 30rem);
  max-height: min(88vh, 42rem);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  box-shadow: 0 0 0 1px rgba(63, 221, 232, 0.12), var(--shadow-card);
  padding: var(--space-6);
}

.cookie-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.cookie-modal__header h2 {
  font-size: var(--fs-xl);
}

.cookie-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex: none;
}

.cookie-modal__close:hover {
  color: var(--text);
  border-color: var(--cyan);
}

.cookie-modal__row {
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
}

.cookie-modal__row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.cookie-modal__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.cookie-modal__label {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--cyan-soft);
}

.cookie-modal__always {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.cookie-modal__row p {
  font-size: var(--fs-sm);
  margin: 0;
  color: var(--text-muted);
}

.cookie-modal__save {
  margin-top: var(--space-2);
  width: 100%;
}

.cookie-toggle {
  position: relative;
  flex: none;
  height: 24px;
  width: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: rgba(148, 190, 230, 0.12);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.cookie-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.cookie-toggle.is-on {
  border-color: var(--cyan);
  background: rgba(63, 221, 232, 0.25);
}

.cookie-toggle.is-on .cookie-toggle__thumb {
  transform: translateX(18px);
  background: var(--cyan);
}

/* ---------- Legal prose ---------- */

.legal-hero {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  background: radial-gradient(55% 60% at 50% -5%, rgba(63, 221, 232, 0.14), transparent 70%);
  border-bottom: 1px solid var(--border);
}

.legal-hero h1 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-3);
}

.legal-hero__lead {
  font-size: var(--fs-lg);
  max-width: 38rem;
}

.legal-hero__review {
  margin-top: var(--space-5);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  background: rgba(215, 181, 106, 0.06);
  max-width: 42rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.legal-body {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* ---------- Docs sidebar layout (shared: legal pages + Guides section) ----------
   ManyChat-legal-style two-column shell: a slim left nav + a wide content
   column. Legal pages use docs_sidebar() (gen_common.py) for a flat list of
   5 links; the Guides section (guides.css) extends this same .docs-nav
   with module-grouped headings — don't duplicate this block there, add to
   it with .docs-nav__group / .docs-nav__group-title instead. */

.docs-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .docs-shell {
    /* minmax(0, …), no 1fr: una columna 1fr no baja de lo que mide su
       contenido, y una tabla o el temario la ensanchaban más que el
       teléfono — la página entera se desplazaba de costado. Así la tabla
       se desplaza dentro de su caja, como quiere `.guides-lesson table`. */
    grid-template-columns: minmax(0, 1fr);
  }
}

.docs-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-5));
  /* El temario completo (23 lecciones en 5 grupos, todos abiertos) mide
     más que la ventana. Sin altura propia, `sticky` no alcanza: el menú se
     va quedando atrás y las últimas lecciones sólo aparecen scrolleando la
     PÁGINA, que es justo lo que hacía parecer que faltaban. Con su propio
     scroll, el índice entero queda alcanzable sin mover el artículo. */
  max-height: calc(100vh - var(--nav-height) - var(--space-5) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

@media (max-width: 860px) {
  .docs-sidebar {
    position: static;
    /* En pantalla angosta el menú deja de ser pegajoso y se apila ARRIBA
       del artículo. Con los 5 grupos abiertos eso son ~1500px de links
       antes de la primera línea de la lección: el índice está entero, pero
       hay que scrollear tanto que parece que faltan opciones. Acotado y con
       scroll propio, se ve completo sin empujar el contenido. */
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.docs-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.docs-nav__link {
  display: block;
  padding: 0.55rem 0.9rem;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.docs-nav__link:hover {
  color: var(--text);
  background: rgba(148, 190, 230, 0.06);
}

.docs-nav__link.is-active {
  color: var(--cyan);
  border-left-color: var(--cyan);
  background: var(--glow-soft);
  font-weight: 600;
}

.docs-content .prose {
  max-width: 46rem;
  margin-inline: 0;
}

.prose {
  max-width: 48rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.prose section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prose h2 {
  font-size: var(--fs-xl);
}

.prose h3 {
  font-size: var(--fs-lg);
  margin-top: var(--space-2);
}

.prose p,
.prose li {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.75;
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

.prose strong {
  color: var(--text);
}

.prose a {
  color: var(--cyan-soft);
  text-decoration: underline;
  text-decoration-color: rgba(52, 227, 127, 0.4);
  text-underline-offset: 2px;
}
.prose a:hover {
  text-decoration-color: var(--cyan-soft);
}

.prose .notice {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--cyan);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
}
.prose .notice p {
  margin: 0;
}

.responsibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .responsibility-grid {
    grid-template-columns: 1fr;
  }
}

.responsibility-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.responsibility-card--yes {
  border-left: 3px solid var(--cyan);
}
.responsibility-card--no {
  border-left: 3px solid var(--text-divider-faint);
}
.responsibility-card h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 0;
}
.responsibility-card--yes h3 {
  color: var(--cyan-soft);
}
.responsibility-card ul {
  padding-left: 1.1rem;
  margin: 0;
  gap: 0.5rem;
}
.responsibility-card li {
  font-size: var(--fs-sm);
}

.provider-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.provider-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
}

.provider-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.provider-card__header strong {
  font-size: var(--fs-base);
  color: var(--text);
}

.provider-card__fields {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.provider-card__fields dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}

.provider-card__fields dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.badge-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--cyan-soft);
  white-space: nowrap;
}

.toc {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
}
.toc summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text);
}
.toc ul {
  margin-top: var(--space-3);
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.toc a {
  color: var(--text-muted);
}
.toc a:hover {
  color: var(--cyan-soft);
}

/* ---------- Utility ---------- */

.mt-0 {
  margin-top: 0 !important;
}

.text-center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Back to top ---------- */

/* Sólo aparece en páginas que lo piden con `data-to-top` en el <body>
   (hoy: portada y precios, las dos únicas lo bastante largas como para que
   volver arriba sea un problema). El z-index queda POR DEBAJO del banner de
   cookies (200): en vez de taparlo, el botón se corre hacia arriba —
   main.js mide el banner y escribe `--to-top-offset`. */
.to-top {
  position: fixed;
  bottom: calc(var(--space-5) + var(--to-top-offset, 0px));
  right: var(--space-5);
  z-index: 199;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  color: var(--cyan);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  /* Oculto de verdad mientras no corresponde: `visibility` lo saca del
     orden de tabulación, cosa que `opacity: 0` por sí solo no hace. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition:
    opacity 0.2s var(--ease-out),
    transform 0.2s var(--ease-out),
    visibility 0.2s,
    border-color 0.2s var(--ease-out),
    bottom 0.2s var(--ease-out);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.to-top:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.to-top svg {
  height: 20px;
  width: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: opacity 0.2s var(--ease-out), visibility 0.2s;
    transform: none;
  }
  .to-top:hover,
  .to-top.is-visible {
    transform: none;
  }
}

/* ---------- Hero a dos columnas (portada) ---------- */

/* Modificador, NO cambio global: `.hero__content` lo comparten 404,
   contacto y gracias, que siguen centrados. Sólo la portada se parte en
   dos columnas. */
.hero--split .hero__content {
  max-width: none;
  margin-inline: 0;
  text-align: left;
  align-items: flex-start;
}

.hero--split .hero__ctas {
  justify-content: flex-start;
}

.hero--split .hero__lead {
  max-width: 34rem;
}

/* Titular y bajada del hero: MISMOS tamaños en portada y en precios. Son
   la misma promesa, y verla en dos tamaños distintos al pasar de una a la
   otra se nota. Un solo bloque, con los dos selectores, para que no se
   puedan desincronizar.

   Bajan respecto de los originales (--fs-hero / --fs-lg, calibrados para
   un hero centrado a todo el ancho): en media columna ese tamaño parte el
   titular en siete líneas y le come protagonismo a la captura. */
.hero--split h1,
.product-hero h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
}

.hero--split .hero__lead,
.product-hero__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero__grid {
    /* La captura pide algo más de ancho que el texto: es el detalle que
       hay que poder leer. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--space-10);
  }
}

/* ---------- Ventana estilo macOS para las capturas ---------- */

.mac-window {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  box-shadow: var(--shadow-card);
}

/* Barra de ventana macOS, en CSS y no en markup: la usan el hero Y las 12
   capturas de features de las dos portadas. Hacerla con `::before` evita
   repetir cuatro elementos por captura y, sobre todo, evita que el hero y
   el resto se vayan separando con el tiempo.

   Los tres puntos son gradientes radiales sobre la misma barra. Los
   colores del semáforo son literales a propósito: son de macOS, no del
   sistema de diseño de Parlario. */
.mac-window::before,
.app-shot::before {
  content: "";
  display: block;
  height: 34px;
  background-color: var(--bg-2);
  background-image:
    radial-gradient(circle 5.5px at 18px 50%, #ff5f57 99%, transparent 100%),
    radial-gradient(circle 5.5px at 38px 50%, #febc2e 99%, transparent 100%),
    radial-gradient(circle 5.5px at 58px 50%, #28c840 99%, transparent 100%);
  border-bottom: 1px solid var(--border);
}

.mac-window__shot {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 62rem) {
  /* Se sale un poco del contenedor hacia el borde, como en la referencia:
     da sensación de producto real y no de captura pegada. */
  .hero__visual {
    margin-right: calc(var(--space-6) * -1);
  }
}

/* ---------- Servicios profesionales (página de precios) ---------- */

/* Ancla de precio del paquete de entrada. Sólo el primero lleva número: los
   otros dos se cotizan por alcance, y poner "desde" en los tres sería
   prometer una tarifa que no existe. */
/* `.card p` (que fija color y tamaño) tiene más especificidad que una
   clase sola, así que el ancla se pintaba gris como el resto del texto.
   Se califica con .card para ganar el empate. */
.card p.card__from {
  margin-top: calc(var(--space-2) * -1);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cyan);
}

.services-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  /* Sin esto el botón queda pegado a las cards de abajo: el bloque tenía
     aire arriba pero ninguno debajo. */
  margin-bottom: var(--space-8);
  text-align: center;
}

.services-cta p {
  max-width: 42rem;
  color: var(--text-muted);
}

/* =========================================================================
   TOOLS — WhatsApp Pricing Calculator (/whatsapp-pricing-calculator)
   Loaded on every page (this file), no separate stylesheet — the page is
   a single, one-off tool, unlike Guides which has its own doc layout.
   ========================================================================= */

.calc-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--space-8);
  align-items: start;
  margin: var(--space-8) 0 var(--space-10);
  padding: var(--space-7, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

@media (max-width: 62rem) {
  .calc-tool {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }
}

.calc-tool__group {
  margin-bottom: var(--space-6);
}

.calc-tool__group:last-child {
  margin-bottom: 0;
}

.calc-tool__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
}

.calc-tool__group-note {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.calc-tool__group-note--warning {
  color: var(--warning);
}

.calc-tool__group-note--warning a {
  color: inherit;
  text-decoration: underline;
}

.calc-tool__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.calc-tool__badge--free {
  border-color: rgba(37, 211, 102, 0.4);
  color: var(--whatsapp-light);
}

.calc-tool__badge--soon {
  border-color: rgba(215, 181, 106, 0.4);
  color: var(--warning);
}

.calc-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-3);
}

@media (max-width: 30rem) {
  .calc-field-row {
    grid-template-columns: 1fr;
  }
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calc-field label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.calc-field input,
.calc-field select {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.calc-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8798' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), var(--surface-solid);
  background-repeat: no-repeat;
  background-position: right 0.7rem center, 0 0;
  background-size: 16px, auto;
  padding-right: 2.2rem;
}

.calc-field select option {
  background: var(--surface-solid);
  color: var(--text);
}

.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--glow-soft);
}

.calc-field--rate input {
  text-align: right;
}

.calc-tool__rate-shared {
  padding: var(--space-4);
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: rgba(63, 221, 232, 0.05);
}

.calc-tool__rate-shared .calc-field-row {
  margin-bottom: 0;
}

.calc-tool__source-note {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-faint);
}

.calc-tool__source-note a {
  color: var(--cyan-soft);
}

/* ---- Results panel ---- */

.calc-results {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  /* Flat surface like .surface-card — avoids the navy-gradient seam. */
  background: radial-gradient(80% 120% at 50% 0%, rgba(63, 221, 232, 0.1), transparent 60%),
    var(--surface-solid);
  box-shadow: var(--shadow-card);
}

@media (max-width: 62rem) {
  .calc-results {
    position: static;
  }
}

.calc-results__eyebrow {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.calc-results__total {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--cyan);
}

.calc-results__total span {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-faint);
}

.calc-results__sub {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.calc-results__delta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(215, 181, 106, 0.35);
  background: rgba(215, 181, 106, 0.08);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.calc-results__delta strong {
  color: var(--warning);
  font-family: var(--font-heading);
}

.calc-results__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.calc-row__head strong {
  font-family: var(--font-heading);
  color: var(--text);
}

.calc-row__bar {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(148, 190, 230, 0.12);
  overflow: hidden;
}

.calc-row__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  transition: width 0.25s var(--ease-out);
}

.calc-row--projected .calc-row__bar-fill {
  background: linear-gradient(90deg, var(--warning), #e8cf94);
}

/* ---- Explainer cards (category definitions) ---- */

.calc-cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc-cat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* ---- Timeline ---- */

.calc-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-6) 0;
  border-left: 2px solid var(--border-strong);
}

.calc-timeline__item {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-6);
}

.calc-timeline__item:last-child {
  padding-bottom: 0;
}

.calc-timeline__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 2px solid var(--cyan);
}

.calc-timeline__item--future::before {
  border-color: var(--warning);
}

.calc-timeline__date {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan-soft);
}

.calc-timeline__item--future .calc-timeline__date {
  color: var(--warning);
}

.calc-timeline__item h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
}

.calc-timeline__item p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ============================================================
   Página "Capta clientes desde tus anuncios" (capture-leads-from-ads)
   Dos ilustraciones SVG hechas a mano —el anuncio y el circuito— porque
   no son pantallas de Parlario: el anuncio vive en Meta y el chat en el
   teléfono del cliente. Todo lo demás de esa página son capturas reales.
   ============================================================ */

/* Bajada bajo un h2 de sección. */
.section__lead {
  max-width: 62ch;
  /* The h2 right before this has margin:0 (base heading rule) — every
     other "heading + lead" pattern on the site gets its gap from
     .section-head h2's margin-bottom instead; this one-off needed the
     equivalent margin-top of its own, or it read as touching the h2. */
  margin: var(--space-4) 0 2rem;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* El circuito de 5 pasos: en pantalla chica se desplaza en horizontal en
   vez de encogerse hasta ser ilegible. */
.ads-loop-wrap {
  overflow-x: auto;
  padding-bottom: .5rem;
}
.ads-loop {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}

/* El anuncio y el teléfono, en la columna de imagen del split. */
.ads-art-wrap {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 1rem;
}
.ads-art {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   Circuito de la página de anuncios + hero a dos columnas.
   Mismo lenguaje visual que el panel de workflow de
   BridgewareTech: panel con puntos, pastilla arriba, tarjetas con
   estado y hub encendido abajo. Todos los valores salen de los
   tokens que ya existen arriba.
   ============================================================ */

.loop-panel {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(170deg, rgba(16, 32, 62, .85), rgba(7, 16, 33, .9));
  box-shadow: var(--shadow-card), var(--shadow-glow);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) clamp(2.5rem, 5vw, 3.25rem);
  margin-bottom: var(--space-5);
}

/* La trama de puntos, que es lo que le da profundidad al panel. */
.loop-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(148, 190, 230, .1) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.loop-panel__prompt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: .8rem 1.2rem;
  border-radius: var(--radius-pill);
  background: rgba(5, 12, 26, .85);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.loop-panel__prompt svg { width: 18px; height: 18px; color: var(--cyan); flex-shrink: 0; }
.loop-panel__prompt em { font-style: normal; color: var(--cyan); }

.loop-panel__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.loop-card {
  position: relative;
  /* Flat surface like .surface-card — avoids the navy-gradient seam. */
  background: radial-gradient(80% 120% at 50% 0%, rgba(63, 221, 232, 0.1), transparent 60%),
    var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

/* El conector punteado entre pasos — el mismo recurso que usa
   .app-node en BridgewareTech. En una sola columna se apaga. */
.loop-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--space-3);
  border-top: 2px dashed rgba(111, 211, 223, .35);
}
.loop-card:last-child::after { content: none; }

/* El último paso es el que cierra el circuito: se destaca. */
.loop-card--last {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(63, 221, 232, .18), 0 0 24px var(--glow-soft);
}

.loop-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.loop-card__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--glow);
}

.loop-card h3 { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
.loop-card p { font-size: var(--fs-xs); color: var(--text-faint); margin: 0; }

/* El hub encendido: la vuelta a Meta, abajo y al centro. */
.loop-panel__hub {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--navy-soft), var(--bg-1));
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 8px rgba(63, 221, 232, .06), 0 0 30px var(--glow);
  z-index: 2;
}
.loop-panel__hub svg { width: 24px; height: 24px; color: var(--cyan); }

.loop-panel__hub-label {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--cyan);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -52px;
}

/* Hero a dos columnas: el texto a la izquierda y la portada a la
   derecha. La imagen mide 763x508, así que NO se estira: se le pone
   un techo para que no pixele. */
.ads-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  text-align: left;
  max-width: none;
}
.ads-hero__text { text-align: left; }
.ads-hero__text .hero__ctas { justify-content: flex-start; }
.ads-hero__visual { max-width: 763px; }
/* La foto ya trae su propio dispositivo: nada de marco de ventana
   encima. Solo un borde suave y el resplandor del sitio. */
.ads-hero__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.ads-hero__frame img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .loop-panel__cards { grid-template-columns: repeat(2, 1fr); }
  .loop-card::after { content: none; }
  .ads-hero { grid-template-columns: 1fr; text-align: center; }
  .ads-hero__text { text-align: center; }
  .ads-hero__text .hero__ctas { justify-content: center; }
  .ads-hero__visual { margin-inline: auto; }
}

@media (max-width: 560px) {
  .loop-panel__cards { grid-template-columns: 1fr; }
}

/* ---------- Burbuja flotante de WhatsApp ----------
   Copiada tal cual del sitio de Bridgeware (public_html/css/style.css) para
   que las dos se vean igual: es el MISMO agente y el mismo numero, solo
   cambia de que producto habla. Si se retoca una, retocar la otra.

   Cuidado con el boton de "volver arriba" (.to-top): los dos viven abajo a
   la derecha. La burbuja se queda en su lugar de siempre —es donde la gente
   la busca— y el que se corre hacia arriba es el otro, en assets/js/main.js.
*/
/* ---------- Floating WhatsApp widget ---------- */

.wa-widget {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  font-family: var(--font-body);
}

.wa-toggle {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(2, 8, 20, 0.4);
  transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.wa-toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
}

.wa-toggle:active {
  transform: scale(0.94);
}

.wa-toggle__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out);
}

.wa-toggle__icon--chat svg {
  width: 32px;
  height: 32px;
}

.wa-toggle__icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.wa-toggle__icon--close svg {
  width: 24px;
  height: 24px;
}

.wa-widget.is-open .wa-toggle__icon--chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.wa-widget.is-open .wa-toggle__icon--close {
  opacity: 1;
  transform: none;
}

.wa-hint {
  position: absolute;
  right: 74px;
  bottom: 17px;
  background: #ffffff;
  color: #16294e;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(2, 8, 20, 0.35);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.wa-widget.is-open .wa-hint,
.wa-hint--hidden {
  opacity: 0;
  transform: translateX(8px);
}

.wa-popup {
  width: min(340px, calc(100vw - 2rem));
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 8, 20, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out),
    visibility 0s linear 0.25s;
}

.wa-widget.is-open .wa-popup {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out),
    visibility 0s;
}

.wa-popup__header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: #25d366;
  color: #ffffff;
  padding: 1.15rem 1.2rem;
}

.wa-popup__header>svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.wa-popup__header h3 {
  font-family: var(--font-body);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.wa-popup__header p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.82rem;
  line-height: 1.45;
}

.wa-popup__body {
  padding: 1rem 1.1rem 1.2rem;
}

.wa-popup__note {
  color: #5a6a85;
  font-size: 0.82rem;
  margin-bottom: 0.85rem;
}

.wa-agent {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #f4f6f9;
  border-left: 3px solid #25d366;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out);
}

.wa-agent:hover {
  background: #eafaf1;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(18, 140, 126, 0.2);
}

.wa-agent__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-agent__avatar svg {
  width: 24px;
  height: 24px;
}

.wa-agent__info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.wa-agent__info strong {
  color: #16294e;
  font-size: 0.95rem;
}

.wa-agent__info small {
  color: #7a8aa5;
  font-size: 0.78rem;
}

.wa-agent__go {
  margin-left: auto;
  color: #25d366;
  display: flex;
}

.wa-agent__go svg {
  width: 20px;
  height: 20px;
}

/* El contenedor de la burbuja no intercepta clics.
   -------------------------------------------------
   El popup cerrado es `visibility: hidden`, que SIGUE ocupando su lugar:
   el contenedor mide unos 340px de alto aunque no se vea nada, y con
   z-index 1200 contra los 199 del boton de "volver arriba" se quedaba con
   el clic. La flecha se veia perfecta y no hacia nada.

   En el sitio de Bridgeware no se nota porque ahi no hay boton de volver
   arriba. Si alguna vez se le agrega uno, esto hace falta alla tambien.

   El contenedor deja pasar los clics y solo los hijos que de verdad se
   tocan los reciben. */
.wa-widget {
  pointer-events: none;
}

.wa-toggle,
.wa-popup {
  pointer-events: auto;
}

/* ==========================================================================
   Dispositivos: capturas reales de Parlario en laptop, tablet y teléfono
   ==========================================================================
   Cada pantalla trae DOS imágenes, clara y oscura, y se muestra la del tema
   del sitio — mismo criterio que el logo (`.brand__icon--*`): el script del
   <head> estampa data-theme, y sin JavaScript decide el sistema.

   Los marcos son CSS, no imágenes: se ven nítidos a cualquier tamaño y la
   misma pieza sirve para el hero, las features y la sección de
   dispositivos. Las capturas son de la demo (tienda y clientes ficticios). */

:root {
  --device-shell: #1b1f27;
  --device-shell-edge: rgba(255, 255, 255, 0.09);
  --device-metal-top: #e3e7ed;
  --device-metal-bottom: #a5adb9;
  --device-shadow: 0 40px 80px -30px rgba(8, 22, 48, 0.45), 0 18px 36px -18px rgba(8, 22, 48, 0.3);
  --stage-grid: rgba(14, 138, 151, 0.24);
  --stage-glow: rgba(20, 184, 201, 0.28);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(16, 24, 40, 0.1);
  --status-bg: #fbfbfc;
  --status-fg: #1a1a1e;
}

:root[data-theme="dark"] {
  --device-shell: #12151b;
  --device-shell-edge: rgba(148, 190, 230, 0.16);
  --device-metal-top: #3a414d;
  --device-metal-bottom: #1b2029;
  --device-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 0 60px -10px rgba(63, 221, 232, 0.16);
  --stage-grid: rgba(63, 221, 232, 0.22);
  --stage-glow: rgba(63, 221, 232, 0.3);
  --glass-bg: rgba(10, 22, 44, 0.66);
  --glass-border: rgba(148, 190, 230, 0.22);
  --status-bg: #0f1115;
  --status-fg: #eaf2fb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --device-shell: #12151b;
    --device-shell-edge: rgba(148, 190, 230, 0.16);
    --device-metal-top: #3a414d;
    --device-metal-bottom: #1b2029;
    --device-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 0 60px -10px rgba(63, 221, 232, 0.16);
    --stage-grid: rgba(63, 221, 232, 0.22);
    --stage-glow: rgba(63, 221, 232, 0.3);
    --glass-bg: rgba(10, 22, 44, 0.66);
    --glass-border: rgba(148, 190, 230, 0.22);
    --status-bg: #0f1115;
    --status-fg: #eaf2fb;
  }
}

/* ---------- La captura de cada tema ---------- */

.shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.shot--dark {
  display: none;
}

:root[data-theme="dark"] .shot--light {
  display: none;
}

:root[data-theme="dark"] .shot--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shot--light {
    display: none;
  }
  :root:not([data-theme]) .shot--dark {
    display: block;
  }
}

/* ---------- Marcos ---------- */

.device {
  position: relative;
  filter: drop-shadow(0 0 0 transparent);
}

.device__screen {
  position: relative;
  overflow: hidden;
  background: var(--status-bg);
  line-height: 0;
}

/* Laptop: pantalla con bisel y cámara, y la base de aluminio. */
.device--laptop .device__lid {
  position: relative;
  padding: 2.4% 2.4% 2.8%;
  border-radius: 18px 18px 8px 8px;
  background: var(--device-shell);
  box-shadow: inset 0 0 0 1px var(--device-shell-edge), var(--device-shadow);
}

.device--laptop .device__lid::before {
  content: "";
  position: absolute;
  top: 1%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #05070a;
  box-shadow: 0 0 0 1px var(--device-shell-edge);
  transform: translateX(-50%);
}

.device--laptop .device__screen {
  border-radius: 6px;
  aspect-ratio: 16 / 10;
}

.device--laptop .device__base {
  position: relative;
  height: clamp(9px, 1.4vw, 16px);
  margin: 0 -6.5%;
  border-radius: 2px 2px 16px 16px / 2px 2px 12px 12px;
  background: linear-gradient(var(--device-metal-top), var(--device-metal-bottom));
  box-shadow: 0 22px 30px -16px rgba(8, 22, 48, 0.45);
}

.device--laptop .device__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15%;
  height: 42%;
  border-radius: 0 0 10px 10px;
  background: var(--device-metal-bottom);
  opacity: 0.55;
  transform: translateX(-50%);
}

/* Tablet y teléfono: un cuerpo con bisel parejo. */
.device--tablet .device__body,
.device--phone .device__body {
  position: relative;
  background: var(--device-shell);
  box-shadow: inset 0 0 0 1px var(--device-shell-edge), var(--device-shadow);
}

.device--tablet .device__body {
  padding: 3.2%;
  border-radius: 7% / 5%;
}

.device--tablet .device__screen {
  border-radius: 3.5% / 2.5%;
  aspect-ratio: 820 / 1180;
}

.device--phone .device__body {
  padding: 4%;
  border-radius: 17% / 8%;
}

/* El teléfono lleva barra de estado (hora, señal, batería) arriba de la
   captura, y la isla dinámica encima: como se ve un teléfono de verdad. */
.device--phone .device__screen {
  border-radius: 13% / 6%;
  aspect-ratio: 390 / 892;
  display: flex;
  flex-direction: column;
}

.device__status {
  flex: none;
  height: 5.4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9%;
  background: var(--status-bg);
  color: var(--status-fg);
  font: 600 clamp(6px, 0.7vw, 10px) / 1 var(--font-body);
}

.device__status svg {
  height: 48%;
  width: auto;
}

.device--phone .device__screen::before {
  content: "";
  position: absolute;
  top: 1.1%;
  left: 50%;
  z-index: 2;
  width: 30%;
  height: 3.2%;
  border-radius: 999px;
  background: #05070a;
  transform: translateX(-50%);
}

.device--phone .device__screen .shot {
  flex: 1;
  min-height: 0;
}

/* ---------- El escenario: brillo y cuadrícula en perspectiva ---------- */

.device-stage {
  position: relative;
  isolation: isolate;
}

.device-stage::before {
  content: "";
  position: absolute;
  inset: 35% -18% -22%;
  z-index: -1;
  background-image:
    linear-gradient(var(--stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(700px) rotateX(62deg);
  transform-origin: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 20%, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 20%, #000 35%, transparent 75%);
  pointer-events: none;
}

.device-stage::after {
  content: "";
  position: absolute;
  inset: 5% 10% 15%;
  z-index: -2;
  background: radial-gradient(closest-side, var(--stage-glow), transparent);
  filter: blur(30px);
  pointer-events: none;
}

/* ---------- Hero: laptop + tarjeta de vidrio + aviso ---------- */

.hero-devices {
  position: relative;
  padding: 6% 0 10% 6%;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 50px -20px rgba(8, 22, 48, 0.45), 0 0 40px -12px var(--glow);
  color: var(--text);
}

.readiness-card {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: min(44%, 282px);
  padding: 1rem 1.1rem 1.05rem;
  font-size: 0.8rem;
}

.readiness-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.readiness-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}

.readiness-card__sub {
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.readiness-card__tag {
  order: -1;
  flex: none;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.readiness-card__body {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.8rem;
}

.readiness-gauge {
  position: relative;
  flex: none;
  width: 82px;
  height: 82px;
}

.readiness-gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.readiness-gauge__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
}

.readiness-gauge__value small {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
}

.readiness-card__list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}

.readiness-card__list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.readiness-card__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--cyan));
}

.readiness-card__trend {
  margin-top: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

.readiness-card__trend svg {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 0.25rem;
  overflow: visible;
}

.readiness-card__ok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.78rem;
}

.readiness-card__ok svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--whatsapp);
}

/* El aviso push que llega mientras tanto (Constitución: nunca a clientes). */
.push-chip {
  position: absolute;
  top: 0;
  right: 4%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(52%, 290px);
  padding: 0.6rem 0.8rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

.push-chip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--whatsapp);
  color: #fff;
}

.push-chip__icon svg {
  width: 18px;
  height: 18px;
}

.push-chip strong {
  display: block;
  font-size: 0.78rem;
}

.push-chip span {
  color: var(--text-muted);
}

.push-chip time {
  margin-left: auto;
  align-self: flex-start;
  color: var(--text-faint);
  font-size: 0.68rem;
}

@media (max-width: 640px) {
  .hero-devices {
    padding: 0 0 4%;
  }
  .readiness-card,
  .push-chip {
    position: relative;
    width: auto;
    inset: auto;
    margin-top: 1rem;
  }
}

/* ---------- Features: laptop con el teléfono adelante ---------- */

.device-pair {
  position: relative;
  padding: 0 9% 8% 0;
}

.device-pair .device--phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  z-index: 2;
}

/* Una sola pantalla en laptop, para las features que no tienen versión de
   teléfono que valga la pena mostrar. */
.device-solo {
  position: relative;
  padding: 0 4% 3%;
}

/* ---------- "En cualquier pantalla": tablet, laptop y teléfono ---------- */

.devices-section .section-head {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.device-trio {
  position: relative;
  max-width: 60rem;
  margin-inline: auto;
  padding: 0 12% 7% 15%;
}

.device-trio .device--tablet {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 27%;
  z-index: 2;
}

.device-trio .device--phone {
  position: absolute;
  right: 0;
  bottom: -2%;
  width: 15%;
  z-index: 3;
}

.device-trio__caption {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.device-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 60rem;
  margin: var(--space-8) auto 0;
}

.device-point {
  padding: var(--space-5);
}

.device-point h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-base);
  margin-bottom: var(--space-2);
}

.device-point h3 svg {
  width: 20px;
  height: 20px;
  color: var(--cyan-deep);
}

.device-point p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .device-points {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .device-stage .device,
  .device-stage .glass-card {
    animation: device-rise 0.9s var(--ease-out) both;
  }
  .device-stage .glass-card {
    animation-delay: 0.25s;
  }
  .device-trio .device--tablet,
  .device-pair .device--phone {
    animation-delay: 0.15s;
  }
  .device-trio .device--phone {
    animation-delay: 0.3s;
  }
}

@keyframes device-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Contact form (native form posting to /api/contact.php) ---------- */

.contact-form {
  display: grid;
  gap: var(--space-4);
  max-width: 40rem;
}

.cf-row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .cf-row {
    grid-template-columns: 1fr 1fr;
  }
}

.cf-field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cf-field label,
.cf-field legend {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.cf-req {
  color: var(--cyan-deep);
}

.cf-opt {
  font-weight: 400;
  color: var(--text-faint);
}

.cf-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field input[type="tel"],
.cf-field select,
.cf-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem; /* 16px: stops iPhone zooming on focus */
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.cf-field textarea {
  resize: vertical;
}

.cf-field select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8798' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 18px;
}

.cf-field input:focus-visible,
.cf-field select:focus-visible,
.cf-field textarea:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--glow-soft);
}

.contact-form [aria-invalid="true"],
.cf-group[data-invalid="true"] {
  border-color: var(--danger) !important;
}

.cf-group {
  gap: 0.35rem;
  padding: 0.25rem 0.5rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.cf-check,
.cf-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.cf-check {
  min-height: 44px;
  align-items: center;
  font-weight: 400;
  cursor: pointer;
}

.cf-check input,
.cf-consent input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--cyan);
}

.cf-consent {
  min-height: 44px;
}

.cf-consent label {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
}

.cf-consent a {
  color: var(--cyan-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cf-submit {
  justify-self: start;
  min-height: 48px;
}

.cf-submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.cf-status {
  min-height: 1.5em;
  margin: 0;
  font-weight: 600;
}

.cf-status.is-ok {
  color: var(--whatsapp-light);
}

.cf-status.is-err {
  color: var(--danger);
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.cf-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}