/* Tatuí Tech · base compartilhada por todas as páginas (Home, cases e futuras páginas internas).
   Tokens, fontes, reset, superfícies de vidro, botão cápsula e ícones sociais. Origem: hero-mobile/index.html (aprovado). */
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
/* Reserva com métricas da Manrope (medidas com textos reais do site): enquanto a Manrope carrega, a Arial ocupa o mesmo espaço
   e a troca não desloca o layout (CLS). Dois pesos porque a largura relativa muda: 500 → 104,83%, 700 → 100,9%. */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Arimo"); font-weight: 200 599; size-adjust: 104.83%; ascent-override: 102.07%; descent-override: 28.62%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"); font-weight: 600 800; size-adjust: 100.9%; ascent-override: 106.05%; descent-override: 29.73%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #0b0f14;
  --off: #f5f2ed;
  --terra: #d5622a;
  --copper-l: #de9c6b;
  --copper-press: #cd8752; /* cobre-claro pressionado (ink sobre ele ≥ 6:1) */

  /* ---------- Tokens de motion ---------- */
  --dur-press: 90ms;      /* compressão no clique/toque */
  --dur-fast: 180ms;      /* cor, opacidade, feedback */
  --dur-base: 320ms;      /* superfícies e sublinhados */
  --dur-reveal: 460ms;    /* troca de texto e seta */
  --dur-settle: 650ms;    /* volta do magnetismo */
  --dur-player: 560ms;    /* abertura do player */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-emph: cubic-bezier(.2, 0, 0, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shift-xs: 2px;
  --shift-sm: 4px;
  --shift-md: 12px;
  --magnet-strength: .22; /* fração da distância do cursor */
  --magnet-max: 6px;      /* deslocamento máximo do CTA */
  --magnet-radius: 56px;  /* alcance além da borda do botão */
  --press-scale: .97;
  --focus-ring: 2px solid var(--copper-l);
  --focus-offset: 3px;

  /* ---------- Layout comum ---------- */
  --gutter: 20px;
  --header-h: 72px;
}

@media (orientation: landscape) and (max-height: 559px) { :root { --header-h: 60px; } }
@media (min-width: 900px) and (min-height: 560px) { :root { --gutter: 80px; --header-h: 96px; } .desk { display: revert !important; } .mob { display: none !important; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--off); font: 500 16px/1.5 "Manrope", "Manrope Fallback", system-ui, sans-serif; }
a, button, summary { color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.desk { display: none !important; }

/* ---------- Superfícies de vidro: Liquid Glass do iOS 27 (pedido do usuário, 04/11/2026; substitui o vidro iOS 26 de 03/11) ----------
   Um só material, em tokens, para todo vidro do site: .glass e .glass--clear (aqui), a cápsula e o painel do menu (header.css) e os
   botões sobre mídia dos labs (explorer.css, mosaico.css). O que o iOS 27 mudou, segundo a Apple (apple.com/os/ios, consultado em
   04/11/2026): "refração mais uniforme e contraste melhor", e um controle que vai do ultraclaro ao totalmente tingido. Na web:
   - regular (.glass: barras, menu, seletor, cartões com texto): ink a 68%, sem clarear o fundo. Mais transparente que a 1ª versão
     (80%), a pedido do usuário em 04/11; 68% é o menor valor medido com texto ≥ 4,5:1 sobre o hero (testes/vidro-ios27/);
   - adaptativo, como o Liquid Glass: sobre seção clara (.header.is-on-light, detectada no header.js) a cápsula adensa para 80%;
   - clara (.glass--clear: controles sobre vídeo e foto): ink a 18%. O hero já escurece o vídeo sob os botões (contraste ≥ 15:1);
   - aro especular mais uniforme (menos diferença entre a luz de cima e a de baixo) e realce do alto mais suave;
   - com prefers-contrast: more, totalmente tingido e com aro visível; com transparência reduzida, ou sem backdrop-filter, sólido.
   Sem refração por SVG: só o Chromium aceita url() no backdrop-filter, e o custo pesa no celular.
   Só cor e sombra mudam em hover (--glass-hover, --glass-clear-hover); o contêiner não se move. */
:root {
  --glass-solid: rgb(26 30 36 / .96);
  --glass-tint: rgb(16 20 26 / .68);
  --glass-clear-tint: rgb(11 15 20 / .18);
  --glass-hover: rgb(40 44 50 / .78);
  --glass-clear-hover: rgb(72 76 82 / .3);
  --glass-rim: inset 1px 1px 0 -.25px rgb(255 255 255 / .34), inset -1px -1px 0 -.25px rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 0 16px rgb(255 255 255 / .04);
  --glass-shadow: 0 10px 30px -12px rgb(0 0 0 / .5);
  --glass-bg: var(--glass-solid); --glass-clear-bg: var(--glass-solid); --glass-filter: none; --glass-clear-filter: none; /* sem backdrop-filter: sólido */
  --glass-on-light: var(--glass-solid); /* cor da cápsula sobre seção clara */
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: radial-gradient(120% 100% at 18% 0%, rgb(255 255 255 / .06), rgb(255 255 255 / 0) 55%), var(--glass-tint);
    --glass-clear-bg: radial-gradient(120% 100% at 18% 0%, rgb(255 255 255 / .12), rgb(255 255 255 / 0) 55%), var(--glass-clear-tint);
    --glass-filter: blur(14px) saturate(1.8);
    --glass-clear-filter: blur(6px) saturate(1.8);
    --glass-on-light: rgb(16 20 26 / .8);
  }
}
@media (prefers-contrast: more) {
  :root { --glass-tint: rgb(16 20 26 / .92); --glass-clear-tint: rgb(11 15 20 / .7); --glass-hover: rgb(40 44 50 / .96); --glass-clear-hover: rgb(40 44 50 / .8); --glass-on-light: rgb(16 20 26 / .92);
    --glass-rim: inset 0 0 0 1px rgb(255 255 255 / .42), inset 0 0 16px rgb(255 255 255 / .04); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--glass-solid); --glass-clear-bg: var(--glass-solid); --glass-filter: none; --glass-clear-filter: none; --glass-on-light: var(--glass-solid); }
}
.glass { border: 0; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--glass-rim), var(--glass-shadow); }
.glass--clear { background: var(--glass-clear-bg); -webkit-backdrop-filter: var(--glass-clear-filter); backdrop-filter: var(--glass-clear-filter); }

/* ---------- Botão cápsula (CTA principal e CTAs "Vamos conversar") ----------
   O contêiner nunca se move: sem magnetismo, translate ou scale. Tudo acontece dentro da cápsula. */
.btn { position: relative; display: inline-flex; border-radius: 999px; text-decoration: none; white-space: nowrap; color: var(--ink); }
.btn__inner { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px 0 22px; border-radius: inherit; overflow: hidden; isolation: isolate;
  background: var(--off); font-weight: 600; font-size: 16px; box-shadow: inset 0 0 0 0 rgb(11 15 20 / 0); transition: box-shadow var(--dur-fast) var(--ease-out); }
.btn__fill { position: absolute; inset: -2px; z-index: -1; border-radius: 45% 45% 0 0 / 60% 60% 0 0; background: var(--copper-l);
  transform: translateY(104%); transition: transform var(--dur-reveal) var(--ease-out), border-radius var(--dur-reveal) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.btn__text { position: relative; display: block; line-height: 1.25; }
.btn__arrow { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--off); overflow: hidden; }
.btn__arrow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgb(245 242 237 / .18); transform: scale(0); transition: transform var(--dur-base) var(--ease-out); }
.btn__arrow svg { position: relative; grid-area: 1 / 1; transition: transform var(--dur-reveal) var(--ease-out); }
.btn__arrow svg + svg { transform: translate(-150%, 150%); }
.btn--sm .btn__inner { min-height: 44px; padding: 0 5px 0 18px; font-size: 15px; gap: 10px; }
.btn--sm .btn__arrow { width: 34px; height: 34px; }
/* Hover (só ponteiro fino) e foco por teclado: superfície sobe, seta troca dentro do círculo */
.btn:focus-visible { outline: none; }
.btn:focus-visible .btn__inner { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.btn:focus-visible .btn__fill { transform: none; border-radius: 0; }
.btn:focus-visible .btn__arrow svg:first-child { transform: translate(150%, -150%); }
.btn:focus-visible .btn__arrow svg + svg { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__fill { transform: none; border-radius: 0; }
  .btn:hover .btn__arrow svg:first-child { transform: translate(150%, -150%); }
  .btn:hover .btn__arrow svg + svg { transform: none; }
}
/* Pressão: profundidade e tom mais escuros dentro da cápsula, sem mexer no tamanho nem na posição */
.btn:active .btn__fill, .btn.is-pressed .btn__fill { transform: none; border-radius: 0; background: var(--copper-press); transition-duration: var(--dur-press); }
.btn:active .btn__inner, .btn.is-pressed .btn__inner { box-shadow: inset 0 2px 6px rgb(11 15 20 / .28); transition-duration: var(--dur-press); }
.btn:active .btn__arrow::before, .btn.is-pressed .btn__arrow::before { transform: scale(1); transition-duration: var(--dur-press); }
.btn--block { display: flex; width: 100%; }
.btn--block .btn__inner { width: 100%; justify-content: center; min-height: 52px; padding: 0 6px; font-size: 16px; }
/* (03/11) celular: todo CTA ocupa a largura toda do conteúdo, com o texto centralizado (o do header é outro componente) */
@media (max-width: 699px) {
  .btn:not(.btn--sm) { display: flex; width: 100%; }
  .btn:not(.btn--sm) .btn__inner { width: 100%; justify-content: center; min-height: 52px; padding: 0 6px; }
}

/* ---------- Ícones sociais (menu e futuro footer) ---------- */
.socials ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(245 242 237 / .24); color: var(--off);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
@media (max-width: 359px) { .social { width: 40px; height: 40px; } } /* 6 × 40 + 5 × 8 = 280 px: os seis cabem em 320 px */
.social svg { width: 18px; height: 18px; fill: currentColor; transition: transform var(--dur-base) var(--ease-out); }
.social:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* Pressão: só o ícone comprime; o círculo mantém posição e tamanho */
.social:active, .social.is-pressed { background: rgb(245 242 237 / .14); transition-duration: var(--dur-press); }
.social:active svg, .social.is-pressed svg { transform: scale(.92); transition-duration: var(--dur-press); }
@media (hover: hover) and (pointer: fine) { .social:hover { background: var(--off); border-color: var(--off); color: var(--ink); } .mail:hover { color: var(--copper-l); } }

@keyframes rise { from { opacity: 0; transform: translateY(var(--shift-md)); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}