/* A landing do lançamento (/), nos três idiomas: public/lp/index.html, en/index.html e es/index.html.
   Saiu do <style> da página em 22/10, quando a landing ganhou inglês e espanhol: um desenho só. */
@font-face { font-family: 'RNS Physis B'; src: url('/lp/fonts/RNSPhysis-Medium.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'RNS Physis B'; src: url('/lp/fonts/RNSPhysis-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'RNS Physis B'; src: url('/lp/fonts/RNSPhysis-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

  /* Do manual de identidade da Data Frontier (2022): Dark Grey, Snorkel, Peach Purée, Rawhide,
     fonte RNS Physis e o gradiente azul→marrom do símbolo. Nada de Sora/Inter aqui. */
  @font-face { font-family: 'RNS Physis'; src: url('/lp/fonts/RNSPhysis-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
  @font-face { font-family: 'RNS Physis'; src: url('/lp/fonts/RNSPhysis-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
  @font-face { font-family: 'RNS Physis'; src: url('/lp/fonts/RNSPhysis-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
  :root {
    --grey: #2B2B2B;
    --snorkel: #3347FF;
    --peach: #FFE3D6;
    --rawhide: #B2624F;
    --cream: #FFF7F2;          /* fundo do manual atrás dos símbolos */
    --tan: #D9A595;            /* marrom claro: rawhide diluído */
    --tan-2: #EBC9BD;
    --mauve: #7355A7;          /* o "quase roxo": meio do caminho entre snorkel e rawhide */
    --irid: linear-gradient(110deg, #3347FF 0%, #6A52D6 35%, #9C5E8E 62%, #B2624F 100%);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  img { max-width: 100%; height: auto; }
  html { scroll-behavior: smooth; }
  :root { --t-display: clamp(2.8rem, 5.6vw, 5.2rem); --t-h2: clamp(1.9rem, 3.6vw, 2.9rem); --t-lead: 1.125rem; --t-body: 1rem; --t-label: .75rem; }
  body { font-family: 'RNS Physis', system-ui, sans-serif; background: var(--cream); color: var(--grey); overflow-x: clip; -webkit-font-smoothing: antialiased; font-weight: 500; font-size: var(--t-body); line-height: 1.6; }
  h1, h2, h3 { font-weight: 900; text-wrap: balance; }
  ::selection { background: var(--snorkel); color: #fff; }
  a { color: inherit; }
  .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 5vw; }
  .irid { background: var(--irid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; transition: transform .25s, box-shadow .25s; }
  .btn-snorkel { background: var(--snorkel); color: #fff; box-shadow: 0 12px 30px rgba(51,71,255,.28); }
  .btn-snorkel:hover { transform: translateY(-2px) rotate(-1deg); }
  .btn-raw { background: var(--rawhide); color: #fff; }
  .sticker { display: inline-block; padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 6px 16px rgba(178,98,79,.16); }
  .sticker.peach { background: var(--peach); color: var(--rawhide); }
  .sticker.blue { background: var(--snorkel); color: #fff; transform: rotate(2deg); }
  .sticker.tan { background: var(--tan-2); color: var(--rawhide); }

  /* TOPO: barra fixa de 72px; o símbolo da Data Frontier vira o S do STL Prime */
  .top { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 72px; padding: 0 5vw; background: rgba(255,247,242,.72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
  .top.scrolled { background: rgba(255,247,242,.94); border-bottom-color: var(--tan-2); }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .brand svg { width: 42px; height: 42px; display: block; transition: transform .3s; }
  .brand:hover svg { transform: rotate(-6deg) scale(1.06); }
  .brand .w { font-weight: 900; font-size: 21px; letter-spacing: -.03em; line-height: 1; }
  .brand .w small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rawhide); margin-top: 4px; }
  .nav { display: flex; align-items: center; justify-content: center; gap: 24px; white-space: nowrap; }
  .nav a { position: relative; text-decoration: none; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; padding: 6px 0; color: #4a4340; transition: color .2s; }
  .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--rawhide); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .nav a:hover { color: var(--grey); }
  .nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
  .top .r { display: flex; align-items: center; gap: 12px; justify-self: end; }
  .top .r .pill { font-size: 13px; font-weight: 700; color: var(--grey); white-space: nowrap; }
  .top .r .pill::before { content: '●'; color: var(--snorkel); margin-right: 8px; animation: pulse 1.8s infinite; }
  .top .r .wa { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; color: #4a4340; padding: 6px 0; position: relative; }
  .top .r .wa svg { width: 17px; height: 17px; color: #25D366; }
  .top .r .wa::after { content: ''; position: absolute; left: 24px; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #25D366; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .top .r .wa:hover::after { transform: scaleX(1); }
  .menu { display: none; width: 38px; height: 38px; border: 1px solid var(--tan-2); border-radius: 50%; background: #fff; align-items: center; justify-content: center; cursor: pointer; }
  .menu span { width: 16px; height: 2px; background: var(--grey); position: relative; border-radius: 2px; }
  .menu span::before, .menu span::after { content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: var(--grey); border-radius: 2px; }
  .menu span::before { top: -5px; } .menu span::after { top: 5px; }
  @keyframes pulse { 50% { opacity: .35; } }
  @media (max-width: 1360px) { .top .r .pill { display: none; } .nav { gap: 18px; } }
  @media (max-width: 1040px) {
    .top { grid-template-columns: auto auto; }
    .nav { display: none; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 5vw 18px; background: var(--cream); border-bottom: 1px solid var(--tan-2); }
    .nav.open { display: flex; }
    .nav a { font-size: 17px; padding: 10px 0; }
    .menu { display: inline-flex; }
    .top .r .pill { display: none; }
  }
  @media (max-width: 700px) { .top .r .wa span, .top .r .wa { font-size: 0; gap: 0; } .top .r .wa svg { width: 22px; height: 22px; } .top .r .wa::after { display: none; } }
  @media (max-width: 560px) { .brand .w small { display: none; } .top .r .btn { padding: 10px 14px; } }
  /* HERO */
  .hero { position: relative; overflow: hidden; background: radial-gradient(900px 600px at 85% 10%, #F6D3C6 0%, transparent 60%), radial-gradient(700px 500px at 10% 90%, #E9E0FF 0%, transparent 60%), var(--cream); }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; padding-top: 28px; padding-bottom: 48px; }
  .hero h1 { margin-top: 16px; font-size: var(--t-display); line-height: .98; letter-spacing: -.035em; }
  .hero h1 em { font-style: normal; }
  .hero h1 .num { font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.05em; }
  .hero p.sub { margin-top: 24px; max-width: 34em; font-size: var(--t-lead); line-height: 1.6; font-weight: 500; color: #4a4340; }
  .hero p.sub b { font-weight: 700; color: var(--grey); }
  form.signup { margin-top: 30px; display: flex; gap: 10px; max-width: 540px; padding: 8px; background: #fff; border-radius: 999px; box-shadow: 0 20px 50px rgba(178,98,79,.14); }
  form.signup input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; padding: 0 20px; font: 500 16px 'RNS Physis'; outline: 0; color: var(--grey); }
  form.signup input::placeholder { color: #B8A9A2; }
  .cta-stack { margin-top: 28px; display: grid; gap: 12px; max-width: 560px; }
  .cta { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 14px; min-height: 72px; padding: 12px 18px 12px 12px; border-radius: 20px; text-decoration: none; color: #fff; border: 0; cursor: pointer; font-family: inherit; text-align: left; transition: transform .2s, box-shadow .2s; }
  .cta:hover { transform: translateY(-2px); }
  .cta .ic { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); }
  .cta .ic svg { width: 28px; height: 28px; }
  .cta b { display: block; font-size: 19px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
  .cta span { display: block; font-size: 13.5px; font-weight: 700; opacity: .92; margin-top: 3px; }
  .cta .arrow { font-size: 22px; font-weight: 900; opacity: .8; }
  .cta.blue { background: var(--snorkel); box-shadow: 0 14px 34px rgba(51,71,255,.28); }
  .cta.green { background: #25D366; color: #073b1e; box-shadow: 0 14px 34px rgba(37,211,102,.28); }
  .cta.green .ic { background: rgba(255,255,255,.35); }
  .cta.peach { background: #fff; color: var(--grey); border: 2px solid var(--tan-2); box-shadow: 0 10px 26px rgba(178,98,79,.10); }
  .cta.peach .ic { background: var(--peach); color: var(--rawhide); }
  .cta.peach span { color: #7a6a63; opacity: 1; }
  .pre { display: none; }
  .pre.open { display: block; }
  .pre form.signup { margin-top: 0; }
  .pre p { font-size: 13px; color: #7a6a63; margin: 8px 0 0 12px; }
  /* faixa de benefícios logo abaixo do hero */
  .benef { background: #fff; border-top: 1px solid var(--tan-2); border-bottom: 1px solid var(--tan-2); }
  .benef .wrap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .benef .b { padding: 30px 26px 30px 0; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; align-items: start; }
  .benef .b + .b { border-left: 1px solid var(--tan-2); padding-left: 26px; }
  .benef .n { width: 52px; height: 52px; border-radius: 16px; background: var(--peach); color: var(--rawhide); font-weight: 900; font-size: 19px; display: flex; align-items: center; justify-content: center; letter-spacing: -.03em; }
  .benef h3 { font-size: 1.1rem; letter-spacing: -.02em; }
  .benef p { margin-top: 4px; font-size: 14.5px; color: #4a4340; line-height: 1.5; }
  @media (max-width: 900px) { .benef .wrap { grid-template-columns: 1fr; } .benef .b { padding: 22px 0; } .benef .b + .b { border-left: 0; border-top: 1px solid var(--tan-2); padding-left: 0; } }
  .hero-alt { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .count { margin-top: 22px; display: inline-flex; gap: 6px; align-items: baseline; font-weight: 700; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--rawhide); }
  .count b { font-size: 34px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--grey); text-transform: none; }
  .count span { margin-right: 10px; }
  .stage { position: relative; aspect-ratio: 1 / 1; }
  .stage .blob { position: absolute; inset: 6%; border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%; background: linear-gradient(135deg, #FFD9C8, #E9DDFF 55%, #F3C9BC); animation: morph 12s ease-in-out infinite alternate; }
  @keyframes morph { to { border-radius: 54% 46% 40% 60% / 44% 58% 42% 56%; transform: rotate(8deg); } }
  .stage canvas { position: relative; display: block; width: 100%; height: 100%; }
  .stage.static .legend, .stage.static .hud, .stage.static .layer, .stage.static .hint, .stage.static canvas { display: none; }
  .stage .poster { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; border-radius: 30px; }
  .stage .hand { position: absolute; right: -16%; top: -22%; width: 44%; transform: rotate(-6deg); pointer-events: none; filter: drop-shadow(0 30px 40px rgba(51,71,255,.25)); animation: hover 5s ease-in-out infinite alternate; }
  @keyframes hover { to { transform: rotate(-4deg) translateY(12px); } }
  .stage .hud { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(178,98,79,.15); font-size: 12px; font-weight: 500; color: #7a6a63; }
  .stage .hud b { font-size: 13px; font-weight: 700; color: var(--grey); }
  .stage .layer { position: absolute; right: 14px; bottom: 14px; padding: 8px 12px; border-radius: 12px; background: var(--snorkel); color: #fff; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; }
  .stage .layer.on { opacity: 1; }
  .stage .sold { position: absolute; left: 30%; top: 11%; max-width: 230px; padding: 12px 16px 12px; border-radius: 18px; background: #fff; border: 2px solid var(--rawhide); box-shadow: 0 18px 40px rgba(178,98,79,.22); transform: rotate(-4deg) scale(.6); opacity: 0; transition: transform .45s cubic-bezier(.2,1.6,.4,1), opacity .3s; pointer-events: none; }
  .stage .sold.on { opacity: 1; transform: rotate(-4deg) scale(1); }
  .stage .sold b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--rawhide); line-height: 1; }
  .stage .sold span { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--grey); line-height: 1.3; }
  .stage .sold small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: #9a8a83; }
  .stage.static .sold { display: none; }
  .stage .legend { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; }
  .stage .legend span { font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.7); color: #9a8a83; transition: all .3s; }
  .stage .legend span.on { background: var(--rawhide); color: #fff; }
  .stage .hint { display: none; }
  @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; padding-top: 12px; gap: 10px; } .stage { order: -1; aspect-ratio: 1 / .72; } .stage .poster { inset: 6% 14%; width: 72%; height: 88%; } .hero h1 { letter-spacing: -.025em; } }

  /* FAIXA */
  .ticker { overflow: hidden; background: var(--rawhide); color: var(--peach); padding: 14px 0; font-weight: 700; font-size: 15px; white-space: nowrap; }
  .ticker div { display: inline-block; animation: slide 28s linear infinite; }
  .ticker span { margin: 0 26px; }
  @keyframes slide { to { transform: translateX(-50%); } }

  /* seções */
  section { padding: 90px 0; }
  .h2 { font-size: var(--t-h2); letter-spacing: -.03em; line-height: 1.05; max-width: 18ch; }
  .lead { margin-top: 16px; max-width: 34em; font-weight: 500; font-size: var(--t-lead); line-height: 1.6; color: #4a4340; }

  /* CRONOGRAMA: adesivos numa linha pontilhada */
  .board { margin-top: 56px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; align-items: end; }
  .board::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 3px dashed var(--tan-2); z-index: 0; }
  .tag { position: relative; z-index: 1; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14%; background: #fff; border: 3px dashed var(--tan-2); color: #9a8a83; transform: rotate(var(--r, -3deg)); transition: transform .3s; cursor: pointer; }
  .tag:hover { transform: rotate(0) scale(1.04); }
  .tag b { font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 900; letter-spacing: -1.5px; line-height: 1; }
  .tag span { margin-top: 6px; font-size: clamp(.8rem, 1.1vw, .95rem); font-weight: 700; line-height: 1.15; }
  .tag small { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
  .tag.done { background: var(--rawhide); border: 0; color: #fff; }
  .tag.done small { color: var(--peach); }
  .tag.done::after { content: 'feito ✓'; position: absolute; right: -6px; top: 8%; transform: rotate(12deg); background: var(--peach); color: var(--rawhide); font-size: 12px; font-weight: 900; padding: 5px 10px; border-radius: 999px; }
  .tag.now { background: var(--snorkel); border: 0; color: #fff; transform: rotate(0) scale(1.12); box-shadow: 0 24px 50px rgba(51,71,255,.3); }
  .tag.now small { color: #C9D0FF; }
  .tag.now::after { content: 'hoje'; position: absolute; left: 50%; top: -18px; transform: translateX(-50%); background: var(--peach); color: var(--rawhide); font-size: 12px; font-weight: 900; padding: 5px 12px; border-radius: 999px; }
  .note { margin-top: 44px; background: var(--peach); border-radius: 28px; padding: 32px; display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 30px; transform: rotate(-.6deg); }
  .note h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900; letter-spacing: -1px; line-height: 1.05; }
  .note .k { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rawhide); }
  .note p { margin-top: 12px; font-weight: 500; line-height: 1.6; color: #5a4a44; }
  .note ul { list-style: none; display: grid; gap: 8px; align-self: center; }
  .note li { background: #fff; border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 14px; display: flex; gap: 10px; align-items: center; color: #9a8a83; }
  .note li i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--tan-2); flex-shrink: 0; font-style: normal; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
  .note li.ok { color: var(--grey); } .note li.ok i { background: var(--snorkel); border-color: var(--snorkel); color: #fff; } .note li.ok i::before { content: '✓'; }
  .note li.wip { color: var(--grey); } .note li.wip i { border-color: var(--snorkel); border-top-color: transparent; animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (max-width: 900px) { .board { grid-template-columns: 1fr 1fr; } .board::before { display: none; } .note { grid-template-columns: 1fr; } }

  /* FOLHA DE ADESIVOS: os 10 modelos */
  .sheet-sec { background: #fff; }
  .sheet-note { margin-top: 22px; font-size: 14px; color: #7a6a63; max-width: 60em; } .sheet-note a { color: var(--snorkel); font-weight: 700; }
  .sheet { margin-top: 50px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 18px; }
  .st { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: var(--peach); transform: rotate(var(--r, 0)); transition: transform .3s; box-shadow: 0 10px 24px rgba(178,98,79,.12); }
  .st:hover { transform: rotate(0) scale(1.04); z-index: 2; }
  .st img { width: 100%; height: 100%; object-fit: cover; }
  .st .cap { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
  .st .cap small { display: block; font-weight: 500; color: #9a8a83; font-size: 11px; }
  .st .cap .dl { width: 30px; height: 30px; border-radius: 50%; background: var(--snorkel); color: #fff; display: flex; align-items: center; justify-content: center; }
  .st .cap .dl.soon { width: auto; height: auto; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .02em; background: var(--peach); color: var(--rawhide); white-space: nowrap; }
  .st.locked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--tan-2); color: var(--rawhide); }
  .st.locked:nth-child(odd) { background: var(--peach); }
  .st.locked .q { font-size: 64px; font-weight: 900; line-height: 1; opacity: .5; }

  .st.locked span { font-size: 11px; font-weight: 700; background: #fff; padding: 4px 10px; border-radius: 999px; }
  .st.locked { position: relative; }
  .st.locked img { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: grayscale(.4) blur(16px); opacity: .5; }
  .st.locked b, .st.locked small, .st.locked span { position: relative; z-index: 1; text-align: center; }
  .st.locked b { font-size: clamp(34px, 4vw, 52px); line-height: 1; font-weight: 900; letter-spacing: .08em; padding: 0 10px; color: var(--rawhide); }
  .st.locked small { font-size: 11px; font-weight: 500; color: #5a4a44; }
  @media (max-width: 900px) { .sheet { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  @media (max-width: 560px) { .sheet { grid-template-columns: 1fr 1fr; } }

  /* PROVA */
  .proof { background: var(--rawhide); color: #fff; position: relative; overflow: hidden; }
  .proof .wrap { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 40px; align-items: center; }
  .proof .h2 { color: #fff; }
  .proof .lead { color: var(--peach); }
  .nums { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
  .nums b { display: block; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -2px; line-height: 1; }
  .nums span { font-size: 13px; font-weight: 500; color: var(--peach); }
  .proof .hand2 { width: 100%; transform: rotate(10deg) scale(1.15); filter: drop-shadow(0 30px 40px rgba(0,0,0,.25)); }
  @media (max-width: 900px) { .proof .wrap { grid-template-columns: 1fr; } .proof .hand2 { max-width: 320px; margin: 0 auto; } }

  /* CALCULADORA */
  .calc { border-radius: 30px; padding: 3px; background: var(--irid); }
  .calc .in { background: var(--cream); border-radius: 27px; padding: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .ex { background: #fff; border-radius: 22px; padding: 26px; }
  .ex dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--peach); font-size: 15px; font-weight: 500; }
  .ex dd { font-weight: 900; } .ex dd.bad { color: var(--rawhide); }
  @media (max-width: 900px) { .calc .in { grid-template-columns: 1fr; padding: 26px; } }

  /* LOJA: assinante tem desconto na Data Frontier 3D */
  .store-sec { background: var(--peach); }
  .store-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: end; }
  .off { font-size: clamp(4rem, 9vw, 7rem); font-weight: 900; letter-spacing: -.05em; line-height: .9; color: var(--snorkel); }
  .off small { display: block; font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rawhide); margin-bottom: 8px; }
  /* carrossel: rolagem horizontal com encaixe, 3 cartões no desktop, 1,2 no celular */
  .products { margin-top: 44px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 5vw; padding-bottom: 8px; scrollbar-width: none; }
  .products::-webkit-scrollbar { display: none; }
  .product { scroll-snap-align: start; }
  .car-nav { margin-top: 14px; display: flex; gap: 8px; }
  .car-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rawhide); background: #fff; color: var(--rawhide); font-size: 18px; cursor: pointer; font-family: inherit; }
  .car-nav button:hover { background: var(--rawhide); color: #fff; }
  @media (max-width: 900px) { .products { grid-auto-columns: 82%; } }
  .product { background: #fff; border-radius: 26px; padding: 18px; display: grid; gap: 12px; text-decoration: none; color: var(--grey); transition: transform .3s; }
  .product:hover { transform: translateY(-4px); }
  .product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: var(--cream); }
  .product h3 { font-size: 1.15rem; letter-spacing: -.02em; }
  .product p { font-size: 14.5px; color: #4a4340; line-height: 1.5; }
  .product .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .product .disc { font-weight: 700; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--snorkel); background: #ECEFFF; padding: 5px 10px; border-radius: 999px; }
  .product .go { font-weight: 700; color: var(--rawhide); }
  .store-foot { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: #7a6a63; font-size: 14px; }
  @media (max-width: 900px) { .store-head { grid-template-columns: 1fr; } }

  /* AVISOS E NOTAS: o mural onde a gente fala com a comunidade */
  .notes-sec { background: #fff; border-top: 1px solid var(--tan-2); }
  .notes { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 760px; }
  .note-item { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 20px; padding: 24px 26px; border-radius: 22px; background: var(--cream); border: 1px solid var(--tan-2); }
  .note-item.new { background: var(--peach); border-color: transparent; }
  .note-item time { font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rawhide); padding-top: 4px; line-height: 1.5; }
  .note-item time b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: var(--grey); text-transform: none; letter-spacing: 0; }
  .note-item h3 { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
  .note-item p { margin-top: 8px; color: #4a4340; line-height: 1.6; }
  .note-item .ntag { display: inline-block; margin-bottom: 8px; font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--snorkel); padding: 4px 9px; border-radius: 999px; }
  .note-item a { color: var(--snorkel); font-weight: 700; }
  .notes-follow { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #7a6a63; font-size: 14px; }
  @media (max-width: 560px) { .note-item { grid-template-columns: 1fr; gap: 8px; padding: 20px; } }

  /* FECHO */
  .close { background: var(--peach); text-align: center; position: relative; overflow: hidden; }
  .close img { width: min(520px, 80vw); margin: -40px auto 0; display: block; animation: hover 6s ease-in-out infinite alternate; }
  .close .h2 { margin: 10px auto 0; max-width: 18ch; }
  .close form.signup { margin: 30px auto 0; }
  .close .legal { margin-top: 30px; font-size: 13px; color: var(--rawhide); font-weight: 500; }
  footer { padding: 24px 5vw; font-size: 13px; color: #9a8a83; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

  .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s ease-out, transform .7s ease-out; }
  .rv.in { opacity: 1; transform: none; }
  /* WhatsApp flutuante: grande, na lateral direita, com o texto abrindo no hover; some quando o formulário está na tela */
  .wa-float { position: fixed; right: 22px; bottom: 26px; z-index: 60; display: flex; align-items: center; gap: 0; height: 64px; padding: 0 0 0 0; border-radius: 999px; background: #25D366; color: #fff; text-decoration: none; box-shadow: 0 16px 40px rgba(37,211,102,.45); transition: transform .25s, box-shadow .25s, opacity .3s; }
  .wa-float:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(37,211,102,.55); }
  .wa-float .ic { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
  .wa-float .ic svg { width: 34px; height: 34px; }
  .wa-float .tx { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 15px; transition: max-width .35s, padding .35s; }
  .wa-float:hover .tx, .wa-float.show .tx { max-width: 260px; padding-right: 22px; }
  .wa-float::before { content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(37,211,102,.55); animation: waping 2.4s ease-out infinite; pointer-events: none; }
  @keyframes waping { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
  .wa-float.hide { opacity: 0; pointer-events: none; }
  @media (max-width: 700px) { .wa-float { right: 14px; bottom: 16px; height: 58px; } .wa-float .ic { width: 58px; height: 58px; } .sim { bottom: 84px; } }
  .sim { position: fixed; right: 14px; bottom: 100px; z-index: 200; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 12px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.12); display: flex; gap: 8px; align-items: center; }
  .sim select { font: inherit; border: 1px solid var(--tan-2); border-radius: 8px; padding: 4px 6px; }
  /* calculadora interativa do lançamento */
  .cfill { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: #7a6a63; }
  .cfill button { font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--tan-2); background: #fff; color: var(--rawhide); cursor: pointer; }
  .cfill button:hover, .cfill button.on { border-color: var(--rawhide); background: var(--peach); }
  .cform { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .cform label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a6a63; }
  .cform label span { display: flex; align-items: center; background: #fff; border: 1.5px solid var(--tan-2); border-radius: 14px; padding: 0 12px; }
  .cform label.hl span { border-color: var(--snorkel); }
  .cform input, .cform select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 700; color: var(--grey); padding: 11px 0; text-transform: none; letter-spacing: 0; }
  .cform i { font-style: normal; font-size: 13px; font-weight: 700; color: #9a8a83; text-transform: none; letter-spacing: 0; }
  .calc .in > * { min-width: 0; } .cform label, .cform label span { min-width: 0; } .brand .w small { white-space: nowrap; }
  .cnote { margin-top: 12px; font-size: 12.5px; color: #7a6a63; line-height: 1.5; }
  .ex dd.good { color: #157a5a; }
  .ex dl div small { display: block; font-size: 11.5px; font-weight: 500; color: #9a8a83; }
  .cmin { margin-top: 14px; font-size: 13.5px; color: #5a4a44; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  form.signup.done { display: block; padding: 16px 22px; border-radius: 22px; font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--grey); }
  form.signup.done b { display: block; font-size: 17px; font-weight: 900; color: #157a5a; }
  form.signup .err { flex-basis: 100%; }
  .signup-err { margin: 8px 0 0 12px; font-size: 13.5px; font-weight: 700; color: #b3261e; }
  .hero-calc { margin-top: 14px; font-size: 14.5px; color: #5a4a44; } .hero-calc a { color: var(--snorkel); font-weight: 700; }
  @media (max-width: 899px) { .cform { grid-template-columns: 1fr 1fr; } .calc .in:not(.all) .ex { display: block; } .calc .in .more.acc { display: none; } }

  /* atalhos: links grandes, fáceis de tocar e de achar */
  .atalhos { background: var(--cream); padding: 22px 0 6px; }
  .atalhos .wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .atalhos a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 68px; padding: 12px 14px; border-radius: 18px; background: #fff; border: 1.5px solid var(--tan-2); text-decoration: none; color: var(--grey); transition: transform .2s, border-color .2s, box-shadow .2s; }
  .atalhos a:hover, .atalhos a:focus-visible { transform: translateY(-2px); border-color: var(--snorkel); box-shadow: 0 12px 26px rgba(51,71,255,.14); outline: none; }
  .atalhos i { width: 44px; height: 44px; border-radius: 13px; background: var(--peach); color: var(--rawhide); font-style: normal; font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }
  .atalhos b { display: block; font-size: 15px; font-weight: 900; letter-spacing: -.01em; line-height: 1.15; }
  .atalhos small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #7a6a63; line-height: 1.25; }
  .atalhos em { font-style: normal; font-weight: 900; color: var(--snorkel); }
  @media (max-width: 1100px) { .atalhos .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .atalhos .wrap { grid-template-columns: 1fr; gap: 8px; } .atalhos a { min-height: 60px; } }
  footer.foot { display: block; padding: 40px 5vw 46px; border-top: 1px solid var(--tan-2); background: #fff; font-size: 14.5px; color: #5a4a44; }
  footer.foot .cols { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 28px; }
  footer.foot b { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--rawhide); }
  footer.foot p { line-height: 1.6; }
  footer.foot a { display: block; padding: 7px 0; color: var(--grey); font-weight: 700; text-decoration: underline; text-decoration-color: var(--tan-2); text-underline-offset: 4px; }
  footer.foot a:hover { color: var(--snorkel); text-decoration-color: var(--snorkel); }
  @media (max-width: 860px) { footer.foot .cols { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { footer.foot .cols { grid-template-columns: 1fr; } footer.foot a { padding: 10px 0; } }
  .lead a, .note-item a, .sheet-note a, .store-foot a, .cnote a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

  /* ===== celular: primeira tela enxuta, vídeo no lugar do 3D, barra fixa e seções curtas ===== */
  .hvid { display: none; }
  /* O vídeo também no desktop: o 3D ao vivo servia a malha da capivara em público. */
  .stage.video .legend, .stage.video .hud, .stage.video .layer, .stage.video .hint, .stage.video .sold, .stage.video .poster { display: none; }
  .stage.video .hvid { display: block; position: absolute; inset: 7% 5%; width: 90%; height: 86%; object-fit: cover; border-radius: 30px; background: var(--peach); box-shadow: 0 18px 40px rgba(178,98,79,.18); }
  /* "Entrar" é a porta de quem já tem conta: botão de contorno, ao lado do principal (azul), e não um texto
     solto que se perdia entre o WhatsApp e o "Quero os 10" (pedido do Pedro, 22/09). */
  #roteiro { padding: 26px 5vw 6px; }
  #roteiro .wrap { max-width: 1120px; margin: 0 auto; }
  .roteiro-cards { margin-top: 22px; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roteiro-cards div { background: var(--cream); border: 1.5px dashed var(--tan-2); border-radius: 22px; padding: 18px 20px; }
  .roteiro-cards b { display: block; font-size: 1.08rem; letter-spacing: -.01em; }
  .roteiro-cards span { display: block; margin-top: 6px; color: var(--ink); font-size: 15px; line-height: 1.5; }
  @media (max-width: 860px) { .roteiro-cards { grid-template-columns: 1fr; } }
  .top .r .entrar { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--rawhide); background: #fff; color: var(--rawhide); font-weight: 700; font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, transform .2s; }
  .top .r .entrar svg { width: 16px; height: 16px; flex: none; }
  .top .r .entrar:hover { background: var(--rawhide); color: #fff; transform: translateY(-1px); }
  @media (max-width: 860px) { .top .r .entrar { min-height: 36px; padding: 0 12px; font-size: 13.5px; } }
  /* Em tela estreita o "Entrar" empurrava a marca para duas linhas: ele vai para o menu. */
  .nav a.so-estreito { display: none; }
  @media (max-width: 440px) { .top .r .entrar { display: none; } .nav a.so-estreito { display: block; } }
  .more { display: none; }
  .mbar { display: none; }
  @media (max-width: 899px) {
    .top { height: 60px; gap: 12px; }
    .top .r { gap: 8px; }
    .top .r .btn { white-space: nowrap; padding: 9px 13px; font-size: 14px; }
    .top .r .wa { display: none; }
    .cta.peach { grid-template-columns: minmax(0,1fr) auto; }
    .cta.peach .ic { display: none; }
    .cta.peach b { white-space: nowrap; }
    .hero .wrap { padding-top: 10px; padding-bottom: 28px; gap: 6px; }
    .hero h1 { margin-top: 10px; font-size: clamp(2.15rem, 10.2vw, 2.7rem); }
    .stage { aspect-ratio: 540 / 388; overflow: visible; }
    .stage .blob { inset: 2% -4%; }
    .stage .hand { display: none; }
    .stage .poster { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
    .stage.video .poster { display: none; }
    .stage.video .hvid { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: var(--peach); box-shadow: 0 18px 40px rgba(178,98,79,.18); }
    .hero .sticker.peach { margin-top: 12px; }
    .count { margin-top: 12px; }
    .count b { font-size: 30px; }
    .cta-stack { margin-top: 18px; gap: 10px; }
    .cta { min-height: 62px; padding: 10px 14px 10px 10px; border-radius: 16px; grid-template-columns: 46px minmax(0,1fr) auto; gap: 12px; }
    .cta .ic { width: 46px; height: 46px; border-radius: 13px; }
    .cta .ic svg { width: 24px; height: 24px; }
    .cta b { font-size: 17px; }
    .cta span { font-size: 12.5px; }
    .cta.peach { min-height: 52px; }
    .cta.peach span { display: none; }
    .ticker { padding: 10px 0; font-size: 13.5px; }
    .benef .b { padding: 14px 0; grid-template-columns: 44px minmax(0,1fr); gap: 12px; }
    .benef .n { width: 44px; height: 44px; font-size: 16px; border-radius: 13px; }
    .benef h3 { font-size: 1rem; }
    .benef p { font-size: 13.5px; margin-top: 2px; }
    section { padding: 52px 0; }
    .h2 { max-width: none; }
    .lead { font-size: 1.05rem; margin-top: 12px; }
    /* cronograma: adesivos numa fila com rolagem lateral */
    .board { margin-top: 28px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 5vw 14px; margin-left: -5vw; margin-right: -5vw; scrollbar-width: none; align-items: center; }
    .board::-webkit-scrollbar { display: none; }
    .board .tag { flex: 0 0 150px; width: 150px; scroll-snap-align: center; padding: 12%; }
    .tag.now { transform: rotate(0) scale(1.06); }
    .tag b { font-size: 1.5rem; }
    .note { margin-top: 20px; padding: 22px; grid-template-columns: 1fr; gap: 16px; border-radius: 22px; }
    .note h3 { font-size: 1.4rem; }
    /* folha de adesivos: 6 no celular, o resto atrás do botão */
    .sheet { margin-top: 26px; gap: 12px; }
    .sheet:not(.all) .st:nth-child(n+7) { display: none; }
    .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--rawhide); background: #fff; color: var(--rawhide); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
    /* farm: sem a mão, números em linha */
    .proof .wrap { grid-template-columns: 1fr; }
    .proof .hand2 { display: none; }
    .nums { margin-top: 22px; gap: 10px; }
    .nums b { font-size: 1.7rem; letter-spacing: -1px; }
    .nums span { font-size: 12px; }
    /* calculadora: a conta de exemplo fica fechada */
    .calc .in { padding: 24px 20px; gap: 18px; }
    .calc .in:not(.all) .ex { display: none; }
    .calc .in .more { margin-top: 4px; }
    /* loja */
    .store-head { gap: 12px; }
    .off { font-size: 3.4rem; }
    .products { margin-top: 24px; grid-auto-columns: 78%; }
    .car-nav { display: none; }
    /* avisos: dois no celular */
    .notes:not(.all) .note-item:nth-child(n+3) { display: none; }
    .note-item { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
    .note-item time { display: flex; gap: 6px; align-items: baseline; }
    .note-item time b { font-size: 18px; }
    /* fechamento */
    .close img { width: min(240px, 55vw); margin-top: -20px; }
    /* barra fixa de ação: substitui o botão flutuante e o seletor de prévia */
    .wa-float, .sim { display: none !important; }
    body { padding-bottom: 76px; }
    .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,247,242,.9); backdrop-filter: blur(12px); border-top: 1px solid var(--tan-2); transform: translateY(110%); transition: transform .3s; }
    .mbar.on { transform: none; }
    .mb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; font: inherit; font-weight: 800; font-size: 15.5px; text-decoration: none; border: 0; cursor: pointer; }
    .mb svg { width: 22px; height: 22px; }
    .mb.green { background: #25D366; color: #073b1e; }
    .mb.blue { background: var(--snorkel); color: #fff; }
  }
  @media (prefers-reduced-motion: reduce) { .stage.video .hvid { display: none; } .stage.video .poster { display: block; } }
  .pt { font-family: 'RNS Physis B', Arial, sans-serif; }

/* ===== troca de idioma (PT · EN · ES): no topo e no rodapé. O idioma atual não é link. ===== */
.idiomas { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #9a8a83; white-space: nowrap; }
.idiomas a, .idiomas .on { display: inline-flex; align-items: center; min-height: 40px; padding: 0 5px; border-radius: 8px; color: #7a6a63; text-decoration: none; }
.idiomas a:hover { color: var(--snorkel); }
.idiomas a:focus-visible { outline: 2px solid var(--snorkel); outline-offset: 2px; }
.idiomas .on { color: var(--grey); text-decoration: underline; text-decoration-color: var(--rawhide); text-decoration-thickness: 2px; text-underline-offset: 5px; }
footer.foot .idiomas-pe { max-width: 1240px; margin: 26px auto 0; display: flex; letter-spacing: 0; font-size: 14px; }
footer.foot .idiomas a { display: inline-flex; padding: 0 5px; text-decoration: none; }
@media (max-width: 899px) { .top .r .idiomas a, .top .r .idiomas .on { padding: 0 3px; min-height: 36px; } }
@media (max-width: 440px) { .top .r .idiomas { font-size: 12px; } }

/* ===== o que muda nos idiomas de fora ===== */
html[lang="en"] .tag.done::after { content: 'done ✓'; }
html[lang="en"] .tag.now::after { content: 'today'; }
html[lang="es"] .tag.done::after { content: 'listo ✓'; }
html[lang="es"] .tag.now::after { content: 'hoy'; }
@media (max-width: 899px) { .mb.ghost { background: #fff; color: var(--rawhide); border: 1.5px solid var(--rawhide); } }

/* PLANOS (site internacional): no lugar da loja, que só vende e entrega no Brasil */
.plans-sec { background: var(--peach); }
.plans-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: end; justify-content: space-between; }
.moeda { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1.5px solid var(--tan-2); }
.moeda button { font: inherit; font-weight: 700; font-size: 14px; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: #7a6a63; cursor: pointer; }
.moeda button[aria-pressed="true"] { background: var(--snorkel); color: #fff; }
.moeda button:focus-visible { outline: 2px solid var(--snorkel); outline-offset: 2px; }
.plans { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan { background: #fff; border-radius: 26px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.plan.pop { border: 3px solid var(--snorkel); }
.plan h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.plan .chamada { font-size: 14.5px; color: #7a6a63; }
.plan .preco { font-size: 2.6rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .preco small { font-size: 15px; font-weight: 700; letter-spacing: 0; color: #7a6a63; }
.plan .anual { font-size: 13.5px; color: #5a4a44; }
.plan ul { list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: #4a4340; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--snorkel); font-weight: 900; }
.plans-note { margin-top: 18px; font-size: 13.5px; color: #5a4a44; max-width: 60em; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
/* com a troca de idioma no topo, o celular estreito precisa de aperto: marca menor e, abaixo de 380 px,
   o botão do topo sai (o hero logo abaixo tem o mesmo convite, e a barra fixa aparece ao rolar) */
@media (max-width: 440px) {
  .brand { gap: 8px; } .brand svg { width: 34px; height: 34px; }
  .top .r .idiomas a, .top .r .idiomas .on { padding: 0 2px; }
  .top .r .btn { padding: 9px 11px; font-size: 13.5px; }
}
@media (max-width: 380px) { .top .r .btn { display: none; } }