/* UMA SEÇÃO = UMA TELA — a última camada de estilo de todas as páginas.
   Regra do site: cada seção ocupa exatamente a tela, no celular e no
   computador. Onde o conteúdo não cabe na altura, ele passa a andar para o
   LADO, dentro da mesma tela (trilhos que deslizam, com pontos que mostram
   onde você está), nunca para baixo. No celular, a rolagem vai de tela em
   tela, como páginas.
   Carregada depois de todas as outras folhas, em todas as páginas. */

/* ------------------------------------------------ celular: de tela em tela */
@media (max-width: 800px) {
  html { scroll-snap-type: y mandatory; }
  :root main > section { scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: var(--topo); }
  :root .site-footer { scroll-snap-align: end; }
}

/* ------------------------------------------------ celular: listas viram trilhos */
/* Serviços, etapas, possibilidades, prévias e itens: cada um vira um cartão,
   lado a lado. O trilho sangra até a borda da tela (o próximo cartão aparece
   cortado na direita, convidando a deslizar) e cada cartão para na margem. */
@media (max-width: 800px) {
  :root .service-list, :root .process-track, :root .caminho, :root .termo {
    display: flex; flex-direction: row; align-items: stretch; gap: 12px;
    margin-inline: calc(-1 * var(--margem)); padding: 4px var(--margem) 6px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem);
    scrollbar-width: none; border-top: 0; list-style: none;
  }
  :root .service-list::-webkit-scrollbar,
:root .process-track::-webkit-scrollbar,
:root .caminho::-webkit-scrollbar,
:root .termo::-webkit-scrollbar { display: none; }
  :root .process-track::after { content: none; }

  :root .service-list > *, :root .process-track > *, :root .caminho > li, :root .termo > li {
    flex: 0 0 min(80vw, 330px); scroll-snap-align: start; margin: 0;
    padding: 20px; border: 1px solid var(--campo-fio); border-radius: 16px;
    background: color-mix(in srgb, var(--campo-fundo) 93%, var(--campo-texto));
  }
  /* sem as linhas e setas de lista: cada cartão já se separa sozinho */
  :root .service-list > *::before, :root .caminho li::before, :root .caminho li + li::before { content: none; }
  :root .process-track > .process-step, :root .process-track > .process-step:not(:first-child), :root .caminho li + li, :root .caminho li { border: 1px solid var(--campo-fio); padding: 20px; }
  :root .process-step h3 { margin: 14px 0 6px; }

  /* os pontos do trilho (escritos pelo script.js): um por cartão, o atual em destaque */
  .trilho-pontos { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; }
  .trilho-pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--campo-fio); transition: background var(--t-micro) var(--curva), width var(--t-ui) var(--curva); }
  .trilho-pontos i.atual { width: 18px; border-radius: 3px; background: var(--campo-realce); }
}
.trilho-pontos { display: none; }
@media (max-width: 800px) { .trilho-pontos { display: flex; } }

/* ------------------------------------------------ celular: a abertura é exatamente uma tela */
/* O texto e os botões ficam em cima; a peça de cada página (mascote, pilha de
   prévias, celular, ficha, calendário, visor) ocupa a ALTURA QUE SOBRA e
   ajusta a largura pela própria proporção. Assim nada passa da tela em
   nenhum telefone, do pequeno ao grande. */
@media (max-width: 800px) {
  :root main > section:first-child {
    display: flex; flex-direction: column; height: calc(100lvh - var(--topo)); min-height: 0; overflow: hidden;
  }
  :root main > section:first-child > .hero-copy,
  :root main > section:first-child > .ab-corpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  :root main > section:first-child .ab-texto { flex: none; }

  /* a peça: altura = o que sobra (flex), largura = altura × proporção, nunca mais larga que a tela */
  :root .pilha, :root .elenco {
    flex: 1 1 0; min-height: 0; width: auto; max-width: 100%; height: auto; margin: 20px auto 0; align-self: center;
  }
  :root .pilha { max-height: 300px; }
  :root .elenco { max-height: 420px; aspect-ratio: 1 / 1; }
  :root .aparelho { flex: 1 1 0; min-height: 0; margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  :root .pg-servico .aparelho-tela, :root .aparelho-tela { flex: 1 1 0; min-height: 0; width: auto; height: auto; max-height: 440px; aspect-ratio: 9 / 18.5; border-width: 6px; border-radius: 26px; }
  :root .aparelho figcaption { flex: none; }
  :root .perfil { flex: 0 1 auto; min-height: 0; margin-top: 18px; overflow: hidden; }
  :root .semana { flex: 0 1 auto; min-height: 0; margin-top: 18px; --bloco: clamp(22px, calc((100svh - 600px) / 5), 40px); overflow: hidden; }
}
/* telefone baixo: a ficha do Google e o calendário mostram só o essencial */
@media (max-width: 800px) and (max-height: 720px) {
  :root .perfil li { padding: 9px 0; }
  :root .perfil li small, :root .perfil figcaption { display: none; }
  :root .semana-pe { display: none; }
}
/* telefone baixo (até 720px de altura: iPhone SE, Androids de 640px): a
   abertura aperta os respiros e o parágrafo para a peça ter espaço de verdade */
@media (max-width: 800px) and (max-height: 720px) {
  :root main > section:first-child { padding-bottom: calc(22px + 100lvh - 100svh); }
  :root:root main > section:first-child h1 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); margin-bottom: 10px; }
  :root main > section:first-child .hero-lead, :root main > section:first-child .ab-lead { font-size: .9rem; line-height: 1.42; }
  :root main > section:first-child .hero-actions { margin-top: 14px; gap: 4px; }
  :root main > section:first-child .hero-actions .text-link { min-height: 40px; }
  :root .ab-lead-2, :root .aparelho figcaption { display: none; }
  :root .pilha, :root .elenco, :root .aparelho { margin-top: 10px; }
  /* o link de texto da abertura sai (o mesmo caminho está no menu): o botão principal fica */
  :root main > section:first-child .hero-actions .text-link { display: none; }
  /* ficha e calendário mostram o começo e somem num degradê, sem corte seco */
  :root .perfil, :root .semana { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  :root main > section:first-child .eyebrow { margin-top: 0; }
}

/* ------------------------------------------------ celular baixo: as outras seções apertam */
@media (max-width: 800px) and (max-height: 720px) {
  :root main > section:not(:first-child) { padding-top: 18px; padding-bottom: calc(26px + 100lvh - 100svh); }
  :root .section-title, :root .cta-title { font-size: clamp(1.75rem, 8.2vw, 2.3rem); }
  :root .section-text, :root .cta-text { font-size: .92rem; line-height: 1.45; margin-top: 12px; }
  :root .section-text + .section-text { margin-top: 8px; }
  :root .service-list, :root .process-track, :root .caminho, :root .termo { margin-top: 16px; }
  :root .faq-list { margin-top: 14px; }
  :root .faq-list summary { padding-block: 12px; font-size: .98rem; }
  :root .nota-servico, :root .nota-lateral { margin-top: 12px; font-size: .85rem; }
  :root .trilho-pontos { margin-top: 10px; }
}

/* etapas que são só um nome (fluxo ilustrativo): cartões mais estreitos, mais deles à vista */
@media (max-width: 800px) {
  :root .caminho > li:not(:has(p)) { flex-basis: min(46vw, 200px); padding: 16px; }
  :root .caminho > li:not(:has(p)) h3 { margin: 0; font-size: 1.15rem; }
  :root .oque .section-text { font-size: .95rem; line-height: 1.45; }
  :root .nota-lateral { font-size: .82rem; }
}
/* a chamada da automação na home, em telefone baixo */
@media (max-width: 800px) and (max-height: 720px) {
  :root .oque .section-text { font-size: .86rem; line-height: 1.4; }
  :root .service-list > *, :root .process-track > *, :root .termo > li { padding: 16px; }
}

/* ------------------------------------------------ Sett Agenda: a política numa tela */
/* Um cartão por tópico, lado a lado (três à vista no computador, um e um
   pedaço no celular). O texto é o mesmo, inteiro; um tópico mais longo que o
   cartão rola dentro dele. */
:root #privacidade { height: calc(100lvh - var(--topo)); min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
:root #privacidade > div:not(.section-index) { display: flex; flex-direction: column; min-height: 0; }
.politica-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
:root .politica {
  flex: 1 1 auto; min-height: 0; max-width: none; margin: clamp(16px, 3svh, 36px) calc(-1 * var(--margem)) 0; padding: 0 var(--margem) 4px;
  display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem);
  overscroll-behavior-x: contain; scrollbar-width: none;
}
:root .politica::-webkit-scrollbar { display: none; }
:root .politica:focus-visible { outline: 2px solid var(--campo-realce); outline-offset: -2px; }
.politica-item {
  flex: 0 0 calc((100% - 2 * 16px) / 3); scroll-snap-align: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(18px, 2vw, 28px); border: 1px solid var(--campo-fio); border-radius: 16px;
  background: color-mix(in srgb, var(--campo-fundo) 94%, var(--campo-texto)); scrollbar-width: thin;
}
:root .politica h3, :root .politica h3:first-child { margin: 0 0 12px; }
:root .politica .atualizada { margin: 0 0 18px; }
:root .politica p, :root .politica li { font-size: .95rem; line-height: 1.55; }
:root #privacidade + section .trilho-pontos, :root #privacidade .trilho-pontos { margin-top: 12px; }
@media (max-width: 1100px) { .politica-item { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 800px) {
  .politica-cab .trilho-setas { display: none; }
  .politica-item { flex-basis: min(82vw, 360px); }
  :root .politica p, :root .politica li { font-size: .9rem; line-height: 1.5; }
}

/* ------------------------------------------------ computador: listas viram uma linha de cartões */
/* O mesmo cartão do celular, lado a lado: serviços, possibilidades e prévias
   deixam de ser linhas empilhadas (que passavam da altura da tela em
   notebook) e cabem numa faixa só. */
@media (min-width: 801px) {
  :root .service-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px;
    margin-top: clamp(24px, 4.5svh, 56px); border-top: 0;
  }
  :root .service-list > * {
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px;
    padding: clamp(18px, 1.8vw, 28px); border: 1px solid var(--campo-fio); border-radius: 16px;
    background: color-mix(in srgb, var(--campo-fundo) 93%, var(--campo-texto));
  }
  :root .service-list > *::before { content: none; }
  :root .ex::before { inset: 0; border-radius: 16px; }
  :root .service h3 { font-size: clamp(1.4rem, 1.9vw, 2rem); }
  :root .service p { justify-self: start; max-width: none; grid-column: 1; }
  :root .ex > p { font-size: .94rem; }
}
/* notebook baixo (até 820px de altura): títulos e respiros acompanham a altura */
@media (min-width: 801px) and (max-height: 820px) {
  :root main > section:not(:first-child) { padding-top: clamp(16px, 2.6svh, 28px); padding-bottom: clamp(24px, 4svh, 44px); }
  :root .section-title { font-size: clamp(2.2rem, min(5vw, 8.6svh), 5.4rem); }
  :root .section-text { margin-top: 16px; }
  :root .process-track, :root .caminho, :root .termo, :root .faq-list { margin-top: clamp(20px, 3.4svh, 40px); }
  :root .faq-list summary { padding-block: 14px; }
  :root .process-step h3 { margin: 18px 0 8px; }
}
/* agentes: o calendário da abertura mede pela altura da tela */
@media (min-width: 801px) and (max-height: 820px) {
  :root .semana { --bloco: clamp(24px, calc((100svh - 540px) / 5), 40px); }
  :root .nota-servico { margin-top: clamp(14px, 2.4svh, 28px); }
}
/* O que fazemos · automação: os dois parágrafos lado a lado, a faixa de etapas embaixo */
@media (min-width: 1024px) {
  :root .oque > div:not(.section-index) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--coluna-gap); align-content: start; }
  :root .oque > div > * { grid-column: 1 / -1; }
  :root .oque > div > .section-text { grid-column: auto; max-width: 34rem; }
}
/* cinco possibilidades: as cinco numa linha (sem sobrar uma sozinha embaixo) */
/* notebook baixo: a abertura começa mais perto do menu (a mesma distância em todas as páginas) e o calendário encolhe */
@media (min-width: 801px) and (max-height: 820px) {
  :root .semana { --bloco: clamp(22px, calc((100svh - 600px) / 5), 40px); }
}
@media (max-width: 800px) and (max-height: 720px) {
  :root .service-list > * { padding: 14px 16px; gap: 6px; }
  :root .service p { font-size: .86rem; line-height: 1.4; }
}
/* o rótulo acima do título (Sett Agenda) não sobe para fora da abertura no celular */
@media (max-width: 800px) {
  /* o calendário dos agentes: blocos mais baixos para a legenda e o "Ver de novo" caberem */
  :root .semana { --bloco: clamp(20px, calc((100svh - 660px) / 5), 34px); }
}
@media (max-width: 800px) { :root .pg-servico .ab-corpo { gap: 0; } }
@media (min-width: 801px) and (max-height: 820px) {
  :root .semana { --bloco: clamp(22px, calc((100svh - 620px) / 5), 40px); }
}
/* telefone bem baixo (iPhone SE de 1ª geração, 568px): parágrafo um pouco menor */
@media (max-width: 800px) and (max-height: 600px) {
  :root main > section:first-child .hero-lead, :root main > section:first-child .ab-lead { font-size: .84rem; line-height: 1.38; }
  :root .pilha, :root .elenco, :root .aparelho { margin-top: 6px; }
}
/* calendário dos agentes no celular: quando a altura acaba, ele some num degradê (sem corte seco) */
@media (max-width: 800px) {
  :root .semana { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
}
/* o rótulo da seção (Sett Agenda) fica na própria linha, sem grudar por cima do título */
:root #privacidade > .section-index { position: static; }

/* ------------------------------------------------ celular: o texto começa no topo de toda seção */
/* Pedido de 28/10/2026: no celular nenhuma seção centraliza o conteúdo na
   altura. O título começa logo abaixo do menu, à mesma distância da abertura
   (--abertura-titulo), e o espaço que sobra fica embaixo. */
@media (max-width: 800px) {
  :root main > section.section-grid, :root main > section.hero, :root main > section.ab, :root main > section.port-hero {
    align-content: start; justify-content: flex-start; padding-top: var(--abertura-titulo);
  }
}
/* O que fazemos · automação: um parágrafo só; no celular, agentes das etapas menores e a faixa de controle compacta */
@media (min-width: 1024px) { :root .oque > div > .section-text { grid-column: 1 / -1; max-width: 46rem; } }
@media (min-width: 801px) and (max-height: 820px) { :root .etapas-agentes img { width: clamp(56px, 9svh, 84px); } }
@media (max-width: 800px) {
  :root .etapas-agentes img { width: 56px; margin: 0 0 4px -4px; }
  :root .etapas-agentes li > span { font-size: .78rem; }
  :root .controle { gap: 8px; margin-top: 16px; padding-top: 12px; }
  :root .controle-titulo { font-size: 1.15rem; flex-basis: 100%; }
  :root .controle-lista { flex-direction: column; gap: 6px; }
  :root .controle-lista li { font-size: .88rem; }
  :root .elenco-fila { gap: 6px; margin-top: 24px; }
  :root .elenco-fila img { width: 38px; }
  :root .elenco-fila .fila-ponto { width: 52px; }
}
@media (max-width: 800px) and (max-height: 720px) {
  :root .etapas-agentes img { width: 44px; }
  :root .controle-lista { flex-direction: row; gap: 4px 14px; }
  :root .controle-lista li { font-size: .8rem; }
}
/* O que fazemos · automação em telefone baixo e em notebook baixo */
@media (max-width: 800px) and (max-height: 720px) {
  :root .oque .section-text { font-size: .84rem; }
  :root .etapas-agentes li { padding: 12px 14px; }
  :root .etapas-agentes img { width: 38px; margin-bottom: 0; }
  :root .caminho > li:not(:has(p)) h3 { font-size: 1rem; }
  :root .controle { margin-top: 10px; padding-top: 10px; gap: 6px; }
  :root .controle-titulo { font-size: 1.02rem; }
  :root .controle-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  :root .controle-lista li { font-size: .76rem; gap: 6px; }
  :root .controle-lista li::before { width: 13px; height: 13px; }
  :root .controle-ir { min-height: 36px; font-size: .88rem; }
  :root .oque .nota-lateral { margin-top: 4px; font-size: .75rem; }
  :root .etapas-agentes li > span { display: none; }
}
@media (min-width: 801px) and (max-height: 820px) {
  :root .etapas-agentes img { width: clamp(48px, 7svh, 72px); }
  :root .etapas-agentes li { padding-top: 12px; }
  :root .oque .controle { margin-top: clamp(14px, 2.4svh, 24px); padding-top: 12px; }
}
/* "Um agente para cada tarefa." numa linha só no computador */
@media (min-width: 801px) {
  :root .oque .section-title .linha { display: inline; }
  :root .oque .section-title .linha + .linha::before { content: " "; }
}
/* telefone baixo: o título da faixa e o link dividem a mesma linha */
@media (max-width: 800px) and (max-height: 720px) {
  :root .controle-titulo { flex: 1 1 auto; flex-basis: auto; }
  :root .controle-ir { order: 2; }
  :root .controle-lista { order: 3; flex-basis: 100%; width: 100%; }
}
/* telefone baixo: o link para Automação sai daqui (o mesmo caminho está no menu) */
@media (max-width: 800px) and (max-height: 720px) { :root .controle-ir { display: none; } }
@media (max-width: 800px) and (max-height: 720px) {
  :root .controle-lista li::after { left: 4.5px; width: 3px; height: 7px; margin-top: -5px; }
  /* palco do O que fazemos em telefone baixo: sem a linha de cima, escolha mais fina */
  :root .elenco {
    aspect-ratio: auto; width: 100%; max-height: 260px; padding: 12px; gap: 8px 12px;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr) auto;
  }
  :root .elenco-palco { grid-row: 1; grid-column: 1; }
  :root .elenco-legenda { grid-row: 1; grid-column: 2; align-self: center; text-align: left; }
  :root .elenco-escolha { grid-column: 1 / -1; }
  :root .elenco-escolha button { padding: 8%; border-radius: 8px; }
}