/* Refino visual (30/10/2026): fontes no próprio site, cabeçalho, título de cada página, entrada das seções,
   3D leve e transição entre páginas. Tudo que se mexe para com prefers-reduced-motion. Copiado para
   usuario/assets e tecnologia/assets por tools/multipagina.py. */
/* Fonte única (decisão do José, 01/11/2026): Plus Jakarta Sans (OFL, tools/fontes/OFL.txt), variável 400-800,
   servida pelo próprio site. "Plus Jakarta Sans Reserva" = Arial com as métricas da Jakarta (sem salto ao trocar). */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans Reserva";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");size-adjust:106.08%;ascent-override:97.85%;descent-override:20.93%;line-gap-override:0%}
:root{--f-display:"Plus Jakarta Sans","Plus Jakarta Sans Reserva",system-ui,sans-serif;--f-body:"Plus Jakarta Sans","Plus Jakarta Sans Reserva",system-ui,sans-serif}

/* ---------- Cabeçalho ---------- */
.top{view-transition-name:topo;transition:box-shadow .3s ease,background-color .3s ease}
.rolou .top{box-shadow:0 10px 30px -22px rgba(0,0,0,.45)}
.logo .bmark{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logo:hover .bmark{transform:rotate(-8deg) scale(1.06)}
.nav a{position:relative;text-decoration:none}
.nav a[aria-current="page"]{text-decoration:none}
@media (min-width:961px){
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .nav a:hover::after{transform:scaleX(.6)}
  .nav a[aria-current="page"]::after{transform:scaleX(1)}
}
@media (max-width:960px){
  .nav a[aria-current="page"]{color:var(--accent-text);box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
  .nav.open{animation:menu-abre .28s cubic-bezier(.2,.8,.2,1)}
}
@keyframes menu-abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Celular: logo, Menu e botão cabem numa linha só */
@media (max-width:520px){
  .top .wrap{column-gap:10px}
  .top .btn{margin-left:4px;padding:8px 12px;font-size:.85rem}
  .menu-btn{padding:8px 12px}
}
@media (max-width:420px){.logo-sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ---------- Botões ---------- */
.btn{transition:transform .2s ease,box-shadow .25s ease,background-color .2s ease}
.btn-main{box-shadow:0 8px 18px -14px rgba(0,0,0,.55)}
.top .btn span.long{margin-left:-.25em}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}

/* ---------- Abertura das páginas internas: título (h1) com fundo de chão em perspectiva ---------- */
main#conteudo>section.abre{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
main#conteudo>section.abre::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;top:-10%;height:520px;pointer-events:none;
  background:
    radial-gradient(60% 70% at 85% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--fg) 7%,transparent) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--fg) 7%,transparent) 0 1px,transparent 1px 64px);
  transform:perspective(700px) rotateX(58deg) translateY(-140px);transform-origin:top center;
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 85%);mask-image:linear-gradient(180deg,#000 10%,transparent 85%)}
.abre h1{font-size:clamp(2.3rem,5.6vw,4.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0}
.abre .sec-head .eyebrow,.abre .eyebrow:first-child{display:inline-flex;align-items:center;gap:8px}
.abre .sec-head .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}

/* h3 promovidos a h2 na abertura (ordem dos títulos): mesma aparência de h3 */
h2.h3{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.plan h2.h3{font-size:1.5rem;letter-spacing:.01em}
h3.h4{font-family:inherit;font-size:.9rem;font-weight:700;letter-spacing:normal;line-height:inherit;margin:0 0 6px}

/* ---------- Entrada das seções (com JS; sem JS tudo aparece) ---------- */
.rise.pre{opacity:0;transform:perspective(900px) translateY(32px) rotateX(7deg);transform-origin:50% 0}
.rise.in{opacity:1;transform:none;transition:opacity .7s ease var(--atraso,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--atraso,0s)}

/* Primeira dobra: entra ao carregar. O h1 só desliza (sem opacidade, para não atrasar o LCP). */
@keyframes sobe{from{transform:translateY(18px)}to{transform:none}}
@keyframes surge{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
main#conteudo>section:first-child h1{animation:sobe .8s cubic-bezier(.2,.7,.2,1) both}
main#conteudo>section:first-child .eyebrow,main#conteudo>section:first-child .lede,.hero-ctas,.u-hero .dl{animation:surge .8s cubic-bezier(.2,.7,.2,1) .12s both}
.hero-ctas{animation-delay:.22s}.u-hero .dl{animation-delay:.3s}

/* ---------- 3D leve: celulares do topo seguem o ponteiro (só mouse; JS escreve --rx/--ry) ---------- */
.stage{perspective:1400px}
.stage>.phone,.stage>.browser,.demo-stage .phone{transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;will-change:auto}
.stage.vivo>*{transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg)) translateZ(0)}
.stage.vivo>.phone:first-child{transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg + 6deg)) translateZ(-20px)}
.stage.vivo>.phone:last-child{transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg - 6deg)) translateZ(-20px)}
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  .stage>.phone:nth-child(2),.u-stage>.u-mid{animation:flutua 7s ease-in-out 1s infinite}
}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Cartões: inclinação leve no ponteiro (JS escreve --tx/--ty) */
.tile,.card,.plan,.sec-item,.step,.qr-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .25s}
.inclina{transform:perspective(800px) rotateX(calc(var(--tx,0)*1deg)) rotateY(calc(var(--ty,0)*1deg)) translateY(-3px)!important;box-shadow:0 22px 44px -26px rgba(0,0,0,.4)}

/* ---------- Transição entre páginas (mesma origem) ---------- */
@view-transition{navigation:auto}
main#conteudo{view-transition-name:conteudo}
::view-transition-old(conteudo){animation:.22s cubic-bezier(.4,0,1,1) both vt-sai}
::view-transition-new(conteudo){animation:.42s cubic-bezier(.2,.8,.2,1) .06s both vt-entra}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@keyframes vt-sai{to{opacity:0;transform:translateY(-10px) scale(.99)}}
@keyframes vt-entra{from{opacity:0;transform:perspective(1200px) translateY(22px) rotateX(4deg)}}

/* ---------- Acessibilidade ---------- */
.tile:focus-visible,.store:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.skip:focus{z-index:50}

/* ---------- Movimento reduzido: nada se mexe ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise.pre{opacity:1;transform:none}
  .stage.vivo>*,.inclina{transform:none!important}
  .btn:hover{transform:none}
}

/* Botão do WhatsApp (02/11/2026): verde oficial e logo branco original à esquerda (simple-icons, CC0). */
.btn-whats{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#25D366;color:#fff!important;font-weight:700;font-size:1.05rem;line-height:1.2;padding:12px 24px;min-height:48px;border-radius:999px;text-decoration:none!important;box-sizing:border-box}
.btn-whats svg{flex:none;width:24px;height:24px}
.btn-whats:hover{filter:brightness(.95)}
.btn-whats:focus-visible{outline:3px solid #128C7E;outline-offset:3px}
.zap .btn-whats{margin:0 12px 8px 0;vertical-align:middle}
.u-ch-whats{align-self:stretch}

/* ---------- Fotos de pessoas (02/11/2026) ----------
   Seções .foto-sec: foto (4:5, WebP com srcset) + texto. .inv troca o lado no computador. .foto-duo = duas fotos.
   Fotos: Pexels (licença Pexels), registro em sites/LICENCAS-FOTOS.md; geradas por tools/fotos.py. */
.foto-sec{overflow-x:clip}
.foto-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:center}
.foto-split.inv>.foto,.foto-split.inv>.foto-duo{order:2}
.foto{margin:0;border-radius:28px;overflow:hidden;background:var(--line);aspect-ratio:4/5;box-shadow:0 30px 60px -40px rgba(23,20,15,.55)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.foto-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.foto-duo .foto-b{margin-top:clamp(28px,6vw,72px)}
.foto.foto-quadrada{aspect-ratio:1/1}
.foto.foto-menor{max-width:400px;justify-self:center;width:100%}
.foto-borda{position:relative;border:1px solid var(--line-strong,#c9c7c2)}
.foto-borda::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(315deg,rgba(23,20,15,.28),rgba(23,20,15,0) 42%)}
.foto-txt{display:grid;gap:18px;justify-items:start}
.foto-txt h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;max-width:20ch}
.foto-txt .lede{max-width:44ch}
.foto-txt .hero-ctas{margin-top:6px}
.foto-cta{margin-top:6px;width:100%;box-sizing:border-box}
.foto-nota{font-size:.9375rem;line-height:1.45;color:var(--fg);opacity:.82;margin:0}
.foto-lojas{display:flex;flex-wrap:wrap;gap:12px}
.foto-lojas .store{width:auto}
.cel-ios .foto-lojas,.cel-android .foto-lojas{display:none}
@media (max-width:860px){
  .foto-split{grid-template-columns:minmax(0,1fr);gap:28px}
  .foto-split.inv>.foto,.foto-split.inv>.foto-duo{order:0}
  .foto{border-radius:22px;aspect-ratio:4/5;max-height:72vh;width:100%}
  .foto-duo .foto{max-height:none}
  .foto-duo{gap:12px}
}
@media (max-width:600px){
  .foto-duo{grid-template-columns:minmax(0,1fr)}
  .foto-duo .foto-a{display:none}
  .foto-duo .foto-b{margin-top:0}
}