/* Auditoria responsiva (2026-10-22): correções pontuais carregadas por último.
   Não altera as regras aprovadas até 600 px; cada bloco diz a faixa que ajusta. */

/* 901–1100 px (iPad paisagem, notebooks pequenos, tablets grandes): o Manifesto volta às duas
   colunas do desktop em vez de empilhar texto e colagem numa tela larga. */
@media(min-width:901px) and (max-width:1100px){
  .manifesto-reference .manifesto-composition{display:grid;grid-template-columns:54.225% 45.775%;max-width:1900px}
  .manifesto-reference .manifesto-live-figure{grid-column:1;grid-row:1;order:0;width:100%;margin:0}
  .manifesto-reference .manifesto-copy{grid-column:2;grid-row:1;order:0;width:auto;margin:0;padding:6.5vw 3vw 40px 1vw}
  .manifesto-reference .manifesto-copy .eyebrow{margin-bottom:22px}
  .manifesto-reference .manifesto-copy h2{font-size:4.6vw;line-height:1}
  .manifesto-reference .manifesto-body{margin-top:28px}
  .manifesto-reference .manifesto-body p{font-size:16px;line-height:1.45}
  .manifesto-reference .manifesto-body p+p{margin-top:18px}
  .manifesto-reference .manifesto-values{margin-top:28px}
  .manifesto-reference .manifesto-values>div{padding:0 5px}
  .manifesto-reference .manifesto-values svg{width:44px;height:44px}
  .manifesto-reference .manifesto-values h3{font-size:15px}
}

/* 651–1000 px (tablets em retrato): os cinco cards do Ecossistema ficam em 3 + 2,
   com a segunda linha centralizada em vez de deixar a terceira coluna vazia. */
@media(min-width:651px) and (max-width:1000px){
  .ecosystem-reference .eco-cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ecosystem-reference .eco-cards>*{grid-column:span 2}
  .ecosystem-reference .eco-cards>:nth-child(4){grid-column:2 / span 2}
  .ecosystem-reference .eco-cards>:nth-child(5){grid-column:4 / span 2}
}

/* Legibilidade: piso de 12 px para eyebrows, rótulos e legendas que caíam para 10–11 px.
   Os valores fluidos maiores (clamp/vw) continuam valendo no desktop. Fica de fora o texto
   da interface simulada nos cartões da hero, que é ilustração de produto. */
.eyebrow:not(.hero-hand),.intro-eyebrow,.eco-dialog .eco-dialog-eyebrow,.solution-tabs__eyebrow,.solution-tabs__kicker,.sp-impact-label,.sp-types-label,.sp-map figcaption,.eco-media-note,.event-gallery figcaption span{font-size:12px}
.manifesto-copy .eyebrow{font-size:clamp(12px,.88vw,16px)}
.manifesto-values p{font-size:clamp(12px,.77vw,14px)}
@media(max-width:1100px){
  .manifesto-copy .eyebrow,.manifesto-values p{font-size:12px}
  .reference-hero .hero-proof span{font-size:12px}
}

/* Toque: links do rodapé com no mínimo 44 px de largura em qualquer tela (o "FAQ" tinha 27 px). */
.hwf-col a{display:inline-flex;align-items:center;min-width:44px}

/* Telas de toque largas (iPad em paisagem, notebooks touch) recebem o layout de desktop,
   cujos alvos medem 37–41 px. Com ponteiro grosso, todos sobem para 44 px; com mouse, nada muda. */
@media(pointer:coarse){
  .reference-header .brand,#main-nav a,.reference-header .button,.hwf-col a,.hwf-up,.faq-intro .text-link{min-height:44px;align-items:center}
  #main-nav a,.faq-intro .text-link{display:inline-flex}
  .gallery-controls button,.eco-card-link{min-width:44px;min-height:44px}
  .input-shell input,.input-shell select,.input-shell textarea{min-height:44px}
}
/* A partir de 1025 px o conteúdo recebe zoom de 90% (escala.css): 49 px CSS viram 44 px na tela. */
@media(pointer:coarse) and (min-width:1025px){
  .reference-header .brand,.reference-header #main-nav a,.reference-header .button,.reference-hero .hero-actions .button,.hwf-col a,.hwf-up,.faq-intro .text-link,.input-shell input,.input-shell select,.input-shell textarea{min-height:49px}
  .reference-header #main-nav a{min-width:49px;justify-content:center}
  .gallery-controls button,.eco-card-link{min-width:49px;min-height:49px}
  .hwf-col a{min-width:49px}
}

/* 1101–1250 px: header, botões da hero e rótulos dos números escalam com vw e caíam para 11 px. */
@media(min-width:1101px) and (max-width:1250px){
  .reference-header .button,.reference-hero .hero-actions .button,.reference-header #main-nav a,.reference-hero .hero-proof span{font-size:12px}
}

/* Acima de 1025 px o zoom de 90% (escala.css) faz 12 px CSS aparecerem com 10,8 px. Eyebrows,
   rótulos, legendas e rodapé sobem para 13,5 px CSS (= 12,15 px na tela). Botões, parágrafos
   e a interface simulada dos modelos de Solução ficam como estão. */
@media(min-width:1025px){
  .eyebrow:not(.hero-hand),.solution-tabs__eyebrow,.solution-tabs__kicker,.solution-tabs .sm__eyebrow,
  .sp-impact-label,.sp-types-label,.sp-person-meta p,.contact-values .contact-value-text,.field label,.form-caption,.form-microcopy,.gallery-hint,
  .gallery-card figcaption span,.gallery-footer p,.solution-tabs .sm__caption,.sp-map figcaption,.eco-media-note,
  .hwf-brand strong,.hwf-brand span,.hwf-col h3,.hwf-col a,.hwf-up{font-size:13.5px}
  .manifesto-copy .eyebrow{font-size:clamp(13.5px,.88vw,16px)}
  .manifesto-values p{font-size:clamp(13.5px,.77vw,14px);letter-spacing:.05em}
}
/* 1025–1100 px: com 13,5 px, a coluna estreita do Manifesto deixava os três valores com 3, 4 e 3 linhas. */
@media(min-width:1025px) and (max-width:1100px){.manifesto-values p{letter-spacing:.02em}}

/* Hero: círculo desenhado à mão em volta de "9 milhões" (mesmo traço oval do Manifesto, em lima)
   e nota "O que realmente importa" 20 px mais perto. O círculo é um pseudo-elemento porque
   hero-count.js reescreve o conteúdo do <strong> durante a contagem. A seta lima que ligava a nota
   ao número saiu a pedido de Hugo; o círculo passa a fazer essa ligação. */
.reference-hero .hero-proof-key strong{position:relative;isolation:isolate;width:fit-content}
.reference-hero .hero-proof-key strong::after{content:"";position:absolute;left:-16%;top:-30%;width:132%;height:158%;background:url('assets/hero-circle.svg') center / 100% 100% no-repeat;transform:rotate(-3deg);pointer-events:none;z-index:-1}
/* A nota "O que realmente importa" mora dentro do bloco do "9 milhões" e fica centrada embaixo do
   NÚMERO em qualquer largura (antes era empurrada pela borda direita da faixa e ficava 70–80 px à
   esquerda dele). O bloco vira um grid: coluna 1 com a largura exata do número, rótulo ocupando
   as duas colunas e uma 3ª linha sem altura, que serve de área de ancoragem para a nota. Ela sai do
   fluxo; o espaço que ocupava vira padding-bottom da faixa. */
.hl-hero .hero-proof{padding-bottom:104px}
.hl-hero .hero-proof-key{position:relative;display:grid;grid-template-columns:max-content 1fr;grid-template-rows:auto auto 0}
.hl-hero .hero-proof-key>strong{grid-column:1;grid-row:1}
.hl-hero .hero-proof-key>span{grid-column:1 / -1;grid-row:2}
.hl-hero .hero-proof-key .hl-note-meaning{grid-column:1 / 2;grid-row:3 / 4;position:absolute;left:50%;top:22px;right:auto;bottom:auto;display:block;width:5.6em;min-height:0;margin:0;padding:0;transform:translateX(-50%) rotate(-8deg);transform-origin:50% 0;text-align:center;font:400 clamp(23px,2.06vw,37px)/.9 Caveat,cursive;z-index:3}
.hl-hero .hero-proof .hero-proof-key .hl-note-meaning>span{display:block;width:auto;margin:0;font:inherit;line-height:inherit;color:inherit;white-space:normal;text-transform:inherit;transform:none}
.hl-hero .hero-proof-key .hl-note-meaning svg{display:none}
@media(min-width:1101px){.hl-hero .hero-proof{padding-bottom:112px}}
@media(max-width:600px){
  .hl-hero .hero-proof{padding-bottom:100px}
  .hl-hero .hero-proof-key .hl-note-meaning{font-size:clamp(20px,6.5vw,30px)}
}

/* Até 400 px os três números não cabiam nas colunas (de 280 a ~360 px, "4 milhões" invadia a coluna
   vizinha; o defeito já existia antes do círculo). Espaçamentos menores e número fluido entre 15 e 18 px. */
@media(max-width:400px){
  .reference-hero .hero-proof{gap:8px}
  .reference-hero .hero-proof>div{padding-right:8px}
  .hl-hero .hero-proof strong{font-size:clamp(15px,4.9vw,18px)}
}

/* Manifesto, celulares (até 520 px): Confiança / Previsibilidade / Cuidado lado a lado, menores,
   em vez de empilhados em linhas. Vai até 520 porque em 481 px o layout antigo já estourava "Previsibilidade". O texto de apoio passa de caixa-alta para frase normal, que
   ocupa menos largura; o título fluido (10–15 px) é calibrado para "Previsibilidade" caber. */
@media(max-width:520px){
  .manifesto-reference .manifesto-values{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;text-align:center}
  .manifesto-reference .manifesto-values>div{display:block;padding:0 4px}
  .manifesto-reference .manifesto-values svg,.manifesto-reference .manifesto-values>div:nth-child(2) svg{width:34px;height:34px;margin:0 auto 10px}
  .manifesto-reference .manifesto-values h3{font-size:clamp(10px,3.45vw,15px);letter-spacing:-.045em;margin:0 0 6px}
  .manifesto-reference .manifesto-values p{font-size:12px;line-height:1.35;letter-spacing:0;text-transform:none}
  .manifesto-reference .manifesto-values>div+div:before{left:0;right:auto;top:6px;bottom:6px;width:1px;height:auto}
}
/* 280–300 px: "Planejamento" e "tranquilidade" passavam 6% da coluna com 12 px. */
@media(max-width:300px){.manifesto-reference .manifesto-values p{font-size:11px}}

/* Dores, celulares e tablets (até 900 px, onde a nota deixa de ser absoluta e os cartões viram 1–2
   colunas): "Desafios reais, que a gente conhece." vai para a direita e duas setas desenhadas à mão
   apontam para baixo, para os cartões de problemas. O rabisco antigo (que apontava para o vazio)
   só some aqui; de 901 px para cima, o desktop continua como estava. */
.pains-ref .pains-doodle-down{display:none}
@media(max-width:900px){
  .pains-ref .pains-intro{margin-bottom:10px}
  .pains-ref .pains-note{margin-top:14px}
  .pains-ref .pains-note .pains-hand{text-align:right;transform:rotate(-4deg);transform-origin:100% 100%;padding-left:18%}
  .pains-ref .pains-doodle:not(.pains-doodle-down){display:none}
  .pains-ref .pains-doodle.pains-doodle-down{display:block;width:clamp(84px,12vw,108px);height:auto;margin:6px 12% 0 auto;color:var(--purple);fill:none}
}

/* Hero de 601 a 1100 px: os cartões "Inscrições 1.284" / "Inscrição confirmada" e a polaroid ficavam num
   bloco de 330–437 px abaixo do texto, que atrasava quem queria seguir descendo (a hero chegava a
   1.000–1.100 px; no desktop, 760). Saem de cena, como já saíam no celular, e o espaço reservado
   cai para 54 px (a mesma distância da nota ao fim da hero a partir de 1101 px). A foto de fundo fica. */
@media(min-width:601px) and (max-width:1100px){
  .hl-hero .hl-card-stack,.hl-hero .hl-polaroid{display:none}
  .hl-hero{padding-bottom:54px}
}

/* ===== Solução no celular (até 700 px): abas em uma linha e fixas, texto compacto, mockup menor =====
   Antes: seção de 2.005 px (aba Inscrição: texto 630 + mockup 750), abas em grade 2×2 (122 px) que
   ficavam lá em cima, e a altura mudava até 350 px entre as abas. Nenhuma informação foi removida:
   mudam tamanhos, espaços e a disposição das abas. Tablet e desktop não mudam. */
@media(max-width:700px){
  /* position:sticky não funciona dentro de overflow:hidden; clip recorta igual, sem criar rolagem. */
  .solution-tabs{overflow:clip}

  /* Abas: uma linha, ícone sobre o nome, fixas no topo enquanto a seção está na tela. */
  .solution-tabs.solution-tabs .solution-tabs__tablist{position:sticky;top:8px;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:22px;padding:3px;border-radius:16px;background:#1c1243f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .solution-tabs.solution-tabs .solution-tabs__tab{flex-direction:column;gap:3px;min-height:54px;padding:6px 2px;border-radius:13px;font-size:12px;line-height:1.1;letter-spacing:-.01em}
  .solution-tabs.solution-tabs .solution-tabs__tab svg{width:20px;height:20px}
  /* Em telas estreitas "Pagamento" precisa de menos que 12 px para caber na coluna da barra. */
  @media(max-width:340px){.solution-tabs.solution-tabs .solution-tabs__tab{font-size:11px;letter-spacing:-.02em}}
  @media(max-width:300px){.solution-tabs.solution-tabs .solution-tabs__tab{font-size:10px;padding-inline:0}}
  /* Em 481–700 px o mockup ocupava a largura toda e crescia junto (até 816 px de altura). */
  .solution-tabs .sm__registration-shell,.solution-tabs .sm__payment-shell,.solution-tabs .sm__insights-shell,.solution-tabs .sm__support-shell{width:min(100%,440px)}

  /* Texto: mesmo conteúdo, mais denso. */
  .solution-tabs .solution-tabs__panel{gap:18px}
  .solution-tabs .solution-tabs__copy{padding-top:16px}
  .solution-tabs .solution-tabs__kicker{margin-bottom:6px}
  .solution-tabs h3{font-size:clamp(23px,6.4vw,28px);line-height:1.12}
  .solution-tabs .solution-tabs__lead{margin-top:10px;font-size:15px;line-height:1.45}
  .solution-tabs .solution-tabs__features{gap:9px;margin-top:16px}
  .solution-tabs .solution-tabs__features li{gap:11px;min-height:0}
  .solution-tabs .solution-tabs__features img,.solution-tabs .solution-tabs__feature-icon{width:40px;height:41px;border-radius:11px}
  .solution-tabs .solution-tabs__feature-icon svg{width:22px;height:22px}
  .solution-tabs .solution-tabs__features strong{font-size:15px;line-height:1.25}
  .solution-tabs .solution-tabs__features span:not(.solution-tabs__feature-icon){margin-top:2px;font-size:13.5px;line-height:1.35}
  .solution-tabs .solution-tabs__link{font-size:15px}

  /* Mockups: menos respiro interno; os textos e valores de exemplo continuam todos lá. */
  .solution-tabs .sm__canvas{padding:12px}
  .solution-tabs .sm__eyebrow{margin-bottom:9px;font-size:12px}
  .solution-tabs .sm__caption{margin-top:8px;font-size:13px}
  .solution-tabs .sm__registration-body,.solution-tabs .sm__payment-body{padding:12px}
  .solution-tabs .sm__row-heading{margin-bottom:8px}
  .solution-tabs .sm__ticket{min-height:0;margin-top:6px;padding:7px 11px}
  .solution-tabs .sm__total{margin:10px 0 8px}
  .solution-tabs .sm__demo-cta{min-height:44px;padding:9px 14px}
  .solution-tabs .sm__small-label{margin-bottom:9px}
  .solution-tabs .sm__payment-choices{gap:6px}
  .solution-tabs .sm__payment-choice{min-height:0;padding:8px 12px}
  .solution-tabs .sm__payment-summary{margin-top:11px}
  .solution-tabs .sm__payment-summary--total{margin:8px 0 10px}
  .solution-tabs .sm__payment-top,.solution-tabs .sm__dashboard-top,.solution-tabs .sm__support-top{padding:12px}
  .solution-tabs .sm__kpis{padding:11px;gap:6px}
  .solution-tabs .sm__kpi{gap:3px;padding:9px 10px}
  .solution-tabs .sm__chart-card{margin-inline:11px;padding:11px 8px 8px}
  .solution-tabs .sm__insights-shell{padding-bottom:14px}
  .solution-tabs .sm__chat-area{gap:10px;padding:14px 14px 16px}
  .solution-tabs .sm__bubble{padding:9px 12px}
  .solution-tabs .sm__quick-help{margin:11px 12px 0;padding:9px 12px 2px}
  .solution-tabs .sm__quick-help>strong{padding-bottom:5px}
}

/* ===== Depoimentos: carrossel até 900 px (testimonials-carousel.js) =====
   Até 900 px os três cartões ficam numa fileira horizontal com snap, mostrando um pedaço do próximo;
   setas, pontos e pausa ficam abaixo. Acima de 900 px, ou sem JS (sem .is-carousel), nada muda. */
.sp-carousel-controls{display:none}
@media(max-width:900px){
  .sp-testimonials.is-carousel{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(calc(100% - 32px),560px);gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sp-testimonials.is-carousel::-webkit-scrollbar{display:none}
  .sp-testimonials.is-carousel .sp-testimonial{scroll-snap-align:start}
  .sp-testimonials.is-carousel:focus-visible{outline:3px solid #b794ff;outline-offset:4px;border-radius:16px}
  .sp-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:12px}
  .sp-carousel-controls[hidden]{display:none}
  .sp-carousel-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #77688988;border-radius:50%;background:#1d1037e8;color:#fff;cursor:pointer}
  .sp-carousel-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .sp-carousel-toggle svg{width:18px;height:18px}
  .sp-carousel-toggle[aria-pressed="true"] svg{fill:currentColor}
  .sp-carousel-btn:focus-visible,.sp-carousel-dot:focus-visible{outline:3px solid #b794ff;outline-offset:2px}
  .sp-carousel-dots{display:flex;align-items:center;justify-content:center}
  .sp-carousel-dot{display:grid;place-items:center;width:28px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
  .sp-carousel-dot::before{content:"";display:block;width:8px;height:8px;border-radius:99px;background:#ad9abc88;transition:width .25s ease,background .25s ease}
  .sp-carousel-dot[aria-current="true"]::before{width:22px;background:#d4f542}
}
@media(prefers-reduced-motion:reduce){.sp-carousel-dot::before{transition:none}}

/* Setas (↗ ↔ ...) no iPhone: o iOS troca esses caracteres por emojis coloridos quando a fonte da página não os tem.
   Pede a forma de texto (também há U+FE0E depois de cada seta no HTML e no app.js). */
html{font-variant-emoji:text}

/* Campo de data no iPhone: o Safari dá ao <input type="date"> uma largura própria (e centraliza o valor), então ele
   escapava da borda do cartão do formulário. Tira a aparência nativa, trava a largura na coluna e alinha à esquerda,
   como os outros campos. O seletor de data nativo continua abrindo ao tocar. */
.field input[type="date"]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;text-align:left}
.field input[type="date"]::-webkit-date-and-time-value{text-align:left;min-height:1.3em;margin:0}
.field input[type="date"]::-webkit-datetime-edit{padding:0}