/* Ajustes de celular - Blue Commerce, 12/10/2026 */
html,body{overflow-x:clip}
/* em aparelhos sem WebCodecs o vídeo comum aparece no lugar do canvas: ele precisa cobrir a tela toda */
#top video{object-fit:cover!important}
/* o topo acompanha a altura real da tela quando a barra do navegador aparece ou some */
@supports (height:100dvh){#top .sticky[class*="h-[100svh]"]{height:100dvh!important}}
#top .sticky>[class*="bg-[linear-gradient"]{inset:-2px!important}
@media (max-width:767px){
  /* topo: logo à esquerda e o botão de menu (sanduíche) à direita */
  header.grid{display:flex!important;justify-content:space-between;align-items:center;gap:12px}
  header.grid>nav{display:none!important}
  header.grid>a>*:not(:first-child):not(:nth-child(2)){display:none!important}
  header.grid>div{gap:0!important}
  header.grid>div>button:not([aria-controls="nala-menu"]){display:none!important}
  header.grid button[aria-controls="nala-menu"]{display:inline-flex!important;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.45)!important;border-radius:999px;padding:9px 16px!important}

  /* topo do vídeo: textos laterais saem, o principal ocupa a largura */
  #top aside{display:none!important}
  #top h1 em,#top h1~button,#top [class*="ml-[15vw]"]{margin-left:0!important}
  #top [class*="bottom-[23vh]"]{display:none!important}
  #top [class*="bottom-[31px]"]{left:16px!important;right:16px!important;display:flex!important;flex-direction:column;align-items:stretch;gap:10px}
  #top [class*="bottom-[31px]"]>*{width:100%!important;min-width:0}
  #top [class*="grid-cols-[auto_1fr_auto]"]{grid-template-columns:auto minmax(0,1fr) auto!important}
  #top [class*="bottom-[31px]"] .justify-self-end{display:none!important}

  /* títulos grandes cabem na tela */
  h1{font-size:clamp(44px,13vw,64px)!important;line-height:.95!important}
  h2{font-size:clamp(38px,11.5vw,56px)!important;line-height:.98!important;overflow-wrap:break-word}
  h3{font-size:clamp(30px,9vw,40px)!important}

  /* colunas viram uma coluna */
  [class*="grid-cols-[minmax(360px"],
  [class*="grid-cols-[1.3fr_.7fr]"],
  [class*="grid-cols-[1.15fr_.85fr]"]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  [class*="grid-cols-[1.23fr_.77fr]"]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;gap:17px!important}
  [class*="grid-cols-[1.23fr_.77fr]"]>*{grid-column:auto!important;grid-row:auto!important;min-height:320px}
  [class*="grid-cols-[minmax(360px"]>*,[class*="grid-cols-[1.3fr_.7fr]"]>*,[class*="grid-cols-[1.15fr_.85fr]"]>*{min-width:0}

  /* faixas de rótulos em 3 colunas: viram 1 coluna */
  .grid.grid-cols-3.font-mono{grid-template-columns:minmax(0,1fr)!important;gap:6px!important;text-align:left!important}
  .grid.grid-cols-3.font-mono>*{justify-self:start!important;text-align:left!important}
  .grid.grid-cols-3.border-t{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  .grid.grid-cols-3.border-t>*{justify-self:start!important;text-align:left!important}

  /* formulário de datas: 2 colunas e o terceiro campo embaixo */
  .grid.grid-cols-3:not(.font-mono):not(.border-t){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .grid.grid-cols-3:not(.font-mono):not(.border-t)>*:last-child{grid-column:1/-1}

  /* textos e listas usam a largura toda */
  p{max-width:100%!important}
  [class*="grid-cols-[44px_1fr_16px]"]{grid-template-columns:44px minmax(0,1fr) 16px!important}
}
/* painel do menu (só aparece no celular) */
#nala-menu{position:fixed;inset:0;z-index:9999;background:#0b2a33;color:#f3efe6;display:flex;flex-direction:column;justify-content:center;padding:80px 28px 40px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s,transform .35s,visibility .35s}
#nala-menu.aberto{opacity:1;visibility:visible;transform:none}
#nala-menu nav{display:flex;flex-direction:column;gap:6px}
#nala-menu nav a{font-family:"Cormorant Garamond",serif;font-size:44px;line-height:1.25;color:#f3efe6;text-decoration:none;border-bottom:1px solid rgba(243,239,230,.15);padding:10px 0}
#nala-menu nav a.nala-reservar{font-family:"DM Mono",monospace;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border:1px solid #d9b98a;color:#d9b98a;border-radius:999px;text-align:center;padding:16px;margin-top:24px}
#nala-menu p{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-top:28px}
#nala-menu .nala-fechar{position:absolute;top:22px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,239,230,.4);background:none;color:#f3efe6;font-size:18px;cursor:pointer}
@media (min-width:768px){#nala-menu{display:none!important}}