@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --black:#0A0A0A;
  --charcoal:#161616;
  --orange:#FF6A1A;
  --orange-deep:#E85A0C;
  --white:#FFFFFF;
  --bg:#FAFAF8;
  --line:#E7E3DC;
  --muted:#7A756D;
  --text:#1A1815;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}

/* ---------- Sticky header ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--black);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px;
  border-bottom:2px solid var(--orange);
}
.topbar .brand{display:flex; align-items:center; gap:10px;}
.topbar img{height:34px; width:auto; display:block;}
.topbar .brand-name{color:var(--white); font-weight:700; font-size:0.92rem; letter-spacing:0.02em; line-height:1.1;}
.topbar .brand-name span{display:block; color:var(--orange); font-size:0.65rem; font-weight:600; letter-spacing:0.12em;}
.topbar a.cta-mini{
  background:var(--orange); color:var(--black); text-decoration:none;
  font-weight:700; font-size:0.78rem; padding:9px 14px; border-radius:100px; white-space:nowrap;
}

/* ---------- Hero ---------- */
.hero{background:var(--white); padding:34px 22px 26px; text-align:center;}
.hero .logo-big{width:min(180px,46vw); height:auto; margin:0 auto 14px; display:block;}
.hero .eyebrow{color:var(--orange-deep); font-weight:700; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; margin-bottom:8px;}
.hero h1{font-size:clamp(1.6rem,6vw,2.1rem); font-weight:700; line-height:1.12; letter-spacing:-0.01em;}
.hero p{margin-top:10px; color:var(--muted); font-size:0.9rem; max-width:420px; margin-left:auto; margin-right:auto;}

/* ---------- Abas de categoria (iPhone / MacBook / iPad) ---------- */
.cat-tabs{
  display:flex; gap:6px; padding:14px 18px; background:var(--white);
  border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  max-width:900px; margin:0 auto;
}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tab{
  flex:0 0 auto; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.88rem;
  color:var(--muted); padding:10px 20px; border-radius:10px; white-space:nowrap; transition:.15s;
  background:var(--bg); border:1.5px solid var(--line);
}
.cat-tab.active{background:var(--black); color:var(--white); border-color:var(--black);}
@keyframes catGlowIphone{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,106,26,0); }
  50%{ box-shadow:0 0 12px 3px rgba(255,106,26,0.55); }
}
@keyframes catGlowMacbook{
  0%,100%{ box-shadow:0 0 0 0 rgba(10,132,255,0); }
  50%{ box-shadow:0 0 12px 3px rgba(10,132,255,0.55); }
}
@keyframes catGlowIpad{
  0%,100%{ box-shadow:0 0 0 0 rgba(191,90,242,0); }
  50%{ box-shadow:0 0 12px 3px rgba(191,90,242,0.55); }
}
.cat-tab[data-cat="iphone"]{ animation:catGlowIphone 2.2s ease-in-out infinite; }
.cat-tab[data-cat="macbook"]{ animation:catGlowMacbook 2.2s ease-in-out infinite; }
.cat-tab[data-cat="ipad"]{ animation:catGlowIpad 2.2s ease-in-out infinite; }
.cat-tab.active{ animation:none; }
.empty-cat{
  background:var(--white); border:1.5px dashed var(--line); border-radius:14px;
  padding:34px 20px; text-align:center; color:var(--muted); font-size:0.88rem; max-width:900px; margin:0 auto;
}

/* ---------- Section headers ---------- */
.section{padding:30px 18px 8px; max-width:900px; margin:0 auto;}
.section-head{margin-bottom:16px;}
.section-head h2{font-size:1.25rem; font-weight:700;}
.section-head .sub{color:var(--muted); font-size:0.82rem; margin-top:2px;}
.section-head.dark-banner{
  background:var(--black); border-radius:12px; padding:14px 16px; margin-bottom:16px;
}
.section-head.dark-banner h2{color:var(--white);}
.section-head.dark-banner .sub{color:#B5B0A8;}

/* ---------- Vitrine placeholder ---------- */
.placeholder{
  background:var(--white); border:1.5px dashed var(--line); border-radius:14px;
  padding:34px 20px; text-align:center; color:var(--muted); font-size:0.88rem;
}

/* ---------- Encomenda dark block ---------- */
.encomenda-block{
  background:#F5F5F7;
  margin-top:10px;
  padding:30px 18px 40px;
}
.encomenda-inner{max-width:900px; margin:0 auto;}
.warning-banner{
  background:#FFF4E5; border:1px solid #FFDDA8; color:#8A5A00;
  border-radius:12px; padding:14px 16px; font-size:0.8rem; line-height:1.5;
  margin-bottom:22px; display:flex; gap:10px; align-items:flex-start;
}
.warning-banner .ico{font-size:1.1rem; flex-shrink:0;}
.encomenda-block .section-head h2{color:var(--text);}
.encomenda-block .section-head .sub{color:var(--muted);}

.grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:640px){ .grid{grid-template-columns:1fr 1fr;} }

.card-dark{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.card-dark .badge{
  display:inline-block; background:var(--black); color:var(--orange);
  font-size:0.65rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; margin-bottom:10px;
}
.card-dark .badge-hot{
  background:var(--orange); color:var(--black); margin-left:6px;
}

/* ---------- Selos de conversão (gatilhos de urgência/desejo) ---------- */
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px;}
.tag-pill{
  font-size:0.64rem; font-weight:700; letter-spacing:0.01em;
  padding:4px 10px; border-radius:100px; white-space:nowrap; line-height:1.3;
}
.tag-pill.hot{background:var(--black); color:var(--orange);}
.tag-pill.urgent{
  background:var(--orange); color:var(--black);
  animation:tagPulse 2s ease-in-out infinite;
}
.tag-pill.info{background:#F1EFE9; color:var(--text); border:1px solid var(--line);}
@keyframes tagPulse{0%,100%{opacity:1;} 50%{opacity:0.7;}}

.card-dark h3{color:var(--text); font-size:1.08rem; font-weight:700;}
.storage-tag{
  display:inline-block; background:var(--orange); color:var(--black);
  font-size:0.78rem; font-weight:800; padding:2px 9px; border-radius:6px;
  vertical-align:middle; margin-left:2px;
}
.card-dark .warranty{color:var(--muted); font-size:0.8rem; margin-top:3px;}
.card-dark .pitch{color:var(--text); font-size:0.84rem; line-height:1.4; margin-top:8px; opacity:0.85;}

.short-desc{color:var(--text); font-size:0.84rem; line-height:1.4; margin-top:8px; opacity:0.85;}

.details-toggle{
  background:none; border:none; padding:6px 0 0; margin:0; cursor:pointer;
  color:var(--orange); font-size:0.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;
}
.details-toggle:hover{opacity:0.75;}
.details-toggle .chevron{display:inline-block; transition:transform .25s ease; font-size:0.65rem; line-height:1;}
.details-toggle.open .chevron{transform:rotate(180deg);}

.details-panel{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.details-panel .detail-body{padding-top:10px;}
.details-panel .detail-row{
  display:flex; justify-content:space-between; gap:10px; font-size:0.82rem;
  padding:5px 0; border-bottom:1px dashed var(--line);
}
.details-panel .detail-row:last-of-type{border-bottom:none;}
.details-panel .detail-label{color:var(--muted); font-weight:600; flex-shrink:0;}
.details-panel .detail-value{color:var(--text); text-align:right;}
.details-panel .full-desc{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  font-size:0.84rem; line-height:1.5; color:var(--text); opacity:0.9;
}

.phone-stage{
  background:radial-gradient(ellipse at 50% 30%, #FFFFFF 0%, #EDEDED 75%);
  border-radius:10px; height:180px;
  display:flex; align-items:center; justify-content:center;
  margin:14px 0 6px; position:relative; overflow:hidden;
}
.real-photo{
  max-height:168px; max-width:80%; object-fit:contain;
  filter:drop-shadow(6px 12px 14px rgba(0,0,0,0.18));
  user-select:none; -webkit-user-drag:none; cursor:zoom-in;
}
.card-dark:hover .real-photo{transform:scale(1.03) rotate(-1deg); transition:transform .3s ease;}

.media-track{
  width:100%; height:100%; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.media-track::-webkit-scrollbar{display:none;}
.media-slide{
  flex:0 0 100%; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; scroll-snap-align:center;
}
.media-dots{
  position:absolute; bottom:6px; left:0; right:0;
  display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.dot{width:5px; height:5px; border-radius:50%; background:rgba(0,0,0,0.18); transition:.15s;}
.dot.active{background:var(--orange); width:14px; border-radius:3px;}

/* ---------- Setas de navegação da galeria ---------- */
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,0.92); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; line-height:1; cursor:pointer; z-index:2;
  opacity:0.85; transition:opacity .15s ease, background .15s ease;
}
.gallery-arrow:hover{opacity:1; background:var(--white);}
.gallery-arrow.prev{left:6px;}
.gallery-arrow.next{right:6px;}

/* ---------- Modal de zoom (lightbox) ---------- */
.lightbox{
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(10,10,10,0.94);
  align-items:center; justify-content:center;
}
.lightbox.open{display:flex;}
.lightbox-img{
  max-width:88vw; max-height:78vh; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}
.lightbox-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px;
  border-radius:50%; border:none; background:rgba(255,255,255,0.12); color:var(--white);
  font-size:1.1rem; cursor:pointer;
}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.12); color:var(--white);
  font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-arrow.prev{left:14px;}
.lightbox-arrow.next{right:14px;}
.lightbox-dots{
  position:absolute; bottom:20px; left:0; right:0;
  display:flex; justify-content:center; gap:6px;
}
.lightbox-dots .dot{width:6px; height:6px; background:rgba(255,255,255,0.35);}
.lightbox-dots .dot.active{background:var(--orange); width:16px;}

.color-prompt{
  text-align:center; color:var(--muted); font-size:0.78rem; margin:8px 0 10px; font-weight:500;
}
.swatch-row{display:flex; gap:8px; justify-content:center; margin-bottom:16px;}
.swatch{
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line); cursor:pointer; padding:0; box-shadow:0 1px 3px rgba(0,0,0,0.12);
}
.swatch.active{border-color:var(--orange); box-shadow:0 0 0 2px rgba(255,106,26,0.2);}

a.buy-outline{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:var(--orange-deep); text-decoration:none;
  font-weight:700; font-size:0.85rem; padding:12px; border-radius:10px;
  border:1.5px solid var(--orange);
  transition:background .15s ease, color .15s ease;
}
a.buy-outline:hover{background:var(--orange); color:var(--black);}
a.buy-outline svg{width:16px; height:16px; fill:currentColor;}

a.buy-solid{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--black); color:var(--white); text-decoration:none;
  font-weight:700; font-size:0.85rem; padding:12px; border-radius:10px;
  transition:background .15s ease;
}
a.buy-solid:hover{background:var(--orange-deep); color:var(--black);}
a.buy-solid svg{width:16px; height:16px; fill:currentColor;}

.badge-new{background:var(--orange); color:var(--black);}
.badge-seminovo{background:#2F6F4F; color:var(--white);}
.section-head.dark-banner.seminovo-banner{background:#1C3D2C;}
.condition-line{color:var(--muted); font-size:0.8rem; margin-top:3px;}
.vitrine-info{
  background:#EFF5FB; border:1px solid #D6E6F5; color:#3A5A78;
  border-radius:12px; padding:12px 16px; font-size:0.78rem; line-height:1.5;
  margin-bottom:18px; display:flex; gap:9px; align-items:flex-start;
}
.vitrine-info.seminovo-info{background:#EAF5EE; border-color:#CDE7D8; color:#2F6F4F;}
.vitrine-info .ico{font-size:1rem; flex-shrink:0;}

.placeholder-photo{
  display:flex; align-items:center; justify-content:center;
  height:168px; background:#F1EFE9; border-radius:10px;
  color:var(--muted); font-size:0.82rem; font-weight:600;
}

/* ---------- Footer ---------- */
.footer{margin-top:10px; background:var(--black); color:var(--white); padding:40px 22px 30px; text-align:center; border-top:1px solid #1E1E1E;}
.footer .logo-small{height:40px; width:auto; margin:0 auto 14px; display:block;}
.footer h3{font-size:1.1rem; font-weight:700; margin-bottom:8px;}
.footer p{color:#C9C5BE; font-size:0.85rem; max-width:380px; margin:0 auto 22px;}
.footer a.cta-big{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange); color:var(--black); text-decoration:none;
  font-weight:700; font-size:0.95rem; padding:14px 26px; border-radius:100px;
}
.footer .fine{margin-top:22px; color:#5C5850; font-size:0.72rem;}