/* Tutor S.A · site completo (/site). Estrutura do rascunho da ABZ com o visual da one page: usa as cores, as fontes,
   os botões, os cartões e os carrosséis de site.css, que carrega antes. Nada aqui muda a one page. */

/* Blocos comuns */
.s-bloco, .s-negocio, .s-simbolo, .s-diferenciais, .s-vantagens, .s-faq, .s-solucoes, .s-modelos, .s-depoimentos, .s-expansao { padding: 100px; }
.s-negocio, .s-diferenciais, .s-depoimentos { background-image: linear-gradient(180deg, #000 0%, var(--verde-19) 100%); }
.s-solucoes, .s-simbolo { background-image: linear-gradient(0deg, #000 0%, var(--verde-19) 100%); }
.s-topo { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.s-topo .selo { align-self: center; }
.s-topo h2 { max-width: 900px; font-size: 3rem; }
.s-duas { flex-direction: row; justify-content: center; align-items: center; gap: 60px; }
.s-duas__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.s-duas__texto > h2 { font-size: 3rem; }
.s-duas__texto .texto p:last-child { margin-bottom: 0; }
.s-duas__img { width: 100%; text-align: center; }
.s-duas__img img { width: 100%; max-height: 560px; object-fit: cover; border: 1px solid var(--branco-12); border-radius: 20px; }
.s-duas__img--contida img { width: auto; max-width: 100%; max-height: 480px; object-fit: contain; border: 0; }
.s-divisor { width: 100%; border-top: 1px solid var(--branco-12); }
.s-cartao {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 30px;
  background-image: linear-gradient(45deg, var(--verde-19) 0%, var(--branco-6) 100%);
  border: 1px solid var(--branco-12);
  border-radius: 20px;
}
.s-cartao > h2 { font-size: 1.6rem; }
.s-cartao .icone-caixa__ico { margin-bottom: 0; }
.s-cartao h3 { margin: 0; }
.s-cartao p.texto { margin: 0; }
.s-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; flex-basis: 100%; }

/* Listas com marcador (cidades, números, vantagens) */
.s-lista { display: flex; flex-direction: column; gap: 10px; font-family: var(--texto); color: var(--branco-64); }
.s-lista li { position: relative; padding-left: 28px; line-height: 1.4; }
.s-lista li::before { content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; background-color: var(--verde); -webkit-mask: var(--marcador) center / contain no-repeat; mask: var(--marcador) center / contain no-repeat; }
.s-lista--check { --marcador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM227.3 387.3l184-184c6.2-6.2 6.2-16.4 0-22.6l-22.6-22.6c-6.2-6.2-16.4-6.2-22.6 0L216 308.1l-70.1-70.1c-6.2-6.2-16.4-6.2-22.6 0l-22.6 22.6c-6.2 6.2-6.2 16.4 0 22.6l104 104c6.2 6.3 16.4 6.3 22.6 0z'/%3E%3C/svg%3E"); }
.s-lista--pino { --marcador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E"); }
.s-lista--meta { --marcador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E"); }
.s-lista--colunas { display: block; columns: 3 240px; column-gap: 30px; }
.s-lista--colunas li { margin-bottom: 10px; break-inside: avoid; }

/* Lista de itens com ícone (modelo de negócio, patrocínio, produtos) */
.s-icones { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.s-icones .icone-caixa { display: flex; align-items: flex-start; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--branco-6); }
.s-icones .icone-caixa:last-child { padding-bottom: 0; border-bottom: 0; }
.s-icones .icone-caixa__ico { margin: 0; }
.s-icones h3 { margin: 0 0 6px; }
.s-icones p.texto { margin: 0; }

/* Faixa do alto das páginas internas (h1) */
.faixa { padding: 20px; }
.faixa__fundo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 460px;
  padding: 145px 40px 60px;
  background: #000 url("../img/hero-cidade.jpg") center / cover no-repeat;
  border-radius: 0 0 40px 40px;
}
.faixa__fundo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(180deg, #00000078 0%, var(--preto-0f) 100%); }
.faixa__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 900px; text-align: center; }
.faixa__in .selo { align-self: center; background-color: var(--verde); }
.faixa__titulo { font-size: 4.8rem; }

/* Hero da inicial do site completo */
.s-heroi .heroi__titulo { font-size: 4rem; }
.s-heroi__texto { flex-basis: 100%; max-width: 680px; text-align: center; }
.s-heroi .parceiros { margin: 40px 0 -150px; }

/* Expansão */
.s-expansao { background-image: radial-gradient(at center center, var(--verde-19) 0%, #000 100%); border-top: 1px solid var(--branco-6); border-bottom: 1px solid var(--branco-6); }
.s-expansao__linha { display: flex; align-items: center; gap: 60px; }
.s-expansao__dados { display: flex; flex-direction: column; gap: 25px; width: 45%; }
.s-expansao__dados h2 { font-size: 3rem; }
.s-expansao__cidades { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.s-expansao__rotulo { margin: 0 0 10px; font-family: var(--titulo); font-size: 1.2rem; font-weight: 600; color: #fff; }
.s-expansao__mapa { width: 55%; }
.s-expansao__mapa img { height: 420px; }

/* Modelos de totem */
.s-modelos h2 { font-size: 3rem; text-align: center; }
.s-modelos__linha { display: flex; align-items: center; gap: 60px; }
.s-modelos__img { width: 40%; text-align: center; }
.s-modelos__img img { max-height: 460px; width: auto; }
.s-modelos__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; width: 60%; }
.s-modelo { display: flex; flex-direction: column; gap: 8px; padding: 25px; background-image: linear-gradient(45deg, var(--verde-19) 0%, var(--branco-6) 100%); border: 1px solid var(--branco-12); border-radius: 20px; }
.s-modelo__altura { font-family: var(--titulo); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--verde); }
.s-modelo__nome { font-family: var(--texto); font-size: 1.1rem; font-weight: 500; color: #fff; }

/* Abas (Principais Soluções) */
.s-solucoes .miolo { gap: 40px; }
.abas { display: flex; flex-direction: column; gap: 30px; }
.abas__lista { display: none; }
.abas--ativas .abas__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.abas__botao {
  padding: 12px 22px;
  font-family: var(--texto);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  color: var(--branco-64);
  background-color: var(--branco-6);
  border: 1px solid var(--branco-12);
  border-radius: 100px;
  cursor: pointer;
  transition: all .3s;
}
.abas__botao:hover, .abas__botao:focus-visible { color: #fff; border-color: var(--verde); }
.abas__botao[aria-selected="true"] { color: #fff; background-color: var(--verde); border-color: var(--verde); }
.abas__painel { display: flex; align-items: center; gap: 60px; padding: 40px; background-image: linear-gradient(45deg, var(--branco-6) 0%, var(--verde-19) 100%); border: 1px solid var(--branco-6); border-radius: 20px; }
.abas__painel[hidden] { display: none; }
.abas__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.abas__texto h3 { font-size: 2.4rem; }
.abas__texto .texto { color: #fff; }
.abas__img { width: 100%; }
.abas__img img { width: 100%; aspect-ratio: 773 / 614; object-fit: cover; border-radius: 20px; }

/* Vantagens, software e publicidade */
.s-vantagens .miolo { gap: 30px; }
.s-vantagens__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.s-cartao--largo { width: 100%; }
.s-publicidade { flex-direction: row; align-items: center; gap: 40px; }
.s-publicidade > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; width: 100%; }
.s-publicidade h2 { font-size: 2.4rem; }
.s-publicidade__imgs { width: 40%; text-align: center; }
.s-publicidade__imgs img { max-height: 380px; width: auto; }

/* Integrações via API (fundo branco, como os apoiadores) */
.s-integracoes .miolo { max-width: min(100%, 1100px); }
.s-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center; }
.s-logos img { width: 100%; aspect-ratio: 8 / 3; object-fit: contain; background: #fff; }

/* Diferenciais e cartões de ajuda */
.s-diferenciais .miolo { gap: 40px; }
.s-diferenciais__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.s-ajuda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.s-ajuda .botao-caixa { align-self: flex-start; margin-top: auto; }

/* Depoimentos */
.s-depoimentos .miolo { gap: 40px; }
.carrossel--depoimentos { --por-vez: 2; padding-inline: 50px; }
.carrossel--depoimentos .carrossel__trilho { align-items: stretch; }
.carrossel--depoimentos .carrossel__seta { top: 50%; transform: translateY(-50%); }
.carrossel--depoimentos .carrossel__seta--ant { left: 0; }
.carrossel--depoimentos .carrossel__seta--prox { right: 0; }
.depoimento { display: flex; flex-direction: column; justify-content: space-between; gap: 25px; margin: 0; padding: 30px; background-image: linear-gradient(45deg, var(--verde-19) 0%, var(--branco-6) 100%); border: 1px solid var(--branco-12); border-radius: 20px; }
.depoimento blockquote { margin: 0; font-size: 1.05rem; color: #fff; }
.depoimento blockquote p { margin: 0; }
.depoimento__autor { display: flex; align-items: center; gap: 15px; font-family: var(--texto); color: var(--branco-64); }
.depoimento__autor img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.depoimento__inicial { display: flex; flex: none; justify-content: center; align-items: center; width: 56px; height: 56px; font-family: var(--titulo); font-size: 1.4rem; font-weight: 700; color: #fff; background-color: var(--verde); border-radius: 50%; }
.depoimento__autor strong { display: block; color: #fff; font-weight: 600; }

/* Atendimento WhatsApp */
.s-whatsapp__logo { width: 180px; }
.s-whatsapp__titulo { margin: 0; font-size: 2.4rem; }
.s-whatsapp__fone { display: flex; align-items: center; gap: 15px; font-family: var(--texto); color: var(--branco-64); }
.s-whatsapp__fone .icone-caixa__ico { margin: 0; }
.s-whatsapp__fone strong { display: block; color: #fff; font-weight: 500; text-transform: none; }
.s-whatsapp__fone:hover strong { color: var(--verde); }
.s-whatsapp .contato__texto:last-child { justify-content: center; }

/* FAQ */
.s-bloco + .s-faq { padding-top: 0; }
.s-faq .s-duas { align-items: flex-start; }
.s-faq__topo { width: 40%; }
.s-faq__lista { display: flex; flex-direction: column; gap: 15px; width: 60%; }
.s-faq__item { background-image: linear-gradient(45deg, var(--verde-19) 0%, var(--branco-6) 100%); border: 1px solid var(--branco-12); border-radius: 20px; }
.s-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 25px; font-family: var(--texto); font-size: 1.15rem; font-weight: 500; color: #fff; list-style: none; cursor: pointer; }
.s-faq__item summary::-webkit-details-marker { display: none; }
.s-faq__item summary svg { flex: none; width: 14px; height: 14px; fill: var(--verde); transition: transform .3s; }
.s-faq__item[open] summary svg { transform: rotate(90deg); }
.s-faq__item summary:hover, .s-faq__item summary:focus-visible { color: var(--verde); }
.s-faq__item .texto { padding: 0 25px 10px; }
.s-faq__item strong { color: #fff; font-weight: 600; }

/* Contato */
.s-contato { align-items: flex-start; }
.s-contato__sub { font-size: 1.6rem; }
.s-canais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; }
.s-canais a.texto { color: var(--branco-64); word-break: break-word; transition: color .3s; }
.s-canais a.texto:hover { color: #fff; }
.s-canais__extra { color: var(--verde); }
.s-mensagem { padding-top: 0; }

/* Rodapé do site completo */
.rodape__links { display: grid; grid-template-columns: repeat(3, auto); gap: 20px 30px; grid-column: span 1; }
.rodape__links h2 { margin-bottom: 15px; }
.rodape__links ul { display: flex; flex-direction: column; gap: 10px; font-family: var(--texto); font-size: .9rem; }
.rodape__links a { color: var(--branco-64); transition: color .3s; }
.rodape__links a:hover, .rodape__links a:focus-visible { color: var(--verde); }
.rodape--site .rodape__grade { grid-template-columns: 1.1fr 1.6fr .8fr .8fr; }
.rodape--site .rodape__lista a, .rodape--site .rodape__lista .txt { word-break: break-word; }

/* ===== Notebook (≤ 1366px) ===== */
@media (max-width: 1366px) {
  .s-bloco, .s-negocio, .s-simbolo, .s-diferenciais, .s-vantagens, .s-faq, .s-solucoes, .s-modelos, .s-depoimentos, .s-expansao { padding: 40px 30px; }
  .faixa { padding: 10px; }
  .faixa__fundo { min-height: 380px; padding: 140px 20px 40px; border-radius: 0 0 20px 20px; }
  .faixa__titulo { font-size: 3.4rem; }
  .s-heroi .heroi__titulo { font-size: 3rem; }
  .s-heroi .parceiros { margin: 40px 0 -80px; }
  .s-topo h2, .s-duas__texto > h2, .s-expansao__dados h2, .s-modelos h2 { font-size: 2.4rem; }
  .s-whatsapp__titulo { font-size: 2rem; }
  .abas__texto h3 { font-size: 2rem; }
  .rodape--site .rodape__grade { grid-template-columns: 1fr 1.6fr 1fr; }
  .rodape--site .rodape__col:last-child { grid-column: 3; }
}

/* ===== Tablet (≤ 1024px) ===== */
@media (max-width: 1024px) {
  .s-duas, .s-expansao__linha, .s-modelos__linha, .abas__painel, .s-publicidade { flex-direction: column; gap: 30px; }
  .s-expansao__dados, .s-expansao__mapa, .s-modelos__img, .s-modelos__lista, .s-faq__topo, .s-faq__lista, .s-publicidade__imgs { width: 100%; }
  .s-expansao__mapa img { height: 350px; }
  .abas__painel { padding: 25px; }
  .s-vantagens__grade, .s-ajuda { grid-template-columns: 1fr; }
  .s-diferenciais__grade { grid-template-columns: repeat(2, 1fr); }
  .s-logos { grid-template-columns: repeat(3, 1fr); }
  .faixa__fundo { padding-top: 130px; }
  .faixa__titulo { font-size: 3rem; }
  .s-heroi .parceiros { margin: 30px 0 0; }
  .rodape--site .rodape__grade { grid-template-columns: repeat(2, 1fr); }
  .rodape--site .rodape__col:last-child { grid-column: auto; }
  .rodape__links { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Celular (≤ 767px) ===== */
@media (max-width: 767px) {
  /* Na one page o menu some no celular; no site completo ele é a navegação entre as páginas, então fica (com o botão). */
  .topo--site .topo__in { gap: 10px; }
  .topo--site .menu { display: flex; order: 3; }
  .topo--site .menu__suspenso { top: 100%; margin-top: 0; }
  .topo--site .topo__in > div:last-child .botao { padding: 10px 12px; font-size: .75rem; }
  .topo--site .topo__logo img { width: 120px; }
  .s-bloco, .s-negocio, .s-simbolo, .s-diferenciais, .s-vantagens, .s-faq, .s-solucoes, .s-modelos, .s-depoimentos, .s-expansao { padding: 40px 20px; }
  .faixa__fundo { min-height: 300px; padding: 110px 15px 30px; }
  .faixa__titulo { font-size: 2.4rem; }
  .faixa__in .selo { padding: 7px; }
  .s-heroi .heroi__titulo { font-size: 2.2rem; }
  .s-heroi__texto { font-size: .9rem; }
  .s-botoes .botao-caixa, .s-botoes .botao { width: 100%; }
  .s-topo h2, .s-duas__texto > h2, .s-expansao__dados h2, .s-modelos h2, .s-publicidade h2 { font-size: 1.8rem; }
  .s-cartao { padding: 20px; }
  .s-expansao__cidades { grid-template-columns: 1fr; }
  .s-expansao__mapa img { height: 220px; }
  .s-modelos__lista { grid-template-columns: 1fr 1fr; gap: 10px; }
  .s-modelo { padding: 15px; }
  .s-modelo__altura { font-size: 1.8rem; }
  .s-modelos__img img { max-height: 320px; }
  .abas__botao { padding: 10px 14px; font-size: .85rem; }
  .abas__painel { padding: 20px; }
  .abas__texto h3 { font-size: 1.6rem; }
  .s-diferenciais__grade, .s-canais { grid-template-columns: 1fr; }
  .s-logos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .carrossel--depoimentos { --por-vez: 1; padding-inline: 0; }
  .carrossel--depoimentos .carrossel__seta { top: auto; bottom: -45px; transform: none; }
  .carrossel--depoimentos .carrossel__seta--ant { left: calc(50% - 40px); }
  .carrossel--depoimentos .carrossel__seta--prox { right: calc(50% - 40px); }
  .s-depoimentos .miolo { padding-bottom: 45px; }
  .depoimento { padding: 20px; }
  .s-whatsapp__titulo { font-size: 1.5rem; }
  .s-faq__item summary { padding: 18px; font-size: 1rem; }
  .s-faq__item .texto { padding: 0 18px 8px; font-size: .9rem; }
  .s-duas__img img { max-height: 380px; }
  .rodape--site .rodape__grade { grid-template-columns: 1fr; }
  .rodape__links { grid-template-columns: 1fr 1fr; }
}