/* Carmim — base + cabeçalho + hero (elemento 4). Tokens em tokens.css. */
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fontes/playfair-display-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fontes/montserrat-latin-wght-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--color-secondary-cream); color: var(--color-neutral-dark); font: var(--font-weight-regular) var(--font-size-body)/var(--line-height-base) var(--font-family-sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
.container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-gutter)); margin-inline: auto; padding-inline: var(--container-gutter); }

/* pular para o conteúdo */
.pular { position: absolute; left: var(--space-sm); top: -80px; z-index: 50; display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-md); background: var(--color-neutral-light); color: var(--color-primary-red); font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-card); }
.pular:focus { top: var(--space-sm); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: 0 var(--space-lg); border: 2px solid transparent; border-radius: var(--radius-full); font: var(--font-weight-semibold) var(--font-size-small)/1 var(--font-family-sans); text-decoration: none; cursor: pointer; text-align: center; }
.btn--primary { background: var(--color-primary-red); color: var(--color-neutral-light); }
.btn--primary:hover { background: var(--color-state-hover-dark); }
.btn--primary:active { background: var(--color-state-active); }
/* sobre seção vermelha o botão principal é invertido (creme com texto vermelho: 9,50:1) */
.btn--inverso { background: var(--color-secondary-cream); color: var(--color-primary-red); }
.btn--inverso:hover { background: var(--color-secondary-rose); }
.btn--inverso:active { background: var(--color-state-hover-light); }
.btn--contorno { border-color: var(--color-secondary-cream); color: var(--color-secondary-cream); background: transparent; }
.btn--contorno:hover { background: rgb(255 248 240 / .14); }
.btn--contorno:active { background: rgb(255 248 240 / .24); }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background-color var(--transition-fast), color var(--transition-fast); } }

/* cabeçalho */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--color-neutral-light); box-shadow: 0 1px 0 var(--color-neutral-border); }
.site-header.is-scrolled { box-shadow: var(--shadow-subtle), 0 1px 0 var(--color-neutral-border); }
.navbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); max-width: calc(var(--container-max) + 2 * var(--container-gutter)); min-height: 76px; margin-inline: auto; padding-inline: var(--container-gutter); }
.logo { --logo-icone: 48px; --logo-texto: 34px; display: inline-flex; align-items: center; gap: 12px; min-height: var(--touch-min); color: var(--color-primary-red); text-decoration: none; }
.logo__icone { width: var(--logo-icone); height: var(--logo-icone); flex: none; }
.logo__texto { font: italic 500 var(--logo-texto)/1 var(--font-family-display); letter-spacing: -.01em; }
.navbar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-xs); order: 3; width: 100%; }
.navbar__nav a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-sm); color: var(--color-neutral-dark); font: var(--font-weight-medium) var(--font-size-small)/1.2 var(--font-family-sans); text-decoration: none; border-radius: var(--radius-sm); }
.navbar__nav a:not(.btn):hover { color: var(--color-primary-red); background: var(--color-state-hover-light); }
.navbar__nav a[aria-current="true"] { color: var(--color-primary-red); box-shadow: inset 0 -3px 0 var(--color-primary-red); border-radius: 0; }
.navbar__acoes { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; }
.navbar__encomendar-mobile { display: none; }
.proto-tag { display: none; padding: 6px 12px; background: var(--color-secondary-rose); color: var(--color-primary-red); border-radius: var(--radius-full); font: var(--font-weight-semibold) var(--font-size-caption)/1 var(--font-family-sans); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.navbar__encomendar { display: none; }
.menu-botao { display: none; width: var(--touch-min); height: var(--touch-min); padding: 0; align-items: center; justify-content: center; border: 2px solid var(--color-neutral-border-strong); border-radius: var(--radius-full); background: transparent; color: var(--color-primary-red); cursor: pointer; }
.menu-botao svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-botao[aria-expanded="true"] { background: var(--color-primary-red); border-color: var(--color-primary-red); color: var(--color-neutral-light); }

/* celular: com JS o menu vira painel sob a barra; sem JS a navegação fica em linha */
@media (max-width: 767.98px) {
  .js .menu-botao { display: inline-flex; }
  .js .navbar__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-xs) var(--container-gutter) var(--space-md); background: var(--color-neutral-light); box-shadow: var(--shadow-card); }
  .js .navbar__nav.is-open { display: flex; }
  .js .navbar__nav a:not(.btn) { padding: 0 var(--space-xs); }
  .js .navbar__nav.is-open .navbar__encomendar-mobile { display: inline-flex; margin-top: var(--space-xs); }
}
@media (min-width: 768px) {
  .logo { --logo-icone: 56px; --logo-texto: 40px; }
  .navbar { min-height: 88px; }
  .navbar__nav { order: 0; width: auto; flex: 1; justify-content: center; }
  .navbar__encomendar { display: inline-flex; }
}
@media (min-width: 900px) { .proto-tag { display: inline-block; } }

/* hero */
.hero { --corte: 28px; position: relative; overflow: hidden; background: var(--color-primary-red); color: var(--color-secondary-cream); padding-block: var(--space-xl) calc(var(--corte) + var(--space-xl)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), 0 100%); --hero-titulo: clamp(2.75rem, 11vw, 3.25rem); }
.hero__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.hero__texto { position: relative; z-index: 1; }
.hero__sobretitulo { margin: 0 0 var(--space-sm); font: var(--font-weight-semibold) var(--font-size-caption)/1.3 var(--font-family-sans); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-secondary-rose); }
.hero__titulo { margin: 0; font: italic 400 var(--hero-titulo)/var(--line-height-tight) var(--font-family-display); letter-spacing: var(--tracking-h1); color: var(--color-secondary-cream); text-wrap: balance; }
.hero__lead { max-width: 44ch; margin: var(--space-md) 0 0; font: var(--font-weight-regular) var(--font-size-subhead)/1.55 var(--font-family-sans); color: var(--color-secondary-cream); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__fatos { display: grid; gap: var(--space-xs); margin: var(--space-xl) 0 0; padding: 0; list-style: none; font-size: var(--font-size-small); color: var(--color-secondary-rose); }
.hero__fatos li { position: relative; padding-left: 22px; }
.hero__fatos li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary-cream); }

.hero__visual { position: relative; margin: 0; isolation: isolate; }
/* disco crimson atrás da moldura (decorativo) */
.hero__visual::before { content: ""; position: absolute; z-index: -1; width: 104%; aspect-ratio: 1; right: -30%; top: -12%; border-radius: 50%; background: var(--color-primary-crimson); }
.hero__moldura { padding: 12px; background: var(--color-neutral-light); border-radius: var(--radius-lg); box-shadow: 0 24px 48px rgb(74 0 0 / .45); }
.hero__moldura picture, .hero__moldura img { display: block; }
.hero__moldura img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); }
.hero__selo { position: absolute; right: -6px; bottom: 28px; width: 124px; height: 124px; z-index: 2; }
.hero__selo text { font: var(--font-weight-bold) 14.5px var(--font-family-sans); letter-spacing: 0; text-transform: uppercase; fill: var(--color-primary-red); }
.hero__selo-giro { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) { .hero__selo-giro { animation: selo-gira 26s linear infinite; } .hero__selo:hover .hero__selo-giro { animation-play-state: paused; } @keyframes selo-gira { to { transform: rotate(360deg); } } }

@media (min-width: 768px) {
  .hero { --corte: 48px; --hero-titulo: clamp(3rem, 6.6vw, 4.25rem); padding-block: var(--space-2xl) calc(var(--corte) + var(--space-2xl)); }
  .hero__moldura img { aspect-ratio: 4 / 3; }
  .hero__visual { max-width: 620px; }
  .hero__selo { width: 150px; height: 150px; right: -14px; bottom: 36px; }
}
@media (min-width: 900px) {
  .hero__visual::before { width: 112%; right: -22%; top: -26%; }
  .hero__visual { max-width: none; }
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-3xl); }
  .hero__moldura { rotate: -1.5deg; }
}
@media (min-width: 1024px) { .hero { --corte: 64px; } .hero__selo { width: 168px; height: 168px; right: -28px; bottom: 44px; } }

/* seções provisórias (nenhum botão aponta para âncora vazia) */
.provisoria { padding-block: var(--space-2xl); border-bottom: 1px solid var(--color-neutral-border); }
.provisoria h2 { margin: 0 0 var(--space-xs); font: var(--font-weight-semibold) var(--font-size-h2)/1.2 var(--font-family-sans); }
.provisoria p { margin: 0; color: var(--color-neutral-muted); }
.rodape { padding-block: var(--space-xl); font-size: var(--font-size-small); color: var(--color-neutral-muted); }

/* ===== Elemento 5 — vitrine de doces ===== */
.vitrine { padding-block: var(--section-space); }
.vitrine__cab { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.vitrine__sobretitulo { margin: 0; font: var(--font-weight-semibold) var(--font-size-caption)/1.3 var(--font-family-sans); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-primary-red); }
.vitrine__titulo { margin: 0; font: var(--font-weight-semibold) var(--font-size-h2)/1.2 var(--font-family-sans); }
.vitrine__aviso { margin: 0; font-size: var(--font-size-small); color: var(--color-neutral-muted); }
.vitrine__status { margin: 0; font-size: var(--font-size-small); color: var(--color-neutral-muted); }

/* filtros (só com JS) */
.filtros { display: none; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.js .filtros { display: flex; }
.filtro { min-height: var(--touch-min); padding: 0 var(--space-md); border: 2px solid var(--color-neutral-border-strong); border-radius: var(--radius-full); background: var(--color-neutral-light); color: var(--color-neutral-dark); font: var(--font-weight-semibold) var(--font-size-small)/1 var(--font-family-sans); cursor: pointer; }
.filtro:hover { background: var(--color-state-hover-light); border-color: var(--color-primary-red); color: var(--color-primary-red); }
.filtro[aria-pressed="true"] { background: var(--color-primary-red); border-color: var(--color-primary-red); color: var(--color-neutral-light); }
@media (prefers-reduced-motion: no-preference) { .filtro { transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } }

/* grade em mosaico: 1 → 2 → 3 colunas */
.grade { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; grid-auto-flow: dense; }
@media (min-width: 768px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(3, 1fr); } }
.card[hidden] { display: none; }

.card { display: flex; flex-direction: column; background: var(--color-neutral-light); border: 1px solid var(--color-neutral-border); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-subtle); min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .card { transition: box-shadow var(--transition-base); } }
.card:hover { box-shadow: var(--shadow-card); }
.card__foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }
.card__corpo { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; padding: var(--space-md) var(--space-xs) var(--space-xs); }
.tag { align-self: flex-start; margin: 0; padding: 6px 12px; background: var(--color-secondary-rose); color: var(--color-primary-red); border-radius: var(--radius-full); font: var(--font-weight-semibold) var(--font-size-caption)/1 var(--font-family-sans); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.card__nome { margin: var(--space-2xs) 0 0; font: italic 400 var(--font-size-h3)/var(--line-height-heading) var(--font-family-display); }
.card__desc { margin: 0; font-size: var(--font-size-small); line-height: 1.5; color: var(--color-neutral-muted); }
.card__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--color-neutral-border); }
.card__preco { display: flex; flex-direction: column; margin: 0; font: var(--font-weight-bold) 1.25rem/1.1 var(--font-family-sans); color: var(--color-primary-red); }
.card__preco data { font: inherit; }
.card__de { font: var(--font-weight-medium) var(--font-size-caption)/1.3 var(--font-family-sans); letter-spacing: .04em; color: var(--color-neutral-muted); }
.card__un { margin-top: 2px; font: var(--font-weight-medium) var(--font-size-caption)/1.3 var(--font-family-sans); color: var(--color-neutral-muted); }

/* variante B: fundo bordô, doce recortado sobre disco crimson */
.card--b, .card--c { background: var(--color-primary-red); border-color: var(--color-primary-red); color: var(--color-secondary-cream); }
.card--b .card__rodape, .card--c .card__rodape { border-top-color: rgb(255 248 240 / .28); }
.card--b .card__preco, .card--c .card__preco { color: var(--color-secondary-cream); }
.card--b .card__desc, .card--c .card__desc, .card--b .card__de, .card--c .card__de, .card--b .card__un, .card--c .card__un { color: var(--color-secondary-rose); }
.tag--clara { background: var(--color-secondary-cream); color: var(--color-primary-red); }
.card__foto--recorte { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background: var(--color-state-hover-dark); }
.card__foto--recorte::before { content: ""; position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%; background: var(--color-primary-crimson); }
.card__foto--recorte img { position: relative; width: 84%; aspect-ratio: auto; border-radius: 0; object-fit: contain; }

/* variante C: painel largo, moldura branca sobre bordô */
.card--c { padding: 0; overflow: hidden; }
.card--c .card__moldura { margin: 12px 12px 0; padding: 10px; background: var(--color-neutral-light); border-radius: var(--radius-md); }
.card--c .card__moldura img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.card--c .card__corpo { padding: var(--space-lg) var(--space-lg) var(--space-lg); }
@media (min-width: 768px) {
  .card--c { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  .card--c .card__moldura { margin: 12px; }
  .card--c .card__moldura img { aspect-ratio: 4 / 3; }
  .card--c .card__corpo { align-self: center; flex: none; }
  .card--c .card__rodape { margin-top: var(--space-md); }
}

/* ===== Elemento 6 — encomenda por data ===== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.encomenda { padding-block: var(--section-space); background: var(--color-secondary-rose); }
.encomenda__cab { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); max-width: 62ch; }
.encomenda .vitrine__aviso { color: var(--color-neutral-dark); }
.pedido { display: grid; gap: var(--space-lg); align-items: start; }
.pedido__passos { display: grid; gap: var(--space-md); min-width: 0; }
.pedido__erros { padding: var(--space-md) var(--space-lg); background: var(--color-neutral-light); border: 2px solid var(--color-state-error); border-radius: var(--radius-md); color: var(--color-state-error-text); }
.pedido__erros p { margin: 0 0 var(--space-xs); }
.pedido__erros ul { margin: 0; padding-left: 1.2em; }
.pedido__erros a { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--color-state-error-text); font-weight: var(--font-weight-semibold); }
.pedido__erros[hidden] { display: none; }

.passo { margin: 0; padding: var(--space-lg); min-width: 0; background: var(--color-neutral-light); border: 1px solid var(--color-neutral-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle); }
.passo__titulo { display: flex; align-items: center; gap: var(--space-sm); float: left; width: 100%; padding: 0; margin: 0 0 var(--space-md); font: var(--font-weight-semibold) var(--font-size-subhead)/1.3 var(--font-family-sans); color: var(--color-neutral-dark); }
.passo__titulo + * { clear: both; }
.passo__n { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-red); color: var(--color-neutral-light); font: italic 400 1.125rem/1 var(--font-family-display); }
.passo__dica { margin: 0 0 var(--space-md); font-size: var(--font-size-small); color: var(--color-neutral-muted); }

/* campos */
.campos { display: grid; gap: var(--space-md); margin-bottom: var(--space-md); }
.campo { display: grid; gap: var(--space-2xs); }
.campo + .campo { margin-top: var(--space-md); }
.campos .campo + .campo { margin-top: 0; }
.campo label { font: var(--font-weight-semibold) var(--font-size-small)/1.3 var(--font-family-sans); }
.campo__opc { font-weight: var(--font-weight-regular); color: var(--color-neutral-muted); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 1.5px solid var(--color-neutral-border-strong); border-radius: var(--radius-md); background: var(--color-neutral-light); color: var(--color-neutral-dark); font: var(--font-weight-regular) 1rem/1.4 var(--font-family-sans); }
.campo textarea { padding-block: var(--space-sm); resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--color-primary-crimson); }
.campo [aria-invalid="true"] { border-color: var(--color-state-error); border-width: 2px; }
.campo__dica { margin: 0; font-size: var(--font-size-small); color: var(--color-neutral-muted); }
.campo__erro { margin: 0; font: var(--font-weight-semibold) var(--font-size-small)/1.4 var(--font-family-sans); color: var(--color-state-error-text); }
.campo__erro[hidden] { display: none; }
.campo__erro::before { content: "Atenção: "; }

/* quantidade */
.qtd { display: inline-flex; align-items: stretch; width: max-content; }
.qtd input { width: 72px; text-align: center; border-radius: 0; border-inline: 0; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtd__btn { width: 48px; min-height: 48px; border: 1.5px solid var(--color-neutral-border-strong); background: var(--color-neutral-light); color: var(--color-primary-red); font: var(--font-weight-semibold) 1.5rem/1 var(--font-family-sans); cursor: pointer; }
.qtd__btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.qtd__btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.qtd__btn:hover:not(:disabled) { background: var(--color-state-hover-light); }
.qtd__btn:disabled { color: var(--color-neutral-muted); background: var(--color-secondary-cream); cursor: not-allowed; }

/* chips de dia e horário (rádios) */
.chips { display: grid; gap: var(--space-xs); }
.chips--dia { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.chips--janela { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chip__corpo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--touch-min); padding: var(--space-xs) var(--space-sm); border: 2px solid var(--color-neutral-border-strong); border-radius: var(--radius-md); background: var(--color-neutral-light); color: var(--color-neutral-dark); font: var(--font-weight-semibold) var(--font-size-small)/1.2 var(--font-family-sans); text-align: center; }
.chip__a { font-size: var(--font-size-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.chip__b { font: var(--font-weight-bold) 1.5rem/1.1 var(--font-family-sans); }
.chip__c { font-size: var(--font-size-caption); }
.chip:hover input:not(:disabled) + .chip__corpo { background: var(--color-state-hover-light); border-color: var(--color-primary-red); color: var(--color-primary-red); }
.chip input:checked + .chip__corpo { background: var(--color-primary-red); border-color: var(--color-primary-red); color: var(--color-neutral-light); }
.chip input:checked + .chip__corpo::after { content: "✓" / ""; position: absolute; top: 4px; right: 7px; font-size: .75rem; line-height: 1; }
.chip input:focus-visible + .chip__corpo { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-neutral-light); }
.chip input:focus-visible { outline: none; box-shadow: none; }
.chip--off .chip__corpo { border-style: dashed; border-color: var(--color-neutral-border-strong); background: var(--color-secondary-cream); color: var(--color-neutral-muted); text-decoration: line-through; }
.chip--off input { cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) { .chip__corpo, .campo input, .campo select, .campo textarea { transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } }

/* resumo (painel vermelho) */
.pedido__resumo { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-primary-red); color: var(--color-secondary-cream); box-shadow: var(--shadow-floating); }
.pedido__resumo-titulo { margin: 0 0 var(--space-md); font: italic 400 var(--font-size-h3)/var(--line-height-heading) var(--font-family-display); }
.resumo { display: grid; gap: var(--space-sm); margin: 0; }
.resumo div { display: grid; gap: 2px; padding-bottom: var(--space-sm); border-bottom: 1px solid rgb(255 248 240 / .28); }
.resumo dt { font: var(--font-weight-semibold) var(--font-size-caption)/1.3 var(--font-family-sans); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-secondary-rose); }
.resumo dd { margin: 0; font: var(--font-weight-semibold) var(--font-size-body)/1.35 var(--font-family-sans); overflow-wrap: anywhere; }
.resumo__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: var(--space-md) 0; font: var(--font-weight-bold) 1.375rem/1.2 var(--font-family-sans); }
.resumo__total-rotulo { font: var(--font-weight-semibold) var(--font-size-small)/1 var(--font-family-sans); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-secondary-rose); }
.pedido__enviar { width: 100%; }
.pedido__nota { margin: var(--space-sm) 0 0; font-size: var(--font-size-caption); line-height: 1.4; color: var(--color-secondary-rose); }
@media (min-width: 1024px) {
  .pedido { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-xl); }
  .pedido__resumo { position: sticky; top: 108px; }
  .pedido__erros { grid-column: 1 / -1; }
}

/* confirmação (dialog nativo) */
.conf { width: min(calc(100% - 32px), 480px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-neutral-light); color: var(--color-neutral-dark); box-shadow: var(--shadow-floating); overflow: auto; }
.conf::backdrop { background: rgb(74 0 0 / .62); }
.conf__corpo { padding: var(--space-xl) var(--space-lg) var(--space-lg); }
.conf__sobre { margin: 0 0 var(--space-xs); font: var(--font-weight-semibold) var(--font-size-caption)/1.3 var(--font-family-sans); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-primary-red); }
.conf__titulo { margin: 0; font: italic 400 var(--font-size-h3)/var(--line-height-heading) var(--font-family-display); }
.conf__titulo:focus-visible { outline: none; box-shadow: none; }
.conf__texto { margin: var(--space-sm) 0 0; font-size: var(--font-size-small); color: var(--color-neutral-muted); }
.conf__codigo { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); background: var(--color-secondary-rose); border-radius: var(--radius-md); font-size: var(--font-size-small); color: var(--color-primary-red); }
.conf__codigo strong { font-size: 1.125rem; letter-spacing: .06em; }
.resumo--claro div { border-bottom-color: var(--color-neutral-border); }
.resumo--claro dt { color: var(--color-neutral-muted); }
.conf__acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.btn--contorno-claro { border-color: var(--color-primary-red); color: var(--color-primary-red); background: transparent; }
.btn--contorno-claro:hover { background: var(--color-state-hover-light); }

/* ===== Elemento 7 — calda escorrendo da seção vermelha ===== */
/* Contêiner de altura zero colado na base do hero; o corte diagonal vai de (0, 100%) a (100%, 100% − corte),
   então cada gota nasce em y = −corte · x. Decorativo: aria-hidden, sem foco. */
.calda { --corte: 28px; position: relative; z-index: 2; height: 0; pointer-events: none; }
@media (min-width: 768px) { .calda { --corte: 48px; } }
@media (min-width: 1024px) { .calda { --corte: 64px; } }

.gota { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--corte) * var(--x) * -1 - 4px); width: var(--w); height: calc(var(--len) + 4px); margin-left: calc(var(--w) / -2); background: var(--color-primary-red); border-radius: 0 0 calc(var(--w) / 2) calc(var(--w) / 2); }
/* base alargada (menisco) e bulbo na ponta, como calda grossa */
.gota::before { content: ""; position: absolute; top: 0; left: 50%; width: calc(var(--w) + 14px); height: 12px; transform: translateX(-50%); background: var(--color-primary-red); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.gota::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--w) * -.35); width: calc(var(--w) * 1.35); aspect-ratio: 1; transform: translateX(-50%); background: var(--color-primary-red); border-radius: 50%; }
.gota--desktop { display: none; }
@media (min-width: 768px) { .gota--desktop { display: block; } }

.gota-caindo { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--corte) * var(--x) * -1 + var(--len) + 8px); width: 11px; height: 14px; margin-left: -5.5px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--color-primary-red); opacity: 0; }

/* movimento: uma vez, escalonado; com movimento reduzido (ou sem JS) as gotas ficam paradas no comprimento final */
@media (prefers-reduced-motion: no-preference) {
  .js .gota { animation: escorre 3.2s cubic-bezier(.45, .05, .25, 1) var(--atraso) both; }
  .js .gota::after { animation: bulbo 3.2s cubic-bezier(.45, .05, .25, 1) var(--atraso) both; }
  .js .gota-caindo { animation: cai 1.15s cubic-bezier(.55, 0, 1, .55) var(--atraso) both; }
}
@keyframes escorre { from { height: 4px; } 55% { height: calc(var(--len) * .72 + 4px); } to { height: calc(var(--len) + 4px); } }
@keyframes bulbo { from { transform: translateX(-50%) scale(.2); } 60% { transform: translateX(-50%) scale(.8); } to { transform: translateX(-50%) scale(1); } }
@keyframes cai { 0% { opacity: 0; transform: translateY(0) scale(.7); } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(58px) scale(.9, 1.35); } }

/* espaço para a calda sobre o início da vitrine */
.calda + .vitrine { padding-top: calc(var(--section-space) + var(--space-lg)); }

/* ===== Elemento 8 — microanimações e estados ===== */
/* estados que valem com ou sem movimento */
.navbar__nav a[aria-current="true"]:not(.btn) { color: var(--color-primary-red); }
.btn:active, .filtro:active, .qtd__btn:active:not(:disabled) { filter: brightness(.94); }
.chip:active input:not(:disabled) + .chip__corpo { background: var(--color-state-hover-light); border-color: var(--color-state-active); }
.chip input:checked:active + .chip__corpo { background: var(--color-state-active); border-color: var(--color-state-active); }
.filtro[aria-pressed="true"]:hover { background: var(--color-state-hover-dark); border-color: var(--color-state-hover-dark); color: var(--color-neutral-light); }
.card__foto, .card--b .card__foto--recorte { overflow: hidden; border-radius: var(--radius-md); }
.is-mudou { border-radius: var(--radius-sm); }
.conf__icone { display: block; width: 48px; height: 48px; margin-bottom: var(--space-sm); fill: none; stroke: var(--color-primary-red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* movimento: tudo aqui some com "reduzir movimento" */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sobe { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
  @keyframes assenta { from { scale: 1.07; } to { scale: 1; } }
  @keyframes carimbo { from { opacity: 0; scale: .55; rotate: -35deg; } 70% { opacity: 1; scale: 1.06; } to { opacity: 1; scale: 1; rotate: 0deg; } }

  /* entrada do hero (CSS puro: não depende de JavaScript) */
  .hero__sobretitulo { animation: sobe .7s cubic-bezier(.2, .8, .2, 1) .1s both; }
  .hero__titulo { animation: sobe .9s cubic-bezier(.2, .8, .2, 1) .2s both; }
  .hero__lead { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) .4s both; }
  .hero__acoes { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) .55s both; }
  .hero__fatos { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) .7s both; }
  .hero__moldura { animation: sobe 1s cubic-bezier(.2, .8, .2, 1) .3s both; }
  .hero__moldura picture { display: block; overflow: hidden; border-radius: var(--radius-md); }
  .hero__moldura img { animation: assenta 2s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .hero__selo { animation: carimbo .9s cubic-bezier(.2, .8, .2, 1) 1.1s both; }

  /* revelação ao rolar (o JS liga "reveal-ok"; sem ele nada fica escondido). Transição só no estado visível. */
  .reveal-ok .reveal { opacity: 0; translate: 0 22px; }
  .reveal-ok .reveal.is-visible { opacity: 1; translate: none; transition: opacity .7s ease calc(var(--i, 0) * 90ms), translate .7s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms), box-shadow var(--transition-base); }

  /* cartões: foto aproxima no hover; botões "afundam" 1 px ao clicar */
  .card__foto img { transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
  .card:hover .card__foto img { scale: 1.05; }
  .btn:active, .filtro:active { translate: 0 1px; }
  .logo__icone { transition: rotate var(--transition-base); }
  .logo:hover .logo__icone { rotate: -12deg; }

  /* cartões que reaparecem ao filtrar */
  @keyframes entra-card { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  .card.is-entra { animation: entra-card .4s cubic-bezier(.2, .8, .2, 1) both; }

  /* formulário: ✓ dos chips, destaque no resumo, painel de erros, mensagens de campo */
  @keyframes pop-check { from { scale: .3; opacity: 0; } to { scale: 1; opacity: 1; } }
  .chip input:checked + .chip__corpo::after { animation: pop-check 180ms cubic-bezier(.2, .8, .2, 1); }
  @keyframes destaque { from { background: rgb(255 248 240 / .28); } to { background: transparent; } }
  .is-mudou { animation: destaque .8s ease-out; }
  @keyframes desce { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
  .pedido__erros:not([hidden]), .campo__erro:not([hidden]) { animation: desce .22s ease-out; }

  /* confirmação */
  @keyframes janela-entra { from { opacity: 0; translate: 0 14px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }
  .conf[open] { animation: janela-entra .28s cubic-bezier(.2, .8, .2, 1); }
  .conf[open]::backdrop { animation: fundo-entra .22s ease; }
  .conf__icone circle, .conf__icone path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: traco .7s ease .15s forwards; }
  @keyframes traco { to { stroke-dashoffset: 0; } }
}

/* ===== Elemento 9 — contato, rodapé e refino do celular ===== */
.contato { --corte: 28px; position: relative; padding-block: calc(var(--section-space) + var(--corte)) var(--section-space); background: var(--color-primary-red); color: var(--color-secondary-cream); clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%); scroll-margin-top: 80px; }
@media (min-width: 768px) { .contato { --corte: 40px; } }
@media (min-width: 1024px) { .contato { --corte: 56px; } }
.contato__cab { display: grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.contato__sobretitulo { margin: 0; font: var(--font-weight-semibold) var(--font-size-caption)/1.3 var(--font-family-sans); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-secondary-rose); }
.contato__titulo { margin: 0; font: italic 400 var(--font-size-h1)/var(--line-height-tight) var(--font-family-display); letter-spacing: var(--tracking-h1); color: var(--color-secondary-cream); text-wrap: balance; }
.contato__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 900px) { .contato__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); } }
.contato__bloco { display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid rgb(255 248 240 / .32); }
.contato__bloco h3 { margin: 0; font: var(--font-weight-semibold) var(--font-size-subhead)/1.3 var(--font-family-sans); }
.contato__bloco p, .contato__bloco address { margin: 0; font-style: normal; }
.contato__nota { font-size: var(--font-size-small); color: var(--color-secondary-rose); }
.contato__horarios { display: grid; gap: var(--space-xs); margin: 0; }
.contato__horarios > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 1px solid rgb(255 248 240 / .2); }
.contato__horarios dt { color: var(--color-secondary-rose); }
.contato__horarios dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.contato__rotulo { display: block; font-size: var(--font-size-small); color: var(--color-secondary-rose); }
.contato__fone { font: var(--font-weight-bold) 1.375rem/1.3 var(--font-family-sans); font-variant-numeric: tabular-nums; }
.contato .btn { justify-self: start; margin-top: var(--space-xs); }

.rodape { padding-block: var(--space-xl); background: var(--color-state-active); color: var(--color-secondary-cream); font-size: var(--font-size-small); }
.rodape__inner { display: grid; gap: var(--space-md); align-items: center; }
@media (min-width: 900px) { .rodape__inner { grid-template-columns: auto 1fr auto; gap: var(--space-xl); } }
.rodape__logo { display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-min); color: var(--color-secondary-cream); text-decoration: none; }
.rodape__logo img { width: 40px; height: 40px; }
.rodape__logo span { font: italic 500 1.75rem/1 var(--font-family-display); }
.rodape__aviso { margin: 0; color: var(--color-secondary-rose); }
.rodape__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); }
.rodape__nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-sm); color: var(--color-secondary-cream); text-decoration: underline; text-underline-offset: 4px; border-radius: var(--radius-sm); }
.rodape__nav a:hover { background: rgb(255 248 240 / .14); }
@media (prefers-reduced-motion: no-preference) { .rodape__nav a { transition: background-color var(--transition-fast); } }
.contato { margin-top: calc(var(--corte) * -1); }

/* celular deitado (pouca altura): cabeçalho mais baixo e resumo sem "grudar" */
@media (max-height: 480px) and (min-width: 768px) {
  html { scroll-padding-top: 84px; }
  .navbar { min-height: 64px; }
  .logo { --logo-icone: 44px; --logo-texto: 32px; }
  .pedido__resumo { position: static; }
}

/* ===== Orçamento sob medida: tamanhos, extras e data ===== */
.campo--grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo__legenda { padding: 0; margin-bottom: var(--space-xs); font: var(--font-weight-semibold) var(--font-size-small)/1.3 var(--font-family-sans); }
.chip__t { font: var(--font-weight-semibold) var(--font-size-small)/1.25 var(--font-family-sans); text-align: center; }
.chip__p { font-size: var(--font-size-caption); }
.campo input[type="date"] { font-family: inherit; }
.campo select:disabled { color: var(--color-neutral-muted); background-color: var(--color-secondary-cream); cursor: not-allowed; }