/* Cartola Filmes — base comum a todas as páginas.
   Identidade: azul-marinho como fundo (nunca preto puro), azul-gelo nas seções claras (como nas
   apresentações), Marcellus nos títulos, Manrope no texto. A "faixa" é o fio em degradê azul que
   separa e marca as seções. */

:root {
  --abismo: #04182A;        /* fundo escuro padrão: marinho profundo, não preto */
  --noite: #021120;         /* rodapé */
  --marinho: #024073;
  --marinho-medio: #0B4E80;
  --azul: #1C94B7;
  --ceu: #95C9D8;
  --nevoa: #CFE6EE;
  --gelo: #EFFCFF;
  --branco: #FFFFFF;
  --tinta: #08243A;         /* texto em fundo claro */
  --tinta-2: #3E5A6E;
  --texto: rgba(239, 252, 255, .78);
  --texto-2: rgba(239, 252, 255, .56);
  --fio: rgba(149, 201, 216, .18);
  --fio-claro: rgba(2, 64, 115, .14);
  --faixa: linear-gradient(90deg, #024073 0%, #1C94B7 55%, #95C9D8 100%);
  --marinho-radial: radial-gradient(120% 120% at 85% 110%, #0E6A9C 0%, #024073 38%, #04182A 78%);

  --f-display: "Marcellus", "Times New Roman", serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --largura: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --secao: clamp(64px, 8vw, 112px);
  --cab: 64px;
  --raio: 14px;
  --raio-p: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 16px); }
body {
  margin: 0;
  background: var(--abismo);
  color: var(--texto);
  font: 400 16px/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, iframe, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0; }
/* texto curto (até ~6 linhas) com as linhas equilibradas, sem uma muito mais longa que a outra;
   parágrafo longo de leitura (.texto) só evita palavra sozinha na última linha */
p, dd, blockquote, figcaption, .video-cartao__titulo, .pilares__resumo { text-wrap: balance; }
.texto, .texto p { text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ceu); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--azul); color: var(--branco); }

.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--gelo); color: var(--tinta); padding: 10px 16px; border-radius: 8px; }
.pular:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- tipografia */

.display { font-family: var(--f-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.06; color: var(--gelo); text-wrap: balance; }
.d1 { font-size: clamp(36px, 5.45vw, 75px); }
.d2 { font-size: clamp(29px, 3.75vw, 51px); }
.d3 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.14; }
.d4 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.display em, .realce em { font-style: normal; color: var(--ceu); }
/* rótulo sem fio ao lado (pedido de 26/10/2026): as linhas longas ficam nas divisões de conteúdo */
.rotulo { font: 600 12px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ceu); }
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--texto); max-width: 60ch; }
.texto { color: var(--texto); max-width: 62ch; text-wrap: pretty; }
.texto p + p { margin-top: 1em; }
.num { font: 600 13px/1 var(--f-texto); color: var(--ceu); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.nao-quebra { white-space: nowrap; }

/* ---------------------------------------------------------------- estrutura */

.miolo { width: 100%; max-width: calc(var(--largura) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
/* quanto falta do conteúdo até a borda da tela, para fotos que saem pela lateral */
.miolo { --sangria: calc(var(--gutter) + max(0px, (100vw - var(--largura) - var(--gutter) * 2) / 2)); }
.secao { position: relative; padding-block: var(--secao); }
.secao--curta { padding-block: calc(var(--secao) * .66); }
.secao--colada { padding-top: 0; }
.cabeca { display: grid; gap: 18px; margin-bottom: clamp(36px, 4vw, 56px); max-width: 860px; }
.cabeca--linha { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: none; flex-wrap: wrap; }
.cabeca--linha > div { display: grid; gap: 18px; }
.cabeca--centro { margin-inline: auto; text-align: center; justify-items: center; }

/* fio em degradê (a "faixinha"): no topo da seção ou solto */
.faixa { height: 2px; background: var(--faixa); border: 0; margin: 0; }
.secao--faixa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--faixa); }

/* temas de seção: o site alterna marinho, marinho com luz e gelo, como nas apresentações */
.tema-escuro { background: var(--abismo); }
.tema-marinho { background: var(--marinho-radial); }
.tema-marinho-plano { background: linear-gradient(180deg, #05213A 0%, #032E52 100%); }
/* sutil: quase o abismo, com uma luz marinho baixa no canto; para seções que não devem roubar a cena */
.tema-sutil { background: radial-gradient(70% 90% at 100% 100%, rgba(2, 64, 115, .55) 0%, rgba(2, 64, 115, 0) 70%), var(--abismo); border-top: 1px solid var(--fio); }
.tema-claro { background: var(--gelo); color: var(--tinta-2); }
.tema-claro .display { color: var(--tinta); }
.tema-claro .display em, .tema-claro .realce em { color: var(--marinho-medio); }
.tema-claro .rotulo { color: var(--marinho); }
.tema-claro .lead, .tema-claro .texto { color: var(--tinta-2); }
.tema-claro .num { color: var(--azul); }
.com-arcos { overflow: hidden; isolation: isolate; }
/* túnel animado (assets/js/tunel.js): o canvas substitui o PNG estático dos arcos assim que o script roda */
.tunel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
.com-arcos.tem-tunel::after { display: none; }
.abertura__fundo .tunel { z-index: 0; }
.abertura__fundo.tem-tunel:not([style]) { background: var(--marinho-radial); }
.com-arcos::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/brand/arcos.png") center 30% / max(1400px, 120%) auto no-repeat; opacity: .28;
}

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 12px 24px; border-radius: 999px;
  font: 600 14px/1 var(--f-texto); letter-spacing: .02em;
  background: var(--gelo); color: var(--tinta); border: 1px solid var(--gelo);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.botao:hover { background: var(--ceu); border-color: var(--ceu); }
.botao--vazado { background: transparent; color: var(--gelo); border-color: rgba(239, 252, 255, .4); }
.botao--vazado:hover { background: rgba(239, 252, 255, .08); border-color: var(--gelo); color: var(--gelo); }
.botao--azul { background: var(--marinho); border-color: var(--marinho); color: var(--gelo); }
.botao--azul:hover { background: var(--marinho-medio); border-color: var(--marinho-medio); }
.tema-claro .botao--vazado { color: var(--tinta); border-color: rgba(8, 36, 58, .3); }
.tema-claro .botao--vazado:hover { background: rgba(2, 64, 115, .06); border-color: var(--tinta); }
.botao .seta { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.botao:hover .seta { transform: translateX(3px); }
.link-seta { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--f-texto); color: var(--ceu); }
.link-seta .seta { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-seta:hover .seta { transform: translateX(3px); }
.tema-claro .link-seta { color: var(--marinho); }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- cabeçalho */

.cab { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--cab); transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.cab.is-solido, .cab.is-aberto { background: rgba(4, 24, 42, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--fio); }
.cab__miolo { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cab__marca { display: block; color: var(--gelo); }
.cab__logo { width: 132px; height: auto; }
.cab__nav { display: flex; align-items: center; gap: 28px; }
.cab__lista { display: flex; align-items: center; gap: 4px; }
.cab__item { position: relative; }
.cab__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font: 500 14px/1 var(--f-texto); color: rgba(239, 252, 255, .82); transition: color .2s, background .2s; }
.cab__link:hover, .cab__link[aria-current="page"] { color: var(--gelo); background: rgba(239, 252, 255, .07); }
.cab__link .chev { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.cab__item--sub:hover .chev, .cab__item--sub:focus-within .chev { transform: rotate(180deg); }
.cab__sub {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; min-width: 300px;
  padding: 8px; border-radius: var(--raio); background: rgba(4, 24, 42, .97); border: 1px solid var(--fio);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.cab__sub::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.cab__item--sub:hover .cab__sub, .cab__item--sub:focus-within .cab__sub { opacity: 1; visibility: visible; transform: none; }
.cab__sub a { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--raio-p); transition: background .2s; }
.cab__sub a:hover { background: rgba(149, 201, 216, .08); }
.cab__sub strong { font: 600 15px/1.2 var(--f-texto); color: var(--gelo); }
.cab__sub span { font-size: 13px; color: var(--texto-2); }
.cab__cta { min-height: 38px; padding: 10px 18px; font-size: 13px; }
.cab__abre { display: none; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 0; color: var(--gelo); font: 600 13px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; }
.cab__abre-ico { position: relative; width: 22px; height: 12px; }
.cab__abre-ico::before, .cab__abre-ico::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.cab__abre-ico::before { top: 2px; }
.cab__abre-ico::after { top: 9px; }
.cab.is-aberto .cab__abre-ico::before { top: 5.5px; transform: rotate(45deg); }
.cab.is-aberto .cab__abre-ico::after { top: 5.5px; transform: rotate(-45deg); }

@media (max-width: 920px) {
  .cab.is-aberto { background: var(--abismo); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cab__abre { display: inline-flex; }
  .cab__nav {
    position: fixed; inset: var(--cab) 0 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px;
    padding: 24px var(--gutter) 40px; background: var(--abismo); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .cab.is-aberto .cab__nav { opacity: 1; visibility: visible; transform: none; }
  .cab__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .cab__item { border-bottom: 1px solid var(--fio); }
  .cab__link { width: 100%; padding: 18px 0; border-radius: 0; font: 400 26px/1.1 var(--f-display); color: var(--gelo); background: none !important; }
  .cab__link .chev { display: none; }
  .cab__sub { position: static; translate: none; min-width: 0; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 12px; }
  .cab__sub::before { display: none; }
  .cab__sub a { padding: 10px 0; }
  .cab__cta { align-self: flex-start; min-height: 46px; padding: 12px 24px; font-size: 14px; }
}

/* ---------------------------------------------------------------- abertura com vídeo */

.abertura { position: relative; min-height: min(100svh, 940px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: var(--gelo); }
.abertura--media { min-height: min(78svh, 760px); }
/* aberturas com imagem (sem vídeo): faixa mais baixa */
.abertura--estreita { min-height: min(62svh, 600px); }
.abertura--fina { min-height: min(52svh, 500px); }
.abertura__fundo { position: absolute; inset: 0; z-index: -2; background: url("/assets/brand/arcos.png") center 35% / max(1500px, 130%) auto no-repeat, var(--marinho-radial); background-size: cover; }
.abertura__fundo[style] { background-size: cover; background-position: center; }
.abertura__video { position: absolute; top: 50%; left: 50%; z-index: 1; width: 100%; height: 100%; max-width: none; translate: -50% -50%; border: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.abertura__video--arquivo { object-fit: cover; }
.abertura__video.is-pronto { opacity: 1; }
.abertura::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 24, 42, .55) 0%, rgba(4, 24, 42, .15) 35%, rgba(4, 24, 42, .55) 70%, var(--abismo) 100%),
    linear-gradient(90deg, rgba(2, 40, 72, .55) 0%, rgba(2, 40, 72, 0) 65%);
}
.abertura__miolo { padding-top: calc(var(--cab) + 64px); padding-bottom: clamp(56px, 8vw, 104px); }
.abertura__conteudo { display: grid; gap: 22px; max-width: 900px; }
.abertura .lead { color: rgba(239, 252, 255, .86); }
.abertura--centro .abertura__conteudo { margin-inline: auto; text-align: center; justify-items: center; }
.abertura .botoes { margin-top: 10px; }
.abertura__pausa {
  position: absolute; right: var(--gutter); bottom: 28px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(4, 24, 42, .5); border: 1px solid rgba(239, 252, 255, .3); color: var(--gelo);
}
.abertura__pausa svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- cartões de vídeo */

.grade-videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.grade-videos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grade-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grade-videos, .grade-videos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .grade-videos, .grade-videos--3 { grid-template-columns: 1fr; } }

.video-cartao { display: grid; gap: 12px; color: inherit; text-align: left; background: none; border: 0; padding: 0; width: 100%; }
.video-cartao__capa { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio-p); overflow: hidden; background: #0A2A44; }
.video-cartao__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; }
.video-cartao__capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 24, 42, 0) 50%, rgba(4, 24, 42, .55)); opacity: .6; transition: opacity .3s; }
.video-cartao__play {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(239, 252, 255, .92); color: var(--marinho);
  box-shadow: 0 6px 18px rgba(4, 24, 42, .28); transition: transform .3s var(--ease), background .3s;
}
.video-cartao__play svg { width: 14px; height: 14px; margin-left: 2px; }
.video-cartao:hover .video-cartao__capa img, .video-cartao:focus-visible .video-cartao__capa img { transform: scale(1.04); }
.video-cartao:hover .video-cartao__play, .video-cartao:focus-visible .video-cartao__play { transform: scale(1.1); background: var(--gelo); }
.video-cartao__info { display: grid; gap: 4px; }
.video-cartao__titulo { font: 600 15px/1.35 var(--f-texto); color: var(--gelo); }
.video-cartao__meta { font-size: 13px; color: var(--texto-2); }
.tema-claro .video-cartao__titulo { color: var(--tinta); }
.tema-claro .video-cartao__meta { color: var(--tinta-2); }

/* filtros (pílulas) */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--fio); background: transparent; color: var(--texto); font: 500 14px/1 var(--f-texto);
  transition: background .2s, color .2s, border-color .2s;
}
.filtro small { font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.filtro:hover { border-color: rgba(149, 201, 216, .5); color: var(--gelo); }
.filtro[aria-pressed="true"] { background: var(--gelo); border-color: var(--gelo); color: var(--tinta); }
.filtro[aria-pressed="true"] small { color: var(--tinta-2); }
.tema-claro .filtro { border-color: var(--fio-claro); color: var(--tinta-2); }
.tema-claro .filtro[aria-pressed="true"] { background: var(--marinho); border-color: var(--marinho); color: var(--gelo); }
/* no celular as pílulas ficam numa linha só, que corre de lado, menores e sem contagem: os vídeos é que aparecem */
@media (max-width: 700px) {
  .filtros {
    flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; min-height: 32px; padding: 6px 13px; font-size: 13px; color: var(--texto-2); white-space: nowrap; }
  .filtro small { display: none; }
  .filtro[aria-pressed="true"] { background: rgba(149, 201, 216, .14); border-color: rgba(149, 201, 216, .4); color: var(--gelo); }
}

/* ---------------------------------------------------------------- player (janela do vídeo) */

.player { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gutter); background: rgba(2, 17, 32, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.player.is-aberto { opacity: 1; visibility: visible; }
.player__caixa { width: min(1180px, 100%); display: grid; gap: 16px; }
.player__tela { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio-p); overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.player__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.player__titulo { font: 400 22px/1.2 var(--f-display); color: var(--gelo); }
.player__meta { font-size: 13px; color: var(--texto-2); margin-top: 4px; }
.player__fecha { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(239, 252, 255, .08); border: 1px solid var(--fio); color: var(--gelo); }
.player__fecha:hover { background: rgba(239, 252, 255, .16); }
.player__fecha svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- logos de clientes */

.logos { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos__trilho { display: flex; align-items: center; gap: clamp(48px, 6vw, 88px); width: max-content; animation: desliza 48s linear infinite; }
.logos:hover .logos__trilho { animation-play-state: paused; }
.logos__item { flex: none; display: grid; place-items: center; height: 64px; }
.logos__item img { width: var(--w); height: var(--h); object-fit: contain; opacity: .78; }
.tema-escuro .logos__item img, .tema-marinho .logos__item img, .tema-marinho-plano .logos__item img { filter: brightness(0) invert(1); opacity: .7; }
.logos__nome { font: 600 16px/1 var(--f-texto); color: var(--tinta-2); }
@keyframes desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos__trilho { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .logos { -webkit-mask-image: none; mask-image: none; } }

/* ---------------------------------------------------------------- formatos (cartões 4 por linha) */

.formatos { display: grid; grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); gap: 1px; background: var(--fio); border: 1px solid var(--fio); border-radius: var(--raio); overflow: hidden; }
.formato { position: relative; display: grid; align-content: start; gap: 12px; padding: clamp(22px, 2.4vw, 32px); background: rgba(4, 24, 42, .94); min-height: 210px; transition: background .3s; }
.tema-marinho .formato { background: rgba(3, 30, 54, .82); }
.formato:hover { background: rgba(11, 78, 128, .55); }
.formato__nome { font: 400 22px/1.2 var(--f-display); color: var(--gelo); }
.formato__texto { font-size: 15px; line-height: 1.55; color: var(--texto); }
.formato .link-seta { margin-top: auto; padding-top: 8px; }
@media (max-width: 1080px) { .formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .formatos { grid-template-columns: 1fr; } .formato { min-height: 0; } }

/* ---------------------------------------------------------------- fecho (chamada final) */

.fecho { text-align: center; }
.fecho__miolo { display: grid; justify-items: center; gap: 20px; max-width: 760px; margin-inline: auto; }
.fecho .lead { margin-inline: auto; }
.fecho__contatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 14px; font-size: 15px; color: var(--texto); }
.fecho__contatos a:hover { color: var(--gelo); }

/* ---------------------------------------------------------------- showreel (Quem somos e LP de vídeo institucional) */

.showreel__quadro { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: #0A2A44 center / cover; isolation: isolate; }
.showreel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showreel__quadro::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 24, 42, .05) 40%, rgba(4, 24, 42, .7)); transition: opacity .4s; }
.showreel__play {
  position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); z-index: 1;
  display: inline-flex; align-items: center; gap: 16px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 clamp(15px, 1.2vw, 17px)/1.2 var(--f-texto); color: var(--gelo);
}
.showreel__icone {
  width: clamp(56px, 6vw, 80px); height: clamp(56px, 6vw, 80px); border-radius: 50%; display: grid; place-items: center;
  background: rgba(239, 252, 255, .92); color: var(--marinho); box-shadow: 0 10px 30px rgba(4, 24, 42, .35); transition: transform .3s var(--ease), background .3s;
}
.showreel__icone svg { width: 34%; height: 34%; margin-left: 4%; }
.showreel__play:hover .showreel__icone, .showreel__play:focus-visible .showreel__icone { transform: scale(1.08); background: var(--gelo); }
.showreel.is-tocando .showreel__quadro::after, .showreel.is-tocando .showreel__play { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .showreel__quadro { margin-inline: calc(var(--gutter) * -1); border-radius: 0; } }

/* ---------------------------------------------------------------- formulário */

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form__campo { display: grid; gap: 8px; }
.form__campo--largo { grid-column: 1 / -1; }
.form label { font: 600 13px/1.2 var(--f-texto); color: var(--texto); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 50px; padding: 13px 16px; border-radius: var(--raio-p);
  border: 1px solid rgba(149, 201, 216, .26); background: rgba(239, 252, 255, .04); color: var(--gelo);
  font: 400 15px/1.4 var(--f-texto); transition: border-color .2s, background .2s;
}
.form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2395C9D8' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 40px; }
.form select option { color: var(--tinta); }
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ceu); background: rgba(239, 252, 255, .07); }
.form [aria-invalid="true"] { border-color: #F2A0A0; }
.form__erro { font-size: 12px; color: #F2B8B8; min-height: 0; }
.form__fim { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; margin-top: 6px; }
.form__nota { font-size: 13px; color: var(--texto-2); max-width: 46ch; }
.form__mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__falha { grid-column: 1 / -1; padding: 14px 18px; border-radius: var(--raio-p); background: rgba(242, 160, 160, .12); color: #F6C9C9; font-size: 14px; }
.form__ok { grid-column: 1 / -1; padding: 18px 20px; border-radius: var(--raio-p); background: rgba(149, 201, 216, .12); color: var(--gelo); }
.tema-claro .form label { color: var(--tinta); }
.tema-claro .form input, .tema-claro .form select, .tema-claro .form textarea { border-color: rgba(2, 64, 115, .2); background: var(--branco); color: var(--tinta); }
.tema-claro .form input:focus, .tema-claro .form select:focus, .tema-claro .form textarea:focus { border-color: var(--marinho); background: var(--branco); }
.tema-claro .form__nota { color: var(--tinta-2); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- rodapé */

.rod { background: var(--noite); color: var(--texto-2); padding-top: clamp(56px, 7vw, 88px); position: relative; }
.rod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--faixa); }
.rod__miolo { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.rod__marca { color: var(--gelo); display: inline-block; }
.rod__logo { width: 168px; height: auto; }
.rod__frase { margin-top: 18px; font: 400 18px/1.25 var(--f-display); color: var(--gelo); max-width: 168px; }
.rod__rotulo { font: 600 12px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ceu); margin-bottom: 18px; }
.rod__nav ul, .rod__contato { display: grid; gap: 10px; font-size: 15px; }
.rod a:hover { color: var(--gelo); }
.rod__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(48px, 6vw, 72px); padding-block: 22px; border-top: 1px solid rgba(149, 201, 216, .12); font-size: 13px; }
@media (max-width: 900px) { .rod__miolo { grid-template-columns: 1fr 1fr; } .rod__intro { grid-column: 1 / -1; } }
@media (max-width: 520px) { .rod__miolo { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }