/* Fábrica de Sequilhos · v10 (06/10/2026)
   fundos: cor da hero (creme-id), branco e menta. botões verdes. zero gradiente. */
:root{
  --bg:#FBF1E8;
  --creme:#F6E7D8;
  --creme-id:#F1DECE;
  --halo:#FBF1E8;
  --branco:#FFFDFC;
  --tinta:#3B1410;
  --suave:#6E4740;
  --vinho:#672A27;
  --vinho-esc:#4E1D1B;
  --rosa:#D85460;
  --rosa-esc:#C23B4B;
  --vichy:#DE6B78;
  --cta:#1B8036;
  --cta-hover:#166B2D;
  --cta-press:#115523;
  --blush:#FBE5E2;
  --menta:#DCEFE6;
  --menta-mid:#B1CDCD;
  --menta-linha:#CFE3DA;
  --manteiga:#FBEFCB;
  --linha:#F0D9D4;
  --raio:22px;
  --raio-xl:28px;
  --sombra:0 18px 40px -18px rgba(103,42,39,.35);
  --sombra-foto:0 30px 60px -30px rgba(78,29,27,.45);
  --ease:cubic-bezier(.23,1,.32,1);
  --f-display:'Baloo 2',ui-rounded,'Nunito Sans',sans-serif;
  --f-corpo:'Nunito Sans',ui-sans-serif,sans-serif;
  --vichy-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='22' height='44' fill='%23DE6B78' fill-opacity='.55'/%3E%3Crect width='44' height='22' fill='%23DE6B78' fill-opacity='.55'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--tinta);font-family:var(--f-corpo);font-size:17px;line-height:1.6;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3{font-family:var(--f-display);color:var(--tinta);margin:0;font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(1.8rem,7.4vw,3.5rem);line-height:1.02}
h2{font-size:clamp(2rem,6.4vw,3.3rem);line-height:1.04}
h3{font-size:1.32rem;line-height:1.15;font-weight:700}
h1 em,h2 em{font-style:normal;color:var(--rosa-esc)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* faixa xadrez vichy (SVG sólido) */
.vichy-band{height:18px;background:var(--vichy-tile) 0 0/22px 22px;background-color:var(--branco)}
.vichy-band.sobre-creme{background-color:var(--creme-id)}
.vichy-band.sobre-vinho{background-color:var(--menta)}

/* botões de compra */
.btn{appearance:none;border:0;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:1.14rem;letter-spacing:.005em;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;
  background:var(--cta);color:var(--branco);padding:16px 32px;border-radius:999px;min-height:58px;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(27,128,54,.6);transition:transform .16s var(--ease),background-color .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97);background:var(--cta-press)}
.btn:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
@media (hover:hover){.btn:hover{background:var(--cta-hover);box-shadow:0 14px 28px -10px rgba(27,128,54,.65)}}
.btn-sm{padding:9px 18px;min-height:44px;font-size:.98rem;box-shadow:none}
.btn-full{width:100%}

/* topo */
.topo{position:sticky;top:0;z-index:20;background:rgba(241,222,206,.95);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.topo-logo{height:42px;width:auto}

/* ============ HERO: chamada dentro da arte ============ */
.hero{position:relative;background:var(--manteiga);padding:0 0 12px} /* msg 2674: mesmo fundo da vitrine, sem faixa bege */
.hero-wrap{padding:0}
.hero-poster{display:grid;grid-template-areas:"art" "cta";position:relative}
.hero-bg{display:none}
.hero-art{grid-area:art;position:relative;z-index:0;overflow:hidden}
.hero-art img{width:100%;height:auto}
.hero-copy{grid-area:art;align-self:end;position:relative;z-index:2;padding:0 22px 20px;isolation:isolate}
/* msg 2649: chamada direto na arte, sem sombreamento */
.selo{display:inline-flex;align-items:center;gap:9px;background:var(--branco);border-radius:999px;padding:5px 13px 5px 10px;font-weight:800;font-size:.8rem;color:var(--vinho);margin-bottom:10px;box-shadow:0 6px 16px -10px rgba(103,42,39,.5)}
.selo-pino{width:9px;height:9px;border-radius:50%;background:var(--rosa);box-shadow:0 0 0 4px rgba(216,84,96,.18)}
.hero-copy h1{color:var(--tinta);max-width:15ch}
/* msg 2652: hachurado, faixa sólida atrás de cada linha (marca-texto) */
.hachura{background:var(--halo);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.04em .28em;border-radius:6px}
/* msg 2655: chamada em 2 linhas; subtítulo em bloco vinho próprio */
.hero-copy h1{line-height:1.3;max-width:none;font-size:clamp(1.2rem,5.85vw,1.8rem);white-space:nowrap}
/* v21 msg 2683: chamada longa em 5 linhas equilibradas, menor pra caber sobre a arte sem cobrir o rosto */
.hero-copy h1{font-size:clamp(1rem,5.5vw,1.6rem);line-height:1.34}
.hero-copy .hero-sub{display:block;margin-top:12px;max-width:none;background:var(--vinho);color:var(--branco);font-weight:400;font-size:clamp(.8rem,3.65vw,.92rem);line-height:1.45;padding:10px 14px;border-radius:16px 16px 16px 4px}
.hero-copy .hero-sub strong{font-weight:800}
.hero-sub{margin-top:10px;font-size:.98rem;line-height:1.45;color:var(--vinho-esc);font-weight:600;max-width:40ch}
.hero-cta{grid-area:cta;padding:20px 20px 0;display:grid;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips li{display:inline-flex;align-items:center;gap:6px;background:var(--branco);border-radius:999px;padding:6px 13px 6px 9px;font-size:.86rem;font-weight:700;color:var(--tinta)}
.chips svg{width:16px;height:16px;fill:none;stroke:var(--cta);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* seções base */
.sec{padding:80px 0}
.titulo-centro{text-align:center;max-width:20ch;margin:0 auto}
.lead-centro{text-align:center;color:var(--suave);max-width:52ch;margin:14px auto 0;font-size:1.08rem}

/* ============ GRADE DE PRODUTO: vitrine bento (v15) ============ */
.grade-sec{background:var(--manteiga);padding-top:28px;padding-bottom:72px;overflow:hidden} /* msg 2692: sem vão bege depois da hero */
.grade-sec .lead-centro{color:#6A3F35}
/* fita de sabores que corre (CSS puro, leve no iPhone) */
.vt-fita{margin-top:30px;overflow:hidden;background:var(--vinho);padding:12px 0;transform:rotate(-1.6deg);margin-left:-8px;margin-right:-8px}
.vt-fita-run{display:flex;width:max-content;align-items:center;animation:vt-corre 32s linear infinite;will-change:transform}
.vt-fita span{font-family:var(--f-display);font-weight:700;font-size:1.12rem;line-height:1;color:var(--manteiga);padding:0 18px;white-space:nowrap}
.vt-fita i{flex:none;width:8px;height:8px;border-radius:50%;background:#F7A9B2}
@keyframes vt-corre{to{transform:translateX(-50%)}}
.vitrine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(104px,31vw,150px);gap:10px;margin-top:34px;
  grid-template-areas:"cor cor" "cor cor" "cor cor" "fio coco" "fio bol" "n4 n4" "n4 n4" "n1 n2" "n1 n3" "verm verm" "verm verm" "pal est" "pal croc" "n8 n8" "n8 n8" "n6 n5" "n6 n7" "barr barr" "barr barr" "mesa sort" "n9 n10" "band band" "band band" "n11 n12"}
.vt-cor{grid-area:cor}.vt-fio{grid-area:fio}.vt-coco{grid-area:coco}.vt-bol{grid-area:bol}.vt-verm{grid-area:verm}.vt-pal{grid-area:pal}
.vt-est{grid-area:est}.vt-n1{grid-area:n1}.vt-n2{grid-area:n2}.vt-n3{grid-area:n3}.vt-n4{grid-area:n4}.vt-n5{grid-area:n5}.vt-n6{grid-area:n6}.vt-n7{grid-area:n7}.vt-n8{grid-area:n8}.vt-n9{grid-area:n9}.vt-n10{grid-area:n10}.vt-n11{grid-area:n11}.vt-n12{grid-area:n12}.vt-croc{grid-area:croc}.vt-barr{grid-area:barr}.vt-mesa{grid-area:mesa}.vt-sort{grid-area:sort}.vt-band{grid-area:band}
.vt{min-width:0}
.vt figure{position:relative;height:100%;border-radius:18px;overflow:hidden;background:var(--blush);isolation:isolate;box-shadow:0 16px 30px -20px rgba(78,29,27,.55)}
.vt-big figure{border-radius:24px}
.vt img{width:100%;height:100%;object-fit:cover;scale:var(--z,1);transition:transform .7s var(--ease)}
.vt-cap{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);background:var(--branco);border-radius:12px;padding:6px 10px;
  box-shadow:0 8px 18px -10px rgba(78,29,27,.45)}
.vt-cap strong{display:block;font-family:var(--f-display);font-weight:700;font-size:.88rem;line-height:1.15;color:var(--tinta)}
.vt-big .vt-cap{left:12px;bottom:12px;max-width:calc(100% - 24px);padding:10px 14px 11px;border-radius:16px}
.vt-big .vt-cap strong{font-size:1.18rem;color:var(--vinho-esc)}
.vt-cap span{display:block;margin-top:2px;font-size:.84rem;font-weight:600;line-height:1.35;color:var(--suave)}
@media (hover:hover){.vt:hover img{transform:scale(1.06)}}

/* faixa */
/* v16: fora da cozinha, 3 pilares (msgs 2664/2665) */
.faixa{background:var(--menta);padding:72px 0 76px;overflow:hidden}
.fx-head{max-width:760px}
.fx-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--cta-press);margin-bottom:12px}
.fx-kick span{background:var(--branco);border-radius:999px;padding:3px 12px;color:var(--vinho)}
.faixa h2{color:var(--vinho-esc);font-size:clamp(2rem,7.6vw,3.4rem)}
.fx-lead{margin-top:14px;font-size:1.08rem;max-width:52ch;color:#3F4D47}
.fx-grid{display:grid;gap:14px;margin-top:34px}
.fx-col{display:grid;gap:14px;align-content:start}
.fx-pilar{position:relative;background:var(--branco);border-radius:var(--raio-xl);padding:24px 20px 14px;box-shadow:0 18px 36px -24px rgba(36,82,62,.45)}
.fx-ph{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.fx-n{font-family:var(--f-display);font-weight:800;font-size:2.7rem;line-height:.9;color:var(--rosa-esc);letter-spacing:-.03em}
.fx-tag{font-family:var(--f-display);font-weight:700;font-size:.86rem;line-height:1;background:var(--menta);color:var(--cta-press);border-radius:999px;padding:7px 12px 6px}
.fx-pilar h3{font-size:1.32rem;line-height:1.18;color:var(--vinho-esc);max-width:26ch}
.fx-list{margin-top:10px}
.fx-t{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--menta-linha);font-weight:700;font-size:1rem;line-height:1.35;color:var(--tinta)}
.fx-t:first-child{border-top:0}
.fx-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--menta)}
.fx-ic svg{width:21px;height:21px;fill:none;stroke:var(--cta);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* pilar 3: o maior, em vinho */
.fx-p3{background:var(--vinho);padding-top:26px;box-shadow:0 26px 50px -26px rgba(78,29,27,.6)}
.fx-p3 .fx-n{color:#F7A9B2}
.fx-p3 .fx-tag{background:var(--manteiga);color:var(--vinho-esc)}
.fx-p3 h3{color:var(--manteiga);font-size:clamp(1.7rem,6.6vw,2.3rem);max-width:calc(100% - 104px)}
.fx-p3 .fx-t{color:var(--branco);border-top-color:rgba(251,239,203,.18)}
.fx-p3 .fx-ic{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(247,169,178,.55)}
.fx-p3 .fx-ic svg{stroke:#F7A9B2}
.fx-polaroid{position:absolute;top:-16px;right:14px;width:96px;background:var(--branco);padding:5px 5px 16px;border-radius:6px;transform:rotate(6deg);box-shadow:0 18px 30px -14px rgba(36,12,10,.6);z-index:1}
.fx-polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 55%;border-radius:3px}
.fx-cta{margin-top:30px}
.fx-cta .btn{width:100%}

/* ============ CONTEÚDOS COMPLEMENTARES: trilho de capítulos ============ */
.extras-sec{background:var(--creme-id);padding:80px 0 60px;overflow:hidden}
.extras-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.extras-head h2{max-width:15ch}
.extras-nav{display:none;gap:10px;flex:none}
.nav-btn{width:52px;height:52px;border-radius:50%;border:0;background:var(--branco);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 22px -14px rgba(78,29,27,.6);transition:transform .16s var(--ease),background-color .2s ease}
.nav-btn:active{transform:scale(.94)}
.nav-btn:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.nav-btn svg{width:24px;height:24px;fill:none;stroke:var(--vinho);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.nav-btn:hover{background:var(--menta)}}
.extras-rail{margin-top:32px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:20px}
.extras-rail::-webkit-scrollbar{display:none}
.extras-rail:focus-visible{outline:3px solid var(--cta);outline-offset:-3px}
.extras-track{display:flex;gap:14px;padding:4px 20px 8px;width:max-content}
.cap{flex:0 0 auto;width:min(82vw,360px);aspect-ratio:3/4.5;position:relative;border-radius:var(--raio-xl);overflow:hidden;
  scroll-snap-align:start;background:var(--menta);isolation:isolate;box-shadow:var(--sombra-foto)}
.cap-foto{position:absolute;inset:0}
.cap-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.04);transition:transform 1.2s var(--ease)}
@media (hover:hover){.cap:hover .cap-foto img{transform:scale(1.09)}}
.cap-txt{position:absolute;left:10px;right:10px;bottom:10px;background:var(--branco);border-radius:20px;padding:18px 18px 20px}
.cap-n{position:absolute;top:12px;right:16px;font-family:var(--f-display);font-weight:800;font-size:2.2rem;line-height:1;color:var(--rosa-esc);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cap-kick{display:block;font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cta);margin-bottom:4px}
.cap h3{font-size:1.36rem;color:var(--vinho-esc);padding-right:56px;margin-bottom:8px;line-height:1.12}
.cap p{font-size:.95rem;line-height:1.5;color:var(--suave)}
.extras-prog{margin-top:22px;display:flex;justify-content:center}
.prog-bar{display:block;width:180px;height:5px;border-radius:5px;background:rgba(103,42,39,.14);overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--cta);border-radius:5px;transform-origin:0 50%;transform:scaleX(.2)}

/* ============ PARA QUEM É: zigue-zague editorial ============ */
.perfil-sec{background:var(--creme-id);overflow:hidden}
.pf-head{max-width:760px}
.pf-kick{color:var(--vinho)}
.perfil-titulo{font-size:clamp(2.4rem,10vw,5rem);line-height:.98;color:var(--vinho-esc);max-width:12ch}
.pfs{display:grid;gap:44px;margin-top:62px}
.pf{position:relative;display:flow-root;background:var(--branco);border-radius:var(--raio-xl);padding:22px 20px 24px;box-shadow:0 18px 36px -24px rgba(103,42,39,.42)}
.pf-polaroid{float:right;width:118px;margin:-44px -6px 10px 14px;background:var(--branco);padding:5px 5px 16px;border-radius:6px;transform:rotate(5deg);box-shadow:0 18px 30px -14px rgba(36,12,10,.55);position:relative;z-index:1}
.pf-polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:3px}
.pf-2 .pf-polaroid{transform:rotate(-4deg)}
.pf-ph{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-bottom:12px}
.pf-n{font-family:var(--f-display);font-weight:800;font-size:2.7rem;line-height:.9;color:var(--rosa-esc);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pf-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:700;font-size:.86rem;line-height:1;background:var(--menta);color:var(--cta-press);border-radius:999px;padding:6px 12px 5px 8px}
.pf-tag svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pf h3{font-size:1.42rem;line-height:1.12;color:var(--vinho-esc);margin-bottom:10px}
.pf p{font-size:1rem;line-height:1.55;color:var(--suave)}
.pf-2{background:var(--vinho);box-shadow:0 26px 50px -26px rgba(78,29,27,.6)}
.pf-2 .pf-n{color:#F7A9B2}
.pf-2 .pf-tag{background:var(--manteiga);color:var(--vinho-esc)}
.pf-2 h3{color:var(--manteiga)}
.pf-2 p{color:rgba(255,253,252,.88)}
.pf-2 .pf-polaroid{box-shadow:0 18px 30px -12px rgba(20,6,5,.7)}

/* ============ OFERTA: ancoragem (v21, msg 2683) ============ */
.oferta-sec{background:var(--manteiga);overflow:clip}
.of-card{position:relative;display:grid;gap:26px;background:var(--branco);border-radius:var(--raio-xl);padding:30px 20px 24px;box-shadow:0 26px 50px -28px rgba(103,42,39,.5);max-width:1080px;margin:0 auto}
.of-leva{position:relative}
.of-pols{position:absolute;top:-62px;right:-4px;width:132px;height:150px;pointer-events:none}
.of-pol{position:absolute;background:var(--branco);padding:5px 5px 16px;border-radius:6px;box-shadow:0 18px 30px -14px rgba(36,12,10,.55)}
.of-pol img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.of-pol-a{width:92px;right:0;top:0;transform:rotate(6deg);z-index:2}
.of-pol-a img{object-position:50% 20%}
.of-pol-b{width:80px;right:66px;top:30px;transform:rotate(-7deg);z-index:1}
.of-kick{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:.86rem;line-height:1;background:var(--menta);color:var(--cta-press);border-radius:999px;padding:7px 12px 6px}
.of-leva h2{margin-top:12px;font-size:clamp(2rem,8.4vw,3.2rem);color:var(--vinho-esc);max-width:9ch}
.of-lista{margin-top:16px}
.of-it{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:13px 0;border-top:1px solid var(--linha)}
.of-it:first-child{border-top:0}
.of-ck{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--menta);margin-top:1px}
.of-ck svg{width:17px;height:17px;fill:none;stroke:var(--cta);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.of-it strong{display:block;font-family:var(--f-display);font-weight:700;font-size:1.12rem;line-height:1.2;color:var(--vinho-esc)}
.of-it div>span{display:block;margin-top:2px;font-size:.95rem;line-height:1.45;color:var(--suave)}
.of-preco{display:grid;gap:16px;align-content:start}
.of-ticket{position:relative;background:var(--vinho);color:var(--manteiga);border-radius:24px;padding:26px 22px 24px;text-align:center;box-shadow:0 26px 50px -26px rgba(78,29,27,.6)}
.of-ticket{--tp:22px}
.of-vista{position:relative}
.of-vista::before,.of-vista::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--branco)}
.of-vista::before{left:calc(-1 * var(--tp) - 11px)}
.of-vista::after{right:calc(-1 * var(--tp) - 11px)}
.of-de{font-weight:700;font-size:1.05rem;color:rgba(251,239,203,.86)}
.of-de s{text-decoration-thickness:2px;text-decoration-color:#F7A9B2}
.of-por{font-family:var(--f-display);font-weight:700;font-size:1rem;line-height:1;margin-top:8px;color:rgba(251,239,203,.86)}
.of-parc{display:flex;flex-direction:column;align-items:center;margin-top:6px;font-family:var(--f-display);font-weight:800;line-height:.95}
.of-x{font-size:1.5rem;color:var(--manteiga)}
.of-valor{font-size:clamp(3.4rem,17vw,5rem);color:#F7A9B2;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:4px}
.of-vista{margin-top:20px;padding-top:18px;border-top:2px dashed rgba(251,239,203,.35);font-size:1.12rem;color:var(--manteiga)}
.of-vista strong{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--branco)}
.of-selo{position:absolute;top:-22px;right:-8px;display:grid;place-items:center;align-content:center;width:84px;height:84px;border-radius:50%;background:var(--manteiga);color:var(--vinho-esc);box-shadow:0 0 0 4px var(--branco),0 14px 24px -12px rgba(36,12,10,.6);transform:rotate(10deg);text-align:center}
.of-selo b{font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:.8;color:var(--rosa-esc)}
.of-selo span{font-weight:800;font-size:.62rem;line-height:1.1;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.of-btn{width:100%;min-height:64px;font-size:1.22rem}
.of-garantia{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;background:var(--creme-id);border-radius:18px;padding:12px 14px}
.of-gic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--branco)}
.of-gic svg{width:24px;height:24px;fill:none;stroke:var(--cta);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.of-garantia p{font-size:.93rem;line-height:1.45;color:var(--tinta)}
.of-garantia strong{color:var(--vinho-esc)}
.of-pag{font-size:.88rem;line-height:1.45;color:var(--suave);text-align:center}
@media (min-width:640px){
  .of-card{padding:40px 36px 34px}
  .of-pols{top:-70px;right:4px;width:170px;height:190px}
  .of-pol-a{width:118px}
  .of-pol-b{width:100px;right:86px;top:38px}
}
@media (min-width:960px){
  .of-card{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;padding:56px 56px 52px;align-items:start}
  .of-leva h2{font-size:3.3rem;max-width:10ch}
  .of-pols{top:-92px;right:-6px;width:210px;height:230px}
  .of-pol-a{width:142px;padding:7px 7px 22px}
  .of-pol-b{width:118px;right:108px;top:52px;padding:7px 7px 20px}
  .of-lista{margin-top:22px}
  .of-it{grid-template-columns:34px 1fr;gap:14px;padding:15px 0}
  .of-ck{width:34px;height:34px}
  .of-it strong{font-size:1.24rem}
  .of-it span{font-size:1rem}
  .of-preco{position:sticky;top:100px;gap:18px}
  .of-ticket{padding:34px 28px 28px;--tp:28px}
  .of-valor{font-size:5.2rem}
  .of-selo{width:96px;height:96px;top:-26px;right:-18px}
  .of-selo b{font-size:2.2rem}
}

/* ============ INCLUI: foto grande + folha ============ */
.inclui-sec{background:var(--menta)}
.inclui-grid{display:grid}
.inclui-visual{position:relative}
.inclui-foto{border-radius:var(--raio-xl);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sombra-foto);background:var(--branco)}
.inclui-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.inclui-inset{position:absolute;right:14px;top:38%;width:40%;aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:6px solid var(--branco);
  box-shadow:0 24px 40px -20px rgba(78,29,27,.55);transform:rotate(4deg);z-index:1}
.inclui-inset img{width:100%;height:100%;object-fit:cover}
.inclui-txt{position:relative;z-index:2;margin-top:-88px;background:var(--branco);border-radius:var(--raio-xl);padding:30px 22px 26px}
.inclui-txt h2{font-size:clamp(2rem,8vw,3.2rem)}
.inclui-list{margin-top:14px}
.inc{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--menta-linha)}
.inc:first-child{border-top:0}
.ic{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--menta)}
.ic svg{width:26px;height:26px;fill:none;stroke:var(--cta);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inc h3{font-size:1.22rem;color:var(--vinho-esc);margin:3px 0 4px}
.inc p{color:var(--suave);font-size:.96rem;line-height:1.5}
.inclui-cta{margin-top:10px}
.inclui-cta .btn{width:100%}

/* mari */
.mari-sec{background:var(--creme-id)}
.mari-grid{display:grid;gap:34px}
.mari-foto{border-radius:var(--raio);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sombra);border:3px solid var(--branco);outline:3px solid var(--vichy)}
.mari-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.sobre{font-weight:800;color:var(--cta);font-size:.95rem;margin-bottom:10px}
.mari-txt h2{font-size:clamp(1.8rem,5.4vw,2.8rem);margin-bottom:22px}
.mari-txt p:not(.sobre){margin-bottom:16px;max-width:62ch}
.mari-fecho{font-weight:800;color:var(--vinho)}

/* faq */
.faq-sec{background:var(--branco)}
.faq-wrap{max-width:860px}
.faq{margin-top:36px;display:grid;gap:10px}
.faq details{background:var(--creme-id);border:1px solid transparent;border-radius:18px;transition:background-color .2s ease}
.faq details[open]{background:var(--creme)}
.faq summary{list-style:none;cursor:pointer;padding:19px 56px 19px 20px;position:relative;font-family:var(--f-display);font-weight:700;font-size:1.12rem;line-height:1.25;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C23B4B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--cta);outline-offset:2px;border-radius:18px}
.faq details p{padding:0 20px 20px;color:var(--suave);max-width:64ch}

/* final */
.final-sec{background:var(--menta);padding:72px 0;scroll-margin-top:40px}
.final-grid{display:grid;gap:34px;align-items:center}
.final-txt h2{color:var(--vinho-esc)}
.final-txt>p{margin:14px 0 26px;font-size:1.1rem;color:#4F5D57;max-width:44ch}
.final-btn{width:100%}
.final-foto{border-radius:var(--raio);overflow:hidden;aspect-ratio:4/5;max-height:600px;border:3px solid var(--branco);outline:3px solid var(--vichy)}
.final-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

.rodape{background:var(--creme-id);color:#6E4740;padding:28px 0;font-size:.84rem;text-align:center}

/* ============ tablet ============ */
@media (min-width:640px){
  .vitrine{grid-auto-rows:150px;gap:14px}
  .hero-wrap{padding:24px 20px 0}
  .hero-poster{max-width:520px;margin:0 auto}
  .hero-art{border-radius:var(--raio-xl);border:3px solid var(--branco);outline:3px solid var(--vichy)}
  .hero-cta{padding:22px 0 0}
  .extras-nav{display:flex}
  .final-btn{width:auto}
  .inclui-cta .btn{width:auto}
  .pfs{max-width:620px}
  .pf-2{margin-left:48px}
}

/* ============ desktop ============ */
@media (min-width:960px){
  .wrap{padding:0 40px}
  .topo-in{height:72px}
  .topo-logo{height:48px}
  .sec{padding:120px 0}

  /* hero: pôster único, fundo é a própria arte desfocada, chamada sobreposta na borda da foto */
  .hero{padding:32px 0 24px}
  .hero-wrap{padding:0 40px}
  .hero-poster{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;
    grid-template-areas:"copy art" "cta art";border-radius:34px;overflow:hidden;isolation:isolate;
    border:3px solid var(--branco);outline:3px solid var(--vichy);box-shadow:var(--sombra)}
  .hero-bg{display:block;position:absolute;inset:-80px;z-index:-2;background:url(/assets/hero-id.webp) 40% 45%/cover no-repeat;filter:blur(46px) saturate(1.15)}
  .hero-poster::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(251,241,232,.55)}
  .hero-art{grid-area:art;border:0;outline:0;border-radius:0}
  .hero-art img{height:min(76vh,700px);min-height:600px;width:auto}
  .hero-copy{grid-area:copy;align-self:end;margin-right:0;padding:56px 48px 0 60px}
  .hero-copy h1{font-size:clamp(2.8rem,3.8vw,3.5rem);max-width:17ch}
  .hachura{background:none;padding:0}
  .hero-copy h1{line-height:1.08;white-space:normal}
  /* v21: 5 linhas fixas (br), tamanho acompanha a largura da coluna pra nunca quebrar no meio */
  .hero-copy h1{font-size:clamp(1.25rem,calc(7vw - 49px),2.3rem);line-height:1.14;max-width:none;white-space:nowrap}
  .hero-copy .hero-sub{background:none;color:var(--vinho-esc);padding:0;border-radius:0;line-height:1.45;font-size:1.14rem}
  .hero-sub{font-size:1.14rem;max-width:36ch;margin-top:16px}
  .selo{font-size:.86rem;padding:7px 15px 7px 11px;margin-bottom:16px}
  .hero-cta{grid-area:cta;padding:28px 40px 52px 60px;justify-items:start;position:relative;z-index:2}
  .hero-cta .btn-full{width:auto;padding:18px 38px;font-size:1.22rem}
  .chips{justify-content:flex-start;max-width:440px}

  .grade-sec{padding-top:48px;padding-bottom:110px}
  .vt-fita{margin-top:40px;padding:15px 0}
  .vt-fita span{font-size:1.4rem;padding:0 26px}
  .vitrine{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(190px,17vw,230px);gap:18px;margin-top:52px;
    grid-template-areas:"cor cor fio coco" "cor cor fio bol" "n1 n2 n4 n4" "n1 n3 n4 n4" "verm verm est pal" "verm verm croc pal" "n6 n5 n8 n8" "n6 n7 n8 n8" "mesa sort barr barr" "n9 n10 barr barr" "band band n11 n12" "band band n11 n12"}
  .vt figure{border-radius:22px}
  .vt-big figure{border-radius:28px}
  .vt-cap{left:12px;bottom:12px;padding:8px 13px}
  .vt-cap strong{font-size:1rem}
  .vt-big .vt-cap{left:18px;bottom:18px;padding:13px 18px 14px;border-radius:18px}
  .vt-big .vt-cap strong{font-size:1.45rem}
  .vt-big .vt-cap span{font-size:.96rem}
  .faixa{padding:110px 0 104px}
  .fx-grid{grid-template-columns:5fr 7fr;gap:20px;margin-top:48px;align-items:start}
  .fx-col{gap:20px}
  .fx-pilar{padding:32px 30px 20px}
  .fx-n{font-size:3.4rem}
  .fx-pilar h3{font-size:1.5rem}
  .fx-p3{padding:36px 36px 24px}
  .fx-p3 h3{font-size:2.6rem;max-width:calc(100% - 180px)}
  .fx-list-2{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .fx-list-2 .fx-t:nth-child(2){border-top:0}
  .fx-polaroid{width:150px;top:-30px;right:30px;padding:7px 7px 24px}
  .fx-cta{text-align:center;margin-top:44px}
  .fx-cta .btn{width:auto}

  /* extras */
  .extras-sec{padding:120px 0 90px}
  .extras-rail{scroll-padding-inline:max(40px,calc((100vw - 1120px)/2))}
  .extras-track{gap:22px;padding:4px max(40px,calc((100vw - 1120px)/2)) 8px}
  .cap{width:400px;aspect-ratio:auto;height:min(64vh,580px);min-height:500px}
  .cap-txt{left:14px;right:14px;bottom:14px;padding:22px 24px 24px}
  .cap h3{font-size:1.6rem}
  .cap p{font-size:1.02rem}
  .cap-n{font-size:2.6rem;top:16px;right:20px}
  /* modo pan horizontal (JS liga .is-pan) */
  .extras-sec.is-pan{padding:0}
  .extras-sec.is-pan .extras-pin{height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
  .extras-sec.is-pan .extras-rail{overflow:visible;scroll-snap-type:none}
  .extras-sec.is-pan .extras-nav{display:none}
  .extras-sec.is-pan .extras-track{will-change:transform}

  /* perfil: degraus subindo do start ao escalar */
  .perfil-titulo{font-size:clamp(4rem,6vw,5.6rem)}
  .pfs{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:24px;margin-top:40px;align-items:start}
  .pf-2{margin-left:0}
  .pf-1{margin-top:120px}
  .pf-2{margin-top:60px}
  .pf{padding:30px 28px 32px}
  .pf-polaroid{width:150px;margin:-58px -10px 12px 16px;padding:7px 7px 22px}
  .pf-n{font-size:3.5rem}
  .pf-tag{font-size:.92rem;padding:7px 14px 6px 10px}
  .pf h3{font-size:1.62rem;margin-bottom:12px;clear:right;padding-top:4px}
  .pf p{font-size:1.06rem}

  /* inclui */
  .inclui-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
  .inclui-foto{aspect-ratio:auto;height:720px}
  .inclui-inset{right:auto;left:-34px;top:auto;bottom:-44px;width:42%;transform:rotate(-5deg)}
  .inclui-txt{margin:0 0 0 -64px;padding:54px 54px 46px}
  .inclui-txt h2{font-size:3.3rem}
  .inc{grid-template-columns:60px 1fr;gap:22px;padding:22px 0}
  .ic{width:60px;height:60px}
  .ic svg{width:28px;height:28px}
  .inc h3{font-size:1.4rem}
  .inc p{font-size:1.04rem}
  .inclui-cta{margin-top:16px}

  .mari-grid{grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
  .final-grid{grid-template-columns:1.1fr .9fr;gap:72px}
  .final-sec{scroll-margin-top:72px}
}

@media (prefers-reduced-motion:reduce){
  .vt-fita-run{animation:none}
  .btn,.vt img,.faq summary::after,.nav-btn,.cap-foto img{transition:none}
}
@media (min-width:960px){
  .extras-sec.is-pan .cap-foto img{width:116%;max-width:none;margin-left:-8%}
}

/* msg 2689: tirinha correndo no topo no lugar da barra fixa */
.tira{position:sticky;top:0;z-index:20;overflow:hidden;background:var(--vinho);padding:9px 0}
.tira-run{display:flex;width:max-content;align-items:center;animation:vt-corre 26s linear infinite;will-change:transform}
.tira span{font-family:var(--f-display);font-weight:700;font-size:.98rem;line-height:1;color:var(--manteiga);padding:0 16px;white-space:nowrap;letter-spacing:.01em}
.tira .tira-dest{color:#F7A9B2}
.tira i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--manteiga);opacity:.7}
@media (prefers-reduced-motion:reduce){.tira-run{animation:none}}
@media (min-width:960px){.tira{padding:11px 0}.tira span{font-size:1.1rem;padding:0 22px}}
.oferta-sec{scroll-margin-top:40px}