/* =====================================================================
   Fulltime Personalizados — base visual compartilhada (home e catálogo)
   Tema claro, calmo e elegante. Acentos da marca: magenta, tangerina,
   violeta e água. Sem bibliotecas externas.
   ===================================================================== */
:root{
  /* Tema escuro (o mesmo clima do site anterior) */
  --bg:#0C0B10;
  --bg-2:#111017;        /* faixas alternadas */
  --surface:#17151D;     /* cards */
  --surface-2:#1E1B26;
  --ink:#EDEBF2;         /* texto principal */
  --ink-soft:#CFCBD8;
  --muted:#9A94A8;
  --on-light:#17151C;    /* texto sobre fundos claros (selos, botões brancos) */
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.16);
  --night:#07060A;       /* faixas mais escuras (clientes, CTA) */
  --night-2:#15121C;
  --photo:#F1EFEC;       /* fundo atrás das fotos de produto (fotos com fundo claro) */
  --magenta:#E0218A;
  --tangerine:#FF7A1A;
  --violet:#7B2FF7;
  --aqua:#00D9C0;
  --gradient:linear-gradient(90deg, var(--magenta), var(--tangerine), var(--violet), var(--aqua));
  --radius:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --shadow:0 2px 6px rgba(0,0,0,.35), 0 22px 44px -18px rgba(0,0,0,.7);
  --shadow-lg:0 30px 80px -24px rgba(0,0,0,.85);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0;}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
@media (max-width:560px){ .wrap{padding:0 18px;} }
::selection{background:var(--magenta); color:#fff;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--violet); outline-offset:3px; border-radius:6px;}

/* ---------- Tipografia ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--muted);
}
.eyebrow::before{content:''; width:22px; height:2px; border-radius:2px; background:var(--gradient);}
.display{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.05;
  font-variation-settings:"opsz" 144;
}
.display em{
  font-style:italic; font-weight:400;
  background:var(--gradient); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 10s ease-in-out infinite;
}
.section-title{font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.6vw,3rem); letter-spacing:-.015em; line-height:1.1; max-width:720px;}
.section-desc{max-width:580px; color:var(--muted); margin-top:18px; font-size:1.02rem;}
@keyframes shimmer{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-weight:500; font-size:15px; line-height:1;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn-primary{background:var(--magenta); color:#fff; box-shadow:0 12px 32px -12px rgba(224,33,138,.7);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(224,33,138,.8); filter:brightness(1.08);}
.btn-accent{background:var(--magenta); color:#fff; box-shadow:0 10px 30px -12px rgba(224,33,138,.65);}
.btn-accent:hover{transform:translateY(-2px); filter:brightness(1.06);}
.btn-ghost{border:1px solid var(--line-2); color:var(--ink); background:rgba(255,255,255,.03);}
.btn-ghost:hover{border-color:var(--aqua); background:rgba(0,217,192,.06); transform:translateY(-2px);}
.btn .arrow{transition:transform .35s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}
.btn-whats svg{width:18px; height:18px;}

/* ---------- Cabeçalho ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(12,11,16,.74); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom-color:var(--line); box-shadow:0 8px 30px -18px rgba(0,0,0,.6);
}
.site-header nav{display:flex; align-items:center; justify-content:flex-start; gap:0; max-width:1200px; margin:0 auto; padding:16px 28px;}
@media (max-width:560px){ .site-header nav{padding:12px 18px;} }
.logo{display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; letter-spacing:.01em; white-space:nowrap; flex-shrink:0;}
.logo img{height:30px; width:auto;}
.navlinks{display:flex; align-items:center; gap:30px; margin-left:auto; flex-shrink:0;}
.navlinks a:not(.btn){font-size:14px; color:var(--muted); position:relative; transition:color .2s;}
.navlinks a:not(.btn)::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);}
.navlinks a:not(.btn):hover, .navlinks a.current{color:var(--ink);}
.navlinks a:not(.btn):hover::after, .navlinks a.current::after{transform:scaleX(1);}
.navlinks .btn, .nav-wa{padding:11px 20px; font-size:14px;}
.nav-wa{margin-left:10px;}
.nav-wa-menu{display:none;}
.sel-header{
  display:inline-flex; align-items:center; gap:8px; margin-left:16px;
  padding:10px 12px 10px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.06); color:var(--ink);
  font-size:14px; font-weight:500; line-height:1; white-space:nowrap;
  transition:transform 200ms var(--ease), opacity 200ms var(--ease), border-color .2s;
}
.sel-header svg{width:16px; height:16px; flex-shrink:0; color:var(--magenta);}
.sel-header:hover{transform:translateY(-1px); border-color:rgba(224,33,138,.55);}
.sel-header.is-empty{color:var(--muted); border-color:var(--line); background:transparent;}
.sel-header.is-empty svg{color:var(--muted);}
.sel-header.is-empty:hover{transform:none; border-color:var(--line-2); color:var(--ink-soft);}
.sel-short{display:none;}
.sel-badge{
  min-width:22px; height:22px; padding:0 6px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--magenta); color:#fff; font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sel-badge[hidden]{display:none;}
.sel-header.pop .sel-badge{animation:selPulse 280ms var(--ease);}
@keyframes selPulse{0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)}}
.sel-hint{
  position:fixed; z-index:140; width:max-content; max-width:220px; margin:0; pointer-events:none;
  padding:8px 12px; border-radius:12px;
  background:var(--ink); color:var(--on-light); font-size:13px; font-weight:500; line-height:1.35;
  box-shadow:var(--shadow);
}
.sel-hint::before{
  content:''; position:absolute; top:-5px; left:var(--arrow, 28px); margin-left:-5px;
  border:5px solid transparent; border-top:0; border-bottom-color:var(--ink);
}
.sel-hint[hidden]{display:none;}
.menu-btn{display:none; width:42px; height:42px; border-radius:50%; align-items:center; justify-content:center; border:1px solid var(--line-2); background:rgba(255,255,255,.04);}
.menu-btn span{display:block; width:16px; height:1.5px; background:var(--ink); position:relative; transition:transform .3s;}
.menu-btn span::before, .menu-btn span::after{content:''; position:absolute; left:0; width:16px; height:1.5px; background:var(--ink); transition:transform .3s, top .3s;}
.menu-btn span::before{top:-5px;} .menu-btn span::after{top:5px;}
.menu-open .menu-btn span{background:transparent;}
.menu-open .menu-btn span::before{top:0; transform:rotate(45deg);}
.menu-open .menu-btn span::after{top:0; transform:rotate(-45deg);}
@media (max-width:1040px){
  .menu-btn{display:inline-flex; margin-left:8px; order:3; flex-shrink:0;}
  .logo{margin-right:auto;}
  .navlinks{margin-left:0;}
  .sel-header{order:1; flex-shrink:0;}
  .nav-wa{order:2; flex-shrink:0;}
  .navlinks{
    position:fixed; inset:66px 12px auto 12px; flex-direction:column; align-items:stretch; gap:4px;
    background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:12px; box-shadow:var(--shadow-lg);
    opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:opacity .25s, transform .3s var(--ease);
  }
  .navlinks a:not(.btn){padding:12px 14px; font-size:16px; color:var(--ink); border-radius:12px;}
  .navlinks a:not(.btn)::after{display:none;}
  .navlinks a:not(.btn):hover{background:var(--surface-2);}
  .navlinks .btn{margin-top:6px; padding:14px;}
  .menu-open .navlinks{opacity:1; transform:none; pointer-events:auto;}
}
@media (max-width:780px){
  .nav-wa{display:none;}
  .nav-wa-menu{display:inline-flex;}
  .sel-header{margin-left:8px; padding:8px 10px; font-size:13px;}
  .sel-long{display:none;}
  .sel-short{display:inline;}
}
@media (max-width:460px){
  .site-header nav{padding:10px 12px;}
  .logo{font-size:13.5px; gap:6px;}
  .logo img{height:26px;}
  .sel-header{padding:6px 8px; font-size:12.5px; gap:6px; margin-left:6px;}
  .menu-btn{width:38px; height:38px; margin-left:6px;}
}

/* ---------- Revelar ao rolar (só se o JS ligar) ---------- */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.js .reveal.in{opacity:1; transform:none;}
.js .reveal[data-delay="1"]{transition-delay:.08s;}
.js .reveal[data-delay="2"]{transition-delay:.16s;}
.js .reveal[data-delay="3"]{transition-delay:.24s;}
.js .reveal[data-delay="4"]{transition-delay:.32s;}

/* ---------- Rodapé (igual em todas as páginas) ---------- */
.site-footer{border-top:1px solid var(--line); padding:64px 0 28px; background:var(--bg); font-size:14px; color:var(--muted);}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1.25fr .7fr; gap:40px;}
.foot-brand .logo{color:var(--ink); margin-bottom:14px;}
.foot-brand p{max-width:300px; line-height:1.6;}
.foot-legal{margin-top:16px; font-size:12.5px; line-height:1.6;}
.foot-col h2{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--ink-soft); margin-bottom:14px;}
.foot-col p{line-height:1.6;}
.foot-col p + p, .foot-col address + p{margin-top:12px;}
.foot-col address{font-style:normal;}
.foot-col ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.foot-col a{display:inline-flex; align-items:center; gap:8px; color:var(--muted); transition:color .2s; overflow-wrap:anywhere;}
.foot-col a:hover{color:var(--ink);}
.foot-col a svg{width:16px; height:16px; flex-shrink:0;}
.foot-bottom{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px;}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){
  .site-footer{padding:52px 0 24px;}
  .foot-grid{grid-template-columns:1fr; gap:30px;}
}
@media (max-width:779px){ .site-footer{padding-bottom:96px;} } /* espaço para o botão flutuante */

/* ---------- WhatsApp fixo (só no celular) ---------- */
.wa-float{display:none;}
@media (max-width:779px){
  .wa-float{
    position:fixed; z-index:90; right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom));
    display:inline-flex; align-items:center; gap:8px; padding:13px 18px 13px 15px; border-radius:999px;
    background:#25D366; color:#0B2E17; font-weight:600; font-size:14.5px; line-height:1;
    box-shadow:0 12px 30px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) inset;
    transition:opacity .25s, transform .3s var(--ease);
  }
  .wa-float svg{width:22px; height:22px;}
  .wa-float:active{transform:scale(.96);}
  /* some enquanto o menu, o detalhe do produto ou o zoom estão abertos */
  body:has(.site-header.menu-open) .wa-float,
  body:has(.sheet.open) .wa-float,
  body:has(.zoom.open) .wa-float{opacity:0; pointer-events:none; transform:translateY(12px);}
}

/* ---------- Visualizador de foto (zoom) ---------- */
.zoom{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(8,7,11,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.zoom.open{opacity:1; pointer-events:auto;}
.zoom-stage{position:absolute; inset:0; overflow:hidden; cursor:zoom-in;}
.zoom-stage.zoomed{cursor:grab;}
.zoom-stage.dragging{cursor:grabbing;}
.zoom-img{
  position:absolute; left:50%; top:50%; max-width:min(92vw,1100px); max-height:84vh; width:auto; height:auto;
  transform-origin:0 0; will-change:transform; border-radius:12px; box-shadow:var(--shadow-lg); background:var(--photo);
}
.zoom-img.anim{transition:transform .35s var(--ease);}
.zoom-bar{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:4px; padding:6px; border-radius:999px;
  background:rgba(30,27,38,.92); color:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.zoom-bar button{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .2s;}
.zoom-bar button:hover{background:rgba(255,255,255,.14);}
.zoom-bar .zoom-level{min-width:52px; text-align:center; font-size:12.5px; font-variant-numeric:tabular-nums; opacity:.8;}
.zoom-close{
  position:absolute; top:18px; right:18px; z-index:2; width:46px; height:46px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);
}
.zoom-close:hover{transform:rotate(90deg);}
.zoom-caption{position:absolute; top:26px; left:24px; right:80px; z-index:2; font-size:14px; color:var(--ink-soft); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.zoom-hint{position:absolute; bottom:84px; left:50%; transform:translateX(-50%); font-size:12.5px; color:var(--muted); z-index:2; white-space:nowrap; transition:opacity .4s;}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .js .reveal{opacity:1; transform:none;}
  .sel-header:hover{transform:none;}
}