/* Página inicial — Ciclo UX 1 (09/10/2026).
   Ideia: a home é a parede da casa. Seções alternam o branco e a cor da parede (--wall),
   e toda foto de produto aparece como o quadro real: canto quase reto, lateral fina escura e sombra na parede. */

.fcf-home{--serif:"EB Garamond",Georgia,"Times New Roman",serif}
.fcf-home h1,.fcf-home h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
.fcf-home h2{font-size:clamp(30px,4.2vw,44px);line-height:1.06;margin:0}
.fcf-home .v-sub{color:var(--muted);font-size:15.5px;line-height:1.55;margin:10px 0 0;max-width:56ch}
.fcf-home .v-cta{width:auto;justify-self:start;min-height:52px;padding:15px 26px;border-radius:999px;font-size:16px;transition:background-color .15s}
.fcf-home .v-cta:hover{background:#bf2246}
.h-tile{display:block;border-radius:3px;overflow:hidden;background:var(--wall);box-shadow:1px 1px 0 rgba(47,43,39,.7),0 18px 34px -22px rgba(47,43,39,.6)}
.h-tile img{display:block;width:100%;height:100%;object-fit:cover}

.h-sec{padding-block:48px}
.h-wall{background:var(--wall)}
/* Duas seções seguidas da mesma cor ganham uma linha fina entre elas (vale para qualquer ordem escolhida no painel). */
.h-sec:not(.h-wall)+.h-sec:not(.h-wall),.h-wall+.h-wall{border-top:1px solid var(--line)}
.h-promises+.h-sec:not(.h-wall){border-top:0}
.h-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
/* Rodada 2: links de texto com área de toque de 44 px (R2) sem mudar o desenho da linha. */
.fcf-home .more{display:inline-block;padding-block:14px;margin-block:-14px}
.h-faq .v-faq p a,.fcf-home .wa{padding-block:14px}
.h-revs figcaption a{padding-block:15px;margin-block:-15px}

/* Banner */
.h-hero{background:var(--wall);overflow:hidden}
.h-hero-in{max-width:1180px;margin:0 auto;display:grid}
.h-hero-media{order:-1;position:relative;aspect-ratio:4/3;background:var(--wall)}
.h-hero-media>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.h-hero-copy{display:grid;gap:14px;padding:22px 16px 26px}
.h-hero h1{font-size:clamp(38px,10.4vw,72px);line-height:1;margin:0;max-width:13ch}
.h-hero-text{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5;max-width:40ch}
.h-hero-cta{margin-top:4px}
.h-jump{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:6px -16px 0;padding:2px 16px}
.h-jump::-webkit-scrollbar{display:none}
.h-jump a{flex:none;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:14px;font-weight:500;color:var(--ink);background:var(--pagebg);border:1px solid var(--line);border-radius:999px;padding:9px 15px;white-space:nowrap}
.h-jump a:hover{border-color:var(--ink)}
.h-jump a.is-date{border-color:var(--accent);color:var(--accent-text)}
.h-jump a.is-date::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px}

/* Banner em carrossel (produtos escolhidos no painel) */
.h-hero .hero-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.h-hero .hero-track::-webkit-scrollbar{display:none}
.h-hero .hero-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;color:#fff;text-decoration:none;display:block}
.h-hero .hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.h-hero .hero-cap{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 40px;display:grid;gap:2px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
.h-hero .hero-cap b{font-size:17px;font-weight:600;line-height:1.25}
.h-hero .hero-cap small{font-size:14px}
.h-hero .hero-cap del{opacity:.75}.h-hero .hero-cap ins{text-decoration:none;font-weight:600}
/* Rodada 2: cada ponto é um alvo de 44 × 44 px; o ponto visível (8 px, 22 px no atual) é o ::before. O centro fica a 14 px da base, como antes. */
.h-hero .hero-dots{position:absolute;left:0;right:0;bottom:-8px;display:flex;justify-content:center;gap:0}
.h-hero .hero-dots button{width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:999px}
.h-hero .hero-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.55);transition:width .2s}
.h-hero .hero-dots button[aria-current="true"]::before{width:22px;background:#fff}
.h-hero .hero-dots button:focus-visible{outline-offset:-10px}
.h-hero .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#252a28;font-size:26px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.h-hero .hero-arrow.prev{left:12px}.h-hero .hero-arrow.next{right:12px}
@media (hover:none){.h-hero .hero-arrow{display:none}}

/* Mais vendidos */
.h-grid{row-gap:26px}
.h-best .card h3{font-size:15px}
/* Rodada 2 (R8): "R$ 227,05 no Pix · ou 6x de R$ 39,83" abaixo do preço. Em cartão estreito (celular e bloco de datas),
   uma informação por linha, sem o "·" sobrando no fim da linha. */
.fcf-home .card{container-type:inline-size}
.fcf-home .card .inst{display:block;margin-top:-4px;font-size:12.5px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.fcf-home .card .inst b{font-weight:600;color:var(--ink)}
.fcf-home .card .inst-pix,.fcf-home .card .inst-card{white-space:nowrap}
@container (max-width:250px){.fcf-home .card .inst-pix,.fcf-home .card .inst-card{display:block}.fcf-home .card .inst-sep{display:none}}
.fcf-home mark.todo{-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 15/10/2026 (pedido do time): o celular mostra os 12 destaques, como o computador (antes, só os 6 primeiros). */
@media (max-width:899px){.h-grid>:nth-child(n+13){display:none}}

/* Promessas */
.h-promises{border-block:1px solid var(--line)}
.h-promises ul{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.h-promises li{position:relative;padding-left:26px;font-size:14px;line-height:1.4;font-weight:500}
.h-promises li a{color:var(--accent-text);font-weight:600;text-underline-offset:2px;position:relative}
.h-promises li a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.h-promises li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6284f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}

/* Datas especiais: a próxima data em destaque */
.h-next{display:grid;gap:26px}
.h-next-copy{display:grid;gap:12px;align-content:start}
.h-next-copy p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:44ch}
.h-next-copy .h-next-count{font-family:var(--serif);font-size:24px;line-height:1.2;color:var(--accent-text)}
.h-next-copy .v-cta{margin-top:6px}
.h-next-grid .card .im{background:var(--pagebg)}
.h-next.is-solo .h-next-copy p{max-width:52ch}
.h-other{font-size:14px;font-weight:600;margin:40px 0 14px;color:var(--ink)}
.h-occ{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,32%);gap:14px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.h-occ::-webkit-scrollbar{display:none}
.h-dates>.v-wrap>.v-sub+.h-occ{margin-top:24px}
.h-occ a{text-decoration:none;display:grid;gap:8px;justify-items:center}
.h-occ img{border-radius:50%;aspect-ratio:1;object-fit:cover;width:100%;height:auto;background:var(--pagebg)}
.h-occ b{font-weight:500;font-size:14.5px;text-align:center}
.h-occ.is-small{grid-auto-columns:minmax(84px,23%)}
.h-occ.is-small b{font-size:13.5px}

/* Categorias */
.h-cats{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}
.h-cat{text-decoration:none;display:grid;gap:4px}
.h-cat .h-tile{aspect-ratio:4/5;margin-bottom:8px}
.h-cat .h-tile img{transition:transform .35s}
.h-cat:hover .h-tile img{transform:scale(1.025)}
.h-cat b{font-size:16px;font-weight:600}
.h-cat small{color:var(--muted);font-size:13px}
/* Rodada 2: com a 5ª entrada (Kits), no celular ela fecha a grade na largura toda em vez de ficar sozinha numa coluna. */
@media (max-width:899px){.h-cats.is-5>:last-child{grid-column:1/-1}.h-cats.is-5>:last-child .h-tile{aspect-ratio:16/9}}

/* Como funciona: é uma sequência real, por isso os números */
.h-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px;counter-reset:h}
.h-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:3px;align-items:baseline}
.h-steps li::before{counter-increment:h;content:counter(h);grid-row:span 2;font-family:var(--serif);font-size:40px;line-height:.8;color:var(--accent);font-variant-numeric:lining-nums}
.h-steps b{font-size:16px}
.h-steps span{color:var(--muted);font-size:14.5px;line-height:1.5;max-width:36ch}

/* Sobre os quadros */
.h-story{display:grid;gap:30px;align-items:center}
.h-story-img{aspect-ratio:1}
.h-diffs{margin:26px 0 0;display:grid;gap:18px}
.h-diffs div{display:grid;gap:3px}
.h-diffs dt{font-weight:600;font-size:15.5px}
.h-diffs dd{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}

/* Avaliações */
.h-revs{display:grid;gap:14px;margin-top:24px}
.h-revs figure{margin:0;background:var(--pagebg);border:1px solid var(--line);border-radius:4px;padding:20px;display:grid;gap:12px;align-content:start}
.h-revs blockquote{margin:0}
.h-revs blockquote p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.4}
/* Rodada 2: nota visual (a nota por extenso fica para leitor de tela), quem comprou, produto e data. */
.h-rev-rating{margin:0;line-height:1}
.h-stars{font-size:17px;letter-spacing:2px;color:var(--line)}
.h-stars span{color:var(--accent)}
.h-revs figcaption{display:grid;gap:2px;font-size:13px;color:var(--muted)}
.h-rev-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:2px}
.h-rev-who b{color:var(--ink);font-size:14px;font-weight:600}
.h-rev-ok{color:var(--good);font-weight:600}
.h-rev-ok::before{content:"✓ ";font-weight:700}
.h-rev-what{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.h-revs figcaption a{color:var(--accent-text);font-weight:600}

/* Perguntas */
.h-faq .v-wrap{display:grid;gap:18px}
.h-faq .v-faq{max-width:none;margin:0}
.h-faq .v-faq p a{color:var(--accent-text);font-weight:600}
.fcf-home .wa{color:var(--accent-text);font-weight:600}

/* Convite final */
.h-end .v-wrap{display:grid;justify-items:center;gap:20px;text-align:center}
.h-end h2{max-width:18ch}
.h-end .v-cta{justify-self:center}

@media (min-width:600px){
  .h-hero-media{aspect-ratio:16/10}
  .h-occ{grid-auto-columns:minmax(118px,22%)}
  .h-occ.is-small{grid-auto-columns:minmax(84px,15%)}
  /* auto-fill: uma avaliação sozinha não ocupa a largura toda (H8). */
  .h-revs{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media (min-width:900px){
  .h-sec{padding-block:80px}
  .h-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:56px;padding:40px 24px 56px}
  /* No computador o menu do cabeçalho já mostra as categorias: fica só o atalho da próxima data. */
  .h-jump a:not(.is-date){display:none}
  .h-hero-media{order:0;aspect-ratio:5/4;border-radius:3px;overflow:hidden;box-shadow:1px 1px 0 rgba(47,43,39,.7),0 30px 50px -30px rgba(47,43,39,.65)}
  .h-hero-copy{padding:0;gap:18px}
  .h-hero-text{font-size:17px}
  .h-jump{flex-wrap:wrap;overflow:visible;margin:10px 0 0;padding:0}
  .h-hero .hero-cap{padding:60px 22px 44px}.h-hero .hero-cap b{font-size:20px}
  .h-promises ul{grid-template-columns:repeat(4,1fr);padding:22px 0}
  .h-next{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:center}
  /* Categoria da data sem produtos: o bloco ocupa a largura toda, título à esquerda e texto à direita, sem coluna vazia (H2). */
  .h-next.is-solo{grid-template-columns:minmax(0,1fr)}
  .h-next.is-solo .h-next-copy{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:56px}
  .h-next.is-solo .h-next-copy h2{grid-row:1/span 3}
  .h-next.is-solo .h-next-copy>:not(h2){grid-column:2}
  .h-next-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .h-occ,.h-occ.is-small{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;overflow:visible;gap:24px}
  .h-occ.is-small{grid-template-columns:repeat(8,minmax(0,1fr))}
  .h-cats{grid-template-columns:repeat(4,1fr);gap:24px}
  .h-cats.is-5{grid-template-columns:repeat(5,1fr);gap:20px}
  .h-steps{grid-template-columns:repeat(3,1fr);gap:40px;margin-top:34px}
  .h-story{grid-template-columns:1fr 1fr;gap:72px}
  .h-faq .v-wrap{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
}
@media (prefers-reduced-motion:reduce){.h-cat .h-tile img,.card .im img{transition:none}}