/* Trismera — vitrine */
@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --bordo: #5C1A2B;
  --vinho: #3A0F1B;
  --dourado: #B8893A;
  --dourado-texto: #8A6420;   /* dourado legível sobre fundo claro */
  --dourado-claro: #E3C27E;   /* dourado legível sobre fundo escuro */
  --offwhite: #F7EFE8;
  --rose: #F0DDD6;
  --creme-foto: #F8EEE6;      /* fundo das fotos provisórias */
  --chocolate: #3B2420;
  --tinta: #2E1A17;
  --tinta-suave: #6B5049;
  --linha-fina: rgba(92, 26, 43, .16);

  --fonte-titulo: 'Cinzel', 'Times New Roman', serif;
  --fonte-texto: 'Jost', system-ui, sans-serif;
  --largura: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(92, 26, 43, .12); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--offwhite);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 500; color: var(--bordo); line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; border-radius: 4px; }

.pular { position: absolute; left: -9999px; top: 8px; background: var(--bordo); color: #fff; padding: 10px 16px; border-radius: 6px; z-index: 10; }
.pular:focus { left: 16px; }

/* ----- Botões ----- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px; border: 1.5px solid var(--bordo);
  background: var(--bordo); color: #fff;
  font: 500 1rem/1.2 var(--fonte-texto); text-decoration: none; letter-spacing: .01em;
  transition: background-color .2s, color .2s, border-color .2s;
  touch-action: manipulation;
}
.botao:hover { background: var(--vinho); border-color: var(--vinho); }
.botao--contorno { background: transparent; color: var(--bordo); }
.botao--contorno:hover { background: var(--bordo); color: #fff; }
.botao--dourado { background: var(--dourado-claro); border-color: var(--dourado-claro); color: var(--vinho); }
.botao--dourado:hover { background: #fff; border-color: #fff; }
.botao--pequeno { min-height: 40px; padding: 8px 18px; font-size: .9375rem; }

/* ----- Topo ----- */
.topo { position: sticky; top: 0; z-index: 5; background: rgba(247, 239, 232, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha-fina); }
.topo__dentro { max-width: var(--largura); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 24px; }
.topo__logo img { width: 177px; height: auto; }
.topo__menu { display: flex; gap: 24px; margin-left: auto; }
.topo__menu a { text-decoration: none; font-size: .9375rem; color: var(--tinta-suave); padding: 6px 0; border-bottom: 1.5px solid transparent; }
.topo__menu a:hover { color: var(--bordo); border-bottom-color: var(--dourado); }
@media (max-width: 860px) {
  .topo__menu { display: none; }
  .topo .botao { margin-left: auto; }
}

/* ----- Abertura ----- */
.abertura {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(48px, 7vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.abertura h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); letter-spacing: .01em; }
.abertura__resumo { margin-top: 20px; font-size: 1.1875rem; color: var(--tinta-suave); max-width: 34em; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fatos { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--linha-fina); }
.fatos dt { font-size: .875rem; color: var(--tinta-suave); }
.fatos dd { margin: 2px 0 0; font-family: var(--fonte-titulo); font-size: 1.375rem; color: var(--bordo); }

/* A bandeja: moldura bordô com 12 divisórias, como a embalagem real */
.bandeja { margin: 0; }
.bandeja__fundo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: clamp(10px, 1.6vw, 18px);
  background: var(--bordo);
  border-radius: 10px;
  box-shadow: 0 1px 0 var(--dourado) inset, 0 30px 60px -30px rgba(58, 15, 27, .55);
  transform: perspective(1400px) rotateX(8deg);
  transform-origin: 50% 100%;
}
.bandeja__fundo img { width: 100%; height: auto; aspect-ratio: 256 / 236; object-fit: cover; background: var(--creme-foto); border-radius: 3px; }
.bandeja figcaption { margin-top: 16px; font-size: .875rem; color: var(--tinta-suave); text-align: center; }
@media (max-width: 860px) {
  .abertura { grid-template-columns: 1fr; }
  .abertura { padding-top: 32px; }
  .bandeja__fundo { transform: none; }
}

/* ----- Seções genéricas ----- */
.secao { max-width: var(--largura); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter); }
.secao--estreita { max-width: 820px; }
.secao__cabeca { max-width: 640px; margin-bottom: clamp(32px, 4vw, 48px); }
.secao__cabeca h2 { font-size: clamp(1.75rem, 3.6vw, 2.625rem); }
.secao__cabeca p { margin-top: 14px; color: var(--tinta-suave); }

/* ----- Linhas: cada uma num tom, do claro ao escuro ----- */
.linhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.linha { border-radius: 14px; padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.linha--essencial { background: #FFFBF8; border: 1px solid var(--linha-fina); }
.linha--premium { background: var(--rose); }
.linha--signature { background: var(--vinho); color: #F3E6DF; }
.linha--signature h3, .linha--signature h4 { color: #fff; }
.linha__prefixo { display: block; font-family: var(--fonte-texto); font-size: .9375rem; letter-spacing: .02em; color: var(--dourado-texto); margin-bottom: 4px; }
.linha--signature .linha__prefixo { color: var(--dourado-claro); }
.linha h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.linha__frase { margin-top: 8px; color: var(--tinta-suave); }
.linha--signature .linha__frase, .linha--signature .linha__ideal { color: #D9C3BA; }
.linha__regra { font-weight: 500; padding: 10px 14px; border-left: 3px solid var(--dourado); background: rgba(184, 137, 58, .1); border-radius: 0 6px 6px 0; font-size: .9375rem; }
.linha__sabores { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.linha__sabores li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.linha__sabores img { width: 64px; height: 59px; object-fit: cover; border-radius: 8px; background: var(--creme-foto); }
.linha__sabores h4 { font-family: var(--fonte-texto); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.linha__sabores p { font-size: .875rem; line-height: 1.45; color: var(--tinta-suave); }
.linha--signature .linha__sabores p { color: #CDB4AA; }
.linha__ideal { font-size: .9375rem; color: var(--tinta-suave); padding-top: 16px; border-top: 1px solid var(--linha-fina); }
.linha--signature .linha__ideal { border-top-color: rgba(227, 194, 126, .25); }
.linha__preco { font-family: var(--fonte-titulo); font-size: 1.125rem; color: var(--bordo); }
.linha--signature .linha__preco { color: var(--dourado-claro); }
@media (max-width: 980px) { .linhas { grid-template-columns: 1fr; max-width: 620px; } }

/* ----- Linha Básica ----- */
.basica { background: var(--bordo); color: #F3E6DF; }
.basica__dentro { max-width: var(--largura); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.basica h2 { color: #fff; font-size: clamp(1.75rem, 3.2vw, 2.375rem); }
.basica__texto p { margin-top: 14px; color: #E2CFC8; }
.basica__preco { font-family: var(--fonte-titulo); color: var(--dourado-claro) !important; }
.basica__sabores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 10px; }
.basica__sabores li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: .8125rem; line-height: 1.3; }
.basica__sabores img { width: 72px; height: 66px; object-fit: cover; border-radius: 50%; background: var(--creme-foto); border: 2px solid rgba(227, 194, 126, .5); }
@media (max-width: 860px) { .basica__dentro { grid-template-columns: 1fr; } .basica__sabores { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }

/* ----- Passos (sequência real: 1 a 4) ----- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: passo; }
.passos li { counter-increment: passo; padding-top: 20px; border-top: 2px solid var(--bordo); }
.passos li::before { content: counter(passo); display: block; font-family: var(--fonte-titulo); font-size: 2.5rem; line-height: 1; color: var(--dourado-texto); margin-bottom: 14px; }
.passos h3 { font-size: 1.25rem; margin-bottom: 10px; }
.passos p { color: var(--tinta-suave); font-size: .9875rem; }
@media (max-width: 900px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .passos { grid-template-columns: 1fr; } }

/* ----- Degustação + entrega ----- */
.dupla { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 104px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; scroll-margin-top: 80px; }
.dupla__item { background: #FFFBF8; border: 1px solid var(--linha-fina); border-radius: 14px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.dupla__item--degustacao { background: var(--rose); border-color: transparent; }
.dupla__item h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.dupla__item p { color: var(--tinta-suave); }
.lista-simples { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.lista-simples li::marker { color: var(--dourado); }
@media (max-width: 760px) { .dupla { grid-template-columns: 1fr; } }

/* ----- Dúvidas ----- */
.duvidas { border-top: 1px solid var(--linha-fina); }
.duvidas details { border-bottom: 1px solid var(--linha-fina); }
.duvidas summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 500; font-size: 1.0625rem; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--dourado-texto); transition: transform .2s; }
.duvidas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.duvidas details p { padding: 0 0 22px; color: var(--tinta-suave); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .duvidas summary::after { transition: none; } }

/* ----- Convite final ----- */
section[id] { scroll-margin-top: 72px; }
.convite { background: var(--vinho); color: #E9D7CF; text-align: center; padding: clamp(64px, 9vw, 112px) var(--gutter); }
.convite h2 { color: #fff; font-size: clamp(1.875rem, 4vw, 2.875rem); max-width: 18em; margin: 0 auto; }
.convite p { max-width: 36em; margin: 18px auto 32px; }
.convite__aviso { font-size: .875rem; color: var(--dourado-claro); margin: 18px auto 0 !important; }

/* ----- Rodapé ----- */
.rodape { background: var(--chocolate); color: #CDB8AF; text-align: center; padding: 48px var(--gutter); display: grid; justify-items: center; gap: 12px; font-size: .9375rem; }
.rodape img { width: 217px; height: auto; margin-bottom: 8px; }
.rodape__pequeno { font-size: .8125rem; opacity: .75; }

/* Logo menor no celular, para o botão do topo caber numa linha */
@media (max-width: 520px) { .topo__logo img { width: 138px; } }