/* ==========================================================
   MENU MOBILE (SANDUÍCHE) — compartilhado entre home e
   páginas internas. Carregar SEMPRE depois de paginas.css
   ou do <style> inline da home para garantir prioridade.
   ========================================================== */

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0;
  background:transparent;
  border:1px solid rgba(226,195,123,.55);
  border-radius:8px;
  cursor:pointer;
  flex-shrink:0;
  order:2;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

body.nav-scroll-lock{overflow:hidden}

@media (max-width:900px){
  .nav-toggle{display:flex}

  /* ---------- HOME (index.html) ---------- */
  .site-nav .nav-inner{
    flex-wrap:wrap;
    overflow:visible;
    justify-content:space-between;
    padding:10px 18px;
    min-height:64px;
  }
  .site-nav .nav-logo{order:1}
  .site-nav .nav-links{
    order:3;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .site-nav.nav-open .nav-links{max-height:75vh; overflow-y:auto; padding-top:8px}
  .site-nav .nav-links a{
    width:100%;
    font-size:13px;
    padding:14px 6px;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-sizing:border-box;
  }
  .site-nav .nav-links .nav-login{
    border:1px solid rgba(231,201,130,.85);
    border-radius:999px;
    text-align:center;
    margin:14px 0 6px;
    padding:11px 16px;
  }

  /* ---------- PÁGINAS INTERNAS ---------- */
  .site-nav-interna .nav-inner-interna{
    flex-wrap:wrap;
    overflow:visible;
    padding:10px 18px;
    min-height:64px;
  }
  .site-nav-interna .logo-interna{order:1}
  .site-nav-interna .nav-links-interna{
    order:3;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .site-nav-interna.nav-open .nav-links-interna{max-height:60vh; overflow-y:auto; padding-top:8px}
  .site-nav-interna .nav-links-interna a{
    width:100%;
    font-size:13px;
    padding:14px 6px;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-sizing:border-box;
  }
  .site-nav-interna .nav-login-interna{
    order:4;
    flex-basis:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease, margin .3s ease;
    text-align:center;
    box-sizing:border-box;
    margin:0;
    padding:0 0 0 0;
    border-width:0;
  }
  .site-nav-interna.nav-open .nav-login-interna{
    max-height:70px;
    padding:12px 0;
    margin:10px 0 6px;
    border:1px solid rgba(231,201,130,.85);
  }

  /* Remove a barra do menu no mobile: some o fundo e a logo,
     fica só o ícone do menu hambúrguer no canto direito, sobre
     a imagem. Quando o menu abre, volta o fundo sólido para
     o painel de links ficar legível. */
  .site-nav{
    background:transparent;
    border-bottom:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .site-nav .nav-inner{
    justify-content:flex-end;
    background:transparent;
    padding:14px 16px;
    min-height:auto;
  }
  .site-nav .nav-logo{display:none}
  .site-nav.nav-open{background:#16241c}

  .site-nav-interna{
    background:transparent;
    border-bottom:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .site-nav-interna .nav-inner-interna{
    justify-content:flex-end;
    background:transparent;
    padding:14px 16px;
    min-height:auto;
  }
  .site-nav-interna .logo-interna{display:none}
  .site-nav-interna.nav-open{background:#26312d}
}

/* O ícone do hambúrguer precisa de contraste próprio, já que
   agora fica solto sobre a imagem/vídeo, sem barra atrás */
.nav-toggle{
  background:rgba(20,28,23,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* ==========================================================
   SEÇÃO "ATALHOS" (A Pele / Quem Somos / Regeneração...) —
   mantém a imagem de fundo com os ícones. O que quebrava no
   mobile era o texto (principalmente palavras longas como
   "Nanotecnologia") vazando para fora da coluna estreita.
   Aqui só diminuímos bastante a fonte e travamos a quebra de
   palavra, sem tirar a imagem.
   ========================================================== */
@media (max-width:900px){
  .quick-grid{padding:6% 1.5% 3%}
  .quick-item{
    padding-left:2px;
    padding-right:2px;
    overflow-wrap:break-word;
    word-break:break-word;
    hyphens:auto;
  }
  .quick-title{font-size:6.5px; letter-spacing:.04em; margin-bottom:4px; line-height:1.2}
  .quick-desc{font-size:5px; line-height:1.25; max-width:none; min-height:0; margin-bottom:4px}
  .quick-link{font-size:4.5px; margin-top:2px}
  .quick-whatsapp{width:20px; height:20px; margin-top:3px}
  .quick-whatsapp svg{width:11px; height:11px}
}
@media (max-width:600px){
  .quick-grid{padding-top:4%}
  .quick-title{font-size:5.5px; margin-bottom:3px}
  .quick-desc{font-size:4.2px; margin-bottom:3px}
  .quick-link{font-size:4px; margin-top:2px}
  .quick-whatsapp{width:16px; height:16px; margin-top:2px}
  .quick-whatsapp svg{width:9px; height:9px}
}

/* ==========================================================
   "REGENERE SUA PELE" / "TRADIÇÃO E TECNOLOGIA" — a caixa é
   muito baixa (aspect-ratio bem largo) e o botão de cada lado
   acabava cortado. Damos um pouco mais de altura à seção (a
   imagem continua cobrindo tudo com object-fit:cover, só corta
   um pouco mais) e diminuímos bastante a fonte para o botão
   caber.
   ========================================================== */
@media (max-width:900px){
  .dual{aspect-ratio:2176/640}
  .dual-card{padding:5%}
  .dual-card:first-child{padding-left:42%}
  .dual-card:last-child{padding-left:26%; padding-right:5%}
  .dual-card h2{font-size:15px; line-height:1.1; margin-bottom:5px}
  .dual-card p{font-size:8px; line-height:1.3; margin-bottom:6px; max-width:none}
  .button{font-size:7px; padding:6px 9px; white-space:nowrap}
}
@media (max-width:600px){
  .dual{aspect-ratio:2176/820}
  .dual-card:first-child{padding-left:36%}
  .dual-card:last-child{padding-left:20%; padding-right:4%}
  .dual-card h2{font-size:10.5px; margin-bottom:4px}
  .dual-card p{font-size:6.5px; margin-bottom:5px}
  .button{font-size:6px; padding:5px 8px}
}