/* =====================================================================
   tokens-trento.css — design system Trento Produções, v0.1 (09/09/2026)
   FONTE DE VERDADE dos valores. O porquê está em
   docs/03-frontend/design-system-trento.md. Divergiram, este arquivo ganha.

   Status: PROVISÓRIO — decidido pelo Rafa, ainda não validado pelo Pedro.

   Consumidores:
     - site-teste-2/home/home.css        (home standalone; anexo público)
     - odoo/views/calendario-agendamento.html (bloco do calendário em /shop)
     - odoo/views/marca-trento.css       (telas do tema: carrinho, checkout,
                                          login, portal, 404 — via website.layout)

   Contrastes medidos por script (WCAG 2.x). ✅ = passa para texto normal (≥4,5:1).
   ===================================================================== */

:root {
  /* ---- par base (Rafa) -------------------------------------------- */
  --tr-claro:  #FFFFF7;   /* fundo do fluxo e das dobras claras */
  --tr-escuro: #141210;   /* hero, palco do vídeo, rodapé          */

  /* ---- destaque: terracota do papel do estúdio (Rafa) -------------- */
  --tr-destaque:             #8A4A2B;  /* sobre claro  — 6,8:1 ✅ */
  --tr-destaque-hover:       #7A3F24;  /*              — 8,2:1 ✅ */
  --tr-destaque-claro:       #D08B63;  /* sobre escuro — 6,7:1 ✅ */
  --tr-destaque-claro-hover: #DDA07C;  /*              — 8,4:1 ✅ */

  /* ---- neutros sobre CLARO ----------------------------------------- */
  --tr-tinta:        #141210;  /* 18,6:1 ✅ */
  --tr-tinta-2:      #5F5A52;  /*  6,8:1 ✅ */
  --tr-tinta-3:      #8A8479;  /*  3,7:1 ⚠️ só ≥18px ou decoração */
  --tr-linha:        #E4DFD4;
  --tr-superficie:   #F6F2E9;
  --tr-superficie-2: #EEE9DE;

  /* ---- neutros sobre ESCURO ---------------------------------------- */
  --tr-tinta-inv:        #FFFFF7;  /* 18,6:1 ✅ */
  --tr-tinta-2-inv:      #BDB6A9;  /*  9,3:1 ✅ */
  --tr-tinta-3-inv:      #8C867B;  /*  5,2:1 ✅ */
  --tr-linha-inv:        #2E2A25;
  --tr-superficie-inv:   #1E1B17;
  --tr-superficie-2-inv: #272320;

  /* ---- estados (sempre acompanhados de texto) ---------------------- */
  --tr-erro:           #9B2C1F;  /* texto sobre claro — 7,5:1 ✅ */
  --tr-erro-fundo:     #FBE9E5;
  --tr-erro-inv:       #F2B4A8;  /* texto sobre escuro — 10,6:1 ✅ */
  --tr-ok:             #3E5A2E;  /* texto sobre claro — 7,7:1 ✅ */

  /* ---- tipografia (Rafa: Noto Sans título, Inter corpo) ------------ */
  --tr-fonte-titulo: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tr-fonte-corpo:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tr-peso-titulo: 600;
  --tr-peso-titulo-leve: 500;
  --tr-tracking-titulo: -0.02em;
  --tr-tracking-rotulo: 0.12em;
  --tr-corpo: 18px;             /* 16px abaixo de 560px */
  --tr-entrelinha: 1.6;
  --tr-h1: clamp(2.4rem, 6.2vw, 5rem);
  --tr-h2: clamp(1.9rem, 4.4vw, 3.4rem);
  --tr-h3: 1.35rem;
  --tr-apoio: clamp(1rem, 1.4vw, 1.2rem);
  --tr-miuda: .85rem;
  --tr-rotulo: .8rem;

  /* ---- forma (Rafa: pill, card 12–16, hairline) -------------------- */
  --tr-raio-pill: 999px;
  --tr-raio-card: 14px;
  --tr-raio-controle: 8px;
  --tr-hairline: 1px solid var(--tr-linha);
  --tr-hairline-inv: 1px solid var(--tr-linha-inv);
  --tr-sombra-hero: 0 10px 30px rgba(20, 18, 16, .25);  /* única sombra permitida */

  /* ---- espaço (escala do teste 2, comprovada em 1440 e 390) -------- */
  --tr-s-1: .5rem;  --tr-s-2: 1rem;  --tr-s-3: 1.5rem; --tr-s-4: 2rem;
  --tr-s-5: 3rem;   --tr-s-6: 4rem;  --tr-s-7: 6rem;   --tr-s-8: 8rem;
  --tr-maxw: 1120px;
  --tr-gutter: clamp(16px, 4vw, 40px);
  --tr-nav-h: 72px;

  /* ---- movimento --------------------------------------------------- */
  --tr-transicao: .2s ease;
  --tr-foco: 3px solid var(--tr-destaque);
  --tr-foco-inv: 3px solid var(--tr-destaque-claro);
}

/* Contexto escuro: qualquer container com .tr-escuro troca os papéis.
   Assim o mesmo componente (botão, card, link) funciona nos dois fundos
   sem duplicar seletor. */
.tr-escuro {
  --tr-fundo:          var(--tr-escuro);
  --tr-texto:          var(--tr-tinta-inv);
  --tr-texto-2:        var(--tr-tinta-2-inv);
  --tr-texto-3:        var(--tr-tinta-3-inv);
  --tr-borda:          var(--tr-linha-inv);
  --tr-card:           var(--tr-superficie-inv);
  --tr-card-2:         var(--tr-superficie-2-inv);
  --tr-acento:         var(--tr-destaque-claro);
  --tr-acento-hover:   var(--tr-destaque-claro-hover);
  --tr-acento-texto:   var(--tr-escuro);
  --tr-erro-texto:     var(--tr-erro-inv);
  --tr-foco-atual:     var(--tr-foco-inv);
}

/* Contexto claro (padrão). */
:root, .tr-claro {
  --tr-fundo:          var(--tr-claro);
  --tr-texto:          var(--tr-tinta);
  --tr-texto-2:        var(--tr-tinta-2);
  --tr-texto-3:        var(--tr-tinta-3);
  --tr-borda:          var(--tr-linha);
  --tr-card:           var(--tr-superficie);
  --tr-card-2:         var(--tr-superficie-2);
  --tr-acento:         var(--tr-destaque);
  --tr-acento-hover:   var(--tr-destaque-hover);
  --tr-acento-texto:   var(--tr-claro);
  --tr-erro-texto:     var(--tr-erro);
  --tr-foco-atual:     var(--tr-foco);
}

@media (max-width: 560px) {
  :root { --tr-corpo: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --tr-transicao: 0s; }
}


/* ===== base.css ===== */
/* Home v3 da Trento — base. Valores de marca vêm do tokens-trento.css (concatenado antes);
   o que é só da v3 fica aqui como --v3-*. Decisões: docs/03-frontend/home-v3-mobile-first.md §4. */
:root {
  --v3-cta-degrade: linear-gradient(90deg, #FF862B 0%, #FAF71A 100%);
  --v3-cta-circulo: linear-gradient(90deg, #F0590F 0%, #FF9A1F 100%);
  --v3-cta-texto: var(--tr-escuro);
  --v3-nav-fundo: #3B3834;
  --v3-nav-circulo: #5C5751;
  --v3-nav-texto: var(--tr-claro);
  --v3-vidro-fundo: rgba(20, 18, 16, .60); /* 0,38 dava 2,5:1 sobre o claro; 0,60 dá 4,9:1 (Rafa, 15/09/2026) */
  --v3-vidro-borda: rgba(255, 255, 247, .22);
  --v3-vidro-desfoque: blur(16px) saturate(160%);
  --v3-h1: clamp(2rem, 8.4vw, 3.25rem);
  --v3-h2: clamp(1.8rem, 7.6vw, 2.75rem);
  --v3-gutter: 24px;
  --v3-raio-botao: 12px;
  --v3-raio-midia: 14px;
  --v3-palco-h: 400vh;
  --v3-palco-topo: 64px; /* o quadro fica logo abaixo do título, não no centro da tela (Rafa, 15/09/2026) */
  --v3-ease-saida: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tr-escuro);
  color: var(--tr-tinta-inv);
  font-family: var(--tr-fonte-corpo);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--tr-fonte-titulo);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .96;
}
h1 { font-size: var(--v3-h1); }
h2 { font-size: var(--v3-h2); }
p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.conteudo { padding-left: var(--v3-gutter); padding-right: var(--v3-gutter); }
.sobrelinha {
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tr-destaque-claro);
}
.fundo-claro .sobrelinha { color: var(--tr-destaque); }
.apoio { color: var(--tr-tinta-2-inv); }
.fundo-claro .apoio { color: var(--tr-tinta-2); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: var(--tr-foco-inv); outline-offset: 3px; }
.fundo-claro :focus-visible { outline: var(--tr-foco); }

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


/* ===== fundo.css ===== */
/* Regra do fundo (Rafa, 14/09/2026): só #141210 e #FFFFF7, e toda passagem por degradê.
   Uma seção é uma pilha de .faixa; cada faixa tem exatamente um destes quatro tipos.
   Texto nunca fica solto numa transição: só dentro de .superficie. */
.faixa { position: relative; }
.fundo-escuro { background-color: var(--tr-escuro); color: var(--tr-tinta-inv); }
.fundo-claro { background-color: var(--tr-claro); color: var(--tr-tinta); }
.transicao-escuro-claro {
  background-color: var(--tr-claro);
  background-image: linear-gradient(180deg, var(--tr-escuro) 0%, var(--tr-claro) 100%);
  color: var(--tr-tinta);
}
.transicao-claro-escuro {
  background-color: var(--tr-escuro);
  background-image: linear-gradient(180deg, var(--tr-claro) 0%, var(--tr-escuro) 100%);
  color: var(--tr-tinta-inv);
}


/* ===== botoes.css ===== */
/* Botões da v3 (Rafa, 14/09/2026).
   Origin button: reescrito do 21st.dev (componentes-21st/05-botao-origem.prompt.md) sem React/Motion.
   CTA = degradê amarelo → laranja já em repouso; navegação = cinza escuro; o botão fixo é o único de vidro. */
.botao-origem {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: var(--v3-raio-botao);
  overflow: hidden;
  font: 500 15px/1 var(--tr-fonte-corpo);
  letter-spacing: -.02em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, color .3s var(--v3-ease-saida);
}
.botao-origem:active { transform: scale(.985); }
.botao-origem__circulo {
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--d, 0px);
  height: var(--d, 0px);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s var(--v3-ease-saida);
  pointer-events: none;
}
.botao-origem.is-cheio .botao-origem__circulo { transform: translate(-50%, -50%) scale(1); }
.botao-origem__rotulo { position: relative; }

.botao-cta {
  background-image: var(--v3-cta-degrade);
  color: var(--v3-cta-texto);
  border: .5px solid rgba(20, 18, 16, .12);
}
.botao-cta .botao-origem__circulo { background-image: var(--v3-cta-circulo); }

.botao-nav {
  background-color: var(--v3-nav-fundo);
  color: var(--v3-nav-texto);
  border: .5px solid rgba(255, 255, 247, .10);
}
.botao-nav .botao-origem__circulo { background-color: var(--v3-nav-circulo); }

.botao-fixo {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 32px), 420px);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tr-raio-pill);
  background-color: var(--v3-vidro-fundo);
  -webkit-backdrop-filter: var(--v3-vidro-desfoque);
  backdrop-filter: var(--v3-vidro-desfoque);
  border: 1px solid var(--v3-vidro-borda);
  color: var(--tr-claro);
  font: 600 16px/1 var(--tr-fonte-corpo);
  letter-spacing: -.01em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(20, 18, 16, .35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 24px));
  transition: transform .35s var(--v3-ease-saida), opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao-fixo[data-visivel="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}


/* ===== carrossel.css ===== */
/* Carrossel da v3 — construído a partir do Canva (sem componente do 21st.dev, Rafa 14/09/2026).
   Scroll-snap nativo: arrasta com o dedo; as setas só ajudam. */
.carrossel { position: relative; }
.carrossel__trilho {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }

.carrossel__seta {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tr-claro);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.carrossel__seta--anterior { left: 4px; }
.carrossel__seta--proxima { right: 4px; }
/* disco escuro atrás da seta: sem ele a seta branca some sobre foto clara (15/09/2026). A área de toque segue 44 px. */
.carrossel__seta::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 50%;
  background-color: rgba(20, 18, 16, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.carrossel__seta svg { position: relative; width: 22px; height: 22px; }
.carrossel__seta[disabled] { opacity: .35; cursor: default; }
.carrossel__seta[hidden] { display: none; }

/* uma foto por vez, 4:3, com o título sobreposto (seção 3) */
.carrossel--foto { border-radius: var(--v3-raio-midia); overflow: hidden; background: var(--tr-escuro); }
.carrossel--foto .carrossel__trilho { gap: 0; }
.carrossel--foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.carrossel--foto::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(20, 18, 16, 0), rgba(20, 18, 16, .62));
  pointer-events: none;
}
.carrossel__titulo {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 56px;
  bottom: 16px;
  color: var(--tr-claro);
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  pointer-events: none;
}


/* ===== tabela.css ===== */
/* Tabela — reescrita do shadcn/ui (componentes-21st/01-tabela.tsx): largura total, texto 0,875rem,
   borda inferior por linha, sem borda na última, hover apagado, célula de 16 px.
   Adaptações: duas colunas sem cabeçalho (Rafa, 14/09/2026); padding lateral 0, porque a faixa
   já tem o respiro de .conteudo; valor alinhado à direita.
   A lista de equipamentos usa o mesmo desenho, com linhas finas (Rafa, 14/09/2026). */
.tabela-envoltorio { position: relative; width: 100%; overflow: auto; }
.tabela { width: 100%; border-collapse: collapse; caption-side: bottom; font-size: .875rem; }
.tabela tr { border-bottom: var(--tr-hairline); transition: background-color .2s ease; }
.tabela tbody tr:last-child { border-bottom: 0; }
.tabela tr:hover { background-color: rgba(246, 242, 233, .5); } /* --tr-superficie a 50% */
.tabela th, .tabela td { padding: 16px 0; vertical-align: middle; }
.tabela th { text-align: left; font-weight: 500; color: var(--tr-tinta-2); }
.tabela td { text-align: right; font-weight: 500; color: var(--tr-tinta); }

.lista-linhas { font-size: .875rem; }
.lista-linhas li { padding: 16px 0; border-bottom: var(--tr-hairline); font-weight: 500; color: var(--tr-tinta); }
.lista-linhas li:last-child { border-bottom: 0; }


/* ===== depoimento.css ===== */
/* Card de depoimento com painel de vidro sobre foto real (Rafa, 14/09/2026: quer testar o card de vidro).
   Construído a partir do Canva; sem componente do 21st.dev. */
.carrossel--depoimentos .carrossel__trilho { padding: 0 var(--v3-gutter); scroll-padding: 0 var(--v3-gutter); }
.carrossel--depoimentos .carrossel__slide { flex-basis: 82%; }
.carrossel--depoimentos .carrossel__seta { top: 42%; }

.depoimento {
  position: relative;
  border-radius: var(--v3-raio-midia);
  overflow: hidden;
  background: var(--tr-escuro);
}
.depoimento__foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.depoimento__vidro {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: var(--v3-vidro-fundo); /* o mesmo vidro do botão fixo: a 30% dava 2:1 sobre foto branca (15/09/2026) */
  -webkit-backdrop-filter: var(--v3-vidro-desfoque);
  backdrop-filter: var(--v3-vidro-desfoque);
  border: 1px solid var(--v3-vidro-borda);
  color: var(--tr-claro);
}
.depoimento__pessoa { display: flex; align-items: center; gap: 10px; }
.depoimento__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 1px solid rgba(255, 255, 247, .4);
}
.depoimento__nome { display: block; font-size: .95rem; font-weight: 600; }
.depoimento__papel { display: block; font-size: .78rem; font-weight: 400; color: var(--tr-claro); } /* a 78% não passava de 3,7:1 */
.depoimento__texto { font-size: .85rem; line-height: 1.45; }


/* ===== faq.css ===== */
/* FAQ — reescrito do 21st.dev (componentes-21st/02-faq.jsx) sem React nem Framer Motion, no layout do
   Canva: título à esquerda e abas e perguntas dentro de um cartão (Rafa, 14/09/2026).
   Do componente vêm: a aba ativa com fundo que sobe de baixo (0,5 s, "backIn"), o painel que entra
   subindo 20 px, o acordeão que anima a altura (0,3 s) e o + que gira 45°. */
.faq {
  margin: 0 var(--v3-gutter);
  padding: 20px 16px;
  border: var(--tr-hairline);
  border-radius: 20px;
  background: var(--tr-claro);
  color: var(--tr-tinta);
}
.faq__abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.faq__aba {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 6px 12px;
  border: 1px solid var(--tr-linha);
  border-radius: 6px;
  background: transparent;
  color: var(--tr-tinta-2);
  font: 500 .8rem/1.2 var(--tr-fonte-corpo);
  white-space: nowrap;
  cursor: pointer;
  transition: color .5s ease, border-color .5s ease;
}
.faq__aba-fundo {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--tr-escuro);
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.36, 0, .66, -.56);
}
.faq__aba[aria-selected="true"] { color: var(--tr-claro); border-color: var(--tr-escuro); }
.faq__aba[aria-selected="true"] .faq__aba-fundo { transform: translateY(0); }

.faq__painel { display: grid; gap: 10px; animation: faq-entra .5s var(--v3-ease-saida); }
.faq__painel[hidden] { display: none; }
@keyframes faq-entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.faq__item { border: var(--tr-hairline); border-radius: 12px; background: var(--tr-claro); transition: background-color .2s ease; }
.faq__item.is-aberto { background: var(--tr-superficie); }
.faq__pergunta { margin: 0; font: inherit; text-transform: none; letter-spacing: normal; line-height: inherit; }
.faq__botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--tr-tinta-2);
  font: 500 .95rem/1.35 var(--tr-fonte-corpo);
  text-align: left;
  cursor: pointer;
}
.faq__item.is-aberto .faq__botao { color: var(--tr-tinta); }
.faq__mais { flex: none; width: 20px; height: 20px; transition: transform .2s ease; }
.faq__item.is-aberto .faq__mais { transform: rotate(45deg); }
.faq__resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease-in-out; }
.faq__item.is-aberto .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta-dentro { overflow: hidden; padding: 0 16px; visibility: hidden; transition: visibility 0s linear .3s; }
.faq__item.is-aberto .faq__resposta-dentro { visibility: visible; transition-delay: 0s; }
.faq__resposta-dentro p { padding-bottom: 16px; color: var(--tr-tinta-2); font-size: .9rem; }


/* ===== palco.css ===== */
/* Palco da seção 6 — o vídeo do teste 2 controlado pela rolagem, sem nenhum texto (Rafa, 14/09/2026).
   No celular o quadro é 1:1: com o frame de 720×406 em tela cheia vertical, a ampliação passaria de 4×. */
.palco { position: relative; height: var(--v3-palco-h); }
.palco__fixo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: start center;
  padding-top: var(--v3-palco-topo);
  overflow: hidden;
}
.palco__quadro { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 80svh; overflow: hidden; }
.palco__poster, .palco__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.palco__poster { object-fit: cover; transition: opacity .5s ease; }
.palco.is-pronto .palco__poster { opacity: 0; }

.palco.is-estatico { height: auto; }
.palco.is-estatico .palco__fixo { position: relative; height: auto; }
.palco.is-estatico .palco__canvas { display: none; }


/* ===== rodape.css ===== */
/* Rodapé — no modelo do 21st.dev (componentes-21st/03-rodape.tsx): 1 coluna no celular, 2 a partir de
   768 px e 4 a partir de 1024 px, títulos de coluna em 1,125rem, links em 0,875rem, redes em botões
   redondos de contorno e a faixa inferior com borda. Sem newsletter e sem chave claro/escuro; com o
   logo da Trento dentro (Rafa, 14/09/2026). */
.rodape { padding-top: 48px; }
.rodape__grade { display: grid; gap: 40px; }
@media (min-width: 768px) { .rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rodape__grade { grid-template-columns: repeat(4, 1fr); } }

.rodape__logo { width: 120px; height: auto; margin-bottom: 16px; }
.rodape__lema {
  margin-bottom: 8px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tr-destaque-claro);
}
.rodape__texto { font-size: .9rem; color: var(--tr-tinta-2-inv); }
.rodape__titulo {
  margin: 0 0 8px;
  font: 600 1.125rem/1.2 var(--tr-fonte-corpo);
  font-stretch: normal;
  letter-spacing: normal;
  text-transform: none;
}
.rodape__coluna { display: grid; align-content: start; gap: 8px; font-size: .875rem; }
.rodape__coluna > a, .rodape__contato a { color: var(--tr-tinta-inv); text-decoration: none; transition: color .2s ease; }
.rodape__coluna > a:hover, .rodape__contato a:hover { color: var(--tr-destaque-claro); }
.rodape__contato { display: grid; gap: 8px; font-style: normal; color: var(--tr-tinta-2-inv); }
.rodape__redes { display: flex; gap: 16px; }
.rodape__rede {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tr-linha-inv);
  border-radius: 50%;
  color: var(--tr-tinta-inv);
  transition: border-color .2s ease, color .2s ease;
}
.rodape__rede:hover { border-color: var(--tr-destaque-claro); color: var(--tr-destaque-claro); }
.rodape__rede svg { width: 16px; height: 16px; }
.rodape__base {
  margin-top: 48px;
  padding-top: 32px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: var(--tr-hairline-inv);
  text-align: center;
  font-size: .875rem;
  color: var(--tr-tinta-3-inv);
}


/* ===== secoes.css ===== */
/* Layout de cada seção da home v3, mobile-first (390 px). Um bloco por seção, na ordem da página. */

/* 1. Hero ------------------------------------------------------------ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 18, 16, .45) 0%, rgba(20, 18, 16, 0) 18%,
    rgba(20, 18, 16, 0) 42%, rgba(20, 18, 16, .88) 76%, var(--tr-escuro) 100%);
}
.hero__logo {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 50%;
  width: 88px;
  height: auto;
  transform: translateX(-50%);
}
.hero__texto {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: start;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}
.hero__texto .botao-cta { margin-top: 12px; }

/* 2. Localização ----------------------------------------------------- */
.localizacao__topo { height: 32px; }
.localizacao__mapa { padding: 0 var(--v3-gutter) 40px; }
.mapa { display: block; border-radius: var(--v3-raio-midia); overflow: hidden; }
.mapa img { width: 100%; height: auto; }
.localizacao__texto { display: grid; gap: 12px; padding-top: 8px; padding-bottom: 56px; }
.endereco {
  margin-top: 8px;
  padding: 14px 18px;
  border: var(--tr-hairline);
  border-radius: var(--v3-raio-midia);
  color: var(--tr-tinta-2);
  font-style: normal;
}

/* 3. Estúdio + equipamento ------------------------------------------- */
.estudio { display: grid; gap: 48px; padding: 40px 0 56px; }
.estudio__bloco { display: grid; gap: 16px; }

/* 4. Pessoas & a Trento ---------------------------------------------- */
.pessoas__topo { padding-top: 16px; padding-bottom: 24px; }
.pessoas__carrossel { padding: 8px 0 32px; }
.pessoas__base { height: 40px; }

/* 5. CTA 2 (e base do CTA 3) ------------------------------------------- */
.cta { display: grid; gap: 16px; padding-top: 56px; padding-bottom: 64px; }
.cta--2 .apoio { font-size: .9rem; font-weight: 500; color: var(--tr-claro); }
.publicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 8px; }
.publico {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  font-size: .78rem;
  font-weight: 500;
  color: var(--tr-tinta-2-inv);
}
.publico img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.cta--2 .cta__botao { justify-self: center; margin-top: 8px; }

/* 6. Entre & conheça ----------------------------------------------------- */
.entre { padding: 56px 0 48px; }
.entre h2 { margin-bottom: 24px; }
.entre__acao { display: flex; justify-content: flex-end; margin-top: 24px; }

/* 7. Galeria ------------------------------------------------------------ */
.galeria__topo { padding-top: 56px; padding-bottom: 24px; }
.galeria__fotos { padding-bottom: 40px; }
.carrossel--galeria .carrossel__trilho { padding: 0 var(--v3-gutter); scroll-padding: 0 var(--v3-gutter); }
.galeria__pagina { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 220px; gap: 10px; }
.galeria__foto { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.galeria__foto--estreita { grid-column: span 2; }
.galeria__foto--larga { grid-column: span 3; }
.galeria__acao { display: flex; justify-content: flex-end; padding-top: 8px; padding-bottom: 56px; }

/* 8. FAQ ------------------------------------------------------------------ */
.faq__topo { padding-top: 8px; padding-bottom: 20px; }
.faq__corpo { padding-bottom: 48px; }
.faq__base { height: 24px; }

/* 9. CTA 3 --------------------------------------------------------------- */
.cta--3 { padding-top: 72px; padding-bottom: 72px; }
.cta--3 .cta__botao { justify-self: end; margin-top: 16px; }