@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..900;1,62..125,400..900&display=swap');

:root{
  --papel:#FFFFFF; --tinta:#14231C; --tinta-2:#46574E; --pinheiro:#0F5132; --pinheiro-2:#0B3D26;
  --etiqueta:#FFD23F; --laco:#B3122E; --linha:#D9DED6; --nevoa:#F3F5F1;
  --f:"Archivo","Arial Narrow",Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.55 var(--f);font-stretch:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--etiqueta);outline-offset:2px}
.w{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}

/* barra */
.barra{border-bottom:1px solid var(--linha)}
.barra .w{display:flex;justify-content:space-between;align-items:center;min-height:60px;gap:12px}
.nome{font-weight:800;font-stretch:75%;font-size:20px;text-decoration:none;letter-spacing:.01em}
.barra a.wa-link{font-weight:600;font-size:15px;text-decoration:none;color:var(--pinheiro)}
.barra a.wa-link:hover{text-decoration:underline}

/* botão */
.bt{display:inline-block;background:var(--pinheiro);color:#fff;text-decoration:none;font-weight:700;font-size:18px;padding:16px 26px;border-radius:6px;border:0;cursor:pointer;transition:background .15s}
.bt:hover{background:var(--pinheiro-2)}
.bt:active{transform:translateY(1px)}

/* topo: o título é o formulário */
.topo{padding-block:clamp(36px,6vw,72px) 28px}
.frase{font-weight:900;font-stretch:68%;font-size:clamp(44px,7.6vw,104px);line-height:.92;letter-spacing:-.01em;margin:0;max-width:21ch}
.frase label{display:inline}
.campo{font:inherit;font-stretch:inherit;color:var(--pinheiro);background:transparent;border:0;border-bottom:.06em solid var(--etiqueta);
  padding:0 .04em;margin:0;width:6.2ch;min-width:3ch;max-width:100%;border-radius:0;letter-spacing:inherit}
.campo::placeholder{color:#9DB3A6}
.campo:focus{outline:none;border-bottom-color:var(--pinheiro)}
.ajustes{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin:28px 0 0;font-size:17px;color:var(--tinta-2)}
.ajustes label{display:flex;gap:10px;align-items:center}
.ajustes select,.ajustes input{font:600 17px var(--f);color:var(--tinta);background:var(--nevoa);border:1px solid var(--linha);border-radius:6px;padding:9px 12px}
.ajustes input{width:15ch}

/* vitrine: feed + stories da loja digitada */
.vitrine{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(16px,2.4vw,32px);align-items:end;margin-top:34px}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.cels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cel{background:#101411;border-radius:30px;padding:7px}
.cel .art{border-radius:24px}
@media (max-width:860px){
  .vitrine{grid-template-columns:1fr}
  .cels{grid-template-columns:1fr 1fr;max-width:520px}
}
.legenda{color:var(--tinta-2);font-size:15px;margin:12px 0 0}
.acao{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px;padding-top:26px;border-top:1px solid var(--linha)}
.acao p{margin:0;color:var(--tinta-2);max-width:46ch}
.acao b{color:var(--tinta)}

/* seções seguintes: calmas */
.bloco{padding-block:clamp(56px,8vw,96px)}
.bloco + .bloco{border-top:1px solid var(--linha)}
h2{font-weight:900;font-stretch:70%;font-size:clamp(34px,5vw,60px);line-height:.95;margin:0 0 18px;letter-spacing:-.005em}
.intro{color:var(--tinta-2);max-width:58ch;margin:0 0 36px}

/* cupons */
.cupons{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.cupom{flex:1 1 320px;max-width:440px;background:var(--nevoa);padding:26px 26px 34px;position:relative;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 12px) no-repeat,radial-gradient(circle 7px at 50% 0,transparent 98%,#000) bottom/18px 12px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 12px) no-repeat,radial-gradient(circle 7px at 50% 0,transparent 98%,#000) bottom/18px 12px repeat-x}
.cupom h3{font-weight:800;font-stretch:75%;font-size:28px;margin:0}
.cupom .pra{color:var(--tinta-2);font-size:15px;margin:2px 0 18px}
.cupom ul{list-style:none;margin:0;padding:0}
.cupom li{display:flex;gap:8px;align-items:baseline;padding:6px 0;font-size:16px}
.cupom li::after{content:"";flex:1;order:1;border-bottom:1.5px dotted #A8B5AD;transform:translateY(-4px)}
.cupom li span{order:0}.cupom li em{order:2;font-style:normal;font-weight:700}
.cupom .total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--tinta);margin-top:14px;padding-top:12px}
.cupom .total b{font-weight:900;font-stretch:70%;font-size:46px;line-height:1}
.cupom .bt{display:block;text-align:center;margin-top:20px}
.cupom.leve .bt{background:transparent;color:var(--pinheiro);border:2px solid var(--pinheiro);padding:14px}
.cupom.leve .bt:hover{background:var(--pinheiro);color:#fff}
.extra{margin-top:30px;max-width:900px;color:var(--tinta-2)}
.extra b{color:var(--tinta)}

/* prazos: linha do tempo real */
.prazos{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.prazos::before{content:"";position:absolute;left:0;right:0;top:15px;height:3px;background:var(--linha)}
.prazos li{position:relative;padding:44px 14px 0 0}
.prazos li::before{content:"";position:absolute;top:7px;left:0;width:19px;height:19px;border-radius:50%;background:var(--papel);border:3px solid var(--pinheiro)}
.prazos li.vermelho::before{border-color:var(--laco);background:var(--laco)}
.prazos time{display:block;font-weight:900;font-stretch:70%;font-size:34px;line-height:1}
.prazos li.vermelho time{color:var(--laco)}
.prazos span{display:block;color:var(--tinta-2);font-size:15px;margin-top:6px;max-width:20ch}
@media (max-width:760px){
  .prazos{grid-template-columns:1fr}
  .prazos::before{left:8px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .prazos li{padding:0 0 26px 40px}.prazos li::before{top:6px}
}

/* quem faz */
.quem p{margin:0 0 14px;max-width:62ch}

/* dúvidas */
.duvidas details{max-width:780px}
.duvidas details{border-top:1px solid var(--linha);padding-block:16px}
.duvidas details:last-child{border-bottom:1px solid var(--linha)}
.duvidas summary{cursor:pointer;font-weight:700;font-size:18px}
.duvidas p{color:var(--tinta-2);margin:8px 0 0}

/* fim */
.fim{background:var(--pinheiro);color:#fff}
.fim .w{padding-block:clamp(48px,7vw,80px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.fim h2{margin:0;max-width:16ch}
.fim .bt{background:var(--etiqueta);color:var(--tinta)}
.fim .bt:hover{background:#FFE07A}
.rodape-site{font-size:14px;color:var(--tinta-2);padding-block:22px}
.rodape-site .w{display:flex;flex-wrap:wrap;gap:6px 22px}

/* ===================== ARTES ===================== */
.art{container-type:inline-size;aspect-ratio:1/1;position:relative;overflow:hidden;font-family:var(--f);color:#fff;background:var(--b)}
.art.story{aspect-ratio:9/16}
.art p{margin:0}
.art .loja{position:absolute;left:7%;bottom:6%;right:7%;font-weight:700;font-size:5.2cqw;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 1 black */
.a-black .bf{position:absolute;left:6%;top:7%;display:flex;flex-direction:column;font-weight:900;font-stretch:62%;font-size:27cqw;line-height:.8;text-transform:uppercase}
.a-black .bf span:last-child{color:transparent;-webkit-text-stroke:.5cqw var(--l)}
.a-black .bf-data{position:absolute;right:7%;bottom:15%;font-weight:900;font-stretch:62%;font-size:24cqw;line-height:.8;color:var(--l);text-align:right}
.a-black .bf-data small{display:block;font-size:7cqw;letter-spacing:.06em;color:#fff;font-stretch:100%}

/* 2 etiqueta */
.a-tag{background:#F6F3EE;color:var(--b)}
.a-tag .fio{position:absolute;left:50%;top:-4%;width:.8cqw;height:24%;background:#8a7f72;transform:rotate(14deg);transform-origin:top}
.a-tag .etq{position:absolute;left:21%;top:18%;width:58%;height:62%;background:var(--etiqueta);transform:rotate(-6deg);
  clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);display:flex;flex-direction:column;justify-content:flex-end;padding:0 9% 9%;color:var(--tinta)}
.a-tag .furo{position:absolute;top:6%;left:50%;width:5cqw;height:5cqw;margin-left:-2.5cqw;border-radius:50%;background:#F6F3EE;box-shadow:inset 0 0 0 .6cqw rgba(0,0,0,.12)}
.a-tag .it{font-weight:700;font-size:4.8cqw;line-height:1.1}
.a-tag s{font-size:4.6cqw;opacity:.7;margin-top:1cqw}
.a-tag b{font-weight:900;font-stretch:62%;font-size:13.5cqw;line-height:.95;white-space:nowrap}
.a-tag .loja{color:var(--b)}

/* 3 calendário */
.a-cal{background:var(--l)}
.a-cal .folha{position:absolute;inset:9% 9% 9%;background:#fff;color:var(--tinta);display:flex;flex-direction:column}
.a-cal header{background:var(--b);color:#fff;font-weight:800;font-size:7cqw;padding:4% 7%}
.a-cal ol{list-style:none;margin:0;padding:6% 5%;display:grid;grid-template-columns:repeat(7,1fr);gap:1cqw;text-align:center;font-weight:800;font-stretch:70%;font-size:8.5cqw}
.a-cal li.on{background:var(--b);color:var(--l);border-radius:50%}
.a-cal p{margin:auto 7% 7%;font-weight:800;font-stretch:72%;font-size:9.5cqw;line-height:.95}

/* 4 presente */
.a-gift .fita-v{position:absolute;top:0;bottom:0;left:62%;width:11%;background:var(--l)}
.a-gift .fita-h{position:absolute;left:0;right:0;top:30%;height:11%;background:var(--l)}
.a-gift .laco,.s-natal .laco{position:absolute;width:0;height:0}
.a-gift .laco{left:67.5%;top:26%}.s-natal .laco{left:76.5%;top:19%}
.a-gift .laco::before,.a-gift .laco::after,.s-natal .laco::before,.s-natal .laco::after{content:"";position:absolute;top:-6cqw;width:15cqw;height:12cqw;border:2.4cqw solid var(--l);border-radius:50%}
.a-gift .laco::before,.s-natal .laco::before{right:0;transform:rotate(-22deg);transform-origin:right center}
.a-gift .laco::after,.s-natal .laco::after{left:0;transform:rotate(22deg);transform-origin:left center}
.a-gift .msg{position:absolute;left:7%;right:42%;bottom:17%;font-weight:900;font-stretch:66%;font-size:10.5cqw;line-height:.92}

/* 5 conversa */
.a-chat{background:#E9E3D8;color:#111}
.a-chat .bal{position:absolute;max-width:74%;font-size:5.6cqw;line-height:1.25;padding:3.6cqw 4.4cqw;border-radius:3cqw}
.a-chat .eu{left:7%;top:12%;background:#fff;border-top-left-radius:0}
.a-chat .ela{right:7%;top:42%;background:#D7F8C4;border-top-right-radius:0}
.a-chat .rodape{position:absolute;left:0;right:0;bottom:0;background:var(--b);color:#fff;font-weight:700;font-size:5.2cqw;padding:5% 7%}

/* 6 placa */
.a-placa{background:var(--b)}
.a-placa .corda{position:absolute;left:30%;right:30%;top:6%;height:20%;border:.7cqw solid #c9b79a;border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0}
.a-placa .placa{position:absolute;left:16%;right:16%;top:24%;bottom:22%;background:#F6F3EE;color:var(--b);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:2cqw;box-shadow:0 0 0 1.6cqw var(--l) inset}
.a-placa span{font-weight:700;font-size:5.4cqw}
.a-placa b{font-weight:900;font-stretch:62%;font-size:30cqw;line-height:.85}

/* stories */
.art.story .topo{position:absolute;left:8%;top:5%;right:8%;font-weight:700;font-size:5.6cqw;padding:0}
.s-count .sticker{position:absolute;left:10%;right:10%;top:36%;background:#fff;color:#111;border-radius:5cqw;padding:7cqw 6cqw;text-align:center}
.s-count .sticker span{display:block;font-weight:700;font-size:5.6cqw;margin-bottom:4cqw}
.s-count .dig{display:flex;justify-content:center;gap:1.4cqw;align-items:center}
.s-count .dig b{background:var(--b);color:#fff;font-weight:800;font-size:11cqw;width:11cqw;padding:1.4cqw 0;border-radius:1.6cqw}
.s-count .dig em{font-style:normal;font-weight:800;font-size:9cqw}
.s-count .sticker small{display:block;margin-top:5cqw;font-weight:700;font-size:5cqw;color:var(--b)}
.s-count .sub{position:absolute;left:8%;right:8%;bottom:10%;font-weight:800;font-stretch:72%;font-size:9cqw;line-height:1}
.s-natal .fita-v{position:absolute;top:0;bottom:0;left:72%;width:9%;background:var(--l)}
.s-natal .caixa{position:absolute;left:8%;right:30%;top:40%}
.s-natal .caixa b{display:block;font-weight:900;font-stretch:64%;font-size:14cqw;line-height:.9}
.s-natal .caixa span{display:block;margin-top:5cqw;font-size:5.4cqw;font-weight:600}
.s-natal .link{position:absolute;left:8%;right:8%;bottom:7%;background:#fff;color:#111;font-weight:700;font-size:5cqw;text-align:center;padding:4cqw;border-radius:3cqw}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}