/* =========================================================
   Construtech v2 — base do projeto Lovable (azul-marinho + Sora)
   com as seções animadas da versão 1. Carrega depois de site.css.
   ========================================================= */
:root {
  --navy: #0b1638;
  --navy-2: #13235a;
  --ciano: #3ec3ea;
  --grad: linear-gradient(120deg, #2b6cf5, #3ec3ea);
  --grad-escuro: radial-gradient(ellipse at top, #1b2f7a, var(--navy) 70%);
  --titulo: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
}
h1, h2, h3, h4, .titulo, .hero__titulo, .marca__nome { font-family: var(--titulo); }
.titulo--menor { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0; }

/* ---------- Topo azul-marinho ---------- */
.topo.is-rolado .topo__barra { background: rgba(11, 22, 56, .88); border-color: rgba(255,255,255,.08); box-shadow: 0 14px 40px -18px rgba(0,0,0,.6); }
.topo.is-rolado .marca { color: #fff; }
.topo.is-rolado .marca__nome b { color: var(--ciano); }
.topo.is-rolado .menu > a:not(.btn), .topo.is-rolado .menu__abre { color: rgba(255,255,255,.82); }
.topo.is-rolado .menu > a:not(.btn):hover, .topo.is-rolado .menu > a.is-atual, .topo.is-rolado .menu__abre:hover, .topo.is-rolado .menu__abre.is-atual { color: #fff; background: rgba(255,255,255,.1); }
@media (min-width: 901px) {
  .menu { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px; backdrop-filter: blur(8px); }
  .menu__cta { margin-left: 6px; }
}
.menu__grupo { position: relative; }
.menu__abre { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.86); font-weight: 600; font-size: .93rem; padding: 10px 14px; border-radius: 999px; transition: background .25s, color .25s; }
.menu__abre .ic { width: .9em; height: .9em; transition: transform .3s; }
.menu__abre:hover, .menu__abre.is-atual { color: #fff; background: rgba(255,255,255,.12); }
.menu__sub { position: absolute; top: calc(100% + 12px); left: 50%; width: 330px; transform: translate(-50%, 8px); background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 30px 60px -20px rgba(5, 12, 40, .55); opacity: 0; visibility: hidden; transition: all .3s var(--suave-curva); }
.menu__sub::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.menu__grupo:hover .menu__sub, .menu__grupo:focus-within .menu__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.menu__grupo:hover .menu__abre .ic { transform: rotate(180deg); }
.menu__sub a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; color: var(--tinta); transition: background .2s; }
.menu__sub a:hover, .menu__sub a.is-atual { background: var(--gelo); }
.menu__sub a > .ic { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--grad); color: #fff; flex: none; }
.menu__sub strong { display: block; font-family: var(--titulo); font-size: .95rem; }
.menu__sub small { display: block; font-size: .78rem; color: var(--suave); line-height: 1.35; margin-top: 2px; }

/* ---------- Banner: vídeo real flutuando ---------- */
.hero__video { position: absolute; z-index: 4; right: max(20px, calc((100vw - 1200px) / 2)); top: 50%; width: 230px; margin: 0; transform: translateY(-46%) rotate(3deg); border-radius: 26px; padding: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); animation: video-flutua 7s ease-in-out infinite; }
.hero__video video { width: 100%; aspect-ratio: 9 / 15; object-fit: cover; border-radius: 19px; background: #000; }
.hero__video figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; color: #fff; font-size: .82rem; font-weight: 700; line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.hero__ao-vivo { display: inline-flex; align-items: center; gap: 6px; background: rgba(7,10,18,.65); padding: 5px 10px; border-radius: 999px; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; text-shadow: none; }
.hero__ao-vivo i, .sobre2__real span i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 0 rgba(255,59,78,.7); animation: ponto-vermelho 1.6s infinite; display: inline-block; }
@keyframes ponto-vermelho { 70% { box-shadow: 0 0 0 8px rgba(255,59,78,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,78,0); } }
@keyframes video-flutua { 50% { transform: translateY(calc(-46% - 14px)) rotate(1deg); } }
.hero__titulo { font-size: clamp(2.4rem, 5.4vw, 4.9rem); letter-spacing: -.035em; }
.cena::before { background: linear-gradient(100deg, rgba(8, 14, 40, .94) 0%, rgba(12, 24, 70, .72) 45%, rgba(12, 24, 70, .12) 100%), linear-gradient(0deg, rgba(8, 14, 40, .8), transparent 40%); }
.migalha { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 18px; flex-wrap: wrap; opacity: 0; animation: subir .8s .1s var(--suave-curva) forwards; }
.migalha a:hover { color: #fff; }
.migalha strong { color: var(--ciano); }
.hero__controles { bottom: 40px; }
.faixas { display: none; }

/* ---------- Faixa de números ---------- */
.numeros-faixa { background: var(--navy); padding: 46px 0; position: relative; }
.numeros-faixa::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(62,195,234,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(62,195,234,.08) 1px, transparent 1px); background-size: 48px 48px; }
.numeros-faixa__grade { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.numeros-faixa strong { display: block; font-family: var(--titulo); font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numeros-faixa__grade > div > span { display: block; color: rgba(255,255,255,.7); font-size: .9rem; margin-top: 8px; }

/* ---------- Sobre (duas imagens) ---------- */
.sobre2__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.sobre2__fotos { position: relative; padding-bottom: 60px; }
.sobre2__foto { width: 100%; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(43,108,245,.6); aspect-ratio: 3 / 2; object-fit: cover; }
.sobre2__real { position: absolute; right: -12px; bottom: 0; width: 42%; border-radius: 22px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--sombra-forte); animation: flutuar-p 5s ease-in-out infinite; background: #000; }
.sobre2__real video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sobre2__real span { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: .72rem; font-weight: 700; background: rgba(7,10,18,.65); padding: 5px 10px; border-radius: 999px; }
.sobre2__lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.sobre2__lista li { display: flex; gap: 12px; align-items: center; color: var(--tinta); font-weight: 600; }
.sobre2__lista .ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: rgba(43,108,245,.1); color: var(--azul-vivo); }

/* ---------- Cards de serviço com várias imagens ---------- */
.servico__carrossel { display: block; position: relative; aspect-ratio: 16 / 11; }
.servico__carrossel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.1s ease, transform 6s linear; }
.servico__carrossel img.is-ativa { opacity: 1; transform: scale(1); }
.servico:hover .servico__carrossel img.is-ativa { transform: scale(1.06); }
.servico__pontos { position: absolute; left: 18px; top: 18px; z-index: 2; display: flex; gap: 6px; }
.servico__pontos i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.5); transition: width .4s, background .4s; }
.servico__pontos i.is-ativa { width: 26px; background: #fff; }
.servico__corpo h3 a:hover { color: var(--azul-vivo); }
.servico__minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: -8px 0 20px; }
.servico__minis img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: pointer; transition: transform .3s, box-shadow .3s, opacity .3s; opacity: .85; }
.servico__minis img:hover { transform: translateY(-3px); opacity: 1; box-shadow: 0 10px 20px -10px rgba(16,36,94,.6); }

/* ---------- Faixa de fotos rolando ---------- */
.fotos-rolando { overflow: hidden; padding: 50px 0; display: grid; gap: 18px; background: #fff; }
.fotos-rolando__trilho { display: flex; gap: 18px; width: max-content; animation: trilho 60s linear infinite; }
.fotos-rolando__trilho--volta { animation-direction: reverse; animation-duration: 70s; }
.fotos-rolando img { width: 300px; height: 200px; object-fit: cover; border-radius: 20px; flex: none; }
.fotos-rolando:hover .fotos-rolando__trilho { animation-play-state: paused; }

/* ---------- Mapa em fundo escuro ---------- */
.mapa--escuro { background: var(--grad-escuro); color: rgba(255,255,255,.75); padding-top: clamp(80px, 10vw, 120px); }
.mapa--escuro::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(62,195,234,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(62,195,234,.07) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.mapa--escuro .container { position: relative; }
.mapa--escuro .mapa__grade { grid-template-columns: 1.4fr 1fr; }
.mapa--escuro .mapa__palco { order: 0; }
.mapa--escuro .mapa__palco::before { background: radial-gradient(circle, rgba(62,195,234,.22), transparent 65%); }
.mapa--escuro .uf path { fill: rgba(255,255,255,.1); stroke: var(--navy); stroke-width: 2; }
.mapa--escuro .uf:not(.tem):hover path, .mapa--escuro .uf:not(.tem).is-foco path { fill: rgba(255,255,255,.26); }
.mapa--escuro .uf.tem path { fill: url(#gradUf); }
.mapa--escuro .uf.is-selecionado path { fill: var(--ciano) !important; }
.mapa--escuro .rot text, .mapa--escuro .rot text.fora { fill: rgba(255,255,255,.85); }
.mapa--escuro .rot .guia { stroke: rgba(255,255,255,.35); }
.mapa--escuro .rot .qtd { fill: var(--ciano); }
.mapa--escuro .mapa__dica { background: #fff; color: var(--tinta); }
.mapa--escuro .mapa__dica::after { background: #fff; }
.mapa--escuro .mapa__dica span { color: var(--azul-vivo); }
.mapa__painel { border-radius: 24px; padding: 28px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); margin-bottom: 18px; }
.mapa__painel span { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ciano); }
.mapa__painel strong { display: block; font-family: var(--titulo); color: #fff; font-size: 1.8rem; margin-top: 4px; line-height: 1.15; }
.mapa__painel b { display: block; font-family: var(--titulo); font-size: 3.6rem; line-height: 1; margin-top: 16px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .3s; }
.mapa__painel small { color: rgba(255,255,255,.6); }
.mapa__ufs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.mapa__ufs button { font-size: .76rem; font-weight: 800; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); transition: all .2s; }
.mapa__ufs button.tem { background: var(--azul-vivo); color: #fff; }
.mapa__ufs button:hover { background: rgba(255,255,255,.22); color: #fff; }
.mapa__ufs button.is-ativo { background: var(--ciano); color: var(--navy); }
.mapa--escuro .mapa__legenda { color: rgba(255,255,255,.75); }
.mapa--escuro .leg--sem { background: rgba(255,255,255,.18); }
.mapa--escuro .obras { padding-top: 70px; }
.mapa--escuro .obras__cabeca .titulo { color: #fff; }
.mapa--escuro .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
.mapa--escuro .chip.is-ativo { background: #fff; color: var(--navy); border-color: #fff; }
.mapa--escuro .obras__filtros select { background-color: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }
.mapa--escuro .obras__filtros select option { color: var(--tinta); }
.mapa--escuro .obras__vazio { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.2); }
.mapa--escuro .obras__vazio h3 { color: #fff; }

/* ---------- Por que (lista + foto) ---------- */
.porque2__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.porque2__item { display: flex; gap: 22px; align-items: flex-start; padding: 24px; border-radius: 20px; border: 1px solid var(--linha); background: #fff; box-shadow: 0 12px 30px -20px rgba(11,22,56,.35); margin-top: 16px; transition: border-color .3s, transform .3s; }
.porque2__item:hover { border-color: var(--azul-vivo); transform: translateX(6px); }
.porque2__item span { font-family: var(--titulo); font-size: 2.4rem; font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.porque2__item p { margin: 0; }
.porque2__foto { position: relative; }
.porque2__foto::before { content: ""; position: absolute; inset: -16px; border-radius: 34px; background: var(--grad); opacity: .2; filter: blur(30px); }
.porque2__foto img { position: relative; width: 100%; height: 540px; object-fit: cover; border-radius: 28px; box-shadow: var(--sombra-forte); }

/* ---------- Contato com foto ---------- */
.contato__lado--foto { background: var(--navy); }
.contato__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; z-index: -2; }
.contato__redes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.contato__lado .btn { margin-top: 0; }

/* =========================================================
   Páginas de serviço
   ========================================================= */
.srv-intro__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.srv-intro__texto { font-size: 1.12rem; }
.srv-intro__chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.srv-intro__chips span { padding: 12px 18px; border-radius: 14px; background: var(--gelo); border: 1px solid var(--linha); font-size: .9rem; }
.srv-intro__chips strong { font-family: var(--titulo); font-size: 1.2rem; color: var(--azul-vivo); margin-right: 4px; }
.srv-intro__mosaico { position: relative; height: 460px; }
.srv-intro__mosaico img { position: absolute; object-fit: cover; border-radius: 24px; box-shadow: var(--sombra-forte); transition: transform .6s var(--suave-curva); }
.srv-intro__mosaico .m0 { left: 0; top: 0; width: 64%; height: 72%; }
.srv-intro__mosaico .m1 { right: 0; top: 12%; width: 42%; height: 46%; border: 5px solid #fff; animation: flutuar-p 6s ease-in-out infinite; }
.srv-intro__mosaico .m2 { left: 22%; bottom: 0; width: 46%; height: 40%; border: 5px solid #fff; animation: flutuar-p 6s -3s ease-in-out infinite; }
.srv-intro__mosaico:hover .m0 { transform: scale(1.02); }

.srv-blocos__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.srv-bloco { position: relative; background: #fff; border-radius: 22px; padding: 30px 28px; box-shadow: 0 1px 0 var(--linha), var(--sombra); display: flex; flex-direction: column; overflow: hidden; transition: transform .45s var(--suave-curva), box-shadow .45s; }
.srv-bloco::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--suave-curva); }
.srv-bloco:hover { transform: translateY(-8px); box-shadow: var(--sombra-forte); }
.srv-bloco:hover::after { transform: scaleX(1); }
.srv-bloco__icone { width: 58px; height: 58px; border-radius: 17px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 28px -10px rgba(43,108,245,.7); transition: transform .5s var(--suave-curva); }
.srv-bloco__icone .ic { width: 27px; height: 27px; }
.srv-bloco:hover .srv-bloco__icone { transform: rotate(-8deg) scale(1.08); }
.srv-bloco__num { position: absolute; right: 24px; top: 18px; font-family: var(--titulo); font-size: 3.2rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px rgba(43,108,245,.2); line-height: 1; }
.srv-bloco h3 { font-size: 1.3rem; margin: 20px 0 14px; }
.srv-bloco ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.srv-bloco li { display: flex; gap: 10px; font-size: .93rem; color: var(--tinta); }
.srv-bloco li .ic { color: var(--azul-vivo); margin-top: 3px; }
.srv-bloco .link-seta { margin-top: auto; }

.etapas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; counter-reset: e; }
.etapas::before { content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--linha) 0 10px, transparent 10px 18px); }
.etapas::after { content: ""; position: absolute; top: 34px; left: 8%; height: 2px; width: 84%; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--suave-curva); }
.etapas.is-visivel::after { transform: scaleX(1); }
.etapa { position: relative; text-align: center; padding: 0 6px; }
.etapa__num { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 20px; font-family: var(--titulo); font-weight: 800; font-size: 1.3rem; color: #fff; background: var(--grad); box-shadow: 0 0 0 8px #fff, 0 16px 30px -10px rgba(43,108,245,.8); position: relative; z-index: 1; }
.etapa h3 { font-size: 1.15rem; margin-bottom: 8px; }
.etapa p { font-size: .92rem; margin: 0; }

.secao--escura { background: var(--grad-escuro); color: rgba(255,255,255,.75); }
.secao--escura .titulo { color: #fff; }
.srv-galeria__cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.chips--escuro .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
.chips--escuro .chip.is-ativo { background: #fff; color: var(--navy); border-color: #fff; }
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 14px; }
.mosaico__item { position: relative; overflow: hidden; border-radius: 20px; background: #000; text-align: left; transition: transform .4s var(--suave-curva), box-shadow .4s, opacity .4s; }
.mosaico__item:nth-child(5n+1) { grid-row: span 2; }
.mosaico__item--video { grid-row: span 2; }
.mosaico__item:nth-child(7n+3) { grid-column: span 2; }
.mosaico__item img, .mosaico__item video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--suave-curva), filter .4s; }
.mosaico__item:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -20px rgba(0,0,0,.8); }
.mosaico__item:hover img, .mosaico__item:hover video { transform: scale(1.06); }
.mosaico__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,10,30,.85)); }
.mosaico__legenda { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.3; transform: translateY(6px); transition: transform .3s; }
.mosaico__item:hover .mosaico__legenda { transform: none; }
.mosaico__selo { position: absolute; z-index: 1; top: 12px; left: 12px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.mosaico__selo--real { background: #fff; color: var(--azul); }
.mosaico__selo--ilu { background: rgba(7,10,18,.6); color: rgba(255,255,255,.85); backdrop-filter: blur(6px); }
.mosaico__play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #fff; transition: transform .3s, background .3s; }
.mosaico__play .ic { width: 24px; height: 24px; fill: #fff; }
.mosaico__item:hover .mosaico__play { transform: scale(1.1); background: var(--azul-vivo); }
.mosaico__item.is-oculto { display: none; }
.srv-galeria__insta { text-align: center; margin: 34px 0 0; }
.srv-vazio { text-align: center; padding: 40px; }

.srv-outros__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.srv-outro { position: relative; display: flex; align-items: flex-end; min-height: 300px; border-radius: 26px; overflow: hidden; padding: 28px; color: #fff; isolation: isolate; }
.srv-outro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--suave-curva); }
.srv-outro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,14,40,.1), rgba(8,14,40,.88)); }
.srv-outro:hover img { transform: scale(1.07); }
.srv-outro__icone { position: absolute; top: 24px; left: 24px; width: 54px; height: 54px; border-radius: 16px; background: var(--grad); display: grid; place-items: center; }
.srv-outro__icone .ic { width: 26px; height: 26px; }
.srv-outro__texto small { font-weight: 800; color: var(--ciano); letter-spacing: .12em; }
.srv-outro__texto strong { display: block; font-family: var(--titulo); font-size: 1.8rem; }
.srv-outro__texto em { display: block; font-size: .92rem; color: rgba(255,255,255,.78); max-width: 420px; }
.srv-outro__seta { position: absolute; right: 24px; bottom: 28px; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); display: grid; place-items: center; transition: all .3s; }
.srv-outro:hover .srv-outro__seta { background: #fff; color: var(--navy); transform: translateX(4px); }

.pagina-404 { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 140px 0 80px; background: var(--grad-escuro); color: rgba(255,255,255,.75); }
.pagina-404 .titulo { color: #fff; }
.pagina-404__links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.pagina-404 .btn--contorno { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.topo--solido .topo__barra { background: rgba(11, 22, 56, .88); }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .hero__video { width: 180px; }
  .srv-blocos__grade { grid-template-columns: 1fr 1fr; }
  .mosaico { grid-template-columns: repeat(3, 1fr); }
  .mapa--escuro .mapa__grade { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero__video { display: none; }
  .menu__grupo { display: contents; }
  .menu__abre { color: #fff; font-size: 1.5rem; font-weight: 800; }
  .menu__abre .ic { display: none; }
  .menu__sub { position: static; transform: none; opacity: 1; visibility: visible; width: auto; background: none; box-shadow: none; padding: 0; display: flex; gap: 6px; }
  .menu__sub a { padding: 8px 12px; background: rgba(255,255,255,.08); color: #fff; border-radius: 999px; }
  .menu__sub a > .ic, .menu__sub small { display: none; }
  .menu__sub strong { font-size: .85rem; }
  .sobre2__grade, .porque2__grade, .srv-intro__grade { grid-template-columns: 1fr; }
  .porque2__foto img { height: 380px; }
  .etapas { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .etapas::before, .etapas::after { display: none; }
  .srv-intro__mosaico { height: 380px; }
}
@media (max-width: 640px) {
  .numeros-faixa__grade { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .srv-blocos__grade, .srv-outros__grade { grid-template-columns: 1fr; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .mosaico__item:nth-child(7n+3) { grid-column: auto; }
  .fotos-rolando img { width: 220px; height: 150px; }
  .sobre2__real { width: 46%; right: 0; }
  .etapas { grid-template-columns: 1fr; }
  .srv-intro__mosaico { height: 300px; }
}

/* Texto do banner nunca passa por baixo do vídeo flutuante */
@media (min-width: 1081px) { .hero__conteudo { padding-right: 300px; } }
@media (min-width: 901px) and (max-width: 1080px) { .hero__conteudo { padding-right: 230px; } }
.hero__titulo { font-size: clamp(2.3rem, 5vw, 4.4rem); }
.hero__titulo .linha > span { max-width: 100%; }

/* Grade das especialidades sem card sobrando sozinho */
@media (min-width: 1081px) {
  .srv-blocos__grade[data-qtd="4"] { grid-template-columns: repeat(4, 1fr); }
  .srv-blocos__grade[data-qtd="7"] .srv-bloco:last-child { grid-column: span 3; }
  .srv-blocos__grade[data-qtd="5"] .srv-bloco:nth-child(n+4) { grid-column: span 1; }
}
@media (min-width: 1081px) { .srv-blocos__grade[data-qtd="5"] { grid-template-columns: repeat(6, 1fr); } .srv-blocos__grade[data-qtd="5"] .srv-bloco { grid-column: span 2; } .srv-blocos__grade[data-qtd="5"] .srv-bloco:nth-child(n+4) { grid-column: span 3; } }

/* Galeria em colunas (estilo Pinterest): sem buracos, cada foto no seu formato */
.mosaico { display: block; columns: 4 240px; column-gap: 14px; }
.mosaico__item { display: block; width: 100%; margin: 0 0 14px; break-inside: avoid; grid-row: auto !important; grid-column: auto !important; }
.mosaico__item img { height: auto; min-height: 160px; max-height: 520px; }
.mosaico__item video { height: auto; aspect-ratio: 9 / 14; }
@media (max-width: 640px) { .mosaico { columns: 2 140px; column-gap: 10px; } .mosaico__item { margin-bottom: 10px; } }

/* =========================================================
   Banner sem o vídeo: texto volta a ocupar a largura
   ========================================================= */
.hero__conteudo { padding-right: 0 !important; }
.hero__conteudo > * { max-width: 820px; }

/* =========================================================
   Perguntas frequentes + celular com reels do Instagram
   ========================================================= */
.faq-insta { background: #fff; overflow: hidden; }
.faq-insta__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.faq__lista { display: grid; gap: 12px; margin-top: 8px; }
.faq__item { border: 1px solid var(--linha); border-radius: 18px; background: #fff; transition: border-color .3s, box-shadow .3s, background .3s; }
.faq__item[open] { border-color: rgba(43,108,245,.45); box-shadow: 0 18px 40px -26px rgba(43,108,245,.7); background: linear-gradient(180deg, #fff, var(--gelo)); }
.faq__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__num { font-family: var(--titulo); font-weight: 800; font-size: .9rem; color: var(--azul-vivo); width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(43,108,245,.08); transition: background .3s, color .3s; }
.faq__item[open] .faq__num { background: var(--grad); color: #fff; }
.faq__pergunta { font-family: var(--titulo); font-weight: 700; color: var(--tinta); font-size: 1.02rem; line-height: 1.35; }
.faq__sinal { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--linha); position: relative; transition: transform .35s var(--suave-curva), border-color .3s; }
.faq__sinal::before, .faq__sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--azul-vivo); border-radius: 2px; transition: transform .35s var(--suave-curva); }
.faq__sinal::after { transform: rotate(90deg); }
.faq__item[open] .faq__sinal { transform: rotate(180deg); border-color: var(--azul-vivo); }
.faq__item[open] .faq__sinal::after { transform: rotate(0deg); }
.faq__resposta { padding: 0 20px 20px 72px; animation: faq-abre .45s var(--suave-curva); }
.faq__resposta p { margin: 0; }
@keyframes faq-abre { from { opacity: 0; transform: translateY(-8px); } }
.faq__mais { margin-top: 22px; font-weight: 600; color: var(--tinta); }
.faq__mais a { display: inline-flex; align-items: center; gap: 6px; color: #128c4b; font-weight: 700; margin-left: 4px; }
.faq__mais a .ic { color: #25d366; }

.insta { display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.insta::before { content: ""; position: absolute; width: 420px; height: 420px; top: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(62,195,234,.35), rgba(43,108,245,.12) 45%, transparent 70%); filter: blur(10px); z-index: 0; animation: brilho 9s ease-in-out infinite; }
.celular { position: relative; z-index: 1; width: 300px; padding: 12px; border-radius: 48px; background: linear-gradient(145deg, #1c2233, #05070d); box-shadow: 0 0 0 2px #2a3142, 0 50px 90px -30px rgba(11,22,56,.75), inset 0 0 0 1px rgba(255,255,255,.06); transform: rotate(-2deg); transition: transform .6s var(--suave-curva); }
.celular:hover { transform: rotate(0deg) translateY(-6px); }
.celular::before { content: ""; position: absolute; top: 22px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 3; }
.celular::after { content: ""; position: absolute; right: -4px; top: 120px; width: 4px; height: 60px; border-radius: 0 4px 4px 0; background: #2a3142; }
.celular__tela { position: relative; aspect-ratio: 9 / 19; border-radius: 37px; overflow: hidden; background: #000; isolation: isolate; }
.celular__tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.celular__tela::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 62%, rgba(0,0,0,.75) 100%); pointer-events: none; }
.celular__barras { position: absolute; top: 56px; left: 14px; right: 14px; display: flex; gap: 4px; z-index: 2; }
.celular__barras i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.celular__barras b { display: block; height: 100%; width: 0; background: #fff; }
.celular__topo { position: absolute; top: 68px; left: 14px; right: 14px; display: flex; align-items: center; gap: 10px; color: #fff; z-index: 2; }
.celular__topo img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 2px; box-shadow: 0 0 0 2px #e1306c; }
.celular__topo strong { display: block; font-size: .82rem; }
.celular__topo small { font-size: .7rem; opacity: .8; }
.celular__topo a { margin-left: auto; font-size: .75rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.6); }
.celular__topo a:hover { background: #fff; color: #000; }
.celular__som { position: absolute; z-index: 4; top: 110px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); font-size: 1rem; }
.celular__som .som-on, .celular.com-som .celular__som .som-off { display: none; }
.celular.com-som .celular__som .som-on { display: inline; }
.celular__lado { position: absolute; z-index: 2; right: 12px; bottom: 110px; display: grid; gap: 18px; color: #fff; font-size: 1.35rem; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.celular__lado span { animation: flutuar-p 3s ease-in-out infinite; }
.celular__lado span:nth-child(2) { animation-delay: -1s; } .celular__lado span:nth-child(3) { animation-delay: -2s; }
.celular__legenda { position: absolute; z-index: 2; left: 14px; right: 60px; bottom: 26px; color: #fff; font-size: .82rem; line-height: 1.4; }
.celular__toque { position: absolute; z-index: 3; top: 140px; bottom: 90px; width: 35%; }
.celular__toque--ant { left: 0; } .celular__toque--prox { right: 0; }
.insta__lista { position: relative; z-index: 1; display: flex; gap: 10px; }
.insta__mini { width: 86px; display: grid; gap: 6px; justify-items: center; font-size: .72rem; font-weight: 700; color: var(--texto); text-align: center; }
.insta__mini img, .insta__mini--perfil .ic { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; padding: 3px; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); transition: transform .3s; }
.insta__mini--perfil .ic { padding: 18px; color: #fff; }
.insta__mini.is-ativo img { transform: scale(1.08); box-shadow: 0 10px 20px -8px rgba(238,42,123,.6); }
.insta__mini:hover img, .insta__mini:hover .ic { transform: scale(1.08); }

@media (max-width: 900px) {
  .faq-insta__grade { grid-template-columns: 1fr; }
  .insta { order: -1; }
  .celular { width: 260px; }
}
@media (max-width: 640px) {
  .faq__resposta { padding-left: 20px; }
  .faq__item summary { gap: 12px; padding: 16px; }
}