/* Protótipo v3 do Início. Seção 1 copiada do portrait.so, no computador e no celular (moldura com brilho, selo,
   título com uma palavra em letra cursiva e degradê azul, campo em pílula com botão de contorno azul, fotos
   espalhadas que descem para um painel ao rolar). A palavra cursiva usa a Gabelisa, a fonte da marca (a mesma das
   caixas). Fontes servidas pelo próprio site, como no da Senhora Cestas. Resto da página: medidas da Senhora
   Cestas (largura 1600 px, margens de 20 a 56 px, seções de 64 px, texto de 16 px). Fotos e textos do Wix. */
@font-face{font-family:'Plus Jakarta Sans';src:url(fontes/plus-jakarta-sans-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(fontes/plus-jakarta-sans-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Switzer';src:url(fontes/switzer-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Switzer';src:url(fontes/switzer-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Switzer';src:url(fontes/switzer-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Gabelisa';src:url(fontes/gabelisa.woff2) format('woff2');font-display:swap}
:root{
  --ink:#1E3A5F; --txt:#2b3442; --mut:#5d6878; --line:rgba(30,58,95,.12); --line2:rgba(30,58,95,.07);
  --ouro:#cfa22d; --sky:#e8f1ff; --peach:#ffebd6; --mint:#d7ffe2; --rose:#fde9f0; --goldl:#d2b26a; --deep:#152b47;
  /* a palavra cursiva: do azul-marinho da marca ao azul claro (o Lombra tirou o colorido) */
  --grad:linear-gradient(100deg,#1E3A5F 15%,#3f7fcf 70%,#7db6f0); --grad-txt:linear-gradient(100deg,#1E3A5F 15%,#3f7fcf);
  --tit:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --corpo:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cursiva:'Gabelisa','Segoe Script',cursive;
  --cheio:100vw; --largura:1280px; --gutter:clamp(20px,3.2vw,56px);
  --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-card:24px;
  /* sombras do Portrait: 6 camadas finas a 3 %, com um fio de 1 px no lugar de borda */
  --sombra-md:0 16px 16px -8px rgba(0,0,0,.03),0 10px 10px -5px rgba(0,0,0,.03),0 5px 5px -2.5px rgba(0,0,0,.03),0 3px 3px -1.5px rgba(0,0,0,.03),0 2px 2px -1px rgba(0,0,0,.03),0 1px 1px -.5px rgba(0,0,0,.03);
  --sombra:0 0 0 1px rgba(0,0,0,.06),var(--sombra-md);
  --sombra-alta:0 0 0 1px rgba(0,0,0,.06),0 20px 20px -10px rgba(0,0,0,.07),0 10px 10px -5px rgba(0,0,0,.04),0 5px 5px -2.5px rgba(0,0,0,.03),0 3px 3px -1.5px rgba(0,0,0,.03),0 2px 2px -1px rgba(0,0,0,.03),0 1px 1px -.5px rgba(0,0,0,.03);
  --mola:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:clip}
body{margin:0;background:#fff;color:var(--txt);font:400 1rem/1.55 var(--corpo);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:calc(var(--largura) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--tit);color:var(--ink);margin:0;text-wrap:balance}
h1{font-weight:600;font-size:clamp(2.35rem,1rem + 3.7vw,4.25rem);line-height:1.02;letter-spacing:-.045em}
h2{font-weight:600;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);line-height:1.12;letter-spacing:-.032em}
h3{font-weight:600;font-size:clamp(1.15rem,1.05rem + .5vw,1.375rem);line-height:1.25;letter-spacing:-.02em}
/* a palavra em letra cursiva com degradê, como o "forever" do Portrait (lá Junicode; aqui a Gabelisa das caixas) */
.it{font-family:var(--cursiva);font-weight:400;font-style:normal;font-size:1.16em;line-height:0;letter-spacing:0;background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .14em;margin:0 -.1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* revisão: não faz parte do site */
.rev{position:relative;z-index:31;background:#111;color:#ddd;font:0.8125rem/1.4 system-ui,sans-serif;padding:8px var(--gutter);text-align:center}.rev b{color:#fff}

/* peças comuns */
/* selo das seções: a etiqueta em tom pastel do Portrait */
.selo-sec{display:inline-flex;align-items:center;gap:8px;background:var(--sky);border-radius:99px;padding:6px 11px;font:600 0.6875rem/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:#084e72}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:99px;font:600 1rem/1 var(--corpo);text-decoration:none;cursor:pointer;border:0;transition:transform .16s ease,background-color .16s ease}
.btn:active{transform:scale(.97)}
/* Botões no estilo do Portrait: pílulas simples. Contorno azul (o "Sign up" deles), que dá uma volta ao passar o
   mouse; escuro (o "Donate" do painel); fio fino nos cards. O efeito do Mercúrio (anel girando sem parar e o orbe em que o
   ícone do WhatsApp vira seta) fica só nos destaques: o pedido da abertura, a ficha da cesta e a chamada final. */
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn--contorno,.btn--destaque{position:relative;isolation:isolate;color:#12263f;font-weight:500;background:#fff}
.btn--contorno:before,.btn--destaque:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:2.5px;background:conic-gradient(from var(--giro),#1E3A5F,#5d8fd0 25%,#a9c8ef 45%,#3f74bb 65%,#1E3A5F);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:--giro .9s cubic-bezier(.2,.8,.2,1)}
.btn--contorno{height:46px;min-height:0;padding:0 20px;gap:8px;font-size:0.9375rem}
.btn--contorno:focus-visible:before{--giro:360deg}@media (hover:hover){.btn--contorno:hover:before{--giro:360deg}}
.btn--destaque{height:56px;padding:0 6px 0 26px;gap:18px;box-shadow:0 14px 32px -18px rgba(30,58,95,.45),var(--sombra-md)}
.btn--destaque:before{padding:1.5px;background:conic-gradient(from var(--giro),#1E3A5F,#86aee3 16%,#e6eef9 28%,#3f74bb 44%,#c9daf2 58%,#5d8fd0 74%,#1E3A5F);animation:giro 6s linear infinite}
@keyframes giro{to{--giro:360deg}}
@media (hover:hover){.btn--destaque:hover{background:#f6f9ff}}
.orb{--orb:44px;position:relative;overflow:hidden;flex:none;display:grid;place-items:center;width:var(--orb);height:var(--orb);border-radius:50%;color:#fff;background:radial-gradient(120% 140% at 50% 0,#2d5689,#1E3A5F 60%,#12263f);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.orb svg{position:absolute;width:18px;height:18px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.orb svg+svg{width:16px;height:16px;transform:translateX(calc(var(--orb) / -2 - 50% - 2px))}
.btn:focus-visible .orb svg:first-child{transform:translateX(calc(var(--orb) / 2 + 50% + 2px))}@media (hover:hover){.btn:hover .orb svg:first-child{transform:translateX(calc(var(--orb) / 2 + 50% + 2px))}}
.btn:focus-visible .orb svg+svg{transform:none}@media (hover:hover){.btn:hover .orb svg+svg{transform:none}}
.btn--escuro{height:44px;min-height:0;padding:0 18px;gap:8px;font-size:0.9375rem;font-weight:500;color:#fff;background:#202a36}@media (hover:hover){.btn--escuro:hover{background:#000}}.btn--escuro svg{width:18px;height:18px}
.btn--fio{height:40px;min-height:0;padding:0 16px;font-size:0.875rem;font-weight:500;color:#12263f;background:#fff;box-shadow:inset 0 0 0 1px rgba(30,58,95,.2);transition:box-shadow .2s}@media (hover:hover){.btn--fio:hover{box-shadow:inset 0 0 0 1.5px #1E3A5F}}
@media(prefers-reduced-motion:reduce){.btn--destaque:before{animation:none}.btn--contorno:before{transition:none}}
.btn svg{width:20px;height:20px;flex:none}
.link{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:2px}@media (hover:hover){.link:hover{border-color:var(--ink)}}
.estrelas{color:var(--ouro);letter-spacing:1px}

/* cabeçalho em pílula, flutuando sobre a moldura, como no Portrait */
/* cabeçalho: a barra do Portrait, 12 px para dentro da moldura e 52 px de cada lado */
.cab{position:sticky;top:12px;z-index:30;padding-inline:72px;margin-top:32px}
.cab__in{max-width:1296px;height:60px;margin:0 auto;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);border-radius:30px;padding:0 8px 0 30px;box-shadow:0 0 0 1px rgba(255,255,255,0);transition:max-width .9s cubic-bezier(.32,.72,0,1),height .6s cubic-bezier(.32,.72,0,1),padding .6s cubic-bezier(.32,.72,0,1),background-color .6s ease-out,box-shadow .6s ease-out,backdrop-filter .6s ease-out}
/* ao rolar, a barra encolhe e vira uma pílula flutuante (efeito da barra do template Tandem, medido em 29/10: 1328 para 928 px, 64 para 56 px, curva .32,.72,0,1) */
.cab.is-rolado .cab__in{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.03),0 12px 28px -12px rgba(30,58,95,.28)}
@media (min-width:1101px){.cab.is-rolado .cab__in{max-width:1100px;height:54px;padding:0 6px 0 24px}}
.cab__logo img{transition:height .6s cubic-bezier(.32,.72,0,1)}
@media (min-width:1101px){.cab.is-rolado .cab__logo img{height:33px}}
.cab__logo{display:flex;align-items:center;height:100%;flex:none}
.cab__logo img{height:38px;width:auto}
.nav{flex:1;display:flex;justify-content:center}
.nav>ul{position:relative;list-style:none;margin:0;padding:4px;display:flex;gap:2px;background:rgba(30,58,95,.05);border-radius:99px}
.nav a,.nav button{display:block;padding:10px 14px;border-radius:99px;text-decoration:none;font:500 0.9375rem/1 var(--corpo);color:var(--ink);background:none;border:0;cursor:pointer}
.nav>ul>li>a,.nav>ul>li>button{position:relative;z-index:1}
.nav>ul>li>a:focus-visible,.nav>ul>li>button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media (hover:hover){.dd ul a:hover{background:var(--sky)}}
/* pílula branca que desliza até o item sob o mouse ou o foco */
.nav__pill{position:absolute;left:0;top:0;z-index:0;width:0;height:0;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px rgba(30,58,95,.08),0 1px 2px rgba(30,58,95,.08);opacity:0;pointer-events:none;transition:translate .35s cubic-bezier(.32,.72,0,1),width .35s cubic-bezier(.32,.72,0,1),height .35s cubic-bezier(.32,.72,0,1),opacity .2s ease-out}
.nav__pill.on{opacity:1}
@media (prefers-reduced-motion:reduce){.cab__in,.cab__logo img,.nav__pill{transition:none}}
/* ícones de linha (24 x 24, traço de 1,5 px que não muda com o tamanho, pontas redondas), no estilo da referência "Every line has a place".
   O desenho fica nos símbolos do fim do inicio.html; --tr engrossa o traço onde precisa (ex.: sobre foto). O G do Google fica colorido. */
.dd__seta{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-2px}
.dd{position:relative}.dd ul{display:none;position:absolute;top:calc(100% + 8px);left:0;list-style:none;margin:0;padding:8px;background:#fff;border-radius:20px;box-shadow:var(--sombra-alta);min-width:220px}
.dd ul:before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px} /* ponte sem fundo: cobre o respiro entre o botão e o menu, senão o mouse "escapa" do hover ao descer e o menu some antes de chegar */
/* o menu abre com o mouse em cima ou pelo teclado (:focus-visible). Antes era :focus-within, e o clique do mouse deixava o menu aberto e travado: ao passar para "Datas especiais" os dois ficavam um sobre o outro */
.dd:has(:focus-visible) ul{display:block}
@media (hover:hover){.dd:hover ul{display:block}.nav>ul:has(.dd:hover) .dd:not(:hover) ul{display:none}}.dd ul a{padding:10px 12px;border-radius:12px}
.cab__fim{display:flex;align-items:center;gap:6px}
.menu-bt{display:none;position:relative;width:44px;height:44px;border:0;border-radius:50%;background:rgba(30,58,95,.06);color:var(--ink);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.menu-bt i{position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:currentColor;transition:translate .3s cubic-bezier(.65,0,.35,1),rotate .3s cubic-bezier(.65,0,.35,1)}
.menu-bt i:first-child{translate:0 -3.5px}.menu-bt i:last-child{translate:0 3.5px}
.menu-bt[aria-expanded=true] i:first-child{translate:0 0;rotate:45deg}.menu-bt[aria-expanded=true] i:last-child{translate:0 0;rotate:-45deg}
.menu-bt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mc{display:none}

/* abertura: a moldura do Portrait (20 px de margem, cantos de 40 px, fachos de cor bem suaves) */
.moldura{position:relative;margin:-80px 20px 0;border-radius:40px;border:1px solid rgba(0,0,0,.06);overflow:hidden;
  background:radial-gradient(30% 55% at 30% 18%,rgba(255,196,226,.55),transparent 70%),radial-gradient(26% 50% at 70% 20%,rgba(214,244,222,.7),transparent 70%),radial-gradient(40% 60% at 8% 40%,rgba(232,241,255,.95),transparent 70%),radial-gradient(36% 60% at 92% 38%,rgba(255,235,214,.75),transparent 70%),linear-gradient(rgba(30,58,95,.07),rgba(58,109,176,.02) 60%,#fff)}
.hero{padding:162px var(--gutter) 196px;text-align:center}
.selo--cel{display:none}
.hero .selo-sec{text-transform:none;letter-spacing:0;font:500 0.875rem/1.4 var(--corpo);color:rgba(30,58,95,.72);background:rgba(255,255,255,.8);border:1px solid hsla(0,0%,85%,.35);padding:6px 12px;gap:6px;margin:0}
.hero h1{font-weight:600;font-size:clamp(2.6rem,1rem + 4.2vw,4.75rem);line-height:1.02;letter-spacing:-.05em;max-width:13em;margin:34px auto 26px}
.hero__sub{font-size:1.125rem;line-height:1.5;color:rgba(30,58,95,.7);margin:0 auto;max-width:30em;text-wrap:pretty}
/* o campo do Portrait ("portrait.so/nome"): aqui, para quem é o presente; o botão abre o WhatsApp */
.pedido{position:relative;width:min(720px,100%);margin:62px auto 0}
.pedido__campo{display:flex;align-items:center;height:80px;background:#fff;border:1px solid #dedede;border-radius:999px;padding:0 0 0 32px;cursor:text;transition:border-color .2s}
@media (hover:hover){.pedido__campo:hover{border-color:#c7c7c7}}.pedido__campo:focus-within{border-color:#c4c9d1;box-shadow:0 0 0 3px rgba(30,58,95,.07)} /* borda delicada no foco, como no portrait.so: cinza fino e um halo suave (o campo continua com foco visível) */
.pedido__pre{font:400 2.125rem/1 var(--corpo);color:#9b9b9b;letter-spacing:-.01em;white-space:nowrap;padding-right:.28em}
.pedido__onde{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center;overflow:hidden;margin-right:250px}
.pedido input{width:100%;height:100%;border:0;outline:0;background:transparent;font:400 2.125rem/1 var(--corpo);color:#1b1b1b;letter-spacing:-.01em;padding:0;caret-color:#9b9b9b}
.rola{position:absolute;left:0;top:50%;height:1.9em;margin-top:-.95em;overflow:hidden;pointer-events:none;font:400 2.125rem/1.2 var(--corpo);letter-spacing:-.01em;color:#1b1b1b;
  -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
.rola span{display:block;height:1.2em;white-space:nowrap;transform:translateY(calc(.35em - var(--i,0) * 1.2em));transition:transform .6s cubic-bezier(.65,0,.35,1)}
.rola.sem span{transition:none}
.pedido input:focus+.rola,.pedido input:not(:placeholder-shown)+.rola{opacity:0}
.pedido .btn--destaque{position:absolute;right:12px;top:12px}
.hero__link{display:inline-block;margin-top:58px;color:#08304c;font:500 1rem/1 var(--corpo);text-decoration:none;border-bottom:1px solid rgba(8,48,76,.35);padding-bottom:3px}
@media (hover:hover){.hero__link:hover{border-color:#08304c}}

/* painel: o perfil do Portrait ("Rowan Blake"), com a grade de fotos; as fotos começam espalhadas na abertura
   e descem para o lugar delas conforme a página rola */
.painel{position:relative;z-index:2;margin:-120px auto 0;padding-inline:20px;max-width:1156px}
.painel__in{container-type:inline-size;background:#fff;border-radius:32px;padding:54px;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 0 0 7px #f7f7f8,0 0 0 8px rgba(0,0,0,.06),var(--sombra-md)}
.painel__cab{display:flex;align-items:center;gap:20px;margin-bottom:48px}
.painel__foto{width:92px;height:92px;border-radius:50%;flex:none}
.painel__nome{margin:0;font:500 1.5rem/1.4 var(--corpo);color:#202020}
.painel__bio{margin:2px 0 0;color:#767676;font-size:1rem}
.painel__cab .btn--escuro{margin-left:auto}
.grade{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:calc((100cqw - 72px) / 4);gap:24px;
  grid-template-areas:"a b b c" "d e f c"}
.tile{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#f1f1f1;box-shadow:var(--sombra);will-change:transform;transform-origin:50% 50%;text-decoration:none;color:inherit}
.tile img{width:100%;height:100%;object-fit:cover}.tile picture{display:contents}
.t1{grid-area:a}.t2{grid-area:b}.t3{grid-area:c}.t4{grid-area:d}.t5{grid-area:e}.t6{grid-area:f}
.tile--link,.tile--nota{background:#fff;display:flex;flex-direction:column;padding:20px}
.tile--link img{height:auto;aspect-ratio:192/100;border-radius:12px;flex:none}
.tile--link b{font:500 1rem/1.35 var(--corpo);color:#202020;margin-top:14px;letter-spacing:-.01em}
.tile__meta{margin-top:auto;font-size:0.875rem;color:#767676;display:flex;align-items:center;gap:8px}
.tile--nota{padding:22px 24px}
.nota__topo{display:flex;align-items:center;gap:10px;font-size:0.875rem;color:#767676}.nota__topo svg{width:20px;height:20px}
.tile--nota b{font:500 1.0625rem/1.35 var(--corpo);color:#202020;margin-top:14px}
.tile--nota p{margin:8px 0 0;color:#767676;font-size:1rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* a ponta da página dobrada, como no cartão de artigo do Portrait */
.tile--nota:after{content:"";position:absolute;right:0;bottom:0;width:46px;height:46px;border-top-left-radius:14px;
  background:linear-gradient(315deg,#fff 0 47%,#dcdcdc 50%,#f2f2f2 58%,#fbfbfb 75%,#ececec);box-shadow:-3px -3px 6px -2px rgba(0,0,0,.08)}
/* as fotos caem do alto da tela ao abrir a página (pedido do Lombra), depois o rolar comanda */
@keyframes cai{0%{translate:0 -120vh;rotate:14deg}62%{translate:0 14px;rotate:-2deg}80%{translate:0 -5px;rotate:1deg}100%{translate:0 0;rotate:0deg}}
.anima .tile{animation:cai 1.15s cubic-bezier(.3,.7,.4,1) var(--cai,0s) both}

/* seções */
.sec{padding-block:var(--s8)}
.sec__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:var(--s6)}
.sec__cab h2{margin-top:14px}
.sec__sub{color:var(--mut);margin:10px 0 0;max-width:56ch}

/* céu do Portrait atrás do seletor: branco que desce para azul-claro, some nas laterais e termina numa curva por trás
   dos painéis (no Portrait, atrás da carteira) */
#ocasioes{position:relative;isolation:isolate}
#ocasioes:before,#ocasioes:after{content:"";position:absolute;z-index:-1;left:50%;translate:-50% 0;pointer-events:none}
#ocasioes:before{top:0;width:var(--cheio);height:calc(100% + 48px);background:linear-gradient(#fff,#e3f2ff);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
#ocasioes:after{top:calc(100% - 12px);width:calc(var(--cheio) * 1.1);height:200px;border-radius:50%;background:#fff}
/* queridinhas: à esquerda o título da seção e a descrição da cesta ativa, à direita o carrossel 3D (modelo "Draggable Carousel", preset Default, do
   Framer). A foto ativa fica de frente no meio; cada vizinha gira 45° por posição, recua 150 px e cai para 85% de tamanho e 50% de opacidade (tudo
   proporcional à largura da foto, que no modelo é 320 x 400). As contas ficam no inicio.js. Embaixo da foto, as setas e o número. */
#queridinhos{position:relative;z-index:1}
.varal__grade{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);grid-template-areas:"cab car" "info car";grid-template-rows:auto 1fr;gap:var(--s6) var(--s7);align-items:start}
.varal__cab{grid-area:cab}.varal__cab h2{margin-top:14px}
.varal__col{grid-area:car;align-self:center;min-width:0}
.varal{position:relative;height:460px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.varal.arrastando{cursor:grabbing}.varal:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:12px}
.varal__cartoes{position:absolute;inset:0}
.varal__ctrl{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin-top:8px}
.varal__n{min-width:5.5ch;text-align:center;font:500 0.875rem/1 var(--corpo);color:var(--mut);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.varal__info{grid-area:info;display:grid;gap:var(--s4);justify-items:start;align-content:start;min-width:0;padding-top:var(--s5);border-top:1px solid var(--line)}
.varal__tit{display:grid;gap:6px}
.varal__tit small{font:500 0.9375rem/1.3 var(--corpo);color:var(--mut)}
.varal__tit h3{font:600 clamp(1.875rem,1.5rem + 1.1vw,2.5rem)/1.1 var(--tit);letter-spacing:-.025em;color:var(--ink)}
.varal__itens{display:grid;gap:8px;margin:0;padding:0;list-style:none;color:#4d7894;font-size:1rem;line-height:1.4;max-width:42ch}
.varal__itens li{position:relative;padding-left:20px}
.varal__itens li:before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.35}
.varal__mais{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:#4d7894;font:600 0.9375rem/1.2 var(--corpo);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.varal__mais-ic{flex:none;width:18px;height:18px;--tr:1.75px;transition:rotate .3s cubic-bezier(.2,.8,.2,1)}
.varal__mais:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:6px}
@media (hover:hover){.varal__mais:hover{text-decoration:underline;text-underline-offset:4px}.varal__mais:hover .varal__mais-ic{rotate:90deg}}
/* a ficha abre "crescendo" da foto ativa: a foto do cartão vira a foto da ficha (View Transitions; sem suporte, abre direto) */
::view-transition-group(foto-cesta){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-image-pair(foto-cesta){overflow:hidden;border-radius:20px}
::view-transition-old(foto-cesta),::view-transition-new(foto-cesta){height:100%;object-fit:cover}
/* "Ver todas as cestas": 14 px em repouso e, ao passar o mouse ou focar, cresce até os 16 px de antes (zoom de 1,143) */
.varal__acoes .link,#ocasioes .sec__cab>.link{display:inline-block;font-size:0.875rem;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.varal__acoes .link,#ocasioes .sec__cab>.link{transform-origin:left center}
@media (min-width:761px){#ocasioes .sec__cab>.link{transform-origin:right center}} /* à direita do título no computador; embaixo, à esquerda, no celular */
@media (hover:hover){.varal__acoes .link:hover,#ocasioes .sec__cab>.link:hover{transform:scale(1.143)}}
.varal__acoes .link:focus-visible,#ocasioes .sec__cab>.link:focus-visible{transform:scale(1.143)}
@media (prefers-reduced-motion:reduce){.varal__acoes .link,#ocasioes .sec__cab>.link{transition:none}}
.varal__acoes{display:flex;align-items:center;flex-wrap:wrap;gap:8px 28px;margin-top:4px}
.varal__info.troca>*{animation:varalEntra .5s cubic-bezier(.2,.8,.2,1) both}.varal__info.troca>*+*{animation-delay:.06s}.varal__info.troca>*+*+*{animation-delay:.12s}
@keyframes varalEntra{from{opacity:0;translate:0 10px}}
@media (prefers-reduced-motion:reduce){.varal__info.troca>*{animation:none}}
@media (max-width:900px){.varal__grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "car" "info";gap:var(--s5)}.varal__info{border-top:0;padding-top:0}}
.card{position:absolute;left:0;top:0;width:var(--cw,320px);will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card__moldura{position:relative}
.card__foto{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:20px;background:#f3f0ea;box-shadow:var(--sombra)}
.card.ativo .card__foto{box-shadow:var(--sombra-alta)}
.card__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.card:not(.ativo) .card__etiqueta{opacity:0}.card__etiqueta{transition:opacity .3s ease-out}
.card__var{opacity:0;transition:opacity .5s ease-out}
.card__etiqueta{position:absolute;right:-16px;bottom:24px;z-index:1;display:flex;align-items:baseline;gap:3px;padding:8px 14px 8px 20px;background:var(--ink);color:#fff;font:700 1.1875rem/1 var(--tit);letter-spacing:-.01em;font-variant-numeric:tabular-nums;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);filter:drop-shadow(0 4px 8px rgba(30,58,95,.28));pointer-events:none}.card__etiqueta small{font:600 0.75rem/1 var(--corpo);letter-spacing:0;opacity:.8}
.card__ver{position:absolute;inset:0;padding:0;border:0;border-radius:20px;background:none;cursor:inherit}.card__ver:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (hover:hover){.card.ativo:hover .card__var,.card.ativo:focus-within .card__var{opacity:1}}
@media (prefers-reduced-motion:reduce){.card,.card__var{transition:none}}
@media (max-width:760px){
  #instagram .sec__cab>.btn{display:none}.card__foto,.card__ver{border-radius:16px}.card__etiqueta{right:-10px;bottom:16px;padding:6px 10px 6px 16px;font-size:1rem;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}.card__etiqueta small{font-size:0.6875rem}}
/* seletor de ocasiões (versão 2, 29/10): pilha de polaroides à esquerda; à direita as abas (ícone e nome) e o detalhe da
   ocasião. Nenhum texto fica sobre a foto. Os 5 detalhes dividem a mesma célula da grade, então a altura é a do maior e trocar
   de ocasião não mexe na página. Só rotate, translate e scale animam. */
.oc{--curva:cubic-bezier(.2,.8,.2,1);display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-areas:"palco abas" "palco corpos";gap:var(--s5) var(--s8);align-items:start}
.oc__abas{align-self:end}.oc__paineis{align-self:start}
.oc__palco{grid-area:palco;align-self:center;position:relative;height:500px;--pw:360px}
.oc__pol{position:absolute;left:50%;top:50%;z-index:var(--z,1);width:var(--pw);margin:0;padding:12px 12px 0;border-radius:4px;background:#fff;box-shadow:var(--sombra-alta);cursor:pointer;scale:.94;rotate:var(--r,0deg);translate:calc(-50% + var(--dx,0px) * var(--k,1)) calc(-50% + var(--dy,0px) * var(--k,1));transition:rotate .5s var(--curva),translate .5s var(--curva),scale .5s var(--curva)}
.oc__pol.on{z-index:9;scale:1;rotate:-1.5deg;translate:-50% -50%;cursor:default}
.oc__pol img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:2px;background:#f3f0ea}
.oc__pol figcaption{display:grid;place-items:center;height:68px;font:400 2rem/1 var(--cursiva);color:var(--ink)}
/* a fita pêssego (token da casa) segura a foto de cima */
.oc__pol:before{content:"";position:absolute;left:50%;top:-12px;width:96px;height:28px;translate:-50% 0;rotate:-3deg;background:rgba(255,235,214,.82);box-shadow:0 1px 2px rgba(0,0,0,.08);opacity:0;transition:opacity .3s ease-out}
.oc__pol.on:before{opacity:1}
.oc__pol figcaption{transition:opacity .3s ease-out}.oc__pol:not(.on) figcaption{opacity:0}
/* abas minimalistas: ícone e nome, sem moldura nem bolinha; um traço azul fino desliza por baixo da aba escolhida (a posição vem do inicio.js em --x, --y e --w) */
.oc__abas{grid-area:abas;position:relative;display:flex;flex-wrap:wrap;gap:4px 28px;padding-bottom:2px}
.oc__abas:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.oc__linha{position:absolute;left:0;top:0;z-index:1;width:var(--w,0);height:2px;border-radius:2px;background:var(--grad);translate:var(--x,0) var(--y,0);opacity:0;pointer-events:none;transition:translate .45s cubic-bezier(.32,.72,0,1),width .45s cubic-bezier(.32,.72,0,1),opacity .2s}
.oc__abas.pronto .oc__linha{opacity:1}
.oc__aba{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 2px;border:0;background:none;color:var(--mut);font:500 0.9375rem/1 var(--corpo);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s ease-out}
.oc__aba[aria-selected=true]{color:var(--ink);font-weight:600}
.oc__aba:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}
.oc__ic{display:grid;place-items:center;flex:none}
.oc__ic svg{width:20px;height:20px}
.oc__paineis{grid-area:corpos;display:grid;margin-top:var(--s5)}
.oc__corpo{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:start;visibility:hidden;transition:visibility 0s .35s}
.oc__corpo.on{visibility:visible;transition:none}
.oc__corpo>*{opacity:0;translate:0 12px;transition:opacity .3s ease-out,translate .45s var(--curva)}
.oc__corpo.on>*{opacity:1;translate:none;transition-delay:.12s}
.oc__corpo.on>*+*{transition-delay:.2s}
.oc__txt{min-width:0}
.oc__selo{font:700 0.6875rem/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:#8A6A22}
.oc__titulo{margin:10px 0 8px;font:700 clamp(1.75rem,3vw,2.75rem)/1.08 var(--tit);letter-spacing:-.03em;text-wrap:balance}
.oc__frase{margin:0;max-width:36ch;font-size:1.0625rem;line-height:1.45;color:var(--txt)}
.oc__pts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:0.9375rem;line-height:1.4;color:var(--txt)}.oc__pts li{position:relative;padding-left:22px}.oc__pts li:before{content:"";position:absolute;left:2px;top:.3em;width:7px;height:12px;border:solid var(--ink);border-width:0 2px 2px 0;rotate:40deg}
.oc__preco{margin:14px 0 0;font-size:0.9375rem;color:var(--mut)}.oc__preco b{font:600 1.25rem/1 var(--tit);color:var(--ink)}
.oc__q{width:400px;display:grid;gap:12px;padding:14px;border-radius:var(--r-card);background:#fff;box-shadow:var(--sombra)}
/* "Escolha por ___": 3 atalhos para dentro da página da linha (o eixo muda em cada linha) */
.oc__por{margin:0;font:600 0.75rem/1.2 var(--corpo);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.oc__ops{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.oc__op{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:6px 16px;border-radius:14px;background:#f3f8ff;box-shadow:inset 0 0 0 1px rgba(30,58,95,.08);text-decoration:none;color:var(--ink);transition:box-shadow .2s ease-out,background-color .2s ease-out}
.oc__op:after{content:"→";flex:none;font-size:0.9375rem;color:var(--mut);transition:translate .2s ease-out,color .2s ease-out}
.oc__op b{display:block;font:600 0.9375rem/1.25 var(--corpo)}.oc__op small{display:block;font-size:0.8125rem;line-height:1.3;color:var(--mut)}
.oc__op:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.oc__acoes{display:flex;flex-wrap:wrap;gap:8px}.oc__acoes .btn{flex:1 1 auto;padding:0 14px;white-space:nowrap}
@media (hover:hover){.oc__aba[aria-selected=false]:hover{color:var(--ink)}.oc__pol:not(.on):hover{scale:.97}.oc__op:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(30,58,95,.3)}.oc__op:hover:after{translate:3px 0;color:var(--ink)}}
@media (max-width:1200px){.oc{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--s5) var(--s7)}.oc__palco{--pw:300px;--k:.8;height:440px}.oc__corpo{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.oc__q{width:min(400px,100%)}}
/* celular: o palco em cima, as abas em fileiras que quebram (sem rolagem de lado) e o detalhe embaixo */
@media (max-width:900px){
  .oc{grid-template-columns:minmax(0,1fr);grid-template-areas:"palco" "abas" "corpos";gap:var(--s4)}
  .oc__palco{--pw:240px;--k:.55;height:318px}
  .oc__pol{padding:10px 10px 0}.oc__pol figcaption{height:52px;font-size:1.625rem}
  .oc__abas{flex-wrap:nowrap;justify-content:space-between;gap:0}.oc__aba{flex:1 1 0;height:52px;padding:0;justify-content:center;gap:0}.oc__ic svg{width:24px;height:24px}.oc__tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .oc__preco b{background:#eaf2ff;padding:4px 10px;border-radius:10px}.oc__preco b{font-size:1.1875rem}.oc__preco{margin-top:12px}
  .oc__paineis{margin-top:var(--s4)}
  .oc__q{width:auto;max-width:520px;padding:10px;gap:10px}
  .oc__acoes .btn{height:44px;padding:0 12px;font-size:0.8125rem}.ld{display:none}
}
@media (prefers-reduced-motion:reduce){.oc__pol,.oc__pol:before,.oc__pol figcaption,.oc__corpo,.oc__corpo>*,.oc__op,.oc__op:after,.oc__aba,.oc__ic,.oc__linha{transition:none!important}}
.adic{position:relative;display:flex;align-items:center;gap:24px;margin-top:var(--s7)}
.adic__fotos{display:flex;list-style:none;margin:0;padding:0;flex:none}
.adic__fotos li{position:relative;width:67px;height:67px;margin-left:-18px;border:3px solid #fff;border-radius:50%;background:#fff;box-shadow:var(--sombra-md);transition:margin-left .3s cubic-bezier(.4,0,.2,1),translate .3s cubic-bezier(.4,0,.2,1),scale .3s cubic-bezier(.4,0,.2,1)}
.adic__fotos li:first-child{margin-left:0}
.adic__fotos a{display:block;width:100%;height:100%;border-radius:50%}
.adic__fotos img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.adic__dica{position:absolute;bottom:calc(100% + 10px);left:50%;translate:-50% 4px;opacity:0;padding:5px 9px;border-radius:6px;background:var(--ink);color:#fff;font:600 0.75rem/1rem var(--corpo);white-space:nowrap;pointer-events:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transition:opacity .15s ease-out,translate .15s ease-out}
.adic__fotos li:focus-within{z-index:2;translate:0 -8px;scale:1.12}.adic__fotos li:focus-within .adic__dica{opacity:1;translate:-50% 0}
@media (hover:hover){
  .adic__fotos:hover li:not(:first-child){margin-left:-7px}
  .adic__fotos li:hover{z-index:2;translate:0 -8px;scale:1.12}.adic__fotos li:hover .adic__dica{opacity:1;translate:-50% 0}
}
.adic__txt{flex:1;min-width:0}.adic__txt h2{margin:0;font-size:1.375rem}.adic__txt p{margin:4px 0 0;color:var(--mut);font-size:0.9375rem}
.adic__bt{flex:none}

/* por que a Amor in Box (versão 9, 30/10): palco fixo + cartões que andam para o lado com a rolagem (modelo sabec.dev, nas cores da marca). Cartões só de texto: a pergunta
   (como se faz a uma IA), o título e a resposta. */
.mot{padding-block:var(--s8)}
.mot__palco{position:relative}
.mot__esq{max-width:58ch}.mot__esq h2{margin:16px 0 0;max-width:20ch}
.mot__lead{margin:14px 0 24px;max-width:44ch;font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.55;color:var(--txt)}
.mot__vista{margin-top:var(--s6)}
.mot__trilho{display:flex;gap:14px;list-style:none;margin:0 calc(var(--gutter) * -1);padding:6px var(--gutter) 22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.mot__trilho::-webkit-scrollbar{display:none}
.mot__item{flex:0 0 min(84%,340px);scroll-snap-align:start;display:flex;flex-direction:column}
.mot__n{display:flex;align-items:flex-end;height:76px;padding-bottom:8px}
.mot__n b{display:block;font:700 clamp(2.75rem,4.4vw,4rem)/1 var(--tit);letter-spacing:-.04em;background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.mot__cartao{flex:1;display:flex;flex-direction:column;gap:12px;margin-top:18px;padding:clamp(20px,2vw,28px);border-radius:var(--r-card);background:#fff;box-shadow:var(--sombra)}
.mot__item h3{margin:6px 0 0;font:600 clamp(1.25rem,1.7vw,1.5rem)/1.2 var(--tit);letter-spacing:-.02em;text-wrap:balance}
.mot__item p{margin:0;font-size:1rem;line-height:1.55;color:var(--txt)}
.mot__item .mot__q{font:600 0.875rem/1.4 var(--corpo);color:#3f74bb}
@keyframes ch-pt{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -3px;opacity:1}}
.mot__linha{display:none}
@media (min-width:1024px){
  .mot__grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,4vw,72px);align-items:center}
  .mot__vista{margin-top:0;min-width:0}
  .mot__item{flex:0 0 clamp(290px,24vw,340px)}
}
/* palco fixo: o JavaScript liga a classe "on" (tela grande, sem pedido de menos movimento) e dá à seção a altura da rolagem. Os cartões ficam numa grade com linhas compartilhadas (subgrid): pergunta, título e resposta alinhados em todos, todos com a mesma largura */
.mot.on{padding:0}
.mot.on .mot__palco{position:sticky;top:76px;box-sizing:border-box;padding-block:var(--s8);display:flex;align-items:center;overflow:hidden} /* a altura é a do conteúdo mais o respiro das outras seções (64 px); o JS centra o palco na tela enquanto ele fica preso */
.mot.on .mot__grade{width:100%}
.mot.on .mot__esq,.mot.on .mot__vista{position:relative;z-index:1}
/* celular: o palco preso também funciona (a rolagem para baixo empurra os cartões para o lado); título em cima e cartões embaixo, com menos respiro para caber na tela */
@media (max-width:1023px){
  .mot.on .mot__palco{padding-block:var(--s7)}
  .mot.on .mot__lead{margin:10px 0 0;font-size:0.9375rem}
  .mot.on .mot__vista{margin-top:calc(var(--s4) - 30px)}
  .mot.on .mot__trilho{grid-auto-columns:min(78vw,300px)}
}
/* celular com pouca altura (as barras do navegador comem espaço): palco mais compacto para caber abaixo do menu */
@media (max-width:1023px) and (max-height:760px){
  .mot.on .mot__palco{padding-block:var(--s6)}
  .mot.on .mot__lead{display:none}
  .mot.on .mot__cartao{padding:18px}
  .mot.on .mot__item p{font-size:0.9375rem;line-height:1.5}
}
/* painel de fotos no celular: cartão preso enquanto as fotos escondidas sobem por dentro (o JS liga .pino) */
.moldura.pino{overflow:clip}
.painel.pino .painel__in{position:sticky}
.painel.pino .grade{clip-path:inset(var(--ct,-3000px) -3000px 0 -3000px)}
/* abertura no celular: o texto fica por cima das fotos (que entram mais para dentro, como no portrait.so) */
@media (max-width:760px){.hero>*{position:relative;z-index:3}}
.mot.on .mot__vista{overflow:hidden;padding:30px 0 30px 40px;margin:-30px 0 -30px -40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 80px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 80px),transparent)}
.mot.on .mot__trilho{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(300px,25vw,350px);grid-template-rows:76px auto auto auto;column-gap:clamp(16px,2vw,28px);width:max-content;margin:0;padding:0;overflow:visible;scroll-snap-type:none;will-change:translate}
.mot.on .mot__item{display:grid;grid-row:1 / span 4;grid-template-rows:subgrid;row-gap:18px;flex:none}
.mot.on .mot__n{grid-row:1}
.mot.on .mot__cartao{grid-row:2 / span 3;display:grid;grid-template-rows:subgrid;row-gap:12px;margin-top:0}
.mot.on .mot__cartao>.mot__q{grid-row:1}
.mot.on .mot__cartao>h3{grid-row:2;margin:0}
.mot.on .mot__cartao>.mot__r{grid-row:3}
/* linha única embaixo dos números, como no sabec.dev: acompanha o trilho e se desenha com a rolagem */
.mot.on .mot__linha{display:block;position:absolute;left:0;right:0;top:76px;height:1px;background:var(--line);list-style:none}
.mot__linha i{position:absolute;left:0;top:-.5px;width:100%;height:2px;border-radius:2px;background:var(--grad);transform-origin:left;scale:var(--p,0) 1}
/* link de pular, pausa visível (WCAG 2.2.2), teclado no trilho dos motivos e fundos que separam as seções */
.pula{position:absolute;left:12px;top:-64px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;font:600 0.9375rem/1 var(--corpo);text-decoration:none}
.pula:focus{top:12px;outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--ink)}
main:focus-visible{outline:none}
.mot__trilho:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
.prova__marcas{position:relative}

.banda{position:relative;isolation:isolate}
.banda:before{content:"";position:absolute;inset:0;margin-inline:calc(50% - var(--cheio) / 2);z-index:-1;background:var(--banda)}
.banda--ceu{--banda:#f3f8ff}
/* Instagram: o mesmo pêssego suave em degradê dos diferenciais (sem faixa chapada) */
.banda--pessego{--banda:transparent}
.banda--pessego:before{background:radial-gradient(75% 65% at 50% 48%,rgba(255,243,233,.75),rgba(255,248,241,.4) 55%,rgba(255,250,246,0) 100%),radial-gradient(40% 30% at 90% 96%,rgba(236,246,255,.55),rgba(236,246,255,0) 100%);-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}

/* números e marcas: cartões à esquerda (dois pequenos e um largo); à direita o título e as logomarcas passando devagar (pausam com o
   mouse em cima ou com o dedo pressionado, e fora da tela; paradas e em fileiras só para quem pede menos movimento). */
.prova{padding-block:var(--s8);display:grid;gap:var(--s6) clamp(32px,5vw,96px);grid-template-areas:"cab" "cartoes" "marcas";--esc:1}
@media(min-width:960px){.prova{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"cartoes cab" "cartoes marcas";row-gap:var(--s5);align-items:center}.prova__cab{align-self:end}.prova__marcas{align-self:start}}
.prova__cartoes{grid-area:cartoes;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);list-style:none;margin:0;padding:0}
.prova__item{display:grid}
@media(min-width:761px){.prova .num:not(.num--frete){padding-top:clamp(20px,2vw,28px);min-height:clamp(124px,10vw,148px)}}
.num.num--frete{grid-column:1 / -1;grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:clamp(14px,2vw,24px);row-gap:2px;padding:clamp(18px,2vw,26px);min-height:0;background:linear-gradient(120deg,#eaf2ff,#fff 70%)}
.num--frete .num__ic{grid-row:1 / span 2;display:grid;place-items:center;width:clamp(52px,5vw,60px);height:clamp(52px,5vw,60px);border-radius:50%;background:#fff;box-shadow:var(--sombra-md);color:var(--ink)}
.num--frete .num__ic svg{width:50%;height:50%}
.num.num--frete b{align-self:end;font-size:clamp(2rem,1.3rem + 2.2vw,2.8rem)}
.frete{grid-column:1 / -1;width:100%;margin-top:clamp(12px,1.6vw,20px);text-align:left}
.frete label{display:block;margin:0 0 8px;font:600 0.875rem/1.2 var(--corpo);color:var(--ink)}
.frete__linha{display:flex;gap:8px}
.frete input{flex:1;min-width:0;height:46px;padding:0 18px;border:1px solid #d9dfe8;border-radius:99px;background:#fff;color:var(--ink);font:400 1rem/1 var(--corpo)}
.frete input::placeholder{color:var(--mut)}
.frete input:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:transparent}
.frete .btn{height:46px;flex:none;padding:0 20px}
.frete__res{margin:0;font-size:0.9375rem;line-height:1.45;color:var(--ink)}
.frete__res:empty{display:none}
.frete__res[data-t]{margin-top:10px;padding:10px 14px;border-radius:14px}
.frete__res[data-t=gratis]{background:var(--mint)}
.frete__res[data-t=taxa]{background:var(--peach)}
.frete__res[data-t=nao]{background:var(--sky)}
.frete__res .link{white-space:nowrap}
.num--frete>span:nth-of-type(2){align-self:start;max-width:none;min-height:0;font-size:clamp(1rem,.9rem + .6vw,1.35rem);font-weight:600;color:var(--ink)}
.prova__cab{grid-area:cab}.prova__cab h2{margin-top:16px;max-width:19ch}
.prova__marcas{grid-area:marcas;min-width:0}
.num{container-type:inline-size;position:relative;display:grid;align-content:start;justify-items:center;gap:8px;min-height:clamp(150px,17vw,210px);padding:24px 12px;text-align:center;border-radius:var(--r-card);box-shadow:var(--sombra);background:radial-gradient(70% 90% at 50% 0%,rgba(232,241,255,.9),#fff 74%)}
/* o centro dos algarismos fica 0,37em acima da linha de base e o do "+" só 0,25em, então o "+" sobe 0,12em; a estrela é um SVG centrado no mesmo ponto */
.num__mais{vertical-align:.12em}
.num__estrela{display:inline-block;width:.56em;height:.56em;margin-left:.1em;vertical-align:.09em;color:var(--ouro)}
.num b{display:block;font:600 clamp(1.2rem,25cqw,2.6rem)/1 var(--tit);white-space:nowrap;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.num>span{display:block;max-width:22ch;min-height:2.8em;color:var(--mut);font-size:0.9375rem;line-height:1.4}
a.num{color:inherit;text-decoration:none;grid-template-columns:1fr;height:100%}
a.num:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(hover:hover){a.num:hover{box-shadow:0 0 0 1px rgba(30,58,95,.3),var(--sombra-md)}}
.marcas__titulo{display:flex;align-items:center;gap:16px;font-weight:600;color:var(--ink);font-size:0.9375rem;margin:0}
.marcas__titulo:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.marquee{margin-top:var(--s4);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__faixa{display:flex;width:max-content;list-style:none;margin:0;padding:0;animation:corre 70s linear infinite}
.marquee.is-idle .marquee__faixa{animation-play-state:paused}
@media(hover:hover){.marquee:hover .marquee__faixa{animation-play-state:paused}}
.marquee:active .marquee__faixa{animation-play-state:paused}
@media(max-width:899px){.marquee__faixa{animation-duration:45s}}
@keyframes corre{to{transform:translate3d(-50%,0,0)}}
/* o espaço entre as logos é padding do item, não gap: assim a volta do laço (-50%) cai exatamente no começo, sem salto */
.marca{flex:none;display:flex;align-items:center;min-height:64px;padding-inline:clamp(24px,3.2vw,48px)}
.marca img{display:block;height:calc(var(--h) * var(--esc));width:auto;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
@media(hover:hover){.marca:hover img{filter:none;opacity:1}}
.marcas__aviso{font-size:0.75rem;line-height:1.5;color:var(--mut);margin:var(--s4) 0 0}
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__faixa{animation:none;width:auto;flex-wrap:wrap;row-gap:var(--s4)}
  .marquee__faixa [aria-hidden="true"]{display:none}
  .marca{padding:0 var(--s6) 0 0}
}
@media(max-width:599px){.prova{--esc:.78}}

/* avaliações */
/* avaliações: trilho com rolagem nativa (toque e trackpad), setas e arrastar com o mouse; 3 por vez, 2 no tablet, 1 no celular */
.aval{--por-vez:3;--vao:var(--s5)}
/* folga em volta dos cartões para o zoom e a sombra do passar o mouse não serem cortados pela rolagem */
.aval__trilho{display:flex;gap:var(--vao);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;list-style:none;margin:-24px -20px 0;padding:24px 20px 36px;scroll-padding-inline:20px}
.aval__trilho::-webkit-scrollbar{display:none}
.aval__trilho.arrasta{scroll-snap-type:none;cursor:grabbing;user-select:none}
.aval__card{flex:0 0 calc((100% - (var(--por-vez) - 1) * var(--vao)) / var(--por-vez));scroll-snap-align:start;display:flex;flex-direction:column;gap:16px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sombra-md);transition:scale .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease-out}
@media (hover:hover){.aval__card:hover{scale:1.02;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 24px 48px -16px rgba(30,58,95,.22),0 8px 16px -8px rgba(30,58,95,.1)}}
.aval .estrelas{font-size:1.125rem}
.aval blockquote{margin:0}.aval blockquote p{margin:0;font-size:1rem;line-height:1.6;color:var(--txt);text-wrap:pretty}
.aval__quem{margin:auto 0 0;display:grid;gap:4px}.aval__quem b{font-weight:600;color:var(--ink);font-size:0.9375rem}
.aval__quem span{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:0.8125rem}.aval__quem svg{width:14px;height:14px;flex:none}
.aval__nav{display:flex;justify-content:flex-end;margin-top:8px}.aval__setas{display:flex;gap:10px}
.aval__seta{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sombra-md);transition:background-color .15s ease-out,opacity .15s ease-out}
.aval__seta svg{width:16px;height:16px}.aval__seta[data-dir="-1"] svg{rotate:180deg}
.aval__seta:disabled{opacity:.4;cursor:default}
@media (hover:hover){.aval__seta:not(:disabled):hover{background:var(--sky)}}
/* entrada ao rolar, curta e só para quem não pediu menos movimento; sem o script, os cartões já aparecem */
@media (prefers-reduced-motion:no-preference){
  .aval.js .aval__card{opacity:0;translate:0 16px;transition:opacity .5s ease-out,translate .5s ease-out,scale .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease-out;transition-delay:calc(var(--i,0) * 80ms),calc(var(--i,0) * 80ms),0s,0s}
  .aval.js.visto .aval__card{opacity:1;translate:0}
}

/* Instagram: as últimas publicações do perfil, lidas de dados/instagram.json (no site publicado, um Worker agendado
   atualiza esse arquivo, então o que a Adriana posta aparece aqui). Grade em retrato 4:5, como o perfil do Instagram;
   cada foto abre a publicação, e ao passar o mouse mostra as curtidas e o começo da legenda. */
.ig-perfil{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;margin-top:18px}
.ig-perfil__foto{flex:none;width:58px;height:58px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,#1E3A5F,#3f7fcf 55%,#9cc6f5)}
.ig-perfil__foto img{width:100%;height:100%;border-radius:50%;border:2.5px solid #fff}
.ig-perfil b{display:block;font:600 1.0625rem/1.2 var(--corpo);color:#202020}
.ig-perfil small{display:block;color:var(--mut);font-size:0.875rem;margin-top:3px}
.ig-feed{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ig-feed li:nth-child(n+7){display:none}
.ig-post{position:relative;display:block;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#f1f1f1;box-shadow:var(--sombra);color:#fff;text-decoration:none}
.ig-post img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ig-post__tipo{position:absolute;right:10px;top:10px;width:22px;height:22px;color:#fff;--tr:1.75px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.ig-post__info{position:absolute;inset:auto 0 0 0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(10,20,35,.78));font-size:0.8125rem;line-height:1.4;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.ig-post__info b{display:block;font-weight:600;margin-bottom:4px}
.ig-post__info span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(hover:hover){.ig-post:hover img{transform:scale(1.05)}.ig-post:hover .ig-post__info{opacity:1;transform:none}}
.ig-post:focus-visible .ig-post__info{opacity:1;transform:none}

/* perguntas */
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s8);align-items:start}
.faq h2{margin-top:14px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:600 1.125rem/1.35 var(--tit);letter-spacing:-.015em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font:400 1.625rem/1 var(--corpo);color:var(--mut)}.faq details[open] summary:after{content:"−"}
.faq details p{margin:12px 0 0;color:var(--txt);max-width:64ch}

/* chamada final: a mesma moldura da abertura (pico-fim) */
.fim{margin:var(--s8) 12px 0;text-align:center;padding:88px var(--gutter);border-radius:40px;border:1px solid var(--line2);
  background:radial-gradient(50% 70% at 50% 100%,rgba(214,236,255,.9),transparent 75%),linear-gradient(#fff 25%,#e8f4ff)}
.fim h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.25rem);max-width:18ch;margin:16px auto 14px}
.fim p{color:var(--mut);margin:0 auto 28px;max-width:46ch}

/* rodapé: estrutura do da Senhora Cestas, nas cores da Amor in Box */
.rod{background:var(--deep);color:#d3dce8;margin-top:var(--s8);padding:56px 0 24px;font-size:0.9375rem}
/* 04/11 (guia do Lombra): o rodapé numa caixa mais estreita, com uma borda esquerda (logo, título, campo) e uma borda direita (contato, redes, links de baixo) */
.rod .wrap{padding-inline:max(var(--gutter),8vw)}
/* uma grade só: à esquerda a marca, a chamada do e-mail, o campo e o aceite; à direita os links, e na mesma altura do
   campo as formas de pagamento (começando junto da coluna Cestas) e na altura do aceite as redes (embaixo do endereço) */
/* 04/11: frase ao lado da logo (o bloco da esquerda sobe e o rodapé fica mais baixo); pagamento e redes na mesma linha, a da newsletter */
.rod__gr{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:84px;align-items:start;
  grid-template-areas:"marca cols" "chamada cols" "news cols" "aceite linha"}
.rod__linha{grid-area:linha;align-self:center;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:16px 20px;flex-wrap:wrap}
.rod__marca{grid-area:marca}.rod__chamada{grid-area:chamada}.rod__news{grid-area:news}.rod__aceite{grid-area:aceite}
.rod__cols{grid-area:cols}.rod__pag{margin-top:0}
.rod__marca{display:flex;align-items:center;gap:20px;max-width:520px}.rod__marca img{flex:none;height:55px;width:auto}.rod__marca b{display:inline-block;margin-bottom:3px;font-size:1.0625rem;letter-spacing:-.005em}.rod__marca p{text-wrap:pretty;margin:0;font-size:0.9375rem;line-height:1.5;color:#9fb0c6;padding-left:20px;border-left:1px solid #2e4a6e}.rod b{color:#fff}
.rod h3{color:#fff;font-size:clamp(1.6rem,1.2rem + 1.1vw,2.1rem);line-height:1.1;letter-spacing:-.035em;margin:28px 0 10px;max-width:17ch}
.rod__chamada p{max-width:52ch;margin:0 0 16px;font-size:0.875rem;line-height:1.5}
.rod__news{display:flex;align-items:center;gap:8px;border:1px solid #6b8ab3;border-radius:99px;background:#1b3555;padding:6px;max-width:520px}
.rod__news input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:400 1rem var(--corpo);padding:0 16px;outline:none}
.rod__news input::placeholder{color:#9fb0c6}
.rod__news .btn{min-height:46px;padding:0 22px;font-size:0.9375rem;font-weight:500;background:#fff;color:var(--deep)}
.rod__news:focus-within{outline:2px solid #fff;outline-offset:2px}
.rod__aceite{display:flex;gap:10px;font-size:0.8125rem;color:#9fb0c6;max-width:520px;margin-top:12px}.rod__aceite input{accent-color:#fff;width:18px;height:18px;flex:none}
/* 04/11: o mesmo respiro (36 px) entre todas as colunas; as de links têm a largura do próprio texto e o contato fica com o resto.
   Abaixo de 1440 px os vãos encolhem (56 e 28 px) para o endereço continuar em 3 linhas o quanto der. */
.rod__cols{display:grid;grid-template-columns:max-content max-content fit-content(122px) fit-content(360px);justify-content:space-between;gap:20px}
@media (max-width:1439px){.rod__gr{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);column-gap:56px}.rod__cols{column-gap:28px}}
.rod h4{color:#fff;margin:0 0 12px;font:600 1rem var(--tit)}
.rod ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.rod a{color:#d3dce8;text-decoration:none}@media (hover:hover){.rod a:hover{color:#fff}}
.rod__contato{font-size:0.8125rem;line-height:1.5}
.rod__contato li{display:flex;gap:10px;align-items:flex-start}.rod__contato svg{width:17px;height:17px;flex:none;margin-top:2px;color:#9fb0c6}
.rod__contato small{display:inline;color:#9fb0c6;font-size:0.8125rem}.rod__contato small span{margin:0 5px;color:#6b8ab3}
.rod__pag{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:0.8125rem;color:#9fb0c6}
.rod .rod__pag ul{display:flex;gap:8px}
.rod__pag li{height:36px;min-width:54px;padding:0 10px;border-radius:8px;background:#fff;display:grid;place-items:center}
.rod__pag img{height:calc(var(--h) * 1.05);width:auto}
.rod__pix{display:flex!important;align-items:center;gap:6px;color:#32bcad;font:600 0.9375rem/1 var(--corpo)}
.rod__redes{display:flex;gap:8px}
.rod__redes a{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--deep);display:grid;place-items:center;transition:transform .2s}@media (hover:hover){.rod__redes a:hover{color:var(--deep);transform:translateY(-2px)}}.rod__redes svg{width:19px;height:19px}
.rod__base{border-top:1px solid #2e4a6e;margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:0.8125rem;color:#9fb0c6}
/* ficha da cesta */
dialog.ficha{border:0;padding:0;border-radius:28px;width:min(960px,94vw);max-height:90vh;color:var(--txt);box-shadow:0 30px 80px -20px rgba(0,0,0,.35)}
dialog.ficha::backdrop{background:rgba(21,43,71,.45);backdrop-filter:blur(2px)}
/* altura fixa: a janela fica do mesmo tamanho em toda cesta, seja qual for o formato da foto */
.ficha__in{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);height:min(740px,90vh)}
.ficha__foto{position:relative;background:#f3f0ea}.ficha__foto img{width:100%;height:100%;object-fit:cover}
.ficha__txt{padding:32px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.ficha__x{position:absolute;right:14px;top:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.375rem;cursor:pointer;box-shadow:var(--sombra)}
.ficha h2{font-size:2.125rem;line-height:1.05}
.ficha__selo{padding-right:48px;color:var(--ink);font-weight:600;font-size:0.8125rem;letter-spacing:.03em}
.ficha__preco{display:flex;gap:12px;align-items:baseline}.ficha__preco b{font:600 1.625rem var(--tit);color:var(--ink)}.ficha__preco span{color:var(--mut)}
.ficha__ok{font-size:0.875rem;color:var(--mut);margin:0}
.ficha h3{font:600 0.75rem/1 var(--corpo);letter-spacing:.12em;color:var(--mut);margin-top:6px}
.ficha ul{margin:0;padding-left:18px;font-size:0.9375rem;line-height:1.5;columns:2;column-gap:24px}
.ficha .btn--destaque{width:100%;margin-top:6px;justify-content:space-between}
.ficha__mais{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:0.9375rem}
.ficha__mais button{background:none;border:0;padding:0;font:600 0.9375rem var(--corpo);color:var(--ink);text-decoration:underline;cursor:pointer}
.ficha__pe{border-bottom:1px solid var(--line);padding-bottom:10px;margin:0;font-size:0.75rem;color:var(--mut);text-align:center}

.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-size:0.875rem;z-index:60;display:none}

@media (max-width:1100px){.faq{grid-template-columns:minmax(0,1fr)}.rod__gr{grid-template-columns:minmax(0,1fr);grid-template-areas:"marca" "chamada" "news" "aceite" "cols" "linha"}.rod__linha{margin-top:32px}.rod__cols{margin-top:40px}.aval{--por-vez:2}.ig-feed{grid-template-columns:repeat(3,1fr)}.rod__cols{grid-template-columns:repeat(2,minmax(0,1fr))}.rod__cols>div:last-child{grid-column:1 / -1;padding-left:0}
  .cab{padding-inline:32px}.nav{display:none}.cab__fim{margin-left:auto}.menu-bt{display:grid;place-items:center}
}
@media (max-width:760px){
  /* seção 1 no celular: medidas do portrait.so em 390 px (barra de 48 px, abertura com 128 px em cima e 32 nas
     laterais, título de 38 px, campo de 48 px com o botão inteiro embaixo, painel estreito com a grade de 2 colunas) */
  .cab{top:12px;margin-top:24px;padding-inline:24px}.cab__in{height:48px;padding:0 4px 0 18px}.cab__logo img{height:30px}
  .cab__fim .btn--contorno{height:38px;padding:0 14px;font-size:0.875rem}
  .menu-bt{width:40px;height:40px}.cab__fim .btn--contorno{display:none}
  .moldura{margin:-60px 12px 0;border-radius:32px}
  .hero{padding:137px 20px 139px}
  .so-pc{display:none}
  .selo--pc{display:none}.selo--cel{display:inline}
  .hero h1{font-size:2.3625rem;line-height:1;letter-spacing:-.05em;margin:32px auto 33px}
  .hero__sub{font-size:0.9375rem;line-height:1.5;max-width:22em}
  .pedido{width:auto;margin:64px 13px 0}
  .pedido__campo{height:48px;padding-left:18px}
  .pedido__pre,.pedido input,.rola{font-size:1.0625rem}
  .pedido__onde{margin-right:12px}
  .pedido .btn--destaque{position:relative;right:auto;top:auto;width:100%;margin-top:8px;height:48px;justify-content:space-between}.pedido .orb{--orb:36px}
  .hero__link{margin-top:46px}
  .painel{margin-top:-47px;padding-inline:34px}
  .painel__in{padding:24px 24px 0;border-radius:28px}
  .painel__cab{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:20px}
  .painel__foto{width:60px;height:60px;margin:0}
  .painel__cab>div{flex:1;min-width:0;padding:0}.painel__nome{font-size:1.0625rem;line-height:1.3}.painel__bio{font-size:0.8125rem;line-height:1.4;margin-top:2px}
  .painel__cab .btn--escuro{margin:0 auto;height:38px;padding:0 14px}
  .grade{height:300px;clip-path:inset(-3000px -3000px 0 -3000px);grid-template-columns:1fr 1fr;grid-auto-rows:minmax(calc((100cqw - 16px) / 2),auto);gap:16px;grid-template-areas:"a b" "c b" "c d" "e f"}
  .tile{border-radius:20px}
  .tile--link,.tile--nota{padding:10px}.tile--link img{border-radius:8px}.tile--link b,.tile--nota b{font-size:0.75rem;line-height:1.3;margin-top:7px}.tile__meta,.nota__topo{font-size:0.75rem;gap:5px}
  /* no celular os cartões têm o tamanho de uma foto: só o essencial, o cartão inteiro já é o link (revisão de 29/10) */
  .t4 .tile__meta,.tile--nota p{display:none}
  .nota__topo svg{width:14px;height:14px}.tile--nota:after{width:28px;height:28px;border-top-left-radius:9px}
  .sec{padding-block:var(--s7)}
  .prova__cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}.prova__item{grid-column:1 / -1}.prova .num{min-height:104px;padding:18px 10px}.prova .num b{font-size:clamp(1.6rem,28cqw,2.4rem)}.prova .num--frete{min-height:0;padding:18px 16px}.prova .num--frete b{font-size:clamp(1.9rem,9vw,2.4rem)}.prova .num>span{font-size:0.875rem;min-height:0;max-width:none}.frete label{font-size:0.8125rem}.frete input{height:44px;padding:0 14px}.frete .btn{height:44px;padding:0 16px}.frete__res{font-size:0.875rem}.num em{display:none}.prova .num--frete>span:nth-of-type(2){font-size:1rem}.prova{padding-block:calc(var(--s7) + 16px) var(--s5)}
  .aval{--por-vez:1}.aval__card{flex-basis:88%;padding:24px}
  .adic{flex-wrap:wrap;gap:14px 16px}.adic__txt{flex-basis:100%}.adic__bt{width:100%}
  .num>span{font-size:0.875rem}
  .ig-feed{gap:4px;margin-inline:calc(var(--gutter) * -1)}.ig-post{border-radius:0;box-shadow:none}.ig-post__tipo{width:18px;height:18px;right:6px;top:6px}
  .fim{margin:var(--s7) 8px 0;border-radius:28px;padding:56px 20px}
  .rod__base{flex-direction:column}
  dialog.ficha{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:94vh}
  .ficha__in{grid-template-columns:1fr;grid-template-rows:auto;height:auto;max-height:94vh;overflow:auto}
  .ficha__foto img{height:28vh;max-height:none}
  .ficha__txt{padding:18px 18px 16px;overflow:visible;gap:9px}
  .ficha h2{font-size:1.75rem}.ficha ul{columns:1;font-size:0.875rem;list-style:none;padding:0;line-height:1.45}.ficha li{display:inline}.ficha li:not(:last-child):after{content:" · ";color:var(--mut)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* entrada suave ao rolar */
.tem-rv .rv{opacity:0;translate:0 18px;transition:opacity .7s ease-out,translate .8s cubic-bezier(.2,.8,.2,1)}
.tem-rv .rv.rv-in{opacity:1;translate:none}

/* fundos em degradê (o do "Try Portrait Wallet" do portrait.so), um por seção: diferenciais em laranja (pêssego, preso ao palco), atendimento em azul-céu e números com pêssego e céu no canto. Cada um some nas bordas */
.fundo-grande{position:relative}
.mot__palco{isolation:isolate}
#atendimento,#numeros{position:relative;isolation:isolate}
.mot__palco:before,#atendimento:before,#numeros:before{content:"";position:absolute;z-index:-1;left:50%;translate:-50% 0;width:var(--cheio);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.mot__palco:before{inset-block:0;background:radial-gradient(75% 65% at 50% 48%,rgba(255,243,233,.75),rgba(255,248,241,.4) 55%,rgba(255,250,246,0) 100%),radial-gradient(40% 30% at 90% 96%,rgba(236,246,255,.55),rgba(236,246,255,0) 100%)}
#atendimento:before{top:-80px;bottom:-120px;background:radial-gradient(74% 58% at 50% 42%,rgba(214,236,255,.95),rgba(214,236,255,0) 100%),radial-gradient(40% 28% at 12% 92%,rgba(255,232,208,.7),rgba(255,232,208,0) 100%)}
#numeros:before{top:-60px;bottom:-150px;background:radial-gradient(60% 40% at 50% 8%,rgba(214,236,255,.7),rgba(214,236,255,0) 100%),radial-gradient(60% 55% at 50% 58%,rgba(255,243,233,.6),rgba(255,247,240,.3) 55%,rgba(255,250,246,0) 100%),radial-gradient(40% 30% at 82% 88%,rgba(227,242,255,.8),rgba(227,242,255,0) 100%)}
/* atendimento pelo WhatsApp (modelo da seção "Try Portrait Wallet" do portrait.so): cartão largo, texto à esquerda e uma tela animada à direita. Sem JavaScript ou com menos movimento os 4 passos ficam empilhados e prontos */
.atend__palco{margin:0 auto}
.atend__car{overflow:hidden;padding:24px 0;margin:-24px 0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.atend__car.arrasta{cursor:grabbing}
.atend__car img{-webkit-user-drag:none;pointer-events:none}
.atend__trilho{display:flex;flex-direction:column;gap:20px}
.slide{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);height:480px;border-radius:30px;background:#fff;box-shadow:0 0 0 1px rgba(30,58,95,.09),0 18px 40px -26px rgba(30,58,95,.25);overflow:hidden}
.atend.js .atend__trilho{flex-direction:row;will-change:translate}
.atend.js .slide{flex:0 0 min(960px,calc(100% - 96px))}
.atend.js .slide{transition:opacity .5s ease}.atend.js .slide:not(.ativo){opacity:.35}
.slide__txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:clamp(24px,3.4vw,44px)}
.slide__chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;font:500 .8125rem/1 var(--corpo);color:var(--mut);background:#fff}
.slide__chip svg{width:15px;height:15px;color:#128c4a}
.slide__txt h3{margin:0;font:700 clamp(1.75rem,2.5vw,2.25rem)/1.12 var(--tit);letter-spacing:-.025em;color:#0f2d4a}
.slide__txt p{margin:0;max-width:34ch;color:#4d7894;font-size:1.125rem;line-height:1.5}
.slide__ui{display:grid;place-items:center;padding:20px;border-left:1px solid var(--line);background:#f7f9fc;min-width:0}
.slide__ui:not(.slide__ui--wa){display:block;padding:0;background:#fbf9f5}
.slide__ui--wa{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:14px 18px;background:#ebe5dd url("img/fundo-whatsapp-atendimento-amor-in-box-joao-pessoa.webp") center / cover no-repeat}
/* conversa no jeito do WhatsApp: balões justos, hora e tiques dentro do balão, quem pede em branco à esquerda e a Adriana em verde à direita */
.wa{display:flex;flex-direction:column;gap:8px;width:100%}
.wa__rot{align-self:center;margin:0;padding:3px 10px;border-radius:8px;background:rgba(255,255,255,.7);font:500 .75rem/1.2 var(--corpo);color:#667781}
.wa__corpo{display:flex;flex-direction:column}
.msgl{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.msgl--seq{margin-top:3px}
.msgl--ela{flex-direction:row-reverse}
.msgl--digita{display:none}
.msg{margin:0;max-width:80%;padding:6px 9px 7px 10px;border-radius:8px;font:400 .9375rem/1.35 var(--corpo);color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.msg--eu{background:#fff}
.msg--ela{background:#d9fdd3}
.msg__h{float:right;margin:7px 0 -4px 10px;font-size:.6875rem;line-height:1;color:#667781;white-space:nowrap}
.tk{margin-left:3px;color:#53bdeb;letter-spacing:-.18em}
.msg--foto{padding:3px;width:min(62%,250px)}.msg--foto img{display:block;width:100%;min-width:0;aspect-ratio:16 / 9;height:auto;object-fit:cover;object-position:center 45%;border-radius:6px}.msg--foto .msg__h{display:block;float:none;margin:3px 4px 1px;text-align:right}
.msg--digita{display:flex;align-items:center;gap:4px;padding:10px 12px}
.msg--digita i{width:6px;height:6px;border-radius:50%;background:#7d8aa0;animation:ch-pt 1s infinite}.msg--digita i:nth-child(2){animation-delay:.15s}.msg--digita i:nth-child(3){animation-delay:.3s}
.av{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;background:#cfd6df}
.campo{min-height:38px;display:flex;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font:400 .875rem/1.2 var(--corpo);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.fotos{display:flex;gap:8px}.fotos i{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#dcebff,#ffe9d4)}
.campo--l{align-items:flex-start;min-height:58px}
/* cartão de pagamento dentro da conversa (modelo do "Pay Links" do portrait.so) */
.pg{align-self:flex-end;display:grid;gap:8px;width:min(72%,300px);margin:10px 44px 0 0;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.pg small{font:500 .75rem/1 var(--corpo);color:#7a8799}
.pg__v{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
@media (max-width:760px){.pg{width:calc(100% - 48px);max-width:300px;margin-right:40px;box-sizing:border-box}.pg small{white-space:normal;line-height:1.25}}.pg__v b{font:700 1.625rem/1 var(--tit);letter-spacing:-.02em;color:#0f9a63;white-space:nowrap}
.pg__v em{font:500 .8125rem/1 var(--corpo);font-style:normal;color:#7a8799}
.pg__btn{display:grid;place-items:center;min-height:36px;border-radius:10px;background:linear-gradient(#16b877,#0f9a63);color:#fff;font:600 .875rem/1 var(--corpo);transition:background .3s}
.pg__b1,.pg__st:not(.pg__st--ok){display:none}
.pg__st--ok{color:#0f9a63}
.pg__gatilho{display:none}
.atend.anima .pg:not(:has(.pg__gatilho.v)) .pg__v b{color:var(--ink)}
.atend.anima .pg:not(:has(.pg__gatilho.v)) .pg__st:not(.pg__st--ok){display:inline;color:#7a8799}
.atend.anima .pg:not(:has(.pg__gatilho.v)) .pg__st--ok,.atend.anima .pg:not(:has(.pg__gatilho.v)) .pg__b2{display:none}
.atend.anima .pg:not(:has(.pg__gatilho.v)) .pg__btn{background:#e8ecf2;color:var(--ink)}
.atend.anima .pg:not(:has(.pg__gatilho.v)) .pg__b1{display:inline}
/* formulário do pedido no jeito do app (PedidoCliente.tsx), 4 passos. O rodapé com o botão já existe, como na wallet do Portrait: o botão é "clicado" e o formulário passa ao passo seguinte */
.ped{display:flex;flex-direction:column;width:100%;height:100%;background:#fbf9f5;overflow:hidden}
.ped__corpo{position:relative;flex:1;padding:16px 20px 8px;overflow:hidden}
.ped__cena{display:none;gap:9px;align-content:start}
.ped__cena--3{display:grid}
.ped__prog{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.ped__prog i{height:5px;border-radius:99px;background:#e3e0d8}.ped__prog i.on{background:var(--ink)}
.ped__passo{font:500 .75rem/1 var(--corpo);color:#5d6b7c}
.ped h5{margin:0;font:600 1.125rem/1.2 var(--tit);color:var(--ink)}
.ped p{margin:0;font-size:.875rem;line-height:1.45;color:#5d6b7c}
.ped .ped__peq{font-size:.8125rem}
.ped__bloco{display:grid;gap:8px;padding:12px 14px;border:1px solid #e3e0d8;border-radius:14px;background:#fff}
.ped__bloco>b{font:600 .9375rem/1.2 var(--tit);color:var(--ink)}.ped__bloco>b small{font-weight:400;color:#5d6b7c}
.ped__c{display:grid;gap:4px}.ped__c small{font:500 .8125rem/1 var(--corpo);color:var(--ink)}
.ped__foto{display:grid;place-items:center;min-height:38px;border:2px dashed #cfcac0;border-radius:12px;font:500 .875rem/1 var(--corpo);color:var(--ink)}
.ped__res{list-style:none;margin:0;padding:0;display:grid;gap:6px;font:500 .875rem/1.3 var(--corpo);color:var(--ink)}.ped__res small{display:block;font-weight:400;font-size:.75rem;color:#5d6b7c}
.ped__aceite{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #e3e0d8;border-radius:14px;background:#fff;font:400 .8125rem/1.35 var(--corpo);color:#5d6b7c}
.ped__aceite i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--ink);color:#fff;font-style:normal;font-size:.75rem}
.ped__zap{display:grid;place-items:center;min-height:42px;border-radius:12px;background:#128c4a;color:#fff;font:600 .9375rem/1 var(--corpo)}
.ped__rodape{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid #e3e0d8;background:rgba(255,255,255,.95)}
.ped__voltar{display:none;place-items:center;min-height:44px;padding:0 16px;border:2px solid #e3e0d8;border-radius:12px;background:#fff;font:500 .9375rem/1 var(--corpo);color:var(--ink)}
.ped__btn{flex:1;display:grid;place-items:center;min-height:44px;border-radius:12px;background:var(--ink);color:#fff;font:600 1rem/1 var(--corpo);transition:scale .15s,filter .15s}
.ped__btn .b2{display:none}
.ped__marca{display:none}
.atend.anima .ped__cena{display:none}
.atend.anima .ped__cena.v{display:grid}
.atend.anima .ped__rodape:has(.ped__passa2.v) .ped__voltar{display:grid}
.atend.anima .ped__rodape:has(.ped__toque.v) .ped__btn{scale:.96;filter:brightness(1.3)}
.atend.anima .ped__rodape:has(.ped__envia.v) .b1{display:none}
.atend.anima .ped__rodape:has(.ped__envia.v) .b2{display:inline}
.atend.anima .ped:has(.ped__fim.v) .ped__rodape{display:none}
/* pontos do portrait.so: o ponto do passo ativo estica (8 para 32 px) e enche da esquerda para a direita no tempo do passo; quando enche, passa
   para o próximo (e do último volta ao primeiro). O botão ao lado pausa e retoma a animação e a troca. Com menos movimento: sem troca sozinha,
   sem barra e sem botão. */
.atend__nav{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:24px}
.atend__dot{display:flex;align-items:center;height:32px;padding:0 2px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.atend__dot i{display:block;width:8px;height:8px;overflow:hidden;border-radius:99px;background:#dde3ea;transition:width .4s var(--mola),background-color .2s}
.atend__dot b{display:block;width:100%;height:100%;border-radius:inherit;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.atend__dot[aria-current="true"] i{width:32px}
@media (hover:hover){.atend__dot[aria-current="false"]:hover i{background:#c3ccd7}}
.atend__dot:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:99px}
.atend__pausa{display:grid;place-items:center;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:none;color:var(--mut);cursor:pointer;transition:color .2s}
.atend__pausa svg{width:16px;height:16px}
.atend__pausa .i-toca,.atend__pausa[aria-pressed="true"] .i-pausa{display:none}
.atend__pausa[aria-pressed="true"] .i-toca{display:block}
@media (hover:hover){.atend__pausa:hover{color:var(--ink)}}
.atend__pausa:focus-visible{color:var(--ink);outline:3px solid var(--ink);outline-offset:2px}
.atend:not(.anima) .atend__pausa{display:none}
.atend:not(.anima) .atend__dot[aria-current="true"] b{transform:none}
/* com o JavaScript só um passo aparece por vez e cada elemento entra na sua hora (.v); o espaço de tudo já está reservado, então nada pula */
.atend.anima .msgl,.atend.anima .pg,.atend.anima .campo,.atend.anima .fotos,.atend.anima .ped__foto,.atend.anima .ped__res li,.atend.anima .ped__aceite{opacity:0;translate:0 8px;transition:opacity .35s,translate .35s,border-color .2s,box-shadow .2s}
.atend.anima .v{opacity:1;translate:0 0}
.atend.anima .campo.v{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.atend.anima .msgl--digita.v{display:flex}
@media (max-width:760px){
  .slide{grid-template-columns:minmax(0,1fr);height:auto}
  .slide__ui{border-left:0;border-top:1px solid var(--line);min-height:420px}.ped{max-height:none}
  .atend.js .slide{flex-basis:calc(100% - 40px)}
}
@media (prefers-reduced-motion:reduce){.msg--digita i{animation:none}}
/* voltar ao topo flutuante: aparece depois de rolar mais de uma tela, discreto (círculo claro com vidro fosco e fio fino, sem cor de marca), igual no computador e no celular */
.subir{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:30;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(30,58,95,.14),0 6px 16px -8px rgba(30,58,95,.3);color:var(--ink);cursor:pointer;opacity:0;translate:0 8px;pointer-events:none;transition:opacity .25s ease-out,translate .25s ease-out,box-shadow .2s ease-out}
.subir.on{opacity:.9;translate:none;pointer-events:auto}
.subir svg{width:16px;height:16px;rotate:-90deg}
.subir:focus-visible{outline:3px solid var(--ink);outline-offset:2px;opacity:1}
@media (hover:hover){.subir.on:hover{opacity:1;box-shadow:0 0 0 1.5px rgba(30,58,95,.4),0 8px 20px -8px rgba(30,58,95,.35)}}
@media (prefers-reduced-motion:reduce){.subir{transition:none}}
/* menu do celular: painel que cobre a página (barra transparente por cima, que vira X), itens grandes com fio fino, Cestas e Sobre abrem na setinha e o botão do
   WhatsApp no fim, na cor padrão dos botões, com o rolar do texto e do ícone ao passar o dedo ou o mouse (efeito do menu do template Tandem) */
@media (max-width:1100px){
  html.sem-rolagem{overflow:hidden}
  html.sem-rolagem .subir{display:none}
  .cab.menu-aberto .cab__in{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .mc{position:fixed;inset:0;z-index:29;display:block;overflow-y:auto;overscroll-behavior:contain;padding:var(--topo,96px) 24px 32px;background:linear-gradient(#fff,#f3f8ff);opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s .25s}
  .mc.on{opacity:1;visibility:visible;transition:opacity .25s ease-out}
  .mc__nav{max-width:520px;margin:0 auto}
  .mc__lista{list-style:none;margin:0;padding:0}
  .mc__item{border-bottom:1px solid var(--line)}
  .mc__link,.mc__gatilho{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:0 2px;border:0;background:none;color:var(--ink);font:600 1.5rem/1.2 var(--tit);letter-spacing:-.02em;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mc__gatilho svg{flex:none;width:20px;height:20px;color:var(--mut);transition:rotate .35s cubic-bezier(.65,0,.35,1)}
  .mc__item.on .mc__gatilho svg{rotate:180deg}
  .mc__link:focus-visible,.mc__gatilho:focus-visible,.mc__sub a:focus-visible,.mc__wa:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
  .mc__sub{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .35s cubic-bezier(.65,0,.35,1),visibility 0s .35s}
  .mc__item.on .mc__sub{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .35s cubic-bezier(.65,0,.35,1)}
  .mc__sub ul{min-height:0;overflow:hidden;list-style:none;margin:0;padding:0}
  .mc__sub li:last-child{padding-bottom:14px}
  .mc__sub a{display:block;padding:9px 2px 9px 14px;color:var(--txt);font:500 1.125rem/1.3 var(--corpo);text-decoration:none}
  .mc__sub li:last-child a{font-weight:600;color:var(--ink)}
  .mc__wa{display:flex;align-items:center;justify-content:space-between;height:58px;margin-top:32px;padding:0 8px 0 26px;border-radius:99px;background:var(--ink);color:#fff;font:600 1.0625rem/1 var(--corpo);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .mc__rot{display:block;height:1.25em;overflow:hidden;line-height:1.25}
  .mc__rot span{display:block;transition:translate .5s cubic-bezier(.65,0,.35,1)}
  .mc__ic{position:relative;display:block;flex:none;width:42px;height:42px;overflow:hidden;border-radius:50%;background:rgba(255,255,255,.16)}
  .mc__ic svg{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;transition:translate .5s cubic-bezier(.65,0,.35,1)}
  .mc__ic svg:last-child{translate:-34px 34px}
  .mc__wa:active .mc__rot span,.mc__wa:focus-visible .mc__rot span{translate:0 -100%}
  .mc__wa:active .mc__ic svg:first-child,.mc__wa:focus-visible .mc__ic svg:first-child{translate:34px -34px}
  .mc__wa:active .mc__ic svg:last-child,.mc__wa:focus-visible .mc__ic svg:last-child{translate:0 0}
  @media (hover:hover){.mc__wa:hover .mc__rot span{translate:0 -100%}.mc__wa:hover .mc__ic svg:first-child{translate:34px -34px}.mc__wa:hover .mc__ic svg:last-child{translate:0 0}}
  /* entrada: os itens sobem um a um */
  .mc__item,.mc__wa{opacity:0;translate:0 12px;transition:opacity .35s ease-out,translate .45s cubic-bezier(.2,.8,.2,1)}
  .mc.on .mc__item,.mc.on .mc__wa{opacity:1;translate:none}
  .mc.on .mc__item:nth-child(1){transition-delay:.08s}.mc.on .mc__item:nth-child(2){transition-delay:.13s}.mc.on .mc__item:nth-child(3){transition-delay:.18s}.mc.on .mc__item:nth-child(4){transition-delay:.23s}.mc.on .mc__item:nth-child(5){transition-delay:.28s}.mc.on .mc__wa{transition-delay:.35s}
}
@media (min-width:1101px){.mc{display:none}}
@media (prefers-reduced-motion:reduce){.mc,.mc__item,.mc__wa,.mc__sub,.mc__gatilho svg,.mc__rot span,.mc__ic svg,.menu-bt i{transition:none!important}}

/* próxima data sazonal (04/11/2026, Natal): cartão azul-marinho com dourado (paleta do guia), cronômetro e duas polaroides */
#proxima-data{padding-bottom:0}
.dt{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:var(--s7);align-items:center;padding:clamp(32px,4.4vw,72px);border-radius:var(--r-card);color:#fff;
  background:radial-gradient(55% 90% at 88% 40%,rgba(63,127,207,.38),rgba(63,127,207,0) 70%),radial-gradient(40% 60% at 0% 100%,rgba(207,162,45,.14),rgba(207,162,45,0) 70%),var(--deep);box-shadow:var(--sombra-alta)}
.dt:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(233,207,140,.55) 0 1px,transparent 1.6px) 0 0/34px 34px;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 85%);mask-image:linear-gradient(100deg,transparent 35%,#000 85%);opacity:.5}
html #proxima-data .selo-sec{color:#e9cf8c}
.dt h2{margin:18px 0 0;color:#fff;font-size:clamp(2rem,1.2rem + 2.2vw,3.4rem);line-height:1.05;max-width:16ch}
.dt .it{background:linear-gradient(100deg,#f3e2b0 10%,#cfa22d 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dt__p{margin:18px 0 0;max-width:50ch;color:rgba(255,255,255,.78);line-height:1.6}.dt__p b,.dt__nota b{color:#fff;font-weight:600}
.dt__cd{display:flex;gap:10px;margin:28px 0 0}
.dt__cd div{display:grid;justify-items:center;gap:6px;min-width:76px;padding:14px 8px 12px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.dt__cd b{font:300 2.5rem/1 var(--serifa,var(--tit));font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dt__cd span{font:500 .6875rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.dt__nota{margin:14px 0 0;font-size:.9375rem;color:rgba(255,255,255,.72)}
.dt__bts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.dt__wa{color:#fff;font-weight:500;cursor:pointer}
.dt__fotos{position:relative;height:440px}
.dt__pol{position:absolute;margin:0;padding:12px 12px 0;border-radius:4px;background:#fff;box-shadow:0 30px 50px -20px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);transition:rotate .5s var(--mola),translate .5s var(--mola)}
.dt__pol img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:2px;background:#f3f0ea}
.dt__pol figcaption{display:grid;place-items:center;height:58px;font:italic 400 1.5rem/1 var(--serifa,var(--tit));color:var(--ink)}
.dt__pol:before{content:"";position:absolute;left:50%;top:-12px;width:90px;height:26px;translate:-50% 0;rotate:-3deg;background:rgba(255,235,214,.85);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.dt__pol--a{z-index:2;width:56%;left:0;top:24px;rotate:-5deg}
.dt__pol--b{width:50%;right:0;top:64px;rotate:6deg}
@media (hover:hover){.dt:hover .dt__pol--a{rotate:-7deg;translate:-8px -4px}.dt:hover .dt__pol--b{rotate:8deg;translate:8px 4px}}
@media (max-width:1000px){.dt{grid-template-columns:minmax(0,1fr)}.dt__fotos{height:360px;max-width:460px;width:100%;justify-self:center}}
@media (max-width:599px){.dt{padding:28px 22px}.dt__cd{gap:8px}.dt__cd div{min-width:0;flex:1;padding:12px 4px 10px}.dt__cd b{font-size:1.875rem}.dt__fotos{height:280px}.dt__pol{padding:8px 8px 0}.dt__pol figcaption{height:42px;font-size:1.125rem}.dt__bts{gap:16px}.dt__bts .btn{width:100%;justify-content:space-between}}
@media (prefers-reduced-motion:reduce){.dt__pol{transition:none}}

/* janelas do catálogo e das preferências de cookies (as páginas de linha também usam): cabeçalho, rodapé e botão de fechar */
html:has(.fl[open], .cmp[open], .ck-pref[open]){overflow:hidden}
.fl,.cmp,.ck-pref{width:min(520px,calc(100% - 32px));max-height:min(720px,calc(100dvh - 32px));padding:0;border:0;border-radius:24px;background:#fff;color:var(--txt);box-shadow:0 30px 80px -20px rgba(16,32,56,.45)}
.fl[open],.cmp[open],.ck-pref[open]{display:flex;flex-direction:column}
.fl::backdrop,.cmp::backdrop,.ck-pref::backdrop{background:rgba(16,32,56,.4)}
.fl__cab{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 16px 24px;border-bottom:1px solid var(--line)}
html .fl__cab h2{margin:0;font:400 1.5rem/1.2 var(--serifa);letter-spacing:-.01em}
.fl__pe{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px 14px 24px;border-top:1px solid var(--line)}
.fl__pe .link{background:none;border-top:0;border-inline:0;cursor:pointer;font:inherit;font-weight:600}
.ag__x{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#f1f4f8;color:var(--ink);font:300 1.75rem/1 var(--corpo);cursor:pointer}
.ag__x:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (max-width:760px){.fl,.cmp,.ck-pref{width:100%;max-width:none;max-height:88dvh;margin:auto 0 0;border-radius:24px 24px 0 0}}

/* cookies e privacidade (consentimento.js, 04/11/2026): cartão pequeno no canto, três botões com o mesmo peso (guia da ANPD), sem travar a página */
.ck{position:fixed;left:20px;bottom:20px;z-index:60;width:min(420px,calc(100% - 32px));padding:18px 18px 16px;border-radius:20px;background:#fff;color:var(--txt);box-shadow:0 18px 50px -12px rgba(16,32,56,.35),0 0 0 1px rgba(0,0,0,.04);animation:ck-entra .5s cubic-bezier(.2,.8,.2,1)}
@keyframes ck-entra{from{opacity:0;translate:0 16px}}
.ck__tit{margin:0;font:600 1rem/1.3 var(--corpo);color:var(--ink)}
.ck__txt{margin:6px 0 0;font-size:0.875rem;line-height:1.55;color:var(--mut)}.ck__txt .link{font-size:inherit}
.ck__bts{display:grid;grid-template-columns:repeat(3,auto);gap:8px;margin-top:14px}
.ck .btn,.ck-pref .btn{height:42px;padding:0 12px;justify-content:center;font-size:0.875rem}
.ck-pref__corpo{flex:1;overflow:auto;padding:8px 24px 8px}
.ck-cat{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer}
.ck-cat span{display:grid;gap:4px}.ck-cat b{font-weight:600;color:var(--ink)}.ck-cat small{font-size:0.8125rem;line-height:1.5;color:var(--mut)}
.ck-cat input{flex:none;width:44px;height:26px;margin:2px 0 0;border-radius:99px;background:#d5dbe4;-webkit-appearance:none;appearance:none;cursor:pointer;position:relative;transition:background-color .2s}
.ck-cat input:before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:translate .2s cubic-bezier(.2,.8,.2,1)}
.ck-cat input:checked{background:var(--ink)}.ck-cat input:checked:before{translate:18px 0}
.ck-cat input:disabled{opacity:.55;cursor:default}
.ck-cat input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ck-pref__nota{margin:14px 0 8px;font-size:0.8125rem;line-height:1.55;color:var(--mut)}.ck-pref__nota .link{font-size:inherit}
.ck-pref__pe{flex-wrap:wrap;justify-content:flex-end;gap:8px}
.rod__ck{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:760px){.ck{left:12px;right:12px;bottom:12px;width:auto;padding:16px}}
@media (prefers-reduced-motion:reduce){.ck{animation:none}.ck-cat input,.ck-cat input:before{transition:none}}

/* revisão do ritmo vertical do Início (Lombra, 05/11): o mesmo respiro (--sec-y) em cima e embaixo de todas as seções, e mais ar (--cab-gap) entre o título da seção e o conteúdo.
   Antes cada seção tinha o seu valor (de 0 a 88 px) e o balão da chamada final e o rodapé tinham outro. */
body.home{--sec-y:88px;--cab-gap:56px}
.home .sec,.home .prova,.home .mot{padding-block:var(--sec-y)}
.home #proxima-data{padding-bottom:var(--sec-y)}
.home .mot.on .mot__palco{padding-block:var(--sec-y)}
.home .sec__cab{margin-bottom:var(--cab-gap)}
.home .atend__nav{margin-top:36px}
.home .fim,.home .rod{margin-top:var(--sec-y)}
@media (max-width:760px){body.home{--sec-y:56px;--cab-gap:32px}}
/* chamada final em balão degradê: centralizada e no máximo na largura padrão da página (--largura); no celular fica com 12 px de cada lado */
.fim{margin-inline:auto;width:min(calc(100% - 24px),var(--largura))}
/* efeitos e estrutura do atendimento (modelo do Portrait), com as larguras e as letras de antes */
@media (min-width:761px){
  .atend__car{margin-inline:calc(50% - var(--cheio) / 2)} /* o carrossel vai de canto a canto da página */
  .atend.js .slide{flex-basis:min(960px,80vw)} /* cartão de 960 x 460 px (80% da tela, no máximo 960), vão de 24 px, texto 60% e tela 40% */
  .atend__trilho{gap:24px}
  .slide{height:460px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .atend.js .slide:not(.ativo) .slide__ui{background:#fff} /* nos cartões vizinhos o fundo da tela vira branco, como no Portrait */
}
/* rodapé como no print do Lombra: margens da página (as mesmas do resto) no lugar dos 8vw, para o endereço caber em três linhas */
.rod .wrap{padding-inline:var(--gutter)}
@media (min-width:1101px) and (max-width:1439px){.rod__gr{grid-template-columns:minmax(0,380px) minmax(0,1fr);column-gap:40px}.rod__cols{column-gap:20px}.rod__contato,.rod__contato small{font-size:0.75rem}} /* notebooks: coluna da esquerda mais estreita para o endereço não quebrar tanto */
/* rodapé (Início e páginas de linha) no desenho do print do Lombra (conteúdo de 1405 px, coluna de 440 + 84 de vão), reduzido a 91,1% (zoom) para caber nos 1280 px do teto: letras, logo e botões menores na mesma proporção */
@media (min-width:1290px){
  .rod{zoom:.911}
  .rod .wrap{max-width:calc(1405px + 2 * var(--gutter));padding-inline:var(--gutter)}
  .rod__gr{grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:84px}
  .rod__cols{column-gap:20px}
  .rod__contato,.rod__contato small{font-size:0.8125rem}
}
/* Início com teto de 1280 px (Lombra, 05/11): letras um pouco menores onde o bloco ficou apertado, como era antes */
@media (min-width:1201px){
  html body .varal__cab h2{font-size:clamp(1.9rem,1rem + 2vw,2.9rem)} /* "As queridinhas de quem já presenteou" em duas linhas */
}
/* seletor de ocasiões: o desenho de quando a página era mais larga (conteúdo de 1357 px: foto de 440, abas numa linha só, texto e cartão lado a lado), reduzido
   a 94% (zoom) para caber no teto de 1280 px, com as letras e os espaços menores na mesma proporção; em notebooks (até 1366 px) a 90% */
@media (min-width:1201px){#ocasioes .oc{zoom:.9}}
@media (min-width:1367px){#ocasioes .oc{zoom:.943}}
@media (min-width:1201px){#ocasioes .oc__pts{font-size:0.8125rem}#ocasioes .oc__pts li{text-wrap:pretty}} /* lista de itens menor, para a maioria caber em uma linha */