:root {
    color-scheme: light;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* ===== identidad Grownet ===== */
    --forest:   #1D3527;
    --forest-2: #27543C;
    --green:    #2E5B3E;
    --green-d:  #22452F;
    --green-lt: #609666;

    --bg:      #F9F4EA;
    --surface: #FFFFFF;
    --sunk:    #F2EDE1;
    --tint-g:  #E7EFE6;
    --tint-l:  #EAF2E7;
    --ink:     #16261C;
    --ink-2:   #35473B;
    --muted:   #5F7064;
    --faint:   #8D9A8F;
    --line:    #E3DECF;
    --line-2:  #CFC9B6;

    --sh-s: 0 1px 2px rgba(29,53,39,.05), 0 4px 14px rgba(29,53,39,.06);
    --sh-m: 0 2px 6px rgba(29,53,39,.07), 0 14px 38px rgba(29,53,39,.11);

    --r:   14px;
    --r-l: 22px;
    --disp: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

    --max: 1140px;
    --gut: 22px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --forest:   #0D1A12;
      --forest-2: #15291C;
      --green:    #74B881;
      --green-d:  #5CA26A;
      --green-lt: #8FD199;
      --bg:      #101A14;
      --surface: #182619;
      --sunk:    #1D2E20;
      --tint-g:  #1C3524;
      --tint-l:  #1F3A26;
      --ink:     #ECF0E8;
      --ink-2:   #C9D3C5;
      --muted:   #94A394;
      --faint:   #6C7B6D;
      --line:    #243527;
      --line-2:  #334733;
      --sh-s: 0 1px 2px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.3);
      --sh-m: 0 2px 6px rgba(0,0,0,.4), 0 14px 38px rgba(0,0,0,.46);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --forest:   #0D1A12; --forest-2: #15291C;
    --green:    #74B881; --green-d: #5CA26A; --green-lt: #8FD199;
    --bg: #101A14; --surface: #182619; --sunk: #1D2E20;
    --tint-g: #1C3524; --tint-l: #1F3A26;
    --ink: #ECF0E8; --ink-2: #C9D3C5; --muted: #94A394; --faint: #6C7B6D;
    --line: #243527; --line-2: #334733;
    --sh-s: 0 1px 2px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.3);
    --sh-m: 0 2px 6px rgba(0,0,0,.4), 0 14px 38px rgba(0,0,0,.46);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 88px; }
  html, body { margin: 0; }
  img, svg { max-width: 100%; }
  [hidden] { display: none !important; }

  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--sans); font-size: 16.5px; line-height: 1.62;
    -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  }

  .wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
  .center { text-align: center; }

  h1, h2, h3, h4 {
    font-family: var(--disp); margin: 0; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance;
  }
  h1 { font-size: clamp(36px, 6.6vw, 64px); }
  h2 { font-size: clamp(29px, 4.6vw, 46px); }
  h3 { font-size: clamp(19px, 2.3vw, 23px); letter-spacing: -0.02em; }
  h4 { font-size: 17px; letter-spacing: -0.015em; }
  p  { margin: 0; }
  a  { color: inherit; }

  .grad {
    background: linear-gradient(96deg, var(--green) 6%, var(--green-lt) 94%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .lede { font-size: clamp(16.5px, 2vw, 19.5px); color: var(--muted); line-height: 1.6; }
  .center .lede { margin-inline: auto; max-width: 62ch; }
  .small { font-size: 14.8px; color: var(--muted); }
  .tiny  { font-size: 12.8px; color: var(--faint); }

  .pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--green);
    background: var(--tint-g); border-radius: 999px; padding: 6px 15px;
  }
  .pill.l { color: var(--green-d); background: var(--tint-l); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--sans); font-size: 15.5px; font-weight: 700;
    padding: 14px 26px; border-radius: 10px; border: 1px solid transparent;
    background: var(--surface); color: var(--ink); box-shadow: var(--sh-s);
    text-decoration: none; cursor: pointer; text-align: center;
    transition: transform .16s, box-shadow .16s, background .16s, color .16s;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-m); }
  .btn-1 { background: var(--green); color: #FFFFFF; }
  .btn-1:hover { background: var(--green-d); }
  .btn-o { background: transparent; border-color: var(--line-2); box-shadow: none; color: var(--ink); }
  .btn-o:hover { border-color: var(--green); color: var(--green); box-shadow: none; }
  .btn-w { background: #FFFFFF; color: var(--forest); border-color: #FFFFFF; }
  .btn-w:hover { background: var(--green-lt); border-color: var(--green-lt); color: var(--forest); }
  .btn-sm { font-size: 14.2px; padding: 10px 18px; border-radius: 9px; }
  .btns { display: flex; flex-wrap: wrap; gap: 12px; }
  .center .btns { justify-content: center; }
  :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

  header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--forest); }
  .topin { display: flex; align-items: center; gap: 18px; height: 72px; }
  .logo { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
  .logo img { height: 28px; width: auto; display: block; }
  nav.desk { display: flex; gap: 22px; align-items: center; }
  nav.desk > a { font-size: 14.6px; font-weight: 500; color: rgba(249,244,234,.78); text-decoration: none; white-space: nowrap; }
  nav.desk > a:hover { color: #FFFFFF; }

  .dd { position: relative; }
  .ddb {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font-family: var(--sans); font-size: 14.6px; font-weight: 500;
    color: rgba(249,244,234,.78); background: none; border: 0; padding: 0;
  }
  .ddb:hover, .dd.open .ddb { color: #FFFFFF; }
  .ddb svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
  .dd.open .ddb svg { transform: rotate(180deg); }
  .ddm {
    position: absolute; top: calc(100% + 14px); left: -14px; width: 262px; z-index: 60;
    background: var(--surface); border-radius: 14px; box-shadow: var(--sh-m);
    padding: 8px; display: none; flex-direction: column; gap: 2px;
  }
  .dd.open .ddm { display: flex; }
  .ddm a { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 9px; text-decoration: none; }
  .ddm a:hover { background: var(--sunk); }
  .ddm a b { font-family: var(--disp); font-size: 15px; font-weight: 700; color: var(--ink); }
  .ddm a span { font-size: 12.8px; color: var(--muted); }

  .burger { display: none; }
  nav.mob { display: none; flex-direction: column; padding-bottom: 18px; max-height: 74vh; overflow-y: auto; }
  nav.mob a { padding: 12px 2px; font-size: 16.2px; font-weight: 500; color: #FFFFFF; text-decoration: none; border-top: 1px solid rgba(249,244,234,.14); }
  nav.mob a.sub { padding-left: 16px; font-size: 15px; color: rgba(249,244,234,.74); }
  nav.mob .btn { margin-top: 14px; }
  @media (max-width: 1080px) {
    nav.desk, .topin > a.btn { display: none; }
    .burger { display: inline-flex; }
    nav.mob.open { display: flex; }
  }

  section { padding-block: clamp(56px, 8vw, 100px); position: relative; }
  .head { display: flex; flex-direction: column; gap: 15px; align-items: center; margin-bottom: clamp(32px, 4.4vw, 52px); }
  .head > * { max-width: 760px; }

  .grid { display: grid; gap: 18px; }
  .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

  .card {
    background: var(--surface); border-radius: var(--r-l); box-shadow: var(--sh-s);
    padding: 28px 26px; display: flex; flex-direction: column; gap: 13px; height: 100%;
    transition: transform .18s, box-shadow .18s;
  }
  .card.lift:hover { transform: translateY(-4px); box-shadow: var(--sh-m); }
  .card ul { margin: 3px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .card ul li { font-size: 15.2px; color: var(--muted); padding-left: 24px; position: relative; }
  .card ul li::before { content: ""; position: absolute; left: 0; top: .46em; width: 15px; height: 15px; border-radius: 50%; background: var(--tint-l); }
  .card ul li::after {
    content: ""; position: absolute; left: 4.5px; top: .72em; width: 6px; height: 3px;
    border-left: 1.8px solid var(--green); border-bottom: 1.8px solid var(--green); transform: rotate(-45deg);
  }
  .remate { font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--green); margin-top: auto; padding-top: 6px; }

  .ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--tint-g); color: var(--green); }
  .ico.l { background: var(--tint-l); color: var(--green-d); }
  .ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .step-n {
    font-family: var(--disp); font-size: 13px; font-weight: 700; letter-spacing: .06em;
    color: var(--green); background: var(--tint-g); border-radius: 8px; padding: 4px 10px;
    display: inline-block; width: fit-content;
  }

  .hero { padding-block: clamp(50px, 7vw, 92px) clamp(40px, 6vw, 76px); overflow: hidden; }
  .hero::before {
    content: ""; position: absolute; inset: -30% 0 auto 50%; transform: translateX(-50%);
    width: min(1200px, 150%); height: 760px; pointer-events: none; z-index: 0;
    background:
      radial-gradient(46% 52% at 28% 30%, color-mix(in srgb, var(--green) 18%, transparent) 0%, transparent 70%),
      radial-gradient(44% 48% at 74% 22%, color-mix(in srgb, var(--green-lt) 20%, transparent) 0%, transparent 70%);
  }
  .hero .wrap { position: relative; z-index: 1; }
  .heroin { display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .chip { font-size: 13.2px; font-weight: 600; color: var(--ink-2); background: var(--surface); box-shadow: var(--sh-s); border-radius: 999px; padding: 7px 15px; }

  .heroart { margin-top: 10px; width: 100%; max-width: 820px; border-radius: var(--r-l); overflow: hidden; background: var(--surface); box-shadow: var(--sh-m); }
  .heroart svg { display: block; width: 100%; height: auto; }

  .statbar { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 22px; width: 100%; }
  @media (max-width: 760px) { .statbar { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .statbox { background: var(--surface); box-shadow: var(--sh-s); border-radius: var(--r); padding: 16px 18px; display: flex; align-items: center; gap: 13px; text-align: left; }
  .statbox .ico { width: 38px; height: 38px; border-radius: 11px; }
  .statbox .ico svg { width: 18px; height: 18px; }
  .statbox b { font-family: var(--disp); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; display: block; }
  .statbox span { font-size: 12.8px; color: var(--muted); }

  .band { background: var(--forest); color: #EDF3EC; }
  .band h2, .band h3, .band h4 { color: #FFFFFF; }
  .band .lede, .band .small { color: rgba(249,244,234,.72); }
  .band .pill { background: rgba(255,255,255,.12); color: #A8DCAF; }
  .band .card { background: rgba(255,255,255,.055); box-shadow: none; border: 1px solid rgba(255,255,255,.1); }
  .band .card .small, .band .card ul li { color: rgba(249,244,234,.74); }
  .band .card ul li::before { background: rgba(255,255,255,.12); }
  .band .card ul li::after { border-color: #A8DCAF; }
  .band .remate { color: #A8DCAF; }
  .band .step-n { background: rgba(255,255,255,.12); color: #A8DCAF; }
  .band .ico { background: rgba(255,255,255,.12); color: #A8DCAF; }

  .proofcard { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--sh-m); padding: clamp(26px, 4vw, 44px); text-align: center; }
  .proofgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
  @media (max-width: 760px) { .proofgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stat { background: var(--sunk); border-radius: var(--r); padding: 18px 14px; }
  .stat b { font-family: var(--disp); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.05; display: block; }
  .stat span { font-size: 13.2px; color: var(--muted); }

  .flow { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
  @media (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 460px) { .flow { grid-template-columns: minmax(0,1fr); } }
  .fstep { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 18px 16px; display: flex; flex-direction: column; gap: 7px; }
  .fstep b { font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
  .fstep span { font-size: 13.4px; color: rgba(249,244,234,.72); line-height: 1.45; }

  /* ---- cotizador ---- */
  .quiz { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; gap: 28px; }
  .qstep { display: flex; flex-direction: column; gap: 13px; }
  .qnum { font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 11px; color: #fff; }
  .qnum span { font-size: 13px; color: #A8DCAF; }
  .qopts { display: flex; flex-wrap: wrap; gap: 10px; }
  .qopt {
    font-family: var(--sans); font-size: 15px; font-weight: 600; color: #EDF3EC;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px; padding: 11px 20px; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
  }
  .qopt:hover { border-color: #A8DCAF; transform: translateY(-1px); }
  .qopt.on { background: #FFFFFF; border-color: #FFFFFF; color: var(--forest); }
  .qend { margin-top: 4px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .qsum { font-family: var(--disp); font-size: clamp(18px, 2.6vw, 26px); font-weight: 700; letter-spacing: -.03em; line-height: 1.3; color: #fff; max-width: 42ch; }
  .qsum em { font-style: normal; color: #A8DCAF; }
  .qend .btn:disabled { opacity: .4; cursor: default; }
  .qend .btn:disabled:hover { transform: none; }

  .mkts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .mkt { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-s); padding: 18px 16px; text-align: center; }
  .mkt b { font-family: var(--disp); font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; display: block; }
  .mkt span { font-size: 12.2px; color: var(--faint); }
  .mkt.live { box-shadow: var(--sh-m); }
  .mkt.live span { color: var(--green); font-weight: 600; }

  .lines { display: flex; flex-direction: column; gap: 12px; max-width: 620px; margin-inline: auto; }
  .line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 15px 17px; }
  .line .who { display: flex; flex-direction: column; margin-right: auto; text-align: left; }
  .line .who b { font-family: var(--disp); font-size: 15.5px; font-weight: 700; color: #fff; }
  .line .who span { font-size: 12.2px; color: rgba(249,244,234,.55); }
  .line code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: #A8DCAF; background: rgba(255,255,255,.1); border-radius: 8px; padding: 5px 10px; user-select: all; font-variant-numeric: tabular-nums; }

  footer.bot { background: var(--forest); color: rgba(249,244,234,.72); padding-block: 46px 40px; }
  .botin { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; }
  .botin .col { display: flex; flex-direction: column; gap: 9px; }
  .botin a { font-size: 14.8px; color: rgba(249,244,234,.72); text-decoration: none; }
  .botin a:hover { color: #FFFFFF; }
  .botin .col b { font-family: var(--disp); font-size: 13px; color: #FFFFFF; font-weight: 700; margin-bottom: 2px; }
  .botend { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(249,244,234,.14); font-size: 13px; color: rgba(249,244,234,.5); }

  .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); background: var(--forest); color: #fff; font-size: 14.2px; font-weight: 600; padding: 11px 19px; border-radius: 999px; z-index: 70; box-shadow: var(--sh-m); }

  @media (prefers-reduced-motion: no-preference) {
    .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
    .rv.in { opacity: 1; transform: none; }
  }