/* Kelvir — landing.
   Palette, type and surface language are deliberately the same ones the app
   ships (see the app's globals.css): forest ground, cream ink, mint accent.
   Someone who clicks "Probar gratis" should land somewhere that looks like
   the page they left, so these values are copied rather than re-invented. */

:root {
  /* --- ground and surfaces --- */
  /* The brand green (#1B3A2F) is a *surface*, not the page: painting the page
     with it leaves cards nowhere to go. So the ground is that green pushed
     deeper, and --surface is the brand green itself, a step above it. */
  --bg: #0e1f19;
  --surface: #1b3a2f;
  --surface-2: #14291f;
  --surface-3: #26493b;

  /* --- ink --- */
  --fg: #f5f1e8;
  --muted: #9db3a6;
  /* Light enough to clear 4.5:1 on --surface, not just on --bg — small labels
     inside cards are the common case, and the darker step failed there. */
  --muted-2: #8aa396;
  /* Decorative only (3.4:1 on --bg): large step numerals, the footer
     copyright. Never small body text. */
  --muted-3: #5e756a;

  /* --- accents --- */
  /* Mint carries emphasis (icons, eyebrows, links, positive figures); cream
     carries action. Two roles, no third colour. */
  --accent: #8fd9ae;
  --accent-ink: #0e1f19;
  --primary: #f5f1e8;
  --primary-ink: #1b3a2f;

  /* --- edges --- */
  /* Cream at low alpha rather than white: on a warm green surface a pure
     white hairline reads cold and detached from the ground. */
  --border: rgba(245,241,232,0.12);
  --border-strong: rgba(245,241,232,0.22);
  --tint-1: rgba(245,241,232,0.04);
  --tint-2: rgba(245,241,232,0.07);
  --tint-3: rgba(245,241,232,0.11);

  /* --- status --- */
  /* Validated against this ground, not against neutral grey — the old
     #0ca30c "good" all but disappeared on green. */
  --good: #8fd9ae;
  --warn: #e8c27a;
  --bad: #e4906a;

  /* --- elevation --- */
  /* A shadow cast by a dark surface onto a dark ground is nearly invisible on
     its own, which is why every card also carries a hairline border. */
  --shadow-soft: 0 1px 2px -1px rgba(6,17,13,0.4), 0 8px 24px -14px rgba(6,17,13,0.7);
  --shadow-lift: 0 2px 6px -2px rgba(6,17,13,0.5), 0 18px 44px -18px rgba(6,17,13,0.85);

  /* --- shape --- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  /* --- motion --- */
  /* One slow, decelerating curve everywhere. Nothing snaps. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* There is deliberately no second family. Every figure on this site is
     Manrope with tabular numerals, exactly like the app — a monospace next
     to Manrope reads as a different product, and the columns line up just
     as well without one. .mono is kept as a class so the markup does not
     have to change; it now means tabular, not monospace. */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  min-height: 100vh;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

/* Manrope tracks wide by default — right for body copy, too loose the moment
   type gets large. Pulled in once here instead of per-heading. */
h1, h2, h3 { letter-spacing: -0.015em; }

/* Figures line up in columns wherever money is listed. */
.mono, .price, .price-anchor, .step-num, .tag, .spark-change,
.calc-stat-value, .calc-row-month-num { font-variant-numeric: tabular-nums; }

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

.page { width: 100%; }

.section-pad { padding-left: 24px; padding-right: 24px; }

/* ---------- shared pieces ---------- */

/* Solid, not glass. A card separates itself from the page two ways at once,
   because on a dark ground neither is enough alone: it sits a step lighter
   than the background, and it carries a soft shadow — plus the hairline that
   keeps that shadow from reading as a fog patch. The class name is kept as-is
   so the other seven pages do not all need editing for a rename. */
.card-glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card-glass:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-lift); }

.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 26px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
  position: relative;
  z-index: 1;
}
.step-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

/* The app's primary button is inverted — cream surface, forest ink — which is
   what makes it the loudest thing on a screen without adding a colour. */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--primary);
  color: var(--primary-ink);
  transition: transform 0.25s var(--ease), box-shadow 0.35s var(--ease);
  box-shadow: 0 1px 2px -1px rgba(6,17,13,0.4);
}
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(245,241,232,0.35); }
.cta-btn:active { transform: translateY(0) scale(0.985); }
.cta-btn--nav { height: 34px; padding: 0 16px; font-size: 13px; }
.cta-btn--lg { height: 48px; padding: 0 28px; font-size: 15px; }
.cta-btn--block { display: flex; width: 100%; height: 48px; padding: 0 30px; }
.cta-btn-glow { box-shadow: 0 0 30px -6px rgba(143,217,174,0.3); }
.cta-btn-glow:hover { box-shadow: 0 12px 34px -10px rgba(245,241,232,0.4); }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ghost-btn:hover { background: var(--tint-2); border-color: rgba(245,241,232,0.34); transform: translateY(-1px); }
.ghost-btn:active { transform: translateY(0) scale(0.985); }

/* Kept as a hook so the existing markup keeps working, but the blobs are now
   a barely-there mint wash rather than the old blue/violet glow — the point
   is a warm gradient in the ground, not a light source. */
.glow-blob { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; }

.strong { color: var(--fg); font-weight: 600; }
.muted { color: var(--muted-2); }

.section-head { max-width: 580px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: balance; }
.section-head p { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0; }

.login-link { font-size: 14px; color: var(--muted); transition: color 0.2s var(--ease); }
.login-link:hover { color: var(--fg); }
.link-underline { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--tint-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

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

.nav-bar {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(14,31,25,0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.nav-inner { max-width: 1152px; margin: 0 auto; padding-top: 16px; padding-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.015em; }
/* The Kelvir "K" mark — a photo/raster asset, not an inline SVG like the old
   wallet glyph, so it needs its own object-fit/radius rather than inheriting
   stroke-color styling the way the SVG did. */
.brand-mark { display: block; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 24px; }

/* Mobile hamburger menu — hidden entirely on desktop, where .nav-links
   above already renders the same links inline. Kept as its own <details>
   with its own copy of the links (nav-menu-panel), rather than trying to
   force this <details> open via CSS on desktop: Chromium hides a closed
   <details> content via content-visibility, not plain display, so an
   author override on .nav-links alone cannot make it render open there —
   duplicating four short links is far simpler than fighting that. */
.nav-menu { display: none; }
.nav-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--fg);
  list-style: none;
  transition: background 0.2s var(--ease);
}
.nav-menu-toggle::-webkit-details-marker { display: none; }
.nav-menu-toggle:hover { background: var(--tint-2); }
.nav-menu-icon-close { display: none; }
.nav-menu[open] .nav-menu-icon-open { display: none; }
.nav-menu[open] .nav-menu-icon-close { display: block; }

/* ---------- hero ---------- */

.hero-wrap { position: relative; overflow: hidden; }
.glow-blob--hero-1 { width: 620px; height: 620px; top: -220px; left: -140px; background: rgba(143,217,174,0.10); }
.glow-blob--hero-2 { width: 520px; height: 520px; top: 40px; right: -180px; background: rgba(38,73,59,0.75); }

.hero-inner { max-width: 1152px; margin: 0 auto; padding: 88px 24px 92px; position: relative; z-index: 1; }
.hero-row { display: flex; align-items: center; gap: 56px; }
.hero-copy { flex: 0 1 46%; max-width: 470px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(143,217,174,0.28);
  background: rgba(143,217,174,0.09);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.03em;
  margin-bottom: 24px;
}

.hero-title { font-size: 46px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 20px; text-wrap: balance; }
/* Was a blue-to-violet gradient. The palette has exactly two voices, so
   emphasis is the mint one — flat, not a gradient, which is what keeps it
   delicate rather than loud. */
.gradient-text { color: var(--accent); }
.hero-sub { font-size: 16.5px; line-height: 1.65; color: var(--muted); margin: 0 0 32px; }
.hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-checks { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.check-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.hero-note { font-size: 12.5px; color: var(--muted-2); margin: 10px 0 0; }

.hero-visual { flex: 1 1 54%; max-width: 600px; min-width: 0; display: flex; justify-content: center; }

/* ---------- phone mockup ---------- */

/* Two phone screens rather than the old desktop browser window: the product
   is a phone app now, and showing the assistant beside the dashboard is what
   says "the bot lives inside the app" without a word of copy. */
.phone-duo { display: flex; align-items: flex-end; justify-content: center; gap: 22px; width: 100%; }

.phone {
  position: relative;
  width: 246px;
  flex: 0 0 246px;
  border-radius: 38px;
  padding: 9px;
  background: linear-gradient(160deg, rgba(245,241,232,0.16), rgba(245,241,232,0.05));
  box-shadow: var(--shadow-lift);
}
.phone--lead { transform: translateY(-24px); }
.phone-screen {
  position: relative;
  border-radius: 30px;
  background: var(--bg);
  overflow: hidden;
  padding: 15px 13px 0;
  min-height: 436px;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 5px;
  border-radius: 999px;
  background: rgba(245,241,232,0.16);
}

.phone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 14px; }
.phone-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.phone-avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--surface-3); color: var(--fg); font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* the dashboard screen */
.phone-balance-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px; }
.phone-balance-label { font-size: 10px; color: var(--muted-2); margin-bottom: 5px; }
.phone-balance { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phone-balance-currency { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.phone-balance-delta { font-size: 10.5px; color: var(--good); margin-top: 5px; }

.phone-split { display: flex; gap: 8px; margin-bottom: 14px; }
.phone-mini { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; }
.phone-mini-label { font-size: 9px; color: var(--muted-2); margin-bottom: 3px; }
.phone-mini-value { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-mini-value--good { color: var(--good); }
.phone-mini-value--bad { color: var(--bad); }

.phone-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted-2); margin-bottom: 6px; }

/* Two lines and an amount — the same row shape the app itself uses, so the
   mockup does not promise a layout the product does not have. */
.phone-tx { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.phone-tx:last-child { border-bottom: none; }
.phone-tx-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.phone-tx-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.phone-tx-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-tx-sub { font-size: 10px; color: var(--muted-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-tx-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; }
.phone-tx-amount { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.phone-tx-amount--bad { color: var(--bad); }
.phone-tx-amount--good { color: var(--good); }
.phone-tx-date { font-size: 9.5px; color: var(--muted-2); margin-top: 2px; }

/* the assistant screen */
.phone-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.phone-bubble { max-width: 88%; padding: 8px 11px; font-size: 11.5px; line-height: 1.45; border-radius: var(--radius); }
.phone-bubble--bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--muted); }
.phone-bubble--user { align-self: flex-end; background: rgba(143,217,174,0.15); border: 1px solid rgba(143,217,174,0.25); border-bottom-right-radius: 5px; }
.phone-bubble--card { align-self: flex-start; width: 100%; max-width: 100%; background: var(--surface); border: 1px solid rgba(143,217,174,0.3); padding: 11px 12px; }
.phone-bubble-head { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; font-size: 10.5px; font-weight: 700; color: var(--good); }
.phone-bubble-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; padding: 2.5px 0; }
.phone-bubble-key { color: var(--muted-2); }
.phone-bubble-val { font-weight: 600; }
.phone-bubble-time { font-size: 9px; color: var(--muted-2); text-align: right; margin-top: 4px; }

.phone-composer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 9px 0 11px; }
.phone-composer-field { flex: 1; min-width: 0; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--tint-1); display: flex; align-items: center; padding: 0 12px; font-size: 10.5px; color: var(--muted-2); }
.phone-composer-mic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }

/* the tab bar with its centre action — the app's own nav, in miniature */
.phone-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  margin: 0 -13px;
  padding: 9px 9px 13px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.phone-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7px; letter-spacing: -0.015em; white-space: nowrap; color: var(--muted-3); flex: 1; min-width: 0; }
.phone-tab--on { color: var(--fg); }
.phone-fab { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px; background: var(--primary); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px rgba(245,241,232,0.4); }

/* ---------- how it works ---------- */

.how-section { max-width: 1152px; margin: 0 auto; padding: 24px 24px 80px; }
.steps-wrap { position: relative; }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.step-num { font-weight: 700; font-size: 32px; letter-spacing: -0.02em; color: var(--muted-3); margin-bottom: 10px; line-height: 1; }
.step-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(143,217,174,0.1); border: 1px solid rgba(143,217,174,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--accent); }
.step-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.step-card p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.step-card p.mb { margin: 0 0 14px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11.5px; padding: 5px 9px; border-radius: 8px; background: var(--tint-2); border: 1px solid var(--border); color: var(--muted); }
.tag--good { display: inline-flex; align-items: center; gap: 4px; background: rgba(143,217,174,0.12); border-color: rgba(143,217,174,0.28); color: var(--good); }

/* ---------- features / bento ---------- */

.features-wrap { position: relative; overflow: hidden; }
.glow-blob--features { width: 560px; height: 560px; bottom: -240px; right: -160px; background: rgba(143,217,174,0.08); }
.features-inner { max-width: 1152px; margin: 0 auto; padding: 16px 24px 88px; position: relative; z-index: 1; }

.bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* flex-start, not space-between: with 6 cards carrying six different widgets
   (bar, chart, fx list, avatars...) of six different natural heights,
   bottom-anchoring the widget meant its start position tracked each card's
   own height instead of its sibling's — a short widget on a row stretched
   tall by a taller neighbour got pushed down to meet the bottom edge. Any
   leftover stretched height now just falls below the widget instead. */
.bento-card { display: flex; flex-direction: column; height: 100%; padding: 26px; }
.feature-icon { color: var(--accent); margin-bottom: 16px; }
.bento-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
/* min-height fits the longest description in this grid (Presupuestos', 3
   lines) so every widget starts at the same distance from the card top
   regardless of how many lines its own description happens to wrap to. */
.bento-card p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; min-height: 68px; }

.bar-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bar-label { font-size: 12.5px; font-weight: 600; }
.bar-hint { font-size: 11px; color: var(--muted-2); }
.bar-warn { font-size: 11px; color: var(--warn); font-weight: 600; }
.bar-track { height: 6px; border-radius: 999px; background: var(--tint-2); overflow: hidden; margin-bottom: 12px; }
.bar-track--sm { height: 5px; margin-bottom: 0; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.bar-fill--warn { background: var(--warn); }

.fx-list { display: flex; flex-direction: column; gap: 6px; }
.fx-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-radius: var(--radius-sm); background: var(--tint-1); border: 1px solid var(--border); font-size: 11.5px; }
/* Styled like the "Débito diferido mes a mes" pill on the neighbouring
   card (.pill, above) rather than plain caption text — same badge
   treatment for a trailing detail line under a feature card. */
.fx-updated { margin-top: 12px; }

.card-due { background: var(--tint-1); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }
.card-due-date { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.card-due-amount { font-size: 14px; font-weight: 600; }

.avatars-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.avatars { display: flex; }
.avatar { width: 27px; height: 27px; border-radius: 999px; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.avatar--accent { background: var(--accent); color: var(--accent-ink); }
.avatar--muted { background: var(--surface-3); color: var(--fg); margin-left: -8px; }
.settled { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--good); font-weight: 500; }
.split-bar { height: 6px; border-radius: 999px; overflow: hidden; display: flex; }
.split-half { width: 50%; }
.split-half--accent { background: var(--accent); }
.split-half--muted { background: var(--surface-3); }
.split-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--muted-2); }

.spark-wrap { overflow: hidden; }
.spark-change { font-size: 12px; font-weight: 600; color: var(--good); text-align: right; }

/* ---------- trust ---------- */

.trust-section { max-width: 1152px; margin: 0 auto; padding: 16px 24px 84px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trust-card { padding: 26px; }
.trust-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.trust-card p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */

.faq-section { max-width: 760px; margin: 0 auto; padding: 16px 24px 96px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 4px 20px;
  transition: border-color 0.3s var(--ease);
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item[open] { border-color: rgba(143,217,174,0.28); }

.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.faq-question::-webkit-details-marker { display: none; }

.faq-chevron { flex-shrink: 0; color: var(--muted-2); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--accent); }

.faq-answer { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; }

/* ---------- closing CTA ---------- */

.closing-wrap { padding-top: 96px; padding-bottom: 64px; position: relative; }
.closing-border {
  max-width: 1152px;
  margin: 0 auto;
  position: relative;
  padding: 1px;
  border-radius: 25px;
  background: linear-gradient(135deg, rgba(143,217,174,0.32), rgba(245,241,232,0.06) 45%, rgba(143,217,174,0.22));
  overflow: hidden;
}
.glow-blob--closing { width: 460px; height: 460px; top: -180px; left: 50%; transform: translateX(-50%); background: rgba(143,217,174,0.11); }
.closing-card { position: relative; background: var(--surface); border-radius: 24px; padding: 60px 40px; text-align: center; }
.closing-title { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 14px; text-wrap: balance; }
.closing-sub { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 auto 30px; max-width: 470px; }
.closing-footnote { font-size: 13px; color: var(--muted-2); margin: 16px 0 0; }

/* ---------- pricing ---------- */

.pricing-section { max-width: 1152px; margin: 0 auto; padding: 16px 24px 96px; }

/* Three plans, equal width AND equal height — Base's shorter list (4 items
   vs. Completo's 6) used to leave it visibly shorter side by side with the
   other two, which read as uneven rather than "smaller by design." The
   featured border/glow on Completo already carries the hierarchy signal, so
   stretching every card to the row's tallest doesn't need to fight it.
   pricing-card is a column so the CTA pins to margin-top: auto below,
   landing every "Empezar"/"Probar" button on the same baseline regardless
   of how many bullets sit above it. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: stretch;
}
.pricing-card { display: flex; flex-direction: column; padding: 32px 26px; text-align: center; }
.pricing-card .cta-btn--block { margin-top: auto; }
.pricing-card .pill { margin-bottom: 20px; }

/* The recommended plan is marked with the mint edge the rest of the page uses
   for emphasis, not with a bigger card or a second accent colour. */
.pricing-card--featured { border-color: rgba(143,217,174,0.45); box-shadow: 0 0 44px -16px rgba(143,217,174,0.38); }
.pricing-card--featured:hover { border-color: var(--accent); }
.pricing-card--featured .pill { background: rgba(143,217,174,0.14); border-color: rgba(143,217,174,0.4); color: var(--accent); }

/* Reads at the same size as a price, because in this column it is one. */
.price-free { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }

/* "Todo lo de Base, más:" — keeps the paid column from restating four lines
   the reader just finished. */
.pricing-carryover { font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 14px; text-align: left; }
.price-anchor { font-size: 20px; color: var(--muted-2); text-decoration: line-through; margin-bottom: 2px; }
.price-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 2px; }
.price { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.price-period { font-size: 15px; color: var(--muted-2); }
.price-currency { font-size: 13px; color: var(--muted-2); margin-bottom: 8px; }
.price-daily { font-size: 14px; color: var(--muted); margin: 0 0 28px; }
.price-daily strong { color: var(--fg); }

.pricing-list { list-style: none; margin: 0 0 30px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.pricing-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); }
.pricing-list svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--border); background: var(--surface-2); }
.footer-inner { max-width: 1152px; margin: 0 auto; padding: 30px 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-2); flex-shrink: 0; white-space: nowrap; }
.footer-links { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.footer-links .login-link { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.footer-copy { font-size: 11.5px; color: var(--muted-3); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-row { flex-direction: column; }
  .hero-copy { max-width: 100%; flex-basis: auto; }
  .hero-visual { width: 100%; max-width: 100%; flex-basis: auto; margin-top: 48px; }
  .steps-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 20px; }
  /* Straight from three to one. Two-up would leave a lone card on a second
     row, and at tablet width three columns already squeeze the feature
     lines into four each. */
  .pricing-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 430px; }
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 16px; }

  /* The inline desktop nav gives way to the hamburger menu — its panel is
     hidden unless the <details> is open, styled as a full-width dropdown
     under the bar rather than an inline row. */
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .nav-menu-toggle { display: flex; }
  .nav-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 24px 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .nav-menu[open] .nav-menu-panel { display: flex; }
  .nav-menu-panel .login-link { padding: 10px 0; font-size: 15px; }

  /* Same content, stacked instead of hidden — on a real phone there's
     plenty of vertical room, so wrapping the link list across a couple of
     rows reads fine and keeps Términos/Privacidad/Iniciar sesión reachable
     without a menu. Only the cramped 901–1160px tablet band (below) still
     drops the list rather than let it wrap awkwardly next to the brand. */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-links { flex-wrap: wrap; gap: 10px 20px; }
}

/* Between full mobile and the width the full footer nav needs to sit on one
   line next to the brand and the copyright (see the 1161px+ rule below),
   there's neither enough room for one line nor enough vertical slack for a
   comfortable wrap — so this band drops the link list instead, same as the
   original fix for the two-line-footer bug. Deliberately a separate query
   from the 900px one above: this threshold is sized to this row's own
   content width, not tied to the breakpoints used for the hero/bento/trust
   grids. */
@media (min-width: 901px) and (max-width: 1160px) {
  .footer-links { display: none; }
}

/* The two phones sit side by side down to here. Below it there isn't room
   for both at a legible size, so the assistant screen — the one the hero
   copy is actually about — is the one that stays. */
@media (max-width: 620px) {
  .bento-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .section-pad { padding-left: 18px; padding-right: 18px; }
  .hero-title { font-size: 33px; }
  .closing-title { font-size: 26px; }
  .closing-card { padding: 44px 24px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas a { width: 100%; }
  .phone-duo { gap: 0; }
  .phone--trail { display: none; }
  .phone--lead { transform: none; }
  .phone { width: 268px; flex-basis: 268px; }
}

/* ---------- contact form ---------- */

.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.contact-field input,
.contact-field textarea {
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--tint-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-field input:focus,
.contact-field textarea:focus { border-color: rgba(143,217,174,0.5); box-shadow: 0 0 0 3px rgba(143,217,174,0.14); }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--muted-2); }

.contact-form-status { min-height: 16px; font-size: 13px; margin: 0; color: var(--muted); }
.contact-form-status--ok { color: var(--good); }
.contact-form-status--error { color: var(--bad); }