/* Página Home: composição própria sobre a base (base.css), o movimento (movimento.css) e os componentes (componentes.css).
   Direção visual (site/direcao-visual.html, Home 7/5/3): "descoberta da marca e escolha do presente". Primeira tela assimétrica 5/7 com o texto ancorado embaixo à esquerda
   e o buscador em pílula logo abaixo do título; à direita, três fotos verticais 4:5 em tamanhos e alturas diferentes. Depois: índice tipográfico dos momentos (foto ao lado do
   título no hover), uma cesta em destaque com lista de miniaturas (sem grade de cards), uma frase única de como pedir, a história em faixa dividida, um depoimento grande,
   perguntas e o fecho em painel chocolate (componente .palco). */

/* ---------- títulos das seções (mesma escala das outras páginas) ---------- */
.momentos h2,.destaque h2,.historia h2{font-size:clamp(2.25rem,1rem + 3.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}

/* ---------- topo em mosaico: um cartão grande (marca, título e buscador) e dois cartões de linha ----------
   SEM DEGRADÊ (pedido do Lombra, 21/09/2026): a foto preenche o cartão todo e o texto fica num painel creme sólido, por cima, à esquerda (sem véu que se dissolve). O degradê branco fica só nos cartões de "Para qual momento é a cesta?".
   A foto entra por clip-path (só a foto; o texto aparece no primeiro quadro, por causa do LCP). No celular, o cartão grande vira uma faixa de foto e os de linha ganham a foto no alto. */
.topo--home>.container{display:grid;gap:clamp(12px,1.4vw,20px);padding-block:var(--s4) var(--s5)}
@media(min-width:760px){.topo--home>.container{grid-template-columns:repeat(2,minmax(0,1fr))}.tile--marca{grid-column:1 / -1}}
@media(min-width:1100px){
  .topo--home{min-height:var(--sec-h);display:grid}
  .topo--home>.container{width:100%;align-self:stretch;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}
  .tile--marca{grid-column:auto;grid-row:1 / span 2}
}
.tile{position:relative;isolation:isolate;overflow:hidden;min-width:0;border-radius:var(--r-img);background:var(--ouro-tint)}
.tile>.slot{position:absolute;inset:0;z-index:-2;aspect-ratio:auto;border-radius:0;transition:transform 700ms var(--ease)}
.tile::before{content:"";position:absolute;inset:14px auto 14px 14px;z-index:-1;pointer-events:none;background:rgba(244,237,229,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--r-card)}
.tile--marca::before{width:calc(60% - 14px)}
.tile--linha::before{width:calc(54% - 14px)}

/* o rótulo de espaço de foto (só no rascunho) sai do meio do cartão, para não brigar com o texto */
html[data-modo="rascunho"] .tile>.slot:not(.tem-foto)::after{place-items:start end;text-align:right;padding:var(--s4)}
.tile>.slot img{object-position:50% 50%}

/* cartão grande: título e texto no alto, buscador e fatos embaixo; a foto aparece no meio e à direita */
.tile--marca{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s7);min-height:560px;padding:clamp(24px,3.2vw,48px)}
.tile__cima{display:grid;gap:var(--s5);justify-items:start}
@media(min-width:760px){.tile--marca .tile__cima{max-width:58%}}
.tile--marca h1{max-width:12ch;font-size:clamp(2.25rem,1rem + 3.1vw,4.25rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
@media(min-width:760px){.tile--marca h1{font-size:clamp(2rem,.8rem + 2.6vw,3.75rem);max-width:none}}
.tile__lead{margin:0;max-width:24em;color:var(--texto)}
.tile__baixo{display:grid;gap:var(--s3)}
.tile--marca .buscador{max-width:none;width:100%}
.tile--marca .buscador__dica{margin:0;color:var(--texto)}
.topo__rodape{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6)}
.tile--marca .topo__fatos{margin:0;color:var(--texto)}
.topo__zap{font-size:15px}
.topo__zap .ic{width:1.15em;height:1.15em}
@media(min-width:1100px){.tile--marca .buscador__seg{padding:6px var(--s3)}}
@media(min-width:1280px){.tile--marca .buscador__seg{padding:6px var(--s4)}}

/* cartões de linha: título, uma frase e "Ver as cestas"; o cartão inteiro é o link (o link do título se estica) */
.tile--linha{display:flex;align-items:center;min-height:240px;padding:clamp(20px,2.6vw,40px)}
.tile__texto{display:grid;gap:var(--s3);max-width:20rem;justify-items:start}
@media(min-width:760px){.tile--linha .tile__texto{max-width:50%}}
.tile__titulo{font:500 clamp(1.75rem,1rem + 1.6vw,2.75rem)/1.05 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.tile__titulo a{color:var(--ink);text-decoration:none}
.tile__titulo a::after{content:"";position:absolute;inset:0;z-index:1}
.tile__titulo a:focus-visible{outline:0}
.tile__titulo a:focus-visible::after{outline:2px solid var(--ink);outline-offset:-4px;border-radius:var(--r-img)}
.tile__texto p{margin:0;font-size:15px;line-height:1.5;color:var(--texto)}
.tile__texto .tile__preco{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tile__ver{display:inline-flex;align-items:center;gap:var(--s2);padding-bottom:2px;border-bottom:1.5px solid var(--ouro);font:500 14px/1 var(--sans);color:var(--ink)}
.tile__ver .ic{width:1.2em;height:1.2em;transition:transform var(--t-rapido) var(--ease)}
@media(hover:hover){
  .tile--linha:hover>.slot{transform:scale(1.04)}
  .tile--linha:hover .tile__ver .ic{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){.tile>.slot,.tile__ver .ic{transition:none}}

/* celular: o cartão grande vira uma faixa de foto no alto e o texto abaixo, sobre branco. Os dois cartões de linha (Café e Aniversário) somem: os cartões de "Para qual momento é a cesta?" logo abaixo já levam às duas linhas (21/09/2026, Home 830 px mais curta) */
@media(max-width:759px){
  .tile--marca{justify-content:flex-start;gap:var(--s5);min-height:0;padding:0;background:#fff;border:1px solid var(--linha)}
  .tile--marca>.slot{position:relative;inset:auto;z-index:0;flex:none;width:100%;height:min(56vw,240px)}
  .tile--marca::before,.tile--linha::before{display:none}
  /* celular: título, frase, fatos (preço, nota e entrega) com o WhatsApp, buscador e dica, nessa ordem: o preço e o pedido aparecem já na primeira tela */
  .tile--marca{padding-bottom:var(--s5)}
  .tile--marca .tile__cima{display:contents}
  .tile--marca h1,.tile--marca .tile__lead,.tile--marca .buscador__dica,.tile--marca .topo__rodape,.tile--marca .tile__baixo{padding-inline:var(--s5)}
  .tile--marca h1{order:1}.tile--marca .tile__lead{order:2}.tile--marca .topo__rodape{order:3}.tile--marca .tile__baixo{order:4}.tile--marca .buscador__dica{order:5}
  .tile--marca>.slot{order:0}
  .tile--linha{display:none}
}

/* ---------- momentos: cartões com a foto que se dissolve ----------
   Grade de duas colunas (o quinto cartão ocupa a largura toda). Cada cartão: ícone, título, texto, preço e "Ver as cestas"; a foto do momento fica no lado direito e se dissolve
   no branco do cartão (máscara em degradê), como na referência do Lombra. O assunto da foto fica à direita. No celular a foto vira uma faixa no alto, também se dissolvendo. */
.momentos{padding-block:var(--s8);border-top:1px solid var(--linha)}
.momentos>.container{width:100%}
.momentos__cab{display:grid;gap:var(--s4);max-width:46rem}
.momentos__lista{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;gap:clamp(12px,1.4vw,20px)}
@media(min-width:960px){.momentos__lista{grid-template-columns:repeat(2,minmax(0,1fr))}.momentos__lista>li:last-child{grid-column:1 / -1}}
.momento{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:space-between;gap:var(--s5);min-height:clamp(230px,20vw,290px);padding:clamp(20px,2.2vw,32px);border:1px solid var(--linha);border-radius:var(--r-card);background:#fff;color:var(--ink);text-decoration:none;transition:border-color var(--t-medio) var(--ease)}
.momento .momento__foto{position:absolute;inset:0 0 0 auto;z-index:-1;width:58%;aspect-ratio:auto;border-radius:0;transform-origin:100% 50%;transition:transform 700ms var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 32%,#000 74%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 32%,#000 74%)}
@media(min-width:960px){.momentos__lista>li:last-child .momento__foto{width:46%}}
.momento__icone{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--ouro);border-radius:10px;background:var(--ouro-tint);color:var(--choc)}
.momento__icone .ic{width:22px;height:22px}
.momento__texto,.momento__fim{max-width:min(26rem,50%)}
.momento__texto{display:grid;gap:6px}
.momento__nome{font:500 clamp(1.5rem,1rem + 1.5vw,2.25rem)/1.1 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.momento__detalhe{font-size:15px;line-height:1.5;color:var(--texto)}
.momento__fim{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5)}
.momento__preco{font:600 15px/1.3 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.momento__ver{display:inline-flex;align-items:center;gap:var(--s2);padding-bottom:2px;border-bottom:1.5px solid var(--ouro);font:500 14px/1 var(--sans);color:var(--ink)}
.momento__ver .ic{width:1.2em;height:1.2em;transition:transform var(--t-rapido) var(--ease)}
@media(hover:hover){
  .momento:hover{border-color:var(--ouro)}
  .momento:hover .momento__foto{transform:scale(1.04)}
  .momento:hover .momento__ver .ic{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){.momento,.momento .momento__foto,.momento__ver .ic{transition:none}}
@media(max-width:599px){
  .momento{min-height:0;padding-top:clamp(120px,36vw,150px)}
  .momento .momento__foto{inset:0 0 auto 0;width:auto;height:clamp(140px,42vw,170px);
    -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 55%,transparent 100%)}
  .momento__texto,.momento__fim{max-width:none}
}

/* ---------- em destaque: uma cesta grande e uma lista de miniaturas ---------- */
.destaque{padding-block:var(--s8);border-top:1px solid var(--linha)}
.destaque>.container{width:100%}
.destaque__cab{display:grid;gap:var(--s4);max-width:46rem;margin-bottom:var(--s7)}
@media(min-width:900px){.destaque__cab{max-width:none;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:end}.destaque__cab .t-lead{max-width:34em}}
.destaque__grade{display:grid;gap:var(--s7);align-items:start}
@media(min-width:900px){.destaque__grade{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px)}}
.destaque__foto .slot{width:100%;max-width:min(100%,calc((var(--sec-h) - 112px) * .8))}
.destaque__corpo{display:grid;gap:var(--s7);min-width:0}
.destaque__principal{display:grid;gap:var(--s4);max-width:44rem}
.destaque__principal .rotulo{margin:0}
.destaque__nome{font:500 clamp(2rem,1rem + 2.8vw,3.75rem)/1.04 var(--serif);letter-spacing:-.02em}
.destaque__texto{margin:0;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55}
.destaque__fim{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s2)}
.destaque__preco{margin:0;font:600 clamp(1.5rem,1.2rem + 1vw,2.25rem)/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.lista-cestas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.item-cesta{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--linha);color:var(--ink);text-decoration:none}
.item-cesta .slot{width:72px}
.item-cesta__texto{display:grid;gap:2px;min-width:0}
.item-cesta__nome{font:500 clamp(1.125rem,1rem + .5vw,1.5rem)/1.2 var(--serif)}
.item-cesta__linha{font-size:14px;line-height:1.4;color:var(--suave)}
.item-cesta__preco{font:600 clamp(1rem,.9rem + .3vw,1.1875rem)/1 var(--sans);font-variant-numeric:tabular-nums}
@media(hover:hover){.item-cesta:hover .item-cesta__nome{text-decoration:underline;text-decoration-color:var(--ouro);text-decoration-thickness:2px;text-underline-offset:5px}}
.destaque__todas{justify-self:start}

/* ---------- história: faixa dividida, retrato à esquerda e texto à direita ---------- */
.historia{display:grid;align-content:center;padding-block:var(--s8);border-top:1px solid var(--linha)}
@media(min-width:760px){.historia{min-height:var(--sec-h)}}
.historia>.container{width:100%}
.historia__grade{display:grid;gap:var(--s7);align-items:center}
@media(min-width:900px){.historia__grade{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,140px)}}
.historia__foto .slot{width:100%;max-width:min(100%,calc((var(--sec-h) - 112px) * .8))}
.historia__texto{display:grid;gap:var(--s4);align-content:center}
@media(min-width:900px){.historia__texto{padding-left:clamp(24px,4vw,72px);border-left:1px solid var(--ouro)}}
.historia__texto h2{margin-bottom:var(--s2)}
.historia__texto p{margin:0;max-width:52ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6}
.historia__texto .link-seta{justify-self:start;margin-top:var(--s3)}
/* celular: retrato menor e menos respiro (a história é um resumo; a página Nossa história conta o resto) */
@media(max-width:759px){.historia{padding-block:var(--s7)}.historia__grade{gap:var(--s5)}.historia__foto .slot{max-width:58%}}

/* ---------- personalizamos: texto e lista de quatro à esquerda, foto à direita ---------- */
.personaliza{display:grid;align-content:center;padding-block:var(--s8);border-top:1px solid var(--linha)}
@media(min-width:760px){.personaliza{min-height:var(--sec-h)}}
.personaliza>.container{width:100%}
.personaliza__grade{display:grid;gap:var(--s7);align-items:center}
@media(min-width:900px){.personaliza__grade{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,120px)}}
.personaliza h2{margin-bottom:var(--s4);font-size:clamp(2.25rem,1rem + 3.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.personaliza h2 em{font-style:italic;background:linear-gradient(transparent 86%,var(--ouro) 86% 93%,transparent 93%)}
.personaliza__lista{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s5) var(--s6)}
@media(min-width:600px){.personaliza__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
.personaliza__lista li{padding-top:var(--s4);border-top:1px solid var(--ouro)}
.personaliza__lista h3{margin:0 0 var(--s2);font:500 clamp(1.25rem,1rem + .8vw,1.625rem)/1.2 var(--serif)}
.personaliza__lista p{margin:0;font-size:15px;line-height:1.55;color:var(--suave)}
.personaliza__foto{justify-self:end;width:100%}
.personaliza__foto .slot{width:100%;max-width:min(100%,calc((var(--sec-h) - 112px) * .8));margin-left:auto}

/* ---------- onde entregamos: título e chamada à esquerda, os três grupos de entrega em lista de definição à direita ---------- */
.entrega{padding-block:var(--s8);border-top:1px solid var(--linha);scroll-margin-top:var(--cab-h)}
.entrega>.container{width:100%}
.entrega__grade{display:grid;gap:var(--s7);align-items:start}
@media(min-width:900px){.entrega__grade{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,120px)}.entrega__cab{position:sticky;top:calc(var(--cab-h) + var(--s6))}}
.entrega__cab{display:grid;gap:var(--s4);justify-items:start}
.entrega h2{font-size:clamp(2.25rem,1rem + 3.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.entrega h2 em{font-style:italic;background:linear-gradient(transparent 86%,var(--ouro) 86% 93%,transparent 93%)}
.entrega__nota{margin:0;max-width:40ch;font-size:15px;line-height:1.55;color:var(--suave)}
.entrega__lista{margin:0;border-top:1px solid var(--linha)}
.entrega__grupo{display:grid;gap:var(--s2) var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--linha)}
@media(min-width:600px){.entrega__grupo{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:baseline}}
.entrega__grupo dt{font:500 clamp(1.375rem,1rem + 1.2vw,2rem)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.entrega__grupo dt em{font-style:italic;background:linear-gradient(transparent 86%,var(--ouro) 86% 93%,transparent 93%)}
.entrega__valor{font:600 clamp(1.375rem,1rem + 1.1vw,1.875rem)/1.15 var(--sans);letter-spacing:-.02em}
.entrega__grupo dd{margin:0;font-size:clamp(1rem,.95rem + .2vw,1.125rem);line-height:1.6;color:var(--texto)}