/* =====================================================================
   MOTOR SITE AIRBNB · base.css
   Regras que todo site do kit precisa, sem identidade visual.
   A cara de cada casa fica no css/casa.css do cliente, carregado DEPOIS.

   Variáveis que o casa.css deve redefinir (valores abaixo são neutros):
     --m-escuro      texto escuro / fundo escuro
     --m-claro       texto claro / fundo claro
     --m-destaque    cor de ação (dias escolhidos no calendário, filtros)
     --m-acento      foco do teclado, botão principal, números
     --m-form-fundo  fundo do formulário de reserva (escuro)
     --m-link        links dentro do mapa
     --m-display     fonte de títulos
     --m-texto       fonte de texto
     --m-raio        arredondamento padrão
     --gutter, --max margem lateral e largura máxima do conteúdo

   ONDE MEXER
   - Cor, fonte ou detalhe de UMA casa: no site/css/casa.css do cliente.
     Não mude aqui: este arquivo é copiado para todos os clientes
     (ferramentas/atualizar-motor.py) e a mudança valeria para todos.
   - Mude aqui só o que deve valer para TODOS os sites do kit.
   ===================================================================== */
:root{
  --m-escuro:#16181C; --m-claro:#FAF7F2; --m-destaque:#E0702F; --m-acento:#F2B33D;
  --m-form-fundo:#16181C; --m-link:#1F4FA0;
  --m-display:Georgia,"Times New Roman",serif; --m-texto:system-ui,-apple-system,"Segoe UI",sans-serif;
  --m-raio:18px; --gutter:clamp(16px,5vw,64px); --max:1280px;
}

/* ---------- 1. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- 2. acessibilidade ---------- */
/* foco sempre visível para quem navega pelo teclado */
:focus-visible{outline:3px solid var(--m-acento);outline-offset:3px;border-radius:4px}
/* texto só para leitores de tela */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* "Pular para o conteúdo": aparece só ao receber foco */
.pular{position:fixed;left:12px;top:-80px;z-index:300;background:var(--m-acento);color:var(--m-escuro);padding:12px 16px;text-decoration:none;border-radius:8px}
.pular:focus{top:12px}

/* ---------- 3. layout ---------- */
/* PARA MUDAR: largura máxima e margem lateral = --max e --gutter (no casa.css) */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- 4. botão (forma; a cor é do casa.css) ---------- */
/* PARA MUDAR: altura do botão = min-height; cantos = border-radius */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s,background-color .25s,color .25s,box-shadow .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-linha{border-color:currentColor;background:transparent}
.btn svg{width:22px;height:22px;flex:none}

/* ---------- 5. aviso de cookies (criado pelo config.js) ---------- */
.aviso-cookies{position:fixed;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:90;max-width:520px;background:var(--m-claro);color:var(--m-escuro);border-radius:16px;padding:14px 16px;font-size:14px;display:flex;gap:14px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.aviso-cookies button{flex:none;min-height:42px;padding:0 16px;border-radius:999px;border:0;background:var(--m-escuro);color:var(--m-claro);cursor:pointer}
@media (min-width:1060px){.aviso-cookies{bottom:16px;left:16px}}

/* ---------- 6. movimento ---------- */
/* faixa que corre (galeria, avaliações, letreiros) */
/* PARA MUDAR: a velocidade fica em cada uso (ex.: .fileira em galeria.css) */
@keyframes corre{to{transform:translateX(-50%)}}
/* entradas.js marca .fora em [data-pausa-fora] quando sai da tela */
.fora *{animation-play-state:paused!important}
/* blocos [data-sobe] começam escondidos só quando o GSAP vai animá-los */
.motion [data-sobe]{opacity:0;transform:translateY(40px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}