@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --marinho: #101830;
  --marinho-2: #1e2b4b;
  --marinho-3: #293857;
  --dourado: #e5c58b;
  --dourado-claro: #f4dfb4;
  --dourado-escuro: #765321;
  --tinta: #142038;
  --texto: #4c5669;
  --linha: #e3dfd5;
  --fundo: #fffdf9;
  --fundo-2: #f5f2ea;
  --largura: 1240px;
  --raio: 18px;
  --fonte: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --editorial: "Instrument Serif", Georgia, serif;
  --texto-escuro: #cbd2e2;
  --texto-suave: #aab6cd;
}

.pular {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
  padding: 10px 16px;
  border-radius: 6px;
  background: #fff;
  transform: translateY(-150%);
}

.pular:focus { transform: none; }
.caixa { padding-inline: clamp(20px, 4vw, 46px); }
.secao { padding-block: clamp(64px, 8vw, 116px); }
.titulo, .chamada h2 {
  font: 400 clamp(42px, 5.5vw, 66px)/.99 var(--editorial);
  letter-spacing: -.028em;
  max-width: 22ch;
}
.sobretitulo { font-size: 11px; letter-spacing: .17em; }
.subtitulo { line-height: 1.65; }
.botao {
  min-height: 46px;
  border-radius: 8px;
  padding: 12px 19px;
  font-size: 14px;
  font-weight: 700;
}
.botao.ouro {
  background: var(--dourado);
  border-color: var(--dourado);
  color: #191b24;
}
.botao.marinho:hover { background: var(--marinho-2); }
.botao.contorno { border-color: #7b859a; }

/* Cabeçalho e promoção */
.faixa {
  background: #e8cca0;
  color: #342819;
  white-space: normal;
}
.faixa .caixa {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-block: 7px;
  font-size: 12px;
  text-align: center;
}
.faixa a { color: inherit; text-underline-offset: 3px; }
.topo {
  background: #07123d;
  border-bottom-color: #ffffff24;
}
.topo.rolado { box-shadow: 0 7px 22px #0a112333; }
.topo .caixa { height: 74px; }
.topo-logo { display: inline-flex; }
.topo-nav { gap: clamp(14px, 2.4vw, 29px); }
.topo-nav a { font-size: 14px; }
.topo-nav a[aria-current] { color: #fff; }
.topo-nav .botao.ouro, .topo-nav .botao.ouro:hover {
  min-height: 40px;
  color: #191b24;
  padding: 8px 15px;
  font-size: 13px;
}

/* Abertura e prévia do produto */
.abertura, .capa {
  color: var(--texto-escuro);
  background: radial-gradient(ellipse at 87% 28%, #2a365a 0%, transparent 58%), #111930;
}
.abertura::before, .capa.sobre::before { content: none; }
.abertura .caixa {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 5vw, 72px);
  min-height: 545px;
  padding-top: clamp(57px, 6vw, 80px);
  padding-bottom: clamp(57px, 6vw, 80px);
}
.abertura .sobretitulo, .capa .sobretitulo { color: var(--dourado); }
.capa .sobretitulo { font-size: 11px; margin-top: 0; }
.abertura h1, .capa h1 {
  color: #fffdf9;
  font: 400 clamp(54px, 6.4vw, 88px)/.97 var(--editorial);
  letter-spacing: -.025em;
  text-wrap: initial;
}
.abertura h1 em, .capa.sobre h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--dourado);
}
.abertura .lide { max-width: 44ch; font-size: 17px; line-height: 1.7; }
.abertura .acoes { margin-top: 27px; }
.selos { margin-top: 26px; gap: 6px 18px; color: var(--texto-escuro); font-size: 12.5px; }
.selos li::before { width: 5px; height: 5px; }
.carrossel {
  padding: clamp(11px, 1.45vw, 20px);
  border: 1px solid #465471;
  border-radius: 18px;
  background: #1b2540;
  box-shadow: 0 27px 54px #080c195e;
}
.demo-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 2px 12px;
  color: #fffdf9;
  font-size: 13px;
  font-weight: 700;
}
.demo-titulo small { color: var(--texto-suave); font-size: 11px; font-weight: 400; }
.tela { box-shadow: none; border-radius: 10px; }
.tela-barra { height: 24px; }
.tela-barra i { height: 7px; width: 7px; }
.tela-corpo { min-height: 270px; }
.tela-menu { color: var(--texto-escuro); }
.tela-menu li.ativo { color: var(--dourado-claro); }
.tela-conteudo { background: #f4f5f8; }
.tela-conteudo h4 { font-size: 15px; }
.tela-lista i { font-style: normal; }
.carrossel-legenda { text-align: left; min-height: 43px; margin: 12px 2px 0; }
.carrossel-legenda b { font-size: 13px; }
.carrossel-legenda span { color: var(--texto-suave); font-size: 12px; line-height: 1.4; display: block; }
.carrossel-controles { justify-content: space-between; margin-top: 8px; }
.carrossel-seta { border-color: #76829a; width: 32px; height: 32px; }
.carrossel-pontos { gap: 0; align-items: center; }
.carrossel-pontos button {
  width: 23px;
  height: 26px;
  background: transparent;
  display: grid;
  place-items: center;
}
.carrossel-pontos button::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 5px;
  background: #8d99b1;
}
.carrossel-pontos button[aria-current="true"] { width: 29px; background: transparent; }
.carrossel-pontos button[aria-current="true"]::after { width: 18px; background: var(--dourado); }

/* Recursos, contratação e planos */
#resolve .grade-3 { gap: 0 24px; }
#resolve .cartao {
  border: 0;
  border-top: 1px solid var(--linha);
  border-radius: 0;
  background: transparent;
  padding: 23px 0 30px;
}
.cartao h3 { font-size: 19px; letter-spacing: -.025em; }
.cartao .antes { color: #616b7c; }
.icone { width: 42px; height: 42px; background: #efe5d1; color: #745325; }
.escura { color: var(--texto-escuro); }
.escura .icone { background: #3a4051; color: var(--dourado); }
.escura .cartao { border-color: #44516a; }
#recursos .cartao { background: var(--fundo); }
.plano { padding: 25px 19px; }
.plano h3 { font: 400 38px/.96 var(--editorial); }
.plano .para { color: #576173; }
.plano.ultra .para { color: var(--texto-escuro); }
.plano.destaque { border: 1px solid #a77c40; box-shadow: 0 12px 28px #18213a12; }
.preco-grande b { font-size: clamp(30px, 3.2vw, 40px); }
.selo-oferta { left: 19px; }
.perguntas { max-width: 880px; }
.perguntas summary { padding-block: 22px; }
.chamada { background: radial-gradient(ellipse at 50% 0%, #27365a, transparent 69%), var(--marinho); }
.chamada, .rodape { color: var(--texto-escuro); }
.chamada h2 { max-width: 21ch; }
.rodape { background: #0a1123; }
.rodape .linha { color: var(--texto-suave); }
.tabela-rolagem:focus-visible, .tabela-wrap:focus-visible {
  outline: 2px solid var(--dourado-escuro);
  outline-offset: 4px;
}

.capa, .capa.sobre { padding-block: clamp(66px, 9vw, 114px); }
.capa h1 { max-width: 17ch; }
.capa p:not(.sobretitulo) { max-width: 56ch; font-size: 17px; line-height: 1.7; }
.links-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 19px;
  margin-top: 30px;
}
.links-pagina a { color: var(--dourado-claro); text-underline-offset: 4px; font-size: 14px; }
.passos li::before { background: #efe5d1; color: #62431f; border-radius: 10px; }
.passos li::after { width: 1px; }
.numeros b, .letra .grande { font: 400 48px/1 var(--editorial); }
.numeros span { color: var(--texto-escuro); }
.citacao { background: #f1eadc; color: var(--tinta); }
.citacao cite { color: #745325; }
.citacao::before { color: #94662a; }

/* Movimento de entrada e resposta dos controles */
@media (prefers-reduced-motion: no-preference) {
  .topo { transition: box-shadow .23s ease; }
  .entrada-visivel:not(:focus-within) {
    animation: entrada .52s cubic-bezier(.2, .65, .25, 1) backwards;
  }
  .grade-2 > .entrada-visivel:nth-child(even),
  .grade-3 > .entrada-visivel:nth-child(3n + 2),
  .planos > .entrada-visivel:nth-child(even) { animation-delay: .07s; }
  .grade-3 > .entrada-visivel:nth-child(3n) { animation-delay: .13s; }

  @keyframes entrada {
    from { opacity: .25; transform: translateY(17px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .cartao, .plano, .letra { transition: border-color .23s ease, translate .23s ease; }
  .menu-botao span { transition: transform .23s ease, opacity .16s ease; }
}

.menu-botao[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cartao:hover, .plano:hover, .letra:hover { translate: 0 -3px; border-color: #b6945c; }
}

@media (min-width: 901px) {
  .topo-nav > a:not(.botao) {
    background: linear-gradient(var(--dourado), var(--dourado)) left bottom / 0 1px no-repeat;
    padding-block: 4px;
  }
  .topo-nav > a:not(.botao):is(:hover, :focus-visible, [aria-current]) { background-size: 100% 1px; }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .topo-nav > a:not(.botao) { transition: background-size .22s ease, color .22s ease; }
}

@media (max-width: 1020px) {
  .abertura .caixa { grid-template-columns: 1fr; min-height: 0; }
  .abertura h1 { max-width: 14ch; }
  .carrossel { width: min(100%, 715px); }
}

@media (max-width: 900px) {
  .topo .caixa { height: 62px; }
  .menu-botao { display: block; }
  .topo-nav {
    display: flex;
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    max-height: 70dvh;
    overflow-y: auto;
    background: #07123d;
    border-bottom: 1px solid #ffffff24;
    box-shadow: 0 14px 22px #0a112333;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
  }
  .topo-nav.aberto {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }
  .topo-nav a { padding: 13px 0; border-bottom: 1px solid #ffffff24; }
  .topo-nav .botao.ouro { margin-top: 16px; }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .topo-nav {
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .topo-nav.aberto { transition-delay: 0s; }
}

@media (max-width: 760px) {
  .abertura .caixa, .capa, .capa.sobre { padding-block: 52px; }
  .abertura h1, .capa h1 { font-size: clamp(48px, 11vw, 64px); }
  .abertura .acoes, .chamada .acoes { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .carrossel { border-radius: 12px; }
  .tela-corpo { min-height: 242px; }
  .tela-conteudo { padding: 10px; }
  .tela-cartoes div { padding: 7px 5px; }
  .tela-cartoes small { font-size: 9px; line-height: 1.2; }
  .tela-cartoes b { font-size: 14px; }
  .carrossel-legenda { min-height: 54px; }
  .numeros b { font-size: 38px; }
}