/* Estilos globais — TOAST agência
   Componentes reutilizáveis em todas as páginas do site. */

body {
  font-family: var(--font-text);
  letter-spacing: var(--tracking-text);
  color: var(--color-fg);
  background: var(--color-bg);
}

h1, h2, h3 {
  font-family: var(--font-title);
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  line-height: 0.9;
}

.subtitle {
  font-family: var(--font-subtitle);
  font-weight: 700;
  letter-spacing: var(--tracking-subtitle);
  text-transform: uppercase;
}

.detail {
  font-family: var(--font-detail);
  letter-spacing: var(--tracking-detail);
  font-size: 1.4rem;
  line-height: 1.3;
}

/* Marquee/ticker — texto corrido infinito, usado em blocos de impacto
   (hero, mural de clientes). Duas cópias de `.marquee__group` lado a lado,
   deslocadas -50% pra criar o loop sem costura. */

.marquee {
  overflow: hidden;
  display: flex;
}

/* A trilha contém 2 cópias do conteúdo lado a lado — a animação precisa
   parar em -50% (largura de 1 cópia), não -100% (largura das 2 cópias
   juntas), senão as duas saem inteiras de tela antes do reset e o loop
   "trava e reseta" em vez de ficar contínuo. */
.marquee__track {
  display: flex;
  flex-shrink: 0;
  animation: marquee-scroll 26s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee__item {
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: var(--space-6);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* Variante ticker: frase de apoio, menor, uppercase */
.marquee--ticker .marquee__item {
  font-family: var(--font-subtitle);
  font-weight: 700;
  letter-spacing: var(--tracking-subtitle);
  text-transform: uppercase;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
}
.marquee--ticker .marquee__track { animation-duration: 18s; }

/* Variante clientes: logos reais (sessão 6, extraídas de toastagencia.com.br),
   ritmo mais lento. Altura fixa + largura livre porque cada logo tem
   proporção própria (de quadrada a bem larga) — object-fit:contain evita
   esticar. P&B em repouso → cor real no hover/foco, mesmo padrão do
   .photo-card__frame--mono-hover (nunca duotone/filtro que descaracterize). */
.marquee--logos .marquee__item {
  height: clamp(90px, 13.5vw, 162px);
  padding-right: var(--space-8);
}

.marquee__logo {
  width: auto;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--ease-swift), opacity var(--ease-swift);
}

.marquee__logo:hover,
.marquee__logo:focus-visible {
  filter: grayscale(0);
  opacity: 1;
}

.marquee--logos .marquee__track { animation-duration: 60s; }

/* Header / navegação principal — header horizontal fixo no topo (não sticky:
   ver nota de inércia na rolagem em DESIGN.md/main.js — `.site-header` está
   nos `skipSelectors` do main.js pelo mesmo motivo). */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-orange);
}


/* Espaço entre o header fixo e o conteúdo real, em toda página do site
   (não no style guide, que usa .sg-layout). Fica aqui, não em `body`: o
   conteúdo vive dentro do wrapper `position: fixed` da inércia de rolagem
   (main.js), que ignora padding de ancestral — ver DESIGN.md. */
.page-layout {
  padding-top: calc(var(--header-height) + var(--space-8));
}

/* Cancela o padding-top de .page-layout na PRIMEIRA seção de qualquer
   página — ela deve ficar colada direto sob o header, sem a faixa branca
   do fundo do body aparecendo entre os dois. Regra estrutural (não por
   classe) pra valer em toda página automaticamente, sem repetir em cada
   uma. */
.page-layout main > section:first-child {
  margin-top: calc(-1 * var(--space-8));
}

/* Bloco de conteúdo full-bleed por seção — mesmo padrão do style guide
   (cor sólida de fundo por assunto), reutilizável em qualquer página real. */
.section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  padding-left: max(var(--space-4), calc((100% - var(--content-max)) / 2));
  padding-right: max(var(--space-4), calc((100% - var(--content-max)) / 2));
}

/* Bloco de frase de impacto isolada (ex. "Transformamos engajamento em
   seguidores") — centralizado, sem section-head. */
.headline-block {
  text-align: center;
}

.section--black { background: var(--color-black); color: var(--color-white); }
.section--orange { background: var(--color-orange); color: var(--color-black); }
.section--lime { background: var(--color-lime); color: var(--color-black); }
.section--pink { background: var(--color-pink); color: var(--color-black); }
.section--white { background: var(--color-white); color: var(--color-black); }
.section--gray { background: #F2F2F0; color: var(--color-black); }

/* Bloco de hero — marquee gigante + subtítulo, centralizado, sem padding
   lateral (o marquee precisa bater de ponta a ponta; o subtítulo se
   contém sozinho via max-width). */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-8) 0;
  /* Segura um instante no vídeo ao rolar por perto (scroll-snap-type:y
     proximity está em html, reset.css) — desconta a altura do header fixo
     pra centralizar considerando a área realmente visível. */
  scroll-snap-align: center;
  scroll-margin-top: var(--header-height);
}

/* Vídeo de fundo do hero — toca desde o carregamento, sem fade próprio (a
   transição "frase migra pro vídeo" é papel da seção 1/`.intro`, não do
   hero em si). `object-fit:cover` pra cobrir a seção inteira sem distorcer. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Seção 1 — abertura laranja cheia, frase centralizada. Seção normal do
   fluxo de rolagem (a inércia de rolagem do main.js já dá a suavidade ao
   passar pra seção 2 — sem timer/JS próprio, é só rolar). Cola direto sob
   o header, como o hero fazia antes dela. */
.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-orange);
  color: var(--color-black);
}

/* Fixo na tela (não rola com a seção 1) desde o início — main.js interpola
   `top`/`font-size` a cada frame (requestAnimationFrame), com lerp, direto
   da % de scroll pela seção 1. Não usa CSS `transition`: setar inline style
   por frame + transition ao mesmo tempo faz os dois brigarem (double-
   smoothing), fica pior que só um dos dois. Mesma cor de fundo dos dois
   pontos (laranja), então a transição é uma continuação visual, não um
   corte. */
.intro__title {
  position: fixed;
  left: 50%;
  top: 50vh;
  z-index: 25;
  transform: translate(-50%, -50%);
  font-family: var(--font-title);
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-black);
  font-size: clamp(3rem, 11vw, 8rem);
  white-space: nowrap;
}

/* Seção só de marquee (mural de clientes, frase-ticker) — full-bleed,
   sem a coluna de conteúdo de `.section` (o texto corrido não deve parar
   nos 1100px, senão perde a energia de "ticker infinito"). */
.ticker-section {
  padding: var(--space-4) 0;
}

/* Cabeçalho de seção — rótulo (Grifter) + título, centralizado acima do
   conteúdo (accordion, formulário, grid). Reutilizável em qualquer página. */
.section-head {
  text-align: center;
  margin-bottom: var(--space-6);
}

.section-head .subtitle {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}

/* Título da seção precisa ler claramente maior que o rótulo acima dele
   (ex. "Toast Makers gerenciam" → "Personalidades") — sem isso o h2 cai no
   tamanho padrão do navegador (~1.5em), pouco maior que o rótulo. */
.section-head h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

/* Texto de abertura institucional (ex. "Quem somos") — parágrafo(s) maiores,
   centralizados, largura de leitura contida. */
.lead-quote {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 1.25rem;
  text-align: center;
}
.lead-quote p + p {
  margin-top: var(--space-3);
}

/* Roster de pessoas (ex. Toast Makers) — nome/cargo/bio em grid, texto
   alinhado à esquerda dentro do card mesmo em seção centralizada. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: left;
}

.people-card__photo {
  width: 100%;
  max-width: 240px;
  margin-bottom: var(--space-3);
}

.people-card__name {
  margin-bottom: var(--space-1);
}

.people-card__role {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.people-card p + p {
  margin-top: var(--space-2);
}

@media (max-width: 720px) {
  .people-grid { grid-template-columns: 1fr; }
}

.people-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .people-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .people-grid--3col { grid-template-columns: 1fr; }
}

/* FAQ — pergunta/resposta simples, sem o padrão "case" (accordion+overlay
   é reservado pra listagens de cases/personalidades, ver DESIGN.md). */
.faq-list {
  max-width: 70ch;
  margin: 0 auto;
  text-align: left;
}
.faq-item + .faq-item {
  margin-top: var(--space-4);
}
.faq-item p:first-child {
  margin-bottom: var(--space-1);
}

.site-header__logo img {
  height: 32px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Variante usada no style guide (links internos: Cores/Tipografia/etc.) —
   centralizada na barra, com a logo continuando fixa à esquerda. */
.site-nav--sg {
  margin: 0 auto;
}

.site-nav a,
.site-nav__dropdown-trigger {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color var(--ease-swift);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav__dropdown-trigger:hover,
.site-nav__dropdown-trigger:focus-visible {
  color: var(--color-lime);
}

/* Trigger do dropdown "Cases": botão, não link — hoje não existe uma página
   própria pra "Cases" em si (o site antigo tinha uma página órfã só pra isso,
   um dos bugs mapeados no rebuild), o dropdown abre direto em Campanhas/
   Personalidades/Entretenimento. */
.site-nav__dropdown-trigger {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-2);
  min-width: 180px;
  background: var(--color-lime);
  padding: var(--space-1);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--ease-smooth), transform var(--ease-smooth), visibility var(--ease-smooth);
}

.site-nav__dropdown:hover .site-nav__dropdown-panel,
.site-nav__dropdown:focus-within .site-nav__dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__dropdown-panel a {
  display: block;
  color: var(--color-black);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  transition: background-color var(--ease-swift);
}

.site-nav__dropdown-panel a:hover,
.site-nav__dropdown-panel a:focus-visible {
  background-color: rgba(0,0,0,.1);
  color: var(--color-black);
}

/* Footer */

.site-footer {
  background: var(--color-orange);
  padding: var(--space-6) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-footer__social {
  display: flex;
  gap: var(--space-2);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  transition: background-color var(--ease-swift), color var(--ease-swift);
}

.site-footer__social svg {
  width: 17px;
  height: 17px;
  display: block;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background: var(--color-lime);
  color: var(--color-black);
}

/* Botão padrão */

.btn {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-lime);
  color: var(--color-black);
}

.btn--primary:hover {
  opacity: 0.85;
}

/* Aplicação de imagens
   Fotografia sempre na íntegra — sem duotone, sem overlay de cor, sem filtro que
   descaracterize a foto. Único tratamento permitido: P&B no rest state (opcional,
   pra grids densos/estáticos), com a cor real voltando no hover/focus/click.
   Regra: fotografia = cantos retos (grid editorial); UI (botão, swatch, dropdown) = arredondado.
   Isso separa visualmente "conteúdo" de "interface". */

.photo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.photo-card__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-black);
}

.photo-card__frame--square { aspect-ratio: 1 / 1; }
.photo-card__frame--wide { aspect-ratio: 16 / 10; }

.photo-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cor (padrão): foto na íntegra, sem tratamento — use sempre que não precisar do efeito de hover */
.photo-card__frame--color img { filter: none; }

/* P&B → cor no hover: rest state em P&B (uso em grids densos/estáticos), cor real
   entra ao interagir (hover/focus/click) — nunca duotone, só a foto verdadeira. */
.photo-card__frame--mono-hover img {
  filter: grayscale(1);
  transition: filter 0.35s ease;
}

.photo-card__frame--mono-hover:hover img,
.photo-card__frame--mono-hover:focus-within img,
.photo-card__frame--mono-hover.is-active img {
  filter: grayscale(0);
}

/* Reset — quando o frame é um <button> (necessário pra suportar toque/click, já que
   telas sem mouse não têm :hover) */
button.photo-card__frame {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.photo-card__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.photo-card__name {
  font-family: var(--font-subtitle);
  font-weight: 700;
  letter-spacing: var(--tracking-subtitle);
  text-transform: uppercase;
  font-size: 0.95rem;
}

.photo-card__role {
  font-family: var(--font-text);
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.55);
}

/* Accordion "VER MAIS" — padrão de listagem de cases/personalidades/entretenimento */

.accordion {
  border-top: 2px solid currentColor;
}

.accordion__item {
  border-bottom: 2px solid currentColor;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  font-size: clamp(1.25rem, 3.5vw, 2.25rem);
  line-height: 1;
}

.accordion__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.5em 1em;
  border: 2px solid currentColor;
  border-radius: 999px;
  transition: background-color var(--ease-swift);
}

/* A faixa inteira do item carrega a cor do case, não só um acento no hover do botão. */
.accordion__item--orange { background: var(--color-orange); color: var(--color-black); }
.accordion__item--pink { background: var(--color-pink); color: var(--color-black); }
.accordion__item--lime { background: var(--color-lime); color: var(--color-black); }
.accordion__item--black { background: var(--color-black); color: var(--color-white); }
.accordion__item--white { background: var(--color-white); color: var(--color-black); }

.accordion__trigger:hover .accordion__icon,
.accordion__trigger:focus-visible .accordion__icon {
  background: rgba(0, 0, 0, 0.12);
}

/* Overlay full-screen — abre ao clicar num case/personalidade, fecha e volta pro grid.
   Client-side só, não muda a URL (decisão do cliente). */

.case-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  color: var(--color-black);
  visibility: hidden;
  clip-path: inset(50% 50% 50% 50%);
  /* Fechar é mais rápido que abrir (0.4s vs os 0.7s de --ease-overlay) —
     abrir com calma revela conteúdo novo, mas segurar 0.7s pra fechar
     (voltar pro grid, sem nada novo pra ver) só parecia lento, ainda mais
     com a galeria de fotos maior chamando atenção durante o encolhimento. */
  transition: clip-path 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s, background-color var(--ease-swift), color var(--ease-swift);
  overflow-y: auto;
}

/* Fundo do overlay acompanha a cor do case clicado (mesma paleta do
   .accordion__item--{cor}) — em vez de ficar sempre branco, destoando da
   cor do item durante a animação de abertura/fechamento. */
.case-overlay--orange { background: var(--color-orange); color: var(--color-black); }
.case-overlay--pink { background: var(--color-pink); color: var(--color-black); }
.case-overlay--lime { background: var(--color-lime); color: var(--color-black); }
.case-overlay--black { background: var(--color-black); color: var(--color-white); }
.case-overlay--white { background: var(--color-white); color: var(--color-black); }

.case-overlay[data-open="true"] {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--ease-overlay), visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .case-overlay { transition: visibility 0s linear; clip-path: inset(0 0 0 0) !important; }
}

.case-overlay__close {
  align-self: flex-end;
  margin: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 2px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color var(--ease-swift), color var(--ease-swift);
}

.case-overlay__close:hover {
  background: rgba(128, 128, 128, 0.25);
}

.case-overlay__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 var(--space-4) var(--space-8);
}

.case-overlay__content[hidden] {
  display: none;
}

.case-overlay__text {
  flex: 0 1 460px;
  max-width: 70ch;
}

.case-overlay__content h3 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: var(--space-3);
}

.case-overlay__content p + p {
  margin-top: var(--space-2);
}

/* Galeria — até 3 fotos flutuantes, encostadas na direita do overlay, longe
   do texto. Ocupa uma área bem maior (largura e altura) do que o cluster
   original — pedido do usuário via desenho: fotos maiores, espalhadas por
   praticamente toda a altura disponível, não só um clusterzinho pequeno no
   topo. Sobreposição mínima só pro efeito de "espalhado". Placeholder até
   termos as fotos reais (ver PROJETO.md). */
.case-overlay__gallery {
  position: relative;
  flex: 0 0 52%;
  max-width: 760px;
  min-height: 640px;
  margin-left: auto;
}

.case-overlay__gallery-photo {
  position: absolute;
  width: 44%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.case-overlay__gallery-photo--1 {
  left: 2%;
  top: 0;
  z-index: 3;
  transform: rotate(-3deg);
}

.case-overlay__gallery-photo--2 {
  left: 50%;
  top: 10%;
  z-index: 2;
  transform: rotate(2deg);
}

.case-overlay__gallery-photo--3 {
  left: 24%;
  top: 48%;
  z-index: 1;
  transform: rotate(-2deg);
}

@media (max-width: 860px) {
  .case-overlay__content { flex-direction: column; }
  .case-overlay__text { max-width: none; flex-basis: auto; }
  .case-overlay__gallery { max-width: none; flex-basis: auto; width: 100%; margin-left: 0; min-height: 240px; }
}

/* Campos de formulário — usado no rodapé de toda página (contato) */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-field label svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.form-field input,
.form-field textarea {
  border: 2px solid var(--color-black);
  border-radius: 8px;
  padding: var(--space-2);
  font-family: var(--font-text);
  font-size: 1rem;
  background: var(--color-white);
  color: var(--color-black);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-orange);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

/* Grade do formulário — Nome/E-mail/WhatsApp lado a lado, Mensagem ocupa a
   largura toda embaixo (otimiza espaço vertical) */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: 0 auto;
  text-align: left;
}

.form-grid .form-field--full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}