/* Boutique Gisele Mattos · site */
:root{
  --preto:#000; --carvao:#0E0C09; --ink:#16130F; --muted:#5E554A;
  --ouro:#C9AD74; --ouro-claro:#E6D3A3; --ouro-txt:#7A5C27; --ouro-linha:#3A3122;
  --rose:#E7B7B1; --rose-soft:#F6E2DE; --rose-txt:#8E4038;
  --creme:#F7F3EC; --creme-2:#EFE8DC; --linha:#DED4C4; --branco:#fff;
  --display:"Josefin Sans","Futura","Century Gothic",sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--creme);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:300;margin:0;line-height:1.08;letter-spacing:.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ouro);color:#000;padding:10px 14px}
.pular:focus{left:8px}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

.sec{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.olho{font-family:var(--display);font-weight:400;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro-claro);margin:0 0 14px}
.olho--escuro{color:var(--ouro-txt)}

/* botões: cantos quase retos, borda sólida */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:3px;border:1.5px solid transparent;text-decoration:none;font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn--g{min-height:54px;padding:14px 26px}
.btn--cheio{width:100%}
.btn--ouro{background:var(--ouro);color:#000;border-color:var(--ouro)}
.btn--ouro:hover{background:var(--ouro-claro);border-color:var(--ouro-claro)}
.btn--linha-clara{border-color:var(--ouro-linha);color:var(--ouro-claro);background:transparent}
.btn--linha-clara:hover{border-color:var(--ouro)}
.btn--preto{background:#000;color:var(--ouro-claro);border-color:#000}
.btn--preto:hover{background:var(--ink)}

/* cabeçalho */
.cab{position:fixed;inset:0 0 auto;z-index:30;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.cab.solido{background:rgba(0,0,0,.94);border-bottom-color:var(--ouro-linha)}
@supports (backdrop-filter:blur(8px)){.cab.solido{background:rgba(0,0,0,.82);backdrop-filter:blur(10px)}}
.cab__in{max-width:1200px;margin:0 auto;padding:10px var(--gut);display:flex;align-items:center;gap:24px}
.cab__logo img{height:46px;width:auto}
.cab__nav{display:flex;gap:28px;margin-left:auto}
.cab__nav a{font-family:var(--display);font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.cab__nav a:hover{border-bottom-color:var(--ouro)}
.cab__wpp{min-height:40px;padding:8px 16px;font-size:.8rem}
@media (max-width:760px){.cab__nav{display:none}.cab__wpp{margin-left:auto}.cab__logo img{height:40px}}

/* hero */
.hero{position:relative;background:radial-gradient(120% 90% at 70% 20%,#17130d 0%,#000 62%);color:#F4EEE3;padding:128px 0 96px;overflow:hidden}
.hero__in{max-width:1200px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.9rem);font-weight:300;letter-spacing:-.005em;text-wrap:balance}
.hero h1 em{font-style:normal;display:block;background:linear-gradient(100deg,#b8975e 0%,#e6d3a3 35%,#cdb27a 60%,#ecdcae 85%,#bf9f66 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{font-size:1.1rem;color:#CFC6B6;max-width:34em;margin:22px 0 30px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero__conta{margin:22px 0 0;font-size:.92rem;color:#A99F8E}
.hero__conta b{color:var(--ouro-claro);font-weight:600}
.hero__vitrine{position:relative;min-height:420px;display:grid;place-items:center}
.hero__marca{width:min(440px,90%);opacity:.95}
.hero__vitrine.fotos{display:block}
.hero__vitrine.fotos .hero__marca{display:none}
.hf{position:absolute;margin:0;border:1px solid var(--ouro-linha);background:#111;overflow:hidden;aspect-ratio:4/5;text-decoration:none}
.hf img{width:100%;height:100%;object-fit:cover}
.hf figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.82));font-size:.85rem;color:#F4EEE3}
.hf--1{width:52%;left:24%;top:0;z-index:2}
.hf--2{width:40%;left:0;top:16%;opacity:.9}
.hf--3{width:40%;right:0;top:22%;opacity:.9}
.fita{position:absolute;left:0;right:0;bottom:6px;width:100%;height:90px;pointer-events:none}
.fita__coracao{position:absolute;right:calc(7.6% - 14px);bottom:58px;width:34px;height:30px}
@media (max-width:900px){
  .hero{padding:108px 0 84px}
  .hero__in{grid-template-columns:1fr;gap:36px}
  .hero__vitrine{min-height:0}
  .hero__vitrine:not(.fotos){display:none}
  .hero__vitrine.fotos{height:min(92vw,440px)}
}

/* vitrine */
.vitrine{padding:88px 0 72px}
.sec__cab{margin-bottom:28px}
.sec__cab h2{font-size:clamp(2.1rem,4.6vw,3.3rem)}
.sec__sub{color:var(--muted);margin:10px 0 0}
.grupos{display:flex;gap:0;border-bottom:1px solid var(--linha);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.grupos::-webkit-scrollbar{display:none}
.grupos button{flex:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 18px 10px;font-family:var(--display);font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.grupos button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cats:empty{display:none}
.cat{border:1px solid var(--linha);background:var(--branco);border-radius:2px;padding:9px 14px;font-size:.92rem;cursor:pointer;min-height:42px}
.cat[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat small{color:inherit;opacity:.65;margin-left:4px}
.procura{display:flex;align-items:center;gap:10px;border:1px solid var(--linha);background:var(--branco);padding:0 14px;margin-bottom:28px;max-width:520px}
.procura svg{width:20px;height:20px;color:var(--muted);flex:none}
.procura input{flex:1;border:0;outline:0;background:transparent;min-height:50px;font-size:1rem;min-width:0}
.procura:focus-within{border-color:var(--ink)}

.grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
@media (max-width:1000px){.grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}}
.grade__msg{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}
.vazio{grid-column:1/-1;border:1px solid var(--linha);background:var(--branco);padding:32px 22px;text-align:center}
.vazio h3{font-size:1.4rem;margin-bottom:8px}
.vazio p{color:var(--muted);margin:0 auto 18px;max-width:30em}

.card{display:block;text-align:left;background:none;border:0;padding:0;cursor:pointer;width:100%;min-width:0}
.card__foto{position:relative;aspect-ratio:4/5;background:var(--creme-2);overflow:hidden}
.card__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
@media (hover:hover){.card:hover .card__foto img{transform:scale(1.035)}}
.selo{position:absolute;left:8px;top:8px;background:#000;color:var(--ouro-claro);font-family:var(--display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 8px 3px}
.selo--promo{background:var(--rose);color:#3a1814}
.selo + .selo{top:36px}
.card__nome{font-weight:500;margin:12px 0 2px;font-size:1rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__preco{font-weight:700;font-size:1rem}
.card__preco s{font-weight:400;color:var(--muted);margin-right:6px;font-size:.9rem}
.card__tams{font-size:.82rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* como comprar */
.comprar{background:var(--creme-2);padding:80px 0;border-top:1px solid var(--linha)}
.passos{list-style:none;margin:0 0 36px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linha)}
.passos li{padding:24px 24px 8px 0;border-right:1px solid var(--linha)}
.passos li + li{padding-left:24px}
.passos li:last-child{border-right:0}
.passos b{font-family:var(--display);font-weight:300;font-size:2.6rem;line-height:1;color:var(--ouro-txt)}
.passos h3{font-size:1.3rem;font-weight:400;margin:10px 0 6px}
.passos p{margin:0;color:var(--muted)}
@media (max-width:760px){.passos{grid-template-columns:1fr}.passos li,.passos li + li{padding:20px 0;border-right:0;border-bottom:1px solid var(--linha)}}
.grupo-wpp{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--branco);border:1px solid var(--linha);padding:22px 24px}
.grupo-wpp h3{font-size:1.3rem;font-weight:400;margin-bottom:4px}
.grupo-wpp p{margin:0;color:var(--muted)}
@media (max-width:640px){.grupo-wpp{flex-direction:column;align-items:stretch}}

/* a loja */
.loja{background:#000;color:#F4EEE3;padding:84px 0}
.loja__in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.loja h2{font-size:clamp(2.1rem,4.6vw,3.3rem);margin-bottom:22px}
.loja__end{font-size:1.35rem;line-height:1.45;margin:0;font-family:var(--display);font-weight:300}
.loja__ref{color:#A99F8E;margin:8px 0 26px}
.loja__ctas{display:flex;flex-wrap:wrap;gap:12px}
.contatos{list-style:none;margin:0;padding:0;border-top:1px solid var(--ouro-linha)}
.contatos li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--ouro-linha);flex-wrap:wrap}
.contatos span{font-family:var(--display);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#A99F8E}
.contatos a{color:var(--ouro-claro);text-decoration:none;font-weight:500;overflow-wrap:anywhere}
.contatos a:hover{text-decoration:underline}
@media (max-width:820px){.loja__in{grid-template-columns:1fr;gap:36px}}

.rodape{background:#000;color:#8F8676;border-top:1px solid var(--ouro-linha);padding:36px 0 96px;font-size:.88rem}
.rodape__in{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rodape img{height:44px;width:auto}
.rodape p{margin:0;flex:1;min-width:220px}
.rodape__loja{color:#8F8676}

/* WhatsApp flutuante */
.flutua{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:25;width:56px;height:56px;border-radius:50%;background:#000;color:var(--ouro-claro);border:1.5px solid var(--ouro);display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.flutua svg{width:28px;height:28px}

/* modal da peça */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal__caixa{position:relative;background:var(--creme);width:100%;max-width:960px;max-height:calc(100vh - 48px);overflow:auto;display:grid;grid-template-columns:1.05fr .95fr}
.modal__x{position:absolute;right:10px;top:10px;z-index:3;width:44px;height:44px;border:0;background:#000;color:var(--ouro-claro);font-size:1.1rem;cursor:pointer}
.modal__fotos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--creme-2);scrollbar-width:thin}
.modal__fotos img{flex:none;width:100%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:start}
.modal__txt{padding:34px 28px 28px}
.modal__txt h3{font-size:1.9rem;font-weight:400;margin-bottom:10px}
.modal__preco{font-size:1.3rem;font-weight:700;margin:0 0 14px}
.modal__preco s{font-weight:400;color:var(--muted);font-size:1rem;margin-right:8px}
.modal__desc{color:var(--muted);margin:0 0 20px;white-space:pre-line}
.modal__desc:empty{display:none}
.modal__rot{font-family:var(--display);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 8px}
.tams{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tams button{min-width:52px;min-height:48px;padding:6px 12px;border:1.5px solid var(--linha);background:var(--branco);cursor:pointer;font-weight:600;position:relative}
.tams button[aria-pressed="true"]{border-color:#000;background:#000;color:var(--ouro-claro)}
.tams button small{display:block;font-size:.66rem;font-weight:500;color:var(--rose-txt);letter-spacing:.02em}
.tams button[aria-pressed="true"] small{color:var(--rose)}
.modal__nota{font-size:.84rem;color:var(--muted);margin:10px 0 0;text-align:center}
.pontos{display:none}
@media (max-width:760px){
  .modal{padding:0;align-items:flex-end}
  .modal__caixa{grid-template-columns:1fr;max-height:94vh}
  .modal__fotos img{aspect-ratio:4/5;max-height:48vh;object-fit:contain;background:var(--creme-2)}
  .modal__txt{padding:22px 16px calc(22px + env(safe-area-inset-bottom))}
  .modal__txt h3{font-size:1.55rem}
}