/* ============================================================
   MUNDO IMPRESSO — mobile.css (v2)
   Otimização para celular e tablet. Carregar SEMPRE por último.
   Em telas largas (desktop) este arquivo quase não interfere.
   ============================================================ */

:root{
  --header-h: 92px;
}

/* Botão hambúrguer — invisível no desktop */
.nav-toggle{
  display:none;
  order:10;
  flex:0 0 auto;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  place-items:center;
  align-content:center;
  gap:5px;
  transition:border-color .25s ease, background .25s ease;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:var(--warm);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease, background .25s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible{ border-color:var(--amber); outline:none }
.nav-toggle:hover span,
.nav-toggle:focus-visible span{ background:var(--amber) }

body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0 }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

.main-nav .social-nav{ display:none }

/* ============================================================
   TABLET E CELULAR (≤1180px) — menu vira gaveta em tela cheia
   ============================================================ */
@media (max-width:1180px){
  :root{ --header-h: 84px }

  .nav-toggle{
    display:grid;
    position:absolute;
    top:50%;
    right:clamp(.9rem, 3vw, 1.4rem);
    transform:translateY(-50%);
    margin:0;
    z-index:5;
  }

  .header-inner{
    position:relative;
    flex-wrap:nowrap;
    min-height:var(--header-h);
    padding:.55rem calc(var(--pad) + 3.6rem) .55rem var(--pad);
  }
  .brand{ order:0; flex:1 1 auto; min-width:0 }
  .brand img{ width:56px; height:56px; border-radius:13px }
  .social-nav{ order:1; margin-left:auto }

  .main-nav{
    order:0;
    position:fixed;
    left:0; right:0;
    top:var(--header-h);
    bottom:0;
    z-index:70;
    width:auto;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:.35rem;
    padding:1.4rem var(--pad) 3rem;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(to bottom, rgba(10,10,11,.985), rgba(13,13,15,.985));
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s;
  }
  body.nav-open .main-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s 0s;
  }
  body.nav-open{ overflow:hidden }

  .main-nav a{
    font-size:1.06rem;
    font-weight:600;
    padding:1.05rem 1.1rem;
    border-radius:16px;
    border-bottom:1px solid rgba(245,239,230,.08);
    background:transparent;
  }
  .main-nav a::after{ display:none }
  .main-nav a:hover,
  .main-nav a:focus-visible{ transform:none }

  .main-nav .social-nav{
    display:flex;
    order:0;
    margin:1.6rem 0 0;
    padding:1.4rem 0 0;
    border-left:0;
    border-top:1px solid var(--line);
    justify-content:center;
    gap:.9rem;
  }
  .main-nav .social-nav a{
    width:46px; height:46px;
    padding:0;
    border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
  }

  .hero{ padding-top:calc(var(--header-h) + 3.2rem) }
  .hero.hero-3d{ padding-top:calc(var(--header-h) + 2.4rem) }
  .subpage-main{ padding-top:var(--header-h) }
}

/* ============================================================
   CENAS (≤900px) — animação em cima, texto embaixo + sem rodapé
   ============================================================ */
@media (max-width:900px){
  /* Frames primeiro, texto logo abaixo */
  .scene-canvas,
  .scene-duo .duo-grid{ order:1 }
  .scene-copy{
    order:2 !important;
    margin:0 auto !important;
  }
  .scene-sticky{ justify-content:flex-start }
  .scene-canvas,
  .scene-duo .duo-grid{
    height:min(44vh, 440px);
  }

  /* Rodapé eliminado na versão mobile */
  .site-footer{ display:none }

  /* Correção das animações dos textos das cenas: em telas pequenas
     o efeito de entrada (desfoque + deslize) travava e deixava o
     texto borrado. Aqui o texto aparece nítido imediatamente. */
  .premium-sections-ready .scene-copy .scene-title,
  .premium-sections-ready .scene-copy .scene-text{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}

/* ============================================================
   HERO DA HOME (≤800px)
   Ordem: título → linha → subtítulo → imagem da impressora →
   botões (iguais, empilhados, com texto curto no de orçamento)
   ============================================================ */
@media (max-width:800px){
  .hero-3d .hero-layout{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-3d .hero-inner{ display:contents }
  .hero-3d .hero-title{ order:1 }
  .hero-accent{ order:2 }
  .hero-3d .hero-sub{ order:3; max-width:none }
  .hero-visual{
    order:4;
    margin:1.6rem 0 1.5rem;
    min-height:340px;
  }
  .hero-3d .hero-actions{
    order:5;
    margin-top:0;
    width:100%;
    align-items:stretch;
  }
  .hero-3d .hero-actions .btn{
    width:100%;
    min-height:56px;
    padding:.95rem 1.2rem;
    justify-content:center;
    text-align:center;
    font-size:.98rem;
  }

  /* Faixa de ícones e textos de benefícios: removida no celular */
  .hero-benefits{ display:none }
}

/* ============================================================
   CELULAR (≤760px)
   ============================================================ */
@media (max-width:760px){
  :root{ --header-h: 72px }

  .header-inner{ padding:.5rem calc(1rem + 3.3rem) .5rem 1rem; gap:.6rem }
  .brand{ gap:.65rem }
  .brand img{ width:48px; height:48px; border-radius:11px }
  .brand-name{ font-size:1.18rem }
  .brand-slogan{ display:block; font-size:.52rem; letter-spacing:.12em }
  .nav-toggle{ width:44px; height:44px }

  /* Cenas: rolagem mais curta, animação em camadas mantida */
  .scene{ height:280vh }
  .scene-long{ height:340vh }
  .scene-sticky{
    padding:calc(var(--header-h) + 1.3rem) 1.1rem 1.4rem;
    gap:1rem;
  }
  .scene-canvas,
  .scene-duo .duo-grid{
    height:min(42vh, 420px);
    min-height:260px;
    border-radius:18px;
  }
  .scene-copy{
    padding:1.5rem 1.2rem 1.7rem !important;
  }
  .scene-title{ font-size:clamp(2.1rem, 8.5vw, 3.2rem) }
  .scene-text{ font-size:clamp(.95rem, 4vw, 1.08rem); line-height:1.58 }

  /* Herói da home */
  .hero.hero-3d{ padding-bottom:1.6rem }
  .hero-accent{ margin:1.3rem 0 1.2rem }
  .hero-3d .hero-sub{ font-size:1rem; line-height:1.65 }
  .hero-visual{ min-height:300px }

  /* Subpáginas */
  .subpage-hero{
    min-height:auto;
    padding:3.4rem 1.25rem 3rem;
  }
  .subpage-lead{ margin-top:1.2rem }
  .subpage-actions{ margin-top:1.7rem }
  .subpage-actions .btn{ width:100%; justify-content:center; min-height:54px }
  .subpage-content{ padding:3rem 1.25rem }
  .subpage-card{ padding:1.6rem 1.4rem; border-radius:16px }

  /* CTA final */
  .cta{ padding:4.5rem 1.25rem }
  .cta-text{ margin:1.2rem auto 1.9rem }
}

/* Em telas estreitas, as redes sociais saem do cabeçalho
   (continuam disponíveis dentro do menu hambúrguer) */
@media (max-width:560px){
  .header-inner > .social-nav{ display:none }
}

/* ============================================================
   CELULARES PEQUENOS (≤440px)
   ============================================================ */
@media (max-width:440px){
  .brand-slogan{ display:none }
  .hero-3d .hero-title{ font-size:clamp(2.45rem, 13vw, 3.6rem) }
  .hero-visual{ min-height:260px }
  .cta-title{ font-size:clamp(2.1rem, 10vw, 3.2rem) }
  .btn-lg{ padding:1rem 1.4rem; font-size:.98rem }
}

/* ============================================================
   TOQUE E ACESSIBILIDADE
   ============================================================ */
@media (hover:none){
  .btn:hover,
  .main-nav a:hover,
  .social-nav a:hover{ transform:none }
  .benefit-item{ transform:none !important }
}

a, button{ -webkit-tap-highlight-color:transparent }

@media (prefers-reduced-motion:reduce){
  .nav-toggle span,
  .main-nav{ transition:none !important }
}