/* =========================================================================
   Orca App — folha de estilo do site
   Estrutura:
   1. Base e tipografia
   2. Acessibilidade (skip link, foco)
   3. Cabeçalho e navegação (responsivo)
   4. Botões e links utilitários
   5. Slots de imagem
   6. Ajustes responsivos gerais
   7. Impressão (gerador de orçamento)
   ========================================================================= */

/* --- 0. Tipografia ---------------------------------------------------------
   Plus Jakarta Sans hospedada aqui mesmo, em arquivo variável: um só download
   cobre os pesos 200 a 800. Sai mais rápido que o Google Fonts (sem DNS, sem
   handshake, sem folha de estilo bloqueando o primeiro desenho da página) e o
   IP de quem visita não é entregue a terceiros. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1. Base -------------------------------------------------------------- */
:root {
  /* marca */
  --azul: #2E7CF6;
  --azul-escuro: #1B5FCC;
  --azul-claro: #EDF3FD;
  --verde: #4FC79A;
  --verde-escuro: #3FB489;
  --verde-claro: #7EE0B8;

  /* texto e superfícies */
  --superficie: #FFFFFF;
  --grafite: #1F2933;
  --texto: #4A5568;
  --texto-suave: #647082;   /* 4,5:1 até sobre --azul-claro; era #8A94A6, com 2,7:1 */
  --borda: #E2E8F0;
  --fundo-suave: #F7F9FC;   /* cinza de fundo único: substitui #F8FAFD e #F1F5F9 */

  /* estado — versões escuras, próprias para texto e ícone sobre fundo claro */
  --sucesso: #15803D;
  --atencao: #B45309;
  --erro: #C2261B;

  /* rodapé, em fundo escuro: aqui o cinza precisa clarear, não escurecer */
  --rodape-fundo: #3A3D42;
  --rodape-texto: #C9CED6;
  --rodape-suave: #A7B0BC;
  --rodape-destaque: #7EE0B8;

  /* aplicativos de terceiros */
  --whatsapp: #25D366;

  /* escala tipográfica: um valor por nível, do celular ao desktop */
  --fs-h1: clamp(34px, 4.2vw, 52px);
  --fs-h2: clamp(26px, 3.1vw, 36px);
  --fs-h3: clamp(20px, 1.9vw, 24px);
  --fs-h4: clamp(17px, 1.4vw, 19px);
  --fs-corpo: clamp(16px, 1.2vw, 17px);
  --fs-small: clamp(14px, 1vw, 15px);

  --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

body.bg-suave { background: var(--fundo-suave); }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-escuro); text-decoration: underline; }

img { max-width: 100%; }

input, textarea, select, button { font-family: inherit; }

/* deixa campos e fieldsets encolherem dentro de grades estreitas */
input, textarea, select { max-width: 100%; min-width: 0; }
fieldset { min-inline-size: 0; }

summary::-webkit-details-marker { display: none; }

table { border-collapse: collapse; }

/* --- 2. Acessibilidade ---------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 124, 246, .4);
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  color: var(--grafite);
  font-weight: 600;
  padding: 12px 20px;
  border: 1px solid var(--borda);
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  text-decoration: none;
}

/* --- 3. Cabeçalho --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #FFFFFF;
  border-bottom: 1px solid var(--borda);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__brand { display: flex; align-items: center; flex-shrink: 0; }
.site-header__brand img { display: block; height: 48px; width: auto; }

.site-header__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: 1;
}

.site-nav {
  font-size: 15px;
  min-width: 0;
}
.site-nav > ul {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li { position: relative; }
.site-nav a {
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
}
.site-nav a:hover { color: var(--azul); text-decoration: none; }
.site-nav a.is-active { color: var(--grafite); font-weight: 600; }

/* --- 3b. Submenu (dropdown de Modelos) ------------------------------------ */
.tem-submenu { display: flex; align-items: center; gap: 2px; }

.submenu-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  border-radius: 6px;
}
.submenu-botao svg { transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.tem-submenu:hover .submenu-botao,
.tem-submenu.aberto .submenu-botao { color: var(--azul); }
.tem-submenu.aberto .submenu-botao svg,
.tem-submenu:hover .submenu-botao svg { transform: rotate(180deg); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.submenu {
  background: #FFFFFF;
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(31, 41, 51, .12);
  padding: 8px;
}
.submenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.submenu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  padding: 9px 12px;
  border-radius: 8px;
  white-space: normal;
  transition: background .15s cubic-bezier(.16, 1, .3, 1);
}
.submenu a:hover, .submenu a:focus-visible { background: var(--azul-claro); text-decoration: none; }
.submenu__nome { font-size: 15px; font-weight: 600; color: var(--grafite); }
.submenu a:hover .submenu__nome { color: var(--azul); }
.submenu__nota { font-size: 13px; color: var(--texto-suave); }

/* o primeiro item — "Todos os modelos" — separado do resto */
.submenu li:first-child a { border-bottom: 1px solid var(--borda); border-radius: 8px 8px 0 0; margin-bottom: 4px; }

@media (min-width: 960px) {
  .submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: -8px;
    z-index: 70;
    width: 460px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s cubic-bezier(.16, 1, .3, 1),
                transform .18s cubic-bezier(.16, 1, .3, 1),
                visibility .18s;
  }
  .submenu ul { grid-template-columns: 1fr 1fr; }
  .submenu li:first-child { grid-column: 1 / -1; }

  .tem-submenu:hover .submenu,
  .tem-submenu:focus-within .submenu,
  .tem-submenu.aberto .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* faixa invisível que evita o menu fechar ao mover o mouse até ele */
  .tem-submenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
  }
}

@media (max-width: 959px) {
  /* no celular vira sanfona dentro da gaveta */
  .tem-submenu { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--borda); }
  .tem-submenu > a { border-bottom: none !important; flex: 1; }
  .submenu-botao { width: 48px; min-height: 48px; }
  .submenu {
    display: none;
    flex-basis: 100%;
    box-shadow: none;
    border-radius: 8px;
    margin: 0 0 12px;
    padding: 6px;
    background: var(--fundo-suave);
  }
  .tem-submenu.aberto .submenu { display: block; }
  .submenu a { min-height: 44px; justify-content: center; }
  .submenu li:first-child a { border-bottom: 1px solid var(--borda); }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.site-header__login {
  color: var(--texto);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__login:hover { color: var(--azul); text-decoration: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background .2s cubic-bezier(.16, 1, .3, 1);
}
.btn--verde { background: var(--verde); color: #FFFFFF; }
.btn--verde:hover { background: var(--verde-escuro); color: #FFFFFF; text-decoration: none; }

.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.site-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--grafite);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), opacity .2s;
}
.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 959px) {
  .site-header__inner { flex-wrap: wrap; gap: 12px; }
  .site-header__burger { display: flex; }
  .site-header__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 16px;
    border-top: 1px solid var(--borda);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .site-header__menu.is-open { display: flex; }
  .site-nav > ul { flex-direction: column; gap: 0; }
  .site-nav a {
    min-height: 48px;
    font-size: 16px;
    border-bottom: 1px solid var(--borda);
  }
  .site-nav .submenu a { min-height: 44px; border-bottom: none; }
  .site-nav .submenu li:first-child a { border-bottom: 1px solid var(--borda); }
  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
  }
  .site-header__login { min-height: 48px; font-size: 16px; }
  .site-header__actions .btn { height: 46px; font-size: 15px; }
}

/* --- 4. Slots de imagem --------------------------------------------------- */
.slot-img {
  display: block;
  width: 100%;
  height: 100%;
}

.slot-ph {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  background: var(--azul-claro);
  border: 1px dashed #C3D6F5;
  color: #6B7A99;
  font-size: 14px;
  line-height: 1.5;
}
.slot-ph span { max-width: 34ch; }

/* Capturas reais usadas nos blocos da página de funcionalidades. */
.funcionalidade-midia {
  width: 100%;
  max-width: 620px;
  margin: 0;
}

.funcionalidade-midia > a,
.funcionalidade-midia__principal,
.funcionalidade-midia__detalhe {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #D8E1EC;
  border-radius: 16px;
  background: #F4F7FA;
  box-shadow: 0 16px 38px rgba(31, 41, 51, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.funcionalidade-midia > a:hover,
.funcionalidade-midia__principal:hover,
.funcionalidade-midia__detalhe:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(31, 41, 51, .16);
}

.funcionalidade-midia picture,
.funcionalidade-midia img {
  display: block;
  width: 100%;
  height: auto;
}

.funcionalidade-midia--celular { max-width: 310px; }
.funcionalidade-midia--desktop { max-width: 620px; }

.funcionalidade-midia--galeria {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 14px;
  align-items: end;
  max-width: 650px;
}

.funcionalidade-midia--galeria figcaption { grid-column: 1 / -1; }

.funcionalidade-midia__ampliar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(31, 41, 51, .86);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
}

.funcionalidade-midia figcaption {
  margin-top: 12px;
  color: #6B7788;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.funcionalidade-midia a:focus-visible {
  outline: 3px solid rgba(46, 124, 246, .38);
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .funcionalidade-midia--desktop { max-width: 390px; }
  .funcionalidade-midia--galeria {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 410px;
  }
  .funcionalidade-midia__ampliar { display: none; }
}

.slot-selo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  background: #FFFFFF;
  border-radius: 8px;
  color: var(--grafite);
  line-height: 1.2;
}
.slot-selo strong { font-size: 17px; font-weight: 800; color: var(--azul); }
.slot-selo span { font-size: 12px; color: var(--texto-suave); }

/* --- 4b. Chips de filtro e de ciclo ---------------------------------------- */
.chip-ativo {
  border-color: var(--azul) !important;
  background: var(--azul-claro) !important;
  color: var(--azul) !important;
}
.chip-inativo {
  border-color: var(--borda) !important;
  background: transparent !important;
  color: var(--texto) !important;
}

/* --- 5. Ajustes responsivos gerais ---------------------------------------- */
@media (max-width: 720px) {
  /* Os títulos das páginas ainda trazem font-size no atributo style, herdado da
     construção original; enquanto essa migração para classes não termina, só o
     !important vence o inline. Os valores são os do design system: 34/26/20. */
  h1 { font-size: 34px !important; line-height: 1.2 !important; }
  h2 { font-size: 26px !important; line-height: 1.25 !important; }
  h3 { font-size: 20px !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }
}

/* tabelas largas rolam dentro do próprio bloco em vez de esticar a página */
.tabela-rolavel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
.tabela-rolavel > table { min-width: 640px; }

/* --- 6. Avaliações do Google e carrossel de depoimentos ------------------ */
.avaliacoes-google {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

.avaliacoes-google__resumo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 300px;
  padding: 32px;
  border-radius: 18px;
  background: linear-gradient(145deg, #1F6FE5, #2E7CF6);
  box-shadow: 0 16px 38px rgba(46, 124, 246, .2);
  color: #FFFFFF;
}

.avaliacoes-google__marca {
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.avaliacoes-google__nota {
  font-size: 58px;
  line-height: 1;
  letter-spacing: -.05em;
}

.avaliacoes-google__estrelas {
  display: inline-flex;
  gap: 2px;
  color: #D5DAE1;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}

.avaliacoes-google__estrelas--resumo {
  margin-top: 13px;
  color: rgba(255, 255, 255, .4);
  font-size: 21px;
}

.avaliacoes-google__estrela.is-cheia { color: #FBBF24; }
.avaliacoes-google__total {
  margin-top: 12px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
}

.avaliacoes-google__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.avaliacoes-google__link:hover { text-decoration: underline; }

.avaliacoes-google__carrossel,
.avaliacoes-google__janela { min-width: 0; }

.avaliacoes-google__trilha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.avaliacoes-google.is-ready .avaliacoes-google__janela {
  overflow: hidden;
  border-radius: 18px;
}

.avaliacoes-google.is-ready .avaliacoes-google__trilha {
  display: flex;
  gap: 0;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.avaliacoes-google__slide {
  position: relative;
  min-width: 0;
  min-height: 300px;
  margin: 0;
  padding: 34px;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 12px 32px rgba(31, 41, 51, .08);
  display: flex;
  flex-direction: column;
}

.avaliacoes-google.is-ready .avaliacoes-google__slide {
  flex: 0 0 100%;
}

.avaliacoes-google__aspas {
  height: 35px;
  color: #B9D1F8;
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: .8;
}

.avaliacoes-google__texto {
  margin: 16px 0 30px;
  color: #344254;
  font-size: 18px;
  line-height: 1.7;
}

.avaliacoes-google__autor {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
}

.avaliacoes-google__foto,
.avaliacoes-google__avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  flex: 0 0 48px;
}

.avaliacoes-google__foto { object-fit: cover; }
.avaliacoes-google__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EDF3FD;
  color: #2E7CF6;
  font-weight: 800;
}

.avaliacoes-google__identidade {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font-style: normal;
}

.avaliacoes-google__identidade a,
.avaliacoes-google__nome {
  overflow: hidden;
  color: #1F2933;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avaliacoes-google__identidade a:hover { color: #2E7CF6; }

.avaliacoes-google__controles {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.avaliacoes-google__botao {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #D6E0ED;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2E7CF6;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.avaliacoes-google__botao:hover {
  border-color: #2E7CF6;
  background: #2E7CF6;
  color: #FFFFFF;
}
.avaliacoes-google__botao:focus-visible,
.avaliacoes-google__janela:focus-visible {
  outline: 3px solid rgba(46, 124, 246, .35);
  outline-offset: 3px;
}

.avaliacoes-google__posicao {
  min-width: 54px;
  color: #6B7788;
  font-size: 13px;
  text-align: center;
}

.avaliacoes-google__atualizacao {
  margin: 22px 0 0;
  color: #8A94A6;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 760px) {
  .avaliacoes-google { grid-template-columns: 1fr; }
  .avaliacoes-google__resumo {
    min-height: 0;
    align-items: center;
    padding: 28px 22px;
    text-align: center;
  }
  .avaliacoes-google__marca { margin-bottom: 12px; }
  .avaliacoes-google__nota { font-size: 48px; }
  .avaliacoes-google__link { margin-top: 18px; }
  .avaliacoes-google__slide {
    min-height: 320px;
    padding: 28px 24px;
  }
  .avaliacoes-google__texto { font-size: 16px; }
  .avaliacoes-google__controles { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .avaliacoes-google.is-ready .avaliacoes-google__trilha { transition: none; }
}

@media (max-width: 700px) {
  /* Grades de coluna automática viram coluna única em vez de estourar a tela.
     O seletor por atributo pega as que continuam no style; as classes ao lado
     são as grades auto-fit da seção 10. Ao extrair uma grade auto-fit nova para
     classe, acrescente o nome dela nesta lista. */
  [style*="repeat(auto-fit"],
  .o-grade-1, .o-grade-2, .o-grade-3, .o-grade-4, .o-grade-5, .o-grade-7 {
    grid-template-columns: 1fr !important;
  }

  /* faixas de botões (ciclo de cobrança, temas, categorias) quebram em linhas */
  div:has(> [data-loop="ciclos"]),
  div:has(> [data-loop="temas"]),
  div:has(> [data-loop="categorias"]),
  div:has(> [data-action^="ver"]) {
    flex-wrap: wrap;
    max-width: 100%;
  }

  /* gerador: a descrição do item ocupa a linha inteira */
  [data-loop="itens"] { grid-template-columns: 1fr 1fr 1fr auto !important; }
  [data-loop="itens"] > :first-child { grid-column: 1 / -1; }
  [style*="64px 68px 96px 36px"][style*="uppercase"] { display: none !important; }
}

/* --- 7. Impressão --------------------------------------------------------- */
@media print {
  .site-header,
  .skip-link,
  footer,
  .nao-imprimir,
  .gerador-form,
  a[href^="https://wa.me"] { display: none !important; }

  body { background: #FFFFFF !important; }

  .gerador-preview,
  .gerador-preview * { visibility: visible; }

  .gerador-preview {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* --- 8. Rodapé ------------------------------------------------------------
   Estava inteiro em atributos style, com o mesmo trio de declarações repetido
   em cada um dos 28 links. Como o rodapé é um include único, trocá-lo por
   classes tirou a repetição de todas as páginas de uma vez. */
.rodape {
  background: var(--rodape-fundo);
  color: var(--rodape-texto);
  padding: 56px 24px 28px;
}

.rodape__grade {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px;
}

.rodape__coluna {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rodape__coluna--marca {
  gap: 16px;
  align-items: flex-start;
}

.rodape__titulo {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rodape__link {
  color: var(--rodape-texto);
  font-size: 14px;
  text-decoration: none;
}
.rodape__link:hover,
.rodape__link:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}

.rodape__redes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rodape__rede {
  color: var(--rodape-destaque);
  font-size: 14px;
  text-decoration: none;
}
.rodape__rede:hover { text-decoration: underline; }

.rodape__logo { display: block; height: 46px; width: auto; }

.rodape__lojas { display: flex; flex-direction: column; gap: 8px; }
.rodape__nota { font-size: 13px; color: var(--rodape-suave); }
.rodape__lojas-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.rodape__loja {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  text-decoration: none;
}
.rodape__loja:hover { border-color: rgba(255, 255, 255, .5); color: #FFFFFF; }

.rodape__selo { display: block; width: 110px; height: auto; border-radius: 8px; }

.rodape__endereco {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--rodape-texto);
}
.rodape__telefone { color: var(--rodape-destaque); }

.rodape__creditos {
  max-width: 1140px;
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: var(--rodape-suave);
}

/* botão flutuante do WhatsApp */
.whatsapp-flutuante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(31, 41, 51, .24);
  text-decoration: none;
}
.whatsapp-flutuante:hover { color: #FFFFFF; }

@media print {
  .rodape,
  .whatsapp-flutuante { display: none; }
}


/* Os seletores das seções 9 e 10 vêm escritos duas vezes de propósito
   (.o-cartao-1.o-cartao-1). Essas classes substituíram atributos style, que
   venciam qualquer regra comum do CSS; repetir o nome devolve essa precedência
   sem usar !important. Um exemplo real do que acontece sem isso: a regra
   .tabela-rolavel > table define min-width 640px, e as tabelas que traziam
   min-width 600px no atributo style passariam a medir 640px. */

/* --- 9. Utilitários --------------------------------------------------------
   Cada classe abaixo é uma combinação que já se repetia dezenas de vezes no
   HTML, agora escrita uma vez só. As declarações são idênticas às que
   estavam no atributo style, então nada muda na tela — muda o tamanho do
   HTML e o lugar onde a decisão de estilo passa a morar. */
.u-texto.u-texto { margin:0; font-size:16px; line-height:1.75; color:#4A5568; }
.u-texto-15.u-texto-15 { margin:0; font-size:15px; line-height:1.6; color:#4A5568; }
.u-td.u-td { padding:12px 16px; color:#4A5568; border-bottom:1px solid #E2E8F0; line-height:1.5; }
.u-th.u-th { text-align:left; padding:12px 22px; font-weight:500; color:#1F2933; border-bottom:1px solid #E2E8F0; line-height:1.5; }
.u-resposta.u-resposta { margin:0; padding:0 22px 20px; font-size:16px; line-height:1.65; color:#4A5568; max-width:74ch; }
.u-linha.u-linha { border-bottom:1px solid #E2E8F0; }
.u-check.u-check { color:#15803D; font-weight:700; flex-shrink:0; }
.u-rotulo.u-rotulo { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#647082; font-weight:700; }
.u-titulo-16.u-titulo-16 { font-size:16px; font-weight:600; color:#1F2933; }
.u-titulo-17.u-titulo-17 { margin:0; font-size:17px; font-weight:600; color:#1F2933; }
.u-titulo-18.u-titulo-18 { margin:0; font-size:18px; font-weight:600; color:#1F2933; }
.u-forte.u-forte { font-weight:600; color:#1F2933; }
.u-largura.u-largura { max-width:1140px; margin:0 auto; }
.u-secao-branca { background:#FFFFFF; padding:80px 24px; }


/* --- 10. Blocos extraídos do HTML -----------------------------------------
   Cada classe abaixo era uma combinação de declarações repetida quatro vezes
   ou mais dentro do atributo style das páginas. As declarações são idênticas
   às que estavam lá, com as cores já vindo dos tokens do :root — o que muda é
   que a decisão de estilo passou a ter um lugar só.

   Os nomes dizem o papel do bloco (cartao, secao, celula, titulo…) e o número
   distingue as variações daquele papel. É uma extração mecânica, feita para
   tirar a repetição do HTML; consolidar variações parecidas em menos classes
   é o próximo passo, e agora dá para fazer isso editando este arquivo.
   ------------------------------------------------------------------------- */

/* bloco */
.o-bloco-1.o-bloco-1 { margin:0; }
.o-bloco-10.o-bloco-10 { margin:12px 0 0; font-size:14px; color:var(--texto-suave); }
.o-bloco-11.o-bloco-11 { width:100%; border-collapse:collapse; font-size:15px; min-width:600px; }
.o-bloco-12.o-bloco-12 { color:var(--texto-suave); font-weight:700; flex-shrink:0; }
.o-bloco-14.o-bloco-14 { margin:36px 0 0; font-size:14px; color:var(--texto-suave); text-align:center; }
.o-bloco-15.o-bloco-15 { color:var(--erro); font-weight:700; flex-shrink:0; }
.o-bloco-16.o-bloco-16 { font-size:12px; letter-spacing:.06em; }
.o-bloco-17.o-bloco-17 { width:100%; border-collapse:collapse; font-size:12px; }
.o-bloco-18.o-bloco-18 { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-suave); margin-bottom:12px; }
.o-bloco-2.o-bloco-2 { color:var(--azul); font-size:15px; flex-shrink:0; }
.o-bloco-20.o-bloco-20 { display:block; font-size:14px; color:var(--texto); margin-top:2px; }
.o-bloco-21.o-bloco-21 { margin:32px 0 0; font-size:14px; color:var(--texto-suave); text-align:center; }
.o-bloco-22.o-bloco-22 { padding-top:96px; }
.o-bloco-23.o-bloco-23 { font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--azul); }
.o-bloco-25.o-bloco-25 { margin:24px 0 0; font-size:15px; color:var(--texto); text-align:center; }
.o-bloco-26.o-bloco-26 { font-family:'JetBrains Mono',monospace; font-size:14px; }
.o-bloco-27.o-bloco-27 { margin:0 0 20px; font-size:15px; color:var(--texto-suave); }
.o-bloco-28.o-bloco-28 { background:var(--superficie); padding:48px 24px 56px; }
.o-bloco-29.o-bloco-29 { padding-top:48px; }
.o-bloco-30.o-bloco-30 { margin:4px 0 0; padding-left:22px; }
.o-bloco-31.o-bloco-31 { font-size:15px; }
.o-bloco-33.o-bloco-33 { display:block; width:100%; height:auto; }
.o-bloco-5.o-bloco-5 { background:var(--superficie); padding:48px 24px 72px; }
.o-bloco-6.o-bloco-6 { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--texto-suave); }
.o-bloco-7.o-bloco-7 { color:var(--atencao); font-weight:700; flex-shrink:0; }
.o-bloco-8.o-bloco-8 { margin:0; font-size:14px; color:var(--texto-suave); }
.o-bloco-9.o-bloco-9 { width:100%; border-collapse:collapse; font-size:15px; min-width:640px; }

/* cartao */
.o-cartao-1.o-cartao-1 { border:1px solid var(--borda); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:4px; text-decoration:none; }
.o-cartao-10.o-cartao-10 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
.o-cartao-11.o-cartao-11 { height:44px; padding:0 24px; border-radius:8px; border:1.5px solid var(--azul); color:var(--azul); font-size:15px; font-weight:600; display:inline-flex; align-items:center; text-decoration:none; }
.o-cartao-12.o-cartao-12 { height:44px; padding:0 12px; border:1px solid var(--borda); border-radius:8px; font-size:16px; color:var(--grafite); font-weight:400; }
.o-cartao-13.o-cartao-13 { border:1px solid var(--borda); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.o-cartao-14.o-cartao-14 { height:44px; padding:0 26px; border-radius:8px; border:1.5px solid var(--azul); color:var(--azul); font-size:15px; font-weight:600; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.o-cartao-15.o-cartao-15 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:24px; }
.o-cartao-16.o-cartao-16 { height:44px; padding:0 8px; border:1px solid var(--borda); border-radius:8px; font-size:16px; color:var(--grafite); }
.o-cartao-17.o-cartao-17 { font-size:15px; padding:8px 16px; border-radius:999px; border:1px solid var(--borda); background:var(--superficie); color:var(--texto); }
.o-cartao-18.o-cartao-18 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:16px 20px; font-size:15px; line-height:1.6; color:var(--texto); }
.o-cartao-19.o-cartao-19 { border:1px solid var(--borda); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.o-cartao-2.o-cartao-2 { border:1px solid var(--borda); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:8px; }
.o-cartao-20.o-cartao-20 { border:1px solid var(--borda); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:8px; text-decoration:none; }
.o-cartao-21.o-cartao-21 { border:1px solid var(--borda); border-radius:12px; padding:26px; display:flex; flex-direction:column; gap:10px; }
.o-cartao-22.o-cartao-22 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:6px; }
.o-cartao-23.o-cartao-23 { border:1px solid var(--borda); border-radius:12px; background:var(--superficie); padding:24px; margin:0; display:flex; flex-direction:column; gap:16px; }
.o-cartao-25.o-cartao-25 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.o-cartao-26.o-cartao-26 { border:1px solid var(--borda); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:12px; }
.o-cartao-28.o-cartao-28 { border:1px solid var(--borda); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.o-cartao-29.o-cartao-29 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:4px; }
.o-cartao-3.o-cartao-3 { border:1px solid var(--borda); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:10px; }
.o-cartao-4.o-cartao-4 { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--borda); border-radius:12px; padding:16px 20px; }
.o-cartao-5.o-cartao-5 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:26px; display:flex; flex-direction:column; gap:10px; }
.o-cartao-6.o-cartao-6 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.o-cartao-8.o-cartao-8 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:8px; }
.o-cartao-9.o-cartao-9 { height:44px; padding:0 24px; border-radius:8px; border:1.5px solid var(--azul); color:var(--azul); font-size:15px; font-weight:600; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }

/* celula */
.o-celula-1.o-celula-1 { padding:12px 18px; color:var(--grafite); font-weight:500; background:var(--azul-claro); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-11.o-celula-11 { text-align:left; padding:13px 22px; font-size:13px; font-weight:600; color:var(--texto-suave); border-bottom:1px solid var(--borda); }
.o-celula-12.o-celula-12 { text-align:left; padding:18px 22px; font-size:14px; color:var(--texto-suave); border-bottom:1px solid var(--borda); }
.o-celula-13.o-celula-13 { padding:12px 16px; color:var(--grafite); font-weight:500; background:var(--azul-claro); border-bottom:1px solid var(--borda); }
.o-celula-14.o-celula-14 { padding:13px 14px; color:var(--texto); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-15.o-celula-15 { padding:13px 16px; color:var(--texto); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-16.o-celula-16 { padding:12px 16px; color:var(--grafite); font-weight:500; background:var(--azul-claro); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-17.o-celula-17 { text-align:left; padding:13px 24px; font-weight:500; color:var(--grafite); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-18.o-celula-18 { text-align:left; padding:13px 18px; font-size:13px; font-weight:700; color:var(--grafite); background:var(--azul-claro); border-bottom:2px solid var(--azul); }
.o-celula-19.o-celula-19 { text-align:left; padding:13px 24px; font-weight:600; color:var(--grafite); border-bottom:1px solid var(--borda); line-height:1.5; white-space:nowrap; }
.o-celula-2.o-celula-2 { padding:12px 16px; color:var(--grafite); font-weight:500; border-bottom:1px solid var(--borda); white-space:nowrap; }
.o-celula-20.o-celula-20 { padding:13px 24px; color:var(--texto); border-bottom:1px solid var(--borda); line-height:1.55; }
.o-celula-21.o-celula-21 { text-align:left; padding:12px 22px; font-weight:600; color:var(--grafite); border-bottom:1px solid var(--borda); line-height:1.5; white-space:nowrap; }
.o-celula-22.o-celula-22 { padding:12px 22px; color:var(--texto); border-bottom:1px solid var(--borda); line-height:1.55; }
.o-celula-23.o-celula-23 { text-align:left; padding:13px 22px; font-weight:500; color:var(--grafite); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-24.o-celula-24 { padding:13px 18px; color:var(--grafite); font-weight:500; background:var(--azul-claro); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-25.o-celula-25 { text-align:left; padding:12px 18px; font-size:11px; color:var(--texto-suave); border-bottom:1px solid var(--borda); }
.o-celula-26.o-celula-26 { text-align:left; padding:8px 18px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave); border-bottom:2px solid var(--azul); }
.o-celula-27.o-celula-27 { text-align:right; padding:8px 8px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave); border-bottom:2px solid var(--azul); }
.o-celula-28.o-celula-28 { text-align:right; padding:8px 18px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave); border-bottom:2px solid var(--azul); }
.o-celula-29.o-celula-29 { padding:13px 20px; color:var(--grafite); font-weight:500; background:var(--azul-claro); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-3.o-celula-3 { padding:12px 16px; color:var(--texto); border-bottom:1px solid var(--borda); }
.o-celula-30.o-celula-30 { padding:12px 16px; color:var(--grafite); font-weight:500; border-bottom:1px solid var(--borda); }
.o-celula-33.o-celula-33 { padding:9px 8px; text-align:right; color:var(--texto); border-bottom:1px solid var(--borda); font-variant-numeric:tabular-nums; }
.o-celula-34.o-celula-34 { text-align:left; padding:12px 22px; font-weight:600; color:var(--grafite); border-bottom:1px solid var(--borda); white-space:nowrap; }
.o-celula-35.o-celula-35 { text-align:left; padding:20px 24px; font-size:15px; color:var(--texto-suave); border-bottom:1px solid var(--borda); }
.o-celula-37.o-celula-37 { text-align:left; padding:13px 16px; font-size:13px; font-weight:700; color:var(--grafite); background:var(--azul-claro); border-bottom:2px solid var(--azul); }
.o-celula-38.o-celula-38 { text-align:left; padding:12px 22px; font-weight:600; color:var(--grafite); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-39.o-celula-39 { padding:10px 18px; color:var(--grafite); border-bottom:1px solid var(--fundo-suave); }
.o-celula-4.o-celula-4 { text-align:left; padding:13px 16px; font-size:13px; font-weight:600; color:var(--texto-suave); border-bottom:1px solid var(--borda); }
.o-celula-40.o-celula-40 { padding:10px 10px; text-align:right; color:var(--texto-suave); border-bottom:1px solid var(--fundo-suave); }
.o-celula-41.o-celula-41 { padding:10px 18px; text-align:right; color:var(--grafite); font-weight:600; border-bottom:1px solid var(--fundo-suave); }
.o-celula-42.o-celula-42 { padding:14px 16px; color:var(--texto-suave); border-bottom:1px solid var(--borda); }
.o-celula-44.o-celula-44 { text-align:left; padding:14px 24px; font-size:14px; font-weight:600; color:var(--texto-suave); border-bottom:1px solid var(--borda); }
.o-celula-45.o-celula-45 { text-align:left; padding:14px 16px; font-size:14px; font-weight:600; color:var(--texto-suave); border-bottom:1px solid var(--borda); }
.o-celula-5.o-celula-5 { padding:11px 16px; color:var(--texto); border-bottom:1px solid var(--borda); line-height:1.5; }
.o-celula-7.o-celula-7 { padding:9px 18px; color:var(--grafite); border-bottom:1px solid var(--fundo-suave); line-height:1.4; }
.o-celula-8.o-celula-8 { padding:9px 8px; text-align:right; color:var(--texto-suave); border-bottom:1px solid var(--fundo-suave); white-space:nowrap; }
.o-celula-9.o-celula-9 { padding:9px 18px; text-align:right; color:var(--grafite); font-weight:600; border-bottom:1px solid var(--fundo-suave); white-space:nowrap; }

/* coluna */
.o-coluna-1.o-coluna-1 { max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.o-coluna-10.o-coluna-10 { list-style:none; margin:0 auto; padding:0; max-width:820px; display:flex; flex-direction:column; gap:12px; }
.o-coluna-11.o-coluna-11 { min-width:0; display:flex; flex-direction:column; gap:16px; }
.o-coluna-12.o-coluna-12 { display:flex; flex-direction:column; gap:4px; }
.o-coluna-13.o-coluna-13 { display:flex; flex-direction:column; gap:2px; }
.o-coluna-14.o-coluna-14 { margin:0; display:flex; flex-direction:column; gap:16px; }
.o-coluna-15.o-coluna-15 { font-style:normal; display:flex; flex-direction:column; min-width:0; }
.o-coluna-2.o-coluna-2 { min-width:0; display:flex; flex-direction:column; gap:20px; }
.o-coluna-3.o-coluna-3 { display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:600; color:var(--grafite); }
.o-coluna-4.o-coluna-4 { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.o-coluna-5.o-coluna-5 { padding:16px; display:flex; flex-direction:column; gap:4px; }
.o-coluna-6.o-coluna-6 { max-width:880px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.o-coluna-7.o-coluna-7 { display:flex; flex-direction:column; }
.o-coluna-8.o-coluna-8 { display:flex; flex-direction:column; gap:2px; min-width:0; }
.o-coluna-9.o-coluna-9 { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }

/* cor */
.o-cor-1.o-cor-1 { color:var(--azul); font-weight:700; }
.o-cor-2.o-cor-2 { color:var(--grafite); font-weight:600; }
.o-cor-3.o-cor-3 { font-style:normal; color:var(--texto-suave); }
.o-cor-4.o-cor-4 { font-size:15px; color:var(--texto); }
.o-cor-5.o-cor-5 { font-size:13px; color:var(--texto-suave); }
.o-cor-6.o-cor-6 { font-size:14px; color:var(--texto-suave); }
.o-cor-7.o-cor-7 { font-size:15px; color:var(--texto-suave); }
.o-cor-8.o-cor-8 { color:var(--sucesso); font-weight:700; }

/* grade */
.o-grade-1.o-grade-1 { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:56px; align-items:center; }
.o-grade-2.o-grade-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.o-grade-3.o-grade-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.o-grade-4.o-grade-4 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.o-grade-5.o-grade-5 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.o-grade-6.o-grade-6 { display:grid; grid-template-columns:120px 1fr 200px; gap:24px; padding:20px 28px; border-bottom:1px solid var(--borda); align-items:baseline; }
.o-grade-7.o-grade-7 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }

/* largura */
.o-largura-1.o-largura-1 { max-width:1140px; margin:0 auto; padding:16px 24px 0; font-size:14px; color:var(--texto-suave); }
.o-largura-2.o-largura-2 { max-width:880px; margin:0 auto; }
.o-largura-3.o-largura-3 { width:100%; max-width:420px; border:1px solid var(--borda); border-radius:12px; overflow:hidden; box-shadow:0 8px 28px rgba(31,41,51,.08); }
.o-largura-4.o-largura-4 { width:100%; max-width:440px; aspect-ratio:4/3; }
.o-largura-5.o-largura-5 { max-width:1200px; margin:0 auto; }

/* linha */
.o-linha-1.o-linha-1 { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; font-size:17px; font-weight:600; color:var(--grafite); cursor:pointer; min-height:44px; list-style:none; }
.o-linha-10.o-linha-10 { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.o-linha-11.o-linha-11 { display:flex; align-items:baseline; gap:4px; margin-top:2px; }
.o-linha-12.o-linha-12 { background:var(--azul); padding:16px 18px; display:flex; justify-content:space-between; align-items:center; color:#FFFFFF; gap:10px; }
.o-linha-13.o-linha-13 { padding:12px 18px; display:flex; justify-content:space-between; align-items:center; border-top:2px solid var(--azul); }
.o-linha-14.o-linha-14 { display:flex; justify-content:center; margin-top:32px; }
.o-linha-15.o-linha-15 { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:12px; }
.o-linha-16.o-linha-16 { width:32px; height:32px; border-radius:999px; background:var(--azul-claro); color:var(--azul); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; }
.o-linha-17.o-linha-17 { height:44px; padding:0 24px; border-radius:8px; background:var(--verde); color:#FFFFFF; font-size:15px; font-weight:600; display:inline-flex; align-items:center; text-decoration:none; }
.o-linha-18.o-linha-18 { display:flex; gap:10px; font-size:17px; line-height:1.5; color:var(--texto); }
.o-linha-19.o-linha-19 { margin-top:18px; height:42px; border-radius:8px; background:var(--verde); color:var(--grafite); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; text-decoration:none; white-space:nowrap; }
.o-linha-2.o-linha-2 { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; padding:18px 22px; background:transparent; border:none; font-family:inherit; font-size:17px; font-weight:600; color:var(--grafite); cursor:pointer; min-height:44px; }
.o-linha-20.o-linha-20 { margin-top:18px; height:42px; border-radius:8px; background:var(--verde); color:#FFFFFF; font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.o-linha-21.o-linha-21 { display:flex; gap:14px; align-items:flex-start; }
.o-linha-22.o-linha-22 { display:flex; align-items:center; gap:12px; }
.o-linha-23.o-linha-23 { width:36px; height:36px; border-radius:999px; background:var(--azul-claro); color:var(--azul); font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center; }
.o-linha-24.o-linha-24 { width:48px; height:48px; flex-shrink:0; border-radius:999px; background:var(--azul-claro); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:var(--azul); }
.o-linha-3.o-linha-3 { display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--texto); padding-bottom:9px; border-bottom:1px solid var(--fundo-suave); }
.o-linha-4.o-linha-4 { display:flex; gap:10px; font-size:16px; line-height:1.6; color:var(--texto); }
.o-linha-5.o-linha-5 { width:34px; height:34px; border-radius:999px; background:var(--azul-claro); color:var(--azul); font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; }
.o-linha-6.o-linha-6 { min-width:0; display:flex; justify-content:center; }
.o-linha-7.o-linha-7 { display:flex; flex-wrap:wrap; gap:14px; }
.o-linha-8.o-linha-8 { height:44px; padding:0 24px; border-radius:8px; background:var(--verde); color:#FFFFFF; font-size:15px; font-weight:600; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.o-linha-9.o-linha-9 { height:44px; padding:0 26px; border-radius:8px; background:var(--verde); color:#FFFFFF; font-size:15px; font-weight:600; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }

/* pilula */
.o-pilula-1.o-pilula-1 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; overflow:hidden; }
.o-pilula-2.o-pilula-2 { border:1px solid var(--borda); border-radius:12px; overflow:hidden; overflow-x:auto; }
.o-pilula-3.o-pilula-3 { background:var(--superficie); border:1px solid var(--borda); border-radius:12px; overflow:hidden; overflow-x:auto; }
.o-pilula-4.o-pilula-4 { border:1px solid var(--borda); border-radius:12px; overflow:hidden; background:var(--superficie); }
.o-pilula-5.o-pilula-5 { border:1px solid var(--borda); border-radius:12px; overflow:hidden; }
.o-pilula-6.o-pilula-6 { object-fit:contain; border-radius:16px; }
.o-pilula-7.o-pilula-7 { font-family:'JetBrains Mono',monospace; font-size:14px; background:var(--azul-claro); padding:1px 6px; border-radius:6px; }
.o-pilula-8.o-pilula-8 { font-family:'JetBrains Mono',monospace; font-size:15px; background:var(--azul-claro); padding:1px 6px; border-radius:6px; }

/* secao */
.o-secao-1.o-secao-1 { background:var(--azul-claro); padding:80px 24px; }
.o-secao-2.o-secao-2 { background:var(--azul-claro); padding:72px 24px; }
.o-secao-3.o-secao-3 { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; padding:20px 24px; background:transparent; border:none; font-family:inherit; font-size:18px; font-weight:600; color:var(--grafite); cursor:pointer; min-height:44px; }
.o-secao-5.o-secao-5 { background:var(--azul-claro); padding:88px 24px; }
.o-secao-6.o-secao-6 { background:var(--superficie); padding:88px 24px; }
.o-secao-7.o-secao-7 { background:var(--azul-claro); padding:96px 24px; }

/* texto */
.o-texto-1.o-texto-1 { margin:0; font-size:16px; line-height:1.7; color:var(--texto); }
.o-texto-10.o-texto-10 { margin:0; font-size:18px; line-height:1.6; color:var(--texto); max-width:48ch; }
.o-texto-11.o-texto-11 { margin:0; font-size:19px; font-weight:600; color:var(--grafite); }
.o-texto-12.o-texto-12 { font-size:14px; line-height:1.55; color:var(--texto); }
.o-texto-13.o-texto-13 { margin:34px 0 4px; font-size:21px; line-height:1.3; font-weight:700; color:var(--grafite); }
.o-texto-14.o-texto-14 { font-size:19px; font-weight:600; color:var(--grafite); }
.o-texto-15.o-texto-15 { font-size:16px; line-height:1.75; color:var(--texto); margin-bottom:8px; }
.o-texto-16.o-texto-16 { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--grafite); font-weight:500; }
.o-texto-17.o-texto-17 { font-size:15px; color:var(--texto); line-height:1.5; margin-top:4px; }
.o-texto-18.o-texto-18 { margin:0; font-size:17px; line-height:1.6; color:var(--texto); max-width:56ch; }
.o-texto-19.o-texto-19 { font-size:13px; font-weight:700; }
.o-texto-2.o-texto-2 { margin:0 auto 40px; max-width:64ch; font-size:16px; line-height:1.65; color:var(--texto); text-align:center; }
.o-texto-20.o-texto-20 { font-size:13px; font-weight:700; color:var(--grafite); }
.o-texto-21.o-texto-21 { font-size:15px; line-height:1.6; color:var(--texto); }
.o-texto-22.o-texto-22 { margin:0; padding:0 24px 22px; font-size:17px; line-height:1.65; color:var(--texto); max-width:74ch; }
.o-texto-23.o-texto-23 { font-size:16px; font-weight:700; color:var(--grafite); }
.o-texto-24.o-texto-24 { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-suave); font-weight:700; }
.o-texto-25.o-texto-25 { font-size:18px; font-weight:600; color:var(--grafite); }
.o-texto-26.o-texto-26 { font-size:14px; line-height:1.6; color:var(--texto); }
.o-texto-27.o-texto-27 { font-size:15px; font-weight:600; color:var(--grafite); }
.o-texto-28.o-texto-28 { margin:0 0 20px; font-size:15px; line-height:1.6; color:var(--texto-suave); }
.o-texto-29.o-texto-29 { margin:48px 0 6px; font-size:24px; font-weight:600; color:var(--grafite); }
.o-texto-3.o-texto-3 { font-size:16px; line-height:1.6; color:var(--texto); }
.o-texto-30.o-texto-30 { margin:24px 0 2px; font-size:17px; line-height:1.35; font-weight:600; color:var(--grafite); }
.o-texto-31.o-texto-31 { margin:0; font-size:18px; line-height:1.6; color:var(--texto); }
.o-texto-32.o-texto-32 { margin:0; font-size:15px; line-height:1.65; color:var(--texto); }
.o-texto-33.o-texto-33 { margin:0; font-size:16px; line-height:1.6; color:var(--texto); }
.o-texto-34.o-texto-34 { margin:0 0 6px; font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--azul); }
.o-texto-35.o-texto-35 { margin:0; font-size:22px; font-weight:700; color:var(--grafite); }
.o-texto-36.o-texto-36 { margin:0 0 32px; max-width:74ch; font-size:17px; line-height:1.65; color:var(--texto); }
.o-texto-37.o-texto-37 { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--texto-suave); line-height:1.6; }
.o-texto-38.o-texto-38 { margin:4px 0 0; font-size:15px; line-height:1.6; color:var(--texto); }
.o-texto-39.o-texto-39 { font-size:19px; font-weight:600; color:var(--grafite); margin-bottom:6px; }
.o-texto-4.o-texto-4 { font-size:17px; font-weight:600; color:var(--grafite); }
.o-texto-40.o-texto-40 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--azul); font-weight:700; }
.o-texto-41.o-texto-41 { margin:0; font-size:17px; line-height:1.65; color:var(--grafite); font-weight:500; max-width:48ch; }
.o-texto-42.o-texto-42 { font-size:16px; font-weight:600; }
.o-texto-43.o-texto-43 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-suave); font-weight:600; }
.o-texto-44.o-texto-44 { margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--texto); min-height:76px; }
.o-texto-45.o-texto-45 { padding:0 8px; font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--azul); white-space:nowrap; }
.o-texto-46.o-texto-46 { margin:0; font-size:20px; font-weight:600; color:var(--grafite); }
.o-texto-47.o-texto-47 { font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--verde); color:#FFFFFF; }
.o-texto-48.o-texto-48 { margin:0; font-size:15px; line-height:1.65; color:var(--texto); white-space:pre-line; background:var(--fundo-suave); border-radius:8px; padding:14px; }
.o-texto-49.o-texto-49 { font-size:15px; font-weight:700; color:var(--grafite); }
.o-texto-5.o-texto-5 { font-size:15px; font-weight:600; margin-top:2px; }
.o-texto-6.o-texto-6 { margin:0; font-size:18px; line-height:1.75; color:var(--grafite); }
.o-texto-7.o-texto-7 { font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.6; color:var(--texto-suave); overflow-wrap:anywhere; }
.o-texto-8.o-texto-8 { margin:0 auto 40px; max-width:60ch; font-size:16px; line-height:1.65; color:var(--texto); text-align:center; }
.o-texto-9.o-texto-9 { font-size:19px; font-weight:700; color:var(--grafite); margin-bottom:6px; }

/* titulo */
.o-titulo-1.o-titulo-1 { margin:0 0 12px; font-size:32px; line-height:1.22; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); text-align:center; }
.o-titulo-10.o-titulo-10 { margin:0; font-size:28px; line-height:1.25; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); }
.o-titulo-11.o-titulo-11 { margin:0 0 16px; font-size:36px; line-height:1.2; font-weight:700; color:var(--grafite); letter-spacing:-0.02em; }
.o-titulo-12.o-titulo-12 { margin:0 0 16px; font-size:26px; line-height:1.25; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); }
.o-titulo-13.o-titulo-13 { margin:0; font-size:34px; line-height:1.22; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); }
.o-titulo-14.o-titulo-14 { margin:0 0 12px; font-size:34px; line-height:1.22; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); text-align:center; }
.o-titulo-2.o-titulo-2 { margin:0; font-size:32px; line-height:1.22; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); }
.o-titulo-3.o-titulo-3 { margin:0 0 28px; font-size:32px; line-height:1.22; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); text-align:center; }
.o-titulo-4.o-titulo-4 { margin:0; font-size:40px; line-height:1.18; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); text-wrap:pretty; }
.o-titulo-5.o-titulo-5 { font-size:30px; font-weight:700; color:var(--grafite); }
.o-titulo-6.o-titulo-6 { margin:0 0 32px; font-size:28px; line-height:1.25; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); text-align:center; }
.o-titulo-7.o-titulo-7 { margin:0 0 12px; font-size:36px; line-height:1.2; font-weight:700; color:var(--grafite); letter-spacing:-0.02em; }
.o-titulo-8.o-titulo-8 { margin:0; font-size:42px; line-height:1.18; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); text-wrap:pretty; }
.o-titulo-9.o-titulo-9 { margin:0; font-size:42px; line-height:1.18; letter-spacing:-0.02em; font-weight:700; color:var(--grafite); }