/* Bastidores Criativo · camada da marca (direção 01, enquadramento aberto)
   "Forma primeiro. Vidro como acabamento." Paleta: #070B1A #2A4F93 #A9C4E0 #F6F1E4 #F0502A.
   Vem por último: acerta vidro, filetes, ícones e os movimentos de motion graphic. */

:root { --brand-blue: #2a4f93; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); }

/* ---------- Menu: estado ativo em vidro, sem o filete dourado ---------- */
.pill a.active { color: var(--on-dark); background: linear-gradient(180deg, rgba(169,196,224,.16), rgba(169,196,224,.07));
  box-shadow: inset 0 0 0 1px rgba(169,196,224,.22), inset 0 1px 0 rgba(255,255,255,.14); }
.pill a:hover { background: rgba(255,255,255,.06); }

/* ---------- Ícones de linha: o enquadramento em traço fino ---------- */
.icon { display: block; fill: none; overflow: visible; }
.icon .ln { stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.icon .acc { stroke: var(--accent); }
.icon .dot { fill: var(--accent); }
.icon .ghost { opacity: .28; }
.icon .fill { fill: currentColor; opacity: 0; transition: opacity .8s .5s var(--ease-out); }

/* Desenho do traço: começa apagado e se desenha quando o card aparece */
.js .icon .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-io); }
.js .icon .ln + .ln { transition-delay: .18s; }
.js .icon .dot { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .7s .7s var(--ease-out); }
.js .in .icon .ln, .js .seen .icon .ln { stroke-dashoffset: 0; }
.js .in .icon .dot, .js .seen .icon .dot { transform: scale(1); }
.step.seen .icon .fill { opacity: 1; }

/* ---------- Serviços: cards de vidro sobre uma luz azul ---------- */
.servicegrid { position: relative; isolation: isolate; }
.servicegrid::before { content: ""; position: absolute; z-index: -1; inset: 8% 4% -6%; pointer-events: none; filter: blur(60px); opacity: .55;
  background: radial-gradient(40% 55% at 22% 40%, rgba(42,79,147,.35), transparent 70%), radial-gradient(35% 50% at 80% 65%, rgba(169,196,224,.75), transparent 70%), radial-gradient(18% 26% at 55% 20%, rgba(240,80,42,.12), transparent 70%); }
.service { background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.52)); border: 1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(28,50,96,.07), 0 24px 60px -28px rgba(11,21,48,.28); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.service::after { display: none; }
.service::before { left: 25px; right: 25px; background: linear-gradient(90deg, transparent, rgba(42,79,147,.35), transparent); }
.service:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(28,50,96,.1), 0 34px 70px -30px rgba(11,21,48,.35); }
/* brilho de vidro que segue o ponteiro */
.service .glint { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(169,196,224,.32), transparent 65%); }
.service:hover .glint { opacity: 1; }
.serviceicon { width: 52px; height: 52px; border-radius: 14px; border: 1px solid rgba(28,50,96,.1); color: #1c3260;
  background: linear-gradient(160deg, #fff, rgba(255,255,255,.55)); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -10px rgba(11,21,48,.25); }
.serviceicon svg { width: 28px; height: 28px; }
.service:hover .serviceicon { transform: none; background: #fff; }
.servicetags span { border: 1px solid rgba(28,50,96,.08); background: rgba(255,255,255,.6); }

/* ---------- Processo: sem o cone de luz; o filete vira linha de progresso ---------- */
.step::after { display: none !important; }
.step { border-top-color: var(--line-l); }
.step::before { height: 1px; background: var(--accent); }
.stepicon { width: 40px; height: 40px; color: #1c3260; margin-bottom: 20px; }
.step.lit .stepicon { transform: none; }

/* ---------- Numeração dos títulos: o traço laranja se desenha ---------- */
.js [data-reveal] .eyebrow.num b::after, .js .eyebrow.num[data-reveal] b::after { transform: scaleX(0); transform-origin: left; transition: transform .9s .25s var(--ease-io); }
.js .in .eyebrow.num b::after, .js .eyebrow.num.in b::after { transform: scaleX(1); }
.manifesto::after { background: var(--accent); }

/* ---------- Faixa em movimento (abaixo da abertura) ---------- */
.ticker { position: relative; overflow: hidden; background: var(--dark); border-block: 1px solid rgba(169,196,224,.1); padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticktrack { display: flex; width: max-content; will-change: transform; }
.tickset { display: flex; align-items: center; flex: none; }
.tickset span { font-size: clamp(22px, 2.6vw, 38px); font-weight: 400; letter-spacing: -.035em; color: var(--on-dark); white-space: nowrap; padding: 0 30px; }
.tickset span:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1px rgba(169,196,224,.7); }
.tickset i { flex: none; width: 14px; height: 14px; position: relative; }
.tickset i::before, .tickset i::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1.6px solid var(--accent); }
.tickset i::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.tickset i::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.no-gsap .ticktrack { animation: tick 40s linear infinite; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Cantos do enquadramento em volta dos títulos ---------- */
.fc { position: absolute; width: 46px; height: 46px; pointer-events: none; border: 2px solid rgba(169,196,224,.85); }
.fc.tl { left: -8px; top: -30px; border-right: 0; border-bottom: 0; }
.fc.br { right: -8px; bottom: -30px; border-left: 0; border-top: 0; }
.gallerytitle .fc.tl { left: 2%; } .gallerytitle .fc.br { right: 2%; }
.contact .fc.tl { left: 8%; top: 40px; } .contact .fc.br { right: 8%; bottom: 40px; }
.fc.tl::after, .fc.br::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--accent); }
.fc.tl::after { left: -3.5px; top: -3.5px; } .fc.br::after { right: -3.5px; bottom: -3.5px; }

/* ---------- Imagens: moldura fina e cantos que fecham no hover ---------- */
.scard-media::before, .scard-media::after { content: ""; position: absolute; z-index: 2; width: 34px; height: 34px; pointer-events: none;
  border: 1.5px solid rgba(246,241,228,.9); opacity: 0; transition: transform .7s var(--ease-out), opacity .5s; }
.scard-media::before { left: 22px; top: 22px; border-right: 0; border-bottom: 0; transform: translate(-14px, -14px); }
.scard-media::after { right: 22px; bottom: 22px; border-left: 0; border-top: 0; transform: translate(14px, 14px); }
.scard:hover .scard-media::before, .scard:hover .scard-media::after { opacity: 1; transform: none; }
.scard-media { box-shadow: inset 0 0 0 1px rgba(169,196,224,.12); }
.scard-media img { image-rendering: auto; }
.preview-grid img, .mini img { box-shadow: 0 0 0 1px rgba(169,196,224,.14), 0 24px 50px -24px rgba(0,0,0,.6); border: 0; }
.gw-row img { border-color: rgba(169,196,224,.16); }

@media (max-width: 700px) {
  .ticker { padding: 16px 0; }
  .tickset span { padding: 0 18px; }
  .fc { width: 30px; height: 30px; }
  .contact .fc.tl { left: 0; } .contact .fc.br { right: 0; }
  .servicegrid::before { filter: blur(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .icon .ln { stroke-dashoffset: 0; transition: none; }
  .js .icon .dot { transform: none; transition: none; }
  .no-gsap .ticktrack, .ticktrack { animation: none; }
}

/* ================= Rodada 08/11 (2): enquadramento, leveza, vídeos ================= */

/* Imagens sempre na proporção certa (a altura vinha do atributo height do HTML) */
.mini img, .gw-row img, .preview-grid img { height: auto; }

/* Projetos em destaque: a imagem fica inteira dentro de uma moldura, sem cortes */
.scard { --dim: 0; }
.scard-media, .scard-copy { opacity: calc(1 - var(--dim)); }
.scard-media { --pad: clamp(18px, 2.6vw, 38px); display: grid; place-items: center; padding: var(--pad);
  background: radial-gradient(70% 60% at 50% 45%, rgba(42,79,147,.28), transparent 75%), var(--proj1); }
.scard-media img { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 808 / 632; border-radius: 14px; transform: none; transition: none;
  box-shadow: 0 0 0 1px rgba(169,196,224,.18), 0 34px 70px -34px rgba(0,0,0,.8); }
.scard:hover .scard-media img { transform: none; }
.scard-media::before { left: calc(var(--pad) - 12px); top: calc(var(--pad) - 12px); }
.scard-media::after { right: calc(var(--pad) - 12px); bottom: calc(var(--pad) - 12px); }

/* Vidro mais leve para rolar liso */
.service { -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }

/* Botões do WhatsApp com o ícone */
.button .wa { width: 18px; height: 18px; flex: none; }
.button:has(.wa) { gap: 12px; justify-content: center; }

/* Contato: frase em duas linhas, centralizada, enquadrada pelos cantos */
.contact h2 { font-size: clamp(34px, 4.5vw, 66px); line-height: 1.1; letter-spacing: -.045em; max-width: none; margin: 28px auto 30px; color: var(--on-dark); }
.contact h2 > .sw > span { color: var(--on-dark); }
.contact h2 > span, .contact h2 > span .sw > span { color: var(--soft); }
@media (min-width: 900px) { .contact h2 { white-space: nowrap; } }
.contact .fc.tl { left: max(0px, calc(50% - min(44vw, 560px))); top: 36px; }
.contact .fc.br { right: max(0px, calc(50% - min(44vw, 560px))); bottom: 36px; }

/* O estúdio: o trabalho em camadas, dentro do enquadramento */
.aboutvisual.stack { height: 460px; display: block; overflow: visible; border-radius: 0; background: radial-gradient(55% 55% at 50% 45%, rgba(42,79,147,.38), transparent 72%); }
.aboutvisual.stack::before, .aboutvisual.stack::after { display: none; }
.aboutvisual .ly { position: absolute; display: block; height: auto; object-fit: cover; border-radius: 12px; will-change: transform;
  box-shadow: 0 0 0 1px rgba(169,196,224,.2), 0 40px 70px -30px rgba(0,0,0,.85); }
.aboutvisual .l1 { width: 40%; aspect-ratio: 1100 / 1288; left: 7%; top: 9%; rotate: -4deg; }
.aboutvisual .l2 { width: 54%; aspect-ratio: 1100 / 864; right: 5%; top: 5%; rotate: 3deg; }
.aboutvisual .l3 { width: 56%; aspect-ratio: 1100 / 620; left: 24%; bottom: 9%; }
.lylabel { position: absolute; left: 7%; bottom: -4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); }
.aboutvisual .fc.tl { left: 0; top: 0; } .aboutvisual .fc.br { right: 0; bottom: 18px; }

/* Vídeos da StudioTerapia */
.reels { margin-top: 80px; }
.reelhead { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.reelhead h3 { font-size: clamp(26px, 2.7vw, 40px); font-weight: 400; letter-spacing: -.04em; line-height: 1.1; margin-top: 14px; max-width: 24ch; }
.reelgrid { display: grid; grid-template-columns: 1fr .633fr; gap: 18px; }
.reelcol { display: grid; gap: 18px; }
.yt { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; color: var(--on-dark); font: inherit; text-align: left;
  box-shadow: 0 0 0 1px rgba(169,196,224,.16), 0 30px 60px -34px rgba(0,0,0,.8); }
.yt.wide { aspect-ratio: 16 / 9; }
.yt.tall { height: 100%; min-height: 100%; }
.yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.78); transition: transform 1s var(--ease-out), filter .6s; }
.yt:hover img, .yt:focus-visible img { transform: scale(1.04); filter: none; }
.yt .play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .5s var(--ease-out), background .4s; }
.yt .play::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%); border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.yt:hover .play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); border-color: var(--accent); }
.yt .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; display: grid; gap: 3px; font-size: 13px; color: var(--muted-d);
  background: linear-gradient(transparent, rgba(7,11,26,.85)); }
.yt .cap b { font-weight: 500; font-size: 17px; color: var(--on-dark); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt.on .play, .yt.on .cap, .yt.on img { display: none; }

@media (max-width: 1000px) {
  .reelgrid { grid-template-columns: 1fr; }
  .yt.tall { height: auto; aspect-ratio: 9 / 16; max-width: 380px; margin: auto; }
  .aboutvisual.stack { height: 380px; }
}
@media (max-width: 700px) {
  .reelhead { display: block; } .reelhead .textlink { display: inline-block; margin-top: 16px; }
  .aboutvisual.stack { height: 300px; }
  .contact h2 { font-size: clamp(30px, 8.6vw, 40px); }
}

/* ================= Luz da marca: vem da direita, desce em diagonal para a esquerda ================= */
/* A mesma luz em todas as seções escuras, como uma janela fora de quadro. Nada de manchas soltas. */
:root { --brand-light:
  radial-gradient(75% 95% at 106% -8%, rgba(169,196,224,.22), rgba(42,79,147,.12) 38%, transparent 68%); }
.hero2, .studio, .contact { background: var(--brand-light), #070b1a; }
.hero2::before, .studio::before, .contact::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 36%, rgba(169,196,224,.05) 45%, rgba(169,196,224,.12) 52%, rgba(169,196,224,.03) 58%, transparent 64%),
    linear-gradient(118deg, transparent 55%, rgba(169,196,224,.06) 61%, transparent 67%),
    linear-gradient(118deg, transparent 68%, rgba(42,79,147,.16) 74%, transparent 82%);
  filter: blur(24px); animation: lightdrift 18s ease-in-out infinite alternate; }
.studio::before, .contact::before { opacity: .75; }
.contact .halo, .hero2 > .halo { display: none; }
@keyframes lightdrift { from { transform: translate3d(2%, -1%, 0); } to { transform: translate3d(-3%, 1.5%, 0); } }
/* O vidro agora é transparente: sem máscara apagando as quinas */
.hero2 .glass canvas { -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) { .hero2::before, .studio::before, .contact::before { animation: none; } }

/* ================= Rodada 08/11 (4) ================= */
/* Vídeo: um só, com o texto ao lado */
.reels { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.reeltext { display: grid; gap: 16px; justify-items: start; }
.reeltext h3 { font-size: clamp(28px, 2.8vw, 42px); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; }
.reeltext p { color: var(--muted-d); font-size: 16px; line-height: 1.7; max-width: 40ch; }
@media (max-width: 1000px) { .reels { grid-template-columns: 1fr; } }

/* O estúdio: três clientes diferentes, todas no mesmo formato */
.aboutvisual .l1 { width: 50%; aspect-ratio: 808 / 632; left: 2%; top: 6%; }
.aboutvisual .l2 { width: 50%; aspect-ratio: 808 / 632; right: 2%; top: 14%; }
.aboutvisual .l3 { width: 56%; aspect-ratio: 808 / 632; left: 22%; bottom: 8%; }

/* Manifesto na proporção da página: uma linha no computador */
.manifesto p { font-size: clamp(34px, 4.6vw, 70px); letter-spacing: -.045em; line-height: 1.08; }
@media (min-width: 900px) { .manifesto p { white-space: nowrap; } }
.manifesto::after { margin-top: 30px; }

/* ================= Pedido de proposta (vidro, 3 passos) ================= */
.brief { width: min(640px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 24px; color: var(--on-dark); overflow: auto;
  background: linear-gradient(160deg, rgba(20,32,66,.92), rgba(7,11,26,.94)); box-shadow: inset 0 0 0 1px rgba(169,196,224,.2), inset 0 1px 0 rgba(255,255,255,.12), 0 40px 120px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); }
.brief::backdrop { background: rgba(4,6,14,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.brief[open] { animation: briefin .5s var(--ease-out); }
@keyframes briefin { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.briefform { position: relative; padding: clamp(24px, 4vw, 40px); display: grid; gap: 22px; }
.briefform .vclose { position: absolute; top: 18px; right: 18px; }
.briefhead { display: grid; gap: 12px; padding-right: 40px; }
.briefhead .kind { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.briefhead h3 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 400; letter-spacing: -.04em; line-height: 1.1; }
.briefsteps { display: flex; gap: 6px; margin-top: 4px; }
.briefsteps i { height: 2px; width: 44px; background: rgba(169,196,224,.2); transition: background .4s; }
.briefsteps i.on { background: var(--accent); }
.bstep { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.bstep.on { display: grid; gap: 14px; animation: stepin .45s var(--ease-out); }
@keyframes stepin { from { opacity: 0; transform: translateX(14px); } }
.bstep legend { font-size: 17px; font-weight: 500; padding: 0; margin-bottom: 4px; }
.bhint { font-size: 13px; color: var(--muted-d); margin-top: 4px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipopt { position: relative; cursor: pointer; }
.chipopt input { position: absolute; opacity: 0; pointer-events: none; }
.chipopt span { display: inline-block; padding: 11px 16px; border-radius: 999px; font-size: 14px; border: 1px solid rgba(169,196,224,.24); background: rgba(255,255,255,.03); color: var(--on-dark); transition: background .25s, border-color .25s; }
.chipopt:hover span { border-color: rgba(169,196,224,.5); }
.chipopt input:checked + span { background: rgba(169,196,224,.16); border-color: var(--soft); box-shadow: inset 0 0 0 1px var(--soft); }
.chipopt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.briefform label:not(.chipopt) { display: grid; gap: 8px; font-size: 13px; color: var(--muted-d); }
.briefform input:not([type=checkbox]):not([type=radio]), .briefform textarea { width: 100%; font: inherit; font-size: 15px; color: var(--on-dark); padding: 13px 14px; border-radius: 12px;
  border: 1px solid rgba(169,196,224,.22); background: rgba(255,255,255,.04); resize: vertical; }
.briefform input:focus, .briefform textarea:focus { outline: none; border-color: var(--soft); background: rgba(255,255,255,.07); }
.briefform ::placeholder { color: var(--muted-d2); }
.bdone.on { display: grid; gap: 10px; }
.bdone h4 { font-size: 22px; font-weight: 450; letter-spacing: -.02em; }
.bdone p { color: var(--muted-d); line-height: 1.7; }
.berror { min-height: 1em; font-size: 13px; color: #ff8a6b; margin: -8px 0 0; }
.bnav { display: flex; justify-content: space-between; gap: 12px; }
.bnav #briefBack { visibility: hidden; }
@media (max-width: 600px) { .bgrid { grid-template-columns: 1fr; } }

/* ================= Rodada 08/11 (5) ================= */
/* Galeria: uma placa escura atrás do título garante a leitura sobre as imagens */
.gallerytitle::before { content: ""; position: absolute; z-index: -1; inset: -90px -120px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7,11,26,.94), rgba(7,11,26,.82) 55%, rgba(7,11,26,0)); }
.gallerytitle h2, .gallerytitle p { text-shadow: 0 2px 30px rgba(7,11,26,.9); }

/* Processo: a linha laranja enche no tempo da etapa, sozinha */
.js .processgrid.live .step::before { transition: width .35s ease; }
.js .processgrid.live .step.lit::before { width: 100%; transition: width var(--dur, 3.4s) linear; }
.js .processgrid.live .step { cursor: default; }

/* Serviços: um trabalho real em cada card */
.servicemedia { margin: 22px 0 -6px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px rgba(28,50,96,.08), 0 16px 34px -20px rgba(11,21,48,.4); }
.servicemedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); }
.service:hover .servicemedia img { transform: scale(1.05); }
.service { min-height: 0; }

/* Faixa "Proposta sob medida": escura, com a luz da marca vindo da direita */
.offerband { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px 50px; flex-wrap: wrap;
  padding: clamp(28px, 4vw, 46px) clamp(26px, 4vw, 52px); border-radius: 22px; color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 140% at 105% -10%, rgba(169,196,224,.24), rgba(42,79,147,.14) 40%, transparent 70%), #0a1129;
  box-shadow: inset 0 0 0 1px rgba(169,196,224,.16), 0 30px 60px -30px rgba(11,21,48,.55); }
.offerband::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 55%, rgba(169,196,224,.08) 63%, transparent 72%); }
.offertext { display: grid; gap: 10px; max-width: 560px; }
.offertext .kind { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.offertext h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; }
.offertext p { color: var(--muted-d); font-size: 15px; line-height: 1.7; }
.offeractions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.offeractions .textlink { color: var(--on-dark); }
@media (max-width: 700px) { .offeractions { flex-direction: column; align-items: flex-start; } }

/* ================= Textura da abertura: grão de filme + vinheta ================= */
.hero2.grain::after { inset: 0; opacity: .09; mix-blend-mode: screen; background-size: 180px 180px; animation: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .78  0 0 0 0 .85  0 0 0 0 .95  0 0 0 1.1 -.42'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  }
@keyframes filmgrain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(-2%, 6%); } }
.hero2 > .container { position: relative; }
.hero2grid::after { content: ""; position: absolute; inset: -140px -50vw -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 60% 40%, transparent 55%, rgba(3,5,12,.55)); }
@media (prefers-reduced-motion: reduce) { .hero2.grain::after { animation: none; } }

/* ================= Logo em vidro renderizado (Codex) na abertura ================= */
.glassrender { display: grid; place-items: center; perspective: 1200px; }
.glasstilt { position: relative; width: min(100%, 600px); aspect-ratio: 1; transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease-out); animation: glassfloat 7s ease-in-out infinite; }
@keyframes glassfloat { 50% { translate: 0 -10px; } }
.glassimg { width: 100%; height: 100%; display: block; object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
/* faixa de luz que corre só pelas partes claras do vidro */
.glassshine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .9;
  background: linear-gradient(115deg, transparent 38%, rgba(220,235,255,.55) 48%, rgba(255,255,255,.85) 50%, rgba(220,235,255,.5) 52%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; animation: glassshine 6.5s cubic-bezier(.6,0,.2,1) 1.2s infinite;
  -webkit-mask-image: url("imagens-ia/logo-vidro-v1-640.webp"); mask-image: url("imagens-ia/logo-vidro-v1-640.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-mode: luminance; }
@keyframes glassshine { 0% { background-position: 130% 0; } 45%, 100% { background-position: -40% 0; } }
.glassrender .frame-fallback, .glassrender canvas { display: none; }
@media (max-width: 700px) { .glasstilt { width: min(100%, 360px); } }
@media (prefers-reduced-motion: reduce) { .glasstilt, .glassshine { animation: none; } }

/* Luz que atravessa a abertura inteira: da direita para a esquerda, lenta e sutil (substitui o brilho só no ícone) */
.glassshine { display: none; }
.herosweep { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.herosweep::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 55%;
  background: linear-gradient(105deg, transparent 0%, rgba(169,196,224,.035) 30%, rgba(206,224,245,.075) 50%, rgba(169,196,224,.035) 70%, transparent 100%);
  filter: blur(30px); transform: translateX(200%) skewX(-12deg); animation: herosweep 22s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes herosweep { 0% { transform: translateX(200%) skewX(-12deg); } 70%, 100% { transform: translateX(-110%) skewX(-12deg); } }
@media (prefers-reduced-motion: reduce) { .herosweep::before { animation: none; opacity: 0; } }
.bprivacy { font-size: 12px; color: var(--muted-d2); margin: -6px 0 0; }

/* ================= Celular: cabeçalho sólido e menu que cabe inteiro ================= */
@media (max-width: 700px) {
  .topbar { background: rgba(7,11,26,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(169,196,224,.1); }
  .topbar .nav, .topbar.scrolled .nav { height: auto; padding-top: 14px; padding-bottom: 10px; gap: 10px; }
  .topbar .pill { width: 100%; justify-content: space-between; overflow: visible; padding: 4px; margin-top: 2px; }
  .topbar .pill a { font-size: 9.5px; letter-spacing: .02em; padding: 8px 6px; }
  .topbar .nav > .button { padding: 10px 14px; font-size: 12px; gap: 8px; }
  .hero2grid { padding-top: 150px; }
  html { scroll-padding-top: 120px; }
}
@media (max-width: 360px) { .topbar .pill a { font-size: 8.5px; padding: 8px 4px; } }
/* Tablet: o menu desce para uma segunda linha, como no celular, para o botão do WhatsApp caber */
@media (min-width: 701px) and (max-width: 1000px) {
  .topbar { background: rgba(7,11,26,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(169,196,224,.1); }
  .topbar .nav, .topbar.scrolled .nav { display: flex; justify-content: space-between; align-items: center; height: auto; flex-wrap: wrap; padding: 16px 0 12px; gap: 12px; }
  .topbar .pill { position: static; transform: none; order: 3; width: 100%; justify-content: space-between; margin: 0; }
  .topbar .pill a { font-size: 11px; padding: 9px 12px; }
  .hero2grid { padding-top: 170px; }
  html { scroll-padding-top: 130px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .servicegrid { grid-template-columns: 1fr; gap: 18px; }
  .service { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 26px; align-content: start; }
  .service .servicehead { grid-column: 1 / -1; }
  .service .servicemedia { grid-column: 1; grid-row: 2 / span 3; margin: 18px 0 0; align-self: start; }
  .service h3, .service p, .service .servicetags { grid-column: 2; }
  .service h3 { margin-top: 18px; }
}
@media (max-width: 1000px) {
  .about { grid-template-columns: 1fr !important; gap: 36px; }
  .aboutvisual.stack { max-width: 560px; width: 100%; }
}
@media (max-width: 700px) {
  .contact .fc { display: none; }
  .lylabel { bottom: -14px; }
}