/* ==========================================================================
   liggia — landing page
   Estilos derivados do liggia design system (tokens + composição da landing).
   Um único arquivo, sem dependências externas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Webfonts (self-hosted, subset latin) — Inter (UI/corpo) + Fira Code (dados)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/firacode-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens — liggia design system (tema claro)
   -------------------------------------------------------------------------- */
:root {
  /* Tipografia */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  /* Superfícies e texto */
  --background: hsl(0 0% 100%);
  --foreground: hsl(210 25% 7.84%);
  --card: hsl(180 6.67% 97.06%);

  /* Linhas */
  --border: hsl(201.43 30.43% 90.98%);
  --ring: hsl(202.82 89.12% 53.14%);

  /* Marca / ações */
  --primary: hsl(203.89 88.28% 53.14%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(210 25% 7.84%);
  --secondary-foreground: hsl(0 0% 100%);
  --muted: hsl(240 1.96% 90%);
  --muted-foreground: hsl(210 10% 55%);
  --destructive: hsl(356.3 90.56% 54.31%);

  /* Data-viz */
  --chart-1: hsl(203.89 88.28% 53.14%);
  --chart-2: hsl(159.78 100% 36.08%);
  --chart-3: hsl(42.03 92.83% 56.27%);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--primary); text-decoration: none }
a:hover { color: var(--primary) }
h1, h2, h3, h4, p { margin: 0 }
img { max-width: 100%; height: auto }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px }

/* Ícones (sprite SVG inline) */
.i {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-15 { width: 15px; height: 15px }
.i-14 { width: 14px; height: 14px }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--primary-foreground);
  padding: 12px 18px; border-radius: 0 0 6px 0; font-weight: 600;
}
.skip:focus { left: 0 }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600;
  padding: 0 20px; height: 44px;
  border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; transition: filter .18s ease;
  white-space: nowrap; font-family: inherit;
}
.btn:hover { filter: brightness(.94) }
.btn-primary { background: var(--primary); color: var(--primary-foreground) }
.btn-dark { background: var(--secondary); color: var(--secondary-foreground) }
.btn-outline { background: transparent; color: var(--foreground); border-color: var(--border) }
.btn-outline:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); filter: none }
.btn-lg { height: 52px; font-size: 16px; padding: 0 28px }
.btn-sm { height: 38px; font-size: 14px; padding: 0 16px }
.btn-block { width: 100% }

/* --------------------------------------------------------------------------
   Pills (soft-tint) e eyebrow
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 6px; border: 1px solid; line-height: 1.4;
}
.pill-blue {
  background: color-mix(in srgb, var(--chart-1) 10%, transparent);
  color: var(--chart-1);
  border-color: color-mix(in srgb, var(--chart-1) 25%, transparent);
}
.pill-green {
  background: color-mix(in srgb, var(--chart-2) 10%, transparent);
  color: var(--chart-2);
  border-color: color-mix(in srgb, var(--chart-2) 25%, transparent);
}
.pill-amber {
  background: color-mix(in srgb, var(--chart-3) 12%, transparent);
  color: #B77400;
  border-color: color-mix(in srgb, var(--chart-3) 35%, transparent);
}
.pill-gray { background: var(--muted); color: var(--muted-foreground); border-color: var(--border) }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  padding: 5px 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.hdr-in { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.nav { display: flex; align-items: center; gap: 30px }
.nav a.navlink { color: var(--foreground); font-size: 15px; font-weight: 500; opacity: .82 }
.nav a.navlink:hover { opacity: 1 }
.hdr-cta { display: flex; align-items: center; gap: 12px }
.burger {
  display: none; background: none; border: 1px solid var(--border); border-radius: 6px;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  cursor: pointer; color: var(--foreground);
}
.mobnav {
  display: none; flex-direction: column; gap: 4px;
  padding: 8px 24px 20px;
  border-bottom: 1px solid var(--border); background: var(--background);
}
.mobnav.open { display: flex }
.mobnav a { color: var(--foreground); font-weight: 500; padding: 12px 8px; border-radius: 6px; font-size: 16px }
.mobnav a:hover { background: var(--card) }
.logo-link { flex: 0 0 auto; display: flex; align-items: center }
.logo-img { height: 34px; width: auto; display: block }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: 84px 0 72px; text-align: center; position: relative; overflow: hidden }
.hero-glow {
  position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 520px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 14%, transparent), transparent 68%);
  pointer-events: none; z-index: 0;
}
.hero-in { position: relative; z-index: 1; max-width: 860px; margin: 0 auto }
h1 { font-size: 60px; font-weight: 700; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance }
.hero h1 { margin-top: 22px }
.hero p.lead {
  font-size: 21px; color: var(--muted-foreground); line-height: 1.5;
  max-width: 660px; margin: 22px auto 0; text-wrap: pretty;
}
.hero-btns { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--muted-foreground) }

/* --------------------------------------------------------------------------
   Mock da Caixa de Entrada
   -------------------------------------------------------------------------- */
.mock { margin: 56px auto 0; max-width: 960px; position: relative; z-index: 1 }
.mock-frame {
  border: 1px solid var(--border); border-radius: 14px; background: var(--background);
  overflow: hidden; box-shadow: 0 24px 60px -30px rgba(20, 40, 70, .28);
}
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--card);
}
.mock-dot { width: 11px; height: 11px; border-radius: 50% }
.mock-dot.r { background: #FF5F57 }
.mock-dot.y { background: #FEBC2E }
.mock-dot.g { background: #28C840 }
.mock-title { margin-left: 10px; font-size: 12.5px; color: var(--muted-foreground); font-weight: 500 }
.mock-body { display: grid; grid-template-columns: 300px 1fr; min-height: 340px }
.mock-list { border-right: 1px solid var(--border); background: var(--card); padding: 12px }
.mock-filters { display: flex; gap: 6px; margin-bottom: 12px }
.mock-card {
  background: var(--background); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; margin-bottom: 8px; text-align: left;
}
.mock-card.sel { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) }
.mock-card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px }
.mock-card .pname { font-size: 14px }
.mock-card .pname.unread { font-weight: 700 }
.mock-card .tags { margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap }
.mock-card .meta { font-size: 12px; color: var(--muted-foreground); display: flex; align-items: center; gap: 8px }
.mock-card .ico-on { color: var(--chart-2) }
.mock-card .ico-off { color: var(--muted-foreground) }
.mock-reader { padding: 22px; text-align: left; min-width: 0 }
.mock-reader-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px; flex-wrap: wrap;
}
.mock-reader-name { font-size: 19px; font-weight: 700 }
.mock-reader-meta { font-size: 13px; color: var(--muted-foreground); margin-bottom: 18px }
/* A tabela de resultados rola dentro do quadro — nunca empurra a página. */
.mock-tablewrap { overflow-x: auto; min-width: 0 }
.mock-tabrow { border-collapse: collapse; width: 100%; min-width: 380px; font-family: var(--font-mono); font-size: 12.5px }
.mock-tabrow th {
  text-align: left; color: var(--muted-foreground); font-weight: 600;
  font-family: var(--font-sans); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.mock-tabrow td { padding: 8px 10px; border-bottom: 1px solid var(--border) }
.mock-tabrow tr.alt td { background: color-mix(in srgb, var(--destructive) 6%, transparent) }
.mock-tabrow .hi { color: var(--destructive); font-weight: 600 }
.mock-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap }

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */
.sec { padding: 88px 0 }
.sec-alt { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 56px }
h2 { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance }
.sec-head p { font-size: 18px; color: var(--muted-foreground); margin-top: 14px; text-wrap: pretty }

/* Passos */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px }
.step { position: relative; padding: 4px }
.step .num { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 14px }
.step .ic {
  width: 54px; height: 54px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.step .ic .i { width: 24px; height: 24px }
.step h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px }
.step p { font-size: 15px; color: var(--muted-foreground); line-height: 1.55 }

/* Grade de módulos */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.fcard { background: var(--background); border: 1px solid var(--border); border-radius: 12px; padding: 28px }
.fcard .ic {
  width: 46px; height: 46px; border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.fcard .ic .i { width: 22px; height: 22px }
.fcard h4 { font-size: 19px; font-weight: 600; margin-bottom: 10px }
.fcard p { font-size: 15px; color: var(--muted-foreground); line-height: 1.55 }
.fcard ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px }
.fcard ul li { font-size: 14px; color: var(--foreground); display: flex; gap: 9px; align-items: flex-start; opacity: .9 }
.fcard ul li .i { width: 16px; height: 16px; color: var(--chart-2); margin-top: 2px }

/* Split — personalização */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.split h3 { font-size: 30px; font-weight: 700; letter-spacing: -.015em; line-height: 1.12; margin-top: 18px }
.split p.sub { font-size: 17px; color: var(--muted-foreground); margin-top: 14px; line-height: 1.55 }
.split ul { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px }
.split ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px }
.split ul li .i { width: 20px; height: 20px; color: var(--primary); margin-top: 1px }
.split ul li b { font-weight: 600 }
.split ul li span { color: var(--muted-foreground); display: block; font-size: 14px; margin-top: 2px }

.maskvis {
  background: var(--background); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; box-shadow: 0 20px 50px -34px rgba(20, 40, 70, .3);
}
.maskvis-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px }
.maskvis-head strong { font-weight: 700; font-size: 15px }
.maskgrp { margin-bottom: 14px }
.maskgrp .glabel {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-foreground); margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
.maskrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px;
  margin-bottom: 6px; background: var(--card); font-size: 13.5px;
}
.maskrow .rv { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-foreground) }
.maskrow .rv.alt { color: var(--destructive) }
.maskfoot {
  font-size: 12.5px; color: var(--muted-foreground);
  display: flex; align-items: center; gap: 7px; margin-top: 4px;
}

/* Texto para prontuário — mockup de campo de edição (monoespaçado) */
.notevis {
  background: var(--background); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; box-shadow: 0 20px 50px -34px rgba(20, 40, 70, .3); min-width: 0;
}
.notevis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.notevis-head strong { font-weight: 700; font-size: 15px }
.notetxt {
  margin: 0; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--foreground);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 320px; overflow-y: auto;
}
.notetxt .nt-alt { color: var(--destructive) }
.notetxt .nt-ok { color: var(--chart-2) }
/* Cursor piscando: reforça que é um campo de texto editável. */
.notetxt .nt-caret {
  display: inline-block; width: 7px; height: 1.05em; vertical-align: text-bottom;
  margin-left: 1px; background: var(--primary); animation: nt-blink 1.1s step-end infinite;
}
@keyframes nt-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
.notevis-foot {
  font-size: 12.5px; color: var(--muted-foreground);
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Planos
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start }
.plans.plans-3 {
  grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1000px; margin: 0 auto; align-items: stretch;
}
.plan {
  border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px;
  background: var(--background); display: flex; flex-direction: column; height: 100%;
}
.plan.feat {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary),
    0 24px 50px -32px color-mix(in srgb, var(--primary) 55%, transparent);
  position: relative;
}
.plan .badge-pop {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: var(--primary-foreground);
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}
.plan .pn { font-size: 19px; font-weight: 700; margin-bottom: 4px }
.plan .pd { font-size: 13.5px; color: var(--muted-foreground); min-height: 38px; line-height: 1.4 }
.plan .price { display: flex; align-items: baseline; gap: 3px; margin: 16px 0 4px }
.plan .price .cur { font-size: 17px; font-weight: 600; color: var(--muted-foreground) }
.plan .price .amt { font-size: 38px; font-weight: 700; letter-spacing: -.02em }
.plan .price .per { font-size: 14px; color: var(--muted-foreground) }
.plan .price-add {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 0;
  font-size: 14px; font-weight: 600; color: var(--muted-foreground);
}
.plan .price-add .i { width: 14px; height: 14px; color: var(--muted-foreground) }
/* Mantém a faixa de cota alinhada entre os cards, mesmo no que tem a linha
   extra de preço por médico. */
.plans-3 .plan .price { margin-bottom: 0 }
.plans-3 .plan .price:not(:has(+ .price-add)) { margin-bottom: 26px }
.plans-3 .plan .quota { margin-top: 12px }
.plan .quota {
  font-size: 13.5px; font-weight: 600; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  border-radius: 6px; padding: 8px 12px; margin: 8px 0 18px;
  display: flex; align-items: center; gap: 8px;
}
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1 }
.plan ul li { font-size: 14px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.45 }
.plan ul li .i { width: 16px; height: 16px; color: var(--chart-2); margin-top: 2px }
.plan ul li .lead-feat { font-weight: 600 }
.plans-note { text-align: center; margin-top: 26px; font-size: 14.5px; color: var(--muted-foreground) }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px }
.faq-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--background) }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; background: none; border: none; cursor: pointer;
  font-size: 17px; font-weight: 600; color: var(--foreground); text-align: left; font-family: inherit;
}
.faq-q .i { transition: transform .2s ease; color: var(--muted-foreground) }
.faq-item.open .faq-q .i { transform: rotate(180deg) }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease }
.faq-item.open .faq-a { max-height: 260px }
.faq-a p { padding: 0 22px 22px; font-size: 15.5px; color: var(--muted-foreground); line-height: 1.6 }

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.cta { padding: 96px 0 }
.cta-box {
  background: var(--secondary); color: var(--secondary-foreground);
  border-radius: 22px; padding: 64px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.cta-box .cta-glow {
  position: absolute; bottom: -140px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 40%, transparent), transparent 70%);
  pointer-events: none;
}
.cta-box h2 { position: relative; color: inherit; font-size: 42px }
.cta-box p {
  position: relative; font-size: 19px; opacity: .72; margin-top: 16px;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.cta-box .btnrow { position: relative; margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }
.cta-box .btn-outline {
  border-color: color-mix(in srgb, var(--secondary-foreground) 30%, transparent);
  color: var(--secondary-foreground);
}
.cta-box .btn-outline:hover { background: color-mix(in srgb, var(--secondary-foreground) 10%, transparent) }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--border); background: var(--card); padding: 56px 0 40px }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px }
.foot .logo-img { height: 38px }
.foot p.desc { font-size: 14.5px; color: var(--muted-foreground); margin-top: 16px; max-width: 320px; line-height: 1.55 }
.foot h5 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-foreground); margin-bottom: 16px;
}
.foot .links { display: flex; flex-direction: column; gap: 11px }
.foot .links a { color: var(--foreground); font-size: 14.5px; opacity: .82 }
.foot .links a:hover { opacity: 1; color: var(--primary) }
.foot-bottom {
  border-top: 1px solid var(--border); margin-top: 44px; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; font-size: 13.5px; color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .mock-body { grid-template-columns: 1fr }
  .mock-list { display: none }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px }
  .fgrid { grid-template-columns: repeat(2, 1fr) }
  .plans, .plans.plans-3 { grid-template-columns: repeat(2, 1fr) }
  .split { grid-template-columns: 1fr; gap: 36px }
  .foot-in { grid-template-columns: 1fr 1fr }
}

@media (max-width: 640px) {
  .nav, .hdr-cta .btn-desk { display: none }
  .burger { display: flex }
  h1 { font-size: 40px }
  .hero { padding: 56px 0 48px }
  .hero p.lead { font-size: 18px }
  .sec { padding: 64px 0 }
  .cta { padding: 64px 0 }
  h2 { font-size: 30px }
  .cta-box { padding: 48px 24px }
  .cta-box h2 { font-size: 30px }
  .steps, .fgrid, .plans, .plans.plans-3 { grid-template-columns: 1fr }
  .foot-in { grid-template-columns: 1fr }
  .split h3 { font-size: 25px }
  .sec-head { margin-bottom: 40px }
}

/* Espaço apertado: mostra só o símbolo no header */
@media (max-width: 420px) {
  .hdr .logo-img { width: 34px; height: 34px; aspect-ratio: 1; border-radius: 7px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition-duration: .01ms !important }
  .notetxt .nt-caret { animation: none }
}