/* ============================================================================
   responsive.css — CAMADA RESPONSIVA (desktop + tablet)
   ----------------------------------------------------------------------------
   Objetivo: o mesmo app que hoje vive preso a um frame de 430px (visual de
   celular flutuando no meio da tela do computador) passa a OCUPAR A TELA
   INTEIRA de forma elegante em notebooks/desktops, mantendo 100% intacta a
   experiência mobile e SEM alterar nenhuma linha de JavaScript ou da API.

   Estratégia:
   - Carregado DEPOIS de style.css → sobrescreve, nas mesmas media queries,
     o "frame de celular" por um layout real de produto.
   - Mobile (<=640px): nada muda. Continua tela cheia, app-like.
   - Tablet (641–1023px): sai o frame, conteúdo centralizado, grids 2–3 col.
   - Desktop (>=1024px): barra lateral fixa (estilo Linear/Notion), header
     largo, conteúdo centralizado em coluna premium, grids multi-coluna e
     página de evento em 2 colunas (mapa fixo à direita + ofertas à esquerda).
   ============================================================================ */

/* Largura máxima do "miolo" de conteúdo em telas grandes */
:root{ --maxw:1180px; --rail:84px; --gutter:32px; }

/* =========================================================================
   TABLET — 641px a 1023px : remove o frame, mantém a tab bar inferior
   Sobrescreve as regras de "frame centralizado" do style.css.
   ========================================================================= */
@media (min-width:641px) and (max-width:1023px){
  body{
    background:var(--bg);
    display:block; padding:0; align-items:initial; justify-content:initial;
  }
  .app{
    max-width:100%; width:100%;
    height:100dvh; min-height:100dvh;
    margin:0; border:0; border-radius:0; box-shadow:none;
  }
  .tnav{ height:58px; padding:0 var(--gutter); }
  .tnav .srch{ max-width:520px; }

  /* miolo centralizado (bloco + margin auto evita o "encolhimento" do flex) */
  .sa{ padding:0 var(--gutter) 84px; }
  .sa > *{ max-width:880px; margin-left:auto; margin-right:auto; }

  /* grids ganham colunas */
  .qa-grid{ grid-template-columns:repeat(4,1fr); }
  .feat-grid{ grid-template-columns:repeat(3,1fr); }
  .ev-grid{ grid-template-columns:repeat(3,1fr); }

  /* faixas que rolavam na horizontal passam a quebrar em linhas */
  .ev-scroll, .rev-scroll{ flex-wrap:wrap; overflow:visible; }
  .ev-card{ width:calc(33.333% - 7px); }
  .rev-card{ width:calc(50% - 5px); }

  /* página do evento um pouco mais espaçosa */
  .map-vp{ height:340px; }
}

/* =========================================================================
   DESKTOP — >=1024px : barra lateral fixa + layout largo de produto
   ========================================================================= */
@media (min-width:1024px){
  /* fundo limpo, sem o "palco" do frame */
  body{
    background:var(--bg);
    display:block; padding:0; min-height:100dvh;
    align-items:initial; justify-content:initial;
  }

  /* o app ocupa tudo; reservamos a faixa da esquerda para a barra lateral */
  .app{
    max-width:100%; width:100%;
    height:100dvh; min-height:100dvh;
    margin:0; border:0; border-radius:0; box-shadow:none;
    overflow:hidden;
    padding-left:var(--rail);
  }

  /* ---- Header superior, largo ---- */
  .tnav{
    height:64px; padding:0 var(--gutter);
    border-radius:0 !important;
    gap:18px; backdrop-filter:saturate(160%) blur(8px);
  }
  .logo-sq{ width:34px; height:34px; font-size:1.05rem; border-radius:10px; }
  .logo-t{ font-size:1.02rem; }
  .tnav .srch{
    flex:1; max-width:560px; height:42px; border-radius:13px;
  }
  .tnav .srch input{ font-size:.85rem; }
  .tnav .nb{ width:42px; height:42px; }
  .tnav .nb:hover{ background:var(--bg3); }

  /* ---- Barra lateral fixa (vinda da .btabs) — estilo Linear/Notion ---- */
  .btabs{
    position:fixed; left:0; top:0; bottom:0;
    width:var(--rail); height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:4px; padding:74px 0 18px;
    border-top:0; border-right:.5px solid var(--bdr);
    border-radius:0 !important;
    background:var(--bg2); z-index:130;
  }
  .bt{
    flex:0 0 auto; height:62px; margin:0 10px;
    border-radius:14px; gap:5px; font-size:.6rem; font-weight:600;
    transition:background .14s, color .14s, transform .14s;
  }
  .bt .bt-ic{ font-size:1.25rem; }
  .bt:hover{ background:var(--bg3); color:var(--ink2); }
  .bt.on{ background:var(--acc-bg); color:var(--acc); }
  .bt.on::before{ display:none; } /* remove o indicador superior do mobile */
  .bt.bt-sell{ background:var(--acc); color:#fff; }
  .bt.bt-sell:hover{ background:var(--acc2); color:#fff; transform:translateY(-1px); }
  .bt.bt-sell .bt-ic{ color:#fff; }
  /* marca "E" no topo do rail, alinhada ao header */
  .btabs::before{
    content:"E";
    position:absolute; top:0; left:0; right:0; height:64px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--sora); font-weight:900; font-size:1.15rem;
    color:#fff; background:var(--acc);
    border-bottom:.5px solid var(--bdr);
  }

  /* ---- Miolo: coluna de conteúdo centralizada e premium ----
     Centralizamos com bloco + margin:auto (NÃO flex) para não disparar o
     "encolhimento" de itens flex dentro de um container de altura fixa. */
  .sa{
    padding:0 var(--gutter) 40px;
  }
  .sa > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }

  /* cabeçalhos de seção e a hero com respiro maior */
  .sec-hdr{ padding:26px 4px 12px; }
  .sec-hdr h2{ font-size:1.18rem; }

  .hero-blk{
    margin:22px 0 4px; padding:44px 40px; border-radius:24px;
  }
  .hero-blk h1{ font-size:2.7rem; line-height:1.08; }
  .hero-sub{ font-size:1.02rem; max-width:560px; }
  .hero-stats{ gap:34px; margin-top:22px; }
  .hs-n{ font-size:1.5rem; }

  /* grids multi-coluna */
  .qa-grid{ grid-template-columns:repeat(4,1fr); gap:14px; padding:0 0 18px; }
  .feat-grid{ grid-template-columns:repeat(3,1fr); gap:14px; padding:0 0 18px; }
  .ev-grid{
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:16px; padding:0 0 24px;
  }

  /* faixas horizontais → grades que quebram em linhas (sem barra invisível) */
  .ev-scroll{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:16px; overflow:visible; padding:0 0 20px;
  }
  .ev-card{ width:auto; }
  .ev-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.10); }
  .rev-scroll{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:16px; overflow:visible; padding:0 0 18px;
  }
  .rev-card{ width:auto; }

  /* faixas full-bleed continuam agradáveis dentro da coluna */
  .trust-strip{ justify-content:center; gap:30px; padding:16px 0; }
  .cmp-card, .guarantee, .loy-banner, .newsletter, .sos-wrap{ margin-left:0; margin-right:0; }

  /* ---------- PÁGINA DO EVENTO: layout em 2 colunas (mapa + ofertas) ---------- */
  #sc-detail .sa > *{ max-width:1080px; }
  .det-ph{ height:300px; border-radius:0 0 22px 22px; }
  .det-info{ padding-top:22px; }
  .det-name{ font-size:2rem; }

  /* o bloco .mkt vira grid: ofertas/filtros à esquerda, mapa fixo à direita */
  #dp-ing .mkt{
    display:grid;
    grid-template-columns:1fr 400px;
    column-gap:28px; align-items:start;
  }
  #dp-ing .mkt > *{ grid-column:1; min-width:0; }
  #dp-ing .map-box{
    grid-column:2; grid-row:1 / span 60;
    position:sticky; top:84px; margin:0;
  }
  #dp-ing .map-vp{ height:460px; }

  /* abas internas e painéis com respiro */
  .dpnl{ padding-top:8px; }

  /* ---------- CHECKOUT / CARRINHO confortáveis em telas grandes ---------- */
  #sc-checkout .sa > *, #sc-cart .sa > *{ max-width:720px; }

  /* ---------- Modais e onboarding centralizados (não bottom-sheet gigante) ---------- */
  .modal-ov{
    left:calc(-1 * var(--rail)); width:calc(100% + var(--rail));
    align-items:center; justify-content:center;
  }
  .modal-sh{
    width:100%; max-width:460px; max-height:88vh;
    border-radius:20px;
  }
  /* onboarding: cartão central em vez de tela cheia */
  .ob{ align-items:center; justify-content:center; }
  .ob-body{ max-width:520px; }

  /* rolagem visível e discreta no desktop (mobile permanece sem barra) */
  .sa{ scrollbar-width:thin; scrollbar-color:var(--bdr2) transparent; }
  .sa::-webkit-scrollbar{ display:block; width:10px; }
  .sa::-webkit-scrollbar-thumb{ background:var(--bdr2); border-radius:8px; border:3px solid var(--bg); }
  .sa::-webkit-scrollbar-track{ background:transparent; }
}

/* =========================================================================
   DESKTOP LARGO — >=1440px : respiro extra, mapa ainda maior
   ========================================================================= */
@media (min-width:1440px){
  :root{ --maxw:1280px; --gutter:48px; }
  .hero-blk h1{ font-size:3rem; }
  #dp-ing .mkt{ grid-template-columns:1fr 460px; }
  #dp-ing .map-vp{ height:520px; }
}

/* =========================================================================
   ACESSIBILIDADE — respeita quem pede menos movimento
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* foco de teclado visível e consistente (WCAG) em qualquer tela */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible, .qa:focus-visible, .chip:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
  border-radius:8px;
}