/* Ajustes dos sites (01/11/2026): painel real nos prints, demonstração com as 3 telas juntas,
   celulares inteiros nos cards e a seção de agentes. Carregado depois do site.css. */

/* ---------- Print do painel real (tingido com a cor da marca, como os celulares) ---------- */
.pn{margin:0;width:100%;display:grid;gap:12px;justify-items:center}
.pn .pn-frame{aspect-ratio:auto;display:block;border-radius:12px}
.pn-screen{position:relative;line-height:0;container-type:inline-size;background:#fff}
.pn-screen img{display:block;width:100%;height:auto}
.pn .tint,.pn .ink{position:absolute;inset:0;-webkit-mask-position:center;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:100% 100%;mask-repeat:no-repeat;transition:background .25s}
.pn .tint{background:var(--app)}
.pn .ink{background:var(--app-ink)}
.pn-logo{position:absolute;left:6.75%;top:3.1%;width:4.1%;aspect-ratio:1;border-radius:22%;background:var(--app);color:var(--app-ink);display:grid;place-items:center;font:800 2.2cqw/1 var(--f-display,system-ui),sans-serif;transition:background .25s}
.pn-op{position:absolute;left:83%;top:2.1%;width:8.9%;height:6.4%;background:#fff;display:flex;align-items:center;gap:.7cqw;font:500 1.15cqw/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:#1a1918;white-space:nowrap;overflow:hidden}
.pn-op b{flex:none;height:72%;aspect-ratio:1;border-radius:28%;background:var(--app);color:var(--app-ink);display:grid;place-items:center;font-size:.85cqw;font-weight:800;transition:background .25s}
.pn-op span{overflow:hidden;text-overflow:ellipsis}
.pn figcaption{font-size:.8rem;color:var(--muted);text-align:center;line-height:1.3}
.stage .pn{align-self:center}

/* ---------- Demonstração: passageiro, motorista e painel juntos, na frente de quem testa ---------- */
.demo{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"txt stage" "ctl stage";grid-template-rows:auto 1fr;align-items:start;row-gap:0}
.demo>.sec-head{grid-area:txt}
.demo>.demo-ctl{grid-area:ctl}
.demo>.demo-stage{grid-area:stage}
.demo-stage{display:grid;gap:18px;justify-items:center;align-content:start;padding:clamp(18px,3vw,36px) clamp(12px,3vw,32px)}
.demo-phones{display:flex;justify-content:center;gap:clamp(12px,3vw,28px);width:100%}
.demo-stage .phone.real{--pw:min(200px,36vw)}
.demo-stage .pn{max-width:620px}
.demo-stage .demo-ill{margin:0}
@media (max-width:860px){
  .demo{grid-template-columns:1fr;grid-template-areas:"txt" "stage" "ctl";row-gap:20px}
}
@media (max-width:420px){
  .demo-stage{flex-direction:initial}
  .demo-stage .phone.real{--pw:41vw}
}

/* ---------- Cards do produto: celular inteiro, sem corte no meio ---------- */
.card .thumb{aspect-ratio:auto;padding:24px 20px;align-content:center}
.card .thumb .phone{--pw:170px;margin-bottom:0;align-self:center}
.card .thumb .pn{align-self:center}
.card .thumb .pn figcaption{display:none}

/* ---------- Agência: um agente por cartão ---------- */
.agentes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(12px,2vw,18px);margin:28px 0 0;padding:0;list-style:none}
.agentes li{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px 18px 16px;display:grid;gap:8px;grid-template-rows:auto 1fr auto}
.agentes h4{margin:0;font-size:1.05rem;line-height:1.25;font-family:var(--f-display,inherit)}
.h2like{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;margin:.2em 0 .3em;letter-spacing:-.02em}
.agentes p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.45}
.agentes .sit{justify-self:start;font-size:.75rem;font-weight:700;border-radius:99px;padding:3px 10px;background:var(--stage);color:var(--fg)}
.agentes .sit.prep{background:var(--tbc-bg);color:var(--tbc-fg)}
.agentes-head{margin-top:clamp(36px,5vw,56px)}

/* ---------- Logo do manual v2.0 (aprovada em 01/11/2026); a palavra ao lado usa a fonte do site ---------- */
.logo-v2{display:block;line-height:0}
.logo-v2 img{display:block;height:40px;width:auto}
.logo-sub2{font-family:var(--f-display);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);align-self:flex-end;margin:0 0 6px -2px}
.foot .logo-v2 img{height:36px}
@media (max-width:420px){.top .logo-v2 img{height:34px}.top .logo-sub2{font-size:.62rem;letter-spacing:.12em;margin-bottom:5px}}
/* Preços visíveis nos planos (01/11/2026) */
.plan .price{flex-wrap:wrap}
.plan .price .valor{font-family:var(--f-display);font-size:1.2rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.plan .price .valor small{font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:2px}
.plan li.tema{color:var(--muted)}

/* ---------- Demonstração v2 (02/11/2026): logo abaixo do topo, controles em cima e as 3 telas lado a lado
   (passageiro, painel, motorista); no celular viram um carrossel na mesma seção (deslizar). ---------- */
#demo .demo{grid-template-columns:1fr;grid-template-areas:"txt" "ctl" "stage";grid-template-rows:auto;row-gap:22px}
#demo .demo>.sec-head{margin-bottom:0;max-width:62ch}
#demo .demo-ctl{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start;gap:16px 32px}
#demo .demo-ctl>.demo-read,#demo .demo-ctl>.mock,#demo .demo-ctl>.demo-note{grid-column:1/-1}
#demo .demo-ctl>.demo-note{max-width:none}
#demo .demo-stage{width:100%}
.demo-tres{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr);align-items:center;gap:clamp(14px,2.4vw,32px);width:100%}
.demo-tres .phone.real{--pw:min(230px,100%);justify-self:center}
.demo-tres .pn{max-width:none;width:100%}
.demo-tres:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:12px}
.demo-dica{display:none;margin:0;font-size:.85rem;color:var(--muted);text-align:center}
@media (max-width:860px){
  #demo .demo-ctl{grid-template-columns:1fr}
  .demo-tres{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 10vw 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .demo-tres::-webkit-scrollbar{display:none}
  .demo-item{flex:none;scroll-snap-align:center}
  .demo-tres .phone.real{--pw:min(240px,64vw)}
  .demo-tres .pn{width:min(560px,86vw)}
  .demo-dica{display:block}
}
/* Celular estreito (02/11/2026): logo + Menu + botão não cabem em 390 px com o selo "Tecnologia"; o botão caía para a 2ª linha. */
@media (max-width:480px){.top .logo-sub2{display:none}.top .btn{padding:8px 14px;min-height:0}}
/* O cabeçalho precisa quebrar linha para o menu aberto ocupar a largura toda (com nowrap o menu ficava espremido ao lado do botão em 360-480 px). */
.top .btn{white-space:nowrap}

/* ======================================================================================
   Responsivo no celular (02/11/2026): área de toque de 44 px, texto corrido de pelo menos 14 px,
   espaçamento menor entre seções, QR code só no computador e rodapé fácil de tocar.
   Medido em 360, 390, 412 e 768 px de largura (relatório sites-responsivo-2026-11-02).
   ====================================================================================== */
/* texto das lojas: no celular não há QR code para apontar */
.so-cel{display:none}
@media (max-width:960px){
  /* cabeçalho: logo, Menu e botão com 44 px de altura (a barra continua com 64 px) */
  .top .logo{min-height:44px;align-items:center}
  .top .btn{min-height:44px;padding:0 14px;font-size:.9rem}
  .menu-btn{min-height:44px;min-width:44px}

  /* botões e links que eram baixos demais */
  .giro-pausa,.demo-auto button{min-height:44px;padding:0 20px}
  .demo-auto{font-size:.875rem}
  .links{gap:0 18px;padding-top:6px}
  .links a{display:inline-flex;align-items:center;min-height:44px}
  .plan .price a{min-height:44px;display:inline-flex;align-items:center}
  .sw{width:44px;height:44px;border:4px solid var(--bg);background-clip:padding-box}
  .sw-row{column-gap:0;row-gap:6px}
  .sw-custom{min-height:44px}

  /* rodapé: cada link com 44 px de toque, sem ficar espalhado */
  .foot{padding-block:32px 40px}
  .foot .wrap{gap:14px}
  .foot nav{gap:0 18px}
  .foot nav a,.foot .row a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  .foot .row{gap:0 22px}
  .foot .row>span{padding-block:2px}

  /* textos pequenos sobem para 14 px (celular e tablet) */
  .fld>span{font-size:.9rem}
  .plan .price .valor small{font-size:.875rem}
  .store small{font-size:.75rem}
}
@media (max-width:760px){
  section{padding-block:56px}
  main#conteudo>section:first-child{padding-top:28px}

  /* textos pequenos sobem para 14 px */
  .u-ch small,.pn figcaption,.numeros small,.phone figcaption span,.giro-item figcaption,.demo-dica,.giro-nota,.demo-note,.status{font-size:.875rem}
  .demo-read{font-size:.9rem}
  .tile{padding:20px}

  /* QR code não serve no próprio celular: ficam só os botões das lojas */
  .apps-grid .qr,.apps-col .qr{display:none}
  .so-pc{display:none}.so-cel{display:inline}
}
/* Para motoristas: título e texto primeiro, celulares depois; marcadores da lista com respiro */
@media (max-width:900px){.drive-art{order:0}}
.req li{position:relative;padding-left:1.1em}
.req li::before{content:"\2022";position:absolute;left:.2em}
.req ul{gap:8px}
@media (max-width:520px){.req p{font-size:1rem}}

/* ---------- 05/11/2026 (José): foto de pessoas e animação nas páginas internas do tecnologia ----------
   .topo-foto = foto ao lado do título (multipagina.py, FOTOS_PAGINAS). Entra com animação ao abrir a página
   (só opacity/transform) e a foto se aproxima devagar enquanto a pessoa lê. Tudo para com prefers-reduced-motion. */
.topo-foto{margin-bottom:clamp(36px,5vw,64px)}
.topo-foto .foto.foto-deitada{aspect-ratio:5/4;max-height:none}
.foto.foto-pitch{margin-top:28px;aspect-ratio:1/1;max-width:420px;width:100%;max-height:none}
.foto.foto-pitch img{object-position:50% 20%}
@keyframes topo-txt{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes topo-foto{from{opacity:0;transform:scale(.93) rotate(-1.2deg)}to{opacity:1;transform:none}}
@keyframes foto-respira{from{transform:scale(1)}to{transform:scale(1.07)}}
.topo-foto>.foto{animation:topo-foto 1s cubic-bezier(.2,.7,.2,1) .05s both}
.topo-foto .foto-txt>*{animation:topo-txt .8s cubic-bezier(.2,.7,.2,1) both}
.topo-foto .foto-txt>:nth-child(2){animation-delay:.12s}
.topo-foto .foto-txt>:nth-child(3){animation-delay:.24s}
.topo-foto .foto img,.foto.foto-pitch img{animation:foto-respira 16s ease-in-out 1s infinite alternate}
@media (prefers-reduced-motion:reduce){
  .topo-foto>.foto,.topo-foto .foto-txt>*,.topo-foto .foto img,.foto.foto-pitch img{animation:none}
}
/* Fotos no meio da página inicial (Nosso diferencial e Agentes de IA, 05/11/2026): entram ao rolar (data-anim) */
.meio-foto{margin-bottom:clamp(36px,5vw,64px)}
.agentes-foto{margin-top:clamp(48px,7vw,96px)}
.meio-foto .foto img{animation:foto-respira 16s ease-in-out 1s infinite alternate}
@media (prefers-reduced-motion:reduce){.meio-foto .foto img{animation:none}}
/* Âncora de preço nos planos (05/11/2026, José): valor por dia (mês de 30 dias), selo "Recomendado" no PLUS e
   lugar para o preço cortado ("de ... por ...", .de) quando houver promoção de verdade. */
.price .preco{display:grid;gap:2px;justify-items:start}
.price .de{font-size:.85rem;font-weight:600;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.price .por-dia{font-size:.8rem;font-weight:600;color:var(--accent-text);letter-spacing:0}
.plan.destaque{position:relative;border-color:var(--accent,#EE7028);box-shadow:0 0 0 2px var(--accent,#EE7028),0 24px 48px -32px rgba(238,112,40,.55)}
.plan .selo{position:absolute;top:-13px;left:22px;background:var(--accent,#EE7028);color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:99px}
@media (max-width:760px){.price .por-dia{font-size:.875rem}}
/* "de ... por" (05/11/2026, José: mesmos valores do post P12 da agência; START, PRO e PLUS) */
.price .de-por{font-size:.85rem;font-weight:600;color:var(--muted)}
.price .de-por .de{color:var(--muted)}

/* ---------- Rodapé do tecnologia (05/11/2026, José): claro, tom creme da marca, logo laranja, colunas ----------
   (a versão escura com logo branca foi recusada pelo José). Celular: tudo empilhado, links em 2 colunas, botão largo. */
.foot.foot-v2{position:relative;margin:0;background:linear-gradient(180deg,#fff7f1 0%,#fdeee3 100%);color:#4a443d;border-top:0;padding-block:clamp(48px,6vw,80px) 24px;font-size:.95rem;overflow:hidden}
.foot-v2::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#EE7028,#f59a5c 50%,#EE7028)}
.foot-v2::after{content:"";position:absolute;right:-160px;bottom:-200px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(238,112,40,.14),rgba(238,112,40,0) 70%);pointer-events:none}
.foot-v2 .wrap{position:relative;z-index:1;display:grid;gap:clamp(32px,5vw,52px)}
.foot-v2 .fv-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.foot-v2 .fv-marca{display:grid;gap:14px;justify-items:start;max-width:34ch}
.foot-v2 .fv-marca p{margin:0;color:#2b2621;font-size:1.05rem;line-height:1.5;font-weight:500}
.foot-v2 .logo-v2 img{height:40px}
.foot-v2 .fv-cta{margin-top:6px;box-sizing:border-box;max-width:100%}
.foot-v2 h2{margin:0 0 12px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#c4561a}
.foot-v2 nav.fv-col{display:grid;gap:0;justify-items:start}
.foot-v2 a{color:#2b2621;text-decoration:none;transition:color .2s}
.foot-v2 a:hover,.foot-v2 a:focus-visible{color:#c4561a}
.foot-v2 nav.fv-col a{min-height:40px;display:inline-flex;align-items:center}
.foot-v2 .fv-contato{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.foot-v2 .fv-contato li{display:grid;gap:2px}
.foot-v2 .fv-rot{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a8178}
.foot-v2 .fv-contato a,.foot-v2 .fv-contato li>span:last-child{min-height:28px;display:inline-flex;align-items:center;color:#17140f;font-weight:700}
.foot-v2 .fv-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;padding-top:20px;border-top:1px solid rgba(196,86,26,.18);font-size:.85rem;color:#6b625a}
.foot-v2 .fv-legal{display:flex;flex-wrap:wrap;gap:0 22px}
.foot-v2 .fv-legal a,.foot-v2 .linkbtn{color:#6b625a;font-size:.85rem;min-height:40px;display:inline-flex;align-items:center}
.foot-v2 .linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.foot-v2 .linkbtn[hidden]{display:none}
.foot-v2 :focus-visible{outline:2px solid #EE7028;outline-offset:3px;border-radius:4px}
@media (prefers-color-scheme:dark){.foot.foot-v2{background:linear-gradient(180deg,#fff7f1 0%,#fdeee3 100%)}}
@media (max-width:900px){.foot-v2 .fv-top{grid-template-columns:1fr 1fr}.foot-v2 .fv-marca{grid-column:1/-1;max-width:none}}
@media (max-width:560px){
  .foot.foot-v2{padding-block:40px 20px}
  .foot-v2 .wrap{gap:28px}
  .foot-v2 .fv-top{grid-template-columns:1fr;gap:28px}
  .foot-v2 .fv-marca{gap:12px}
  .foot-v2 .fv-cta{width:100%;justify-content:center}
  .foot-v2 nav.fv-col{grid-template-columns:1fr 1fr;column-gap:16px}
  .foot-v2 nav.fv-col h2{grid-column:1/-1}
  .foot-v2 .fv-contato{gap:10px}
  .foot-v2 .fv-base{flex-direction:column;align-items:flex-start;gap:4px}
  .foot-v2 .fv-legal{flex-direction:column;gap:0}
}
/* ---------- Cabeçalho do tecnologia no mesmo tom creme do rodapé (05/11/2026, José) ---------- */
.top.top-v2{background:linear-gradient(180deg,rgba(255,247,241,.94),rgba(253,238,227,.94));border-bottom:0;box-shadow:0 10px 30px -24px rgba(196,86,26,.45)}
.top.top-v2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#EE7028,#f59a5c 50%,#EE7028);pointer-events:none}
.top-v2 .nav a{color:#4a443d}
.top-v2 .nav a:hover{color:#c4561a}
.top-v2 .nav a[aria-current="page"]{color:#17140f}
.top-v2 .menu-btn{background:#fff;border-color:rgba(196,86,26,.25);color:#17140f}
@media (max-width:960px){.top-v2 .nav a{border-top-color:rgba(196,86,26,.15)}}
@media (prefers-color-scheme:dark){.top.top-v2{background:linear-gradient(180deg,rgba(255,247,241,.96),rgba(253,238,227,.96))}.top-v2 .logo{color:#17140f}}
/* O body tinha a margem padrão do navegador (8 px) e o html/body cortam o que passa da borda (overflow-x:clip):
   no tecnologia a margem sai, para o cabeçalho e o rodapé irem de ponta a ponta. */
body:has(.top-v2){margin:0}
/* linha laranja do cabeçalho mais suave (José, 05/11) */
.top.top-v2::after{height:2px;opacity:.35}
/* No lugar das linhas (José, 05/11): o laranja vai sumindo até ficar claro, em degradê.
   Rodapé: do topo para baixo. Cabeçalho: da borda de baixo para cima. */
.foot-v2::before{height:72px;background:linear-gradient(180deg,rgba(238,112,40,.22),rgba(238,112,40,0))}
.top.top-v2::after{height:22px;opacity:1;background:linear-gradient(0deg,rgba(238,112,40,.2),rgba(238,112,40,0))}
/* Degradê bem leve, quase sumindo até encontrar o branco (José, 05/11) */
.foot.foot-v2{background:linear-gradient(180deg,#fff8f3 0%,#ffffff 100%)}
.foot-v2::before{height:140px;background:linear-gradient(180deg,rgba(238,112,40,.10),rgba(238,112,40,.03) 45%,rgba(238,112,40,0))}
.foot-v2::after{opacity:.5}
.top.top-v2{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,248,243,.96))}
.top.top-v2::after{height:28px;background:linear-gradient(0deg,rgba(238,112,40,.10),rgba(238,112,40,.03) 45%,rgba(238,112,40,0))}
@media (prefers-color-scheme:dark){.foot.foot-v2{background:linear-gradient(180deg,#fff8f3 0%,#ffffff 100%)}.top.top-v2{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,248,243,.97))}}
/* Invertido (José, 05/11): cabeçalho com o laranja em cima e o branco embaixo; rodapé com o branco em cima e o
   laranja embaixo. Sem faixas nas bordas. */
.top.top-v2{background:linear-gradient(180deg,rgba(252,226,206,.97) 0%,rgba(255,244,236,.97) 55%,rgba(255,255,255,.97) 100%)}
.top.top-v2::after{display:none}
.foot.foot-v2{background:linear-gradient(180deg,#ffffff 0%,#fff6ef 55%,#fce2ce 100%)}
.foot-v2::before{display:none}
@media (prefers-color-scheme:dark){.top.top-v2{background:linear-gradient(180deg,rgba(252,226,206,.98) 0%,rgba(255,244,236,.98) 55%,rgba(255,255,255,.98) 100%)}.foot.foot-v2{background:linear-gradient(180deg,#ffffff 0%,#fff6ef 55%,#fce2ce 100%)}}
/* bhmob.com.br, seção do motorista (José, 05/11): sem o fundo preto; claro, no tom da marca */
.u-drive{background:linear-gradient(180deg,#fff7f1 0%,#ffffff 100%);color:#17140f;--fg:#17140f;--muted:#5f5850;--line:#ebe4dd;--panel:#ffffff;--stage:#f6f1ec;--bg:#ffffff;--accent-text:#c4561a}
.u-drive::before{background:radial-gradient(closest-side,rgba(238,112,40,.12),transparent)}