/* ==========================================================================
   iHost Agenda — site de divulgação
   Mundo: o próprio app. Fundo azul-marinho quase preto, campos largos de azul
   elétrico, superfícies em #0E1530 com fio de 1px, e os mesmos ladrilhos
   circulares azuis que o produto usa. Uma luz só, de cima.
   ========================================================================== */

:root {
  --bg:        #060A18;
  --bg-2:      #090F22;
  --surf:      #0E1530;
  --surf-2:    #131C3D;
  --line:      #1E2A55;
  --line-2:    #2A3A6E;

  --blue:      #1F5BFF;
  --blue-lit:  #4B7CFF;
  --blue-deep: #1544C8;
  --blue-ink:  #8FAEFF;
  --white:     #fff;
  --field:     #12224F;
  --field-2:   #123ABF;
  --on-field:  #D5E0FF;

  --txt:       #EEF2FF;
  --txt-2:     #A7B4D8;
  --txt-3:     #8895C0;

  --amber:     #F5A524;
  --green:     #22C55E;
  --red:       #EF4444;

  --navy:      #0A1024;
  --navy-2:    #131C3D;
  --navy-3:    #1B2450;

  --r-xs: 4px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;

  /* uma luz, vinda de cima */
  --lift-1: 0 2px 6px rgba(2, 6, 20, .45);
  --lift-2: 0 8px 22px rgba(2, 6, 20, .55);
  --lift-3: 0 18px 44px rgba(2, 6, 20, .62);
  --lift-4: 0 34px 80px rgba(2, 6, 20, .7);

  --wrap: 78rem;
  --pad: clamp(1.15rem, 5vw, 2.75rem);
  --measure: 36rem;

  color-scheme: dark;
  accent-color: var(--blue);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: Archivo, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1rem, .96rem + .22vw, 1.06rem);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use, .sprite symbol {
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- superfícies do navegador ---------- */
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 2.5px solid var(--blue-lit); outline-offset: 3px; border-radius: var(--r-xs); }
* { caret-color: var(--blue); }
* { scrollbar-color: var(--line-2) var(--bg-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--bg-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #3d508f; }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; z-index: 90; inset: .6rem auto auto .6rem;
  background: var(--blue); color: var(--white);
  padding: .55rem .9rem; border-radius: var(--r-xs); font-weight: 700;
}

/* ---------- tipografia ---------- */
h1, h2, h3 {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.65rem, 1.7rem + 4.4vw, 4.5rem); line-height: .98; font-stretch: 104%; }
h2 { font-size: clamp(1.95rem, 1.4rem + 2.3vw, 2.9rem); }
h3 { font-size: 1.14rem; letter-spacing: -.024em; }
.hl { color: var(--blue-lit); }
p { margin: 0 0 1.05em; max-width: var(--measure); color: var(--txt-2); }
p strong { color: var(--txt); font-weight: 700; }
a { color: inherit; }
a:hover { text-decoration-thickness: 2px; text-underline-offset: .22em; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--blue); color: var(--white);
  font-family: inherit;
  font-weight: 700; font-size: 1rem; letter-spacing: -.014em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: .85rem 1.4rem;
  border: 0; border-radius: 999px;
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .18s cubic-bezier(.2,.7,.2,1), background-color .16s;
}
.btn:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: var(--lift-3), 0 0 0 6px rgba(31,91,255,.14), inset 0 1px 0 rgba(255,255,255,.24); }
.btn:active { transform: translateY(0); box-shadow: var(--lift-1); }
.btn--sm { padding: .58rem 1.05rem; font-size: .92rem; }
.btn--big { padding: 1.05rem 1.9rem; font-size: 1.08rem; }
.btn--ghost {
  background: transparent; color: var(--txt);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn--ghost:hover { background: rgba(31,91,255,.1); color: var(--white); box-shadow: inset 0 0 0 1.5px var(--blue); }
.btn--light { background: var(--white); color: #10203F; }
.btn--light:hover { background: #E7EDFF; color: #10203F; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(6, 10, 24, .93);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  max-width: var(--wrap); margin-inline: auto; padding: .75rem var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; }
.brand__mark {
  display: grid; place-items: center;
  width: 2.05rem; height: 2.05rem; border-radius: 50%;
  background: var(--blue); color: var(--white);
  box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,.3);
}
.brand__name { font-weight: 800; font-size: 1.14rem; letter-spacing: -.035em; }
.brand__name em { font-style: normal; color: var(--blue-lit); }
.nav__links { display: flex; gap: 1.6rem; margin-inline: auto; }
.nav__links a { font-size: .95rem; font-weight: 600; color: var(--txt-2); text-decoration: none; }
.nav__links a:hover { color: var(--txt); }
.nav__links a[aria-current="true"] { color: var(--txt); }
.nav__links a[aria-current="true"]::after {
  content: ""; display: block; height: 2px; margin-top: .25rem;
  background: var(--blue-lit); border-radius: 999px;
}
.nav__acts { display: flex; align-items: center; gap: 1.1rem; flex: 0 0 auto; }
.lnk { font-weight: 600; font-size: .95rem; color: var(--txt-2); text-decoration: none; }
.lnk:hover { color: var(--txt); text-decoration: underline; }

/* disclosure do menu em telas estreitas */
.nav__burger {
  display: none;
  align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: transparent; color: var(--txt);
  border: 1px solid var(--line-2); border-radius: 10px;
  cursor: pointer;
}
.nav__burger:hover { border-color: var(--blue); color: var(--white); }
.nav__panel {
  display: none;
  border-top: 1px solid var(--line);
  padding: .7rem var(--pad) 1.1rem;
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.nav__panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .1rem; font-weight: 600; color: var(--txt-2); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav__panel a:hover { color: var(--txt); }
.nav__panel svg { color: var(--txt-3); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__acts { margin-inline-start: auto; }
  .nav__burger { display: inline-flex; order: 3; }
}
@media (min-width: 901px) { .nav__panel { display: none !important; } }
@media (max-width: 460px) { .nav__acts .lnk { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding: clamp(2.6rem, 7vw, 5.5rem) 0 clamp(3rem, 8vw, 6rem); }
.hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -34%; left: 46%; width: 92rem; height: 60rem;
  transform: translateX(-50%);
  background:
    radial-gradient(38% 42% at 62% 40%, rgba(31, 91, 255, .55), transparent 70%),
    radial-gradient(30% 34% at 30% 20%, rgba(75, 124, 255, .28), transparent 72%);
  filter: blur(12px);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(143,174,255,.055) 1px, transparent 1px) 0 0 / 100% 4.5rem,
    linear-gradient(90deg, rgba(143,174,255,.055) 1px, transparent 1px) 0 0 / 4.5rem 100%;
  mask-image: radial-gradient(72% 62% at 50% 26%, #000 30%, transparent 78%);
}
.hero__in {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center;
}
@media (min-width: 960px) { .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }
.hero h1 { margin-bottom: 1.3rem; }
.deck { font-size: clamp(1.06rem, 1rem + .5vw, 1.24rem); line-height: 1.55; color: #C3CEEC; }
.acts { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.6rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ticks li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--txt-2); }
.ticks svg { color: var(--blue-lit); flex: 0 0 auto; }

/* leque de telas — o único momento de movimento da página */
.hero__show { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.fan {
  position: relative;
  width: min(30rem, 100%);
  min-height: min(34rem, 96vw);
  display: grid; place-items: center;
}
.fan .phone { position: absolute; }
.fan__a { z-index: 3; --w: min(17rem, 46vw); }
.fan__b { z-index: 1; --w: min(12.8rem, 34vw); opacity: .78; }
.fan__c { z-index: 2; --w: min(12.8rem, 34vw); opacity: .78; }
.fan__b { transform: translate(-48%, -8%) rotate(-8deg); }
.fan__c { transform: translate(48%, 6%) rotate(8deg); }
@media (max-width: 700px) {
  .fan { min-height: 32rem; }
  .fan__a { --w: 16rem; }
  .fan__b { --w: 11rem; transform: translate(-52%, -10%) rotate(-9deg); }
  .fan__c { --w: 11rem; transform: translate(52%, 8%) rotate(9deg); }
}
@media (max-width: 460px) {
  .fan__b, .fan__c { display: none; }
  /* sobra um aparelho só: ele volta para o fluxo, senão a caixa fica com
     altura zero e o celular sobe por cima dos botões. */
  .fan { min-height: 0; }
  .fan .fan__a { position: relative; }
}
/* abertura: as telas de trás saem de baixo da principal */
.fan--armed .fan__b, .fan--armed .fan__c { transform: none; opacity: 0; }
.fan--open .fan__b, .fan--open .fan__c {
  opacity: .78;
  transition: transform .9s cubic-bezier(.14,.86,.22,1), opacity .7s ease-out;
}
.fan--open .fan__b { transform: translate(-48%, -8%) rotate(-8deg); }
.fan--open .fan__c { transform: translate(48%, 6%) rotate(8deg); transition-delay: .1s; }
@media (max-width: 700px) {
  .fan--open .fan__b { transform: translate(-52%, -10%) rotate(-9deg); }
  .fan--open .fan__c { transform: translate(52%, 8%) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* sem movimento, mas o leque continua aberto: as três telas são a
     promessa da primeira dobra. */
  .fan--armed .fan__b, .fan--open .fan__b { transform: translate(-48%, -8%) rotate(-8deg); opacity: .78; }
  .fan--armed .fan__c, .fan--open .fan__c { transform: translate(48%, 6%) rotate(8deg); opacity: .78; }
  .fan--open .fan__b, .fan--open .fan__c { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .fan--armed .fan__b, .fan--open .fan__b { transform: translate(-52%, -10%) rotate(-9deg); }
  .fan--armed .fan__c, .fan--open .fan__c { transform: translate(52%, 8%) rotate(9deg); }
}

/* ==========================================================================
   FLUXO
   ========================================================================== */
.flow { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.flow__row {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
}
@media (min-width: 820px) { .flow__row { grid-template-columns: repeat(3, 1fr); } }
.flow__step { background: var(--surf); padding: clamp(1.4rem, 3vw, 2rem); }
.flow__t { font-size: 1.14rem; letter-spacing: -.024em; margin: .9rem 0 .45rem; }
.flow__step p { margin: 0; font-size: .96rem; }
.num {
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: rgba(31,91,255,.16); color: var(--blue-lit);
  border: 1px solid rgba(75,124,255,.42);
  font-weight: 800; font-size: 1rem;
}

/* ==========================================================================
   BLOCOS COM TELA
   ========================================================================== */
.feat { padding: clamp(3rem, 8vw, 6rem) 0; }
.feat + .feat { padding-top: 0; }
.feat__in { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 920px) {
  .feat__in { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
  .feat--flip .feat__show { order: -1; }
}
.feat__say h2 { margin-bottom: 1.05rem; }
.feat__show { position: relative; display: flex; justify-content: center; min-width: 0; isolation: isolate; }
.feat__show::before {
  content: ""; position: absolute; z-index: -1;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30rem; height: 30rem; max-width: 130%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,91,255,.34), transparent 66%);
  filter: blur(18px);
  pointer-events: none;
}

.chips { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  font-size: .92rem; font-weight: 600; color: var(--txt-2);
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 999px; padding: .42rem .95rem;
}

.states { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.states li { display: flex; align-items: center; gap: .8rem; }
.states strong { display: block; font-weight: 700; color: var(--txt); line-height: 1.2; }
.states small { display: block; font-size: .88rem; color: var(--txt-3); }
.st { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; border-radius: 50%; position: relative; }
.st--pend { border: 2.5px solid var(--amber); }
.st--conf { background: var(--blue); box-shadow: 0 0 0 3px rgba(31,91,255,.2); }
.st--conf::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: .38rem; height: .19rem; border: 2px solid var(--white); border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(0, -1px);
}
.st--canc { border: 2.5px solid var(--red); }
.st--canc::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
  height: 2.5px; background: var(--red); transform: rotate(-38deg);
}

.plain { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: .62rem; }
.plain li { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--txt); }
.plain svg { color: var(--blue-lit); flex: 0 0 auto; }

/* faixa do dia */
.strip { display: flex; flex-wrap: wrap; gap: .32rem; margin: 1.6rem 0 .7rem; }
.slot {
  width: 2.5rem; height: 2.7rem;
  display: grid; place-items: center;
  font-size: .9rem; font-weight: 700;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--surf);
  color: var(--txt-3);
}
.slot[data-s="busy"] { background: var(--blue); border-color: var(--blue-lit); color: var(--white); box-shadow: var(--lift-1), 0 0 0 3px rgba(31,91,255,.16); }
.slot[data-s="block"] {
  color: var(--txt-3); border-color: var(--line-2);
  background:
    repeating-linear-gradient(45deg, transparent 0 4px, rgba(143,174,255,.16) 4px 6px),
    var(--surf);
}
.strip__key { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; color: var(--txt-3); }
.strip__key b { display: inline-block; width: 1rem; height: 1rem; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--surf); }
.strip__key b[data-s="busy"] { background: var(--blue); border-color: var(--blue-lit); }
.strip__key b[data-s="block"] { border-color: var(--line-2); background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(143,174,255,.16) 3px 5px), var(--surf); }
.strip__key b + b { margin-left: .6rem; }

/* financeiro */
.fin { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.fin li {
  display: grid; grid-template-columns: auto 1fr; column-gap: .8rem;
  align-items: center;
  background: var(--surf); padding: .8rem 1rem;
}
.fin b { font-weight: 700; color: var(--txt); }
.fin small { grid-column: 2; font-size: .88rem; color: var(--txt-3); }
.fin__ic {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--surf-2); color: var(--blue-ink);
  border: 1px solid var(--line-2);
}
.fin__ic--out { color: #FF8D85; border-color: rgba(255,141,133,.4); }
.fin__ic--in { color: #62D99A; border-color: rgba(98,217,154,.4); }

/* ==========================================================================
   MÓDULOS
   ========================================================================== */
.mods { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.mods__h { margin-bottom: .9rem; }
.mods__d { max-width: 44rem; font-size: 1.06rem; }
.mods__grid {
  list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.mods__grid li {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 1.2rem 1.25rem 1.35rem;
  transition: border-color .2s, transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.mods__grid li:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--lift-2); }
.mods__grid b { display: block; margin: .85rem 0 .3rem; font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; }
.mods__grid small { display: block; font-size: .92rem; line-height: 1.5; color: var(--txt-3); }
.tile {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--blue); color: var(--white);
  box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,.28);
}
.mods__cta {
  background: linear-gradient(150deg, var(--blue), var(--field-2) 78%) !important;
  border-color: var(--blue-lit) !important;
  display: flex; flex-direction: column; justify-content: center;
}
.mods__cta b { margin-top: 0; color: var(--white); font-size: 1.14rem; }
.mods__cta small { color: var(--on-field); margin-bottom: 1rem; }
.mods__cta .btn { align-self: flex-start; background: var(--white); color: #10203F; }
.mods__cta .btn:hover { background: #E7EDFF; color: #10203F; }

/* ==========================================================================
   PARA QUEM É
   ========================================================================== */
.segs { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem); }
.segs h2 { margin-bottom: .9rem; }
.segs__d { max-width: 44rem; font-size: 1.06rem; }
.segs__grid {
  list-style: none; margin: clamp(1.6rem, 4vw, 2.4rem) 0 1.4rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.segs__grid li {
  font-weight: 600; font-size: .96rem; color: var(--txt);
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 999px; padding: .52rem 1.1rem;
  transition: border-color .18s, color .18s;
}
.segs__grid li:hover { border-color: var(--blue); color: var(--white); }
.segs__note { font-size: .92rem; color: var(--txt-3); max-width: 40rem; margin: 0; }

/* ==========================================================================
   PLANOS
   ========================================================================== */
.plans { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem); }
.plans h2 { margin-bottom: .9rem; }
.plans__d { max-width: 46rem; font-size: 1.06rem; }
.plans__row {
  display: grid; gap: 1rem;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 clamp(2.2rem, 5vw, 3rem);
}
@media (min-width: 720px) { .plans__row { grid-template-columns: 1fr 1fr; } }
.plan {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3.4vw, 2.2rem);
  display: flex; flex-direction: column; align-items: flex-start;
}
.plan h3 { margin-bottom: .6rem; }
.plan__price {
  margin: 0 0 .35rem;
  font-weight: 800; font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.4rem);
  letter-spacing: -.04em; line-height: 1; color: var(--txt);
}
.plan__cur { font-size: .42em; font-weight: 700; vertical-align: .55em; margin-right: .18em; color: var(--txt-2); }
.plan__per { font-size: .3em; font-weight: 700; letter-spacing: -.01em; color: var(--txt-3); }
.plan__eq { margin: 0 0 .55rem; font-weight: 700; color: var(--txt); }
.plan__save {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .55rem; font-weight: 700; color: var(--txt);
}
.plan__note { font-size: .92rem; color: var(--txt-3); margin: 0 0 1.4rem; }
.plan .btn { margin-top: auto; }

.plan--year {
  background: linear-gradient(150deg, var(--field), var(--surf) 72%);
  border-color: var(--line-2);
  box-shadow: var(--lift-2);
}
.plan--year .plan__price, .plan--year .plan__eq { color: var(--white); }
.plan--year .plan__cur { color: #BFD0FF; }
.plan--year .plan__per { color: var(--on-field); }
.plan--year .plan__save { color: var(--white); }
.plan--year .plan__save svg { color: var(--blue-lit); }
.plan--year .plan__note { color: var(--on-field); }

.plans__ih { margin-bottom: .9rem; }
.plans__inc {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .58rem;
}
@media (min-width: 720px) { .plans__inc { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.plans__inc li { display: flex; align-items: flex-start; gap: .6rem; color: var(--txt-2); }
.plans__inc svg { color: var(--blue-lit); flex: 0 0 auto; margin-top: .28em; }

/* ==========================================================================
   PERGUNTAS FREQUENTES
   ========================================================================== */
.faq { padding: 0 0 clamp(3rem, 8vw, 5.5rem); }
.faq h2 { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.faq__grid {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}
@media (min-width: 880px) { .faq__grid { grid-template-columns: 1fr 1fr; } }
.faq__grid article { background: var(--surf); padding: clamp(1.15rem, 2.6vw, 1.6rem); }
/* número ímpar de perguntas: a última ocupa a linha toda, senão sobra
   uma célula vazia no canto. */
@media (min-width: 880px) {
  .faq__grid article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.faq__grid h3 { margin-bottom: .5rem; }
.faq__grid p { margin: 0; font-size: .96rem; max-width: none; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { padding: clamp(2rem, 5vw, 3rem) 0 clamp(4rem, 9vw, 7rem); }
.cta__in {
  position: relative; overflow: hidden;
  max-width: var(--wrap);
  border: 1px solid var(--line-2);
  border-radius: clamp(var(--r-m), 3vw, 28px);
  background: linear-gradient(160deg, var(--field), var(--surf) 62%);
  padding: clamp(2.2rem, 6vw, 4.2rem) clamp(1.4rem, 5vw, 3.5rem);
  text-align: center;
  box-shadow: var(--lift-3);
}
.cta__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -60%; left: 50%; transform: translateX(-50%);
  width: 54rem; height: 40rem;
  background: radial-gradient(50% 50% at 50% 50%, rgba(31,91,255,.8), transparent 68%);
  filter: blur(10px);
}
.cta__in > * { position: relative; z-index: 1; }
.cta h2 { margin-bottom: 1rem; }
.cta p { margin-inline: auto; }
.cta .btn { margin: 1.6rem 0 1rem; }
.fineprint { font-size: .9rem; color: var(--txt-3); margin: 0 auto; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); padding: 2.4rem 0 3rem; }
.foot__in { display: grid; gap: 1.4rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; }
.foot nav a { font-weight: 600; font-size: .95rem; color: var(--txt-2); text-decoration: none; }
.foot nav a:hover { color: var(--txt); text-decoration: underline; }
.foot__note { margin: 0; font-size: .9rem; color: var(--txt-3); }
@media (min-width: 760px) {
  .foot__in { grid-template-columns: auto 1fr; align-items: center; column-gap: 3rem; }
  .foot__note { grid-column: 1 / -1; }
}

/* ==========================================================================
   O CELULAR — reconstrução das telas do app
   Tudo aqui é dimensionado a partir de --w, para a tela ficar legível em
   qualquer largura em que o aparelho aparecer.
   ========================================================================== */
.phone {
  --w: 17.5rem;
  position: relative;
  width: var(--w);
  aspect-ratio: 393 / 800;
  background: #0B0B0D;
  border-radius: calc(var(--w) / 7.3);
  padding: calc(var(--w) / 42);
  box-shadow: var(--lift-4), inset 0 0 0 1.5px #38406A, inset 0 0 0 4px #14162A;
  flex: 0 0 auto;
  color: #E8ECF8;
}
.screen {
  position: relative;
  height: 100%; width: 100%;
  border-radius: calc(var(--w) / 8.6);
  overflow: hidden;
  background: var(--navy);
  display: flex; flex-direction: column;
  font-size: calc(var(--w) / 30);
  line-height: 1.35;
}
.phone::after {
  content: ""; position: absolute; z-index: 5;
  top: calc(var(--w) / 23); left: 50%; transform: translateX(-50%);
  width: 30%; height: calc(var(--w) / 11.7); border-radius: 99px;
  background: #0B0B0D;
}

/* barra de status */
.st-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6em 1em .1em;
  font-size: .9em; font-weight: 700; color: var(--white);
}
.st-bar span:last-child { display: inline-flex; gap: .18em; align-items: flex-end; }
.st-bar i { display: block; width: .2em; background: var(--white); border-radius: 1px; }

/* cabeçalho do app */
.ap-head {
  display: flex; align-items: center; gap: .43em;
  padding: .5em .65em;
  background: var(--navy-3);
}
.ap-av { width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--blue); display: grid; place-items: center; color: var(--white); flex: 0 0 auto; }
.ap-hi { line-height: 1.1; flex: 1 1 auto; min-width: 0; }
.ap-hi small { display: block; font-size: .72em; color: #A9B6DA; }
.ap-hi b { font-size: 1em; color: var(--white); }
.ap-ic { display: flex; gap: .32em; align-items: center; color: #7FA0FF; }
.ap-ic .box { border: 1.2px solid #7FA0FF; border-radius: 3px; padding: .1em; color: var(--white); }

.ap-body { flex: 1 1 auto; overflow: hidden; padding: .55em .6em; display: flex; flex-direction: column; gap: .45em; }
.ap-title { font-size: 1.17em; font-weight: 800; letter-spacing: -.02em; color: var(--white); margin: .1em 0 .12em; }

/* cartões */
.ap-card { background: var(--navy-2); border-radius: .45em; padding: .52em .6em; }
.ap-card--pend { background: #16204A; }
.ap-card h4 { margin: 0 0 .3em; font-size: .91em; font-weight: 700; color: #DCE4FA; display: flex; align-items: center; gap: .3em; }
.ap-card h4 svg { flex: 0 0 auto; }
.ap-row { display: flex; align-items: center; gap: .43em; }
.ap-row > div { flex: 1 1 auto; min-width: 0; }
.ap-name { display: block; font-weight: 700; color: #E8ECF8; font-size: .96em; }
.ap-sub { display: block; color: #8FA0CC; font-size: .88em; }
.ap-link { text-align: center; color: #5C8BFF; font-weight: 700; font-size: .88em; margin-top: .32em; }

/* grade de módulos */
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .38em; }
.ap-tile { background: var(--navy-2); border-radius: .45em; padding: .54em .27em .45em; text-align: center; }
.ap-tile span {
  display: grid; place-items: center; margin: 0 auto .32em;
  width: 1.67em; height: 1.67em; border-radius: 50%;
  background: var(--blue); color: var(--white);
}
.ap-tile b { font-size: .79em; font-weight: 700; color: #DCE4FA; }

/* linhas */
.ap-list { display: grid; gap: .38em; }
.ap-item {
  display: flex; align-items: center; gap: .48em;
  background: var(--navy-2); border-radius: .45em; padding: .48em .54em;
}
.ap-item .tile {
  flex: 0 0 auto; width: 1.6em; height: 1.6em; border-radius: .34em;
  display: grid; place-items: center; background: var(--blue); color: var(--white);
  box-shadow: none;
}
.ap-item .tile--round { border-radius: 50%; }
.ap-item .tile--ghost { background: transparent; color: var(--blue-lit); }
.ap-item .chev { flex: 0 0 auto; color: #6C7CA8; }
.ap-item b { display: block; font-size: .91em; color: #DCE4FA; }
.ap-item small { display: block; font-size: .79em; color: #8FA0CC; }

.ap-search {
  display: flex; align-items: center; gap: .38em;
  background: var(--navy-2); border: 1px solid #2A3766; border-radius: .45em;
  padding: .43em .54em; color: #7E8EBC; font-size: .88em;
}

/* detalhe do agendamento */
.ap-badge {
  display: inline-block; background: var(--amber); color: #3A2A05;
  font-weight: 800; font-size: .79em; border-radius: .22em;
  padding: .12em .4em; margin-top: .26em;
}
.ap-kv { display: grid; gap: .24em; margin-top: .48em; }
.ap-kv div { display: flex; justify-content: space-between; gap: .5em; font-size: .88em; }
.ap-kv span { color: #8FA0CC; }
.ap-kv b { color: var(--white); font-weight: 700; }
.ap-btns { display: flex; gap: .32em; margin-top: .54em; }
.ap-btns b {
  flex: 1 1 0; text-align: center; font-size: .83em; font-weight: 700;
  border-radius: .3em; padding: .34em .1em;
}
.ap-ok { background: var(--green); color: #06240F; }
.ap-no { color: #FF8A8A; border: 1px solid var(--red); }
.ap-arch { color: #B7C2E4; border: 1px solid #46538A; }

.ap-fab {
  position: absolute; right: .65em; bottom: 3em;
  width: 2.05em; height: 2.05em; border-radius: 50%;
  background: var(--blue); color: var(--white);
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
}

/* barra inferior */
.ap-tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--navy-3);
  padding: .36em .2em .54em;
  text-align: center;
}
.ap-tabbar div { color: #96A5CE; }
.ap-tabbar div b { display: block; font-size: .69em; letter-spacing: .04em; margin-top: .1em; }
.ap-tabbar div.on { color: var(--white); }

/* página pública */
.pb-head { text-align: center; font-size: 1.17em; font-weight: 800; color: var(--white); padding: .54em 0 .38em; }
.pb-hero {
  border-radius: .48em; padding: .75em .6em;
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(31,91,255,.42), transparent 62%),
    linear-gradient(160deg, #24305C, #101736);
  text-align: center;
}
.pb-hero h4 { margin: 0 0 .2em; font-size: 1.2em; font-weight: 800; color: var(--white); letter-spacing: -.02em; }
.pb-hero p { margin: 0 0 .48em; font-size: .79em; color: #CBD6F2; max-width: none; }
.pb-cta { display: inline-block; background: #F0B429; color: #33240A; font-weight: 800; font-size: .88em; border-radius: .27em; padding: .32em .7em; }
.pb-box { background: var(--navy-2); border-radius: .48em; padding: .54em; text-align: center; }
.pb-box h5 { margin: 0 0 .38em; font-size: .9em; color: #C3CEEC; font-weight: 700; }
.pb-input { border: 1px solid #2A3766; border-radius: .3em; padding: .32em .43em; font-size: .83em; color: #8391BC; text-align: left; }
.pb-out { margin-top: .32em; border: 1px solid var(--blue); border-radius: .3em; padding: .3em; font-size: .88em; color: #6C97FF; font-weight: 700; }
.pb-step { display: flex; align-items: center; gap: .38em; font-size: .91em; font-weight: 700; color: #DCE4FA; margin-top: .1em; }
.pb-step i {
  width: 1.08em; height: 1.08em; border-radius: 50%; background: var(--blue); color: var(--white);
  display: grid; place-items: center; font-style: normal; font-size: .82em; font-weight: 800;
}
.pb-step--done i { background: #2A3766; }
.pb-pick { display: flex; flex-wrap: wrap; gap: .3em; }
.pb-pick span {
  border: 1px solid #2A3766; border-radius: .3em;
  padding: .26em .45em; font-size: .83em; color: #A9B6DA; font-weight: 700;
}
.pb-pick span.on { background: var(--blue); border-color: var(--blue-lit); color: var(--white); }

/* aviso de exemplo, abaixo de cada aparelho */
.exnote {
  margin: 1.1rem auto 0; text-align: center;
  font-size: .9rem; color: var(--txt-3); max-width: 24rem;
}
.hero__show .exnote { margin-top: 3.2rem; }

/* ---------- ajustes de largura ---------- */
/* --w alimenta um calc() de font-size na tela, então nunca pode conter
   porcentagem: em font-size, 100% quer dizer o corpo do texto do pai. */
@media (max-width: 600px) {
  .feat__show .phone { --w: min(20.5rem, 84vw); }
}
@media (max-width: 520px) {
  .acts { gap: .65rem; }
  .acts .btn { width: 100%; }
  .chips li { padding: .38rem .8rem; font-size: .88rem; }
}
@media (min-width: 920px) {
  .feat__show .phone { --w: 20rem; }
}