/* =========================================================
   Topo vermelho em todas as páginas
   Menu + topo formam um só bloco vermelho (o mesmo da página
   inicial). Ao rolar, o menu fica branco e as seções se
   encaixam. Mobile primeiro.
   ========================================================= */
:root{--topo-h:116px;--tv-ease:cubic-bezier(.2,.75,.15,1);--tv-r1:#D2202C;--tv-r2:#B3141C;--tv-r3:#7E0C13;--tv-tinta:#14181D}
@media (min-width:561px){:root{--topo-h:125px}}

/* páginas que começam com topo vermelho */
body:has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) .rapido{display:none}

/* ---------- fundo vermelho comum ---------- */
.hx,.bhero,.phero,.art-h,.e404{
  --tv-fundo:radial-gradient(80% 70% at 0% 0%,#E0333C 0%,rgba(224,51,60,0) 62%),linear-gradient(165deg,var(--tv-r1) 0%,var(--tv-r2) 58%,var(--tv-r3) 100%)}
.bhero,.phero,.art-h,.e404{position:relative;isolation:isolate;color:#fff;background:var(--tv-fundo);border-bottom:0;
  margin-top:calc(-1 * var(--topo-h))}
.bhero:before,.phero:before,.art-h:before,.e404:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bhero{padding:calc(var(--topo-h) + 36px) 0 64px}
.phero{padding-top:var(--topo-h)}
.phero .w{padding-top:30px;padding-bottom:64px}
.art-h{padding:calc(var(--topo-h) + 30px) 0 60px}
.e404{padding:calc(var(--topo-h) + 80px) 0 110px}

/* textos sobre o vermelho */
.bhero h1,.phero h1,.art-h h1,.e404 h1{color:#fff;letter-spacing:-.04em}
.phero h1 em{color:#fff;font-style:normal;padding:0 .04em;background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) no-repeat 0 90%/100% .36em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bhero p,.phero .lead,.e404 p{color:rgba(255,255,255,.86)}
.bhero .trilha,.phero .trilha,.art-h .trilha{color:rgba(255,255,255,.7)}
.bhero .trilha a,.phero .trilha a,.art-h .trilha a{color:#fff}
.art-h .meta{color:rgba(255,255,255,.78)}
.art-h .tag{background:rgba(255,255,255,.16);color:#fff}
.phero .fato{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.phero .fato b,.phero .fato .pz-v{color:#fff}
.phero .fato span,.phero .fato p{color:rgba(255,255,255,.78)}
.phero .fato.ph b{color:var(--tv-tinta)}
.phero .status span{color:#fff}
.phero .resumo{background:rgba(0,0,0,.14);border-left-color:#fff;color:rgba(255,255,255,.92)}
.phero .resumo strong{color:rgba(255,255,255,.75)}
.phero .resumo a{color:#fff}
.phero .agenda{box-shadow:0 40px 80px -40px rgba(40,0,4,.75),0 0 0 1px rgba(255,255,255,.08)}
.bhero .bbusca{background:#fff;border-color:transparent;box-shadow:0 24px 50px -24px rgba(60,0,6,.65)}
.e404 .btn-c{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* imagem destacada logo abaixo do topo das páginas de serviço */
.phero+.pcapa{background:linear-gradient(var(--tv-r3) 0 50%,#fff 50%)}
.phero:has(+.pcapa) .w{padding-bottom:40px}

/* a seção seguinte sobe como uma folha por cima do vermelho */
:is(.bhero,.phero)+section:not(.pcapa){position:relative;z-index:2;margin-top:-28px;border-radius:28px 28px 0 0;background-color:var(--branco)}
:is(.bhero,.phero)+section.cinza{background-color:var(--fundo)}
.art-h+.art{position:relative;z-index:2}

/* ---------- menu fundido ao topo (só com JS, para nunca ficar ilegível ao rolar) ---------- */
.hx-js body:has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)){--tv-on:1}
.hx-js body:has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) .util{background:transparent;color:rgba(255,255,255,.82);position:relative;z-index:31}
.hx-js body:has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) .util a{color:#fff}
.hx-js body:has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) header.topo-site{background:transparent;border-bottom-color:rgba(255,255,255,.16);transition:background-color .4s,border-color .4s,box-shadow .4s}
header.topo-site .logo img.logo-br{display:none}
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) header.topo-site .logo img:first-child{display:none}
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) header.topo-site .logo .logo-br{display:block}
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) header.topo-site nav a{color:rgba(255,255,255,.92)}
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) header.topo-site nav a:hover,
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) header.topo-site nav a.on{color:#fff;background:rgba(255,255,255,.14)}
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) .busca-btn{border-color:rgba(255,255,255,.32);color:#fff}
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) header.topo-site .btn-wa{background:#fff;color:var(--tv-tinta);box-shadow:none}
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) header.topo-site .btn-wa svg{color:#18A957}
.hx-js body:not(.hx-rolou):has(:where(main#conteudo>:is(.hx,.bhero,.phero,.e404):first-child,main#conteudo>article:first-child>.art-h)) .mm summary{color:#fff;border-color:rgba(255,255,255,.35)}
.hx-js body.hx-rolou header.topo-site{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom-color:var(--borda);box-shadow:0 10px 30px -20px rgba(16,24,40,.35)}

/* ---------- entrada do topo ---------- */
.bhero .w>*,.phero .w>div>*,.art-h .w>*,.e404 .w>*{animation:tvEntra .9s var(--tv-ease) both}
.bhero .w>:nth-child(2),.phero .w>div>:nth-child(2),.art-h .w>:nth-child(2),.e404 .w>:nth-child(2){animation-delay:.08s}
.bhero .w>:nth-child(3),.phero .w>div>:nth-child(3),.art-h .w>:nth-child(3),.e404 .w>:nth-child(3){animation-delay:.16s}
.bhero .w>:nth-child(n+4),.phero .w>div>:nth-child(n+4),.art-h .w>:nth-child(n+4),.e404 .w>:nth-child(n+4){animation-delay:.24s}
.phero .agenda{animation:tvSobe 1.1s var(--tv-ease) .2s both}
@keyframes tvEntra{from{opacity:0;transform:translateY(18px)}}
@keyframes tvSobe{from{opacity:0;transform:translateY(40px) scale(.98)}}

/* ---------- entrada ao rolar (encaixe em 3D) ---------- */
.rv{opacity:0;transform:perspective(1100px) translate3d(0,56px,-40px) rotateX(9deg);transform-origin:50% 0;transition:opacity .8s ease,transform 1.1s var(--tv-ease);transition-delay:calc(var(--rv-i,0) * 80ms)}
.rv.in{opacity:1;transform:none}

@media (min-width:901px){
  .bhero{padding:calc(var(--topo-h) + 52px) 0 80px}
  .art-h{padding:calc(var(--topo-h) + 44px) 0 72px}
  .phero .w{padding-bottom:80px}
  :is(.bhero,.phero)+section:not(.pcapa){margin-top:-32px;border-radius:32px 32px 0 0}
}

@media (prefers-reduced-motion:reduce){
  .bhero .w>*,.phero .w>div>*,.art-h .w>*,.e404 .w>*,.phero .agenda{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}

/* cartões de serviço da página inicial: ícones em vez de números */
.serv .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* blocos brancos dentro do topo vermelho mantêm o texto escuro */
.phero .agenda,.bhero .bbusca,.bhero .bbusca input{color:var(--txt)}
.bhero .bbusca svg{color:var(--sub)}
.bhero .bbusca input::placeholder{color:#7D838C}

/* celular/tablet: botão "Agendar" encostado no menu, à direita (antes ficava no meio) */
@media (max-width:1100px){
  header.topo-site .w{justify-content:flex-start;gap:10px}
  header.topo-site .logo{margin-right:auto}
}
@media (max-width:560px){
  header.topo-site .btn-wa.p{min-height:44px;padding:0 14px;font-size:14.5px;gap:8px}
  header.topo-site .btn-wa.p svg{width:18px;height:18px}
  .mm summary{width:44px;height:44px}
}

/* iPhone: campos com letra menor que 16px fazem o Safari dar zoom ao tocar,
   e com zoom as barras fixas (topo e "Ligar / Agendar") descolam da tela */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:900px){
  input,select,textarea{font-size:max(16px,1em)!important}
  .barra-m{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}