/* ==========================================================================
   MozaTour — acabamento final (carregado em último lugar)
   1) detalhes de qualidade para computador  2) telemóvel profissional
   ========================================================================== */

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
html,body{overflow-x:clip}
::selection{background:#FAD3C2;color:var(--ink)}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px;border-radius:6px}
h1,h2,h3,.h-sec,.tc-title{text-wrap:balance}
p,.lead{text-wrap:pretty}
img{height:auto}
.trip .ph img,.tile img,.dcard2 img,.ta-card img,.hz-big img,.ed-card img,.bx.photo img,.md-collage img{height:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}

/* ---------- cabeçalho (computador) ---------- */
.nav a{transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--brand);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.hdr .btn-sm{min-height:42px}
.hdr-actions .btn-primary{box-shadow:0 8px 18px rgba(238,127,87,.28)}

/* ---------- cartões e botões (computador) ---------- */
.trip{box-shadow:0 1px 2px rgba(35,33,32,.03)}
.trip:hover{box-shadow:0 2px 6px rgba(35,33,32,.05),0 28px 50px rgba(35,33,32,.12)}
.btn{min-height:46px}
.btn-sm{min-height:40px}
.link{min-height:40px}
.sec-head .link{white-space:nowrap}
.pill{line-height:1.2}
.field input,.field select,.field textarea{min-height:48px}
.field textarea{min-height:auto}

/* ---------- menu móvel (painel lateral) ---------- */
.mnav-bg{position:fixed;inset:0;z-index:150;background:rgba(18,14,12,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
.mnav{display:flex!important;position:fixed!important;top:0;right:0;bottom:0;left:auto!important;z-index:160;width:min(380px,88vw);background:#fff;flex-direction:column;gap:0!important;padding:0!important;
  transform:translateX(102%);transition:transform .38s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.15);font:inherit!important;overflow-y:auto;visibility:hidden}
body.menu-open .mnav{transform:none;visibility:visible}
body.menu-open .mnav-bg{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.mnav-top{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.mnav-top img{height:30px;width:auto}
.mnav-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer}
.mnav-x .ic{width:20px;height:20px}
.mnav-links{padding:10px 12px;display:grid}
.mnav-links a{display:flex;justify-content:space-between;align-items:center;padding:15px 10px;border-radius:12px;font:600 1.12rem var(--sans);color:var(--ink);transition:background .2s;opacity:0;transform:translateX(16px)}
.mnav-links a .ic{width:18px;height:18px;color:var(--muted);transition:transform .2s,color .2s}
.mnav-links a:hover,.mnav-links a.on{background:var(--paper)}
.mnav-links a.on{color:var(--coral-d)}
.mnav-links a.on .ic{color:var(--coral-d)}
body.menu-open .mnav-links a{opacity:1;transform:none;transition:opacity .4s,transform .4s,background .2s}
body.menu-open .mnav-links a:nth-child(2){transition-delay:.04s}
body.menu-open .mnav-links a:nth-child(3){transition-delay:.08s}
body.menu-open .mnav-links a:nth-child(4){transition-delay:.12s}
body.menu-open .mnav-links a:nth-child(5){transition-delay:.16s}
body.menu-open .mnav-links a:nth-child(6){transition-delay:.2s}
body.menu-open .mnav-links a:nth-child(7){transition-delay:.24s}
body.menu-open .mnav-links a:nth-child(8){transition-delay:.28s}
.mnav-cta{padding:12px 20px 18px;display:grid;gap:.6rem;border-top:1px solid var(--line-2)}
.mnav-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mnav-foot{margin-top:auto;padding:16px 20px 22px;background:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.86rem;color:var(--ink-2)}
.mnav-foot span{display:flex;align-items:center;gap:.4rem}
.mnav-foot .ic{width:16px;height:16px;color:var(--coral-d)}
.mnav-foot .soc a{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:#fff}
@media (min-width:1081px){.mnav,.mnav-bg{display:none!important}}

/* ---------- correcções de transbordo ---------- */
.pm-pick label{position:relative}
.pm-pick input{left:0;top:0;width:1px;height:1px;margin:0}
.pay-tabs,.pm-methods{min-width:0}

/* ==========================================================================
   TELEMÓVEL / TABLET
   ========================================================================== */
@media (max-width:1080px){
  .topbar{display:none}
  .hdr .wrap{height:66px}
  .hdr .logo img{height:32px;width:auto}
  .burger{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:grid!important;place-items:center;background:#fff}
  .burger .ic{width:22px!important;height:22px!important}
  .hdr-over .hdr .burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
  .hdr-over.scrolled .hdr .burger{background:#fff;border-color:var(--line)}
  html{scroll-padding-top:80px}
  /* filtros de viagens: recolhíveis */
  .filters{padding:1.1rem}
}

@media (max-width:640px){
  body{font-size:15.5px}
  .wrap{width:calc(100% - 32px)}
  .sec{padding:56px 0}
  .h-sec,.tc-title{font-size:1.85rem;line-height:1.15}
  .lead{font-size:1rem}
  .sec-head{margin-bottom:1.6rem;gap:1rem}
  .sec-head .link{padding:.5rem 0}
  .hdr-actions .btn-primary{padding:.6rem .9rem;font-size:.84rem;min-height:40px}

  /* botões e áreas de toque confortáveis */
  .btn{min-height:50px;padding:.9rem 1.2rem}
  .btn-sm{min-height:44px}
  .link{min-height:44px}
  .hero .acts .btn,.tc-hero .acts .btn,.final .acts .btn{flex:1 1 100%}
  .cal-row .btn,.cal-row .link{min-height:44px;padding:.6rem 1rem}

  /* pesquisa: legendas legíveis */
  .sbox{padding:.65rem .9rem .65rem 2.9rem}
  .sbox span{font-size:.72rem}
  .sbox select{font-size:1rem}
  .sbar .go{min-height:52px}

  /* heróis */
  .tc-hero{padding:20px 0 120px}
  .tc-hero h1{font-size:2.4rem}
  .hero h1{font-size:2.4rem}
  .hz-frame h1{font-size:2.5rem}
  .md-hero h1{font-size:2.4rem}
  .ed-mast{padding:26px 0 22px}
  .ed-mast h1{font-size:2.6rem}
  .ed-mast .meta{flex-wrap:wrap;gap:.4rem .9rem;font-size:.66rem}
  .ta-slider{min-height:620px;height:88vh}
  .ta-slide h2{font-size:2.7rem}
  .ta-slide .meta{gap:.6rem 1rem;font-size:.9rem;margin:1rem 0 1.4rem}
  .page-hero{padding:70px 0 44px}
  .page-hero h1{font-size:2.2rem}

  /* revelar só na vertical (evita scroll horizontal) */
  .mv.mv-l,.mv.mv-r{transform:translateY(24px)}

  /* cartões */
  .trip .bd{padding:1rem 1.1rem 1.15rem}
  .trip h3{font-size:1.2rem}
  .trip .ft b{font-size:1.15rem}
  .grid-trips{gap:1.1rem}
  .ticker a{min-height:44px;font-size:1.05rem}
  .tc-dcard h4{font-size:.95rem}

  /* calendário */
  .cal-row{padding:1rem;gap:.4rem 1rem}
  .cal-d{padding-right:.9rem}
  .cal-d b{font-size:1.6rem}

  /* página da viagem */
  .trip-head h1{font-size:2rem}
  .facts div{padding:.85rem .9rem;gap:.6rem}
  .facts b{font-size:.92rem}
  .block{padding:1.6rem 0}
  .block h2{font-size:1.4rem}
  .book{padding:1.2rem;border-radius:18px}
  .book .help{font-size:.82rem}

  /* página da reserva */
  .bk-head{padding-top:16px}
  .bk-trip h1{font-size:1.5rem}
  .bk-money{grid-template-columns:1fr 1fr;gap:.8rem}
  .bk-money>div:nth-child(3){grid-column:span 2}
  .bk-main .card{padding:1.2rem}
  .chat{height:520px;border-radius:18px}
  .paycta{padding:1.4rem}

  /* filtros recolhíveis na lista de viagens */
  .layout-side{gap:1.2rem}

  /* rodapé compacto */
  .ftr{padding-top:56px}
  .ftr .grid{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}
  .ftr .grid>div:first-child,.ftr .grid>div:last-child{grid-column:1/-1}
  .ftr ul{gap:.2rem}
  .ftr ul a{display:inline-block;padding:.4rem 0}
  .ftr .bottom{flex-direction:column;gap:.4rem;padding-bottom:90px}

  /* WhatsApp flutuante mais discreto */
  .wa-float{width:54px;height:54px;right:14px;bottom:14px}
  .has-mbar .wa-float{bottom:88px}
}

/* botão de filtros (lista de viagens, telemóvel) */
.ftoggle{display:none}
@media (max-width:1080px){
  .ftoggle{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:54px;padding:0 1.1rem;border:1.5px solid var(--line);border-radius:14px;background:#fff;font:700 1rem var(--sans);color:var(--ink);cursor:pointer}
  .ftoggle span{display:flex;align-items:center;gap:.6rem}
  .ftoggle .ic{width:20px;height:20px}
  .ftoggle em{font-style:normal;background:var(--coral);color:#fff;border-radius:999px;font-size:.75rem;padding:.1rem .55rem}
  .ftoggle .chev{transition:transform .25s}
  .ftoggle.open .chev{transform:rotate(180deg)}
  .filters{display:none}
  .filters.open{display:block;animation:pmIn .3s ease}
}

/* ajustes finos de toque e leitura (telemóvel) */
@media (max-width:640px){
  .ta-dots button{min-height:40px;padding-top:1rem}
  .ed-mast .meta{font-size:.74rem}
  .md-collage .tag{font-size:.8rem}
  .md-collage .tag small{font-size:.74rem}
  .book .help a,.book a[href*="wa.me"]{display:inline-block;padding:.55rem .2rem}
  .checks li a{display:inline-block;padding:.45rem 0}
}

/* galeria da viagem adapta-se ao número de fotos */
.trip-gal.n1{grid-template-columns:1fr;grid-template-rows:460px}
.trip-gal.n1 a:first-child{grid-row:auto}
.trip-gal.n2{grid-template-columns:1.6fr 1fr;grid-template-rows:460px}
.trip-gal.n2 a:first-child{grid-row:auto}
.trip-gal.n3{grid-template-columns:2fr 1fr;grid-template-rows:230px 230px}
.trip-gal.n4{grid-template-columns:2fr 1fr 1fr;grid-template-rows:230px 230px}
.trip-gal.n4 a:nth-child(4){grid-column:span 2}
@media (max-width:640px){
  .trip-gal.n1,.trip-gal.n2{grid-template-columns:1fr;grid-template-rows:240px}
  .trip-gal.n2 a:nth-child(2){display:none}
  .trip-gal.n3{grid-template-columns:1fr 1fr;grid-template-rows:200px 120px}
  .trip-gal.n3 a:first-child{grid-column:span 2;grid-row:auto}
  .trip-gal.n4{grid-template-columns:1fr 1fr;grid-template-rows:200px 120px}
  .trip-gal.n4 a:nth-child(4){display:none;grid-column:auto}
}

/* imagens sobrepostas: no telemóvel não tapam as caras (ficam por baixo da foto principal) */
.tc-why .ph .a img,.about-ph .a img{object-position:center 30%}
@media (max-width:640px){
  .tc-why .ph{margin-bottom:70px}
  .tc-why .ph .a{height:340px;border-radius:160px 160px 20px 20px}
  .tc-why .ph .b{width:130px;height:130px;left:auto;right:16px;bottom:-62px;border-width:6px}
  .about-ph{margin-bottom:56px}
  .about-ph .a{aspect-ratio:4/4.2}
  .about-ph .b{width:38%;right:14px;bottom:-48px;border-width:5px}
  .tc-art{height:360px;margin-top:10px}
  .tc-art .c1{width:240px;height:240px;right:4px;top:0}
  .tc-art .c2{width:136px;height:136px;left:4px;bottom:0;top:auto}
  .tc-art .blob{right:-120px;bottom:-40px;width:340px;height:200px}
}

/* ==========================================================================
   Telemóvel: imagens e listas com acabamento profissional
   ========================================================================== */
@media (max-width:640px){
  /* Clássico: composição limpa (1 foto grande arredondada + 1 círculo discreto no canto) */
  .tc-art{height:auto!important;margin-top:28px;padding-bottom:24px}
  .tc-art .blob,.tc-art .dash,.tc-art .c3,.tc-art .badge{display:none!important}
  .tc-art .c1{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:4/3;border-radius:26px!important;border-width:6px!important;animation:none!important}
  .tc-art .c2{width:96px!important;height:96px!important;left:auto!important;right:14px!important;bottom:0!important;top:auto!important;border-width:5px!important}
  .tc-hero{padding-bottom:110px}

  /* Moderno: preço numa linha, rótulo por cima */
  .trow{padding:.7rem}
  .trow img{height:190px}
  .trow h3{font-size:1.25rem}
  .trow .pr{display:grid!important;grid-template-columns:1fr auto;align-items:end;gap:.2rem 1rem;padding:.2rem .4rem .3rem!important}
  .trow .pr small{grid-column:1}
  .trow .pr b{grid-column:1;grid-row:2;white-space:nowrap;font-size:1.3rem;margin:0!important}
  .trow .pr .btn{grid-column:2;grid-row:1/3;align-self:center}

  /* galerias em 2 colunas (menos scroll, fotos com proporção natural) */
  .gallery{columns:2!important;column-gap:.6rem}
  .gallery a{margin-bottom:.6rem;border-radius:12px}
  .insta-grid{grid-template-columns:repeat(3,1fr)!important}
  .insta-grid a:nth-child(n+4):not(.insta-cta){display:block!important}
  .insta-cta{grid-column:span 3;aspect-ratio:auto!important;padding:1.1rem!important;flex-direction:row!important;gap:.6rem!important}

  /* mosaicos e cards de destino com altura equilibrada */
  .mosaic{grid-auto-rows:170px!important;grid-template-columns:1fr 1fr!important}
  .mosaic .tile.w2{grid-column:span 2!important}
  .mosaic .tile.h2{grid-row:auto!important}
  .tile{padding:1rem}
  .tile h3{font-size:1.15rem}
  .dcards{grid-auto-columns:72%}
  .ta-rail{grid-auto-columns:82%}
  .md-collage{grid-template-rows:150px 150px 160px}

  /* fotos do herói das páginas internas */
  .page-hero img{object-position:center 40%}
  .bk-trip img{width:72px;height:72px}
}

/* ==========================================================================
   Telemóvel deitado / tablet (641–1080px): desenho intermédio, não de computador
   ========================================================================== */
@media (min-width:641px) and (max-width:1080px){
  .wrap{width:calc(100% - 48px)}
  .sec{padding:72px 0}
  .h-sec,.tc-title{font-size:2.2rem}
  .grid-trips,.tpl-horizonte .grid-trips.g4{grid-template-columns:repeat(2,1fr)!important}
  .tc-hero .wrap,.hz-frame .in,.md-hero .wrap{grid-template-columns:1fr!important}
  .tc-art{height:420px}
  .tc-dgrid{grid-template-columns:repeat(3,1fr)!important}
  .svc{grid-template-columns:1fr 1fr!important}
  .bento{grid-template-columns:1fr 1fr!important}
  .trip-body{grid-template-columns:1fr!important}
  .book{position:static!important;max-width:560px}
  .faq-wrap,.about .wrap,.how .wrap,.tc-why .wrap{grid-template-columns:1fr!important;gap:2.4rem!important}
  .stats .wrap{grid-template-columns:repeat(4,1fr)!important}
  .stats .wrap>div{border-top:0!important;border-left:1px solid var(--line-2)!important;padding:30px 8px}
  .stats .wrap>div:first-child{border-left:0!important}
  .gallery{columns:3!important}
  .ftr .grid{grid-template-columns:1fr 1fr 1fr!important}
  .ftr .grid>div:first-child{grid-column:1/-1}
}
/* telemóvel deitado (pouca altura): heróis mais baixos */
@media (max-height:500px) and (orientation:landscape){
  .ta-slider{min-height:420px;height:100vh}
  .hz-frame .fr{min-height:420px}
  .hero{min-height:440px}
}
