/* ==========================================================================
   CB2B Films — Landing EN (Production Services)
   Direção: Control Room / Call Sheet
   Sistema visual travado no design system da CB2B (2026-07-17)
   ========================================================================== */

/* --- 1. Fontes auto-hospedadas ------------------------------------------ */

@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-variable.woff2') format('woff2');
  font-weight: 400 800;          /* fonte variável: um arquivo, todos os pesos */
  font-style: normal;
  font-display: swap;
}

/* --- 2. Tokens ---------------------------------------------------------- */

:root {
  /* Cores de marca (design system CB2B) */
  --black:      #000000;
  --white:      #FFFFFF;
  --blue:       #005CA4;   /* acento dominante */
  --blue-light: #6DA8DB;   /* texto de acento sobre preto */
  --red:        #EF4025;   /* acento pontual */

  /* Superfícies: no escuro a profundidade vem de luminância, não de sombra */
  --surface-0:  #000000;
  --surface-1:  #0A0B0D;
  --surface-2:  #121417;

  /* Cinzas levemente frios, nunca neutros puros */
  --gray-100:   #E7EAEE;
  --gray-300:   #B3B9C2;
  --gray-500:   #7C8593;
  --gray-700:   #444A54;
  --gray-800:   #2A2E35;
  --gray-900:   #1A1D22;

  /* Linhas */
  --line:       rgba(255, 255, 255, 0.12);
  --line-soft:  rgba(255, 255, 255, 0.07);

  /* Escala de espaçamento (4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4rem;
  --s8: 6rem;
  --s9: 8rem;

  /* Escala tipográfica modular */
  --fs-display: clamp(2.75rem, 7.5vw, 6.5rem);
  --fs-h2:      clamp(1.875rem, 4.4vw, 3.5rem);
  --fs-h3:      clamp(1.25rem, 1.9vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-num:     clamp(2.25rem, 5vw, 4rem);

  /* Medidas */
  --measure:    62ch;
  --container:  86rem;
  --rail-w:     4.5rem;

  /* Movimento */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur:        420ms;
}

/* --- 3. Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--white);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: 'Archivo Black', 'Montserrat', sans-serif;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Foco visível e consistente em tudo que é operável */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--red); color: var(--white); }

/* --- 4. Utilitários de layout ------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

.section {
  padding-block: clamp(var(--s7), 10vw, var(--s9));
  position: relative;
}

.section--tight { padding-block: clamp(var(--s6), 7vw, var(--s8)); }

.rule { border-top: 1px solid var(--line); }

.measure { max-width: var(--measure); }

/* Etiqueta: pequena, tracked, de-enfatizada. Nunca compete com o valor. */
.kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 var(--s4);
}

.kicker--muted { color: var(--gray-500); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--gray-300);
  max-width: var(--measure);
}

/* Destaque vermelho inline, assinatura do site oficial */
.hl { color: var(--red); background: none; font-weight: 700; }

/* Numeral de seção em Archivo Black */
.sec-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--red);
}

/* --- Título de seção com varredura de cor -------------------------------
   Duas camadas empilhadas do mesmo texto. A de cima está na cor de
   destaque e começa totalmente recortada. No hover o recorte abre da
   esquerda pra direita, revelando a cor letra por letra.

   Uso clip-path e não gradiente recortado no texto porque
   background-position sobre background-clip:text não anima de forma
   confiável: o navegador pula direto pro estado final.

   A camada de cima é criada pelo JS. Sem JS, o título fica normal e
   só perde a animação, nunca some.                                       */

.sec-h {
  --sweep: var(--red);
  --sweep-hl: var(--white);
  position: relative;
  display: inline-block;
  transform-origin: left center;
  cursor: default;
  transition: transform 460ms var(--ease);
}

/* 1.02 era imperceptível num título desse tamanho. 1.045 se vê. */
.sec-h:hover { transform: scale(1.045); }

/* Os dois recortes abaixo sao COMPLEMENTARES de proposito.
   A base sai da esquerda na mesma velocidade em que a colorida entra, entao
   nunca existem duas camadas pintando o mesmo pixel.
   Antes so a colorida era recortada e a base ficava pintando por baixo o tempo
   todo: o antialiasing da base vazava na borda de cada glifo e dava aquela
   auréola fina, quase imperceptivel mas incomoda.

   O -0.34em em cima e embaixo tambem e de proposito. clip-path recorta na caixa
   do elemento, e com line-height perto de 1.0 a perna do "p" e do "g" desce
   ABAIXO dessa caixa. Sem a folga, a perna da camada colorida era cortada e
   aparecia o pedaco branco da base embaixo da letra. */

/* A folga vertical é -100%, não um valor medido.

   clip-path recorta na caixa do elemento, e com line-height perto de 1.0
   a perna do "p", do "g" e do "y" desce ABAIXO dessa caixa. Recortando
   rente, a perna da camada colorida some e aparece a da camada branca
   por baixo: era o pedaço branco solto que ficava sobrando.

   Uma folga medida em em resolveria hoje e quebraria no dia em que
   alguém trocar a fonte ou o line-height. Com -100% em cima e embaixo,
   o recorte é puramente horizontal e nenhuma perna de letra é cortada,
   em nenhum tamanho, em nenhuma fonte. */

.sec-h__base {
  display: block;
  clip-path: inset(-100% 0 -100% 0);
  transition: clip-path 720ms var(--ease);
}

.sec-h:hover .sec-h__base { clip-path: inset(-100% 0 -100% 100%); }

.sec-h__over {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--sweep);
  clip-path: inset(-100% 100% -100% 0);
  transition: clip-path 720ms var(--ease);
  pointer-events: none;
}

/* A palavra que já vem destacada inverte junto com o resto */
.sec-h__over .hl { color: var(--sweep-hl); }

.sec-h:hover .sec-h__over { clip-path: inset(-100% 0 -100% 0); }

/* Mesmo ritmo de cor dos cards e dos passos.
   A faixa azul do final ficou de fora do efeito, a pedido. */
.sec-h--sky { --sweep: var(--blue-light); --sweep-hl: var(--white); }

/* --- 5. Geometria de transporte (play / pause / avançar) ---------------- */

.glyph { width: 1em; height: 1em; flex: none; fill: currentColor; }
.glyph--lg { width: 1.5rem; height: 1.5rem; }

/* --- 6. Trilha de timeline (scrubber) ----------------------------------- */

.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(0,0,0,0.92), rgba(0,0,0,0.55));
  backdrop-filter: blur(6px);
}

.rail__track {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
}

.rail__progress {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 1px;
  height: 0;
  background: var(--red);
  transform: translateX(-50%);
  transition: height 120ms linear;
}

.rail__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s4), 3.2vh, var(--s5));
  z-index: 1;
}

.rail__dot {
  --dot: 9px;
  position: relative;
  display: block;
  width: var(--dot);
  height: var(--dot);
  border: 1px solid var(--gray-500);
  background: var(--black);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.rail__dot:hover { border-color: var(--white); transform: scale(1.35); }

.rail__dot[aria-current='true'] {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.35);
}

/* Rótulo que aparece no hover, sem empurrar layout */
.rail__label {
  position: absolute;
  left: calc(100% + var(--s3));
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: var(--s1) var(--s2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.rail__dot:hover .rail__label,
.rail__dot:focus-visible .rail__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Barra de progresso no topo, substitui a trilha no mobile */
.progress-top {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--red);
  z-index: 70;
  display: none;
}

/* --- 7. Header ---------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s3);
}

.masthead__logo { display: inline-flex; }

.masthead__logo img {
  /* Mesma altura do botao vermelho ao lado (medido: 57.09px), a pedido do
     Felipe. Escrito como calc do proprio box do .btn em vez de numero fixo
     pra continuar batendo se o padding ou a fonte do botao mudarem:
     padding-block (2 x --s3) + borda (2px) + altura da linha do texto
     (--fs-sm x o line-height 1.65 do body). */
  height: calc((var(--s3) * 2) + 2px + (var(--fs-sm) * 1.65));
  width: auto;
  transform-origin: left center;
  transition: transform 320ms var(--ease);
}

.masthead__logo:hover img { transform: scale(1.12); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s4), 2.2vw, var(--s6));
}

.nav a {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-300);
  padding-block: var(--s2);
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.nav a:hover { color: var(--white); border-bottom-color: var(--red); }

/* --- 8. Botões ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: 10px;           /* levemente arredondado, como no site oficial */
  cursor: pointer;
  transition: background 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease), transform 240ms var(--ease);
}

/* CTA grande do hero, proporção do botão do site original */
.btn--lg {
  font-size: 1.0625rem;
  padding: var(--s4) var(--s6);
  letter-spacing: 0;
}

/* Reação leve, padrão de todos os botões */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn .glyph { transition: transform 260ms var(--ease); }
.btn:hover .glyph { transform: translateX(3px); }

/* CTA do topo: varredura diagonal preenchendo o botão.
   É o irmão do botão da faixa azul, com o mesmo peso. */
.btn--head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.btn--head::before {
  content: '';
  position: absolute;
  inset: -2px -20%;
  z-index: -1;
  background: var(--black);
  transform: translateX(-108%) skewX(-16deg);
  transition: transform 520ms var(--ease);
}

.btn--head:hover {
  border-color: var(--black);
  box-shadow: 0 8px 22px rgba(239, 64, 37, 0.32);
}

.btn--head:hover::before { transform: translateX(0) skewX(-16deg); }

/* CTA do hero: mesma varredura, mas branca. Fica branco com letra e borda
   vermelhas. O atraso na cor evita o piscar de vermelho sobre vermelho
   antes de a varredura branca chegar. */
.btn--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background 240ms var(--ease),
              border-color 300ms var(--ease) 150ms,
              color 240ms var(--ease) 170ms,
              transform 240ms var(--ease),
              box-shadow 300ms var(--ease);
}

.btn--hero::before {
  content: '';
  position: absolute;
  inset: -2px -20%;
  z-index: -1;
  background: var(--white);
  transform: translateX(-108%) skewX(-16deg);
  transition: transform 520ms var(--ease);
}

.btn--hero:hover {
  background: var(--red);
  color: var(--red);
  border-color: var(--red);
  box-shadow: 0 10px 26px rgba(239, 64, 37, 0.3);
}

.btn--hero:hover::before { transform: translateX(0) skewX(-16deg); }

/* Link de texto que também cresce no hover */
.link-cta {
  display: inline-block;
  font-weight: 700;
  border-bottom: 1px solid var(--red);
  padding-bottom: 3px;
  transform-origin: left center;
  transition: transform 300ms var(--ease), color 300ms var(--ease);
}

.link-cta:hover { transform: scale(1.06); color: var(--red); }

.btn--primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn--primary:hover { background: #d3300f; border-color: #d3300f; }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.32);
}
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }

.btn--onblue {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}
.btn--onblue:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.btn--block { width: 100%; justify-content: center; }

/* --- 9. Hero ------------------------------------------------------------ */

/* Layout split, espelhando o hero do site oficial: texto à esquerda,
   player com cantos arredondados à direita. Sem vídeo de fundo. */

.hero {
  position: relative;
  background: var(--surface-0);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(var(--s7), 8vw, var(--s9));
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);  /* player um pouco maior */
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  line-height: 0.98;
  margin-bottom: var(--s4);
}

.hero__sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--gray-100);
  max-width: 46ch;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* Player: proporção 16:9, cantos arredondados como no original.
   O margin-top desce o player até a altura do topo da headline,
   compensando exatamente a linha do kicker mais a margem dele. */
.hero__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  margin-top: calc(var(--fs-xs) * 1.65 + var(--s4));
}

.hero__player img,
.hero__player video,
.hero__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: var(--surface-2);
}

/* Botão de som, no mesmo lugar do "Ativar som" do site oficial */
.hero__unmute {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: rgba(0, 0, 0, 0.82);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}

.hero__unmute:hover { background: var(--red); border-color: var(--red); }

/* Ficha rápida abaixo do texto: prova operacional acima da dobra */
.hero__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.hero__strip div {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-300);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.hero__strip svg { color: var(--red); }

/* --- 10. Barra de confiança (marquee) ----------------------------------- */

.trust { border-bottom: 1px solid var(--line); padding-block: var(--s7); }

/* Centralizada e com respiro maior até as logos */
.trust__title {
  text-align: center;
  margin: 0;
  font-size: clamp(0.8125rem, 1.05vw, 1rem);   /* legível no desktop */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-300);
}

.marquee {
  overflow: hidden;
  margin-top: var(--s7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(var(--s6), 5vw, var(--s8));
  padding-right: clamp(var(--s6), 5vw, var(--s8));
}

.marquee img {
  height: 32px;
  width: auto;
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity 300ms var(--ease), filter 300ms var(--ease);
}

/* Peso óptico: cada marca desenha a altura de um jeito. Globo e Togu
   têm muita margem interna no arquivo, então precisam de mais altura
   pra ocupar o mesmo espaço visual das outras. */
.marquee img[src*="globo"]    { height: 52px; }
.marquee img[src*="togu"]     { height: 46px; }
.marquee img[src*="marriott"] { height: 40px; }

.marquee img:hover { opacity: 1; filter: grayscale(0); }

@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- 11. Call Sheet (ficha técnica de produção) ------------------------- */

.callsheet {
  border: 1px solid var(--line);
  background: var(--surface-1);
  margin-top: var(--s6);
}

/* A faixa "Call sheet" no topo saiu a pedido do Felipe em 2026-08-14.
   A tabela comeca direto na primeira linha; a borda de .callsheet ja fecha
   o desenho por cima. */

.callsheet__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}

.callsheet__row {
  background: var(--surface-1);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: 7.5rem;
}

/* Etiqueta de-enfatizada, valor em destaque. Padrão label/value. */
/* Etiqueta no azul da marca. Uso o azul claro e não o #005CA4 porque
   texto pequeno em azul escuro sobre preto reprova em contraste. */
.callsheet__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-light);
}

.callsheet__value {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
}

/* --- 12. Cards de contorno (assinatura do site oficial) ----------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s7);
}

.card {
  --edge: var(--red);
  --fill: #D3300F;              /* vermelho um tom abaixo: branco em cima passa em contraste */
  --num: var(--red);
  position: relative;
  isolation: isolate;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--surface-1);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-height: 16rem;
  overflow: hidden;
  transition: transform 520ms var(--ease), border-color 520ms var(--ease);
}

.card:nth-child(even) {
  --edge: var(--blue);
  --fill: var(--blue);
  --num: var(--blue-light);
}

/* O negativo ganha cor: preenchimento sobe de baixo pra cima */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 560ms var(--ease);
}

.card:hover,
.card:focus-within { transform: translateY(-4px); border-color: var(--fill); }

.card:hover::before,
.card:focus-within::before { transform: scaleY(1); }

.card__num {
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--num);
  transition: color 360ms var(--ease) 90ms;
}

/* Título com altura de duas linhas: parágrafos começam todos na mesma altura */
.card h3 {
  font-size: var(--fs-h3);
  line-height: 1.18;
  min-height: 2.36em;
  margin-bottom: var(--s3);
  transition: color 360ms var(--ease) 90ms;
}

.card p {
  color: var(--gray-300);
  font-size: 1.0625rem;          /* maior, a pedido: só o corpo, o título ficou */
  line-height: 1.62;
  transition: color 360ms var(--ease) 90ms;
}

/* A letra clareia junto com a virada do fundo */
.card:hover .card__num,
.card:focus-within .card__num,
.card:hover h3,
.card:focus-within h3,
.card:hover p,
.card:focus-within p { color: var(--white); }

/* --- 13. Serviços ------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start;
}

.services__aside { position: sticky; top: 7rem; }

.services__list { border-top: 1px solid var(--line); }

.service {
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s4);
  cursor: default;
  transition: padding-left 320ms var(--ease), color 320ms var(--ease);
}

.service:hover { padding-left: var(--s3); color: var(--blue-light); }

.service__idx {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-700);
  flex: none;
  width: 2.5rem;
  transition: color 320ms var(--ease);
}

.service:hover .service__idx { color: var(--red); }

.service__name {
  font-size: clamp(1.0625rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}

.service__mark { margin-left: auto; opacity: 0; transition: opacity 320ms var(--ease); color: var(--red); }
.service:hover .service__mark { opacity: 1; }

/* Painel de preview que troca conforme o serviço em hover */
.preview {
  position: relative;
  aspect-ratio: 16 / 9;          /* mesmo formato das fotos enviadas */
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  overflow: hidden;
  margin-top: var(--s5);
}

.preview__slot { position: absolute; inset: 0; opacity: 0; transition: opacity 380ms var(--ease); }
.preview__slot[data-active='true'] { opacity: 1; }
.preview__slot img { width: 100%; height: 100%; object-fit: cover; }

/* .preview__caption removido: a legenda dentro da foto repetia o nome do
   servico que ja aparece empilhado ao lado, na lista .services__list. */

/* --- 14. Depoimentos ---------------------------------------------------- */

/* Carrossel infinito: a faixa anda devagar e para no hover.
   O truque é duplicar a lista e animar até -50%, então o ponto
   de retorno cai exatamente onde a cópia começa e o loop é invisível. */

.quotes {
  position: relative;
  overflow: hidden;
  margin-top: var(--s7);
  /* respiro vertical pro card crescido no hover não ser cortado */
  padding-block: var(--s4);
  /* sem máscara: os cards somem na borda da tela, sem borrão preto */
}

.quotes__track {
  display: flex;
  align-items: stretch;
  gap: var(--s4);
  width: max-content;
  animation: quoteSlide 118s linear infinite;   /* bem mais devagar */
}

.quotes:hover .quotes__track,
.quotes:focus-within .quotes__track { animation-play-state: paused; }

@keyframes quoteSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--s4) / 2), 0, 0); }
}

/* Card mais estreito e mais alto. Ajuste fino: mexa só no --quote-w.
   26vw deixa dois cards ocupando o miolo da tela. */
.quotes {
  --quote-w: clamp(17rem, 26vw, 34rem);
}

.quotes .quote {
  flex: 0 0 var(--quote-w);
  min-height: 25rem;
  transform-origin: center;
}

.quotes .quote:hover {
  transform: scale(1.05);
  z-index: 2;
}

/* Blocos de cor cheia, como no site oficial.
   Rodízio: vermelho, azul escuro, azul claro. */
.quote {
  --bg: var(--red);
  --ink: #0A0B0D;
  --ink-soft: rgba(10, 11, 13, 0.72);
  --hair: rgba(10, 11, 13, 0.22);

  background: var(--bg);
  color: var(--ink);
  border: 0;
  border-radius: 10px;
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease);
}

/* Cor por classe, não por posição: a cópia duplicada do carrossel
   precisa repetir a mesma sequência, senão o loop dá salto de cor. */
.quote--blue {
  --bg: var(--blue);
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, 0.82);
  --hair: rgba(255, 255, 255, 0.28);
}

.quote--sky {
  --bg: var(--blue-light);
  --ink: #0A0B0D;
  --ink-soft: rgba(10, 11, 13, 0.72);
  --hair: rgba(10, 11, 13, 0.22);
}

.quote:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
}

.quote blockquote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  font-weight: 500;
}

.quote figcaption {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--hair);
}

.quote__name { font-weight: 800; font-size: var(--fs-sm); color: var(--ink); }
.quote__role { font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: 0.04em; }

/* --- 15. Sobre + números ------------------------------------------------ */

.about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start;
}

.about__prose { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s2); }
.about__prose p { color: var(--gray-300); font-size: 1.0625rem; line-height: 1.7; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

/* Números reativos: sobem um pouco e ganham uma régua embaixo */
.stat {
  position: relative;
  padding-bottom: var(--s3);
  cursor: default;
}

.stat::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--red);
  transition: width 520ms var(--ease);
}

.stat:nth-child(2)::after { background: var(--blue-light); }
.stat:nth-child(3)::after { background: var(--blue); }

.stat:hover::after { width: 100%; }

.stat__num {
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--fs-num);
  line-height: 0.95;
  color: var(--red);
  display: block;
  transition: transform 440ms var(--ease), letter-spacing 440ms var(--ease);
}

.stat:nth-child(2) .stat__num { color: var(--blue-light); }
.stat:nth-child(3) .stat__num { color: var(--white); }

.stat:hover .stat__num { transform: translateY(-4px); letter-spacing: 0.01em; }

.stat__label {
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  transition: color 440ms var(--ease);
}

.stat:hover .stat__label { color: var(--gray-100); }

/* --- 16. Processo ------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  margin-top: var(--s7);
}

/* Passo reativo: a régua do topo se acende e o bloco avança um pouco */
.step {
  --tone: var(--red);
  position: relative;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--s4);
  cursor: default;
  transition: transform 440ms var(--ease);
}

.step:nth-child(even) { --tone: var(--blue-light); }

.step::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--tone);
  transition: width 560ms var(--ease);
}

.step:hover { transform: translateY(-5px); }
.step:hover::before { width: 100%; }

.step__idx {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--tone);
  margin-bottom: var(--s3);
}

.step__idx .glyph { transition: transform 440ms var(--ease); }
.step:hover .step__idx .glyph { transform: translateX(4px); }

.step h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: var(--s3);
  transition: color 440ms var(--ease);
}

.step:hover h3 { color: var(--tone); }

.step p {
  color: var(--gray-300);
  font-size: var(--fs-sm);
  line-height: 1.7;
  transition: color 440ms var(--ease);
}

.step:hover p { color: var(--gray-100); }

/* --- 17. Faixa azul + formulário ---------------------------------------- */

.band {
  background: var(--blue);
  color: var(--white);
  border-block: 1px solid rgba(255, 255, 255, 0.18);
}

.band__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s6), 5vw, var(--s8));
  padding-block: clamp(var(--s7), 8vw, var(--s9));
  align-items: start;
}

.band h2 { font-size: var(--fs-h2); line-height: 1.02; margin-bottom: var(--s4); }
.band .lead { color: rgba(255, 255, 255, 0.9); }

.band__contact {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--fs-sm);
}

.band__contact a { border-bottom: 1px solid rgba(255,255,255,0.4); align-self: flex-start; }
.band__contact a:hover { border-bottom-color: var(--white); }

.form { display: flex; flex-direction: column; gap: var(--s3); }

.field { display: flex; flex-direction: column; gap: var(--s2); }

.field label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.field input,
.field textarea {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--white);
  padding: var(--s3);
  width: 100%;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--white);
  background: rgba(0, 0, 0, 0.42);
}

.field textarea { resize: vertical; min-height: 6.5rem; }

.field--half { flex: 1 1 12rem; }
.form__row { display: flex; gap: var(--s3); flex-wrap: wrap; }

.form__note { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.72); }

.form__status {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--s3);
  border: 1px solid transparent;
  display: none;
}
.form__status[data-state='ok']   { display: block; border-color: var(--white); background: rgba(0,0,0,0.3); }
.form__status[data-state='err']  { display: block; border-color: var(--red); background: rgba(239,64,37,0.16); }
.form__status[data-state='busy'] { display: block; border-color: rgba(255,255,255,0.4); }

/* --- 18. Rodapé --------------------------------------------------------- */

.footer { padding-block: var(--s7) var(--s6); border-top: 1px solid var(--line); }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6);
}

.footer__logo { height: 44px; width: auto; margin-bottom: var(--s4); }

.footer p, .footer a { font-size: var(--fs-sm); color: var(--gray-300); }
.footer a:hover { color: var(--white); }

.footer__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--s4);
}

.footer__stack { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.footer__row { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.footer__row img { height: 20px; width: auto; opacity: 0.8; }
.footer__row img:hover { opacity: 1; }

/* Costa Blanca Films e a marca-mae: entra maior que o Studio CB ao lado,
   a pedido do Felipe. O logo dela e mais compacto (45px de largura contra
   151px do Studio CB na mesma altura), entao subir a altura aqui aproxima
   o peso visual dos dois em vez de desequilibrar. */
.footer__row img.footer__logo-grupo { height: 32px; }

/* Redes sociais: icone no lugar do nome escrito. O <a> ganha area de toque
   propria (44px) porque o SVG sozinho seria alvo pequeno demais no celular. */
.footer__social { gap: var(--s4); }

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* Puxa de volta so a folga do alvo de toque ((44 - 22) / 2), pro icone
     alinhar pela borda esquerda com as logos do grupo logo acima. */
  margin-left: calc((44px - 22px) / -2);
  color: var(--gray-300);
  transition: color 240ms var(--ease), transform 320ms var(--ease);
}

.footer__social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform 320ms var(--ease);
}

/* Animacao expansiva: o icone cresce e clareia junto. Fica no :focus-visible
   tambem pra quem navega por teclado enxergar o mesmo estado. */
.footer__social a:hover,
.footer__social a:focus-visible {
  color: var(--white);
  transform: translateY(-2px);
}

.footer__social a:hover svg,
.footer__social a:focus-visible svg { transform: scale(1.28); }

/* Quem pediu menos movimento no sistema so recebe a mudanca de cor. */
@media (prefers-reduced-motion: reduce) {
  .footer__social a:hover,
  .footer__social a:focus-visible { transform: none; }
  .footer__social a:hover svg,
  .footer__social a:focus-visible svg { transform: none; }
}

.footer__legal {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--gray-700);
}

/* --- 19. Placeholder honesto (assets que ainda não chegaram) ------------ */

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 100%;
  background:
    repeating-linear-gradient(45deg, var(--surface-2) 0 12px, var(--surface-1) 12px 24px);
  color: var(--gray-500);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s4);
}

/* --- 20. Revelação no scroll -------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

/* Escalonamento: cada filho entra com atraso próprio */
.stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* --- 21. Responsivo ----------------------------------------------------- */

@media (max-width: 1200px) {
  .callsheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --rail-w: 0rem; }

  .rail { display: none; }
  .progress-top { display: block; }

  body { padding-left: 0 !important; }

  .nav { display: none; }

  .cards,
  .services,
  .about,
  .band__inner,
  .footer__grid,
  .hero__grid { grid-template-columns: minmax(0, 1fr); }

  .services__aside { position: static; }

  .hero h1 { max-width: 100%; }
  .hero__grid { gap: var(--s6); }

  .quotes { --quote-w: calc((100vw - 3 * var(--s4)) / 2); }
}

@media (max-width: 640px) {
  .callsheet__grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

  .quotes { --quote-w: calc(100vw - 2.5 * var(--s4)); }
  .quotes .quote { min-height: 0; }
  .quotes .quote:hover { transform: none; }

  .masthead__inner { gap: var(--s3); }
  .masthead .btn { padding: var(--s2) var(--s3); font-size: var(--fs-xs); }

  /* O botao encolhe aqui, entao a logo tem que encolher junto pra continuar
     na mesma altura dele (o pedido do Felipe vale em toda largura de tela,
     nao so no desktop). Mesma conta da regra base, com o padding e a fonte
     reduzidos desta media query. */
  .masthead__logo img { height: calc((var(--s2) * 2) + 2px + (var(--fs-xs) * 1.65)); }

  .hero__strip { gap: var(--s2) var(--s4); }
  .marquee img { height: 22px; }
  .callsheet__row { min-height: auto; }
}

/* --- 22. Acessibilidade e preferências ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }

  /* sem movimento: o carrossel vira lista rolável na mão */
  .quotes { overflow-x: auto; padding-bottom: var(--s3); }
  .quotes__track { animation: none; width: auto; }
  .quotes__track > [aria-hidden='true'] { display: none; }
}

/* Pula direto pro conteúdo, primeiro item do tab */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--red);
  color: var(--white);
  padding: var(--s3) var(--s4);
  font-weight: 700;
}
.skip:focus { left: var(--s3); top: var(--s3); }

/* --- 23. WhatsApp flutuante -------------------------------------------- */

/* Canto inferior direito, mesmo lugar do site em portugues. A trilha
   (.rail) mora na esquerda com z-index 60, entao nao ha colisao: este
   fica em 65, abaixo da barra de progresso do topo (70).
   O padding usa env(safe-area-inset-*) pro botao nao ficar embaixo da
   barra de gestos do iPhone. */
.wa-float {
  position: fixed;
  right: calc(var(--s4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  z-index: 65;

  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;

  background: #25D366;          /* verde oficial do WhatsApp */
  color: #0A0B0D;               /* glifo escuro: 8.6:1 sobre o verde */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);

  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease),
              background 320ms var(--ease);
}

.wa-float svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
  transition: transform 320ms var(--ease);
}

/* Mesma gramatica de hover dos outros botoes: sobe e cresce. */
.wa-float:hover,
.wa-float:focus-visible {
  background: #2EE676;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.34);
}

.wa-float:hover svg,
.wa-float:focus-visible svg { transform: scale(1.1); }

.wa-float:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.wa-float:active { transform: translateY(-1px) scale(1.02); }

@media (max-width: 640px) {
  .wa-float { width: 52px; height: 52px; }
  .wa-float svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float:hover,
  .wa-float:focus-visible { transform: none; }
  .wa-float:hover svg,
  .wa-float:focus-visible svg { transform: none; }
}

/* Botao aberto: vira "fechar". O X entra por cima do glifo. */
.wa-float[aria-expanded='true'] { background: #1FAE55; }

/* --- 24. Pop-up de WhatsApp -------------------------------------------- */

/* Geometria copiada do site em portugues: caixa vermelha logo acima do
   botao, cantos de 15px, fechar em azul. La sao valores fixos (bottom 80px,
   right 15px); aqui saem da escala de espaco da pagina pra acompanhar o
   botao em qualquer largura de tela. */
.wa-box {
  position: fixed;
  right: calc(var(--s4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--s4) + 58px + var(--s3) + env(safe-area-inset-bottom, 0px));
  z-index: 66;                    /* acima do botao (65), abaixo do topo (70) */

  width: min(21rem, calc(100vw - 2 * var(--s4)));
  padding: var(--s4);
  border-radius: 15px;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);

  opacity: 0;
  transform: translateY(12px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

/* [hidden] sozinho perde pra display do seletor de classe, por isso o
   !important: sem ele a caixa fica visivel antes do JS montar. */
.wa-box[hidden] { display: none !important; }

.wa-box.is-open { opacity: 1; transform: translateY(0); }

.wa-box__close {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--blue);        /* azul da marca, igual ao original */
  color: var(--white);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}

.wa-box__close:hover,
.wa-box__close:focus-visible { background: #0072CC; transform: scale(1.08); }

.wa-box__title {
  display: block;
  padding-right: var(--s5);       /* nao passa por baixo do X */
  margin-bottom: var(--s3);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.wa-box__field { display: block; margin-bottom: var(--s2); }

.wa-box__label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Branco puro sobre o vermelho da marca: 4.6:1, passa em texto pequeno
     por ser bold. O cinza claro que uso no resto da pagina reprovaria. */
  color: var(--white);
}

.wa-box__field input {
  width: 100%;
  padding: var(--s2) var(--s3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--white);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.wa-box__field input:focus {
  outline: none;
  border-color: var(--white);
  background: rgba(0, 0, 0, 0.3);
}

.wa-box__field input[aria-invalid='true'] { border-color: #0A0B0D; }

.wa-box__send {
  width: 100%;
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--white);
  border-radius: 10px;            /* mesmo raio dos outros botoes da pagina */
  background: var(--white);
  color: var(--red);
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background 220ms var(--ease), color 220ms var(--ease),
              transform 220ms var(--ease);
}

.wa-box__send:hover:not(:disabled),
.wa-box__send:focus-visible:not(:disabled) {
  background: transparent;
  color: var(--white);
  transform: translateY(-2px);
}

.wa-box__send:disabled { opacity: 0.6; cursor: progress; }

.wa-box__status {
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  line-height: 1.4;
  min-height: 1.2em;
}

.wa-box__status[data-state='err'] { color: #0A0B0D; font-weight: 700; }
.wa-box__status[data-state='ok']  { color: var(--white); font-weight: 700; }

/* Celular: encosta nas duas margens, nao passa da altura da tela */
@media (max-width: 640px) {
  .wa-box {
    left: var(--s3);
    right: var(--s3);
    width: auto;
    bottom: calc(var(--s4) + 52px + var(--s3) + env(safe-area-inset-bottom, 0px));
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-box { transition: none; transform: none; }
  .wa-box.is-open { transform: none; }
  .wa-box__close:hover, .wa-box__close:focus-visible { transform: none; }
  .wa-box__send:hover, .wa-box__send:focus-visible { transform: none; }
}

@media print {
  .rail, .masthead, .hero__player, .progress-top,
  .wa-float, .wa-box { display: none !important; }
  body { background: #fff; color: #000; }
}