/* ============================================================
   STAYVO — Home pública premium
   Identidade: navy profundo + marfim quente + editorial serif.
   "O lugar certo para cada momento."
   ============================================================ */
:root{
  --navy:#01234D;
  --navy-2:#0A3567;
  --acao:#0B5FFF;
  --ink:#101826;
  --cinza:#5B6B7F;
  --marfim:#FAF8F4;
  --nevoa:#EEF3FA;
  --linha:#E6E3DC;
  --linha-fria:#E2E8F0;
  --ouro:#B98A2F;
  --branco:#FFFFFF;
  --sombra-s:0 2px 10px rgba(1,35,77,.06);
  --sombra-m:0 14px 40px rgba(1,35,77,.12);
  --raio:18px;
  --f-display:'Fraunces',Georgia,serif;
  --f-ui:'Inter','Segoe UI',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-ui);color:var(--ink);background:var(--branco);line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
:focus-visible{outline:3px solid #9CC3FF;outline-offset:2px;border-radius:8px}

/* ───────────────────────── Cabeçalho ───────────────────────── */
.hd{position:fixed;inset:0 0 auto 0;z-index:80;transition:background .25s,box-shadow .25s,border-color .25s;
  border-bottom:1px solid transparent}
.hd.solido{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-color:var(--linha-fria);
  box-shadow:0 1px 0 rgba(1,35,77,.03)}
.hd-in{max-width:1240px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:26px}
.hd-logo{font-family:var(--f-display);font-weight:600;font-size:25px;letter-spacing:-.3px;color:#fff;transition:color .25s}
.hd-logo b{font-weight:600;color:#9CC3FF;transition:color .25s}
.hd.solido .hd-logo{color:var(--navy)}
.hd.solido .hd-logo b{color:var(--acao)}
.hd-menu{display:flex;gap:4px;margin-left:6px}
.hd-menu a{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85);padding:9px 13px;border-radius:999px;transition:.2s}
.hd-menu a:hover{background:rgba(255,255,255,.14);color:#fff}
.hd.solido .hd-menu a{color:var(--cinza)}
.hd.solido .hd-menu a:hover{background:var(--nevoa);color:var(--navy)}
.hd-acoes{margin-left:auto;display:flex;align-items:center;gap:8px}
.hd-host{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75);padding:9px 12px;border-radius:999px;transition:.2s}
.hd-host:hover{background:rgba(255,255,255,.14);color:#fff}
.hd.solido .hd-host{color:var(--cinza)}
.hd.solido .hd-host:hover{background:var(--nevoa);color:var(--navy)}
.hd-entrar{font-size:13.5px;font-weight:700;color:#fff;padding:10px 16px;border-radius:999px;transition:.2s}
.hd-entrar:hover{background:rgba(255,255,255,.14)}
.hd.solido .hd-entrar{color:var(--navy)}
.hd.solido .hd-entrar:hover{background:var(--nevoa)}
.hd-criar{font-size:13.5px;font-weight:800;background:#fff;color:var(--navy);padding:11px 20px;border-radius:999px;
  transition:.2s;box-shadow:var(--sombra-s)}
.hd-criar:hover{transform:translateY(-1px);box-shadow:var(--sombra-m)}
.hd.solido .hd-criar{background:var(--navy);color:#fff}
.hd-conta{position:relative}
.hd-conta summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:999px;padding:5px 15px 5px 5px;font-size:13.5px;font-weight:700;color:var(--navy);
  box-shadow:var(--sombra-s)}
.hd-conta summary::-webkit-details-marker{display:none}
.hd-avatar{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;
  place-items:center;font-size:13px;font-weight:800;text-transform:uppercase}
.hd-drop{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--linha-fria);border-radius:16px;
  box-shadow:var(--sombra-m);min-width:215px;padding:8px;display:flex;flex-direction:column}
.hd-drop a{padding:11px 13px;border-radius:10px;font-size:13.5px;font-weight:600}
.hd-drop a:hover{background:var(--nevoa)}
.hd-drop .sair{color:#C2410C;border-top:1px solid var(--linha-fria);border-radius:0;margin-top:5px;padding-top:12px}

/* ───────────────────────── Hero ───────────────────────── */
.hero{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center;
  padding:130px 28px 120px;overflow:hidden;background:var(--navy)}
.hero-mosaico{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;opacity:.98}
.hero-mosaico img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.hero-veu{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(1,25,54,.62) 0%,rgba(1,29,62,.55) 45%,rgba(1,35,77,.88) 100%)}
.hero-conteudo{position:relative;text-align:center;max-width:840px}
.hero-momento{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#BBD4F5;margin-bottom:22px}
.hero-momento .palavra{color:#fff;min-width:104px;text-align:left;display:inline-block;
  transition:opacity .45s ease}
.hero-momento .palavra.trocando{opacity:0}
.hero h1{font-family:var(--f-display);font-weight:520;font-size:clamp(34px,5.4vw,60px);line-height:1.08;
  letter-spacing:-.5px;color:#fff}
.hero h1 em{font-style:italic;color:#BBD4F5}
.hero-sub{color:rgba(255,255,255,.82);font-size:clamp(14.5px,1.6vw,17px);max-width:620px;margin:18px auto 0}

/* Barra de pesquisa flutuante */
.pesq{position:relative;z-index:5;max-width:960px;margin:-46px auto 0;padding:0 28px}
.pesq-card{background:#fff;border-radius:999px;box-shadow:var(--sombra-m);display:flex;align-items:stretch;
  padding:8px;gap:0;border:1px solid rgba(255,255,255,.6)}
.pesq-campo{flex:1.35;display:flex;flex-direction:column;justify-content:center;padding:9px 22px;border-radius:999px;
  transition:background .18s;min-width:0}
.pesq-campo:hover{background:var(--nevoa)}
.pesq-campo label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.pesq-campo input{border:0;outline:0;background:transparent;font-size:14.5px;color:var(--ink);width:100%;font-weight:500}
.pesq-campo input::placeholder{color:#9AA7B8;font-weight:400}
.pesq-campo.data{flex:1}
.pesq-campo.qtd{flex:.8}
.pesq-div{width:1px;background:var(--linha-fria);margin:10px 0}
.pesq-btn{border:0;cursor:pointer;background:var(--acao);color:#fff;border-radius:999px;padding:0 30px;
  font-size:15px;font-weight:800;display:flex;align-items:center;gap:9px;transition:.18s;white-space:nowrap}
.pesq-btn:hover{filter:brightness(1.08);transform:scale(1.015)}

/* ───────────────────────── Seções ───────────────────────── */
.secao{max-width:1240px;margin:0 auto;padding:72px 28px 0}
.secao-cab{margin-bottom:30px}
.secao-olho{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro)}
.secao h2{font-family:var(--f-display);font-weight:540;font-size:clamp(24px,3vw,33px);letter-spacing:-.4px;
  color:var(--navy);margin-top:6px}
.secao-cab p{color:var(--cinza);font-size:14.5px;margin-top:6px;max-width:560px}

/* Personalização (logado) */
.oi{background:var(--marfim);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  margin-top:64px;padding:34px 0 40px}
.oi .secao{padding-top:0}
.oi-titulo{font-family:var(--f-display);font-size:clamp(21px,2.4vw,27px);font-weight:540;color:var(--navy)}
.oi-sub{color:var(--cinza);font-size:14px;margin-top:3px}
.oi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;margin-top:22px}
.oi-card{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra-s);
  display:flex;gap:14px;align-items:center;transition:.2s}
.oi-card:hover{transform:translateY(-2px);box-shadow:var(--sombra-m)}
.oi-card img{width:66px;height:66px;border-radius:12px;object-fit:cover;flex-shrink:0}
.oi-card .t{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ouro)}
.oi-card .n{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3;margin-top:2px}
.oi-card .d{font-size:12.5px;color:var(--cinza);margin-top:2px}

/* Categorias */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--linha-fria);
  border-radius:999px;padding:11px 18px;font-size:13.5px;font-weight:700;color:var(--ink);transition:.18s}
.chip:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-1px);box-shadow:var(--sombra-s)}
.chip small{font-weight:600;color:var(--cinza)}

/* Destinos */
.destinos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.destino{position:relative;border-radius:var(--raio);overflow:hidden;aspect-ratio:4/4.6;box-shadow:var(--sombra-s)}
.destino img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.destino:hover img{transform:scale(1.06)}
.destino::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(1,20,44,.78))}
.destino-info{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff}
.destino-info b{font-family:var(--f-display);font-size:19px;font-weight:560;letter-spacing:-.2px;display:block}
.destino-info span{font-size:12px;color:rgba(255,255,255,.85);font-weight:600}

/* Hospedagens em alta */
.alta{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:26px 20px}
.card-hosp{display:block}
.card-hosp .foto{position:relative;aspect-ratio:20/17;border-radius:var(--raio);overflow:hidden;background:var(--nevoa)}
.card-hosp .foto img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.card-hosp:hover .foto img{transform:scale(1.055)}
.selo-alta{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--navy);
  font-size:11px;font-weight:800;padding:6px 12px;border-radius:999px;box-shadow:var(--sombra-s)}
.card-hosp h3{font-size:15px;font-weight:700;margin-top:12px;letter-spacing:-.2px;color:var(--ink);
  display:flex;justify-content:space-between;gap:10px}
.card-hosp .estrela{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.card-hosp .estrela::before{content:'★ ';color:var(--ouro)}
.card-hosp .onde{font-size:13px;color:var(--cinza);margin-top:1px}
.card-hosp .preco{font-size:14px;margin-top:6px;color:var(--ink)}
.card-hosp .preco b{font-weight:800}
.card-hosp .preco span{color:var(--cinza);font-size:13px}

/* Momentos */
.momentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.momento{background:var(--marfim);border:1px solid var(--linha);border-radius:var(--raio);padding:24px;transition:.2s}
.momento:hover{transform:translateY(-3px);box-shadow:var(--sombra-m);background:#fff}
.momento .ico{font-size:26px}
.momento b{display:block;font-size:15.5px;font-weight:800;color:var(--navy);margin-top:12px}
.momento p{font-size:13px;color:var(--cinza);margin-top:4px}

/* Avaliações */
.avals{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.aval{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:24px;box-shadow:var(--sombra-s)}
.aval .estrelas{color:var(--ouro);font-size:14px;letter-spacing:2px}
.aval p{font-family:var(--f-display);font-style:italic;font-weight:480;font-size:16.5px;color:var(--ink);
  line-height:1.5;margin:12px 0 16px}
.aval .quem{display:flex;align-items:center;gap:11px}
.aval .quem .bola{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:14px;text-transform:uppercase}
.aval .quem b{font-size:13.5px;display:block}
.aval .quem span{font-size:12px;color:var(--cinza)}

/* Faixa final */
.cta-fim{background:var(--navy);border-radius:26px;max-width:1240px;margin:80px auto 0;padding:56px 28px;
  text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-fim::before{content:'';position:absolute;inset:-40% -20% auto auto;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,178,255,.22),transparent 65%)}
.cta-fim h2{font-family:var(--f-display);font-weight:530;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.4px;position:relative}
.cta-fim p{color:rgba(255,255,255,.8);margin:10px auto 26px;max-width:480px;font-size:15px;position:relative}
.cta-fim a{display:inline-block;background:#fff;color:var(--navy);font-weight:800;font-size:15px;
  padding:15px 34px;border-radius:999px;transition:.2s;position:relative}
.cta-fim a:hover{transform:translateY(-2px);box-shadow:var(--sombra-m)}

/* ───────────────────────── Resultados ───────────────────────── */
.res-topo{max-width:1240px;margin:0 auto;padding:112px 28px 0}
.res-topo h1{font-family:var(--f-display);font-weight:540;font-size:clamp(23px,3vw,31px);letter-spacing:-.4px;color:var(--navy)}
.res-topo .qtd{color:var(--cinza);font-size:14px;margin-top:4px}
.res-chips{display:flex;gap:9px;overflow-x:auto;padding:18px 0 2px;scrollbar-width:none}
.res-chips::-webkit-scrollbar{display:none}
.res-vazio{max-width:520px;margin:40px auto;text-align:center;color:var(--cinza)}
.res-vazio b{display:block;font-family:var(--f-display);font-size:21px;color:var(--navy);margin-bottom:8px;font-weight:560}
.res-vazio a{display:inline-block;margin-top:18px;background:var(--navy);color:#fff;font-weight:800;
  padding:13px 28px;border-radius:999px}

/* ───────────────────────── Rodapé ───────────────────────── */
.pe{background:var(--marfim);border-top:1px solid var(--linha);margin-top:88px}
.pe-in{max-width:1240px;margin:0 auto;padding:52px 28px 0;display:flex;gap:44px;justify-content:space-between;flex-wrap:wrap}
.pe-marca{font-family:var(--f-display);font-weight:600;font-size:23px;color:var(--navy)}
.pe-marca b{color:var(--acao);font-weight:600}
.pe-slogan{font-family:var(--f-display);font-style:italic;color:var(--cinza);font-size:15px;margin-top:8px}
.pe-col{display:flex;flex-direction:column;gap:9px}
.pe-col b{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:3px}
.pe-col a{font-size:13.5px;color:var(--cinza);font-weight:500}
.pe-col a:hover{color:var(--navy)}
.pe-baixo{max-width:1240px;margin:40px auto 0;border-top:1px solid var(--linha);padding:18px 28px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--cinza)}
.pe-baixo a{color:var(--cinza)}
.pe-baixo a:hover{color:var(--navy)}

/* ───────────────────────── Animações ───────────────────────── */
.surge{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.surge.ok{opacity:1;transform:none}
.skel{background:linear-gradient(100deg,var(--nevoa) 40%,#F7FAFE 50%,var(--nevoa) 60%);background-size:200% 100%;
  animation:skel 1.3s infinite}
@keyframes skel{to{background-position:-200% 0}}
img.lazy{opacity:0;transition:opacity .45s ease}
img.lazy.ok{opacity:1}

/* ───────────────────────── Responsivo ───────────────────────── */
@media (max-width:900px){
  .hd-menu{display:none}
  .hero{min-height:520px;padding:110px 20px 100px}
  .hero-mosaico{grid-template-columns:repeat(2,1fr)}
  .pesq{padding:0 16px;margin-top:-38px}
  .pesq-card{flex-direction:column;border-radius:24px;padding:10px;gap:2px}
  .pesq-campo{padding:11px 16px;border-radius:14px}
  .pesq-div{display:none}
  .pesq-btn{padding:15px;justify-content:center;margin-top:6px}
  .secao{padding:52px 20px 0}
  .res-topo{padding:96px 20px 0}
  .cta-fim{margin:60px 16px 0;border-radius:22px}
}
@media (max-width:560px){
  .hd-in{padding:12px 16px;gap:10px}
  .hd-host{display:none}
  .hd-criar{display:none}
  .destino{aspect-ratio:4/3.4}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .surge{opacity:1;transform:none}
  img.lazy{opacity:1}
}
