/* ============================================================================
   Cuanto Cuesta — landing shared stylesheet
   One design system for all three landing pages (/, /para-negocios, /para-ti).
   Tokens mirror frontend/src/app/globals.css — keep them in sync by hand.
   ========================================================================== */

:root {
  /* Brand — aligned with the app design system (frontend/src/app/globals.css) */
  --dark: #1A2E28;          /* --color-brand-dark */
  --green: #1ea64c;         /* --color-brand-green */
  --green-dim: #2EA05A;     /* darker green for hover/success states */
  --mint: #E9F6ED;          /* --color-brand-green-bg */
  --mint-2: #D4EDDE;        /* deeper brand tint (orbs, dividers) */
  --white: #FFFFFF;         /* --color-white — elevated surface: cards, fields */
  --page-bg: #FFFFFF;       /* page + header base (flips darkest in dark mode) */
  --dark-bg: #1A2E28;       /* --color-brand-dark — the dark full-width bands */
  --muted: #4B5563;         /* --color-gray-600 */
  --border: #E5E7EB;        /* --color-gray-200 */
  --gray-50: #F9FAFB;       /* --color-gray-50 */
  --gray-400: #9CA3AF;      /* --color-gray-400 / --color-text-muted */
  --danger: #DC2626;        /* --color-danger */

  /* Layout */
  --header-height: 60px;

  /* Radii — --radius-* scale */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows — --shadow-* scale */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
  --shadow-cta: 0 4px 16px color-mix(in srgb, var(--green) 28%, transparent);

  /* Motion */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration-slow: 0.6s;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--page-bg);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── SITE HEADER ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.site-logo {
  display: flex;
  align-items: center;
}

.site-logo img {
  height: 28px;
  width: auto;
}

.site-logo .logo-full { display: block; }
.site-logo .logo-mark { display: none; }

@media (max-width: 374px) {
  .site-logo .logo-full { display: none; }
  .site-logo .logo-mark { display: block; }
}

/* Headers that carry a mobile CTA pill (/para-negocios, /para-ti) also hold the
   language toggle, so the row is tighter than the investor header (logo + toggle
   only). Collapse to the logo mark earlier on those pages so nothing overflows on
   phones; the investor header keeps its wordmark down to 374px above. */
@media (max-width: 480px) {
  .site-header-inner:has(.nav-cta) .site-logo .logo-full { display: none; }
  .site-header-inner:has(.nav-cta) .site-logo .logo-mark { display: block; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
}

.nav-link {
  display: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.nav-link:hover {
  color: var(--dark);
}

@media (min-width: 768px) {
  .nav-link {
    display: inline-flex;
  }
}

/* A compact pill link that stays visible on mobile (used for the cross-audience
   CTA in the header of the two new pages). */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.nav-cta:hover {
  background: var(--mint);
  border-color: var(--mint-2);
}

main#main-content {
  flex: 1;
  padding-top: var(--header-height);
}

/* ─── HERO ─── */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* header + hero = one full viewport; content biased to the upper third */
  min-height: calc(100svh - var(--header-height));
  padding: 56px clamp(24px, 4vw, 48px) calc(56px + 12svh);
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
}

/* Soft brand-green glow behind the content — echoes the app hero's radial wash. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 32%, color-mix(in srgb, var(--green) 10%, transparent), transparent 72%),
    radial-gradient(40% 40% at 82% 12%, color-mix(in srgb, var(--green) 4%, transparent), transparent 70%);
  pointer-events: none;
}

.hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Staggered entrance — each element fades up in sequence on load */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero .eyebrow { animation: heroFadeUp var(--duration-slow) var(--ease-out-soft) both; }
.hero-h1 { animation: heroFadeUp var(--duration-slow) var(--ease-out-soft) 0.05s both; }
.hero-sub { animation: heroFadeUp var(--duration-slow) var(--ease-out-soft) 0.15s both; }
.actions { animation: heroFadeUp var(--duration-slow) var(--ease-out-soft) 0.25s both; }
.hero-form { animation: heroFadeUp var(--duration-slow) var(--ease-out-soft) 0.25s both; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid rgba(30, 166, 76, 0.35);
  color: var(--dark);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: var(--radius-full);
  margin-bottom: 32px;
}

.eyebrow .e-star {
  color: var(--green);
  flex-shrink: 0;
}

.hero-h1 {
  font-size: clamp(56px, 9.5vw, 104px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 28px;
}

/* A slightly smaller hero headline for the secondary pages, where the copy is
   longer than the one-line investor tagline. */
.hero-h1.hero-h1-md {
  font-size: clamp(40px, 7vw, 76px);
}

.h1-dark {
  color: var(--dark);
  display: block;
}

.h1-green {
  color: var(--green);
  display: block;
}

.hero-sub {
  font-size: clamp(17px, 2.4vw, 22px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 44px;
}

.hero-sub.hero-sub-wide {
  max-width: 560px;
}

.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Inline hero sign-up (para-ti): the waitlist card sits directly inside the
   centered hero instead of a button that scrolls to a separate form section. */
.hero-form {
  width: 100%;
  max-width: 520px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: filter var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
  border: none;
  cursor: pointer;
}

/* Press feedback — the only cue touch users get, since they never hover */
.btn:active {
  transform: translateY(1px);
}

.btn-green {
  background: var(--green);
  color: white;
  box-shadow: var(--shadow-cta);
}

.btn-green:hover {
  filter: brightness(0.94);
  box-shadow: var(--shadow-md);
}

.btn-green:disabled {
  opacity: 0.7;
  cursor: default;
  filter: none;
}

.btn-ghost {
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--border);
}

.btn-ghost:hover {
  background: var(--mint);
  border-color: var(--mint-2);
}

.btn-block {
  width: 100%;
}

/* ─── TICKER ─── */
.ticker {
  background: var(--dark-bg);
  padding: clamp(26px, 4vh, 40px) 0;
}

.ticker-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: center;
}
@media (min-width: 480px) {
  .ticker-inner { grid-template-columns: repeat(2, 1fr); gap: 24px 40px; }
}
@media (min-width: 768px) {
  .ticker-inner { grid-template-columns: repeat(4, 1fr); gap: 48px; }
  .t-desc { white-space: nowrap; }
}

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

.t-val {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.t-desc {
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
  white-space: normal;
}

/* ─── SHARED LAYOUT ─── */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.wrap-narrow {
  max-width: 620px;
}

.sec {
  padding: clamp(64px, 10vh, 100px) 0;
}

.lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}

.sec-h2 {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 48px;
}

.sec-h2 .acc {
  color: var(--green);
}

.sec-intro {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 620px;
  margin: -32px 0 48px;
}

/* ─── PROBLEM CARDS ─── */
.problem-bg {
  background: var(--mint);
}

.prob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.prob-card {
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  padding: 38px 34px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-soft), border-color var(--duration-fast) ease;
}

.prob-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

.prob-lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 20px;
}

.prob-num {
  font-size: clamp(58px, 8vw, 76px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

.prob-unit {
  font-size: 28px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
}

.prob-desc {
  font-size: 14px;
  color: var(--muted);
  margin-top: 12px;
}

/* ─── STEPS / BENEFIT CARDS ─── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.step {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
}

.step-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.step-icon {
  width: 48px;
  height: 48px;
  background: var(--mint);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--green);
}

.step-icon svg {
  width: 24px;
  height: 24px;
}

.step-n {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

.step-name {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.step-bar {
  width: 28px;
  height: 2px;
  background: var(--mint-2);
  margin-bottom: 14px;
}

.step-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ─── MODEL / PRICING ─── */
.model-bg {
  background: var(--mint);
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.mc {
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 52px) clamp(28px, 4.5vw, 48px);
}

.mc-light {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.mc-dark {
  background: var(--dark-bg);
  color: white;
}

.mc h3 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.mc-dark h3 .g {
  color: var(--green);
}

.mc-price {
  font-size: clamp(52px, 8vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 20px 0 28px;
  font-variant-numeric: tabular-nums;
}

.mc-light .mc-price {
  color: var(--dark);
}

.mc-dark .mc-price {
  color: var(--green);
}

.mc-price small {
  font-size: 0.38em;
  font-weight: 600;
  opacity: 0.6;
  letter-spacing: 0;
}

.feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feats li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.45;
}

.mc-light .feats li {
  color: var(--dark);
}

.mc-dark .feats li {
  color: rgba(255, 255, 255, 0.75);
}

.chk {
  width: 20px;
  min-width: 20px;
  height: 20px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.chk svg {
  width: 10px;
  height: 10px;
}

.mc-featured {
  box-shadow: 0 0 0 2px var(--green), var(--shadow-lg);
}

.mc-popular {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}

.mc-everything {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: -14px;
  margin-bottom: 20px;
}

.mc-light .mc-everything {
  color: var(--muted);
}

.mc-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  margin-top: 20px;
}

/* ─── TRACTION ─── */
.traction-bg {
  background: var(--dark-bg);
}

.traction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.tc {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 30px 28px;
}

.tc-n {
  font-size: clamp(40px, 6vw, 58px);
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tc-l {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 8px;
}

.traction-note {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  text-align: center;
  margin-top: 36px;
}

/* ─── DARK CTA BAND (waitlist / investor / launch) ─── */
.wl-bg {
  position: relative;
  background: var(--dark-bg);
  background-image: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 70%);
  overflow: hidden;
  padding: clamp(64px, 10vh, 100px) clamp(20px, 4vw, 48px);
  text-align: center;
}

.wl-logo {
  height: 40px;
  margin-bottom: 36px;
}

.wl-h2 {
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
  margin-bottom: 16px;
}

.wl-h2 .g {
  color: var(--green);
}

.wl-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 36px;
  line-height: 1.5;
}

.wl-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
}

.wl-input {
  flex: 1;
  min-width: 220px;
  padding: 15px 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  color: white;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wl-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.wl-input:focus {
  border-color: var(--green);
}

.wl-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 16px;
}

/* GDPR consent line inside a dark form */
.wl-form .wl-note {
  font-size: 12px;
  line-height: 1.5;
}

.wl-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  cursor: pointer;
  text-align: left;
}

.wl-consent input {
  margin-top: 3px;
  accent-color: var(--green);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ─── LIGHT FORM CARD + FIELDS (rectangle family, mirrors frontend Input) ─── */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 5vw, 44px);
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.form-card-head {
  margin-bottom: 28px;
}

.form-card-head h2 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.form-card-head p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}

.field .opt {
  font-weight: 500;
  color: var(--gray-400);
}

.field-control {
  height: 48px;
  width: 100%;
  padding: 0 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--dark);
  font-size: 16px;
  font-family: inherit;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.field-control::placeholder {
  color: var(--gray-400);
}

.field-control:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

.field-control:user-invalid {
  border-color: var(--danger);
}

/* Native select with a drawn chevron (keeps mobile pickers + a11y) */
select.field-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.field-hint {
  font-size: 13px;
  color: var(--muted);
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.form-consent input {
  margin-top: 2px;
  accent-color: var(--green);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ─── SHARED FORM: foot note, honeypot, success panel ─── */
.form-foot-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 14px;
}

/* Honeypot — hidden from real users, catches bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success confirmation panel that replaces a submitted form */
.form-done {
  text-align: center;
  padding: clamp(28px, 5vw, 44px);
}

.form-done-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.form-done-check svg {
  width: 26px;
  height: 26px;
}

.form-done h2 {
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.form-done p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0 auto;
}

/* ─── FOOTER ─── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--gray-50);
}

.site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.footer-nav a:hover {
  color: var(--dark);
}

/* Bottom bar — logo mark + copyright */
.footer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-400);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--duration-fast) ease;
}

.footer-brand:hover {
  opacity: 0.7;
}

.footer-brand img {
  display: block;
}

/* ─── AWARD STRIP ─── */
.award-strip {
  background: var(--dark-bg);
  padding: 20px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.award-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.award-text {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 800;
  color: white;
  letter-spacing: -0.01em;
}

.award-text span span {
  color: var(--green);
}

/* ─── LANGUAGE TOGGLE ─── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  opacity: 0.4;
  transition: opacity var(--duration-fast), background var(--duration-fast);
}

.lang-btn:hover {
  opacity: 0.75;
}

.lang-btn.active {
  opacity: 1;
  background: var(--mint);
}

.lang-btn img {
  width: 24px;
  height: 18px;
  display: block;
  border-radius: 3px;
}

/* ─── BILINGUAL SHOW/HIDE (bilingual pages: /, /para-negocios, /para-ti) ─── */
.lang-es {
  display: none;
}

body.es .lang-en {
  display: none;
}

body.es .lang-es {
  display: revert;
}

/* ─── FOUNDER ─── */
.founder-role {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}

.founder-bio {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 640px;
}

/* ─── BUSINESS CTA (dark band with green top-glow) ─── */
.biz-cta-bg {
  position: relative;
  background: var(--dark-bg);
  background-image: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 70%);
  overflow: hidden;
}

.biz-sub {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
  max-width: 520px;
  margin-bottom: 28px;
}

.biz-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.biz-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.45;
}

.biz-fine {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 16px;
}

/* ─── LINKEDIN LINK ─── */
.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.55;
  transition: opacity 0.15s;
}

.linkedin-link:hover {
  opacity: 1;
}

.linkedin-link img {
  width: 22px;
  height: 22px;
  display: block;
}

/* ─── INSIGHT CARD (dashboard preview highlight) ─── */
.insight {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  padding: clamp(28px, 5vw, 44px);
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: white;
  box-shadow: var(--shadow-cta), var(--shadow-lg);
  max-width: 620px;
}

.insight-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: white;
  background: rgba(255, 255, 255, 0.18);
  padding: 7px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 22px;
}

.insight-line {
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 12px;
}

.insight-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  max-width: 46ch;
}

/* ─── ANIMATIONS ─── */
.fade {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--duration-slow) var(--ease-out-soft), transform var(--duration-slow) var(--ease-out-soft);
}

.fade.show {
  opacity: 1;
  transform: none;
}

.stagger .fade:nth-child(1) { transition-delay: 0ms; }
.stagger .fade:nth-child(2) { transition-delay: 90ms; }
.stagger .fade:nth-child(3) { transition-delay: 180ms; }
.stagger .fade:nth-child(4) { transition-delay: 270ms; }

/* ─── SKIP LINK ─── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 0;
  z-index: 9999;
  background: var(--green);
  color: white;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 0;
}

/* ─── SCREEN READER ONLY ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── FOCUS VISIBLE ─── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.btn:focus-visible {
  outline-offset: 4px;
}

.lang-btn:focus-visible {
  outline-offset: 2px;
}

.wl-input:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent);
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero .eyebrow,
  .hero-h1,
  .hero-sub,
  .actions,
  .hero-form {
    animation: none;
  }
}

/* ============================================================================
   DARK MODE — automatic, follows the OS/browser preference (no toggle).
   Only the light surface + foreground tokens flip. The dark full-width bands
   (--dark-bg) and the raw white text sitting on them are already dark-correct,
   so they stay untouched. Depth ladder (darkest → lightest):
   page (--page-bg) < bands (--dark-bg) < cards/fields (--white).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0E1A15;    /* page + header base (darkest) */
    --white: #223A31;      /* elevated surface: cards, fields */
    --dark: #E9F2ED;       /* primary text + icons (was near-black) */
    --muted: #A2B3AB;      /* secondary text */
    --gray-400: #76877F;   /* placeholders, quiet labels */
    --gray-50: #182821;    /* subtle fills */
    --border: #2E4239;     /* hairlines, field borders */
    --mint: #16261F;       /* green-tint fill: service rows, tinted sections, ghost hover */
    --mint-2: #2A463A;     /* deeper tint: dividers, tint borders */

    /* Shadows carry the depth on a dark page, so cast them darker and softer */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 14px 28px -8px rgb(0 0 0 / 0.6);
  }

  /* Lighten the drawn select chevron so it stays legible on a dark field */
  select.field-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A2B3AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}