/* ==========================================================================
   DESMOB JÁ — sistema visual do site institucional
   --------------------------------------------------------------------------
   As duas cores vêm do próprio logo, medidas nos pixels dele:
   oliva #3a3d31 (o nome) e dourado #d19548 (o traço). Todo o resto é
   derivado dessas duas — nada de tema, nada de kit, nada que venha de fora.
   Fora do WordPress não existe mais CSS de terceiro alcançando estas telas.
   ========================================================================== */

:root{
  /* --- marca, medida no logo --- */
  --oliva:        #3A3D31;
  --oliva-900:    #23261E;
  --oliva-800:    #2E3128;
  --oliva-600:    #565A4A;
  --dourado:      #D19548;
  --dourado-esc:  #A2702F;   /* dourado que passa em contraste sobre claro */
  --dourado-cla:  #E8C79A;

  /* --- neutros derivados do oliva, não cinzas de catálogo --- */
  --branco:       #FFFFFF;
  --areia:        #F7F5EF;
  --areia-2:      #EFEBE1;
  --linha:        #E2DED2;
  --ink:          #23261E;
  --ink-2:        #55594A;
  --ink-3:        #7C8071;

  /* --- tipografia --- */
  --sans: 'Aptos','Segoe UI Variable Text','Segoe UI','Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;

  /* --- ritmo --- */
  --secao: clamp(64px, 8vw, 116px);
  --gut:   clamp(20px, 4vw, 40px);
  --max:   1180px;
  --raio:  10px;
  --sombra: 0 1px 2px rgba(35,38,30,.05), 0 8px 24px -12px rgba(35,38,30,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
body{
  margin:0; background:var(--branco); color:var(--ink);
  font-family:var(--sans); font-size:clamp(16px,.4vw + 15px,17.5px); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0; text-wrap:balance; line-height:1.14; letter-spacing:-.02em; font-weight:640}
h1{font-size:clamp(2.2rem,5.2vw,3.9rem); letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.12rem,1.5vw,1.3rem); letter-spacing:-.012em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--dourado); outline-offset:3px; border-radius:4px}

.env{width:min(100% - var(--gut)*2, var(--max)); margin-inline:auto}
.secao{padding-block:var(--secao)}
.secao--areia{background:var(--areia)}
.secao--escura{background:var(--oliva-900); color:#F2F1EA}
.secao--escura h2,.secao--escura h3{color:#FFF}
.pilha{display:flex; flex-direction:column}
.pilha--12{gap:12px} .pilha--20{gap:20px} .pilha--32{gap:32px} .pilha--48{gap:clamp(32px,4vw,48px)}
.prosa{max-width:62ch}
.prosa p + p{margin-top:1em}

/* --- rótulo de seção: a régua dourada é o único ornamento do site --- */
.rotulo{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dourado-esc);
}
.rotulo::before{content:""; width:28px; height:2px; background:var(--dourado); flex:none}
.secao--escura .rotulo{color:var(--dourado)}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.topo{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--linha);
}
.topo__in{display:flex; align-items:center; gap:16px; min-height:74px}
.topo__logo{display:flex; align-items:center; flex:none}
.topo__logo img{width:auto; height:34px}
.topo__nav{display:none; margin-left:auto; gap:4px; align-items:center}
.topo__nav a{
  padding:9px 13px; border-radius:7px; text-decoration:none; font-size:.94rem;
  font-weight:500; color:var(--ink-2); white-space:nowrap;
}
.topo__nav a:hover{background:var(--areia); color:var(--ink)}
.topo__acoes{display:flex; align-items:center; gap:10px; margin-left:auto}
@media (min-width:1000px){
  .topo__nav{display:flex}
  .topo__acoes{margin-left:18px}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:8px; border:1px solid transparent;
  font:inherit; font-size:.94rem; font-weight:600; line-height:1.1;
  text-decoration:none; cursor:pointer; transition:background .18s, border-color .18s, color .18s;
}
.btn--ouro{background:var(--dourado); color:#2A2113; border-color:var(--dourado)}
.btn--ouro:hover{background:var(--dourado-esc); border-color:var(--dourado-esc); color:#FFF}
.btn--linha{background:transparent; color:var(--ink); border-color:var(--linha)}
.btn--linha:hover{border-color:var(--oliva); background:var(--areia)}
.btn--claro{background:#FFF; color:var(--oliva-900); border-color:#FFF}
.btn--claro:hover{background:var(--dourado-cla); border-color:var(--dourado-cla)}
.btn--peq{padding:9px 15px; font-size:.88rem}

/* menu "Entrar" e menu do celular, sem JS de biblioteca */
.menu{position:relative}
.menu>summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.menu>summary::-webkit-details-marker{display:none}
.menu__caixa{
  position:absolute; right:0; top:calc(100% + 10px); z-index:70; min-width:236px;
  background:#FFF; border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:8px; display:flex; flex-direction:column; gap:2px;
}
.menu__caixa a{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:7px;
  text-decoration:none; font-size:.93rem; font-weight:560; color:var(--ink);
}
.menu__caixa a span{font-size:.79rem; font-weight:400; color:var(--ink-3)}
.menu__caixa a:hover{background:var(--areia)}
.hamb{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--linha); border-radius:8px; background:#FFF}
@media (min-width:1000px){ .hamb-wrap{display:none} }
.menu--mob .menu__caixa{min-width:min(80vw,300px)}

/* Abaixo de 640px o cabeçalho não cabe em uma linha: logo + Catálogo + Entrar +
   menu davam 418px numa faixa de 350px, e o `overflow-x:hidden` do body
   ESCONDIA o estouro em vez de evitá-lo — o botão de menu ficava cortado fora
   da tela. O Catálogo sai da barra (ele já está dentro do menu) e o resto
   encolhe. Medido, não estimado: ferramentas/testar-site.mjs reprova de novo se
   algum elemento voltar a ser mais largo que o espaço que tem. */
@media (max-width:640px){
  .topo__in{gap:10px; min-height:66px}
  .topo__logo img{height:27px}
  .topo__acoes{gap:8px}
  .topo__acoes .btn--peq{padding:9px 13px; font-size:.86rem}
  .topo__acoes>.btn--linha{display:none}
  .hamb{width:42px; height:42px}
}

/* link que so aparece para quem navega por teclado */
.pular{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:#FFF; border:1px solid var(--linha); border-radius:8px;
  padding:10px 16px; font-weight:600; text-decoration:none; color:var(--ink);
}
.pular:focus{left:12px; top:12px}

/* ==========================================================================
   Vídeo de abertura — tela cheia, como no site antigo
   --------------------------------------------------------------------------
   O truque da largura inteira (100vw com margem negativa) é o mesmo do site
   original. `100vw` inclui a barra de rolagem, e é por isso que o `body` leva
   `overflow-x:hidden`: sem ele, sobra uma faixa branca de ~15px à direita.
   ========================================================================== */
.video{
  position:relative; width:100vw; left:50%; margin-left:-50vw;
  height:min(80vh, 720px); min-height:340px; background:#000; overflow:hidden;
}
.video video{width:100%; height:100%; object-fit:cover; display:block}
.video__play{
  position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%;
  border:3px solid rgba(255,255,255,.9); background:rgba(35,38,30,.28);
  display:grid; place-items:center; cursor:pointer; color:#FFF;
  backdrop-filter:blur(2px); transition:background .18s, transform .18s;
}
.video__play svg{width:34px; height:34px; fill:currentColor; margin-left:5px}
.video__play:hover{background:rgba(209,149,72,.85); transform:scale(1.06)}
.video__play[hidden]{display:none}
@media (max-width:640px){
  .video{height:min(62vh, 440px)}
  .video__play{width:66px; height:66px}
  .video__play svg{width:26px; height:26px}
}

/* faixa dourada logo abaixo do vídeo */
.faixa{background:var(--dourado); color:#2A2113}
.faixa__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px clamp(18px,3vw,34px); padding-block:clamp(18px,2.4vw,26px);
}
.faixa p{font-size:clamp(1.02rem,1.5vw,1.35rem); font-weight:500; text-align:center}
.btn--escuro{background:var(--oliva-900); color:#FFF; border-color:var(--oliva-900);
  text-transform:uppercase; letter-spacing:.06em; font-size:.92rem; padding:14px 26px}
.btn--escuro:hover{background:#000; border-color:#000}

/* ==========================================================================
   Títulos de duas linhas — a segunda em dourado, como no site antigo
   ========================================================================== */
.titulo2{font-size:clamp(1.5rem,2.8vw,2.15rem); line-height:1.12; font-weight:600}
.titulo2 span{
  display:block; color:var(--dourado); text-transform:uppercase;
  font-weight:750; letter-spacing:-.01em;
}
.duo{display:grid; gap:clamp(32px,5vw,64px); align-items:center}
/* Sem isto o carrossel empurra a coluna: o padrao de um filho de grid/flex e
   min-width:auto, ou seja, ele se recusa a ficar menor que o conteudo. Era
   135px de rolagem lateral na pagina inteira, medido pelo testar-site.mjs. */
.duo > *{min-width:0}
@media (min-width:940px){ .duo{grid-template-columns:1fr 1fr} }

/* ==========================================================================
   Carrossel das seis etapas
   ========================================================================== */
.carrossel{position:relative; min-width:0}
.carrossel__trilho{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px;
}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel .etapa{
  flex:0 0 100%; scroll-snap-align:center;
  background:var(--oliva); border-radius:16px; padding:clamp(26px,3vw,34px);
  display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;
  min-height:clamp(300px,32vw,360px); justify-content:center;
}
.etapa__ico{width:auto; height:56px; object-fit:contain; margin-bottom:4px}
.etapa h3{
  font-size:clamp(1.1rem,1.5vw,1.3rem); color:var(--dourado); font-weight:750;
  text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px;
}
.etapa p{font-size:.93rem; color:#E3E4DC; line-height:1.6; max-width:42ch}
.carrossel__seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.92); border:1px solid var(--linha); color:var(--ink);
  display:grid; place-items:center; box-shadow:var(--sombra);
}
.carrossel__seta:hover{background:#FFF; color:var(--dourado-esc)}
.carrossel__seta svg{width:19px; height:19px}
.carrossel__seta--ant{left:8px}
.carrossel__seta--prox{right:8px}
@media (max-width:700px){ .carrossel__seta{display:none} }
.carrossel__bolas{display:flex; gap:8px; justify-content:center; margin-top:18px}
.carrossel__bolas button{
  width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--linha); transition:background .18s, transform .18s;
}
.carrossel__bolas button.ativa{background:var(--dourado); transform:scale(1.25)}

/* ==========================================================================
   Sobre nós — faixa escura com o título gigante
   ========================================================================== */
.sobre-nos{background:var(--oliva); color:#E9EAE2; padding-block:var(--secao)}
.sobre-nos__in{display:grid; gap:clamp(26px,4vw,56px); align-items:start}
@media (min-width:940px){ .sobre-nos__in{grid-template-columns:.8fr 1.2fr} }
.titulo-gigante{
  font-size:clamp(2.6rem,7vw,4.6rem); line-height:.98; letter-spacing:-.035em;
  font-weight:400; color:#FFF;
}
.titulo-gigante span{display:block; color:var(--dourado); font-weight:750}
.sobre-nos .prosa{max-width:70ch; color:#C9CBBF; font-size:.98rem}
.sobre-nos .prosa p + p{margin-top:1.05em}
.sobre-nos em{font-style:normal; color:var(--dourado)}

/* ==========================================================================
   Fernando — foto redonda grande, como no site antigo
   ========================================================================== */
.pessoa{padding-block:var(--secao); background:#FFF}
.pessoa__in{display:grid; gap:clamp(26px,4vw,56px); align-items:center; justify-items:center}
@media (min-width:820px){ .pessoa__in{grid-template-columns:auto 1fr; justify-items:start} }
.pessoa__foto{
  width:clamp(190px,22vw,250px); height:clamp(190px,22vw,250px);
  border-radius:50%; object-fit:cover; box-shadow:0 10px 34px -14px rgba(35,38,30,.45);
}
.pessoa__txt{max-width:46ch}
.pessoa__nome{
  font-size:clamp(1.5rem,2.6vw,2rem); font-weight:750; color:var(--dourado);
  text-transform:uppercase; line-height:1.05; letter-spacing:-.01em; margin-bottom:14px;
}
.pessoa__nome span{
  display:block; font-size:.55em; font-weight:400; color:var(--ink-3);
  text-transform:none; letter-spacing:0; margin-bottom:2px;
}
.pessoa__txt p{color:var(--ink-2); font-size:.98rem}
.pessoa em{font-style:normal; color:var(--dourado-esc); font-weight:600}

/* ==========================================================================
   Serviços — título em blocos + a arte do PDF
   ========================================================================== */
.servicos{background:var(--panel-cinza, #F1F1EF); padding-block:var(--secao)}
.servicos__in{display:grid; gap:clamp(28px,4vw,56px); align-items:center}
@media (min-width:900px){ .servicos__in{grid-template-columns:.85fr 1.15fr} }
.titulo-blocos{
  font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.14; font-weight:500;
  text-transform:uppercase; color:var(--ink);
}
.titulo-blocos span{display:block}
.titulo-blocos em{display:block; font-style:normal; color:var(--dourado); font-weight:750}
.servicos__arte{
  display:block; border-radius:16px; overflow:hidden; background:transparent;
  transition:transform .2s;
}
.servicos__arte:hover{transform:translateY(-3px)}
.servicos__arte img{width:100%; height:auto; object-fit:contain}

/* ==========================================================================
   O que a locadora ganha — cartões com contorno dourado sobre o escuro
   ========================================================================== */
.ganhos{
  display:grid; gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
}
.ganho{
  border:1px solid var(--dourado); border-radius:12px; color:#FFF;
  padding:clamp(18px,2vw,24px) clamp(14px,1.6vw,18px);
  font-size:.92rem; line-height:1.5; text-align:center; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}

/* ==========================================================================
   Contato
   ========================================================================== */
.contato{display:grid; gap:clamp(24px,3vw,44px)}
@media (min-width:880px){ .contato{grid-template-columns:1fr 1fr} }
.dados{display:flex; flex-direction:column; gap:20px}
.dado{display:flex; gap:14px; align-items:flex-start}
.dado svg{width:20px; height:20px; flex:none; color:var(--dourado-esc); margin-top:3px}
.dado b{display:block; font-size:.79rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:2px}
.dado a,.dado span{font-size:1rem; color:var(--ink); text-decoration:none}
.dado a:hover{color:var(--dourado-esc)}


/* ==========================================================================
   Rodapé
   ========================================================================== */
.rodape{background:var(--oliva-900); color:#B9BCAE; padding-block:clamp(44px,6vw,64px) 28px; font-size:.92rem}
.rodape__grade{display:grid; gap:clamp(28px,4vw,48px)}
@media (min-width:820px){ .rodape__grade{grid-template-columns:1.3fr 1fr 1fr} }
.rodape h4{font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:#8A8D80; font-weight:600; margin-bottom:14px}
.rodape ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.rodape a{color:#D7D9CE; text-decoration:none}
.rodape a:hover{color:var(--dourado)}
.rodape__logo{height:30px; width:auto; margin-bottom:16px; filter:brightness(0) invert(1) opacity(.92)}
.rodape__fim{
  margin-top:clamp(32px,4vw,48px); padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; font-size:.85rem; color:#8A8D80;
}

/* ==========================================================================
   Página de texto (política de privacidade)
   ========================================================================== */
.texto{max-width:74ch}
.texto h2{font-size:clamp(1.2rem,1.8vw,1.45rem); margin:clamp(30px,4vw,44px) 0 12px}
.texto h2:first-of-type{margin-top:0}
.texto p{margin-bottom:1em; color:var(--ink-2)}
.texto ul{color:var(--ink-2); padding-left:1.2em; display:flex; flex-direction:column; gap:8px; margin-bottom:1.2em}

/* faixa de aviso, usada quando um conteúdo ainda depende de revisão humana */
.aviso{
  border-left:3px solid var(--dourado); background:var(--areia); border-radius:0 8px 8px 0;
  padding:14px 18px; font-size:.92rem; color:var(--ink-2);
}

/* ==========================================================================
   Modal de acesso (Locadora · Vendedor · Admin)
   --------------------------------------------------------------------------
   Fora do WordPress o login não precisa mais de shadow root: não existe mais
   CSS de tema para escapar. A LÓGICA é a mesma de sempre — a aba escolhida tem
   de casar com o papel gravado em `perfis`, e a divergência encerra a sessão.

   Centralização: .ov SEM align-items e .modal com margin:auto — foi o que
   resolveu o modal preso no topo na revisão visual de agosto. Não trocar por
   flex+align-items:center: em telas baixas o topo do modal fica inalcançável.
   ========================================================================== */
.ov{
  position:fixed; inset:0; z-index:999; display:none; overflow:auto;
  background:rgba(35,38,30,.6); padding:20px;
}
.ov.aberto{display:block}
.modal{
  margin:auto; background:#FFF; border-radius:14px; width:min(100%,420px);
  padding:clamp(24px,3vw,32px); box-shadow:0 24px 60px -20px rgba(35,38,30,.5);
  position:relative;
}
.modal h2{font-size:1.42rem; margin-bottom:6px}
.modal__sub{font-size:.93rem; color:var(--ink-2); margin-bottom:20px}
.modal__x{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:8px;
  border:1px solid var(--linha); background:#FFF; color:var(--ink-2); cursor:pointer;
  display:grid; place-items:center; font-size:1.1rem; line-height:1;
}
.modal__x:hover{background:var(--areia); color:var(--ink)}
.abas{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:var(--areia); border-radius:9px; padding:5px; margin-bottom:18px}
.abas button{
  font:inherit; font-size:.88rem; font-weight:600; padding:9px 6px; border:0; cursor:pointer;
  border-radius:7px; background:transparent; color:var(--ink-2);
}
.abas button.ativa{background:#FFF; color:var(--ink); box-shadow:0 1px 3px rgba(35,38,30,.14)}
.campo{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.campo label{font-size:.79rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.campo input{
  font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--linha);
  border-radius:9px; background:#FBFAF7; color:var(--ink); width:100%;
}
.campo input:focus{outline:none; border-color:var(--dourado); box-shadow:0 0 0 3px rgba(209,149,72,.18)}
#portalSubmit{width:100%; margin-top:4px; padding:13px}
#portalSubmit[disabled]{opacity:.65; cursor:progress}
.msg{display:none; margin-top:14px; font-size:.9rem; border-radius:9px; padding:11px 13px; line-height:1.45}
.msg.err{display:block; background:#FBEDEB; border:1px solid #EBC9C4; color:#8A322A}