/* ==========================================================================
   NOBRE ORIQUE — mobile.css
   Experiência MOBILE (telas ate 768px), usada por index.html (Home) e por
   loja.html (Nossa Loja). Componentes visualmente identicos nas duas
   paginas (cabecalho, botoes, kicker, botao flutuante, revelacao ao
   rolar) foram unificados aqui em uma unica definicao, evitando CSS
   duplicado entre as paginas.
   ========================================================================== */

:root {
  --bg:#070604; --bg2:#10100e; --panel:#151411; --gold:#c99627; --gold2:#f0c967;
  --cream:#fff7e7; --muted:#cfc6b4; --line:rgba(240,201,103,.28); --white:#fff;
  --serif: Georgia, 'Times New Roman', serif; --sans: Inter, Montserrat, Arial, sans-serif;
  --mp: 22px; /* padding lateral padrao mobile */
}

/* --------------------------------------------------------------------------
   Controle de visibilidade — ativa a experiencia mobile somente <=768px e
   esconde a experiencia desktop nessa faixa. Estas regras so encontram
   elementos correspondentes em index.html; em loja.html (pagina 100%
   propria da experiencia mobile) elas simplesmente nao casam com nada.
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  body > header.header, body > main, body > footer.footer, body > a.float{ display:none !important; }
}
#mobileApp{ display:none; }
@media (max-width:768px){ #mobileApp{ display:block; } }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.mob-page, #mobileApp{
  background:var(--bg); color:#fff; font-family:var(--sans); overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
#mobileApp *, .mob-page *{ box-sizing:border-box; }
#mobileApp img, .mob-page img{ max-width:100%; display:block; }
#mobileApp a, .mob-page a{ text-decoration:none; color:inherit; }

/* foco visivel para navegacao por teclado (acessibilidade) */
#mobileApp a:focus-visible, .mob-page a:focus-visible{
  outline:2px solid var(--gold2); outline-offset:2px; border-radius:8px;
}

/* --------------------------------------------------------------------------
   Componentes compartilhados (Home + Loja)
   -------------------------------------------------------------------------- */

/* cabecalho fixo */
.mob-header{
  position:sticky; top:0; z-index:60; height:64px;
  display:flex; align-items:center; padding:0 var(--mp);
  background:linear-gradient(180deg,rgba(5,4,3,.97),rgba(5,4,3,.90));
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  will-change:transform;
}
.mob-header.mob-header-split{ justify-content:space-between; }
.mob-header.mob-header-start{ justify-content:flex-start; gap:14px; }
.mob-header img{ width:118px; height:auto; }
.mob-header-wa{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold2),var(--gold)); color:#15100a;
  box-shadow:0 8px 22px rgba(201,150,39,.34);
}
.mob-header-wa svg{ width:20px; height:20px; }
.mob-back{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16); color:#fff;
}
.mob-back svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }

/* botao flutuante whatsapp */
.mob-float{
  position:fixed; right:18px; bottom:18px; z-index:55; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; color:#15100a;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 14px 34px rgba(201,150,39,.4);
}
.mob-float svg{ width:26px; height:26px; fill:currentColor; }

/* rotulo "kicker" (etiqueta dourada pequena) */
.mob-kicker{
  color:var(--gold2); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:10px;
}
.mob-kicker:before{ content:""; width:26px; height:1px; background:var(--gold2); }
.mob-kicker.mob-kicker-light{ color:var(--gold2); }

.mob-h2{
  font-family:var(--serif); font-weight:600; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(26px,7.2vw,32px); margin:0 0 8px; color:#fff;
}
.mob-gold{ color:var(--gold2); }

/* botoes */
.mob-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:0 22px; border-radius:999px; font-size:14px; font-weight:800;
  white-space:nowrap; width:100%; border:1px solid transparent;
}
.mob-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; flex:0 0 auto; }
.mob-btn-primary{
  background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,#8a6215); color:#120d05;
  box-shadow:0 14px 34px rgba(201,150,39,.28);
}
.mob-btn-ghost{ background:rgba(255,255,255,.04); color:#fff; border-color:rgba(240,201,103,.45); }
.mob-btn-wa svg{ stroke:none; fill:currentColor; }

/* bloco generico de secao */
.mob-block{ padding:44px 0; }
.mob-block.mob-block-tight{ padding:30px var(--mp); }
.mob-section-head{ padding:0 var(--mp); margin-bottom:22px; }

/* revelacao suave ao rolar */
.mob-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.mob-reveal-show{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .mob-reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   PAGINA 1 — HOME (index.html)
   ========================================================================== */

.mob-hero{
  position:relative; height:80vh; min-height:560px; max-height:720px; overflow:hidden;
}
.mob-hero-slides{ position:absolute; inset:0; }
.mob-hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .8s ease; will-change:opacity;
}
.mob-hero-slide.is-active{ opacity:1; }
.mob-hero-slide picture, .mob-hero-slide img{ display:block; width:100%; height:100%; }
.mob-hero-slide img{ object-fit:cover; object-position:60% 30%; }
.mob-hero-slides:after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,4,3,.12) 0%,rgba(5,4,3,.40) 38%,rgba(5,4,3,.74) 62%,rgba(5,4,3,.96) 100%);
}
.mob-hero-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 var(--mp) 34px;
}
.mob-hero-body .mob-eyebrow{
  display:flex; align-items:flex-start; gap:9px;
  color:var(--gold2); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:800; margin-bottom:14px;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.45);
}
.mob-hero-body .mob-eyebrow:before{ content:""; width:20px; height:1px; margin-top:.6em; flex:0 0 auto; background:var(--gold2); }
.mob-hero-body .mob-eyebrow span{ display:block; }
.mob-hero-body h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.04em; line-height:1.02;
  font-size:clamp(34px,9.4vw,46px); margin:0 0 14px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 6px 22px rgba(0,0,0,.5);
}
.mob-hero-body p{
  font-size:15.5px; line-height:1.62; color:rgba(255,255,255,.9); margin:0 0 24px; max-width:36ch;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.mob-hero-actions{ display:flex; flex-direction:column; gap:12px; }

/* telas mobile de pouca altura (ex.: 320x568): reduz a Hero para caber
   inteira, com botoes, dentro da primeira dobra, sem afetar telas normais */
@media (max-height:700px){
  .mob-hero{ height:74vh; min-height:400px; max-height:480px; }
  .mob-hero-body{ padding-bottom:22px; }
}

@media (prefers-reduced-motion: reduce){
  .mob-hero-slide{ transition:none; }
}

/* destaques */
.mob-highlights{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:26px var(--mp); background:var(--bg2);
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
}
.mob-highlight{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.mob-highlight .mob-hi-icon{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  border:1px solid rgba(240,201,103,.3); color:var(--gold2);
}
.mob-highlight .mob-hi-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
.mob-highlight strong{ font-size:12px; font-weight:800; color:#fff; line-height:1.2; }
.mob-highlight span{ font-size:11px; color:rgba(255,255,255,.55); line-height:1.2; }

/* carrossel premium (stories) */
.mob-story{ position:relative; }
.mob-story-progress{ position:absolute; top:14px; left:var(--mp); right:var(--mp); z-index:5; display:flex; gap:6px; }
.mob-story-progress i{
  flex:1; height:3px; border-radius:99px; background:rgba(255,255,255,.28); overflow:hidden;
  position:relative; font-style:normal; display:block;
}
.mob-story-progress i b{ position:absolute; inset:0; width:0%; background:var(--gold2); display:block; border-radius:99px; }
.mob-story-progress i.done b{ width:100%; }
.mob-story-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.mob-story-track::-webkit-scrollbar{ display:none; }
.mob-story-slide{ flex:0 0 100%; scroll-snap-align:start; position:relative; height:78vw; max-height:460px; min-height:380px; }
.mob-story-slide img{ width:100%; height:100%; object-fit:cover; }
.mob-story-slide:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.82) 100%); }
.mob-story-caption{ position:absolute; left:var(--mp); right:var(--mp); bottom:26px; z-index:3; }
.mob-story-caption b{ display:block; font-family:var(--serif); font-weight:600; font-size:24px; color:#fff; letter-spacing:-.02em; line-height:1.14; margin-bottom:6px; }
.mob-story-caption span{ display:block; font-size:13.5px; color:rgba(255,255,255,.78); }

/* categorias */
.mob-categories{ display:flex; gap:18px; overflow-x:auto; padding:2px var(--mp) 8px; scrollbar-width:none; scroll-snap-type:x proximity; }
.mob-categories::-webkit-scrollbar{ display:none; }
.mob-category{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:9px; scroll-snap-align:start; width:66px; }
.mob-cat-icon{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(240,201,103,.34); background:linear-gradient(160deg,rgba(240,201,103,.08),rgba(240,201,103,.02));
  color:var(--gold2);
}
.mob-cat-icon svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.6; }
.mob-category span{ font-size:11.5px; font-weight:700; color:rgba(255,255,255,.8); text-align:center; }

/* galeria */
.mob-gallery{ display:flex; gap:14px; overflow-x:auto; padding:2px var(--mp) 8px; scrollbar-width:none; scroll-snap-type:x proximity; }
.mob-gallery::-webkit-scrollbar{ display:none; }
.mob-gallery-card{
  flex:0 0 auto; width:44vw; max-width:220px; scroll-snap-align:start;
  border-radius:20px; overflow:hidden; position:relative; height:280px;
  border:1px solid rgba(255,255,255,.08); background:#111;
}
.mob-gallery-card img{ width:100%; height:100%; object-fit:cover; }
.mob-gallery-card:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.82)); }
.mob-gallery-card span{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; color:#fff; font-size:14px; font-weight:800; }

/* avaliacoes (resumo) */
.mob-reviews{ padding:0 var(--mp); text-align:center; }
.mob-google-box{
  border:1px solid var(--line); border-radius:24px; padding:26px 20px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); margin-bottom:16px;
}
.mob-google-box .mob-stars{ color:var(--gold2); font-size:19px; letter-spacing:.14em; font-weight:900; }
.mob-google-box strong{ display:block; font-family:var(--serif); font-size:40px; margin:6px 0 4px; color:#fff; }
.mob-google-box strong span{ font-size:18px; color:rgba(255,255,255,.5); font-family:var(--sans); }
.mob-google-box small{ display:block; color:rgba(255,255,255,.6); font-weight:700; font-size:12.5px; }

/* cta loja */
.mob-store-cta{ position:relative; margin:0 var(--mp); border-radius:26px; overflow:hidden; display:block; height:200px; border:1px solid rgba(240,201,103,.4); }
.mob-store-cta img{ width:100%; height:100%; object-fit:cover; }
.mob-store-cta:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(5,4,3,.92)); }
.mob-store-cta-body{ position:absolute; left:24px; right:24px; bottom:20px; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.mob-store-cta-body h3{ font-family:var(--serif); font-size:24px; font-weight:600; color:#fff; margin:4px 0 0; letter-spacing:-.02em; }
.mob-store-cta-arrow{ width:44px; height:44px; border-radius:50%; background:var(--gold2); color:#15100a; flex:0 0 auto; display:grid; place-items:center; font-size:20px; }

.mob-foot-space{ height:12px; }

/* ==========================================================================
   PAGINA 2 — NOSSA LOJA (loja.html)
   ========================================================================== */

.loja-intro{ padding:34px var(--mp) 6px; }
.loja-intro h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.035em; line-height:1.06;
  font-size:clamp(30px,8.6vw,38px); margin:0 0 14px; color:#fff;
}
.loja-intro p{ font-size:15px; line-height:1.68; color:rgba(255,255,255,.72); margin:0; max-width:40ch; }

.loja-gold{
  background:radial-gradient(circle at 80% 10%,rgba(201,150,39,.14),transparent 40%),var(--bg2);
  border:1px solid var(--line); border-radius:24px; padding:26px 22px; margin:0 var(--mp);
}
.loja-gold h2{ font-family:var(--serif); font-weight:600; font-size:22px; margin:0 0 10px; color:#fff; letter-spacing:-.02em; }
.loja-gold p{ font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.72); margin:0 0 18px; }

.loja-card{ margin:0 var(--mp); border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:var(--panel); }
.loja-card-photo{ height:230px; position:relative; }
.loja-card-photo img{ width:100%; height:100%; object-fit:cover; }
.loja-card-photo:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(9,7,5,.55)); }
.loja-card-body{ padding:20px 22px 24px; }
.loja-card-body h2{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0 0 8px; color:#fff; }
.loja-card-body address{ font-style:normal; font-size:14px; line-height:1.6; color:rgba(255,255,255,.68); margin:0 0 18px; }

.loja-checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 var(--mp); }
.loja-check{
  display:flex; align-items:center; gap:10px; padding:14px 14px; border-radius:16px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  font-size:12.5px; font-weight:700; color:rgba(255,255,255,.86); line-height:1.25;
}
.loja-check svg{ width:18px; height:18px; flex:0 0 auto; stroke:var(--gold2); fill:none; stroke-width:2.2; }

.loja-footer{
  margin-top:14px; padding:44px var(--mp) 26px;
  background:radial-gradient(circle at 86% 0%,rgba(201,150,39,.10),transparent 34%),#050403;
  border-top:1px solid rgba(240,201,103,.10);
}
.loja-footer-logo{ width:150px; margin-bottom:14px; }
.loja-footer p{ color:rgba(255,255,255,.62); line-height:1.6; font-size:13.5px; margin:0; max-width:34ch; }
.loja-footer-since{
  display:inline-flex; margin-top:14px; padding:7px 12px; border:1px solid var(--line); border-radius:999px;
  color:var(--gold2); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
}
.loja-footer h4{ margin:26px 0 12px; color:var(--gold2); font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
.loja-map-card{
  margin-top:14px; display:flex; gap:12px; align-items:center; max-width:280px; padding:13px 14px;
  border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.03);
}
.loja-map-icon{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(240,201,103,.10); color:var(--gold2); flex:0 0 auto; }
.loja-map-icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
.loja-map-card strong{ display:block; color:#fff; font-size:13.5px; }
.loja-map-card small{ display:block; margin-top:2px; color:rgba(255,255,255,.55); font-size:11.5px; }
.loja-footer-social{ display:flex; gap:10px; margin-top:6px; }
.loja-footer-social a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--gold2); background:rgba(255,255,255,.025);
}
.loja-footer-social svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; }
.loja-footer-social a:nth-child(2) svg{ fill:currentColor; stroke:none; }
.loja-footer-phone{ color:rgba(255,255,255,.78); font-size:13.5px; font-weight:700; margin-top:4px; display:block; }
.loja-copy{ margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.46); font-size:11.5px; line-height:1.7; }
.loja-copy a{ color:var(--gold2); font-weight:900; }

/* ==========================================================================
   GALERIA MOBILE — ajuste fino de enquadramento por imagem (object-position)
   ========================================================================== */
[data-sitecontrol="galeria-mobile-6"]{ object-position:center 40%; }
[data-sitecontrol="galeria-mobile-7"]{ object-position:center 30%; }
[data-sitecontrol="galeria-mobile-8"]{ object-position:center 55%; }