/* Página Cestas românticas: 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, Românticas 5/2/2): uma cena por cesta, pouco texto, muito espaço, lida devagar.
   Branco com fios de ouro e uma única faixa chocolate (a cena da foto larga). Título pequeno em serifa itálica.
   Movimento: só um fade curto (400 ms) na entrada de cada cena, sem paralaxe e sem efeito de mouse.
   O cartão de pedido fixo, o FAQ e o guia com caminhos vêm dos componentes, iguais aos das outras páginas. */

:root{--calmo:400ms}
.p-4-3{--prop:4/3}

/* ---------- topo: título pequeno à esquerda, muito espaço vazio e a foto de destaque da categoria à direita ---------- */
.topo--calmo{min-height:var(--sec-h);display:grid;align-content:center}
.topo--calmo>.container{width:100%}
.topo--calmo .topo__grade{display:grid;gap:var(--s7);align-items:end;padding-block:var(--s6) var(--s7)}
@media(min-width:900px){.topo--calmo .topo__grade{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,120px);align-items:center}}
.topo.topo--calmo h1{font:italic 500 clamp(2rem,1.1rem + 3vw,4rem)/1.1 var(--serif);letter-spacing:-.01em}
/* o título quebra onde a frase pede (nunca com "em" ou "e" sozinho no fim da linha) */
.quebra{display:block}
.fio{display:block;width:72px;height:1px;margin:var(--s5) 0;background:var(--ouro);transform-origin:left}
.topo--calmo .topo__lead{margin-top:0;max-width:30em}
/* foto de destaque da categoria: 4:5, a mesma proporção das fotos das cestas em todo o site. Cabe folgada na primeira tela (sobra cerca de 120 px em cima e embaixo) */
.topo__retrato{--prop:4/5;width:min(100%,420px);margin-left:auto}
@media(min-width:900px){.topo__retrato{width:min(100%,560px,calc((var(--sec-h) - 240px) * .8))}}
/* celular: o botão de WhatsApp do topo repete o da barra fixa, então sai */
@media(max-width:1099px){.topo--calmo .topo__acoes .btn--sec{display:none}}
@media(prefers-reduced-motion:no-preference){
  .topo__retrato{animation:calmo-fade var(--calmo) ease-out 120ms backwards}
  .fio{animation:calmo-fio 900ms var(--mv-ease) 200ms backwards}
  @keyframes calmo-fade{from{opacity:0}}
  @keyframes calmo-fio{from{transform:scaleX(0)}}
}

/* ---------- cenas: uma por cesta, com muito espaço em volta ---------- */
.cenas{display:block}
.cena{display:grid;gap:var(--s6);align-content:center;align-items:center;padding-block:clamp(40px,7svh,88px);border-top:1px solid var(--ouro);scroll-margin-top:calc(var(--cab-h) + var(--s4))}
.cena__fotos{display:grid;justify-items:start}
.cena__fotos .slot{width:100%}
.cena__texto{display:grid;gap:var(--s4);align-content:center;max-width:36rem}
.cena .capitulo__nome{font:500 clamp(1.875rem,1.1rem + 2.6vw,3.5rem)/1.05 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.cena[data-escolhida="true"]{outline:0}
.cena[data-escolhida="true"] .cena__fotos .slot{outline:2px solid var(--ink);outline-offset:4px}

/* fotos das cenas 1 e 2: o mesmo padrão das páginas Café da manhã e Aniversário (proporção 4:5, no máximo a altura de uma tela menos 112 px)
   e as mesmas proporções de coluna, então têm o mesmo tamanho nas três páginas */
.cena--retrato .slot,.cena--deslocada .slot{--prop:4/5;width:100%;max-width:min(100%,calc((var(--sec-h) - 112px) * .8))}

/* cena 1: foto à esquerda, texto à direita */
@media(min-width:760px){
  .cena--retrato{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,72px)}
}

/* cena 2: texto no topo, à esquerda, e a foto deslocada para baixo, à direita */
@media(min-width:760px){
  .cena--deslocada{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,72px);align-items:start}
  .cena--deslocada .cena__fotos{order:2;justify-items:end;margin-top:clamp(40px,10svh,120px)}
}

/* cena 3: a única faixa chocolate da página, com a foto larga e o texto encostado no canto de baixo */
.cena--larga{margin-block:clamp(24px,6svh,72px);padding:clamp(20px,3.4vw,56px);border-top:0;background:radial-gradient(70% 90% at 12% 0%,rgba(196,156,111,.16),transparent 65%),var(--choc);color:#e8dccf;border-radius:clamp(18px,2.4vw,32px);box-shadow:inset 0 0 0 1px rgba(196,156,111,.26)}
.cena--larga .slot{--prop:4/3;width:100%;max-width:none}
/* desktop: a foto larga em cima (2:1) e o texto embaixo em duas colunas, o nome e o preço no canto de baixo à esquerda */
@media(min-width:900px){
  .cena--larga{min-height:calc(var(--sec-h) - clamp(48px,12svh,144px));gap:clamp(24px,3vw,40px);align-content:center}
  .cena--larga .slot{--prop:2/1}
  .cena--larga .cena__texto{max-width:none;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(24px,4vw,64px);align-items:start}
  .cena--larga .capitulo__nome{grid-column:1;grid-row:1}
  .cena--larga .capitulo__intro{grid-column:2;grid-row:1}
  .cena--larga .capitulo__muda{grid-column:2;grid-row:2}
  .cena--larga .detalhes{grid-column:2;grid-row:3}
  .cena--larga .capitulo__fim{grid-column:1;grid-row:3;align-self:end;margin-top:0}
}
.cena--larga .capitulo__nome,.cena--larga .capitulo__preco,.cena--larga .capitulo__muda b{color:#fff}
.cena--larga .capitulo__intro{color:#e8dccf}
.cena--larga .capitulo__muda,.cena--larga .capitulo__nota{color:#b8a898}
.cena--larga .mais{color:#fff;border-color:rgba(255,255,255,.22)}
.cena--larga .mais__icone{border-color:#fff;color:#fff}
.cena--larga .detalhes .cardapio li{border-color:rgba(255,255,255,.16);color:#e8dccf}
.cena--larga .btn--sec{color:#fff;border-color:#fff}
.cena--larga .btn--sec[aria-pressed="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--choc)}
.cena--larga :focus-visible{outline-color:#fff}
.cena--larga[data-escolhida="true"] .cena__fotos .slot{outline-color:var(--ouro)}
@media(hover:hover){
  .cena--larga .btn--sec:hover{background:#fff;color:var(--choc)}
  .cena--larga .mais:hover .mais__icone{background:#fff;color:var(--choc)}
}

/* ---------- para deixar mais romântico: vinho, espumante e flores em qualquer cesta ---------- */
.mais-romance{display:grid;gap:var(--s6);align-content:center;padding-block:clamp(40px,8svh,96px);border-top:1px solid var(--ouro)}
@media(min-width:900px){.mais-romance{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,112px);align-items:center}}
.mais-romance__texto{display:grid;gap:var(--s4);justify-items:start}
.mais-romance__lista .rotulo{max-width:none;margin:0 0 var(--s3);font:600 12px/1.3 var(--sans);letter-spacing:.08em}
.adicionais{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.adicionais li{padding:var(--s4) 0;border-bottom:1px solid var(--linha);font:italic 500 clamp(1.75rem,1.1rem + 2vw,2.75rem)/1.1 var(--serif);letter-spacing:-.01em}
.mais-romance h2{max-width:20ch;font:italic 500 clamp(1.75rem,1.1rem + 2.4vw,3.25rem)/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.mais-romance p{margin:0;max-width:52ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6}
.mais-romance .capitulo__nota{font-size:14px}
.mais-romance .btn{margin-top:var(--s3)}

/* ---------- guia: o mesmo componente das outras páginas, com o texto do lado direito e os caminhos à esquerda ---------- */
@media(min-width:900px){.guia--calmo .guia__texto{order:2}}
/* fios de ouro na largura do conteúdo, iguais aos das cenas (o guia trazia um fio cinza de ponta a ponta) */
.guia--calmo{position:relative;border-top:0}
.faq{position:relative}
.guia--calmo::before,.faq::before{content:"";position:absolute;top:0;left:50%;width:min(calc(100% - 2 * var(--gutter)),var(--largura));height:1px;transform:translateX(-50%);background:var(--ouro)}
/* regra dos títulos: itálico nos títulos editoriais da página, reto só nos nomes das cestas */
.faq h2{font-style:italic}
.guia--calmo h2{font:italic 500 clamp(1.875rem,1.1rem + 2.6vw,3.5rem)/1.08 var(--serif);letter-spacing:-.01em}

/* ---------- chamada final: o componente .chamada-calma vem de componentes.css; aqui só o título em itálico, como os outros títulos da página ---------- */
.chamada-calma h2{font-style:italic}

/* ---------- movimento: um fade curto na entrada de cada cena (o script marca os alvos com data-mv="fade") ---------- */
@media(prefers-reduced-motion:no-preference){
  html.js [data-mv="fade"]{opacity:0;transition:opacity var(--calmo) ease-out calc(var(--i,0) * 90ms)}
}