/* inicio.css — Portal CastroStudies, visual "evolução" (08/11/2026).
   Só a página inicial: abertura com a foto de fundo e os elementos animados,
   acesso rápido, apresentações, produtos e blocos finais. Vem depois de casca.css. */

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 15px; cursor: pointer;
  font-size: 15.5px; font-weight: 800; letter-spacing: -.01em;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  transition: transform .25s var(--curva), box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--curva); }
.btn:hover { transform: translateY(-2px); border-color: var(--borda-forte); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primario {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--vermelho-2), var(--vermelho-3));
  border-color: rgba(255,90,100,.6);
  box-shadow: 0 16px 50px rgba(225,18,31,.32), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primario::after {          /* brilho que atravessa o botão: sozinho a cada 5,5 s */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  animation: brilho-botao 5.5s ease-in-out infinite 1.5s;
}
/* 08/11 (ideia da biblioteca V2 do GPT): ao apontar o mouse ou chegar pelo Tab, o brilho
   passa na hora, mais forte. Trocar o nome da animação faz ela recomeçar do início. */
.btn-primario:hover::after, .btn-primario:focus-visible::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  animation: brilho-agora .65s ease-out 1 both;
}
.btn-primario:hover { box-shadow: 0 22px 70px rgba(225,18,31,.45), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primario svg[viewBox] path[d^="M8"] { fill: currentColor; stroke: none; }
/* 08/11: sem desfoque (pesava na placa de vídeo do notebook, por cima do vídeo); fundo mais firme no lugar */
.btn-vidro { position: relative; overflow: hidden; background: rgba(10,10,14,.74); }
.btn-vidro::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); }
.btn-vidro:hover::after, .btn-vidro:focus-visible::after { animation: brilho-agora .65s ease-out 1 both; }
.btn-vidro svg path[d^="M8"] { fill: currentColor; stroke: none; }
@keyframes brilho-botao { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes brilho-agora { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* ===== Abertura: a foto é o fundo ===== */
.abertura { position: relative; min-height: max(720px, 100svh); display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--barra-h) + 70px) 0 56px; isolation: isolate; }
.palco { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.palco-camada { position: absolute; inset: -24px; will-change: transform; transition: transform .6s var(--curva); }
.palco-foto { transform: translate3d(var(--px, 0), var(--py, 0), 0); }
.palco-video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform: scale(calc(1.16 + var(--zoom, 0))); transform-origin: 24% 0%;   /* esconde a estrelinha do canto */
  object-position: 50% 0%;
}
/* 08/11 fluidez: o escurecer ao rolar era filter: brightness() no vídeo (refeito a cada quadro);
   agora é um véu preto cuja opacidade a placa de vídeo muda sozinha. */
.palco-foto::after { content: ""; position: absolute; inset: 0; background: #000; pointer-events: none; opacity: calc(1 - var(--brilho, 1)); }
.palco-luz { pointer-events: none; transform: translate3d(var(--lx, 0), var(--ly, 0), 0); }
.palco-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3,3,4,.94) 0%, rgba(3,3,4,.78) 30%, rgba(3,3,4,.28) 54%, rgba(3,3,4,0) 70%),
    linear-gradient(180deg, rgba(3,3,4,.55) 0%, rgba(3,3,4,0) 22%, rgba(3,3,4,0) 62%, rgba(3,3,4,.92) 92%, var(--preto) 100%);
}

/* circuitos com pulsos de luz que correm pelas trilhas */
.circuitos { position: absolute; inset: 0; width: 100%; height: 100%; }
.trilhas path { fill: none; stroke: rgba(255,60,75,.16); stroke-width: 1.2; }
.pulso { fill: none; stroke: url(#fio); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 90 1400; stroke-dashoffset: 1490;   /* 08/11 fluidez: sem drop-shadow; traço um pouco mais grosso */
  animation: corre var(--t, 6s) linear infinite var(--a, 0s); }
.p1 { --t: 5.5s; --a: -1s; } .p2 { --t: 7s; --a: -4s; } .p3 { --t: 6.2s; --a: -2s; }
.p4 { --t: 8s; --a: -6s; } .p5 { --t: 6.8s; --a: -3s; } .p6 { --t: 7.6s; --a: -5s; }
@keyframes corre { to { stroke-dashoffset: 0; } }
.nos circle { fill: #ff2f41; transform-box: fill-box; transform-origin: center; animation: pisca 3.2s ease-in-out infinite; }
.nos circle:nth-child(2n) { animation-delay: -1.1s; } .nos circle:nth-child(3n) { animation-delay: -2.2s; }
@keyframes pisca { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }

/* faíscas subindo */
.faiscas { position: absolute; inset: 0; overflow: hidden; }
.faiscas i { position: absolute; left: var(--x); bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: #ff5a68; box-shadow: 0 0 8px 2px rgba(255,47,65,.7);
  animation: sobe var(--t) linear infinite var(--a); opacity: 0; }
.faiscas i:nth-child(3n) { width: 2px; height: 2px; background: #ffd5d9; }
@keyframes sobe {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .9; }
  60% { opacity: .6; }
  100% { transform: translate3d(28px, -92vh, 0); opacity: 0; }
}
/* faixa de luz que varre a foto */
/* 08/11 fluidez: a faixa anda por transform (a placa de vídeo move sem redesenhar), sem mix-blend */
.varredura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.varredura::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; will-change: transform;
  background: linear-gradient(100deg, transparent 0%, rgba(255,70,85,.07) 35%, rgba(255,255,255,.06) 50%, rgba(255,70,85,.07) 65%, transparent 100%);
  transform: translate3d(-100%, 0, 0); animation: varre 9s ease-in-out infinite; }
@keyframes varre { 0% { transform: translate3d(180%, 0, 0); } 55%, 100% { transform: translate3d(-100%, 0, 0); } }

.abertura-grade { position: relative; flex: 1; display: flex; align-items: center; }
.abertura-texto { max-width: 760px; transform: translate3d(0, var(--ty, 0), 0); opacity: var(--op, 1); }
.selo {
  display: inline-flex; align-items: center; gap: 11px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(225,18,31,.45); background: rgba(48,6,11,.72);   /* 08/11 fluidez: sem desfoque */
  color: #ffe9ec; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; font-weight: 800;
}
.selo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho-2); box-shadow: 0 0 0 0 rgba(255,47,65,.7); animation: pulso-selo 2.4s ease-out infinite; }
@keyframes pulso-selo { 0% { box-shadow: 0 0 0 0 rgba(255,47,65,.7); } 80%, 100% { box-shadow: 0 0 0 10px rgba(255,47,65,0); } }
/* 08/11: "CastroStudies" nunca quebra (em 1475 px passava da coluna de 680 px e caía em 2 linhas). */
.marca-grande { margin: 26px 0 18px; font-size: clamp(50px, 8.2vw, 124px); font-weight: 900; line-height: .9; letter-spacing: -.075em; white-space: nowrap; }
.marca-grande .letras { display: inline-block; }
/* 08/11, pedido do Vinicius: o efeito dos cartões (luz que segue o mouse + inclinação) fica
   SEMPRE LIGADO na palavra. --lx/--ly = posição da luz dentro do título (o evolucao.js põe o
   mouse ali; sem mouse — celular, ou mouse fora da abertura — a luz passeia sozinha).
   --ox = onde cada metade começa, para as duas metades dividirem a MESMA luz.
   Só redesenha quando a luz anda: mais leve que o reflexo antigo, que redesenhava sempre. */
@property --lx { syntax: "<length>"; inherits: true; initial-value: 0px; }   /* valor inicial em px: em é recusado */
@property --ly { syntax: "<length>"; inherits: true; initial-value: 50px; }
@property --tx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ty { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* Em loop (pedido do Vinicius, 08/11): a luz vai e volta pela palavra numa onda e o título
   balança junto — o mesmo movimento do mouse passando. Com o mouse na abertura, segue o mouse. */
.marca-grande { --rx: 0deg; --ry: 0deg;
  transform: perspective(1100px) rotateX(calc(var(--rx) + var(--tx))) rotateY(calc(var(--ry) + var(--ty)));
  transform-origin: 30% 50%;
  animation: luz-vai-vem 4.2s ease-in-out infinite alternate, luz-onda 2.9s ease-in-out infinite alternate; }
.marca-grande.segue-mouse { animation: none; transition: transform .45s var(--curva); }
@keyframes luz-vai-vem { from { --lx: -.2em; --ty: -4deg; } to { --lx: 5.8em; --ty: 1.5deg; } }
@keyframes luz-onda { from { --ly: .2em; --tx: 1.6deg; } to { --ly: .75em; --tx: -1.6deg; } }
.marca-grande .letras {
  --ox: 0px; -webkit-background-clip: text; background-clip: text; color: transparent; background-repeat: no-repeat; text-shadow: none;
  background-image:
    radial-gradient(1.5em at calc(var(--lx) - var(--ox)) var(--ly), rgba(255,92,108,.95), rgba(255,92,108,.35) 45%, rgba(255,92,108,0) 72%),
    linear-gradient(#fff, #fff);
  /* 08/11: o "s" final era cortado — com letter-spacing negativo a letra passa da caixa e o
     degradê (que só pinta dentro da caixa) não a alcança. A folga à direita é devolvida na margem. */
  padding-right: .1em; margin-right: -.1em; }
.marca-grande .vermelho {
  background-image:
    radial-gradient(1.5em at calc(var(--lx) - var(--ox)) var(--ly), rgba(255,236,239,.95), rgba(255,170,180,.45) 45%, rgba(255,170,180,0) 72%),
    linear-gradient(100deg, #ff2f41 0%, #e1121f 45%, #ff4555 100%); }
.lead { margin: 0 0 18px; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.18; letter-spacing: -.035em; color: #e2e5ec; font-weight: 500; }
.copy { margin: 0; max-width: 600px; font-size: 17px; line-height: 1.75; color: #c6cbd5; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* indicadores (os mesmos três de hoje) — faixa de vidro na base da foto */
.indicadores { margin: 46px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border: 1px solid rgba(255,255,255,.13); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,20,26,.86), rgba(8,8,10,.8));   /* 08/11 fluidez: sem desfoque */
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.1); }
.indicador { position: relative; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 22px 26px; }
.indicador + .indicador { border-left: 1px solid rgba(255,255,255,.09); }
.indicador-icone { grid-row: span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid rgba(255,47,65,.5); color: var(--vermelho-2); background: rgba(225,18,31,.1); box-shadow: 0 0 18px rgba(225,18,31,.18); }
.indicador-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.indicador dt { font-size: 24px; font-weight: 850; letter-spacing: -.03em; color: var(--vermelho-texto); line-height: 1.1; }
.indicador dd { margin: 2px 0 0; color: #e8eaf0; font-size: 14.5px; }
.contador { font-variant-numeric: tabular-nums; }

.rolar { position: absolute; left: 50%; bottom: 14px; width: 26px; height: 40px; margin-left: -13px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.35); }
.rolar span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: desce 1.8s ease-in-out infinite; }
@keyframes desce { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ===== Seções ===== */
.secao { position: relative; padding: 84px 0; }
.secao-linha::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--max), calc(100% - 48px)); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(225,18,31,.45), transparent); }
.kicker { margin-bottom: 14px; font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--vermelho-texto); display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--vermelho-2); box-shadow: 0 0 10px var(--vermelho-2); }
.h2 { margin: 0; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -.05em; font-weight: 850; text-wrap: balance; }
.muted { margin: 0; color: var(--tinta-3); line-height: 1.72; }
.cabeca { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 38px; }
.cabeca-apoio { display: grid; gap: 20px; justify-items: start; }

/* Acesso rápido: 10 cartões, 5 por linha */
.acesso { padding-top: 40px; }
.modulos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.modulo {
  --cor: #d6d9df; --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 32px; align-items: center; gap: 14px;
  min-height: 104px; padding: 18px 16px 18px 18px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--cor) 42%, transparent);
  background:
    radial-gradient(120% 95% at 0% 100%, color-mix(in srgb, var(--cor) 15%, transparent), transparent 62%),
    linear-gradient(145deg, rgba(15,18,26,.88), rgba(4,6,10,.8));   /* 08/11 fluidez: sem desfoque */
  box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .35s var(--curva), border-color .35s ease, box-shadow .35s ease;
}
.modulo::before {   /* luz que segue o mouse */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(220px circle at var(--mx) var(--my), color-mix(in srgb, var(--cor) 26%, transparent), transparent 65%);
}
.modulo::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cor), transparent); box-shadow: 0 0 14px var(--cor); opacity: .7; }
.modulo:hover, .modulo:focus-visible { transform: translateY(-5px); border-color: var(--cor);
  box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 26px color-mix(in srgb, var(--cor) 26%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }
.modulo:hover::before { opacity: 1; }
.modulo:focus-visible { outline-color: var(--cor); }
.modulo-icone { width: 52px; height: 52px; color: var(--cor); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cor) 50%, transparent)); transition: transform .35s var(--curva); }
.modulo-icone svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.modulo-icone .enche { fill: currentColor; fill-opacity: .16; }
.modulo-imagem img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.modulo:hover .modulo-icone { transform: scale(1.08) rotate(-3deg); }
.modulo-nome { min-width: 0; font-size: clamp(17px, 1.35vw, 21px); font-weight: 650; line-height: 1.15; letter-spacing: -.025em; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.modulo-selo { display: block; width: fit-content; margin-top: 6px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-shadow: none;
  color: var(--cor); border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); background: rgba(0,0,0,.25); }
.modulo-seta { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.2);
  border: 1px solid color-mix(in srgb, var(--cor) 65%, transparent); transition: transform .3s var(--curva), background .3s ease; }
.modulo-seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modulo:hover .modulo-seta { transform: translateX(3px); background: color-mix(in srgb, var(--cor) 30%, transparent); }
.tema-ouro { --cor: #d5a043; } .tema-prata { --cor: #d6d9df; } .tema-verde { --cor: #22dd84; }
.tema-vermelho { --cor: #ff304c; } .tema-azul { --cor: #25a8ff; } .tema-laranja { --cor: #f0a35a; }

/* Vitrine de apresentações */
.vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; perspective: 1200px; }
.projeto {
  --cor: #ff304c; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden; min-height: 380px; padding: 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 24px; border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent);
  background: #07070a; box-shadow: 0 26px 70px rgba(0,0,0,.45);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .5s var(--curva), border-color .3s ease, box-shadow .3s ease;
}
.projeto:hover { border-color: var(--cor); box-shadow: 0 34px 90px rgba(0,0,0,.6), 0 0 34px color-mix(in srgb, var(--cor) 24%, transparent); }
.projeto-capa { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center 30%;
  filter: brightness(.62) saturate(1.1); transform: scale(1.04); transition: transform .8s var(--curva), filter .5s ease; }
.projeto:hover .projeto-capa { transform: scale(1.1); filter: brightness(.8) saturate(1.2); }
.projeto-previa { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.projeto.tocando .projeto-previa { opacity: .85; }
.projeto::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--cor) 22%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.88) 85%); }
.projeto-texto { transform: translateZ(30px); }
.projeto h3 { margin: 0 0 8px; font-size: 40px; line-height: 1; letter-spacing: -.04em; font-weight: 850; }
.projeto p { margin: 0; color: #dde1e8; line-height: 1.5; max-width: 30ch; }
.projeto-tempo { display: inline-flex; margin-top: 16px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); }
.projeto-selo, .projeto-tag { position: absolute; top: 20px; left: 20px; padding: 6px 11px; border-radius: 9px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.projeto-selo { color: var(--cor); border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); background: rgba(0,0,0,.72); }
.projeto-tag { background: var(--vermelho); color: #fff; box-shadow: 0 8px 24px rgba(225,18,31,.4); }
.projeto-play { position: absolute; right: 24px; top: 24px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--vermelho-2), var(--vermelho-3)); box-shadow: 0 16px 44px rgba(225,18,31,.45); transform: translateZ(40px); }
.projeto-play::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,47,65,.6); animation: onda 2.4s ease-out infinite; }
.projeto-play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
@keyframes onda { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.projeto-video { cursor: pointer; }

/* Mural com moldura de luz girando */
.mural { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 40px; align-items: center; margin-top: 56px; }
.mural-texto h3 { margin: 0 0 12px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; }
.mural-texto .muted { margin-bottom: 24px; }
.mural-moldura { position: relative; padding: 2px; border-radius: 24px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.mural-moldura::before { content: ""; position: absolute; inset: -60%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255,47,65,.9) 75%, #ffd0d5 80%, rgba(255,47,65,.9) 85%, transparent 100%);
  animation: gira 7s linear infinite; }
.mural-moldura::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 22px; background: #000; }
@keyframes gira { to { transform: rotate(1turn); } }
.mural-tela { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; }
.mural-tela video { width: 100%; height: 100%; object-fit: cover; }

/* Produtos */
.produtos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.produto {
  --cor: #ff304c; --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px;
  min-height: 250px; padding: 30px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(26,26,32,.9), rgba(14,14,18,.86));   /* 08/11 fluidez: sem desfoque */
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  transition: transform .35s var(--curva), border-color .35s ease, box-shadow .35s ease;
}
.produto::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--cor), transparent); opacity: .8; }
.produto::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(300px circle at var(--mx) var(--my), color-mix(in srgb, var(--cor) 18%, transparent), transparent 70%); }
.produto:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--cor) 70%, transparent);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--cor) 18%, transparent); }
.produto:hover::after { opacity: 1; }
.produto-destaque { border-color: color-mix(in srgb, var(--cor) 55%, transparent); }
.produto-logo { display: flex; align-items: center; height: 46px; }
.produto-logo img { height: 40px; width: auto; max-width: 170px; object-fit: contain; }
.produto p { margin: 0; flex: 1; color: #c9ced8; line-height: 1.65; }
.produto-link { display: inline-flex; align-items: center; gap: 8px; color: var(--vermelho-texto); font-weight: 800; }
.produto-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--curva); }
.produto:hover .produto-link svg { transform: translateX(5px); }

/* Blocos finais */
.blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bloco { position: relative; padding: 32px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(26,26,32,.9), rgba(14,14,18,.86));
  box-shadow: 0 18px 60px rgba(0,0,0,.25); }   /* 08/11 fluidez: sem desfoque */
.bloco-icone { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 15px; color: var(--vermelho-2);
  border: 1px solid rgba(255,47,65,.45); background: rgba(225,18,31,.1); }
.bloco-icone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bloco h3 { margin: 0 0 12px; font-size: 26px; line-height: 1.2; letter-spacing: -.03em; }
.bloco p { margin: 0; color: #c5cbd5; line-height: 1.7; }

/* Entrada ao rolar (só com JS; sem JS tudo aparece) */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: var(--atraso, 0s); }
.js .revelar.visivel { opacity: 1; transform: none; }
.js .projeto.revelar.visivel { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.js .abertura-texto > * { animation: chega .9s var(--curva) both; }
.js .abertura-texto > :nth-child(2) { animation-delay: .1s; } .js .abertura-texto > :nth-child(3) { animation-delay: .2s; }
.js .abertura-texto > :nth-child(4) { animation-delay: .3s; } .js .abertura-texto > :nth-child(5) { animation-delay: .4s; }
.js .indicadores { animation: chega 1s var(--curva) .5s both; }
@keyframes chega { from { opacity: 0; transform: translateY(24px); } }
/* 08/11: o título tem o loop da luz (luz-vai-vem/luz-onda) na própria animação; a regra acima
   (mais forte) apagaria o loop. A entrada do título passa para as letras; o h1 fica com o loop. */
.js .abertura-texto > .marca-grande { animation: luz-vai-vem 4.2s ease-in-out infinite alternate, luz-onda 2.9s ease-in-out infinite alternate; }
.js .abertura-texto > .marca-grande.segue-mouse { animation: none; }
.js .marca-grande .letras { animation: chega .9s var(--curva) .1s both; }

@media (max-width: 1240px) {
  .modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .cabeca, .mural, .blocos { grid-template-columns: 1fr; }
  .vitrine, .produtos { grid-template-columns: 1fr; }
  .projeto { min-height: 300px; }
  .mural-moldura { order: -1; }
  .indicadores { grid-template-columns: 1fr; }
  .indicador + .indicador { border-left: 0; border-top: 1px solid rgba(255,255,255,.09); }
  .indicador { padding: 16px 20px; }
}
@media (max-width: 760px) {
  /* No celular a foto fica em cima, inteira; o texto entra embaixo dela. */
  .abertura { min-height: 0; padding-top: min(108vw, 470px); padding-bottom: 64px; }
  .palco { bottom: auto; height: min(132vw, 580px); }
  .palco-camada { inset: 0; }
  .palco-video { object-position: 74% 20%; transform: none; }
  .circuitos { display: none; }                       /* a pessoa ocupa o meio: nada corre por cima dela */
  .faiscas i:nth-child(n+8) { display: none; }        /* só as faíscas da esquerda */
  .palco-veu { background: linear-gradient(180deg, rgba(3,3,4,.5) 0%, rgba(3,3,4,0) 20%, rgba(3,3,4,0) 52%, rgba(3,3,4,.85) 80%, var(--preto) 100%); }
  .marca-grande { font-size: clamp(50px, 15vw, 72px); margin-top: 18px; }
  .copy { font-size: 16px; }
  .acoes { flex-direction: column; }
  .acoes .btn { width: 100%; }
  .rolar { display: none; }
  .secao { padding: 64px 0; }
  .modulos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .modulo { grid-template-columns: 1fr; justify-items: start; align-content: start; gap: 10px; min-height: 0; padding: 16px; }
  .modulo-icone { width: 40px; height: 40px; }
  .modulo-nome { font-size: 17px; }
  .modulo-seta { display: none; }
  .projeto h3 { font-size: 34px; }
  /* Na página inicial a pausa fica sobre a foto, sem cobrir os botões. */
  .pausa-geral { position: absolute; top: calc(min(108vw, 470px) - 64px); bottom: auto; right: 14px; }
}

/* Cartão sem vídeo: o selo "Vídeo em breve" fica no canto direito (o esquerdo é do DESTAQUE). */
.projeto-selo-canto { left: auto; right: 20px; }