/* Diva Cosméticos e Presentes — Direção "Boutique Rosé" (planejamento/02-direcao-criativa.md) */

/* Fontes servidas pelo próprio site (antes vinham do Google Fonts e atrasavam a primeira tela no celular).
   Só os caracteres latinos, que cobrem o português. EB Garamond e Manrope: licença SIL Open Font License. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fontes/eb-garamond-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fontes/eb-garamond-500-italico.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fontes/manrope.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --creme: #FFF8F1;
  --branco: #FFFFFF;
  --rose: #F5E6E1;
  --borda: #EBD9D3;
  --vinho: #6D183A;
  --vinho-escuro: #4A1027;
  --cobre: #9A5435;
  --ameixa: #2E2026;
  --malva: #6E5A62;
  --whats: #1F7A4D;
  --whats-escuro: #17603C;

  --oc-aniversario: #FFD9DF;
  --oc-namorados: #6D183A;
  --oc-maes: #F6E2C8;
  --oc-pais: #2F3B4A;
  --oc-natal: #1F5E4A;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", Arial, Helvetica, sans-serif;

  --r-card: 18px;
  --r-campo: 12px;
  --sombra: 0 12px 32px rgba(74, 16, 39, .10);
  --chegada: cubic-bezier(.16, 1, .3, 1);
  --saida: cubic-bezier(.7, 0, .84, 0);
  --largura: 1200px;
  --gutter: 16px;
  --secao: 56px;
}
@media (min-width: 768px) { :root { --gutter: 24px; --secao: 80px; } }
@media (min-width: 1100px) { :root { --secao: 96px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--ameixa);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--vinho); text-underline-offset: 3px; }
a:hover { color: var(--vinho-escuro); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--ameixa); text-wrap: balance; font-variant-numeric: lining-nums; }
p, li, dd, figcaption { text-wrap: pretty; }
h1 { font-size: clamp(2.25rem, 5.6vw, 3.75rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); }
h3 { font-size: 1.4rem; line-height: 1.15; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--vinho); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--vinho); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--vinho); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.pular:focus { top: 8px; color: #fff; }

.container { width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.secao { padding: var(--secao) 0; }
.secao--rose { background: var(--rose); }
.secao--branca { background: var(--branco); }
.sobretitulo {
  display: block;
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cobre); margin-bottom: 12px;
}
.cabeca-secao { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 32px; }
.cabeca-secao h2 { margin: 0; }
.cabeca-secao p { margin: 12px 0 0; color: var(--malva); max-width: 60ch; }
.cabeca-secao--centro { flex-direction: column; align-items: center; text-align: center; }
.texto-suave { color: var(--malva); }
.icone { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Botões e links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  border-radius: 999px; border: 2px solid transparent;
  font: 700 .9375rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn--vinho { background: var(--vinho); color: #fff; }
.btn--vinho:hover { background: var(--vinho-escuro); color: #fff; }
.btn--claro { background: #fff; color: var(--vinho); }
.btn--claro:hover { background: var(--creme); color: var(--vinho-escuro); }
.btn--contorno { border-color: var(--vinho); color: var(--vinho); background: transparent; }
.btn--contorno:hover { background: var(--vinho); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn .icone { width: 20px; height: 20px; }
.link-seta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; color: var(--vinho); }
.link-seta:hover { text-decoration: underline; }
.link-seta .icone { width: 18px; height: 18px; transition: transform .2s; }
.link-seta:hover .icone { transform: translateX(3px); }

/* ---------- Faixa de aviso ---------- */
.aviso { background: var(--vinho-escuro); color: #fff; font-size: .8125rem; text-align: center; padding: 8px var(--gutter); }
.aviso span + span::before { content: "·"; margin: 0 10px; opacity: .7; }
@media (max-width: 520px) { .aviso span + span { display: block; } .aviso span + span::before { content: none; } }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--branco); border-bottom: 1px solid var(--borda); }
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.topo__logo { display: block; flex: none; }
.topo__logo img { width: 116px; height: auto; }
.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__link, .nav__botao {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 12px; border-radius: 8px; border: 0; background: none;
  font: 600 .9375rem/1 var(--sans); color: var(--ameixa); text-decoration: none; cursor: pointer;
}
.nav__link:hover, .nav__botao:hover, .nav__link[aria-current="page"] { color: var(--vinho); background: var(--creme); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--vinho); border-radius: 8px 8px 0 0; }
.nav__botao .icone { width: 16px; height: 16px; transition: transform .2s; }
.nav__botao[aria-expanded="true"] .icone { transform: rotate(180deg); }
.nav__item { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra);
  padding: 8px; list-style: none; display: none;
}
.submenu.aberto { display: block; }
.submenu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ameixa); font-weight: 600; font-size: .9375rem; }
.submenu a:hover, .submenu a[aria-current="page"] { background: var(--rose); color: var(--vinho); }
.topo__acoes { display: flex; align-items: center; gap: 8px; }
.topo__whats { display: none; }
.botao-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; height: 48px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--borda); background: #fff; color: var(--ameixa); cursor: pointer;
  font: 700 .875rem var(--sans);
}
.botao-menu .icone { width: 22px; height: 22px; }
.topo__whats-mobile { display: inline-flex; width: 48px; height: 48px; padding: 0; min-height: 0; }
@media (min-width: 1100px) {
  .nav { display: block; }
  .botao-menu, .topo__whats-mobile { display: none; }
  .topo__whats { display: inline-flex; min-height: 44px; padding: 10px 20px; }
  .topo__logo img { width: 128px; }
}

/* Menu celular */
.menu-movel {
  position: fixed; inset: 0; z-index: 60; background: var(--creme);
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); visibility: hidden; transition: transform .24s var(--saida), visibility .24s;
}
.menu-movel.aberto { transform: none; visibility: visible; transition: transform .38s var(--chegada), visibility .38s; }
.menu-movel__topo { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter); border-bottom: 1px solid var(--borda); background: #fff; }
.menu-movel__topo img { width: 104px; }
.menu-movel nav { padding: 16px var(--gutter) 24px; flex: 1; }
.menu-movel ul { list-style: none; }
.menu-movel nav a { display: block; padding: 12px 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--ameixa); text-decoration: none; border-bottom: 1px solid var(--borda); }
.menu-movel nav a[aria-current="page"] { color: var(--vinho); }
.menu-movel .grupo { margin-top: 20px; }
.menu-movel .grupo-titulo { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cobre); margin-bottom: 4px; }
.menu-movel .grupo a { font-family: var(--sans); font-weight: 400; font-size: 1.0625rem; padding: 10px 0; }
.menu-movel__rodape { padding: 16px var(--gutter) 24px; background: #fff; border-top: 1px solid var(--borda); }
.menu-movel__rodape .btn { width: 100%; }
body.menu-aberto { overflow: hidden; }

/* ---------- Trilha ---------- */
.trilha { font-size: .875rem; color: var(--malva); padding-top: 20px; }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; }
.trilha li + li::before { content: "›"; margin-right: 4px; }
.trilha a { color: var(--malva); }
.trilha a:hover { color: var(--vinho); }

/* ---------- Faixa principal (início) ---------- */
/* Vitrine: foto real de estúdio em moldura de tamanho contido, com uma curva grande num canto (a "porta" da vitrine).
   Celular: foto baixa depois do texto, dentro das margens, curva embaixo à esquerda. Desktop: foto na coluna direita (até 440px), curva em cima à esquerda. */
.hero { position: relative; overflow: hidden; isolation: isolate; --raio: clamp(80px, 22vw, 120px); }
.hero__grade { display: grid; gap: 24px; padding-top: 20px; padding-bottom: 48px; align-items: center; }
/* Título institucional: segmento (escuro) + cidade (vinho), sem itálico. */
.hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.01em; margin-bottom: 20px; }
.hero__promessa { display: block; color: var(--vinho); }
.hero__texto { font-size: 1.125rem; max-width: 48ch; margin-bottom: 28px; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 32px; }
/* A nota fica colada no botão: no celular entre o botão e "Ver as cestas"; no desktop numa linha abaixo dos dois */
.hero__nota { flex-basis: 100%; margin: -8px 0 4px; font-size: .875rem; color: var(--malva); }
@media (min-width: 560px) { .hero__nota { order: 1; margin: -6px 0 0; } }
.selos { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; font-size: .875rem; font-weight: 600; }
.selos li { display: inline-flex; align-items: center; gap: 8px; }
.selos .icone { width: 20px; height: 20px; color: var(--cobre); }
/* Foto mostra a cesta inteira (sem recorte aproximado), em tamanho contido.
   Celular: depois do texto, centralizada, até 240px. Desktop: coluna direita, até 460px. Legenda "Na foto" embaixo, fora da imagem. */
.hero__foto { position: relative; margin: 8px 0 0; justify-self: center; width: min(68%, 240px); }
.hero__moldura { position: relative; }
.hero__moldura::before { content: ""; position: absolute; inset: 14px -12px -12px 14px; border-radius: 18px 18px 18px var(--raio); background: var(--rose); }
.hero__janela { position: relative; aspect-ratio: 9 / 10; overflow: hidden; border-radius: 18px 18px 18px var(--raio); } /* a curva fica parada; só a foto assenta */
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__etiqueta { margin-top: 22px; text-align: center; font-size: .8125rem; color: var(--malva); }
@media (max-width: 899px) {
  .hero { --raio: 72px; }
  .hero__grade { gap: 16px; padding-top: 16px; }
  .hero h1 { margin-bottom: 14px; }
  .hero__texto { margin-bottom: 20px; }
  .hero__nota { max-width: calc(100% - 64px); } /* termina antes do botão flutuante do WhatsApp */
}
@media (min-width: 900px) {
  .hero { --raio: 150px; }
  .hero__grade { grid-template-columns: 1.15fr 1fr; gap: 56px; padding-top: 64px; padding-bottom: 72px; }
  .hero__foto { margin: 0; width: min(100%, 460px); }
  .hero__moldura::before { inset: 18px -16px -16px 18px; border-radius: var(--raio) 18px 18px 18px; }
  .hero__janela { border-radius: var(--raio) 18px 18px 18px; }}

/* ---------- Categorias (círculos) ---------- */
.categorias { display: flex; gap: 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px 4px 12px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: thin; }
.categorias li { scroll-snap-align: start; flex: 0 0 auto; }
.categoria { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 112px; text-align: center; text-decoration: none; color: var(--ameixa); font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.categoria__img { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--borda), 0 0 0 6px var(--rose); transition: box-shadow .2s, transform .2s; }
.categoria__img img { width: 100%; height: 100%; object-fit: cover; }
.categoria__img--icone { display: grid; place-items: center; background: var(--vinho); color: #E9B79F; }
.categoria__img--icone .icone { width: 44%; height: 44%; }
.categoria:hover { color: var(--vinho); }
.categoria:hover .categoria__img { box-shadow: 0 0 0 2px var(--vinho), 0 0 0 6px var(--rose); transform: translateY(-3px); }
@media (min-width: 900px) {
  .categorias { justify-content: space-between; overflow: visible; margin: 0; padding: 4px 0; }
  .categoria { width: 150px; }
  .categoria__img { width: 136px; height: 136px; }
}

/* ---------- Ocasiões (blocos coloridos) ---------- */
.ocasioes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; }
.ocasiao {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-height: 150px; height: 100%; padding: 20px; border-radius: var(--r-card); overflow: hidden;
  text-decoration: none; color: var(--ameixa); transition: transform .2s, box-shadow .2s;
}
.ocasiao:hover { transform: translateY(-3px); box-shadow: var(--sombra); color: inherit; }
.ocasiao__nome { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1.05; position: relative; z-index: 1; text-wrap: balance; }
.ocasiao__info { font-size: .875rem; font-weight: 600; line-height: 1.4; display: block; text-wrap: balance; position: relative; z-index: 1; }
.ocasiao__info .icone { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-left: 2px; }
.ocasiao--aniversario { background: var(--oc-aniversario); }
.ocasiao--namorados { background: var(--oc-namorados); color: #fff; }
.ocasiao--maes { background: var(--oc-maes); }
.ocasiao--pais { background: var(--oc-pais); color: #fff; }
.ocasiao--natal { background: var(--oc-natal); color: #fff; }
.ocasiao--namorados:hover, .ocasiao--pais:hover, .ocasiao--natal:hover { color: #fff; }
.ocasioes li:first-child { grid-column: 1 / -1; }
.ocasiao--destaque { min-height: 240px; padding: 24px; }
.ocasiao--destaque .ocasiao__nome { font-size: 2.5rem; }
.ocasiao--destaque p { position: relative; z-index: 1; max-width: 30ch; margin: 0; }
.ocasiao__foto { position: absolute; right: -24px; bottom: -24px; width: 52%; max-width: 260px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 6px solid rgba(255,255,255,.18); }
@media (min-width: 900px) {
  .ocasioes { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .ocasioes li:first-child { grid-column: auto; grid-row: 1 / 3; }
  .ocasiao--destaque { grid-column: auto; min-height: 100%; padding: 32px; }
  .ocasiao--destaque .ocasiao__nome { font-size: 2.5rem; }
  .ocasiao { min-height: 170px; }
}

/* ---------- Cards de produto ---------- */
.grade-produtos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
@media (min-width: 600px) { .grade-produtos { gap: 20px; } }
@media (min-width: 960px) { .grade-produtos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--borda); border-radius: var(--r-card); overflow: hidden; transition: box-shadow .25s, transform .25s; }
.card:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.card__img { aspect-ratio: 1; overflow: hidden; background: #fff; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__img img { transform: scale(1.04); }
.card__corpo { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; flex: 1; }
.card__marca { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); }
.card__nome { font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: 0; }
.card__desc { font-size: .875rem; line-height: 1.45; color: var(--malva); margin: 0 0 8px; }
.card__acao {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 12px; border-radius: 999px;
  background: var(--rose); color: var(--vinho); font-weight: 700; font-size: .875rem; text-decoration: none; text-align: center; line-height: 1.2;
  transition: background-color .2s, color .2s;
}
.card__acao .icone { width: 18px; height: 18px; }
.card__acao:hover, .card:hover .card__acao { background: var(--vinho); color: #fff; }
/* O card inteiro abre o WhatsApp do produto: o link do botão se estende sobre o card. */
.card { position: relative; }
.card__acao::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
@media (max-width: 420px) {
  .card__corpo { padding: 12px 10px 12px; }
  .card__desc { display: none; }
  .card__acao { font-size: .8125rem; padding: 8px; }
  .card__acao .rotulo-longo { display: none; }
}
@media (min-width: 421px) { .card__acao .rotulo-curto { display: none; } }
.card[hidden] { display: none; }
.grade-produtos > li[hidden] { display: none; }

.rodape-grade { display: flex; justify-content: center; margin-top: 32px; }
.nota { font-size: .875rem; color: var(--malva); margin-top: 16px; }

/* ---------- Filtros e abas ---------- */
.filtros { display: flex; gap: 8px; list-style: none; overflow-x: auto; padding: 4px var(--gutter) 12px; margin: 0 calc(-1 * var(--gutter)) 16px; }
.filtro, .aba {
  flex: none; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--borda); background: #fff; color: var(--ameixa);
  font: 600 .9375rem var(--sans); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.filtro:hover, .aba:hover { border-color: var(--vinho); color: var(--vinho); }
.filtro[aria-pressed="true"], .aba[aria-selected="true"] { background: var(--vinho); border-color: var(--vinho); color: #fff; }
.abas { display: flex; gap: 8px; overflow-x: auto; padding: 4px var(--gutter) 12px; margin: 0 calc(-1 * var(--gutter)) 16px; }
@media (min-width: 900px) { .filtros, .abas { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; } }
.contagem { font-size: .875rem; color: var(--malva); margin-bottom: 16px; }
.vazio { padding: 32px; text-align: center; background: #fff; border: 1px dashed var(--borda); border-radius: var(--r-card); }
.vazio p { max-width: 46ch; margin: 0 auto 16px; }

/* ---------- Passos (cesta do seu jeito) ---------- */
.passos { display: grid; gap: 24px; list-style: none; counter-reset: passo; padding: 0; margin: 0; } /* <ol>: sem o recuo padrão de 40px */
.passo { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; align-content: start; }
.passo img { width: 112px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.passo__num { font-family: var(--serif); font-size: 2.5rem; line-height: 1; color: var(--cobre); font-weight: 500; display: block; margin-bottom: 4px; font-variant-numeric: lining-nums; }
.passo h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; letter-spacing: 0; }
.passo p { margin: 0; color: var(--malva); }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .passo { grid-template-columns: 1fr; }
  /* Arco exato: 999px seria reduzido pelo navegador e o canto de baixo cairia para ~3px. 37.5% = meia largura numa foto 3:4 */
  .passo img { width: 100%; border-radius: 50% 50% 18px 18px / 37.5% 37.5% 18px 18px; }
}
.dividido { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .dividido { grid-template-columns: 1fr 1fr; gap: 64px; }
  /* Texto + foto: o texto ganha mais espaço e a foto encosta na margem direita do contêiner */
  .dividido:has(> .foto-moldura) { grid-template-columns: 1.25fr 1fr; }
  .dividido > .foto-moldura { justify-self: end; }
}
.dividido--topo { align-items: start; }
.dividido--topo .bairros { margin: 20px 0 24px; }
@media (max-width: 899px) { .dividido--topo { gap: 56px; } }

/* ---------- Marcas ---------- */
.marcas { display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; }
@media (min-width: 600px) { .marcas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .marcas { grid-template-columns: repeat(4, 1fr); } }
.marca {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 28px 24px; background: #fff; border: 1px solid var(--borda); border-radius: var(--r-card);
  text-decoration: none; color: var(--ameixa); transition: border-color .2s, box-shadow .2s;
}
.marca:hover { border-color: var(--vinho); box-shadow: var(--sombra); color: var(--ameixa); }
.marca__nome { font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1; color: var(--vinho); }
.marca__linhas { font-size: .9375rem; color: var(--malva); flex: 1; }
.marca .link-seta { margin-top: 8px; }

/* ---------- Por que a Diva ---------- */
.motivos { display: grid; gap: 24px; list-style: none; }
@media (min-width: 640px) { .motivos { grid-template-columns: 1fr 1fr; } }
.motivo { display: flex; gap: 16px; }
.motivo__icone { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--borda); color: var(--cobre); }
.motivo__icone .icone { width: 24px; height: 24px; }
.motivo h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin-bottom: 4px; letter-spacing: 0; }
.motivo p { margin: 0; color: var(--malva); }
.foto-moldura { position: relative; max-width: 440px; margin: 0; }
.foto-moldura img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
.foto-moldura figcaption { font-size: .8125rem; color: var(--malva); margin-top: 8px; }

/* ---------- Entregas ---------- */
.bairros { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 28px; }
.bairros li { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); font-size: .875rem; font-weight: 600; }
/* Cidades: etiqueta, não botão. Vinho fica só para ação (The Laço Rule) */
.bairros li.cidade { border-color: var(--cobre); }
.bairros__rotulo { margin: 20px 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cobre); }
.bairros__rotulo + .bairros { margin-top: 0; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* ---------- Loja / contato ---------- */
.info-loja { list-style: none; display: grid; gap: 20px; margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.info-loja li { display: flex; gap: 14px; }
.info-loja .icone { width: 24px; height: 24px; color: var(--cobre); margin-top: 2px; }
.info-loja strong { display: block; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--malva); }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--r-card); background: var(--rose); }
@media (min-width: 900px) { .mapa { aspect-ratio: auto; height: 100%; min-height: 420px; } }

/* ---------- Perguntas ---------- */
.perguntas { max-width: 820px; margin: 0 auto; }
.pergunta { border-bottom: 1px solid var(--borda); }
.pergunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.4;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { color: var(--vinho); }
.pergunta summary .icone { width: 22px; height: 22px; color: var(--vinho); transition: transform .25s; }
.pergunta[open] summary .icone { transform: rotate(45deg); }
.pergunta__resposta { padding: 0 0 20px; color: var(--malva); max-width: 62ch; }
.pergunta__resposta p:last-child { margin: 0; }
.perguntas__fim { text-align: center; margin-top: 32px; }

/* ---------- Chamada final ---------- */
.chamada { background: var(--vinho); color: #fff; position: relative; overflow: hidden; }
.chamada .container { display: grid; gap: 24px; align-items: center; padding-top: var(--secao); padding-bottom: var(--secao); position: relative; z-index: 1; }
.chamada h2 { color: #fff; margin-bottom: 12px; }
.chamada h2 em { color: #F5D2C4; }
.chamada p { color: #F3E3E8; font-size: 1.125rem; line-height: 1.65; letter-spacing: .005em; max-width: 46ch; margin: 0; }
.chamada__brilho { position: absolute; width: 220px; height: 220px; right: -40px; top: -40px; color: rgba(255,255,255,.07); }
@media (min-width: 900px) { .chamada .container { grid-template-columns: 1fr auto; } }

/* ---------- Topo das páginas internas ---------- */
.topo-pagina { background: var(--rose); padding-bottom: 48px; }
.topo-pagina__grade { display: grid; gap: 24px; align-items: center; padding-top: 24px; }
.topo-pagina h1 { margin-bottom: 16px; font-size: clamp(2.25rem, 5.5vw, 3.5rem); }
.topo-pagina p { font-size: 1.0625rem; max-width: 56ch; }
.topo-pagina__foto picture { display: block; }
.topo-pagina__foto img { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 18px 18px / 50% 50% 18px 18px; margin-left: auto; }
.selo-revenda { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--vinho); font-weight: 700; font-size: .8125rem; margin-bottom: 16px; }
.selo-revenda .icone { width: 16px; height: 16px; color: var(--cobre); }
@media (min-width: 900px) { .topo-pagina__grade { grid-template-columns: 1.4fr 1fr; padding-top: 32px; } .topo-pagina { padding-bottom: 64px; } }
@media (max-width: 899px) { .topo-pagina__foto { display: none; } }

.linhas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.linhas li { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--vinho); }
.aviso-marca { font-size: .875rem; color: var(--malva); border-left: 3px solid var(--cobre); padding: 4px 0 4px 14px; margin-top: 32px; }

.caixa-valor { background: #fff; border: 1px solid var(--borda); border-radius: var(--r-card); padding: 28px; display: grid; gap: 16px; align-items: center; }
.caixa-valor h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); margin-bottom: 8px; }
.caixa-valor p { margin: 0; color: var(--malva); }
@media (min-width: 800px) { .caixa-valor { grid-template-columns: 1fr auto; padding: 36px 40px; } }

.ideias { display: grid; gap: 16px; list-style: none; }
@media (min-width: 700px) { .ideias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ideias { grid-template-columns: repeat(4, 1fr); } }
.ideia { background: #fff; border: 1px solid var(--borda); border-radius: var(--r-card); padding: 24px; height: 100%; }
.ideia h3 { color: var(--vinho); margin-bottom: 8px; }
.ideia p { margin: 0; color: var(--malva); font-size: .9375rem; }

.lista-passos { list-style: none; display: grid; gap: 16px; counter-reset: p; }
@media (min-width: 900px) { .lista-passos { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.lista-passos li { counter-increment: p; background: #fff; border: 1px solid var(--borda); border-radius: var(--r-card); padding: 24px; }
.lista-passos li::before { content: counter(p); display: block; font-family: var(--serif); font-size: 2.5rem; line-height: 1; font-weight: 500; color: var(--cobre); margin-bottom: 8px; font-variant-numeric: lining-nums; }
.lista-passos h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; margin-bottom: 4px; }
.lista-passos p { margin: 0; color: var(--malva); }

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; }
@media (min-width: 800px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.galeria img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }

.prosa { max-width: 68ch; }
.prosa h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); margin-top: 1.4em; }
.prosa p { color: var(--ameixa); }

.links-relacionados { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; margin-top: 24px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--vinho-escuro); color: #EAD9DF; font-size: .9375rem; line-height: 1.65; letter-spacing: .005em; }
.rodape__contato { font-variant-numeric: tabular-nums; }
.rodape a { color: #fff; text-decoration: none; }
.rodape a:hover { text-decoration: underline; color: #fff; }
.rodape__grade { display: grid; gap: 32px; padding-top: 56px; padding-bottom: 32px; }
@media (min-width: 700px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.rodape__marca img { width: 132px; margin-bottom: 16px; }
.rodape__marca { background: none; }
.rodape__logo { display: inline-block; background: var(--creme); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
.rodape__logo img { width: 120px; margin: 0; }
.rodape h2 { font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #F5D2C4; margin-bottom: 14px; }
.rodape ul { list-style: none; display: grid; gap: 8px; }
.rodape address { font-style: normal; }
.rodape__contato li { display: flex; gap: 10px; }
.rodape__contato .icone { width: 18px; height: 18px; margin-top: 3px; color: #F5D2C4; }
.rodape__base { border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; padding-bottom: 96px; font-size: .8125rem; color: #D9C3CB; display: grid; gap: 8px; }
@media (min-width: 700px) { .rodape__base { padding-bottom: 28px; } }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--whats); color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 10px 28px rgba(23, 96, 60, .35); transition: background-color .2s, transform .2s;
}
.whats-flutuante:hover { background: var(--whats-escuro); color: #fff; transform: translateY(-2px); }
.whats-flutuante .icone { width: 26px; height: 26px; }
@media (max-width: 520px) { .whats-flutuante { padding: 0; width: 56px; justify-content: center; } .whats-flutuante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- Toque: alvos de pelo menos 44px ---------- */
@media (pointer: coarse) {
  .link-seta { min-height: 44px; }
  .trilha a { display: inline-flex; align-items: center; min-height: 44px; }
  .rodape ul:not(.rodape__contato) { gap: 0; }
  .rodape ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .rodape__contato { gap: 4px; }
  .rodape__contato li:has(> a) { align-items: center; }
  .rodape__contato li:has(> a) .icone { margin-top: 0; }
}

/* ---------- Detalhes ---------- */
/* Superfícies do navegador na paleta */
html { accent-color: var(--vinho); caret-color: var(--vinho); scrollbar-color: #D7C2C8 var(--creme); }
::selection { background: #F5D2C4; color: var(--ameixa); }
.rodape ::selection, .chamada ::selection, .aviso ::selection { background: var(--creme); color: var(--vinho-escuro); }
.categorias, .filtros, .abas { scrollbar-width: thin; scrollbar-color: var(--borda) transparent; }

/* "hoje" ao lado do horário do dia */
.selo-hoje {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  font: 700 .75rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  background: var(--rose); color: var(--cobre);
}
.secao--rose .selo-hoje, .topo-pagina .selo-hoje { background: #fff; }
/* No rodapé a coluna é estreita: a linha do dia fica em destaque e o "hoje" vai só para leitor de tela */
.rodape .horario--hoje { color: #fff; font-weight: 600; }
.rodape .selo-hoje { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Aviso de passagem para o WhatsApp */
.aviso-whats {
  position: fixed; left: 16px; bottom: 16px; z-index: 45; width: min(360px, calc(100% - 104px));
  padding: 14px 40px 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--borda);
  box-shadow: var(--sombra); color: var(--ameixa);
  opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--saida), transform .2s var(--saida), visibility .2s;
}
.aviso-whats.aberto { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .4s var(--chegada), transform .4s var(--chegada), visibility .4s; }
.aviso-whats__titulo { margin: 0 0 4px; font-weight: 700; font-size: .9375rem; display: flex; align-items: center; gap: 8px; }
.aviso-whats__titulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--whats); box-shadow: 0 0 0 3px rgba(31, 122, 77, .15); }
.aviso-whats__msg {
  margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-size: 1.0625rem; line-height: 1.35; color: var(--vinho);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.aviso-whats__repetir { font-size: .8125rem; font-weight: 600; color: var(--malva); }
.aviso-whats__repetir:hover { color: var(--vinho); }
.aviso-whats__fechar {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none;
  font: 400 1.25rem/1 var(--sans); color: var(--malva); cursor: pointer;
}
.aviso-whats__fechar:hover { background: var(--creme); color: var(--vinho); }
@media (max-width: 520px) { .aviso-whats { left: 12px; bottom: 12px; width: calc(100% - 92px); } }
@media (pointer: coarse) { .aviso-whats__fechar { width: 44px; height: 44px; top: 0; right: 0; } .aviso-whats__repetir { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- Movimento ----------
   Momento principal (vitrine abrindo): a foto da capa se revela de cima para baixo enquanto assenta (escala 1.08 → 1),
   e a legenda "Na foto" chega por último. Uma vez, ~1,5s. (A estrela ao lado da foto saiu a pedido da cliente.)
   O resto é retorno de ação e mudança de estado. Nada em loop. */

/* Capa: revelar → legenda */
.hero__foto img { animation: desembrulhar 1.1s var(--chegada) backwards; }
.hero__etiqueta { animation: surgir-baixo .5s var(--chegada) 1s backwards; }
/* Espera a foto chegar e estar à vista (site.js marca .carregada) */
.js .hero__foto:not(.carregada) img,
.js .hero__foto:not(.carregada) .hero__etiqueta { animation-play-state: paused; }
@keyframes desembrulhar {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
  to   { clip-path: inset(0); transform: none; }
}
@keyframes esmaecer { from { opacity: 0; } }
@keyframes surgir { from { opacity: 0; transform: translateY(-6px); } }

/* Entrada de conteúdo ao rolar; listas entram em sequência curta (no máximo 210ms) */
.js .revelar { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--chegada), transform .6s var(--chegada); }
.js .revelar.visivel { opacity: 1; transform: none; }
.js .revelar:nth-child(4n+2) { transition-delay: 70ms; }
.js .revelar:nth-child(4n+3) { transition-delay: 140ms; }
.js .revelar:nth-child(4n+4) { transition-delay: 210ms; }

/* Botão flutuante chega depois da capa */
.whats-flutuante { animation: surgir-baixo .5s var(--chegada) .9s backwards; }
@keyframes surgir-baixo { from { opacity: 0; transform: translateY(16px); } }

/* Retorno ao toque/clique */
.btn:active { transform: translateY(1px) scale(.985); transition-duration: 80ms; }
.card:active { transform: scale(.99); transition-duration: 80ms; }
.filtro:active, .aba:active, .whats-flutuante:active { transform: scale(.96); transition-duration: 80ms; }
.ocasiao:active { transform: scale(.985); transition-duration: 80ms; }
.categoria:active .categoria__img { transform: scale(.96); transition-duration: 80ms; }

/* Hover com movimento só para quem tem mouse (no toque o estado ficava preso) */
.ocasiao__foto { transition: transform .5s var(--chegada); }
.ocasiao__info .icone, .marca .link-seta .icone { transition: transform .2s var(--chegada); }
@media (hover: hover) {
  .ocasiao:hover .ocasiao__foto { transform: scale(1.05) rotate(-2deg); }
  .ocasiao:hover .ocasiao__info .icone, .marca:hover .link-seta .icone { transform: translateX(3px); }
}
@media (hover: none) {
  .card:hover, .card:hover .card__img img, .ocasiao:hover, .categoria:hover .categoria__img, .whats-flutuante:hover { transform: none; }
  .card:hover, .ocasiao:hover { box-shadow: none; }
}

/* Mudanças de estado */
.submenu.aberto { animation: surgir .18s var(--chegada); }
[role="tabpanel"]:not([hidden]) { animation: esmaecer .3s var(--chegada); }
.pergunta[open] .pergunta__resposta { animation: surgir .3s var(--chegada); }
@supports (interpolate-size: allow-keywords) {
  .perguntas { interpolate-size: allow-keywords; }
  .pergunta::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--chegada), content-visibility .32s allow-discrete; }
  .pergunta[open]::details-content { block-size: auto; }
}

/* Movimento reduzido: sem deslocamento, mantendo fades curtos e trocas de cor */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__foto img, .hero__etiqueta, .whats-flutuante, .submenu.aberto, .pergunta[open] .pergunta__resposta { animation: esmaecer .3s ease-out backwards; }
  .js .revelar { transform: none; transition: opacity .3s linear; transition-delay: 0s; }
  .card:hover, .card:hover .card__img img, .ocasiao:hover, .ocasiao:hover .ocasiao__foto, .categoria:hover .categoria__img,
  .whats-flutuante:hover, .link-seta:hover .icone, .ocasiao:hover .ocasiao__info .icone, .marca:hover .link-seta .icone,
  .btn:active, .card:active, .filtro:active, .aba:active, .ocasiao:active, .categoria:active .categoria__img, .whats-flutuante:active { transform: none; }
  .menu-movel, .menu-movel.aberto { transform: none; transition: opacity .2s, visibility .2s; }
  .menu-movel:not(.aberto) { opacity: 0; }
  .pergunta::details-content { transition: none; }
  .aviso-whats, .aviso-whats.aberto { transform: none; }
}