/* Exo 2 */
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 700 900;
  font-display: swap;
  src: url("../media/font/fonte-exo-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../media/font/fonte-exo-2-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fim Exo 2 */
/* Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../media/font/fonte-inter.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fim Inter */

/* Cairo (arabe): declarada com os nomes das fontes do site, so para as letras arabes; o latim segue em Exo 2 e Inter */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../media/font/fonte-exo-2-3.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../media/font/fonte-exo-2-3.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../media/font/fonte-exo-2-3.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../media/font/fonte-exo-2-3.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* =====================================================================
   KIT BASE VOWT / Web Thomaz - estilos comuns dos sites
   Copie para clientes/<cliente>/src/css/ (o novo_cliente.py ja faz isso)
   e ajuste so as variaveis de :root. Componentes:
   .container .secao .escura .clara .btn .nowrap .revela .foto-inteira
   .ponte .borda-luz .faixa-infinita .faixa-videos .player .menu-cel
   .barra-cel .wa-flutuante .cookies .mapa-toque .copiar .rodape-vowt
   ===================================================================== */

:root {
  /* ---- Marca do cliente (trocar) ---- */
  --cor-1: #0442D2;          /* principal (botoes, destaques) */
  --cor-1-escura: #0335A8;
  --cor-2: #054BF0;          /* apoio */
  --escuro: #010119;         /* secoes escuras */
  --escuro-2: #15152B;
  --claro: #FFFFFF;          /* secoes claras */
  --claro-2: #F4F5F8;
  --texto: #15152B;
  --texto-suave: #4A4A5E;
  --texto-claro: #FFFFFF;
  --linha: #2A2A3E;
  --cinza: #B2B2BA;
  --wa: #25D366;
  /* ---- Tipografia (sempre sem serifa) ---- */
  --fonte-titulo: "Sora", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto: "Sora", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* ---- Medidas ---- */
  --topo-h: 68px;            /* altura do cabecalho fixo */
  --barra-cel-h: 62px;       /* altura da barra inferior do celular */
  --raio: 16px;
  --sombra: 0 18px 50px rgba(1, 1, 25, .18);
  --secao-y: clamp(44px, 6.5vw, 88px);   /* espaco vertical das secoes: curto de proposito */
  --gutter: clamp(16px, 4vw, 32px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 8px); }
body {
  margin: 0; font-family: var(--fonte-texto); color: var(--texto); background: var(--claro);
  font-size: 16px; line-height: 1.55; overflow-x: clip; text-rendering: optimizeLegibility;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }
img, video, svg, canvas, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(32px, 6vw, 68px); }
h2 { font-size: clamp(26px, 4vw, 44px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cor-2); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }          /* numero + unidade, telefone, e-mail */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.centro { text-align: center; }

/* ---------- Secoes alternando claro / escuro ---------- */
.secao { padding-block: var(--secao-y); position: relative; }
.secao.escura { background: var(--escuro); color: var(--texto-claro); }
.secao.escura p { color: rgba(255,255,255,.82); }
.secao.clara-2 { background: var(--claro-2); }
.secao-titulo { max-width: 760px; margin: 0 auto clamp(22px, 3.5vw, 40px); text-align: center; }
.secao-titulo p { color: var(--texto-suave); font-size: clamp(15px, 1.6vw, 18px); }
.secao.escura .secao-titulo p { color: rgba(255,255,255,.75); }
/* palavra de destaque no titulo (sem etiquetas/rotulos acima do titulo) */
.destaque { color: var(--cor-1); }
.secao.escura .destaque { color: var(--cor-2); }

/* ---------- Botoes (nunca quebram em duas linhas) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--cor-1); color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none; white-space: nowrap; transition: transform .2s, background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--cor-1-escura); box-shadow: 0 10px 24px rgba(4,66,210,.28); }
.btn.contorno { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.btn.wa { background: var(--wa); color: #06331a; }
.btn svg { width: 20px; height: 20px; flex: none; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 380px) { .btn { padding: 0 16px; font-size: 14px; } }

/* ---------- Aparecer ao rolar (so sobe; nunca entra de lado) ---------- */
.js .revela { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .revela.visivel { opacity: 1; transform: none; }
/* sem JavaScript tudo aparece. No <head>: <script>document.documentElement.classList.add('js')</script> */
@media (prefers-reduced-motion: reduce) {
  .js .revela { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Foto inteira sobre copia desfocada (nunca corta rosto/texto) ----------
   <div class="foto-inteira" style="aspect-ratio:4/3"><img src="..." alt="..."></div>
   O kit JS duplica a imagem como fundo desfocado. */
.foto-inteira { position: relative; overflow: hidden; border-radius: var(--raio); background: #111; }
.foto-inteira > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.foto-inteira > img.fundo { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; filter: blur(22px) saturate(1.1) brightness(.75); z-index: 0; }

/* ---------- Cabecalho ---------- */
.topo-barra {
  position: fixed; inset: 0 0 auto 0; height: var(--topo-h); z-index: 50;
  display: flex; align-items: center; transition: background .3s, box-shadow .3s;
}
.topo-barra.rolou { background: rgba(1,1,25,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.topo-barra .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo-barra .logo img { height: 38px; width: auto; }
.topo-barra nav { display: flex; gap: 22px; }
.topo-barra nav a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: .9; }
.topo-barra nav a:hover, .topo-barra nav a.ativo { opacity: 1; color: var(--cor-2); }
.btn-menu { display: none; width: 46px; height: 46px; border-radius: 12px; border: 0; background: rgba(255,255,255,.12); color: #fff; align-items: center; justify-content: center; }
@media (max-width: 1023px) { .topo-barra nav { display: none; } .btn-menu { display: inline-flex; } }

/* ---------- Topo (hero) com video de ponta a ponta ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; background: var(--escuro); }
.hero-fundo, .hero-fundo video, .hero-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,1,25,.55), rgba(1,1,25,.35) 40%, rgba(1,1,25,.85)); }
.hero .so-pc { display: block; } .hero .so-cel { display: none; }
@media (max-aspect-ratio: 4/5) { .hero .so-pc { display: none; } .hero .so-cel { display: block; } }
.hero-conteudo { position: relative; z-index: 2; padding: calc(var(--topo-h) + 24px) var(--gutter) 64px; max-width: 980px; }
.hero h1 { color: #fff; }
.hero p.sub { font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,.85); max-width: 680px; margin-inline: auto; }
.troca { color: var(--cor-2); white-space: nowrap; }
.troca::after { content: ""; display: inline-block; width: .06em; height: .9em; margin-left: .06em; background: currentColor; vertical-align: -.08em; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 100svh; } .hero h1 { font-size: clamp(26px, 5vw, 40px); } .hero-conteudo { padding-bottom: 28px; }
}

/* ---------- Cartao de numeros sobreposto ao topo ----------
   Use dentro de uma .ponte logo depois do .hero: fica metade no topo e metade na secao seguinte. */
.hero:has(+ .ponte) .hero-conteudo { padding-bottom: calc(var(--ponte-sobra, 60px) + 40px); }
.numeros-card { background: #fff; color: var(--texto); border-radius: 20px; box-shadow: var(--sombra); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: 22px; }
.numeros-card div { text-align: center; padding: 6px; }
.numeros-card strong { display: block; font-family: var(--fonte-titulo); font-size: clamp(22px, 3vw, 34px); color: var(--cor-1); white-space: nowrap; }
.numeros-card span { font-size: 13px; color: var(--texto-suave); }
@media (max-width: 640px) { .numeros-card { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- Faixa infinita (marcas, depoimentos) ----------
   O kit JS repete o conteudo ate cobrir 2x a largura da tela (sem vao em 2560/3440 px). */
.faixa-infinita { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.faixa-infinita .trilho { display: flex; width: max-content; gap: var(--gap, 48px); animation: desliza var(--duracao, 40s) linear infinite; }
.faixa-infinita:hover .trilho { animation-play-state: paused; }
.faixa-infinita .trilho > * { flex: none; }
.faixa-infinita img { height: 44px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1) opacity(.7); transition: filter .2s; }
.faixa-infinita img:hover { filter: none; }
@keyframes desliza { to { transform: translateX(var(--desloc, -50%)); } }

/* ---------- Faixa de videos de ponta a ponta (9:16, rodando sozinhos) ---------- */
.faixa-videos { position: relative; overflow: hidden; padding-block: 8px; }
.faixa-videos .trilho { display: flex; width: max-content; gap: 10px; animation: desliza var(--duracao, 90s) linear infinite; }
.faixa-videos.pausada .trilho, .faixa-videos:hover .trilho { animation-play-state: paused; }
.cartao-video { position: relative; flex: none; width: clamp(150px, 19vw, 250px); aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: #0b0b18; border: 0; padding: 0; color: #fff; text-align: left; }
.cartao-video video, .cartao-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cartao-video .legenda { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; font-size: 13px; font-weight: 600; line-height: 1.3; background: linear-gradient(transparent, rgba(0,0,0,.78)); z-index: 2; }
.cartao-video:hover video { transform: scale(1.04); transition: transform .6s; }

/* ---------- Player grande (camada) ---------- */
.camada { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(1,1,25,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px; }
.camada.aberta { display: flex; }
.camada .fechar { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; z-index: 3; }
.player-caixa { position: relative; height: min(86svh, 820px); aspect-ratio: 9/16; max-width: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.player-caixa video { width: 100%; height: 100%; object-fit: contain; }
.player .seta { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 26px; z-index: 3; }
.player .seta.ant { left: max(12px, calc(50% - min(86svh, 820px) * 9 / 32 - 70px)); }
.player .seta.prox { right: max(12px, calc(50% - min(86svh, 820px) * 9 / 32 - 70px)); }
.player .cta { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; }
@media (max-width: 700px) { .player .seta { top: auto; bottom: 22px; transform: none; } .player .cta { bottom: 84px; } }
@media (max-height: 500px) and (orientation: landscape) { .player-caixa { height: 92svh; } .player .cta { bottom: 12px; } }

/* ---------- Banner em cartao entre secoes (metade em cada uma) ----------
   <div class="ponte"><div class="container"><div class="cartao-banner borda-luz">...</div></div></div>
   O kit JS mede a altura e ajusta --ponte-sobra. */
.ponte { position: relative; z-index: 4; margin-block: calc(-1 * var(--ponte-sobra, 90px)); }
.secao:has(+ .ponte) { padding-bottom: calc(var(--secao-y) + var(--ponte-sobra, 90px)); }
.ponte + .secao { padding-top: calc(var(--secao-y) + var(--ponte-sobra, 90px)); }
.cartao-banner { position: relative; border-radius: 22px; overflow: hidden; background: var(--escuro-2); color: #fff; box-shadow: var(--sombra); display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; }
.cartao-banner .arte { position: relative; min-height: 100%; }
.cartao-banner .arte img { width: 100%; height: 100%; object-fit: contain; }
.cartao-banner .texto { padding: clamp(18px, 3vw, 34px); }
.cartao-banner .texto h3 { font-size: clamp(20px, 2.6vw, 30px); }
@media (max-width: 760px) { .cartao-banner { grid-template-columns: 1fr; } .cartao-banner .texto { text-align: center; } }
/* borda luminosa animada */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.borda-luz { isolation: isolate; }
.borda-luz::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; z-index: 5; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 55%, var(--cor-2) 70%, #fff 75%, var(--cor-2) 80%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gira-borda 5s linear infinite; }
.borda-luz::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%); background-size: 250% 100%; animation: brilho 6s ease-in-out infinite; }
@keyframes gira-borda { to { --ang: 360deg; } }
@keyframes brilho { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }

/* ---------- Cartoes genericos ---------- */
.grade { display: grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cartao { background: #fff; border-radius: var(--raio); box-shadow: 0 6px 24px rgba(1,1,25,.08); padding: 20px; transition: transform .25s, box-shadow .25s; min-width: 0; }
.cartao:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(1,1,25,.14); }
.secao.escura .cartao { background: var(--escuro-2); color: #fff; }

/* ---------- Contato ---------- */
/* a coluna de canais acompanha a altura da coluna vizinha (formulario): o mapa cresce e nao sobra vazio */
.canais { display: grid; gap: 12px; align-content: start; grid-template-rows: auto; }
.grade > .canais:not(:only-child) { grid-auto-rows: max-content; align-content: stretch; }
.grade > .canais:not(:only-child) > .mapa-toque { aspect-ratio: auto; min-height: 180px; height: 100%; }
.canal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--claro-2); min-width: 0; }
.canal .valor { font-weight: 600; min-width: 0; flex: 1; overflow-wrap: anywhere; }  /* telefone: use class nowrap */
.copiar { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cinza); background: #fff; font-size: 13px; white-space: nowrap; }
.copiar.ok { background: var(--cor-1); border-color: var(--cor-1); color: #fff; }
.status-horario { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.status-horario::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c0392b; }
.status-horario.aberto::before { background: var(--wa); box-shadow: 0 0 0 4px rgba(37,211,102,.2); }
.form-wa { display: grid; gap: 12px; }
.form-wa label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.form-wa input, .form-wa select, .form-wa textarea { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid #cfd2dc; background: #fff; width: 100%; min-width: 0; }
.mapa-toque { position: relative; border-radius: var(--raio); overflow: hidden; aspect-ratio: 16/10; background: var(--escuro-2); color: #fff; border: 0; width: 100%; display: grid; place-items: center; }
.mapa-toque iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
details.faq { border-bottom: 1px solid #e3e5ec; padding: 14px 0; }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::after { content: "+"; font-size: 22px; line-height: 1; }
details.faq[open] summary::after { content: "\2212"; }

/* ---------- Menu do celular em cartoes (so as palavras, sem numeros: pedido do Hendry em 24/10/2026) ---------- */
.menu-cel { position: fixed; inset: 0; z-index: 150; background: var(--escuro); color: #fff; display: none; flex-direction: column; padding: calc(var(--topo-h) + 8px) var(--gutter) 20px; overflow-y: auto; overscroll-behavior: contain; }
.menu-cel.aberta { display: flex; }
.menu-cel .fechar { position: absolute; top: 11px; right: var(--gutter); width: 46px; height: 46px; border-radius: 12px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; }
.menu-cel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.menu-cel li a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); text-decoration: none; font-weight: 600; font-size: 15px; }
.menu-cel .menu-acoes { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; }
@media (max-height: 620px) { .menu-cel li a { min-height: 48px; padding: 8px 12px; } }
@media (orientation: landscape) and (max-height: 500px) { .menu-cel ol { grid-template-columns: repeat(3, 1fr); } .menu-cel .menu-acoes { grid-template-columns: 1fr 1fr; } }

/* ---------- Barra inferior fixa (so celular) ----------
   Celular em pe (ate 699 px) e celular deitado (ate 899 px com altura ate 500 px).
   Tablet em pe (700 a 899 px) fica sem a barra e usa o WhatsApp flutuante (checklist; Maxcell, ATM Alimentos). */
.barra-cel { display: none; }
@media (max-width: 699px), (max-width: 899px) and (max-height: 500px) {
  .barra-cel { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--barra-cel-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(1,1,25,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .25s; }
  .barra-cel a, .barra-cel button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; text-decoration: none; font-size: 11px; font-weight: 600; background: none; border: 0; min-width: 0; }
  .barra-cel svg { width: 22px; height: 22px; }
  .barra-cel .wa { color: var(--wa); }
  body { padding-bottom: calc(var(--barra-cel-h) + env(safe-area-inset-bottom)); }
  body.camada-aberta .barra-cel { transform: translateY(110%); }
}

/* ---------- WhatsApp flutuante (so tablet/computador) ---------- */
.wa-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0,0,0,.25); transition: opacity .25s, transform .25s; }
.wa-flutuante svg { width: 30px; height: 30px; }
@media (min-width: 900px), (min-width: 700px) and (min-height: 501px) { .wa-flutuante { display: flex; } }
.wa-flutuante.escondido { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ---------- Aviso de cookies (so quando ha GTM/GA4/Pixel) ---------- */
.cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; max-width: 560px; margin-inline: auto; background: #fff; color: var(--texto); border-radius: 16px; box-shadow: var(--sombra); padding: 16px; display: none; gap: 12px; align-items: center; font-size: 14px; }
.cookies.aberta { display: flex; }
.cookies p { margin: 0; }
@media (max-width: 899px) { .cookies { flex-direction: column; text-align: center; } }
@media (max-width: 699px), (max-width: 899px) and (max-height: 500px) { .cookies { bottom: calc(var(--barra-cel-h) + 10px + env(safe-area-inset-bottom)); } }
body.camada-aberta .cookies { display: none; }

/* ---------- Rodape com credito VOWT (obrigatorio) ---------- */
.rodape { background: var(--escuro); color: rgba(255,255,255,.78); padding: 40px 0 24px; font-size: 14px; }
.rodape a { color: #fff; }
.rodape-vowt { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.rodape-vowt a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 2px; text-decoration: none; }
.rodape-vowt img { height: 20px; width: auto; }

/* ---------- Tela de abertura ---------- */
.abertura { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--escuro); transition: opacity .6s, visibility .6s; }
.abertura img { width: min(220px, 50vw); animation: pulsa 1.6s ease-in-out infinite; }
.abertura.saiu { opacity: 0; visibility: hidden; }
@keyframes pulsa { 50% { transform: scale(1.05); opacity: .85; } }

/* ---------- Lista de orcamento ---------- */
.lista-painel { align-items: flex-end; }
@media (min-width: 700px) { .lista-painel { align-items: center; } }
.lista-caixa { position: relative; width: min(520px, 100%); max-height: 86svh; overflow: auto; background: #fff; color: var(--texto); border-radius: 20px; padding: 22px; }
.lista-caixa .fechar { background: var(--claro-2); color: var(--texto); }
.lista-itens { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.lista-itens li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--claro-2); }
.lista-itens .nome { min-width: 0; font-weight: 600; font-size: 14px; }
.lista-itens .qtd { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.lista-itens .qtd button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cinza); background: #fff; font-size: 18px; line-height: 1; }
[data-abre-lista] [data-lista-conta] { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--wa); color: #06331a; font-size: 12px; font-weight: 700; }
.aviso-curto { position: fixed; left: 50%; top: calc(var(--topo-h) + 10px); z-index: 120; transform: translate(-50%, -16px); opacity: 0; pointer-events: none; background: var(--escuro-2); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); text-align: center; }
.aviso-curto.aberta { opacity: 1; transform: translate(-50%, 0); }
body.camada-aberta .aviso-curto { display: none; }

/* ---------- Cena 3D (vowt-3d.js) ---------- */
.cena-3d { position: relative; width: 100%; border-radius: var(--raio); overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #1d2142, var(--escuro)); }
.cena-3d .reserva-3d { display: none; width: 100%; height: 100%; object-fit: contain; }
.cena-3d.sem-3d .reserva-3d { display: block; }
/* VOWT.montarAosPoucos: a foto fica ate a cena terminar de montar (sem caixa vazia) */
.cena-3d canvas { transition: opacity .5s; }
.cena-3d.montando .reserva-3d { display: block; position: absolute; inset: 0; }
.cena-3d.montando canvas { opacity: 0; transition: none; }
.cena-3d canvas:active { cursor: grabbing; }

/* =====================================================================
   KIT VOWT - LAYOUTS (pedido do Hendry em 25/10/2026: "layouts variados, que combinem com cada segmento")
   Vem DEPOIS do vowt-base.css. Cada site escolhe um layout: <html lang="pt-BR" data-layout="industrial">
   Biblioteca, segmentos e rodizio: contextos/layouts-por-segmento.md. Esqueletos: clientes/_modelo/layouts/<nome>.html
   Pecas:
     topos ........ .topo-dividido .topo-manchete .topo-vitrine .topo-palco .topo-horizonte .topo-acolhedor
                    .topo-cortina .topo-portal .topo-diagonal  (o antigo .hero do kit = layout tecnologia)
     cabecalho .... .topo-barra.clara .topo-barra.solida .topo-barra.minimo .topo-barra.logo-centro + .faixa-util
     titulos ...... .titulo-lado .coluna-fixa
     videos ....... .faixa-inclinada .videos-duplos (.faixa-videos.contra) .videos-mosaico .videos-celulares .videos-tela
     dados ........ .dados-linha (no lugar do cartao encavalado)
     divisoes ..... .corte-inclinado .corte-curva .faixa-foto
   Receita (eixos que variam alem do layout; ver "A receita do site" no documento acima):
     titulos ...... .titulo-grande          forma ........ <html data-forma="tecnico|suave|redondo|aberto|inclinado">
     fundo ........ .secao.cor              numeros ...... .contadores-faixa ([data-conta]) / .dados-linha
     contato ...... .contato-dividido .contato-foto .contato-faixa (lado a lado = o do kit base)
     instagram .... .insta-fileiras .insta-celular .insta-mosaico (grade = .insta-mural-simples / o do kit base)
     rodape ....... .rodape.colunas .rodape.gigante .rodape-chamada (simples = o do kit base)
   ===================================================================== */

/* ---------- Forma por layout (cantos, botoes, cartoes) ---------- */
html[data-layout] .btn { border-radius: var(--raio-btn, 999px); }
html[data-layout] .cartao { border-radius: var(--raio-cartao, var(--raio)); }
html[data-layout="industrial"] { --raio: 4px; --raio-btn: 4px; --raio-cartao: 4px; }
html[data-layout="industrial"] .cartao { box-shadow: none; border: 1px solid rgba(20, 20, 30, .12); }
html[data-layout="industrial"] .secao.escura .cartao { border-color: rgba(255, 255, 255, .12); }
html[data-layout="editorial"] { --raio: 10px; --raio-btn: 8px; --raio-cartao: 10px; }
html[data-layout="editorial"] .cartao { box-shadow: none; border: 1px solid rgba(20, 20, 30, .1); }
html[data-layout="vitrine"] { --raio: 14px; --raio-cartao: 14px; }
html[data-layout="palco"] { --raio: 22px; --raio-cartao: 22px; }
html[data-layout="palco"] .btn { min-height: 52px; padding: 0 28px; font-size: 16px; }
html[data-layout="horizonte"] { --raio: 6px; --raio-btn: 6px; --raio-cartao: 6px; }
html[data-layout="acolhedor"] { --raio: 24px; --raio-cartao: 24px; --sombra: 0 24px 60px rgba(20, 30, 60, .12); }
html[data-layout="acolhedor"] .cartao { box-shadow: 0 14px 40px rgba(20, 30, 60, .08); }
html[data-layout="showroom"] { --raio: 2px; --raio-btn: 0; --raio-cartao: 2px; }
html[data-layout="showroom"] .btn:not(.wa) { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; letter-spacing: .04em; }
html[data-layout="showroom"] .btn:not(.wa):hover { background: rgba(127, 127, 127, .2); box-shadow: inset 0 0 0 1.5px currentColor; }
html[data-layout="portal"] { --raio: 8px; --raio-btn: 6px; --raio-cartao: 8px; }
html[data-layout="portal"] .cartao { box-shadow: none; border: 1px solid rgba(20, 20, 30, .1); }
html[data-layout="esportivo"] { --raio: 2px; --raio-cartao: 2px; }
html[data-layout="esportivo"] .btn { border-radius: 0; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding: 0 28px; }
html[data-layout="esportivo"] h1, html[data-layout="esportivo"] h2 { font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }

/* ---------- Cabecalho ---------- */
.topo-barra.clara { background: rgba(255, 255, 255, .96); color: var(--texto); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topo-barra.clara.rolou { background: rgba(255, 255, 255, .96); box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.topo-barra.clara nav a { color: var(--texto); }
.topo-barra.clara nav a:hover, .topo-barra.clara nav a.ativo { color: var(--cor-1); }
.topo-barra.clara .btn-menu { background: var(--claro-2); color: var(--texto); }
.topo-barra.solida { background: var(--escuro); }
.topo-barra.minimo nav { display: none; }
.topo-barra.minimo .btn-menu { display: inline-flex; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); width: auto; padding: 0 16px; gap: 8px; font-weight: 600; font-size: 14px; }
.topo-barra.minimo .btn-menu::after { content: "Menu"; }
.topo-barra.logo-centro .container { display: grid; grid-template-columns: 1fr auto 1fr; }
.topo-barra.logo-centro .nav-dir { justify-content: flex-end; }
.topo-barra.logo-centro .btn-menu { justify-self: end; grid-column: 3; }
@media (max-width: 1023px) { .topo-barra.logo-centro .container { grid-template-columns: auto 1fr auto; } .topo-barra.logo-centro .logo { grid-column: 2; justify-self: center; } }
.topo-barra .nav-dir, .topo-barra .nav-esq { gap: clamp(14px, 1.6vw, 24px); }
/* faixa fina de utilidades em cima do cabecalho (vitrine, portal) */
.faixa-util { position: fixed; inset: 0 0 auto 0; height: 34px; z-index: 51; background: var(--escuro); color: rgba(255, 255, 255, .85); font-size: 12.5px; display: flex; align-items: center; }
.faixa-util .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faixa-util a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; }
.faixa-util .fu-itens { display: flex; gap: 18px; white-space: nowrap; }
html.tem-faixa-util { --topo-h: 102px; }
html.tem-faixa-util .topo-barra { top: 34px; height: 68px; }
@media (max-width: 760px) { .faixa-util { display: none; } html.tem-faixa-util { --topo-h: 68px; } html.tem-faixa-util .topo-barra { top: 0; } }

/* videos no celular/computador dentro dos topos novos */
[class^="topo-"] .so-cel { display: none; }
@media (max-aspect-ratio: 4/5) { [class^="topo-"] .so-pc { display: none; } [class^="topo-"] .so-cel { display: block; } }
[class^="topo-"] video, [class^="topo-"] .midia-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Dados em linha (no pe do topo, no lugar do cartao encavalado) ---------- */
.dados-linha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; }
.dados-linha > div { padding: 14px 18px 12px 0; border-top: 1px solid currentColor; border-color: rgba(127, 127, 127, .35); min-width: 0; }
.dados-linha > div + div { padding-left: 18px; border-left: 1px solid rgba(127, 127, 127, .35); }
.dados-linha dd { margin: 0; font: 800 clamp(22px, 2.6vw, 34px)/1.05 var(--fonte-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dados-linha dt { font-size: 13px; opacity: .75; margin-top: 4px; line-height: 1.3; }
@media (max-width: 560px) { .dados-linha { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .dados-linha > div:nth-child(odd) { padding-left: 0; border-left: 0; } .dados-linha > div:nth-child(even) { padding-left: 14px; } }

/* =====================================================================
   TOPOS
   ===================================================================== */

/* 1. INDUSTRIAL: dividido, texto a esquerda e midia emoldurada a direita */
.topo-dividido { position: relative; background: var(--escuro); color: #fff; padding: calc(var(--topo-h) + clamp(24px, 4vw, 56px)) 0 clamp(36px, 5vw, 64px); overflow: hidden; }
.topo-dividido .td-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: center; }
.topo-dividido h1 { font-size: clamp(32px, 4.6vw, 62px); line-height: 1.06; color: #fff; text-align: left; max-width: 16ch; }
.topo-dividido .sub { font-size: clamp(16px, 1.6vw, 19px); color: rgba(255, 255, 255, .8); max-width: 52ch; }
.topo-dividido .botoes { justify-content: flex-start; margin: 22px 0 30px; }
.topo-dividido .td-midia { position: relative; aspect-ratio: 4 / 4.4; background: #000; clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%); }
.topo-dividido .td-midia::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); pointer-events: none; }
.topo-dividido .td-midia .td-marca { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(0, 0, 0, .6); padding: 6px 10px; font-size: 13px; font-weight: 600; }
@media (max-width: 860px) {
  .topo-dividido .td-grade { grid-template-columns: minmax(0, 1fr); }
  .topo-dividido .td-midia { order: -1; aspect-ratio: 16 / 11; clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
  .topo-dividido { padding-top: calc(var(--topo-h) + 12px); }
}

/* 2. EDITORIAL: manchete enorme a esquerda e faixa de midia larga embaixo */
.topo-manchete { background: var(--claro-2); color: var(--texto); padding: calc(var(--topo-h) + clamp(28px, 6vw, 84px)) 0 clamp(28px, 4vw, 56px); }
.topo-manchete h1 { font-size: clamp(38px, 7.4vw, 104px); line-height: 1.02; letter-spacing: -.035em; max-width: 14ch; margin-bottom: clamp(18px, 3vw, 34px); }
.topo-manchete .tm-pe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; padding-bottom: clamp(22px, 3vw, 36px); border-bottom: 1px solid rgba(0, 0, 0, .12); }
.topo-manchete .sub { margin: 0; max-width: 54ch; font-size: clamp(16px, 1.6vw, 19px); color: var(--texto-suave); }
.topo-manchete .botoes { justify-content: flex-end; }
.topo-manchete .tm-quadro { margin-top: clamp(22px, 3vw, 36px); aspect-ratio: 21 / 8; border-radius: var(--raio); overflow: hidden; background: #ddd; }
@media (max-width: 760px) {
  .topo-manchete .tm-pe { grid-template-columns: minmax(0, 1fr); }
  .topo-manchete .botoes { justify-content: flex-start; }
  .topo-manchete .tm-quadro { aspect-ratio: 4 / 3.2; }
}

/* 3. VITRINE: bloco grande + blocos de categoria */
.topo-vitrine { background: var(--claro); padding: calc(var(--topo-h) + 16px) 0 clamp(20px, 3vw, 36px); }
.topo-vitrine .tv-grade { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; height: min(74svh, 620px); min-height: 440px; }
.topo-vitrine .tv-grande { grid-row: 1 / 3; position: relative; border-radius: var(--raio); overflow: hidden; color: #fff; text-decoration: none; background: #111; display: flex; align-items: flex-end; }
.topo-vitrine .tv-grande video, .topo-vitrine .tv-grande .midia-img { position: absolute; inset: 0; }
.topo-vitrine .tv-grande::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78)); }
.topo-vitrine .tv-texto { position: relative; z-index: 2; padding: clamp(18px, 3vw, 36px); }
.topo-vitrine h1 { color: #fff; font-size: clamp(28px, 3.6vw, 48px); max-width: 15ch; margin-bottom: 10px; }
.topo-vitrine .tv-texto p { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-bottom: 16px; }
.topo-vitrine .tv-cats { display: contents; }
.topo-vitrine .tv-bloco { position: relative; border-radius: var(--raio); overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; color: #fff; background: #222; }
.topo-vitrine .tv-bloco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.topo-vitrine .tv-bloco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .7)); }
.topo-vitrine .tv-bloco span { position: relative; z-index: 2; padding: 14px 16px; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.topo-vitrine .tv-bloco span::after { content: "\2192"; transition: transform .25s; }
.topo-vitrine .tv-bloco:hover img { transform: scale(1.06); }
.topo-vitrine .tv-bloco:hover span::after { transform: translateX(4px); }
@media (max-width: 860px) {
  .topo-vitrine .tv-grade { display: block; height: auto; min-height: 0; }
  .topo-vitrine .tv-grande { min-height: min(68svh, 520px); }
  .topo-vitrine .tv-cats { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; margin: 10px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .topo-vitrine .tv-cats::-webkit-scrollbar { display: none; }
  .topo-vitrine .tv-bloco { aspect-ratio: 1; scroll-snap-align: start; }
}

/* 4. PALCO: produto no centro sobre a cor da marca */
.topo-palco { --palco: var(--cor-1); position: relative; overflow: hidden; color: #fff; padding: calc(var(--topo-h) + clamp(16px, 3vw, 40px)) 0 clamp(28px, 4vw, 52px);
  background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--palco) 72%, #fff 28%) 0%, var(--palco) 55%, color-mix(in srgb, var(--palco) 75%, #000 25%) 100%); transition: background .6s; }
.topo-palco .tp-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "a produto ." ". produto b" "pe pe pe"; align-items: center; gap: 0 clamp(12px, 2vw, 28px); }
.topo-palco h1 { display: contents; }
.topo-palco .tp-a, .topo-palco .tp-b { font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(34px, 5.4vw, 78px); line-height: 1; letter-spacing: -.03em; color: #fff; }
.topo-palco .tp-a { grid-area: a; align-self: end; }
.topo-palco .tp-b { grid-area: b; align-self: start; text-align: right; }
.topo-palco .tp-produto { grid-area: produto; position: relative; display: grid; place-items: center; min-height: clamp(240px, 30vw, 420px); }
.topo-palco .tp-produto img { position: relative; z-index: 2; max-height: clamp(220px, 28vw, 400px); width: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); animation: palco-flutua 5s ease-in-out infinite; transition: opacity .35s, transform .35s; }
.topo-palco .tp-produto::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 4%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent); animation: palco-sombra 5s ease-in-out infinite; }
@keyframes palco-flutua { 50% { transform: translateY(-12px); } }
@keyframes palco-sombra { 50% { transform: scaleX(.86); opacity: .7; } }
.topo-palco .tp-pe { grid-area: pe; display: grid; justify-items: center; text-align: center; gap: 14px; margin-top: clamp(10px, 2vw, 24px); }
.topo-palco .sub { margin: 0; max-width: 56ch; color: rgba(255, 255, 255, .9); font-size: clamp(16px, 1.6vw, 19px); }
.topo-palco .tp-linhas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.topo-palco .tp-linhas button { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; font-weight: 600; font-size: 14px; }
.topo-palco .tp-linhas button[aria-pressed="true"] { background: #fff; color: var(--palco); border-color: #fff; }
.topo-palco .btn { background: #fff; color: var(--palco); }
.topo-palco .btn.wa { background: var(--wa); color: #06331a; }
@media (max-width: 760px) {
  .topo-palco .tp-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "produto" "b" "pe"; text-align: center; }
  .topo-palco .tp-a, .topo-palco .tp-b { text-align: center; font-size: clamp(32px, 10vw, 46px); }
  .topo-palco .tp-a { margin-bottom: 18px; } .topo-palco .tp-b { margin-top: 14px; }
  .topo-palco .tp-produto { min-height: 0; padding-block: 6px; }
  .topo-palco .tp-produto img { max-height: 210px; }
}
@media (prefers-reduced-motion: reduce) { .topo-palco .tp-produto img, .topo-palco .tp-produto::after { animation: none; } }

/* 5. HORIZONTE: midia de ponta a ponta, texto no canto de baixo e barra de dados */
.topo-horizonte { position: relative; min-height: 86svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--escuro); overflow: hidden; }
.topo-horizonte .th-midia { position: absolute; inset: 0; }
.topo-horizonte .th-midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 14, .82) 0%, rgba(10, 12, 14, .35) 55%, rgba(10, 12, 14, .1) 100%), linear-gradient(0deg, rgba(10, 12, 14, .7), transparent 45%); }
.topo-horizonte .th-texto { position: relative; z-index: 2; padding-top: calc(var(--topo-h) + 30px); padding-bottom: clamp(22px, 3vw, 40px); }
.topo-horizonte h1 { color: #fff; font-size: clamp(34px, 5.6vw, 76px); line-height: 1.03; max-width: 15ch; }
.topo-horizonte .sub { max-width: 56ch; font-size: clamp(16px, 1.6vw, 19px); color: rgba(255, 255, 255, .86); }
.topo-horizonte .botoes { justify-content: flex-start; margin-top: 18px; }
.topo-horizonte .th-dados { position: relative; z-index: 2; background: rgba(10, 12, 14, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .14); }
.topo-horizonte .th-dados .dados-linha > div { border-top: 0; padding-block: 16px; }
@media (max-height: 520px) and (orientation: landscape) { .topo-horizonte { min-height: 100svh; } .topo-horizonte h1 { font-size: clamp(24px, 7vh, 34px); } .topo-horizonte .sub { display: none; } }

/* 6. ACOLHEDOR: claro, foto em forma arredondada e cartao flutuante */
.topo-acolhedor { position: relative; overflow: hidden; color: var(--texto); padding: calc(var(--topo-h) + clamp(20px, 4vw, 56px)) 0 clamp(36px, 5vw, 70px);
  background: radial-gradient(60% 70% at 90% 30%, color-mix(in srgb, var(--cor-1) 16%, #fff 84%), transparent 70%), radial-gradient(40% 50% at 10% 90%, color-mix(in srgb, var(--cor-2) 14%, #fff 86%), transparent 70%), #fffdfa; }
.topo-acolhedor .ta-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 60px); align-items: center; }
.topo-acolhedor h1 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.08; max-width: 15ch; }
.topo-acolhedor .sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--texto-suave); max-width: 50ch; }
.topo-acolhedor .botoes { justify-content: flex-start; margin: 22px 0 16px; }
.topo-acolhedor .ta-midia { position: relative; }
.topo-acolhedor .ta-forma { aspect-ratio: 1 / 1.05; border-radius: 46% 54% 42% 58% / 52% 42% 58% 48%; overflow: hidden; background: #e8e4dc; box-shadow: var(--sombra); animation: ta-respira 12s ease-in-out infinite; }
@keyframes ta-respira { 50% { border-radius: 54% 46% 56% 44% / 44% 56% 44% 56%; } }
.topo-acolhedor .ta-cartao { position: absolute; left: -12px; bottom: 8%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(20, 30, 60, .16); max-width: 280px; }
.topo-acolhedor .ta-cartao .ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--cor-1) 14%, #fff 86%); color: var(--cor-1); }
.topo-acolhedor .ta-cartao b { display: block; font-size: 15px; } .topo-acolhedor .ta-cartao small { font-size: 13px; color: var(--texto-suave); }
@media (max-width: 860px) {
  .topo-acolhedor .ta-grade { grid-template-columns: minmax(0, 1fr); }
  .topo-acolhedor .ta-midia { max-width: 420px; justify-self: center; width: 100%; }
  .topo-acolhedor .ta-cartao { left: 8px; }
}
@media (prefers-reduced-motion: reduce) { .topo-acolhedor .ta-forma { animation: none; } }

/* 7. SHOWROOM: cortina (tela cheia; o que vem depois sobe por cima) */
.topo-cortina { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 480px; color: #fff; background: #000; display: grid; align-items: end; overflow: hidden; }
.topo-cortina .tc-midia { position: absolute; inset: 0; }
.topo-cortina .tc-midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, .3)); }
.topo-cortina .tc-texto { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter) clamp(36px, 7vh, 80px); max-width: 980px; margin: 0 auto; }
.topo-cortina h1 { color: #fff; font-weight: 600; font-size: clamp(36px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -.03em; }
.topo-cortina .sub { color: rgba(255, 255, 255, .85); font-size: clamp(16px, 1.6vw, 19px); max-width: 52ch; margin: 0 auto 22px; }
.topo-cortina ~ .secao, .topo-cortina ~ .ponte, .topo-cortina ~ section { position: relative; z-index: 1; }
.topo-cortina ~ .secao:not(.escura):not(.clara-2) { background: var(--claro); }
.painel-foto { position: relative; height: 90svh; min-height: 420px; overflow: hidden; color: #fff; display: grid; align-items: end; z-index: 1; }
.painel-foto > img, .painel-foto > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.painel-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 50%); }
.painel-foto .pf-texto { position: relative; z-index: 2; padding: clamp(20px, 4vw, 56px) var(--gutter); max-width: 760px; }
.painel-foto h2 { color: #fff; font-weight: 600; }
html[data-layout="showroom"] .menu-cel ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); max-width: 1000px; width: 100%; margin: 0 auto; }

/* 8. PORTAL: identidade + destaque com coluna de agenda/noticias */
.topo-portal { background: var(--claro-2); padding: calc(var(--topo-h) + clamp(16px, 2.6vw, 30px)) 0 clamp(24px, 3vw, 40px); }
.topo-portal .tpo-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 32px; margin-bottom: clamp(16px, 2.4vw, 26px); }
.topo-portal h1 { font-size: clamp(28px, 3.6vw, 46px); margin: 0; max-width: 22ch; }
.topo-portal .tpo-intro .sub { margin: 8px 0 0; color: var(--texto-suave); max-width: 60ch; }
.topo-portal .tpo-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 22px); align-items: stretch; }
.topo-portal .tpo-destaque { position: relative; display: flex; align-items: flex-end; min-height: clamp(320px, 38vw, 470px); border-radius: var(--raio); overflow: hidden; color: #fff; text-decoration: none; background: #222; }
.topo-portal .tpo-destaque > img, .topo-portal .tpo-destaque > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.topo-portal .tpo-destaque::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .8)); }
.topo-portal .tpo-texto { position: relative; z-index: 2; padding: clamp(16px, 2.6vw, 30px); }
.topo-portal .tpo-texto h2 { color: #fff; font-size: clamp(22px, 2.6vw, 34px); margin-bottom: 6px; }
.topo-portal .tpo-texto p { margin: 0; color: rgba(255, 255, 255, .85); }
.topo-portal .tpo-data { display: inline-block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.topo-portal .tpo-lista { display: flex; flex-direction: column; gap: 0; padding: 18px; border-radius: var(--raio); background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
.topo-portal .tpo-lista h2 { font-size: 18px; margin: 0 0 6px; }
.topo-portal .tpo-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); text-decoration: none; color: var(--texto); }
.topo-portal .tpo-item time { display: grid; place-items: center; height: 56px; border-radius: var(--raio); background: var(--claro-2); font: 800 20px/1 var(--fonte-titulo); color: var(--cor-1); text-align: center; }
.topo-portal .tpo-item time small { display: block; font: 600 11.5px/1 var(--fonte-texto); color: var(--texto-suave); margin-top: 3px; }
.topo-portal .tpo-item b { font-size: 15px; line-height: 1.3; }
.topo-portal .tpo-lista .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) {
  .topo-portal .tpo-intro, .topo-portal .tpo-grade { grid-template-columns: minmax(0, 1fr); }
  .topo-portal .tpo-lista .btn { margin-top: 14px; }
}

/* 10. ESPORTIVO: video, texto no canto e faixa inclinada com numeros */
.topo-diagonal { position: relative; min-height: 92svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: #0b0b0d; overflow: hidden; }
.topo-diagonal .tg-midia { position: absolute; inset: 0; }
.topo-diagonal .tg-midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .25) 60%), linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 40%); }
.topo-diagonal .tg-texto { position: relative; z-index: 2; padding-top: calc(var(--topo-h) + 30px); padding-bottom: clamp(56px, 8vw, 100px); }
.topo-diagonal h1 { color: #fff; font-weight: 900; font-size: clamp(36px, 6.6vw, 92px); line-height: .98; max-width: 13ch; }
.topo-diagonal .sub { max-width: 52ch; color: rgba(255, 255, 255, .85); font-size: clamp(16px, 1.6vw, 19px); }
.topo-diagonal .botoes { justify-content: flex-start; margin-top: 18px; }
.topo-diagonal .tg-faixa { position: relative; z-index: 2; color: #fff; padding-top: clamp(30px, 4vw, 48px); margin-top: calc(-1 * clamp(30px, 4vw, 48px)); }
.topo-diagonal .tg-faixa::before { content: ""; position: absolute; inset: 0; background: var(--cor-1); clip-path: polygon(0 clamp(26px, 3.6vw, 44px), 100% 0, 100% 100%, 0 100%); }
.topo-diagonal .tg-faixa .container { position: relative; }
.topo-diagonal .tg-faixa .dados-linha > div { border-top: 0; border-color: rgba(255, 255, 255, .35); padding-block: 14px; }
.topo-diagonal .tg-faixa dd { font-style: italic; }

/* =====================================================================
   TITULOS
   ===================================================================== */
.titulo-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px clamp(20px, 4vw, 60px); align-items: end; margin-bottom: clamp(22px, 3.4vw, 40px); padding-bottom: clamp(14px, 2vw, 22px); border-bottom: 1px solid rgba(127, 127, 127, .3); }
.titulo-lado h2 { margin: 0; max-width: 18ch; }
.titulo-lado p { margin: 0; color: var(--texto-suave); font-size: clamp(15px, 1.5vw, 18px); max-width: 56ch; }
.secao.escura .titulo-lado p { color: rgba(255, 255, 255, .75); }
@media (max-width: 760px) { .titulo-lado { grid-template-columns: minmax(0, 1fr); } }
.coluna-fixa { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(22px, 4vw, 64px); align-items: stretch; }
.coluna-fixa .cf-titulo { display: flex; flex-direction: column; min-width: 0; }
.coluna-fixa .cf-foto { flex: 1 1 0; min-height: 220px; margin-top: 18px; border-radius: var(--raio); }  /* a foto preenche a altura: as colunas terminam juntas */
.coluna-fixa .cf-titulo h2 { max-width: 14ch; }
.coluna-fixa .cf-titulo p { color: var(--texto-suave); }
.secao.escura .coluna-fixa .cf-titulo p { color: rgba(255, 255, 255, .75); }
@media (max-width: 860px) { .coluna-fixa { grid-template-columns: minmax(0, 1fr); } .coluna-fixa .cf-foto { flex: none; aspect-ratio: 16 / 10; min-height: 0; } }

/* lista em indice (editorial, portal) */
.indice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 4vw, 56px); }
.indice li { border-top: 1px solid rgba(127, 127, 127, .3); }
.indice a, .indice button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 18px 0; background: none; border: 0; text-align: left; color: inherit; text-decoration: none; font: 700 clamp(17px, 1.8vw, 21px)/1.25 var(--fonte-titulo); }
.indice a::after, .indice button::after { content: "\2192"; font-weight: 400; transition: transform .25s; }
.indice a:hover::after, .indice button:hover::after { transform: translateX(5px); }
.indice small { display: block; font: 400 14px/1.4 var(--fonte-texto); color: var(--texto-suave); margin-top: 4px; }
@media (max-width: 760px) { .indice { grid-template-columns: minmax(0, 1fr); } }

/* mosaico de blocos (tecnologia, vitrine) */
.mosaico { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.mosaico .m-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mosaico .m-grande, .mosaico .m-lado > * { border-radius: var(--raio); padding: 20px; background: var(--claro-2); min-width: 0; min-height: 150px; }
.mosaico .m-grande { min-height: 312px; }
.secao.escura .mosaico .m-grande, .secao.escura .mosaico .m-lado > * { background: var(--escuro-2); }
.mosaico .m-largo { grid-column: span 2; }
@media (max-width: 760px) { .mosaico { grid-template-columns: minmax(0, 1fr); } .mosaico .m-grande { min-height: 220px; } }

/* =====================================================================
   VIDEOS (todos 9:16, tocando sozinhos; o formato muda por layout)
   ===================================================================== */
/* faixa inclinada sobre a cor da marca */
.faixa-inclinada { position: relative; overflow: hidden; padding-block: clamp(34px, 5vw, 64px); background: var(--escuro); }
.faixa-inclinada::before { content: ""; position: absolute; left: -5%; right: -5%; top: 18%; bottom: 18%; background: var(--cor-1); transform: rotate(-4deg); }
.faixa-inclinada .faixa-videos { position: relative; z-index: 1; }
.faixa-inclinada .cartao-video { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
/* duas fileiras em sentidos opostos */
.videos-duplos { display: grid; gap: 10px; }
.videos-duplos .cartao-video { width: clamp(130px, 15vw, 210px); }
.faixa-videos.contra .trilho { animation-direction: reverse; }
/* mosaico: um grande e oito menores (computador); fila que rola no celular */
.videos-mosaico { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; align-items: stretch; }
.videos-mosaico .vm-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.videos-mosaico .cartao-video { width: 100%; }
.videos-mosaico > .cartao-video { height: 100%; aspect-ratio: auto; }
@media (max-width: 860px) {
  .videos-mosaico, .videos-mosaico .vm-grade { display: flex; gap: 10px; }
  .videos-mosaico { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .videos-mosaico::-webkit-scrollbar { display: none; }
  .videos-mosaico .cartao-video, .videos-mosaico > .cartao-video { flex: none; width: 40vw; max-width: 220px; height: auto; aspect-ratio: 9 / 16; scroll-snap-align: start; }
}
/* celulares inclinados com o video tocando */
.videos-celulares { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.videos-celulares .vc-palco { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2vw, 26px); perspective: 1400px; min-height: clamp(360px, 46vw, 560px); }
.videos-celulares .vc-cel { position: relative; flex: none; width: clamp(130px, 15vw, 220px); aspect-ratio: 9 / 19; padding: 8px; border-radius: 34px; background: #0d0d10; box-shadow: 0 30px 60px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .12); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.videos-celulares .vc-cel::before { content: ""; position: absolute; top: 14px; left: 50%; width: 30%; height: 14px; transform: translateX(-50%); border-radius: 999px; background: #0d0d10; z-index: 3; }
.videos-celulares .vc-cel .cartao-video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 26px; }
.videos-celulares .vc-cel:nth-child(1) { transform: rotateY(22deg) scale(.88); }
.videos-celulares .vc-cel:nth-child(2) { transform: translateY(-14px); }
.videos-celulares .vc-cel:nth-child(3) { transform: rotateY(-22deg) scale(.88); }
.videos-celulares .vc-palco:hover .vc-cel:nth-child(1) { transform: rotateY(12deg) scale(.92); }
.videos-celulares .vc-palco:hover .vc-cel:nth-child(3) { transform: rotateY(-12deg) scale(.92); }
@media (max-width: 860px) { .videos-celulares { grid-template-columns: minmax(0, 1fr); } .videos-celulares .vc-palco { min-height: 0; padding-block: 10px; gap: 6px; } .videos-celulares .vc-cel { width: 30%; max-width: 170px; padding: 5px; border-radius: 24px; } .videos-celulares .vc-cel .cartao-video { border-radius: 19px; } }
/* video grande com miniaturas (showroom) */
.videos-tela { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 40px); align-items: stretch; }
.videos-tela .vt-grande .cartao-video { width: min(100%, calc(80svh * 9 / 16)); height: auto; aspect-ratio: 9 / 16; margin-inline: auto; display: block; }
.videos-tela .vt-lado { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.videos-tela .vt-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.videos-tela .vt-mini .cartao-video { width: 100%; }
@media (max-width: 860px) { .videos-tela { grid-template-columns: minmax(0, 1fr); } .videos-tela .vt-grande .cartao-video { width: min(100%, calc(70svh * 9 / 16)); } }

/* =====================================================================
   DIVISOES ENTRE SECOES
   ===================================================================== */
.corte-inclinado { clip-path: polygon(0 clamp(28px, 4vw, 60px), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * clamp(28px, 4vw, 60px)); padding-top: calc(var(--secao-y) + clamp(28px, 4vw, 60px)); position: relative; z-index: 1; }
.corte-curva { border-top-left-radius: 50% clamp(24px, 4vw, 56px); border-top-right-radius: 50% clamp(24px, 4vw, 56px); margin-top: calc(-1 * clamp(24px, 4vw, 56px)); position: relative; z-index: 1; }

/* mural simples do Instagram dos esqueletos (troque pelo perfil + destaques + mural do site) */
.insta-mural-simples { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.insta-mural-simples a { display: block; aspect-ratio: 1; border-radius: var(--raio); overflow: hidden; background: #ddd; }
.insta-mural-simples img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.insta-mural-simples a:hover img { transform: scale(1.06); }
@media (max-width: 760px) { .insta-mural-simples { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }

/* esportivo e horizonte em tela baixa (celular pequeno e deitado): o conteudo cabe na tela */
@media (max-height: 620px) and (orientation: portrait), (max-width: 360px) {
  .topo-diagonal { min-height: 100svh; } .topo-diagonal h1 { font-size: clamp(28px, 9vw, 38px); } .topo-diagonal .tg-texto { padding-bottom: 44px; }
  .topo-diagonal .sub, .topo-horizonte .sub { font-size: 15px; }
  .topo-horizonte { min-height: 100svh; } .topo-horizonte h1 { font-size: clamp(28px, 9vw, 38px); } .topo-horizonte .th-texto { padding-bottom: 18px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .topo-diagonal { min-height: 100svh; } .topo-diagonal h1 { font-size: clamp(24px, 7vh, 34px); } .topo-diagonal .sub { display: none; }
  .topo-diagonal .tg-texto { padding-top: calc(var(--topo-h) + 10px); padding-bottom: 40px; }
}

/* =====================================================================
   RECEITA DO SITE (25/10/2026: "a ideia e os sites nao ficarem com cara de iguais e so mudar cor, imagem")
   Cada eixo varia sozinho, alem do layout. Catalogo de pecas: clientes/_modelo/layouts/pecas.html
   ===================================================================== */

/* conteudo de <details> fechado nao ocupa lugar (perguntas e formulario recolhido) */
details:not([open]) > :not(summary) { display: none; }
/* canais de contato legiveis em secao escura (no kit base ficavam claros com texto branco) */
.secao.escura .canal { background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .1); }
.secao.escura .copiar { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.secao.escura .form-wa.cartao { background: #fff; color: var(--texto); }
.secao.escura details.faq { border-color: rgba(255, 255, 255, .14); }

/* ---------- Titulo grande (eixo titulos = grande) ---------- */
.titulo-grande { margin-bottom: clamp(20px, 3vw, 36px); }
.titulo-grande h2 { font-size: clamp(28px, 4vw, 54px); /* no maximo ~54 px (Nando SA v2 e VBauer v4: "titulos muito grande") */ line-height: 1; letter-spacing: -.035em; max-width: 16ch; margin: 0; }
.titulo-grande p { margin: 12px 0 0; max-width: 60ch; color: var(--texto-suave); font-size: clamp(15px, 1.5vw, 18px); }
.secao.escura .titulo-grande p { color: rgba(255, 255, 255, .75); }

/* ---------- Fundo na cor da marca (eixo fundo = cor): <section class="secao cor">; cor clara da marca -> style="--sobre-cor: var(--texto)" ---------- */
.secao.cor { --sobre-cor: #fff; background: var(--cor-1); color: var(--sobre-cor); }
.secao.cor :is(h2, h3, .secao-titulo p, .titulo-lado p, .titulo-grande p) { color: var(--sobre-cor); }
.secao.cor p { opacity: .9; }
.secao.cor .destaque { color: inherit; background: linear-gradient(transparent 62%, rgba(255, 255, 255, .24) 0); }
.secao.cor .btn:not(.wa):not(.contorno) { background: var(--sobre-cor); color: var(--cor-1); }

/* ---------- Faixa de foto entre secoes (eixo divisoes = fotos): foto de ambiente, sem rosto nem texto na borda ---------- */
.faixa-foto { position: relative; height: clamp(200px, 34vw, 460px); overflow: hidden; background: var(--escuro); color: #fff; }
.faixa-foto > img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; transform: translateY(var(--ff-y, 0)); will-change: transform; }
.faixa-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 55%); pointer-events: none; }
.faixa-foto .ff-frase { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(16px, 3vw, 36px); margin: 0 auto; width: min(100% - 2 * var(--gutter), 1200px);
  font: 700 clamp(20px, 3vw, 40px)/1.15 var(--fonte-titulo); letter-spacing: -.02em; max-width: none; }

/* ---------- Forma (eixo forma: <html data-forma="...">; sem ele vale a forma do layout) ---------- */
html[data-forma="tecnico"] { --raio: 4px; --raio-btn: 4px; --raio-cartao: 4px; }
html[data-forma="tecnico"] .cartao { box-shadow: none; border: 1px solid rgba(127, 127, 127, .25); }
html[data-forma="suave"] { --raio: 12px; --raio-btn: 10px; --raio-cartao: 12px; }
html[data-forma="suave"] .cartao { box-shadow: 0 8px 26px rgba(0, 0, 0, .07); border: 0; }
html[data-forma="redondo"] { --raio: 26px; --raio-btn: 999px; --raio-cartao: 26px; }
html[data-forma="redondo"] .cartao { box-shadow: 0 18px 50px rgba(0, 0, 0, .1); border: 0; }
html[data-forma="aberto"] { --raio: 6px; --raio-btn: 0; --raio-cartao: 0; }
html[data-forma="aberto"] .cartao { background: transparent; box-shadow: none; border: 0; padding: 0; }
html[data-forma="aberto"] .cartao:hover { transform: none; box-shadow: none; }
html[data-forma="aberto"] .btn:not(.wa) { background: transparent; color: currentColor; box-shadow: inset 0 -2px 0 currentColor; padding: 0 4px; min-height: 40px; }
html[data-forma="inclinado"] { --raio: 2px; --raio-cartao: 2px; }
html[data-forma="inclinado"] .btn { border-radius: 0; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding: 0 28px; }
html[data-forma="inclinado"] .cartao { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }

/* ---------- Numeros que contam numa faixa de cor (eixo numeros = contadores) ---------- */
.contadores-faixa { background: var(--cor-1); color: #fff; padding-block: clamp(26px, 4vw, 44px); }
.contadores-faixa .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; }
.contadores-faixa .cf-num { font: 800 clamp(32px, 4.6vw, 60px)/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contadores-faixa .cf-rot { display: block; margin-top: 6px; font-size: 14px; opacity: .85; }

/* ---------- Contato DIVIDIDO: titulo enorme + WhatsApp a esquerda, formulario a direita, mapa embaixo ---------- */
.contato-dividido .cd-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: stretch; }
.contato-dividido .cd-chamada { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contato-dividido .cd-chamada h2 { font-size: clamp(28px, 4vw, 54px); line-height: 1; letter-spacing: -.03em; margin: 0; }
.contato-dividido .cd-wa { align-self: flex-start; min-height: 58px; padding: 0 28px; font-size: 17px; }
.contato-dividido .cd-canais { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 0; }
.contato-dividido .cd-canais li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(127, 127, 127, .3); min-width: 0; }
.contato-dividido .cd-canais .valor { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.contato-dividido .mapa-toque { margin-top: clamp(18px, 3vw, 30px); aspect-ratio: 21 / 6; min-height: 160px; }
@media (max-width: 860px) { .contato-dividido .cd-grade { grid-template-columns: minmax(0, 1fr); } .contato-dividido .mapa-toque { aspect-ratio: 16 / 9; } }

/* ---------- Contato FOTO: foto de ponta a ponta (fachada/obra) com um cartao por cima ---------- */
.contato-foto { position: relative; padding-block: clamp(48px, 8vw, 110px); color: #fff; overflow: hidden; }
.contato-foto > .cfo-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contato-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 14, .82), rgba(10, 10, 14, .45)); z-index: 1; }
.contato-foto .container { position: relative; z-index: 2; }
.contato-foto .cfo-cartao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 36px); padding: clamp(18px, 3vw, 34px); border-radius: var(--raio); background: rgba(16, 17, 22, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .14); }
.contato-foto h2 { color: #fff; }
.contato-foto .cfo-lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.contato-foto .canal { background: rgba(255, 255, 255, .08); color: #fff; }
.contato-foto .copiar { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.contato-foto .form-wa { background: #fff; color: var(--texto); border-radius: var(--raio); padding: 18px; }
.contato-foto .cfo-lado .mapa-toque { flex: 1 1 auto; min-height: 120px; aspect-ratio: auto; }  /* o mapa preenche: as colunas terminam juntas */
@media (max-width: 860px) { .contato-foto .cfo-cartao { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contato FAIXA (curto): 3 acoes grandes + perguntas; formulario recolhido ---------- */
.contato-faixa .cx-acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contato-faixa .cx-acao { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 18px 20px; border-radius: var(--raio); background: var(--escuro-2); color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .1); transition: transform .2s, background .2s; }
.contato-faixa .cx-acao:hover { transform: translateY(-3px); background: var(--cor-1); }
.contato-faixa .cx-acao svg { flex: none; width: 30px; height: 30px; }
.contato-faixa .cx-acao b { display: block; font-size: 17px; } .contato-faixa .cx-acao small { display: block; font-size: 13px; opacity: .8; }
.contato-faixa .cx-acao.wa { background: var(--wa); color: #06331a; border-color: transparent; }
.contato-faixa .cx-baixo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: clamp(18px, 3vw, 30px); max-width: 860px; margin-inline: auto; }
.contato-faixa details.cx-escrever { border-radius: var(--raio); background: var(--escuro-2); color: #fff; padding: 0 18px; }
.contato-faixa details.cx-escrever summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; font-weight: 700; list-style: none; }
.contato-faixa details.cx-escrever[open] { padding-bottom: 18px; }
.contato-faixa details.cx-escrever .form-wa { background: #fff; color: var(--texto); border-radius: var(--raio); padding: 16px; }
@media (max-width: 760px) { .contato-faixa .cx-acoes { grid-template-columns: minmax(0, 1fr); } .contato-faixa .cx-acao { min-height: 72px; } }

/* ---------- Instagram: cabecalho do perfil comum as variacoes ---------- */
.ig-perfil { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ig-perfil .ig-foto { flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: conic-gradient(#F9CE34, #EE2A7B, #6228D7, #F9CE34); }
.ig-perfil .ig-foto img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; background: #fff; }
.ig-perfil .ig-nome { min-width: 0; } .ig-perfil .ig-nome b { display: block; font-size: 17px; overflow-wrap: anywhere; } .ig-perfil .ig-nome small { font-size: 13px; opacity: .75; }
.ig-perfil .ig-seguir { margin-left: auto; background: linear-gradient(90deg, #6228D7, #EE2A7B 55%, #F9CE34); color: #fff; }
@media (max-width: 480px) { .ig-perfil .ig-seguir { margin-left: 0; width: 100%; } }

/* Instagram FILEIRAS: duas fileiras de posts em sentidos opostos */
.insta-fileiras .faixa-infinita { -webkit-mask-image: none; mask-image: none; }
.insta-fileiras .faixa-infinita + .faixa-infinita { margin-top: 10px; }
.insta-fileiras .faixa-infinita .trilho { gap: 10px; }
.insta-fileiras .faixa-infinita img { height: clamp(140px, 17vw, 230px); width: clamp(140px, 17vw, 230px); max-width: none; object-fit: cover; border-radius: var(--raio); filter: none; }
.faixa-infinita.contra .trilho { animation-direction: reverse; }
.insta-fileiras .ig-perfil { margin-bottom: clamp(16px, 2.6vw, 26px); }

/* Instagram CELULAR: o feed rolando dentro de um celular, perfil ao lado */
.insta-celular { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 60px); align-items: center; }
.insta-celular .ic-cel { position: relative; width: clamp(220px, 24vw, 300px); aspect-ratio: 9 / 18.5; padding: 10px; border-radius: 40px; background: #0d0d10; box-shadow: 0 30px 70px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .12); transform: rotate(-4deg); }
.insta-celular .ic-tela { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: #fff; }
.insta-celular .ic-topo { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 26px 12px 8px; background: #fff; border-bottom: 1px solid #eee; font: 700 13px var(--fonte-texto); color: #111; }
.insta-celular .ic-topo img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.insta-celular .ic-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding-top: 70px; animation: ig-rola 26s linear infinite; }
.insta-celular .ic-feed img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
@keyframes ig-rola { to { transform: translateY(-50%); } }
@media (max-width: 760px) { .insta-celular { grid-template-columns: minmax(0, 1fr); justify-items: center; } .insta-celular .ic-cel { transform: none; width: min(260px, 72vw); } }
@media (prefers-reduced-motion: reduce) { .insta-celular .ic-feed { animation: none; } }

/* Instagram MOSAICO: destaques em cima, um post grande e quatro menores */
.insta-mosaico .im-destaques { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 10px; scrollbar-width: none; }
.insta-mosaico .im-destaques::-webkit-scrollbar { display: none; }
.insta-mosaico .im-dest { flex: none; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; text-decoration: none; color: inherit; }
.insta-mosaico .im-dest span { width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: conic-gradient(#F9CE34, #EE2A7B, #6228D7, #F9CE34); }
.insta-mosaico .im-dest img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; }
.insta-mosaico .im-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.insta-mosaico .im-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.insta-mosaico .im-grade a { display: block; border-radius: var(--raio); overflow: hidden; background: #ddd; }
.insta-mosaico .im-grande { height: 100%; }
.insta-mosaico .im-lado a { aspect-ratio: 1; }
.insta-mosaico .im-grade img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.insta-mosaico .im-grade a:hover img { transform: scale(1.05); }
@media (max-width: 640px) { .insta-mosaico .im-grade { grid-template-columns: minmax(0, 1fr); } .insta-mosaico .im-grande { aspect-ratio: 1; height: auto; } }

/* ---------- Rodapes ---------- */
.rodape.colunas .rc-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 24px 32px; text-align: left; }
.rodape.colunas h4 { color: #fff; font-size: 15px; margin: 0 0 10px; }
.rodape.colunas .rc-grade a { display: flex; align-items: center; min-height: 32px; text-decoration: none; color: rgba(255, 255, 255, .8); }
.rodape.colunas .rc-legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; font-size: 13px; }
@media (max-width: 860px) { .rodape.colunas .rc-grade { grid-template-columns: 1fr 1fr; } .rodape.colunas .rc-marca { grid-column: 1 / -1; } }
.rodape.colunas .rodape-vowt { margin-top: 6px; padding-top: 0; border-top: 0; }
.rodape.gigante { padding-top: clamp(40px, 6vw, 80px); overflow: hidden; }
.rodape.gigante .rodape-vowt { margin-top: 0; }
.rodape.gigante .rg-chamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: clamp(20px, 3vw, 34px); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rodape.gigante .rg-chamada h2 { color: #fff; margin: 0; font-size: clamp(26px, 3.6vw, 46px); }
.rodape.gigante .rg-meio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-block: 22px; text-align: left; }
.rodape.gigante .rg-meio a { color: rgba(255, 255, 255, .85); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.rodape.gigante .rg-marca { font: 900 clamp(56px, 16vw, 230px)/.82 var(--fonte-titulo); letter-spacing: -.05em; color: rgba(255, 255, 255, .08); white-space: nowrap; overflow: hidden; text-align: center; margin-top: 8px; user-select: none; }
.rodape-chamada { background: var(--cor-1); color: #fff; padding-block: clamp(24px, 4vw, 40px); }
.rodape-chamada .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.rodape-chamada h2 { color: #fff; margin: 0; font-size: clamp(22px, 3vw, 36px); }

/* =====================================================================
   KIT VOWT - INSTAGRAM PADRAO (regra do projeto desde 29/10/2026, pedido do Hendry na Brilho Festa:
   "essa forma que fez no instagram, coloca pra ser feito em todos os sites")
   Perfil com a foto em anel colorido + bolinhas de destaques que ABREM STORIES em tela cheia + 3 celulares animados
   (grade do perfil rolando, reel tocando, stories trocando). Carregar depois do vowt-base.css e vowt-layouts.css.
   Funciona em secao clara, escura ou na cor da marca (o texto herda a cor da secao).
   ===================================================================== */
.ig3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.ig3-lado h2 { margin-bottom: .35em; }
.ig3-lado > p { opacity: .9; }
.ig3-perfil { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 22px; background: #fff; color: #15152B; box-shadow: 0 18px 40px rgba(1, 1, 25, .16); border: 1px solid rgba(1, 1, 25, .06); }
.ig3-foto { flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3px; border: 0; cursor: pointer; background: conic-gradient(#F9CE34, #EE2A7B, #6228D7, #F9CE34); transition: transform .2s; }
.ig3-foto:hover { transform: scale(1.05); }
.ig3-foto img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #fff; }
.ig3-nome { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.ig3-nome b { font: 800 17px var(--fonte-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig3-nome small { font-size: 13px; color: #4A4A5E; }
.ig3-seguir { flex: none; min-height: 44px; padding: 0 18px; }
.ig3-destaques { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 16px; }
.ig3-destaques a { display: grid; justify-items: center; gap: 6px; width: 74px; color: inherit; text-decoration: none; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; }
.ig3-destaques span { width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: conic-gradient(#F9CE34, #EE2A7B, #6228D7, #F9CE34); transition: transform .2s; }
.ig3-destaques a:hover span { transform: scale(1.06); }
.ig3-destaques img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #fff; }
.ig3-destaques a.visto span, .ig3-foto.visto { background: rgba(140, 140, 160, .55); }
.ig3-obs { margin: 14px 0 0; font-size: 12.5px; opacity: .7; }

/* 3 celulares */
.ig3-cels { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.6vw, 22px); min-height: clamp(380px, 40vw, 520px); }
.ig3-cel { flex: none; width: clamp(150px, 15vw, 214px); aspect-ratio: 9 / 19.2; padding: 7px; border-radius: 32px; background: #0B0B12; box-shadow: 0 30px 60px rgba(1, 1, 25, .4), inset 0 0 0 2px rgba(255, 255, 255, .14); }
.ig3-cel.c1 { transform: rotate(-6deg) translateY(16px); }
.ig3-cel.c2 { width: clamp(170px, 17vw, 240px); z-index: 2; }
.ig3-cel.c3 { transform: rotate(6deg) translateY(16px); }
.ig3-tela { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #fff; color: #111; }
.ig3-barra { position: absolute; inset: 0 0 auto; z-index: 2; height: 40px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; background: #fff; font: 700 11px var(--fonte-texto); border-bottom: 1px solid #eee; }
.ig3-perfil-cel { display: flex; align-items: center; gap: 6px; padding: 48px 8px 4px; }
.ig3-av { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #E8E8E8; object-fit: cover; flex: none; }
.ig3-perfil-cel span { flex: 1; display: grid; text-align: center; font-size: 8px; color: #555; line-height: 1.2; }
.ig3-perfil-cel b { font-size: 10px; color: #111; }
.ig3-bio { margin: 0; padding: 2px 8px 6px; font-size: 8px; line-height: 1.3; color: #333; }
.ig3-bio b { display: block; font-size: 9px; }
.ig3-grade { position: absolute; left: 0; right: 0; bottom: 0; top: 136px; overflow: hidden; }
.ig3-rola { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; animation: ig3-rola 30s linear infinite; }
.ig3-rola img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@keyframes ig3-rola { to { transform: translateY(calc(-50% - 1px)); } }
.c2 .ig3-tela { background: #000; }
.c2 .ig3-tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig3-reel { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 40px 10px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; font-size: 10px; line-height: 1.3; }
.ig3-reel-u { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.ig3-reel-u img { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.c3 .ig3-tela { background: #111; }
.ig3-st-barras { position: absolute; inset: 10px 8px auto; z-index: 3; display: flex; gap: 3px; }
.ig3-st-barras i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; position: relative; }
.ig3-st-barras i.feito::after, .ig3-st-barras i.anda::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; }
.ig3-st-barras i.anda::after { animation: ig3-barra 3.2s linear forwards; }
@keyframes ig3-barra { from { transform: scaleX(0); } }
.ig3-story { position: absolute; inset: 0; display: grid; place-items: center; }
.ig3-story img { position: relative; width: 100%; height: auto; transition: opacity .4s; }
.ig3-story .ig3-fundo { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(16px) brightness(.6); }
.ig3-story-topo { position: absolute; inset: 20px 10px auto; z-index: 3; display: flex; align-items: center; gap: 6px; color: #fff; font-size: 11px; }
.ig3-story-topo img { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.ig3-story-leg { position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 3; margin: 0; padding: 7px 9px; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff !important; font-size: 10px; line-height: 1.3; }
@media (max-width: 900px) {
  .ig3 { grid-template-columns: minmax(0, 1fr); }
  .ig3-cels { min-height: 0; padding-block: 10px; }
  .c1 .ig3-perfil-cel span { display: none; }
  .c1 .ig3-perfil-cel::after { content: attr(data-usuario); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 9px var(--fonte-texto); }
  .ig3-grade { top: 96px; }
}
@media (max-width: 560px) {
  .ig3-cels { gap: 6px; }
  .ig3-cel { width: 29%; padding: 5px; border-radius: 22px; } .ig3-cel.c2 { width: 34%; } .ig3-tela { border-radius: 18px; }
  .ig3-perfil-cel { padding-top: 40px; } .ig3-barra { height: 34px; font-size: 9px; } .ig3-bio { display: none; } .ig3-reel { font-size: 8.5px; }
  .ig3-perfil { display: grid; grid-template-columns: auto minmax(0, 1fr); } .ig3-seguir { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ig3-rola { animation: none; } }

/* stories em tela cheia: barras, avanca sozinho, toque na direita/esquerda, segurar pausa, voltar do celular fecha */
.camada.ig3-stories { padding: 0; background: rgba(4, 8, 30, .94); }
.st3-caixa { position: relative; width: min(430px, 100vw); height: min(94svh, 820px); max-height: 100svh; border-radius: 18px; overflow: hidden; background: #000; color: #fff; display: flex; flex-direction: column; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.st3-barras { position: absolute; z-index: 4; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.st3-barras i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.st3-barras i b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.st3-barras i.cheia b { transform: none; }
.st3-topo { position: absolute; z-index: 5; top: 20px; left: 12px; right: 8px; display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.st3-topo img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: #fff; object-fit: cover; }
.st3-topo span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.st3-topo b { font-size: 14px; } .st3-topo small { font-size: 12.5px; opacity: .85; }
.camada.ig3-stories .st3-topo .fechar { position: static; margin-left: auto; width: 42px; height: 42px; background: rgba(0, 0, 0, .35); }
.st3-midia { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; }
.st3-midia .st3-fundo { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; filter: blur(22px) brightness(.5); }
.st3-midia .st3-img { position: relative; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.st3-midia .st3-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.st3-caixa.e-video .st3-video { display: block; }
.st3-caixa.e-video .st3-img { visibility: hidden; }
.st3-leg { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; margin: 0; padding: 9px 12px; border-radius: 12px; background: rgba(0, 0, 0, .55); text-align: center; font: 600 14px/1.35 var(--fonte-texto); color: #fff; }
.st3-ant, .st3-prox { position: absolute; z-index: 3; top: 70px; bottom: 76px; border: 0; background: transparent; cursor: pointer; }
.st3-ant { left: 0; width: 34%; } .st3-prox { right: 0; width: 66%; }
.st3-pe { position: relative; z-index: 4; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; background: #000; }
.st3-pe .btn { min-height: 46px; background: #fff; color: #15152B; }
.st3-pe .btn.wa { background: var(--wa); color: #06331a; }
@media (max-width: 600px) { .st3-caixa { width: 100vw; height: 100svh; border-radius: 0; } }
@media (orientation: landscape) and (max-height: 500px) { .st3-caixa { height: 100svh; width: min(56.25svh, 100vw); border-radius: 0; } .st3-leg { font-size: 12.5px; } }

/* Claudio Roberto - estilos proprios (o kit vowt-base.css + vowt-layouts.css vem antes).
   Paleta do Executive CV 2026: grafite + laranja. Fontes: Exo 2 (titulos, italico pesado como a marca do CV) + Inter.
   Chines: as fontes do sistema (PingFang SC, Microsoft YaHei, Noto Sans SC), sem italico nem caixa alta. */
:root {
  --cor-1: #ff8a3d; --cor-1-escura: #f2701f; --cor-2: #ffa468;
  --escuro: #0e1013; --escuro-2: #181b21; --grafite: #23272e;
  --claro: #f3f2ee; --claro-2: #e8e6df; --texto: #16181c; --texto-suave: #4c515a; --linha: #2b3038; --cinza: #a9adb5;
  --fonte-titulo: "Exo 2", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --topo-h: 76px;
  --faixa-h: 34px;
}
body { background: var(--escuro); color: var(--texto); }
::selection { background: var(--cor-1); color: #111; }
.secao.escura .destaque, .destaque { color: var(--cor-1); }
.secao.clara { background: var(--claro); color: var(--texto); }
.so-desk { }
@media (max-width: 699px) { .so-desk { display: none !important; } }

/* titulos: italico pesado e caixa alta (a marca do CV); chines sem italico */
html[data-layout="esportivo"] h1, html[data-layout="esportivo"] h2 { font-weight: 900; letter-spacing: -.005em; }
h2 { font-size: clamp(26px, 3.6vw, 50px); }
h3 { font-family: var(--fonte-titulo); font-weight: 800; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { font-style: normal; text-transform: none; letter-spacing: 0; }
html[lang^="zh"] body { line-height: 1.7; }

/* botoes (forma suave: cantos de 10 px, sem o paralelogramo do esportivo) */
html[data-forma="suave"] .btn { clip-path: none; border-radius: var(--raio-btn); padding: 0 22px; }
.btn { background: var(--cor-1); color: #141414; font-weight: 700; }
.btn:hover { background: var(--cor-2); box-shadow: 0 10px 26px rgba(255, 138, 61, .3); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.wa { background: var(--wa); color: #06331a; }
.btn.wa:hover { background: #3be07b; box-shadow: 0 10px 26px rgba(37, 211, 102, .3); }
.btn.contorno { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.btn.contorno:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px #fff; }
.btn.contorno.escuro { color: var(--texto); box-shadow: inset 0 0 0 2px rgba(22, 24, 28, .7); }
.btn.contorno.escuro:hover { background: rgba(22, 24, 28, .06); }

/* ---------- faixa que corre + cabecalho ---------- */
.faixa-util.fu-marquee { height: var(--faixa-h); padding: 0; background: #08090b; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.fu-marquee .faixa-infinita { width: 100%; }
.fu-marquee .trilho > * { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 22px; border-right: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 12.5px; }
.fu-marquee svg { width: 15px; height: 15px; flex: none; color: var(--cor-1); }
.fu-marquee a:hover { color: var(--cor-2); }
html.tem-faixa-util { --topo-h: calc(76px + var(--faixa-h)); }
html.tem-faixa-util .topo-barra { top: var(--faixa-vis, var(--faixa-h)); height: 76px; }
@media (max-width: 760px) { html.tem-faixa-util { --topo-h: 64px; } html.tem-faixa-util .topo-barra { top: 0; height: 64px; } }
.faixa-util { position: absolute; }
.cr-topo { background: rgba(14, 16, 19, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.topo-barra.solida.cr-topo { background: rgba(14, 16, 19, .62); }
.topo-barra.cr-topo.rolou { background: rgba(14, 16, 19, .94); }
.cr-topo .container { max-width: 1320px; gap: 18px; }
.cr-topo nav { gap: clamp(12px, 1.5vw, 24px); }
.cr-topo nav a { font-size: 14px; font-weight: 600; }
.cr-topo nav a.ativo, .cr-topo nav a:hover { color: var(--cor-1); }
.cr-acoes { display: flex; align-items: center; gap: 10px; }
.cr-acoes .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
.cr-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.cr-logo .cl-bola { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--cor-1); padding: 3px; }
.cr-logo .cl-bola svg { width: 100%; height: 100%; }
.cr-logo .cl-txt { display: grid; line-height: 1; }
.cr-logo b { font: italic 900 clamp(17px, 1.7vw, 22px)/1 "Exo 2", sans-serif; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.cr-logo b span { color: var(--cor-1); }
.cr-logo small { font: 600 11px/1 "Inter", sans-serif; letter-spacing: .38em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-top: 6px; white-space: nowrap; }
.cr-logo.grande b { font-size: 30px; }
.cr-logo.grande small { font-size: 12px; }
.cr-idioma { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.cr-idioma button { white-space: nowrap; min-width: 40px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, .78); font: 700 13px/1 "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: .02em; }
.cr-idioma button:hover { color: #fff; }
.cr-idioma button[aria-pressed="true"] { background: var(--cor-1); color: #141414; }
@media (max-width: 1240px) { .cr-topo nav { display: none; } .cr-topo .btn-menu { display: inline-flex; } }
@media (max-width: 420px) { .cr-logo .cl-bola { display: none; } .cr-idioma button { min-width: 34px; padding: 0 7px; font-size: 12px; } .cr-acoes { gap: 6px; } .cr-topo .btn-menu { width: 42px; height: 42px; } }

/* ---------- LANCES (mosaico) ---------- */
.cr-lances { background: var(--escuro); }
.cr-lances .videos-mosaico { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); }
.cr-lances .vm-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cr-lances .cartao-video { aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.cr-lances .videos-mosaico > .cartao-video { aspect-ratio: auto; }
.cr-lances .cartao-video .legenda { font: 800 14px/1.2 var(--fonte-titulo); padding: 34px 12px 10px; }
.cr-lances .cartao-video:hover { box-shadow: 0 0 0 2px var(--cor-1); }
.cr-lances-pe { display: flex; justify-content: flex-start; margin-top: 18px; }
@media (max-width: 1100px) { .cr-lances .vm-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .cr-lances .videos-mosaico, .cr-lances .videos-mosaico .vm-grade { display: flex; gap: 10px; }
  .cr-lances .videos-mosaico .cartao-video, .cr-lances .videos-mosaico > .cartao-video { width: 74vw; max-width: 340px; aspect-ratio: 16 / 9; }
}

/* ---------- TRAJETORIA (globo) ---------- */
.cr-trajetoria { background: radial-gradient(70% 60% at 30% 40%, #1a1d24, var(--escuro) 70%); overflow: hidden; }
.cr-globo-grade { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.cr-globo-palco { position: relative; display: flex; flex-direction: column; }
.cr-globo-palco .cena-3d { aspect-ratio: 1 / 1; max-height: 640px; background: transparent; border-radius: 0; touch-action: pan-y; }
.cr-globo-palco .cena-3d .reserva-3d { object-fit: cover; border-radius: 16px; }
.cg-rotulos { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1 / 1; max-height: 640px; pointer-events: none; overflow: hidden; }
.cg-r { position: absolute; left: 0; top: 0; padding: 3px 8px; border-radius: 6px; background: rgba(14, 16, 19, .82); border: 1px solid rgba(255, 138, 61, .45); color: #fff; font: 600 11.5px/1.2 "Inter", sans-serif; white-space: nowrap; transition: opacity .3s; will-change: transform; }
.cg-r.atual { background: var(--cor-1); color: #141414; border-color: var(--cor-1); }
.cg-r.origem { border-color: rgba(255, 255, 255, .6); }
.cg-fases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.cg-fases button { padding-inline: 12px; min-height: 46px; white-space: nowrap; font: 800 13.5px/1.15 var(--fonte-titulo); padding: 8px 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #fff; display: grid; gap: 2px; align-content: center; text-align: center; transition: background .2s, border-color .2s; }
.cg-fases button:hover { border-color: rgba(255, 138, 61, .55); }
.cg-fases button[aria-selected="true"] { background: var(--cor-1); border-color: var(--cor-1); color: #141414; }
.cr-fase-cartao { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #15181d; border: 1px solid rgba(255, 255, 255, .1); min-width: 0; contain: size; }
.fc-foto { flex: 1 1 150px; min-height: 150px; overflow: hidden; background: #111; }
.fc-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; animation: cr-entra .6s ease both; }
.fc-corpo { padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.fc-corpo h3 { color: #fff; font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 8px; }
.fc-corpo h3 small { font: 600 14px/1 "Inter", sans-serif; color: var(--cor-1); margin-left: 6px; font-style: normal; white-space: nowrap; }
.fc-corpo > p { color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.fc-clubes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.fc-clube { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); animation: cr-sobe .45s ease both; }
.fc-clube:nth-child(2) { animation-delay: .05s; } .fc-clube:nth-child(3) { animation-delay: .1s; } .fc-clube:nth-child(4) { animation-delay: .15s; } .fc-clube:nth-child(n+5) { animation-delay: .2s; }
.fc-clube.atual { background: rgba(255, 138, 61, .12); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .5); }
.fc-esc { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 3px; object-fit: contain; }
.fc-esc.vazio { display: block; background: rgba(255, 255, 255, .1); }
.fc-clube b { display: block; color: #fff; font: 800 15px/1.25 var(--fonte-titulo); }
.fc-clube b i { font: 700 11px/1 "Inter", sans-serif; font-style: normal; background: var(--cor-1); color: #141414; padding: 3px 6px; border-radius: 6px; margin-left: 6px; vertical-align: 2px; }
.fc-clube small { display: block; color: rgba(255, 255, 255, .6); font-size: 12.5px; margin-top: 2px; }
.fc-clube em { display: block; font-style: normal; color: var(--cor-2); font-size: 13px; margin-top: 4px; line-height: 1.35; }
@keyframes cr-entra { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes cr-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) {
  .cr-globo-grade { grid-template-columns: minmax(0, 1fr); }
  .cr-fase-cartao { contain: none; }
  .fc-foto { flex: none; aspect-ratio: 16 / 8; min-height: 0; }
  .fc-corpo { overflow: visible; }
  .cr-globo-palco .cena-3d, .cg-rotulos { max-width: 560px; margin-inline: auto; }
  .cg-rotulos { left: 50%; transform: translateX(-50%); max-width: 560px; }
}
@media (max-width: 560px) {
  .cg-fases { grid-template-columns: repeat(5, max-content); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
  .cg-fases::-webkit-scrollbar { display: none; }
}

/* ---------- MODELO DE JOGO (prancheta) ---------- */
.cr-modelo { background: var(--grafite); color: #fff; }
.cr-modelo .titulo-lado p { color: rgba(255, 255, 255, .78); }
.pr-momentos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.pr-momentos button { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .18); color: #fff; font: 800 14px/1.2 var(--fonte-titulo); text-align: left; transition: background .2s, border-color .2s; }
.pr-momentos button span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font: 800 13px/1 "Inter", sans-serif; }
.pr-momentos button:hover { border-color: rgba(255, 138, 61, .55); }
.pr-momentos button[aria-selected="true"] { background: var(--cor-1); border-color: var(--cor-1); color: #141414; }
.pr-momentos button[aria-selected="true"] span { background: #141414; color: var(--cor-1); }
.pr-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: stretch; }
.pr-palco { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; background: #191c22; border: 1px solid rgba(255, 255, 255, .08); padding: 14px; }
.pr-principios { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-principios button { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: rgba(255, 255, 255, .86); font-weight: 600; font-size: 14px; }
.pr-principios button[aria-pressed="true"] { background: #fff; color: #141414; border-color: #fff; }
.pr-cena { --inc: 50deg; position: relative; flex: 1 1 auto; min-height: 0; margin: 8px 0 2px; aspect-ratio: 100 / 60; perspective: 1150px; perspective-origin: 50% 10%; overflow: hidden; border-radius: 12px; background: radial-gradient(90% 80% at 50% 30%, #222831, #15181d); }
.pr-cena[data-vista="cima"] { --inc: 0deg; }
.pr-campo { position: absolute; left: 5%; width: 90%; top: 50%; aspect-ratio: 100 / 64; transform-style: preserve-3d; transform: translateY(-50%) rotateX(var(--inc)); transform-origin: 50% 62%; transition: transform .9s cubic-bezier(.45, .05, .3, 1);
  background: repeating-linear-gradient(90deg, #2f7a3a 0 10%, #348541 10% 20%); border-radius: 4px; box-shadow: 0 30px 50px rgba(0, 0, 0, .45); }

.pr-linhas, .pr-setas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pr-linhas rect, .pr-linhas line, .pr-linhas circle { fill: none; stroke: rgba(255, 255, 255, .78); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pr-linhas .ponto { fill: rgba(255, 255, 255, .85); }
.pr-setas line { stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pr-risca .7s ease forwards; transition: opacity .35s; }
.pr-setas line.passe { stroke: #fff; animation-name: pr-surge; stroke-dasharray: .025 .02; stroke-dashoffset: 0; opacity: 0; }
.pr-setas line.corrida { stroke: var(--cor-1); }
.pr-setas line.sai { opacity: 0 !important; }
@keyframes pr-risca { to { stroke-dashoffset: 0; } }
@keyframes pr-surge { to { opacity: 1; } }
.pr-jogadores { position: absolute; inset: 0; transform-style: preserve-3d; }
.pr-j { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; transform-style: preserve-3d; transition: transform 1.15s cubic-bezier(.45, .05, .3, 1); }
.pr-jogadores.sem-anim .pr-j { transition: none; }
.pr-j s { position: absolute; left: 0; top: 0; width: 4.2%; aspect-ratio: 1.6; margin: -1.3% 0 0 -2.1%; border-radius: 50%; background: rgba(0, 0, 0, .38); filter: blur(1px); }
.pr-j i { position: absolute; left: 0; top: 0; width: 3.9%; aspect-ratio: 1; margin: -3.9% 0 0 -1.95%; border-radius: 50%; display: grid; place-items: center; font: 800 max(11px, min(1.1vw, 13px))/1 "Inter", sans-serif; font-style: normal;
  transform-origin: 50% 100%; transform: rotateX(calc(-1 * var(--inc))); transition: transform .9s cubic-bezier(.45, .05, .3, 1), box-shadow .3s, opacity .3s; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.pr-j.o i { background: var(--cor-1); color: #141414; border: 2px solid #ffd2b0; }
.pr-j.w i { background: #f4f5f7; border: 2px solid #9aa3ad; }
.pr-j.bola i { width: 1.9%; margin: -2% 0 0 -.95%; background: radial-gradient(circle at 35% 35%, #fff 0 45%, #cfd3d8 46% 100%); border: 1px solid #222; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.pr-j.bola s { width: 1.8%; margin: -.6% 0 0 -.9%; }
.pr-j.bola { transition-duration: .85s; z-index: 2; }
.pr-jogadores.tem-foco .pr-j:not(.foco):not(.bola) i { opacity: .62; }
.pr-j.foco i { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 18px rgba(255, 138, 61, .8); }
.pr-j.w.foco i { box-shadow: 0 0 0 3px rgba(255, 138, 61, .9); }
.pr-controle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 10px; }
.pr-passos { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 6px; }
.pr-passos a { text-decoration: none; width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.4; transition: background .25s, color .25s, border-color .25s; }
.pr-passos b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; font-size: 12px; }
.pr-passos li.feito a { color: rgba(255, 255, 255, .78); }
.pr-passos li.atual a { background: rgba(255, 138, 61, .14); border-color: var(--cor-1); color: #fff; }
.pr-passos li.atual b { background: var(--cor-1); color: #141414; }
.pr-botoes { display: flex; gap: 6px; flex: none; }
.pr-cap { display: none; }
.pr-b { min-height: 38px; min-width: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pr-b svg { width: 18px; height: 18px; }
.pr-b:hover { border-color: var(--cor-1); }
.pr-vista { width: 112px; }
.pr-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.pr-legenda .lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 4px; }
.pr-legenda .lg.o { background: var(--cor-1); } .pr-legenda .lg.w { background: #f4f5f7; }
.pr-legenda .lg.p { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed #fff; } .pr-legenda .lg.c { width: 18px; height: 2px; border-radius: 0; background: var(--cor-1); }
.pr-lado { display: flex; flex-direction: column; min-width: 0; }
.pr-telao { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0c0d10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 50px rgba(0, 0, 0, .35); }
.pr-telao video { width: 100%; height: 100%; object-fit: cover; }
.pr-lado h3 { margin: 18px 0 8px; color: #fff; font-size: clamp(22px, 2.2vw, 30px); }
.pr-lado > p { color: rgba(255, 255, 255, .8); }
.pr-frase { margin: auto 0 0; padding: 16px 18px; border-left: 3px solid var(--cor-1); background: rgba(0, 0, 0, .2); border-radius: 0 12px 12px 0; color: rgba(255, 255, 255, .86); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 1100px) { .pr-momentos { display: flex; overflow-x: auto; scrollbar-width: none; } .pr-momentos::-webkit-scrollbar { display: none; } .pr-momentos button { flex: none; white-space: nowrap; } }
@media (max-width: 980px) { .pr-grade { grid-template-columns: minmax(0, 1fr); } .pr-frase { margin-top: 12px; } }
@media (max-width: 760px) {
  .pr-momentos { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; }
  .pr-momentos::-webkit-scrollbar { display: none; }
  .pr-momentos button { flex: none; }
  .pr-palco { padding: 10px; margin-inline: calc(-1 * var(--gutter) + 6px); }
  .pr-cena { --inc: 44deg; aspect-ratio: 100 / 66; }
  .pr-campo { left: 3%; width: 94%; top: 44%; }
  .pr-cap { display: block; position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(14, 16, 19, .86); color: #fff; font-size: 13.5px; line-height: 1.35; }
  .pr-cap b { color: var(--cor-1); margin-right: 4px; }
  .pr-cena { aspect-ratio: 100 / 84; }
  .pr-botoes { width: 100%; }
  .pr-vista { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .pr-j, .pr-campo, .pr-j i { transition: none; } }

/* ---------- BANNER ---------- */
.cr-banner { background: #15181d; }
@media (min-width: 761px) { .cr-banner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cr-banner .arte img { object-fit: cover; object-position: 60% 30%; }
.cr-banner .texto h3 { color: #fff; }

/* ---------- CONQUISTAS ---------- */
.cr-conquistas { background: var(--escuro); }
.cr-conquistas .contadores-faixa { background: var(--cor-1); color: #141414; margin-bottom: clamp(26px, 4vw, 46px); }
.cr-conquistas .contadores-faixa .cf-num { font-style: italic; font-weight: 900; color: #141414; }
.cr-conquistas .contadores-faixa .cf-rot { color: rgba(20, 20, 20, .8); opacity: 1; font-weight: 600; }
.cq-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cq-topo h3 { margin: 0; color: #fff; font-size: clamp(20px, 2vw, 26px); }
.cq-filtros, .sel-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.cq-filtros button, .sel-filtros button { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: rgba(255, 255, 255, .86); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.cq-filtros small, .sel-filtros small { font-size: 12px; opacity: .7; }
.cq-filtros button[aria-pressed="true"], .sel-filtros button[aria-pressed="true"] { background: #fff; color: #141414; border-color: #fff; }
.sel-filtros img { width: 22px; height: 22px; border-radius: 50%; background: #fff; padding: 1px; object-fit: contain; }
.cq-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cq-item { display: grid; grid-template-columns: auto 52px minmax(0, 1fr); grid-template-areas: "ano esc txt" "ano esc tipo"; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: 14px; background: #171a20; border: 1px solid rgba(255, 255, 255, .08); transition: opacity .35s, transform .35s, border-color .35s; }
.cq-item:hover { border-color: rgba(255, 138, 61, .5); }
.cq-item.fora { opacity: .14; transform: scale(.97); }
.cq-ano { grid-area: ano; font: italic 900 22px/1 var(--fonte-titulo); color: var(--cor-1); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .02em; }
.cq-item img { grid-area: esc; width: 52px; height: 52px; border-radius: 12px; background: #fff; padding: 4px; object-fit: contain; }
.cq-txt { grid-area: txt; min-width: 0; }
.cq-txt b { display: block; color: #fff; font: 800 15px/1.25 var(--fonte-titulo); }
.cq-txt small { display: block; color: rgba(255, 255, 255, .6); font-size: 12.5px; margin-top: 2px; }
.cq-tipo { grid-area: tipo; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--cor-2); }
.cq-tipo svg { width: 15px; height: 15px; }
.cq-item.t-titulo .cq-tipo { color: #ffd166; }
@media (max-width: 1000px) { .cq-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cq-lista { grid-template-columns: minmax(0, 1fr); } }

.sel-bloco { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: clamp(30px, 5vw, 60px); padding: clamp(18px, 3vw, 32px); border-radius: 20px; background: linear-gradient(135deg, #1b1f26, #121418); border: 1px solid rgba(255, 255, 255, .08); }
.sel-texto h3 { color: #fff; font-size: clamp(22px, 2.4vw, 32px); }
.sel-feds { display: flex; gap: 10px; margin: 14px 0 16px; }
.sel-feds img { width: 58px; height: 58px; border-radius: 14px; background: #fff; padding: 5px; object-fit: contain; }
.sel-camisas { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.camisa { position: relative; aspect-ratio: 1 / 1.08; display: grid; place-items: center; transition: opacity .35s, transform .35s; animation: cr-sobe .5s ease both; animation-delay: calc(var(--i) * 40ms); }
.camisa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.camisa svg path { stroke: rgba(255, 255, 255, .3); stroke-width: 1.4; }
.camisa.c-taawoun svg path { fill: #f1c400; } .camisa.c-alfateh svg path { fill: #1f9d55; } .camisa.c-alwasl svg path { fill: #ffd84a; }
.camisa img { position: relative; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #fff; padding: 1px; margin-top: -18%; object-fit: contain; }
.camisa b { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font: 800 clamp(9px, 1vw, 12px)/1 "Inter", sans-serif; color: #141414; }
.camisa.c-alfateh b { color: #fff; }
.camisa.apagada { opacity: .16; transform: scale(.92); }
@media (max-width: 980px) { .sel-bloco { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .sel-camisas { grid-template-columns: repeat(4, minmax(0, 1fr)); } .camisa b { font-size: 11px; } }

/* ---------- PERFIL (claro) ---------- */
.cr-perfil { background: var(--claro); }
.cr-perfil h2 { color: var(--texto); }
.pf-grade { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(22px, 4vw, 60px); align-items: stretch; }
.pf-fotos { position: relative; border-radius: 18px; overflow: hidden; min-height: 420px; background: #ddd; box-shadow: 0 30px 60px rgba(0, 0, 0, .16); }
.pf-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .8s, transform 5s ease; }
.pf-fotos img.ativa { opacity: 1; transform: scale(1); }
.pf-texto { display: flex; flex-direction: column; min-width: 0; }
.pf-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(22, 24, 28, .12); }
.pf-abas button { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(22, 24, 28, .16); background: #fff; color: var(--texto); font-weight: 700; font-size: 14px; }
.pf-abas button[aria-selected="true"] { background: var(--texto); color: #fff; border-color: var(--texto); }
.pf-paineis { flex: 1; }
.pf-painel { animation: cr-sobe .45s ease both; }
.pf-painel p { color: var(--texto-suave); font-size: 16px; }
.pf-cita { font: italic 800 clamp(19px, 2vw, 24px)/1.35 var(--fonte-titulo); color: var(--texto) !important; border-left: 4px solid var(--cor-1); padding-left: 16px; }
.pf-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pf-duas h3 { font-size: 19px; margin-bottom: 8px; }
.pf-duas ul, .pf-form { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-duas li { padding: 10px 14px; border-radius: 10px; background: #fff; font-weight: 600; border-left: 3px solid var(--cor-1); }
.pf-form li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: #fff; }
.pf-form li b { font: 800 15.5px/1.3 var(--fonte-titulo); }
.pf-form li span { color: var(--texto-suave); font-size: 14px; }
.pf-botoes { justify-content: flex-start; margin-top: 20px; }
@media (max-width: 860px) { .pf-grade { grid-template-columns: minmax(0, 1fr); } .pf-fotos { min-height: 0; aspect-ratio: 4 / 4.2; } }
@media (max-width: 460px) { .pf-duas { grid-template-columns: 1fr; } }

.cr-faixa-foto .ff-frase { font: italic 900 clamp(22px, 3.4vw, 44px)/1.1 var(--fonte-titulo); text-transform: uppercase; }
html[lang^="zh"] .cr-faixa-foto .ff-frase { font-style: normal; }

/* ---------- NOTICIAS ---------- */
.cr-noticias { background: var(--escuro); }
.nt-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.nt-resto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nt-cartao button { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; overflow: hidden; background: #171a20; color: #fff; text-align: left; transition: border-color .25s, transform .25s; }
.nt-cartao button:hover { border-color: rgba(255, 138, 61, .55); transform: translateY(-3px); }
.nt-foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; flex: none; }
.nt-cartao.grande .nt-foto { aspect-ratio: auto; flex: 1; min-height: 220px; }
.nt-foto img { width: 100%; height: 100%; object-fit: cover; }
.nt-corpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.nt-corpo small { color: var(--cor-1); font-size: 12.5px; font-weight: 700; }
.nt-corpo b { font: 800 17px/1.25 var(--fonte-titulo); }
.nt-cartao.grande .nt-corpo b { font-size: clamp(19px, 2vw, 24px); }
.nt-resumo { color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.45; }
.nt-ler { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: #fff; font-weight: 700; font-size: 13.5px; }
.nt-ler svg { width: 16px; height: 16px; color: var(--cor-1); }
.nt-imprensa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.nt-imprensa h3 { margin: 0 8px 0 0; color: #fff; font-size: 18px; }
.nt-video { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #fff; text-align: left; }
.nt-video svg { width: 28px; height: 28px; color: var(--cor-1); flex: none; }
.nt-video b { display: block; font: 800 14.5px/1.2 var(--fonte-titulo); }
.nt-video small { display: block; color: rgba(255, 255, 255, .62); font-size: 12.5px; }
.nt-video:hover { border-color: var(--cor-1); }
@media (max-width: 980px) { .nt-grade { grid-template-columns: minmax(0, 1fr); } .nt-cartao.grande .nt-foto { aspect-ratio: 16 / 8; flex: none; min-height: 0; } }
@media (max-width: 620px) { .nt-resto { grid-template-columns: minmax(0, 1fr); } .nt-video { width: 100%; } }

.cr-camada-noticia .nt-aberta { position: relative; width: min(760px, 100%); max-height: 88svh; overflow: auto; border-radius: 20px; background: #fff; color: var(--texto); }
.nt-aberta-foto { aspect-ratio: 16 / 7; overflow: hidden; background: #ddd; }
.nt-aberta-foto img { width: 100%; height: 100%; object-fit: cover; }
.nt-aberta-txt { padding: clamp(18px, 3vw, 32px); }
.nt-aberta-txt small { color: var(--cor-1-escura); font-weight: 700; font-size: 13px; }
.nt-aberta-txt h3 { font-size: clamp(22px, 2.6vw, 30px); margin: 6px 0 12px; }
.nt-aberta-txt p { color: var(--texto-suave); }
.cr-camada-yt .yt-caixa { width: min(1100px, 100%); }
.yt-quadro { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.yt-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-titulo { color: #fff; margin: 12px 4px 0; font-weight: 600; }

/* ---------- INSTAGRAM (fundo na cor da marca) ---------- */
.cr-instagram { background: linear-gradient(160deg, #ff8a3d, #f26a1b); color: #141414; }
.cr-instagram h2 { color: #141414; }
.cr-instagram h2 .destaque { color: #fff; }
.cr-instagram .ig3-lado > p, .cr-instagram .ig3-obs { color: rgba(20, 20, 20, .82); }
.cr-instagram .ig3-destaques a { color: #141414; }
.ig3-reel-video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CONTATO (foto) ---------- */
.cr-contato .cfo-cartao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: rgba(14, 16, 19, .78); }
.cr-contato .canal { background: rgba(255, 255, 255, .07); color: #fff; gap: 12px; justify-content: flex-start; }
.cr-contato .canal > svg { width: 22px; height: 22px; flex: none; color: var(--cor-1); }
.cr-contato .canal .valor { color: #fff; text-decoration: none; }
.cr-contato .canal > a.valor { display: inline-flex; align-items: center; min-height: 34px; overflow-wrap: normal; word-break: normal; }
.cr-contato .canal-wa .valor { overflow-wrap: normal; }
.cr-contato .canal-wa b { white-space: nowrap; }
.cr-contato .canal-wa { text-decoration: none; background: rgba(37, 211, 102, .14); border: 1px solid rgba(37, 211, 102, .45); }
.cr-contato .canal-wa > svg { color: var(--wa); width: 26px; height: 26px; }
.cr-contato .canal-wa b { display: block; font-size: 16px; }
.cr-contato .canal-wa small { display: block; font-weight: 500; color: rgba(255, 255, 255, .8); }
.cr-contato .copiar { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.ct-redes { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-redes a { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; transition: background .2s, color .2s; }
.ct-redes a:hover { background: var(--cor-1); color: #141414; }
.ct-redes svg { width: 22px; height: 22px; }
.ct-redes .ct-tm { font: 900 15px/1 var(--fonte-titulo); font-style: italic; }
.ct-onde { display: flex; gap: 8px; align-items: flex-start; color: rgba(255, 255, 255, .75); font-size: 14px; margin: 4px 0 0; }
.ct-onde svg { width: 18px; height: 18px; color: var(--cor-1); flex: none; margin-top: 2px; }
.cr-contato .form-wa label { color: var(--texto); }
@media (max-width: 860px) { .cr-contato .cfo-cartao { grid-template-columns: minmax(0, 1fr); } }

/* ---------- CHAMADA E RODAPE ---------- */
.rodape-chamada { background: var(--cor-1); color: #141414; }
.rodape-chamada h2 { color: #141414; }
.rodape-chamada h2 .destaque { color: #fff; }
.cr-rodape { background: #08090b; }
.cr-rodape .rc-marca p { margin-top: 12px; color: rgba(255, 255, 255, .7); max-width: 34ch; }
.cr-rodape .rc-grade a, .cr-rodape .rc-grade span { gap: 8px; }
.cr-rodape .rc-grade > div > span { display: flex; align-items: center; min-height: 32px; color: rgba(255, 255, 255, .8); }
.cr-rodape .rc-grade svg { width: 16px; height: 16px; flex: none; color: var(--cor-1); }
.cr-rodape .rc-grade a:hover { color: var(--cor-1); }

/* ---------- menu do celular ---------- */
.menu-cel .menu-idioma { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.menu-cel .menu-idioma button { min-height: 46px; font-size: 14px; }
.barra-cel { background: rgba(14, 16, 19, .96); }
.cr-instagram h2 .destaque { display: block; text-transform: none; font-size: .58em; letter-spacing: 0; overflow-wrap: anywhere; margin-top: .2em; }
.cr-instagram .ig3-destaques { gap: 10px; flex-wrap: wrap; }
.cr-instagram .ig3-destaques a { width: 62px; font-size: 12px; line-height: 1.2; }
.cr-instagram .ig3-destaques span { width: 58px; height: 58px; }


.pr-j i b { font: inherit; }
@media (max-width: 900px) { .pr-j i b { display: none; } }
.cr-instagram .ig3-nome b { font-size: 15.5px; }
@media (max-width: 380px) { .cr-instagram .ig3-nome b { font-size: 13.5px; } .cr-instagram .ig3-perfil { gap: 8px; padding: 12px; } }
.rc-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.rc-legal a { display: inline-flex; align-items: center; min-height: 32px; }
.camisa b { font-size: clamp(11px, 1vw, 12px); letter-spacing: -.01em; }
.cr-instagram .ig3-nome b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; }
.cr-logo.grande b { font-size: clamp(22px, 2.4vw, 30px); white-space: normal; }
@media (max-width: 374px) { .so-largo { display: none; } .cr-lances-pe .btn { padding-inline: 16px; } }

/* ===== correcoes da revisao independente (v1) ===== */
.container { max-width: 1320px; }
/* 2. 320 px: o seletor de idioma fica so no menu do celular */
@media (max-width: 370px) { .cr-topo .cr-idioma { display: none; } }
/* 6. camisas: categoria embaixo da camisa */
.sel-camisas { row-gap: 14px; }
.camisa { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.camisa svg { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1; }
.camisa img { position: absolute; top: 34%; left: 50%; width: 24%; margin: 0; transform: translateX(-50%); }
.camisa b { position: static; color: #fff !important; font-size: 12px; white-space: nowrap; }
/* 7 e 8. celular deitado: tudo na altura da tela e menu em 4 colunas */
@media (orientation: landscape) and (max-height: 500px) {
  .cr-globo-palco .cena-3d, .cg-rotulos { width: min(100%, calc(100svh - 140px)); margin-inline: auto; }
  .cg-rotulos { left: 50%; transform: translateX(-50%); }
  .pr-telao { width: min(100%, calc((100svh - 140px) * 16 / 9)); margin-inline: auto; }
  .pf-fotos { aspect-ratio: auto; height: calc(100svh - 138px); min-height: 0; }
  .fc-foto { max-height: calc(100svh - 200px); }
  .nt-cartao.grande .nt-foto { aspect-ratio: auto; height: calc(100svh - 200px); }
  .menu-cel { padding-top: 14px; }
  .menu-cel ol { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-right: 56px; }
  .menu-cel li a { min-height: 50px; padding: 8px 12px; }
  .menu-cel .menu-idioma { margin-top: 10px; }
  .menu-cel .menu-acoes { grid-template-columns: 1fr 1fr; padding-top: 10px; }
}
/* 13. Instagram no celular em pe: 2 celulares, destaques numa linha, redes numa linha */
@media (max-width: 560px) {
  .cr-instagram .ig3-cel.c3 { display: none; }
  .cr-instagram .ig3-cel.c1, .cr-instagram .ig3-cel.c2 { width: 46%; }
}
@media (max-width: 420px) {
  .cr-instagram .ig3-destaques { gap: 6px; justify-content: space-between; }
  .cr-instagram .ig3-destaques a { width: 52px; font-size: 11px; }
  .cr-instagram .ig3-destaques span { width: 50px; height: 50px; padding: 2px; }
  .ct-redes { gap: 6px; } .ct-redes a { width: 42px; height: 42px; }
}
/* 17. nada sozinho na ultima linha */
.pr-principios { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pr-principios::-webkit-scrollbar { display: none; }
.pr-principios button { flex: none; white-space: nowrap; }
.sel-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.sel-filtros button { justify-content: center; }
@media (max-width: 620px) { .cq-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .cq-filtros button { justify-content: center; } }
@media (max-width: 460px) { .pf-abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-legenda .pl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 760px) { .pr-legenda { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 16px; } }
@media (max-width: 980px) { .nt-imprensa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .nt-imprensa h3 { grid-column: 1 / -1; } .nt-video { width: 100%; } }
@media (max-width: 620px) { .nt-imprensa { grid-template-columns: minmax(0, 1fr); } }
/* 19. prancheta: o campo ocupa o quadro (sem vao em cima) */
.pr-cena { perspective-origin: 50% 0%; }
.pr-campo { transform-origin: 50% 50%; left: 3%; width: 94%; }
/* 21. noticias: arte com texto aparece inteira */
.nt-foto.arte, .nt-aberta-foto.arte { background: #0f1115; }
.nt-foto.arte img, .nt-aberta-foto.arte img { object-fit: contain; }
/* 24. rodape no tablet: as 3 listas lado a lado */
@media (max-width: 860px) and (min-width: 561px) { .rodape.colunas .rc-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 861px) { .rodape.colunas.cr-rodape .rc-grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .75fr); } }
.cr-globo-palco .cena-3d .reserva-3d { object-fit: contain; border-radius: 0; background: transparent; }

/* ===== TOPO "entrada em campo" (capa): estadio em video, nome gigante atras do retrato recortado, assinatura e placas de LED ===== */
.cr-capa { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--topo-h); background: #08090b; overflow: hidden; color: #fff; }
.cr-capa .tg-midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-capa .tg-midia::after { background: linear-gradient(90deg, rgba(8, 9, 11, .9) 0%, rgba(8, 9, 11, .55) 45%, rgba(8, 9, 11, .35) 70%, rgba(8, 9, 11, .6) 100%), linear-gradient(0deg, rgba(8, 9, 11, .95) 0%, rgba(8, 9, 11, 0) 45%), linear-gradient(180deg, rgba(8, 9, 11, .7) 0%, rgba(8, 9, 11, 0) 30%); }
.cp-luz { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(40% 50% at 72% 30%, rgba(255, 138, 61, .28), transparent 70%), radial-gradient(30% 35% at 12% 0%, rgba(255, 255, 255, .1), transparent 70%); }
.cp-grade { position: relative; z-index: 2; flex: 1; display: grid; grid-template-rows: 1fr auto; max-width: 1320px; padding-top: clamp(10px, 3svh, 36px); padding-bottom: clamp(18px, 3svh, 30px); }
.cr-capa .cp-nome { margin: 0; align-self: center; font: italic 900 clamp(64px, min(11.5vw, 19svh), 178px)/.84 var(--fonte-titulo); text-transform: uppercase; letter-spacing: -.02em; color: #fff; max-width: none; transition: transform .25s ease-out; }
.cr-capa .cp-nome .destaque { display: block; color: transparent; -webkit-text-stroke: 2px var(--cor-1); padding-left: .55em; }
html[lang^="zh"] .cr-capa .cp-nome { font-style: italic; text-transform: uppercase; }
.cp-texto { position: relative; z-index: 4; max-width: 560px; }
.cr-capa .cr-cargo { margin: 0 0 8px; font: 800 clamp(15px, 1.4vw, 19px)/1.3 var(--fonte-titulo); color: var(--cor-1); }
.cr-capa .sub { margin: 0; color: rgba(255, 255, 255, .88); font-size: clamp(16px, 1.45vw, 20px); font-weight: 500; max-width: 34ch; }
.cr-capa .botoes { justify-content: flex-start; margin-top: 20px; }
.cr-hoje { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 16px 8px 8px; border-radius: 14px; background: rgba(8, 9, 11, .55); border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; max-width: 100%; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s; }
.cr-hoje:hover { border-color: rgba(255, 138, 61, .7); }
.cr-hoje img { width: 46px; height: 46px; border-radius: 10px; background: #fff; padding: 3px; object-fit: contain; flex: none; }
.cr-hoje b { display: block; font: 800 15.5px/1.2 var(--fonte-titulo); }
.cr-hoje small { display: block; font-size: 13px; color: rgba(255, 255, 255, .74); margin-top: 3px; }
.cp-retrato { position: absolute; z-index: 3; inset-inline-end: max(2vw, calc((100vw - 1320px) / 2 - 40px)); bottom: 118px; height: min(calc(100svh - var(--topo-h) - 150px), 760px); aspect-ratio: 1065 / 1424; pointer-events: none; transition: transform .25s ease-out; }
.cp-recorte { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)) saturate(1.04);
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 14%); mask-image: linear-gradient(0deg, transparent 0%, #000 14%); }
.cp-assinatura { position: absolute; inset-inline-start: -26%; bottom: 16%; width: 62%; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6)); opacity: .95; }
/* placas de LED do estadio */
.cp-led { position: relative; z-index: 5; perspective: 700px; padding: 0 0 2px; }
.cp-placa { position: relative; height: 62px; background: #050506; border-top: 2px solid #1d1f24; border-bottom: 2px solid #1d1f24; transform: rotateX(14deg); transform-origin: 50% 100%; box-shadow: 0 -18px 50px rgba(255, 138, 61, .18), inset 0 0 30px rgba(0, 0, 0, .9); }
.cp-placa::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, transparent 0 1.1px, rgba(0, 0, 0, .55) 1.4px); background-size: 4px 4px; }
.cp-placa .trilho { height: 100%; align-items: center; }
.cp-placa .trilho > span { display: inline-flex; gap: 10px; padding: 0 34px; height: 100%; align-items: center; border-right: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }
.cp-placa b { font: italic 900 34px/1 var(--fonte-titulo); color: #ffb27a; text-shadow: 0 0 10px rgba(255, 138, 61, .9), 0 0 24px rgba(255, 138, 61, .45); }
.cp-placa i { font: 700 15px/1 var(--fonte-texto); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .55); }
.cr-capa .cr-escudos { position: relative; z-index: 5; }
@media (max-width: 980px) {
  .cp-retrato { inset-inline-end: -4vw; height: 64svh; bottom: 118px; opacity: .9; }
  .cp-texto { max-width: 62%; }
}
@media (max-width: 760px) {
  .cr-capa { padding-top: calc(var(--topo-h) + 4px); }
  .cp-grade { grid-template-rows: auto auto; align-content: start; padding-top: 6px; }
  .cr-capa .cp-nome { align-self: start; font-size: clamp(50px, 17.5vw, 84px); }
  .cr-capa .cp-nome .destaque { padding-left: .3em; }
  .cp-retrato { inset-inline-end: -14vw; bottom: 112px; height: 52svh; opacity: 1; }
  .cp-assinatura { inset-inline-start: -10%; bottom: 12%; width: 58%; }
  .cp-texto { max-width: 100%; margin-top: 28svh; }
  .cr-capa .sub { max-width: 62%; font-size: 15px; }
  .cr-capa .cr-cargo { max-width: 66%; font-size: 14.5px; }
  .cr-capa .botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cr-capa .botoes .btn { padding: 0 10px; font-size: 14px; min-height: 46px; }
  .cr-hoje { width: 100%; margin-top: 12px; }
  .cp-placa { height: 50px; }
  .cp-placa b { font-size: 26px; }
  .cp-placa i { font-size: 13px; }
  .cp-placa .trilho > span { padding: 0 22px; }
}
@media (max-width: 380px) { .cr-capa .botoes { grid-template-columns: 1fr; } .cr-capa .sub { max-width: 58%; } }
@media (orientation: landscape) and (max-height: 500px) {
  .cr-capa { padding-top: 64px; min-height: 100svh; }
  .cr-capa .cp-nome { font-size: clamp(40px, 15svh, 64px); }
  .cp-retrato { height: calc(100svh - 120px); bottom: 104px; inset-inline-end: 4vw; }
  .cp-texto { max-width: 55%; margin-top: 8px; }
  .cr-capa .sub { display: none; }
  .cr-capa .botoes { margin-top: 10px; }
  .cr-hoje { display: none; }
  .cp-placa { height: 42px; }
  .cp-placa b { font-size: 22px; }
  .cp-placa i { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cp-retrato, .cr-capa .cp-nome { transition: none; } }

/* cartao da fase no globo: as 5 fotos (vindas do HTML) trocam com a fase */
.fc-fotos { position: relative; flex: 1 1 150px; min-height: 150px; overflow: hidden; background: #111; }
.fc-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .7s, transform 5s ease; }
.fc-fotos img.ativa { opacity: 1; transform: none; }
@media (max-width: 980px) { .fc-fotos { flex: none; aspect-ratio: 16 / 8; min-height: 0; } }
@media (orientation: landscape) and (max-height: 500px) { .fc-fotos { max-height: calc(100svh - 200px); } }
/* contato: sala de coletiva (backdrop com escudos e o nome, como os paineis de entrevista) */
.cr-coletiva { background: #ecebe6; }
.cr-coletiva::before { background: radial-gradient(70% 90% at 30% 50%, rgba(8, 9, 11, .55), rgba(8, 9, 11, .15) 60%, rgba(8, 9, 11, .35)); }
.ct-painel { position: absolute; inset: -40px -60px; display: grid; grid-template-columns: repeat(8, minmax(120px, 1fr)); grid-auto-rows: 104px; gap: 18px 26px; padding: 12px; transform: perspective(1400px) rotateY(-10deg) scale(1.06); transform-origin: 70% 50%; background: linear-gradient(180deg, #f6f5f1, #e7e5de); }
.ct-painel .pt { display: grid; place-items: center; }
.ct-painel .pt img { width: 74px; height: 74px; object-fit: contain; }
.ct-painel .pt:nth-child(16n+9), .ct-painel .pt:nth-child(16n+10), .ct-painel .pt:nth-child(16n+11), .ct-painel .pt:nth-child(16n+12), .ct-painel .pt:nth-child(16n+13), .ct-painel .pt:nth-child(16n+14), .ct-painel .pt:nth-child(16n+15), .ct-painel .pt:nth-child(16n+16) { transform: translateX(72px); }
.ct-painel .marca { text-align: center; line-height: 1; color: #15171a; }
.ct-painel .marca b { display: block; font: italic 900 18px/1 var(--fonte-titulo); text-transform: uppercase; white-space: nowrap; }
.ct-painel .marca b i { color: var(--cor-1-escura); }
.ct-painel .marca small { display: block; margin-top: 5px; font: 700 8px/1 var(--fonte-texto); letter-spacing: .4em; text-transform: uppercase; color: #4c515a; }
@media (max-width: 760px) { .ct-painel { grid-template-columns: repeat(5, minmax(96px, 1fr)); grid-auto-rows: 86px; transform: none; inset: -20px; } .ct-painel .pt img { width: 58px; height: 58px; } }
.cr-escudos { position: relative; z-index: 5; background: #f4f3ef; padding: 9px 0; }
.cr-escudos .trilho { gap: 26px; align-items: center; }
.cr-escudos img { width: 50px; height: 50px; object-fit: contain; flex: none; }
/* capa: nome atras do retrato, texto e botoes na frente dele */
.cr-capa .cp-grade { z-index: auto; }
.cr-capa .cp-nome { position: relative; z-index: 2; }
.cr-capa .cp-texto { z-index: 4; }
@media (max-width: 760px) {
  .cp-retrato { height: 46svh; bottom: 104px; inset-inline-end: -16vw; }
  .cp-texto { margin-top: 30svh; }
  .cp-texto::before { content: ""; position: absolute; z-index: -1; inset: -30px -40px -10px calc(-1 * var(--gutter)); background: linear-gradient(90deg, rgba(8, 9, 11, .85) 0%, rgba(8, 9, 11, .55) 60%, rgba(8, 9, 11, 0) 100%); pointer-events: none; }
  .cr-capa .sub, .cr-capa .cr-cargo { text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .cr-capa { padding-top: var(--topo-h); }
  .cr-capa .cp-nome { font-size: clamp(34px, 12svh, 52px); }
  .cp-grade { padding-top: 6px; padding-bottom: 10px; }
  .cp-retrato { height: calc(100svh - var(--topo-h) - 56px); bottom: 48px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .cp-retrato { bottom: auto; top: calc(var(--topo-h) + 104px); height: 50svh; inset-inline-end: -12vw; }
  .cp-assinatura { inset-inline-start: -14%; bottom: auto; top: 40%; width: 60%; }
}
/* ajustes da auditoria da capa */
.cr-capa .cp-nome { font-size: clamp(64px, min(11.5vw, 16svh), 178px); }
.cp-placa .trilho > span { gap: 16px; }
.cp-placa b { padding-right: 4px; }
@media (max-width: 400px) {
  .cr-contato .canal:not(.canal-wa) { flex-wrap: wrap; row-gap: 8px; }
  .cr-contato .canal:not(.canal-wa) .copiar { margin-left: 34px; }
  .pf-abas button { padding: 0 8px; font-size: 13px; white-space: nowrap; }
}
.cr-capa .cp-nome { margin-bottom: .2em; }
@media (max-width: 400px) { .cr-contato .canal:not(.canal-wa) > a.valor { flex: 1 1 100%; } }

/* ===== segunda revisao independente ===== */
/* capa: nao passa por baixo da barra do celular */
@media (max-width: 699px), (max-width: 899px) and (max-height: 500px) { .cr-capa { min-height: calc(100svh - var(--barra-cel-h)); } }
/* capa no celular: painel atras do texto sem linha reta (degrade nas 4 bordas) */
@media (max-width: 760px) {
  .cp-texto::before { inset: -40px -40px -16px calc(-1 * var(--gutter)); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); }
  .cp-texto { margin-right: 0; }
}
/* celular em pe baixo (320x568, 375x667): botoes e placas na primeira tela */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 700px) {
  .cr-capa .cp-nome { font-size: clamp(44px, 14vw, 60px); }
  .cp-retrato { top: calc(var(--topo-h) + 80px); height: 44svh; }
  .cp-texto { margin-top: 16svh; }
  .cr-capa .sub { display: none; }
  .cr-hoje { display: none; }
}
/* tablet: a assinatura fica sobre o retrato, longe do texto */
@media (min-width: 761px) and (max-width: 980px) { .cp-assinatura { inset-inline-start: 6%; bottom: 4%; width: 56%; } }
/* placas de LED: mais contraste (e sem pontilhado no chines) */
.cp-placa::after { background-image: radial-gradient(circle, transparent 0 1.3px, rgba(0, 0, 0, .32) 1.6px); background-size: 3px 3px; }
.cp-placa i { color: #fff; font-weight: 800; text-shadow: 0 0 6px rgba(255, 255, 255, .7), 0 0 16px rgba(255, 255, 255, .25); }
html[lang^="zh"] .cp-placa::after { display: none; }
html[lang^="zh"] .cp-placa i { font-size: 16px; letter-spacing: .02em; }
/* celular deitado (ultimo bloco: vale sobre os anteriores) */
@media (orientation: landscape) and (max-height: 500px) {
  .cr-topo .cr-acoes .btn.wa, .cr-topo .btn-menu { display: none; }
  .cr-capa .cp-nome { font-size: clamp(30px, 11svh, 50px); margin-bottom: .15em; }
  .cp-grade { grid-template-rows: auto auto; align-content: start; padding-top: 4px; padding-bottom: 6px; }
  .cp-texto { margin-top: 4px; max-width: 58%; }
  .cp-texto::before { display: none; }
  .cr-capa .cr-cargo { font-size: 13.5px; margin-bottom: 4px; max-width: none; }
  .cr-capa .botoes { display: flex; margin-top: 8px; }
  .cr-capa .botoes .btn { min-height: 40px; font-size: 13.5px; }
  .cp-retrato { top: auto; bottom: 46px; inset-inline-end: 3vw; height: calc(100svh - var(--topo-h) - var(--barra-cel-h) - 50px); max-height: 300px; opacity: 1; }
  .cp-assinatura { display: none; }
  .cp-placa { height: 40px; }
}
/* contato: coluna da esquerda preenchida (frase real dele) e formulario mais baixo */
.ct-cita { margin: 4px 0 0; padding: 14px 16px; border-left: 3px solid var(--cor-1); background: rgba(255, 255, 255, .05); border-radius: 0 12px 12px 0; }
.ct-cita p { margin: 0 0 6px; color: #fff !important; font: italic 700 16px/1.45 var(--fonte-titulo); }
.ct-cita footer { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.cr-contato .cfo-lado { justify-content: space-between; }
.fw-duas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 400px) { .fw-duas { grid-template-columns: minmax(0, 1fr); } }
.cr-contato .canal:not(.canal-wa) .copiar { margin-left: auto; }
html[lang^="zh"] .form-wa label span { word-break: keep-all; }
/* contato no celular: a parede da coletiva aparece em cima do cartao */
@media (max-width: 760px) { .cr-coletiva { padding-top: 150px; } .ct-painel { inset: 0; } }
/* Instagram: os 3 celulares (regra do projeto) e destaques numa linha que rola */
@media (max-width: 560px) {
  .cr-instagram .ig3-cel.c3 { display: block; }
  .cr-instagram .ig3-cel.c1, .cr-instagram .ig3-cel.c3 { width: 29%; }
  .cr-instagram .ig3-cel.c2 { width: 34%; }
}
@media (max-width: 420px) {
  .cr-instagram .ig3-destaques { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .cr-instagram .ig3-destaques::-webkit-scrollbar { display: none; }
  .cr-instagram .ig3-destaques a { flex: none; width: 60px; }
  .cr-instagram .ig3-destaques span { width: 56px; height: 56px; }
}
/* globo: a foto do globo fica ate a cena 3D estar pronta */
.cr-globo-palco .cena-3d:not(.com-3d) .reserva-3d { display: block; }
/* banner: a foto vai ate o fim do cartao */
@media (min-width: 761px) { .cr-banner { align-items: stretch; } .cr-banner .arte { height: 100%; } .cr-banner .arte img { position: absolute; inset: 0; height: 100%; } }
/* "Na imprensa": cartoes da mesma altura */
.nt-imprensa { align-items: stretch; }
.nt-imprensa .nt-video { height: 100%; }
/* filtros das selecoes: largura toda */
.sel-filtros { max-width: none; }
@media (max-width: 980px) and (min-width: 561px) { .sel-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* rodape no celular: Navegue e Redes lado a lado, Contato na linha inteira */
@media (max-width: 560px) { .cr-rodape .rc-grade > div:nth-child(3) { grid-column: 1 / -1; order: 3; } .cr-rodape .rc-grade > div:nth-child(4) { order: 2; } }
.rc-legal { align-items: center; }
/* menos vao entre os lances e a trajetoria */
.cr-lances { padding-bottom: clamp(30px, 4vw, 48px); }
.cr-trajetoria { padding-top: clamp(36px, 5vw, 64px); }
/* destaques: capa = escudo (como no perfil real) */
.cr-instagram .ig3-destaques img { object-fit: contain; padding: 4px; background: #fff; }

/* ===== PRANCHETA v2 ("melhore 10x"): campo enquadrado com camera, protagonistas com nome, zonas, narracao e linha do tempo ===== */
.pr-cena { --inc: 36deg; flex: none; aspect-ratio: 16 / 10; margin: 10px 0 0; perspective: 1300px; perspective-origin: 50% 35%; background: radial-gradient(80% 70% at 50% 45%, #1f3a26 0%, #13241a 45%, #0d1410 100%); border: 1px solid rgba(255, 255, 255, .08); }
.pr-cena::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .1), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 22%, transparent 80%, rgba(0, 0, 0, .35)); }
.pr-campo { left: 50%; top: 55%; width: 76%; transform-origin: 50% 50%; transform: translate(-50%, -50%) rotateX(var(--inc)); transition: transform 1.1s cubic-bezier(.45, .05, .3, 1);
  background: repeating-linear-gradient(90deg, #2e7d3c 0 8.333%, #34894a 8.333% 16.666%); border-radius: 3px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .06), 0 40px 60px rgba(0, 0, 0, .55); }
.pr-cena[data-vista="cima"] .pr-campo { top: 50%; }
.pr-linhas rect, .pr-linhas line, .pr-linhas circle { stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; }
/* zonas e setas */
.pr-setas .zona { fill: rgba(255, 138, 61, .16); stroke: rgba(255, 170, 110, .95); stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; animation: pr-zona .5s ease both; }
@keyframes pr-zona { from { opacity: 0; } to { opacity: 1; } }
.pr-setas .seta { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .4s; }
.pr-setas .seta.corrida { stroke: #ff8a3d; stroke-width: 3.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pr-risca .8s ease forwards; }
.pr-setas .seta.passe { stroke: #fff; stroke-width: 3; stroke-dasharray: 7 6; opacity: 0; animation: pr-passe .5s ease forwards, pr-flui 1s linear infinite; }
@keyframes pr-passe { to { opacity: 1; } }
@keyframes pr-flui { to { stroke-dashoffset: -26; } }
.pr-setas .seta.velha { opacity: .26 !important; animation: none; stroke-dashoffset: 0; }
.pr-setas .seta.passe.velha { stroke-dasharray: 7 6; }
/* jogadores: discos maiores; protagonistas com anel e nome; os outros apagados */
.pr-j i { width: 4.2%; margin: -4.2% 0 0 -2.1%; font: 800 max(11px, min(1.15vw, 14px))/1 "Inter", sans-serif; box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 6px 10px rgba(0, 0, 0, .25); }
.pr-j s { width: 4.6%; margin: -1.4% 0 0 -2.3%; }
.pr-j.o i { background: radial-gradient(circle at 35% 30%, #ffb27a, #ff8a3d 60%, #e86f22); border: 2px solid #fff3e8; }
.pr-j.w i { background: radial-gradient(circle at 35% 30%, #fff, #e7e9ec 70%); border: 2px solid #8c96a3; }
.pr-jogadores.tem-foco .pr-j:not(.foco):not(.bola):not(.pr-z) i { opacity: .38; }
.pr-jogadores.tem-foco .pr-j:not(.foco):not(.bola):not(.pr-z) s { opacity: .35; }
.pr-j.foco i { box-shadow: 0 0 0 3px #fff, 0 0 20px 4px rgba(255, 138, 61, .85); }
.pr-j.w.foco i { box-shadow: 0 0 0 3px #1b1d22, 0 0 16px 3px rgba(255, 255, 255, .7); }
.pr-j em { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotateX(calc(-1 * var(--inc))) translateY(-2.6vw); white-space: nowrap; font: 800 12px/1 "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-style: normal; color: #141414; background: #fff; padding: 4px 7px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .35s, transform .9s cubic-bezier(.45, .05, .3, 1); pointer-events: none; }
.pr-j.nomeado em { opacity: 1; }
.pr-j.bola i { width: 2.1%; margin: -2.2% 0 0 -1.05%; background: radial-gradient(circle at 35% 35%, #fff 0 45%, #d4d8dd 46% 100%); border: 1.5px solid #222; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3), 0 0 12px rgba(255, 255, 255, .8); }
/* rotulo das zonas (em pe, como os jogadores) */
.pr-z { pointer-events: none; }
.pr-z span { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotateX(calc(-1 * var(--inc))); white-space: nowrap; font: 800 12px/1 "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; color: #fff; background: rgba(232, 111, 34, .95); padding: 5px 8px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); animation: pr-zona .5s ease both; }
/* narracao sobre o campo e linha do tempo */
.pr-cap { display: flex !important; position: absolute; z-index: 4; left: 12px; right: 12px; top: 12px; bottom: auto; margin: 0; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(10, 12, 15, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 15px; line-height: 1.4; font-weight: 600; max-width: 640px; }
.pr-cap b { flex: none; display: grid; place-items: center; min-width: 40px; height: 26px; border-radius: 8px; background: var(--cor-1); color: #141414; font: 800 13px/1 "Inter", sans-serif; margin: 0; }
.pr-linha { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.pr-linha button { flex: 1; height: 30px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; cursor: pointer; }
.pr-linha button i { position: relative; display: block; width: 100%; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.pr-linha button i::after { content: ""; position: absolute; inset: 0; background: var(--cor-1); transform-origin: left; transform: scaleX(0); }
.pr-linha button.feito i::after { transform: scaleX(1); }
.pr-linha button.atual i::after { transform: scaleX(1); }
.pr-linha button.atual.corre i::after { animation: pr-tempo var(--dur, 2900ms) linear both; }
.pr-linha button.atual.corre.pausa i::after { animation-play-state: paused; }
@keyframes pr-tempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* controles */
.pr-b svg { width: 18px; height: 18px; }
.pr-b[data-pr="play"] .i-play { display: none; }
.pr-b[data-pr="play"][aria-pressed="true"] .i-play { display: block; }
.pr-b[data-pr="play"][aria-pressed="true"] .i-pausa { display: none; }
.pr-b[data-pr="play"][aria-pressed="true"] { background: var(--cor-1); color: #141414; border-color: var(--cor-1); }
.pr-palco { gap: 0; }
@media (max-width: 760px) {
  .pr-cena { --inc: 32deg; aspect-ratio: 4 / 4.2; }
  .pr-campo { width: 92%; top: 57%; }
  .pr-cap { font-size: 13.5px; padding: 8px 10px; left: 8px; right: 8px; top: 8px; }
  .pr-cap b { min-width: 34px; height: 22px; font-size: 12px; }
  .pr-linha { left: 8px; right: 8px; bottom: 6px; }
  .pr-j em, .pr-z span { font-size: 11px; padding: 3px 6px; }
  .pr-j em { transform: translate(-50%, -100%) rotateX(calc(-1 * var(--inc))) translateY(-4.4vw); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pr-cena { aspect-ratio: auto; height: calc(100svh - 150px); }
  .pr-campo { width: min(78%, calc((100svh - 170px) * 1.5)); }
  .pr-cap { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .pr-setas .seta, .pr-setas .zona { animation: none; stroke-dashoffset: 0; opacity: 1; } }
.pr-cena::before { background: radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .08), transparent 70%), linear-gradient(180deg, transparent 80%, rgba(0, 0, 0, .3)); }
.pr-campo { top: 59%; }
.pr-z span { transform: translate(-50%, -30%) rotateX(calc(-1 * var(--inc))); }
@media (max-width: 760px) { .pr-campo { top: 60%; } }
/* prancheta: numero so nos protagonistas; linha do tempo abaixo do campo */
.pr-jogadores.tem-foco .pr-j:not(.foco) i b { visibility: hidden; }
.pr-linha { position: static; margin: 8px 0 0; padding: 0 2px; }
.pr-linha button { height: 24px; }
.pr-linha button { height: 32px; }
@media (orientation: landscape) and (max-height: 420px) { .pr-j em { display: none; } }

/* ===== PRANCHETA v3 (3a revisao): camera medida no JS, setas certas, nome com haste e do lado livre, fichas fora de foco legiveis ===== */
.pr-campo { top: 50%; }
.pr-setas .seta.corrida { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; animation: pr-passe .45s ease forwards; }
.pr-setas .seta.passe { stroke-width: 2.6; }
.pr-setas .seta.velha, .pr-setas .seta.corrida.velha { opacity: .26 !important; animation: none; }
.pr-j i { transition: transform .4s, opacity .4s, box-shadow .4s; }
.pr-jogadores.tem-foco .pr-j:not(.foco):not(.bola):not(.pr-z) i { opacity: .88; transform: scale(.78); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.pr-jogadores.tem-foco .pr-j:not(.foco):not(.bola):not(.pr-z) s { opacity: .5; transform: scale(.78); }
.pr-j em { transform: translate(calc(-50% + var(--dx, 0px)), -100%) rotateX(calc(-1 * var(--inc))) translateY(-2.6vw); transition: opacity .35s .3s; }
.pr-j em::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.pr-j.baixo em { transform-origin: 50% 0; transform: translate(calc(-50% + var(--dx, 0px)), 0) rotateX(calc(-1 * var(--inc))) translateY(6px); }
.pr-j.baixo em::after { top: auto; bottom: 100%; border: 5px solid transparent; border-bottom-color: #fff; border-top: 0; }
.pr-z span { transform: translate(calc(-50% + var(--dx, 0px)), -100%) rotateX(calc(-1 * var(--inc))); }
.pr-z.baixo span { transform-origin: 50% 0; transform: translate(calc(-50% + var(--dx, 0px)), 0) rotateX(calc(-1 * var(--inc))); }
@media (max-width: 760px) {
  .pr-j em { transform: translate(calc(-50% + var(--dx, 0px)), -100%) rotateX(calc(-1 * var(--inc))) translateY(-4.4vw); }
  .pr-j.baixo em { transform: translate(calc(-50% + var(--dx, 0px)), 0) rotateX(calc(-1 * var(--inc))) translateY(6px); }
}
/* celular: a narracao ja esta no campo; a lista de passos repetia o mesmo texto */
@media (max-width: 760px) { .pr-passos { display: none; } }
/* celular deitado: campo, linha do tempo e botoes na mesma tela */
@media (orientation: landscape) and (max-height: 500px) {
  .pr-cena { height: calc(100svh - 190px); min-height: 170px; }
  .pr-legenda { display: none; }
}
/* 3a revisao: assinatura fora do antebraco (no vao entre o texto e o retrato); no tablet ela brigava com o cartao "Hoje" */
@media (min-width: 981px) { .cp-assinatura { inset-inline-start: -64%; bottom: 10%; width: 58%; } }
@media (min-width: 761px) and (max-width: 980px) { .cp-assinatura { display: none; } }
/* globo: foto da fase Arabia (faixa baixa no computador) com o rosto inteiro */
.fc-fotos img[data-foto-fase="arabia"] { object-position: 50% 62%; }
@media (min-width: 981px) { .fc-fotos { min-height: 200px; } }
/* stories: nome do perfil e o X legiveis sobre foto clara */
.st3-topo { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.st3-topo::before { content: ""; position: absolute; left: -12px; right: -8px; top: -20px; height: 104px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent); }
/* nomes dos destaques: no maximo 2 linhas, todos alinhados pelo topo */
.cr-instagram .ig3-destaques a { align-self: flex-start; line-height: 1.2; }
@media (max-width: 420px) { .cr-instagram .ig3-destaques a { width: 68px; font-size: 12px; } }
.pr-canto { position: absolute; width: 0; height: 0; pointer-events: none; }
/* rotulo embaixo da ficha: em pe, com a base no gramado a frente (--dy, calculado no JS); pendurado ele entrava no gramado */
.pr-j.baixo em, .pr-j.baixo em { transform-origin: 50% 100%; top: var(--dy, 7%); transform: translate(calc(-50% + var(--dx, 0px)), -100%) rotateX(calc(-1 * var(--inc))); }
.pr-z.baixo span { transform-origin: 50% 100%; top: var(--dy, 7%); transform: translate(calc(-50% + var(--dx, 0px)), -100%) rotateX(calc(-1 * var(--inc))); }
@media (max-width: 760px) { .pr-j.baixo em { transform: translate(calc(-50% + var(--dx, 0px)), -100%) rotateX(calc(-1 * var(--inc))); } }
/* ficha em foco: anel nitido (o brilho borrado era recortado em retangulos pela cena 3D) */
.pr-j.foco i { box-shadow: 0 0 0 3px #fff, 0 3px 0 rgba(0, 0, 0, .35); }
.pr-j.w.foco i { box-shadow: 0 0 0 3px #ff8a3d, 0 3px 0 rgba(0, 0, 0, .35); }
.pr-j.bola i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); }
/* rotulos da prancheta numa camada plana (o JS posiciona pela projecao da camera) */
.pr-j em { display: none !important; }
.pr-rotulos { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.pr-r { position: absolute; left: 0; top: 0; white-space: nowrap; font: 800 12px/1 "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; padding: 5px 8px; border-radius: 6px; color: #141414; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); opacity: 0; animation: pr-rot .3s ease forwards; }
.pr-r.zona { color: #fff; background: #e86f22; }
.pr-r.w { background: #1b1d22; color: #fff; }
.pr-r::after { content: ""; position: absolute; border: 5px solid transparent; }
.pr-r.zona::after { display: none; }
.pr-r.lado-n::after { top: 100%; left: var(--px); margin-left: -5px; border-top-color: #fff; border-bottom: 0; }
.pr-r.lado-s::after { bottom: 100%; left: var(--px); margin-left: -5px; border-bottom-color: #fff; border-top: 0; }
.pr-r.lado-e::after { right: 100%; top: 50%; margin-top: -5px; border-right-color: #fff; border-left: 0; }
.pr-r.lado-w::after { left: 100%; top: 50%; margin-top: -5px; border-left-color: #fff; border-right: 0; }
@keyframes pr-rot { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .pr-r { font-size: 11px; padding: 4px 6px; } }
@media (prefers-reduced-motion: reduce) { .pr-r { animation: none; opacity: 1; } }
@media (orientation: landscape) and (max-height: 500px) {
  .pr-cena { height: calc(100svh - 150px); min-height: 210px; }
  .pr-cap { font-size: 12.5px; line-height: 1.3; padding: 6px 9px; top: 6px; left: 6px; right: 6px; gap: 8px; }
  .pr-cap b { min-width: 30px; height: 20px; font-size: 11px; }
}

/* ===== 4a revisao ===== */
/* prancheta no computador: o campo cresce ate o fim do painel (sobrava faixa vazia embaixo dos controles); a camera mede de novo */
@media (min-width: 981px) { .pr-cena { flex: 1 0 auto; } }
/* celular deitado: botoes por cima do canto do campo, para campo, linha do tempo e botoes caberem juntos */
@media (orientation: landscape) and (max-height: 500px) {
  .pr-palco { position: relative; }
  .pr-cena { height: calc(100svh - 190px); min-height: 190px; }
  .pr-controle { position: absolute; z-index: 5; right: 16px; bottom: 52px; margin: 0; }
  .pr-controle .pr-b { min-height: 34px; background: rgba(10, 12, 15, .82); }
  .pr-passos { display: none; }
}
/* globo, fase Arabia: foto noturna inteira (fundo preto da propria foto); o recorte em faixa cortava o rosto */
.fc-fotos img[data-foto-fase="arabia"] { object-fit: contain; object-position: 50% 50%; background: #050505; }
/* topo: no celular a assinatura passava em cima do ombro; no tablet o retrato vai mais para a direita (texto fora do braco) */
@media (max-width: 760px) { .cp-assinatura { display: none; } }
@media (min-width: 761px) and (max-width: 980px) and (min-height: 501px) { .cp-retrato { inset-inline-end: -16vw; opacity: .85; } }
/* destaques do Instagram: as 6 bolinhas numa linha que cabe na tela */
@media (max-width: 560px) {
  .cr-instagram .ig3-destaques { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; overflow: visible; margin-inline: 0; padding: 0; }
  .cr-instagram .ig3-destaques a { width: auto; min-width: 0; font-size: 11px; line-height: 1.2; overflow-wrap: normal; }
  .cr-instagram .ig3-destaques span { width: 100%; height: auto; aspect-ratio: 1; max-width: 58px; }
}
/* estante de conquistas no celular: faixa que desliza (12 cartoes empilhados davam 1.300 px) */
@media (max-width: 620px) {
  .cq-lista { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .cq-lista::-webkit-scrollbar { display: none; }
  .cq-item { flex: 0 0 80%; scroll-snap-align: start; }
  .cq-item.fora { display: none; }
}
@media (max-width: 560px) { .cr-instagram .ig3-destaques a { align-self: stretch; align-content: start; } }
/* ===== 5a revisao ===== */
/* anel das fichas: na cena 3D tudo o que passa da caixa da ficha e recortado (sombra, anel de fora); o anel e a propria borda, por dentro */
.pr-j i, .pr-j.foco i, .pr-j.w.foco i, .pr-j.bola i { box-shadow: none !important; }
.pr-j.o.foco i { border: 3px solid #fff; }
.pr-j.w.foco i { border: 3px solid #ff8a3d; }
/* estante deslizante: o 1o cartao alinhado com os filtros */
@media (max-width: 620px) { .cq-lista { scroll-padding-inline: var(--gutter); } }
.cq-filtros button, .sel-filtros button { white-space: nowrap; }
/* destaques em 320: 3 por linha (6 por linha quebrava os nomes no meio da palavra) */
@media (max-width: 360px) {
  .cr-instagram .ig3-destaques { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .cr-instagram .ig3-destaques a { word-break: normal; overflow-wrap: normal; }
}
/* topo em 1024: a assinatura passava por tras do cartao "Hoje" */
@media (min-width: 981px) and (max-width: 1100px) { .cp-assinatura { display: none; } }
/* ===== 6a revisao ===== */
/* Perfil no celular deitado: a moldura fica larga e baixa; foto inteira sobre fundo escuro (cortava queixo e cabeca) */
@media (orientation: landscape) and (max-height: 500px) { .pf-fotos { background: #0d1016; } .pf-fotos img { object-fit: contain; } }
/* destaques do Instagram (tablet e PC): centralizados e com largura para "Al Taawoun FC" em 2 linhas */
@media (min-width: 561px) {
  .cr-instagram .ig3-destaques { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .cr-instagram .ig3-destaques a { width: auto; min-width: 0; align-self: stretch; align-content: start; font-size: 12.5px; line-height: 1.2; }
  .cr-instagram .ig3-destaques span { width: 100%; height: auto; aspect-ratio: 1; max-width: 70px; }
}
/* nenhuma palavra sozinha na ultima linha */
h1, h2, h3 { text-wrap: balance; }
p, small, li, blockquote { text-wrap: pretty; }
/* ===== 7a revisao ===== */
/* anel das fichas no celular: 3 px numa ficha de 19 px invertia a cor do time */
@media (max-width: 900px) { .pr-j.o.foco i, .pr-j.w.foco i { border-width: 2px; } }
@media (orientation: landscape) and (max-height: 500px) { .pr-j.o.foco i, .pr-j.w.foco i { border-width: 1px; } }
/* Perfil no celular deitado: copia desfocada da foto atras dela (a moldura ficava 75% vazia) */
@media (orientation: landscape) and (max-height: 500px) {
  .pf-fotos::before { content: ""; position: absolute; inset: -30px; background: var(--pf-bg) center / cover no-repeat; filter: blur(22px) brightness(.5); }
}
/* noticias no computador: a foto dos 2 cartoes da direita cresce ate o pe do cartao (sobrava vazio embaixo) */
@media (min-width: 981px) { .nt-resto .nt-foto { flex: 1 0 auto; min-height: 120px; } }
/* Perfil no computador: moldura da foto mais baixa (a de 420 px deixava vao entre o texto e os botoes) */
@media (min-width: 861px) { .pf-fotos { min-height: 340px; } }
/* textos curtos (2 a 3 linhas): sem palavra sozinha na ultima linha */
.nt-corpo b, .nt-corpo p, .nt-corpo span, .cq-item, .cf-rot, .ct-cita p, .ig3-destaques a, .fc-clube small, .fc-clube em, .sel-texto p, .pf-cita { text-wrap: balance; }
.wa-flutuante.cr-oculto { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ===== v2 (10/11/2026): 4 idiomas com bandeira, ideias centrais do modelo de jogo, temporada 2026/27, assinatura no celular ===== */
/* seletor de idioma com a bandeira (pedido do cliente: Brasil, Inglaterra, China e Espanha) */
.cr-idioma button { display: inline-flex; align-items: center; justify-content: center; }
.bandeira { display: inline-block; flex: none; width: 18px; height: 12px; margin-right: 6px; border-radius: 2px; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.b-pt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23009c3b'/%3E%3Cpath d='M10 1.5 18.6 7 10 12.5 1.4 7z' fill='%23ffdf00'/%3E%3Ccircle cx='10' cy='7' r='3.1' fill='%23002776'/%3E%3C/svg%3E"); }
.b-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23fff'/%3E%3Crect x='8.3' width='3.4' height='14' fill='%23ce1124'/%3E%3Crect y='5.3' width='20' height='3.4' fill='%23ce1124'/%3E%3C/svg%3E"); }
.b-zh { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23de2910'/%3E%3Cpath d='M5 2.2 6.2 5.8 10 5.8 6.9 8 8.1 11.6 5 9.4 1.9 11.6 3.1 8 0 5.8 3.8 5.8z' fill='%23ffde00'/%3E%3Ccircle cx='11' cy='2.4' r='.9' fill='%23ffde00'/%3E%3Ccircle cx='13' cy='4.6' r='.9' fill='%23ffde00'/%3E%3Ccircle cx='13' cy='7.6' r='.9' fill='%23ffde00'/%3E%3Ccircle cx='11' cy='9.8' r='.9' fill='%23ffde00'/%3E%3C/svg%3E"); }
.b-es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23aa151b'/%3E%3Crect y='3.5' width='20' height='7' fill='%23f1bf00'/%3E%3C/svg%3E"); }
.menu-cel .menu-idioma { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.menu-cel .menu-idioma .bandeira { width: 21px; height: 14px; margin-right: 8px; }
/* no cabecalho do celular so o codigo (a bandeira fica no menu) */
@media (max-width: 760px) { .cr-topo .cr-idioma .bandeira { display: none; } }

/* ideias centrais do modelo de jogo (Portfolio PRO 2026): quatro colunas separadas por fio, sem icone nem rotulo */
.mi-ideias { list-style: none; margin: 0 0 22px; padding: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .12); }
.mi-ideias li { display: grid; align-content: start; gap: 6px; padding: 0 18px; }
.mi-ideias li:first-child { padding-left: 0; }
.mi-ideias li + li { border-left: 1px solid rgba(255, 255, 255, .12); }
.mi-ideias b { font: italic 800 clamp(16px, 1.4vw, 19px)/1.2 var(--fonte-titulo); color: var(--cor-1); }
.mi-ideias span { color: rgba(255, 255, 255, .74); font-size: 14.5px; line-height: 1.45; }
html[lang^="zh"] .mi-ideias b { font-style: normal; }
@media (max-width: 980px) {
  .mi-ideias { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .mi-ideias li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 400px) {
  .mi-ideias { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .mi-ideias li, .mi-ideias li:nth-child(3) { padding: 0; border-left: 0; }
}

/* temporada 2026/27: fileira de 3 lances do jogo atual, embaixo do mosaico */
.cr-temporada { margin-top: 24px; }
.cr-temporada h3 { margin: 0 0 12px; color: #fff; font-size: clamp(20px, 2vw, 26px); }
.ct-lances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ct-lances .cartao-video { aspect-ratio: 16 / 9; width: 100%; }
@media (max-width: 760px) {
  .ct-lances { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .ct-lances::-webkit-scrollbar { display: none; }
  .ct-lances .cartao-video { flex: 0 0 74vw; max-width: 340px; scroll-snap-align: start; }
}

/* assinatura: o cliente gostou ("meu nome em formato assinatura creio que fica legal"); no celular e no tablet volta, sobre a parte de baixo do retrato */
@media (max-width: 1100px) { .cp-assinatura { display: block; inset-inline-start: 4%; inset-inline-end: auto; top: auto; bottom: 4%; width: 74%; } }
@media (orientation: landscape) and (max-height: 500px) { .cp-assinatura { display: none; } }
/* globo, fase Arabia: a foto nova (Al-Fateh, 2026/27) e clara e em pe; enquadrada no rosto, sem as faixas pretas da foto antiga */
.fc-fotos img[data-foto-fase="arabia"] { object-fit: cover; object-position: 50% 22%; background: #111; }
/* cabecalho no computador: so a bandeira (com o nome no title e no aria-label); com o codigo, o espanhol encostava o logo no menu em 1440 */
@media (min-width: 761px) {
  .cr-topo .cr-idioma .ci-cod { display: none; }
  .cr-topo .cr-idioma button { min-width: 38px; padding: 0 9px; }
  .cr-topo .cr-idioma .bandeira { width: 22px; height: 15px; margin-right: 0; }
}
/* assinatura no celular e no tablet: sobre o peito, longe do rosto e do texto */
@media (max-width: 1100px) { .cp-assinatura { top: 46%; bottom: auto; inset-inline-start: 30%; inset-inline-end: auto; width: 64%; } }
@media (max-width: 760px) { .cp-assinatura { top: 40%; inset-inline-start: auto; inset-inline-end: 2%; width: 60%; } }
@media (orientation: landscape) and (max-height: 500px) { .cp-assinatura { display: none; } }
/* ===== v2, revisao independente ===== */
.cp-assinatura { transform: translateX(var(--sx, 0px)) rotate(-6deg); }
/* Perfil e globo: foto inteira sobre a copia desfocada dela (a camisa CR e a pasta do Al-Fateh eram cortadas na caixa deitada) */
.pf-fotos::before, .fc-fotos::before { content: ""; position: absolute; inset: -30px; pointer-events: none; background: var(--pf-bg, var(--fc-bg)) center / cover no-repeat; filter: blur(22px) brightness(.5); }
.fc-fotos::before { background-image: var(--fc-bg); }
.pf-fotos img[data-pf-foto="0"], .fc-fotos img[data-foto-fase="arabia"] { object-fit: contain; background: transparent; }
/* ideias centrais: sem o segundo fio (a secao ja tem um logo acima) */
.mi-ideias { border-top: 0; padding-top: 4px; }
/* escudo novo do Al-Fateh na faixa: o verde e o azul viravam cinza claro no filtro da faixa */
.cr-escudos img[data-escudo="alfateh"] { filter: grayscale(1) brightness(.7) contrast(3) opacity(.7); }
/* celulares do Instagram: legenda do reel e do story sem sair do celular */
.cr-instagram .ig3-reel > :not(.ig3-reel-u), .cr-instagram .ig3-story-leg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* botao Ver de cima / Ver em 3D: largura fixa que cabe o espanhol ("Ver desde arriba") */
.pr-vista { width: 150px; }

/* ===== v2, conferencia do revisor ===== */
/* celular grande deitado (900 a 999 px): o kit nao mostra a barra de baixo; o menu e o WhatsApp do cabecalho voltam */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 900px) { .cr-topo .btn-menu { display: inline-flex; } .cr-topo .cr-acoes .btn.wa { display: inline-flex; } }
/* cartao da fase: esmaecido no pe enquanto ha mais clubes para rolar */
.fc-corpo.rola:not(.fim) { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent); }
/* clube sem escudo na coleta: um escudo de contorno, nao um quadrado vazio */
.fc-esc.vazio { background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='1.6'%3E%3Cpath d='M12 3l7 3v5c0 4.6-3 8.4-7 10-4-1.6-7-5.4-7-10V6z'/%3E%3C/svg%3E") center / 60% no-repeat; }
/* abas das fases no celular: esmaecido na borda direita (mostra que rola) */
@media (max-width: 760px) { .cg-fases { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 36px; } }
/* ideias centrais em 1 coluna: sem o fio da esquerda */
@media (max-width: 400px) { .mi-ideias li + li { border-left: 0; padding-left: 0; } }
/* legendas dos celulares do Instagram: corte limpo na 3a linha (sem a 4a aparecendo pela metade) */
.cr-instagram .ig3-story-leg { line-height: 1.25; max-height: calc(3.75em + 14px); }
.cr-instagram .ig3-reel > :not(.ig3-reel-u) { -webkit-line-clamp: 2; line-height: 1.25; max-height: 2.5em; }

/* ===== v3 (10/11/2026): retrato novo em preto e branco (foto que o Hendry mandou), assinatura refeita do Portfolio PRO, ROBERTO branco ===== */
/* nome: as duas palavras brancas e cheias ("ROBERTO tambem precisa ser branco igual CLAUDIO") */
.cr-capa .cp-nome .destaque { color: #fff; -webkit-text-stroke: 0; }
/* retrato integrado ao topo, no jeito da capa do portfolio dele: luz laranja atras, contorno de luz na borda e a base sumindo no pe do topo */
.cp-retrato { aspect-ratio: 1122 / 1402; }
.cp-retrato::before { content: ""; position: absolute; z-index: -1; left: -22%; right: -22%; top: -4%; bottom: 12%; pointer-events: none;
  background: radial-gradient(48% 42% at 50% 36%, rgba(255, 138, 61, .46), rgba(255, 138, 61, .14) 55%, transparent 76%); filter: blur(12px); }
.cp-recorte { filter: drop-shadow(0 0 1px rgba(255, 200, 160, .55)) drop-shadow(-12px 0 26px rgba(255, 138, 61, .30)) drop-shadow(0 30px 40px rgba(0, 0, 0, .55)) contrast(1.06);
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 20%); mask-image: linear-gradient(0deg, transparent 0%, #000 20%); }
/* assinatura com o retrato novo (maos no queixo no meio da foto): nunca sobre o rosto nem as maos */
@media (min-width: 1600px) { .cp-assinatura { inset-inline-start: 60%; inset-inline-end: auto; top: auto; bottom: 7%; width: 58%; } }
@media (max-width: 1100px) { .cp-assinatura { top: auto; bottom: 9%; inset-inline-start: 34%; inset-inline-end: auto; width: 62%; } }
@media (max-width: 760px) { .cp-assinatura { top: auto; bottom: 17%; inset-inline-start: auto; inset-inline-end: 0; width: 58%; } }
@media (orientation: landscape) and (max-height: 500px) { .cp-assinatura { display: none; } }
/* celular: a assinatura no vao a esquerda do rosto, abaixo do nome (mais embaixo ficava sobre as maos ou o texto) */
@media (max-width: 760px) { .cp-assinatura { top: 34%; bottom: auto; inset-inline-start: -26%; inset-inline-end: auto; width: 50%; } }
@media (orientation: landscape) and (max-height: 500px) { .cp-assinatura { display: none; } }
@media (max-width: 340px) { .cp-assinatura { display: none; } }

/* ===== v3, revisao do topo ===== */
/* retrato: sombra e contorno de luz no involucro (com a mascara na mesma imagem, a sombra era cortada no retangulo da foto e aparecia uma linha reta);
   a foto esmaece na base E nas laterais de baixo (as mangas terminavam em linha reta na borda da foto original) */
.cp-foto { position: absolute; inset: 0; filter: drop-shadow(0 0 1px rgba(255, 200, 160, .5)) drop-shadow(-12px 0 26px rgba(255, 138, 61, .28)) drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.cp-recorte { filter: contrast(1.06);
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 20%), linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 38%, transparent 66%);
  -webkit-mask-composite: source-in, source-over; mask-image: linear-gradient(0deg, transparent 0%, #000 20%), linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 38%, transparent 66%);
  mask-composite: intersect, add; }
/* a luz laranja sai do retrato e vai para a camada de luz, ABAIXO do nome (por cima, deixava o fim de ROBERTO alaranjado) */
.cp-retrato::before { content: none; }
.cr-capa .cp-luz { background: radial-gradient(30% 46% at 80% 40%, rgba(255, 138, 61, .34), rgba(255, 138, 61, .1) 55%, transparent 75%), radial-gradient(30% 35% at 12% 0%, rgba(255, 255, 255, .1), transparent 70%); }
@media (max-width: 760px) { .cr-capa .cp-luz { background: radial-gradient(60% 34% at 78% 36%, rgba(255, 138, 61, .32), rgba(255, 138, 61, .1) 55%, transparent 76%); } }
/* tablet: retrato inteiro e opaco (o video aparecia atraves do rosto) e um pouco mais para dentro; assinatura sobre o pe esmaecido do retrato, longe dos botoes */
@media (min-width: 761px) and (max-width: 980px) and (min-height: 501px) { .cp-retrato { inset-inline-end: -9vw; opacity: 1; } }
@media (min-width: 761px) and (max-width: 1100px) { .cp-assinatura { top: auto; bottom: 3%; inset-inline-start: 38%; width: 58%; } }
/* celular baixo (375x667, 360x640): a assinatura ficava atras do texto do cargo */
@media (max-width: 760px) and (max-height: 700px) { .cp-assinatura { display: none; } }
@media (max-width: 340px) { .cp-assinatura { display: none; } }
/* telas muito altas (2560x1440): retrato maior */
@media (min-width: 2200px) and (min-height: 1200px) { .cp-retrato { height: min(calc(100svh - var(--topo-h) - 150px), 980px); } }
/* cabecalho do celular: os 4 idiomas nao cabem ao lado do logo abaixo de 480 px (cobriam "ROBERTO"); ficam no menu, com bandeira e nome */
@media (max-width: 480px) { .cr-topo .cr-idioma { display: none; } }
/* nome na frente do retrato: no tablet em pe o fim de ROBERTO passava atras da borda esmaecida da foto e ficava cinza */
.cr-capa .cp-nome { z-index: 5; }
/* ===== v3, 2a revisao do topo (medido pelas letras do nome x a cabeca do retrato, com folga para o efeito do mouse) ===== */
/* telas muito grandes: o retrato maior encostava o fim de ROBERTO no rosto; vai mais para a direita */
@media (min-width: 2200px) and (min-height: 1200px) { .cp-retrato { inset-inline-end: max(2vw, calc((100vw - 1320px) / 2 - 290px)); } }
/* 1601 a 2199: com o mouse na direita, nome e retrato se aproximam 20 px; 50 px de folga a mais */
@media (min-width: 1601px) and (max-width: 2199px) { .cp-retrato { inset-inline-end: max(2vw, calc((100vw - 1320px) / 2 - 90px)); } }
/* tablet em pe: o "O" cobria a orelha; retrato um pouco menor e mais para a direita */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) { .cp-retrato { inset-inline-end: -10vw; height: 58svh; } }
/* celular em pe: o pe de ROBERTO cobria o alto do cabelo */
@media (max-width: 760px) and (orientation: portrait) and (min-height: 701px) { .cp-retrato { top: calc(var(--topo-h) + 118px); } }
/* 761 a 1179: assinatura sobre os antebracos, acima da placa de LED (de 1101 a 1179 ela passava por cima dos botoes) */
@media (min-width: 761px) and (max-width: 1179px) { .cp-assinatura { top: auto; bottom: 6%; inset-inline-start: 38%; width: 58%; } }
/* retrato: as mangas esmaecem em curva (antes desciam retas ate a placa, com cara de foto retangular) */
.cp-recorte {
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%), radial-gradient(64% 86% at 50% 24%, #000 72%, transparent 100%), linear-gradient(180deg, #000 34%, transparent 60%);
  mask-image: linear-gradient(0deg, transparent 0%, #000 22%), radial-gradient(64% 86% at 50% 24%, #000 72%, transparent 100%), linear-gradient(180deg, #000 34%, transparent 60%); }
/* celular: o painel escuro atras do texto termina esmaecido (antes, uma linha reta cruzava a base da foto) */
@media (max-width: 760px) { .cp-texto::before { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 78%, transparent 100%); } }
/* ===== v4: curriculo para baixar ===== */
.cr-contato .canal-cv { text-decoration: none; }
.cr-contato .canal-cv b { display: block; font-size: 16px; white-space: nowrap; }
.cr-contato .canal-cv small { display: block; font-weight: 500; color: rgba(255, 255, 255, .8); }
/* celular: os 3 botoes do Perfil empilhados com a mesma largura (com o curriculo, larguras diferentes ficavam tortas) */
@media (max-width: 560px) { .pf-botoes { display: grid; grid-template-columns: minmax(0, 1fr); } .pf-botoes .btn { justify-content: center; } }
/* ===== v5 ===== */
/* 20 camisas: 2 fileiras de 10 (com 8 colunas sobravam 4 encostadas a esquerda); no celular, 5 fileiras de 4 */
.sel-camisas { grid-template-columns: repeat(10, minmax(0, 1fr)); }
@media (max-width: 520px) { .sel-camisas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b-ar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23006c35'/%3E%3Ctext x='15' y='10.2' fill='%23fff' font-size='5.2' font-family='Tahoma,Arial,sans-serif' text-anchor='middle' direction='rtl'%3E%D9%84%D8%A7 %D8%A5%D9%84%D9%87 %D8%A5%D9%84%D8%A7 %D8%A7%D9%84%D9%84%D9%87 %D9%85%D8%AD%D9%85%D8%AF %D8%B1%D8%B3%D9%88%D9%84 %D8%A7%D9%84%D9%84%D9%87%3C/text%3E%3Cpath d='M7 14.3h14.6' stroke='%23fff' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M21.6 13.1v2.4M21.6 14.3h1.9' stroke='%23fff' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ===== v5: arabe (direita para a esquerda) ===== */
html[lang="ar"] body { line-height: 1.75; }
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] .cf-num, html[lang="ar"] .ff-frase, html[lang="ar"] .mi-ideias b { font-style: normal; text-transform: none; }
html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.3; }
/* o nome da marca segue em latim, inclinado e em caixa alta */
html[lang="ar"] .cr-capa .cp-nome, html[lang="ar"] .cr-logo b { font-style: italic; text-transform: uppercase; }
html[lang="ar"] .cr-capa .cp-nome { direction: ltr; text-align: right; }
html[lang="ar"] .cr-capa .cp-nome .destaque { padding-left: 0; }
html[lang="ar"] .cp-placa::after { display: none; }
html[lang="ar"] .cp-placa i { font-size: 16px; }
html[lang="ar"] .cr-capa .cp-luz { background: radial-gradient(30% 46% at 20% 40%, rgba(255, 138, 61, .34), rgba(255, 138, 61, .1) 55%, transparent 75%), radial-gradient(30% 35% at 88% 0%, rgba(255, 255, 255, .1), transparent 70%); }
@media (max-width: 760px) {
  html[lang="ar"] .cr-capa .cp-luz { background: radial-gradient(60% 34% at 22% 36%, rgba(255, 138, 61, .32), rgba(255, 138, 61, .1) 55%, transparent 76%); }
  html[lang="ar"] .cp-texto::before { background: linear-gradient(270deg, rgba(8, 9, 11, .85) 0%, rgba(8, 9, 11, .55) 60%, rgba(8, 9, 11, 0) 100%); inset: -40px calc(-1 * var(--gutter)) -16px -40px; }
}
html[lang="ar"] .cp-foto { filter: drop-shadow(0 0 1px rgba(255, 200, 160, .5)) drop-shadow(12px 0 26px rgba(255, 138, 61, .28)) drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
/* telefone, e-mail, @ e numeros com unidade: sempre da esquerda para a direita */
/* telefone, e-mail e @: so o texto, isolado da esquerda para a direita (o icone segue do lado do texto) */
.ltr { unicode-bidi: isolate; direction: ltr; }
/* globo com 6 fases (Macau e China separados): uma linha so */
.cg-fases { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 980px) { .cg-fases { grid-template-columns: repeat(6, max-content); } }
/* arabe: as faixas que correm seguem da esquerda para a direita (no RTL o trilho comecava fora da tela); cada item segue em arabe */
html[dir="rtl"] .faixa-infinita { direction: ltr; }
html[dir="rtl"] .faixa-infinita .trilho > * { direction: rtl; }
@media (max-width: 760px) { html[dir="rtl"] .cg-fases { -webkit-mask-image: linear-gradient(270deg, #000 86%, transparent); mask-image: linear-gradient(270deg, #000 86%, transparent); padding-right: var(--gutter); padding-left: 36px; } }
/* arabe: letra arabe nunca inclinada nem engrossada de mentira; numero, telefone e e-mail alinhados do lado do texto */
html[lang="ar"] { font-synthesis: none; }
html[lang="ar"] blockquote, html[lang="ar"] blockquote *, html[lang="ar"] em, html[lang="ar"] i:not(.bandeira), html[lang="ar"] .ct-cita p { font-style: normal; }
html[lang="ar"] .canal .nowrap, html[lang="ar"] .canal small { text-align: right; }
html[lang="ar"] .canal > a.valor { justify-content: flex-start; }

/* arabe, celular em pe: espelhada, a assinatura caia no rosto (a foto nao espelha); menor e colada na borda da tela */
@media (max-width: 760px) and (orientation: portrait) { html[dir="rtl"] .cp-assinatura { inset-inline-start: -50%; width: 34%; top: 30%; } }
/* ===== v5: painel de coletiva (backdrop) como o dos clubes: fundo claro, escudos coloridos sem o quadrado branco, em fileiras desencontradas,
   e o nome com "HEAD COACH" logo embaixo (antes o "Football Coach" caia numa linha separada da grade, longe do nome) ===== */
.cr-coletiva { background: #f4f3ef; }
.cr-coletiva::before { background: radial-gradient(60% 80% at 50% 50%, rgba(8, 9, 11, .34), rgba(8, 9, 11, .06) 70%, rgba(8, 9, 11, 0)); }
.ct-painel { transform: none; inset: -30px -40px; grid-template-columns: repeat(9, minmax(110px, 1fr)); grid-auto-rows: 112px; gap: 14px 22px;
  background: linear-gradient(180deg, #f8f7f3, #ecebe5); }
.ct-painel .pt { display: flex; align-items: center; justify-content: center; }
.ct-painel .pt img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); }
.ct-painel .pt-nome { display: flex; flex-direction: column; align-items: center; gap: 5px; line-height: 1; }
.ct-painel .marca b { font-size: 19px; color: #15171a; }
.ct-painel .marca small { margin-top: 0; font: 800 9.5px/1 var(--fonte-texto); letter-spacing: .32em; color: #15171a; padding-left: .32em; }
@media (max-width: 760px) { .ct-painel { grid-template-columns: repeat(5, minmax(92px, 1fr)); grid-auto-rows: 92px; gap: 10px 14px; inset: 0; } .ct-painel .pt img { width: 54px; height: 54px; } .ct-painel .marca b { font-size: 15px; } .ct-painel .marca small { font-size: 8px; } }
html[lang="ar"] .ct-painel .marca b { font-style: italic; text-transform: uppercase; }
/* credito de foto de terceiros (licenca livre com atribuicao): no pe da foto, legivel */
.nt-foto, .nt-aberta-foto { position: relative; }
.nt-credito { position: absolute; inset-inline-end: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 7px; border-radius: 6px; background: rgba(8, 9, 11, .72); color: rgba(255, 255, 255, .92); font: 500 11px/1.3 var(--fonte-texto); text-align: start; pointer-events: none; }
/* foto montada (dois rostos lado a lado): sempre inteira, sobre a copia desfocada (no cartao alto o recorte cortava os dois rostos) */
.nt-foto.inteira, .nt-aberta-foto.inteira { background: #0f1115; overflow: hidden; }
.nt-foto.inteira::before, .nt-aberta-foto.inteira::before { content: ""; position: absolute; inset: -30px; background: var(--nt-bg) center / cover no-repeat; filter: blur(22px) brightness(.5); }
.nt-foto.inteira img, .nt-aberta-foto.inteira img { position: relative; object-fit: contain; object-position: 50% 50% !important; }
/* ===== v5, revisao ===== */
/* painel de coletiva em fileiras: celulas de largura fixa (nada se sobrepoe), fileira sim fileira nao deslocada meia celula */
.ct-painel { display: flex; flex-direction: column; justify-content: center; gap: 12px; grid-template-columns: none; overflow: hidden; }
.ct-painel .pt-fila { display: flex; flex: none; gap: 0; width: max-content; margin-inline-start: -60px; }
.ct-painel .pt-fila.meio { margin-inline-start: -155px; }
.ct-painel .pt { flex: none; width: 190px; height: 104px; transform: none !important; }
@media (max-width: 760px) { .ct-painel { gap: 8px; } .ct-painel .pt { width: 132px; height: 84px; } .ct-painel .pt-fila { margin-inline-start: -40px; } .ct-painel .pt-fila.meio { margin-inline-start: -106px; } }
/* credito da foto: linha propria, embaixo da foto */
.nt-credito { position: static; display: block; max-width: none; padding: 0; background: none; color: rgba(255, 255, 255, .55); font: 500 11px/1.35 var(--fonte-texto); }
.nt-aberta-txt .nt-credito { color: #6b6f76; margin-bottom: 8px; font-weight: 500; }
/* foto alta no cartao grande: preenche o quadro */
.nt-foto.inteira picture { display: contents; }
@media (min-width: 981px) { .nt-cartao.grande .nt-foto.inteira img { object-fit: cover; } }
/* globo no celular: as 6 abas cabem a partir de 360 px */
@media (max-width: 760px) { .cg-fases { grid-template-columns: repeat(6, auto); gap: 5px; } .cg-fases button { padding: 8px 9px; font-size: 12.5px; } }
/* menu do celular: bandeira com espaco nos dois sentidos; o 5o idioma centralizado na ultima linha */
.menu-cel .menu-idioma .bandeira { margin-right: 0; margin-inline-end: 8px; }
.menu-cel .menu-idioma button:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; min-width: 50%; }
/* arabe: rodape, prancheta e noticias alinhados a direita; nome do Instagram com o @ no comeco; nomes dos celulares cortados no fim */
html[dir="rtl"] .cr-rodape, html[dir="rtl"] .cr-rodape h4, html[dir="rtl"] .pr-momentos button, html[dir="rtl"] .pr-passos a, html[dir="rtl"] .nt-cartao button, html[dir="rtl"] .nt-video { text-align: right; }
html[dir="rtl"] .cr-logo .cl-txt { justify-items: start; text-align: start; }
html[dir="rtl"] .ig3-nome b { direction: ltr; text-align: right; }
html[dir="rtl"] .ig3-cels b { direction: ltr; unicode-bidi: isolate; }

/* arabe: os celulares do Instagram imitam o app com o @ em latim (o nome cortava do lado errado); legendas seguem em arabe */
html[dir="rtl"] .ig3-cels { direction: ltr; }
html[dir="rtl"] .ig3-cels .ig3-story-leg, html[dir="rtl"] .ig3-cels .ig3-reel > span:not(.ig3-reel-u) { unicode-bidi: plaintext; text-align: start; }
/* credito da foto com a cor dele (a regra do "small" da data deixava laranja) */
.nt-corpo .nt-credito { color: rgba(255, 255, 255, .55); font-weight: 500; font-size: 11px; }
/* legenda do reel dentro da tela do celular (a grade sem limite deixava o texto passar da borda: no arabe cortava o comeco, no portugues o fim) */
.cr-instagram .ig3-reel { grid-template-columns: minmax(0, 1fr); }
/* ===== v6 ===== */
/* foto da Arabia: a assinatura com o dirigente (quadrada) preenche o quadro largo pelo alto, os dois rostos inteiros */
.fc-fotos img[data-foto-fase="arabia"] { object-fit: cover; object-position: 50% 6%; background: #111; }

/* faixa da comissao (foto provisoria, 1080 px): nas telas muito largas a faixa vira uma tira; desce um pouco o enquadramento para a frase cair no peito, nao no rosto */
@media (min-width: 1800px) { .cr-faixa-foto > img { object-position: 50% 14% !important; } }