/* Indiko — landing page
   Layout: faixas horizontais alternando fundo claro (#FAF8F4), branco azulado e navy;
   ondas de seda em SVG fecham o hero e a seção de profissionais. Mobile-first. */
:root {
  --azul: #1565C0;        /* azul da marca */
  --azul-claro: #42A5F5;  /* realce em fundo escuro */
  --navy: #0A2A5E;        /* fundo escuro / títulos */
  --navy-2: #0D47A1;      /* gradiente da seção escura */
  --fundo: #FAF8F4;       /* fundo claro padrão */
  --tinta: #1B2433;       /* texto */
  --tinta-2: #4A5568;     /* texto secundário */
  --linha: #DCE3EE;       /* bordas */
  --gelo: #EEF4FC;        /* faixa azul bem clara */
  --branco: #FFFFFF;

  --fonte: "Roboto Flex", Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  --raio: 14px;
  --sombra: 0 18px 40px -18px rgba(10, 42, 94, .35);
  --larg: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
h1, h2, h3 { color: var(--navy); line-height: 1.12; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 72; }
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); font-weight: 760; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 720; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; font-weight: 650; font-variation-settings: "opsz" 24; }
p { margin: 0; }
a { color: var(--azul); }
:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--larg); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: var(--branco); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; }

.eyebrow {
  font-size: .8rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--azul); margin-bottom: .9rem;
}
.eyebrow-light { color: var(--azul-claro); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--tinta-2); max-width: 36em; }

/* ---------- Logo ---------- */
.logo {
  display: inline-block; text-decoration: none; color: var(--navy);
  font-weight: 560; font-size: 1.85rem; letter-spacing: -0.01em; line-height: 1;
  padding-top: .35em; font-variation-settings: "opsz" 48;
}
.logo-i { position: relative; display: inline-block; }
.logo-i svg {
  position: absolute; width: .78em; height: .65em; left: 50%; bottom: .78em;
  transform: translateX(-38%); overflow: visible; max-width: none;
}
.logo-i path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.logo-light { color: var(--branco); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75em 1.5em; border-radius: 999px;
  font: inherit; font-weight: 650; font-size: 1rem; text-decoration: none; letter-spacing: .01em;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 40px; padding: .5em 1.15em; font-size: .92rem; }
.btn-primary { background: var(--azul); color: var(--branco); box-shadow: 0 8px 20px -10px var(--azul); }
.btn-primary:hover { background: var(--navy-2); }
.btn-ghost { color: var(--navy); border: 1.5px solid var(--linha); background: var(--branco); }
.btn-ghost:hover { border-color: var(--azul); }
.btn-light { background: var(--azul-claro); color: var(--navy); width: 100%; }
.btn-light:hover { background: var(--branco); }
.ico-sm { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--gelo); fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(250, 248, 244, .88); backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(220, 227, 238, .7);
}
.topbar-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.topbar .logo-img { padding: 0; display: block; line-height: 0; }
.logo-img img { display: block; height: 64px; width: auto; max-width: none; }
.topnav { display: none; gap: 20px; }
.topnav a { color: var(--tinta-2); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap; }
.topbar .btn { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1099px) {
  .topnav { gap: 14px; }
  .topnav a { font-size: .86rem; }
  .topbar .btn { padding-inline: 16px; font-size: .88rem; }
  .topbar-in { gap: 10px; }
}
.topnav a:hover { color: var(--azul); }
.topnav a[aria-current="page"] { color: var(--azul); font-weight: 650; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--fundo) 0%, var(--branco) 45%, var(--gelo) 100%);
  padding-block: clamp(40px, 7vw, 88px) clamp(120px, 14vw, 190px);
}
.hero-in { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
.hero-copy { display: grid; gap: 1.3rem; min-width: 0; }
.hero-copy .eyebrow { margin-bottom: 0; }
.hl { color: var(--azul); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { display: flex; align-items: center; gap: .45em; font-size: .95rem; color: var(--tinta-2); }
.hero-note .ico-sm { color: var(--azul); }

.waves {
  position: absolute; left: -3%; right: -3%; bottom: 0; height: clamp(140px, 22vw, 300px);
  background: url("img/waves.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.waves-dark { background-image: url("img/waves-dark.svg"); opacity: .55; }

/* Celular: imagem recortada (img/app-celular.webp, fundo transparente) */
.phone {
  justify-self: center; display: block; width: min(270px, 100%); height: auto;
  filter: drop-shadow(0 22px 30px rgba(10, 42, 94, .28));
  transform: rotate(2deg);
}

/* ---------- Seções ---------- */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section-tint { background: var(--branco); border-block: 1px solid var(--linha); }
.section h2 { max-width: 22em; }

/* Como funciona: linha do tempo */
.steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { position: relative; display: grid; align-content: start; grid-template-columns: 48px 1fr; gap: 18px; padding-bottom: 28px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px;
  background: linear-gradient(var(--azul), var(--linha));
}
.steps li:last-child::before { display: none; }
.step-n {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--branco); border: 2px solid var(--azul); color: var(--azul);
  font-weight: 750; font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.steps li:last-child .step-n { background: var(--azul); color: var(--branco); }
.steps p { padding-top: 10px; max-width: 30em; }

/* Por que existe */
.why { display: grid; gap: 32px; }
.why-body { display: grid; gap: 1.1rem; color: var(--tinta-2); max-width: 40em; }
.why-answer {
  color: var(--navy); font-size: 1.15rem; font-weight: 500; line-height: 1.55;
  padding: 22px 24px; border-radius: var(--raio); background: var(--gelo);
}

/* Diferenciais */
.feat-group { margin-top: 44px; }
.feat-title { font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); display: flex; align-items: center; gap: 12px; }
.feat-title::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; margin-top: 16px; }
.chip { position: relative; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.chip:hover { border-color: #B8C7E0; }
.chip summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 6px 10px 6px 7px; font-size: .88rem; font-weight: 600; line-height: 1.25; color: var(--navy);
  border-radius: 12px; position: relative;
}
.chip summary::-webkit-details-marker { display: none; }
.chip summary span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.chip summary::after {
  content: "+"; margin-left: auto; padding-left: 4px; font-size: 1.25rem; font-weight: 500; line-height: 1; color: var(--azul);
}
.chip[open] summary::after { content: "\2212"; }
.chip .ico { width: 32px; height: 32px; padding: 7px; border-radius: 9px; flex: none; }
.chip p { padding: 0 14px 14px; color: var(--tinta-2); font-size: .9rem; line-height: 1.5; }
.chip[open] { border-color: var(--azul); box-shadow: 0 10px 24px -16px rgba(21, 101, 192, .55); }

/* Profissional: blocos em degradê azul, com brilho */
.chips-profissional .chip {
  border: 0; color: var(--branco); overflow: hidden;
  background: linear-gradient(135deg, #0A2A5E 0%, #1565C0 100%);
  box-shadow: 0 12px 22px -14px rgba(10, 42, 94, .85);
}
.chips-profissional .chip:nth-child(3n+2) { background: linear-gradient(135deg, #0D47A1 0%, #1976D2 100%); }
.chips-profissional .chip:nth-child(3n) { background: linear-gradient(135deg, #123A7A 0%, #1565C0 70%, #1976D2 100%); }
.chips-profissional .chip::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%);
}
.chips-profissional .chip:hover { transform: translateY(-2px); box-shadow: 0 16px 26px -14px rgba(10, 42, 94, .9); }
.chips-profissional .chip summary { color: var(--branco); font-weight: 650; }
.chips-profissional .chip summary::after { color: var(--branco); }
.chips-profissional .ico { background: rgba(255, 255, 255, .16); stroke: var(--branco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.chips-profissional .chip p { position: relative; color: #DCE7F7; }
.chips-profissional .chip[open] { box-shadow: 0 0 0 2px var(--azul-claro), 0 16px 26px -14px rgba(10, 42, 94, .9); }

/* Para os dois lados: verde claro */
.chips-ambos .chip { background: #E4F5E9; border-color: #A9D8B8; }
.chips-ambos .chip:hover { border-color: #5FB77F; }
.chips-ambos .chip summary::after { color: #1B7A3A; }
.chips-ambos .ico { background: #CBEBD5; stroke: #1B7A3A; }
.chips-ambos .chip p { color: #3B5A47; }
.chips-ambos .chip[open] { border-color: #2E9E55; box-shadow: 0 10px 24px -16px rgba(30, 130, 70, .6); }

@media (max-width: 639px) {
  /* Celular: fileira que rola de dois em dois */
  .chips {
    display: flex; align-items: flex-start; gap: 8px; overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 calc((100vw - 2 * var(--gutter) - 8px) / 2); scroll-snap-align: start; }
  .chip summary { gap: 7px; padding: 6px 20px 6px 6px; font-size: .8rem; }
  .chip summary::after { position: absolute; top: 5px; right: 8px; padding: 0; margin: 0; font-size: 1.05rem; }
  .chip .ico { width: 26px; height: 26px; padding: 6px; }
  .chip p { font-size: .86rem; }
  .chips-dots { display: flex; justify-content: center; gap: 6px; margin-top: -8px; }
  .chips-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--linha); transition: background-color .15s ease, width .15s ease; }
  .chips-dots i.on { width: 18px; border-radius: 3px; background: var(--azul); }
}
@media (min-width: 640px) { .chips-dots { display: none; } }
@media (min-width: 640px) {
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chip summary { font-size: .92rem; padding-right: 14px; }
}
@media (min-width: 1000px) {
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
  .chips-profissional .chip:hover { transform: none; }
}

/* Profissionais */
.pro {
  position: relative; overflow: hidden; color: #DCE7F7;
  background: radial-gradient(120% 90% at 85% 10%, var(--navy-2) 0%, var(--navy) 55%, #071D44 100%);
  padding-block: clamp(64px, 9vw, 112px) clamp(110px, 14vw, 180px);
}
.pro-in { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
.pro h2 { color: var(--branco); font-size: clamp(2rem, 4.4vw, 3rem); max-width: 14em; }
.pro .lead { color: #C3D4EE; margin-top: 1.2rem; }
.pro-copy { min-width: 0; }
.offer {
  display: grid; gap: 10px; padding: 30px 28px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
  border: 3px solid #000; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .7);
}
.offer-tag { justify-self: start; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: var(--azul-claro); padding: 5px 12px; border-radius: 99px; }
.offer-big {
  font-size: 2rem; font-weight: 750; line-height: 1; margin-top: 8px; color: #F2C14E;
  background: linear-gradient(180deg, #FFE59A 0%, #F2C14E 45%, #C48A12 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}
.offer-big span { font-size: 4.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.offer-sub { color: #DCE7F7; margin-bottom: 8px; }
.btn-outline-light { width: 100%; color: var(--branco); border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); border-color: var(--branco); }

/* Por que usar o Indiko (dentro da seção de profissionais) */
.pro-why { position: relative; z-index: 1; margin-top: clamp(48px, 7vw, 80px); text-align: center; }
.pro-why .eyebrow { margin-bottom: .7rem; }
.pro .pro-why-title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); max-width: none; margin-inline: auto; }
.why-cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; text-align: left; }
.why-cards li {
  display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 18px;
  background: #F4F7FC; border: 1px solid #DCE3EE; border-radius: 20px;
}
.why-ico { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: #E3EEFB; fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.why-cards h3 { font-size: 1.05rem; font-weight: 700; color: #0A1B3A; margin-bottom: 6px; }
.why-cards p { font-size: .9rem; line-height: 1.55; color: #55627A; }
@media (min-width: 560px) {
  .why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .why-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .why-cards li { grid-template-columns: 1fr; justify-items: center; align-content: start; text-align: center; padding: 28px 22px; gap: 14px; }
  .why-cards h3 { font-size: 1.1rem; }
}

/* Novidades */
.news-empty {
  margin-top: 36px; display: flex; align-items: center; gap: 18px; padding: 28px;
  border: 1.5px dashed var(--linha); border-radius: var(--raio); background: var(--branco);
  color: var(--tinta-2);
}
.news-empty b { color: var(--navy); }
.news-empty .ico { flex: none; }

/* Perfis em destaque */
.featured { background: linear-gradient(180deg, var(--gelo), #F5F9FF); border-block: 1px solid var(--linha); }
.featured h2 { max-width: none; }
.featured-note { margin: .6rem 0 0; color: var(--tinta-2); font-size: .95rem; }
.pcards { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 22px; }
.pcard {
  display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--branco);
  border-radius: 24px; box-shadow: 0 14px 34px -18px rgba(10, 42, 94, .3);
}
.pcard-top { display: flex; align-items: center; gap: 16px; }
.pcard-photo { width: 76px; height: 76px; flex: none; border-radius: 50%; border: 3px solid #1EA1FF; object-fit: cover; background: var(--gelo); }
.pcard h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.15rem; font-weight: 750; color: var(--navy); line-height: 1.2; }
.vf { width: 20px; height: 20px; flex: none; }
.pcard-cat { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #E6EFFC; color: var(--azul); font-size: .85rem; font-weight: 600; }
.pcard-desc { margin: 0; color: var(--tinta-2); font-size: .98rem; line-height: 1.6; flex: 1; }
.pcard-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 12px;
  border-block: 1px dashed var(--linha); font-size: .92rem; color: var(--tinta-2);
}
.pcard-where { display: inline-flex; align-items: center; gap: 6px; }
.mi { width: 18px; height: 18px; flex: none; }
.pcard-rate { color: #E8920C; font-weight: 700; white-space: nowrap; }
.pcard-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pcard-btns .btn { min-height: 46px; padding-inline: .7em; font-size: .92rem; white-space: nowrap; }
.btn-deal { background: linear-gradient(90deg, #0C9BFF, #0B4FC4); color: var(--branco); box-shadow: 0 8px 18px -8px #0B6FE0; }
.btn-deal:hover { filter: brightness(1.08); }
.btn-msg { background: var(--branco); color: var(--tinta); border: 1.5px solid var(--linha); }
.btn-msg:hover { border-color: var(--azul); color: var(--azul); }
@media (max-width: 859px) {
  .pcards {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 28px; scroll-padding-inline: var(--gutter);
  }
  .pcards::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 min(88%, 340px); padding: 20px; scroll-snap-align: start; }
  .pcard-meta { font-size: .86rem; gap: 8px; }
  .pcard-where { white-space: nowrap; }
}
@media (min-width: 860px) {
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
}

/* Rodapé */
.foot { background: #071D44; color: #A9BBD8; padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: .95rem; }
.foot-in { display: grid; gap: 28px; }
.foot-brand { display: grid; gap: 14px; }
.foot-links { display: grid; gap: 10px; }
.foot-links a { color: var(--branco); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* ---------- Página de planos ---------- */
.plans-sec { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 112px); }
.plans-title { font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin-bottom: 14px; }
.plans-promo { color: var(--tinta-2); max-width: 40em; }
.plans-promo b { color: var(--navy); }
.gold-text { font-weight: 750; color: #A8730A; }
.plans { display: grid; gap: 26px; align-items: start; margin-top: 36px; max-width: 980px; }
.plan-head { padding: 22px 24px 20px; }
.plan-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.plan-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.plan-badge { font-size: .8rem; font-weight: 650; padding: 3px 12px; border-radius: 99px; white-space: nowrap; }
.plan-price { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-price b { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: .92rem; }
.plan-note { margin-top: 8px; font-size: .92rem; font-weight: 650; line-height: 1.4; text-wrap: balance; }
.plan-body { padding: 20px 24px 24px; background: var(--branco); }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.plan-list li { display: flex; align-items: flex-start; gap: 12px; color: #2B3445; font-size: .98rem; line-height: 1.4; }
.plan-check { width: 20px; height: 20px; margin-top: 1px; flex: none; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Normal */
.plan-normal { background: var(--branco); border: 2px solid #A8C4E6; border-radius: 24px; overflow: hidden; }
.plan-normal .plan-head { background: #E3F0FD; }
.plan-normal h2 { color: var(--azul); }
.plan-normal .plan-badge { background: #DCF0DE; color: #2E7D32; }
.plan-normal .plan-price b { color: #0A1B3A; }
.plan-normal .plan-price span { color: #7A8598; }
.plan-normal .plan-note { color: #2E7D32; }
.plan-normal .plan-check { stroke: var(--azul); }

/* Premium: moldura dourada dupla */
.plan-premium-wrap { padding: 4px; background: var(--branco); border: 2px solid #E5B422; border-radius: 28px; }
.plan-premium { border: 2px solid #E5B422; border-radius: 23px; overflow: hidden; background: var(--branco); }
.plan-premium .plan-head { background: linear-gradient(135deg, #2E1D05 0%, #170F02 100%); }
.plan-premium h2 { color: #F2A91B; }
.plan-premium .plan-ico { fill: #4A3410; stroke: #4A3410; }
.plan-badges { display: grid; gap: 6px; justify-items: end; }
.plan-badge-gold { background: #D9930D; color: var(--branco); text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.plan-badge-dim { background: rgba(217, 147, 13, .22); color: #FFD54A; }
.plan-premium .plan-price b { color: var(--branco); }
.plan-premium .plan-price span { color: #A99A7C; }
.plan-premium .plan-note { color: #FFD54A; }
.plan-includes { display: flex; align-items: center; gap: 10px; padding: 14px 24px; background: #F7EEDB; border-bottom: 1px solid #E8D9B5; color: #8A5A0B; font-weight: 700; font-size: .95rem; }
.plan-includes svg { width: 20px; height: 20px; fill: none; stroke: #B7842A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.plan-premium .plan-check { stroke: #C98A0B; }

.plans-cta { margin-top: 40px; }
@media (min-width: 1100px) {
  .topnav { gap: 28px; }
}
@media (min-width: 860px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  .offer { padding: 36px; }
}
@media (min-width: 900px) {
  .topnav { display: flex; }
  .hero-in { grid-template-columns: 1.15fr .85fr; }
  .phone { justify-self: end; margin-right: 24px; width: 300px; }
  .steps { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .steps li { grid-template-columns: 1fr; gap: 16px; padding-bottom: 0; }
  .steps li::before { left: 48px; right: -20px; top: 23px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--azul), var(--linha)); }
  .steps p { padding-top: 0; }
  .why { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .why-head { position: sticky; top: 100px; }
  .pro-in { grid-template-columns: 1.2fr .8fr; gap: 64px; }
  .foot-in { grid-template-columns: 1fr auto; align-items: end; }
  .foot-links { grid-auto-flow: column; gap: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
  .waves { animation: drift 18s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: translateX(0) scaleY(1); } to { transform: translateX(-2%) scaleY(1.06); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}