/* =========================================================================
   DE PERTO · componentes. Botão de tinta com sombra colorida e papel com
   elevação (Halftone: .btn-ink, .btn-ghost, .panel, .ink-card, .print-card,
   .spec-row), cartão de caminho (Lunar: .card-hover), foto com zoom lento e
   véu (Veloura: .photo, .photo__veil), vitrine presa (Riska: #productStory,
   .product-slide), link editorial (Riska: .reveal-link), marquee de fotos
   (Lunar: .marquee-mask, .animate-marquee). Nenhum efeito magnético.
   ========================================================================= */

:root {
  /* 6.1 Componentes · medidas */
  --btn-altura: 3.25rem;
  --btn-altura-p: 2.75rem;
  --campo-altura: 3.25rem;
  --cartao-caminho: 3 / 4;
  --cartela-slide: 100vw;
  --cartela-slides: 4;
  --marquee-foto-l: 11rem;
  --marquee-foto-a: 13.5rem;
  --spinner: 1.1rem;
  --aspas: 6rem;
}

/* ---------- botões ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-3); min-height: var(--btn-altura); padding: 0 var(--esp-6); border: 0; border-radius: var(--raio-2); font-family: var(--letra-rotulo); font-weight: var(--peso-medio); font-size: var(--tam-texto); letter-spacing: var(--tr-rotulo); word-spacing: normal; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva), background-color var(--tempo-medio) var(--curva), color var(--tempo-rapido) var(--curva-suave), border-color var(--tempo-medio) var(--curva); }
.btn .icone { transition: transform var(--tempo-medio) var(--curva); }
.btn-ink { background: var(--cor-acao); color: var(--cor-acao-texto); box-shadow: var(--sombra-tinta); }
.btn-ink:hover, .btn-ink.e-hover { transform: translateY(var(--sobe-leve)); box-shadow: var(--sombra-acao); }
.btn-ink:hover .icone, .btn-ink.e-hover .icone { transform: translateX(var(--esp-1)); }
.btn-ink:active, .btn-ink.e-apertado { transform: translateY(0) scale(var(--aperta)); box-shadow: var(--sombra-contato); }
.btn-framboesa { background: var(--cor-framboesa); color: var(--cor-papel); box-shadow: var(--sombra-acao); }
.btn-framboesa:hover, .btn-framboesa.e-hover { transform: translateY(var(--sobe-leve)); background: var(--cor-framboesa-funda); }
.btn-ghost { background: var(--cor-superficie); color: var(--cor-texto); box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-fio-forte), var(--sombra-papel-baixa); }
.btn-ghost:hover, .btn-ghost.e-hover { transform: translateY(var(--sobe-leve)); box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-destaque), var(--sombra-papel-baixa); }
[data-folha="tinta"] .btn-ghost, [data-folha="noite"] .btn-ghost, .abertura .btn-ghost { background: var(--cor-papel-a10); color: var(--cor-papel); box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-papel-a30); -webkit-backdrop-filter: blur(var(--desfoque-leve)); backdrop-filter: blur(var(--desfoque-leve)); }
.btn.e-foco { outline: var(--fio-foco) solid var(--cor-foco); outline-offset: var(--recuo-foco); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--opac-desligado); cursor: not-allowed; transform: none; box-shadow: none; }
.btn--p { min-height: var(--btn-altura-p); padding: 0 var(--esp-5); font-size: var(--tam-pequeno); }
/* carregando: a lupinha gira no lugar do ícone */
.btn .spinner { display: none; width: var(--spinner); height: var(--spinner); border-radius: var(--raio-lente); box-shadow: inset 0 0 0 var(--fio) currentColor; position: relative; }
.btn .spinner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--fio) solid transparent; border-top-color: var(--cor-luz); animation: gira var(--tempo-lento) linear infinite; }
.btn.e-carregando { pointer-events: none; }
.btn.e-carregando .spinner { display: inline-block; }
.btn.e-carregando .icone { display: none; }
@keyframes gira { to { transform: rotate(360deg); } }

/* o botão-lente: redondo, com o anel de luz na borda (sem girar e sem seguir o mouse) */
.btn-anel { display: inline-grid; place-items: center; width: var(--btn-anel); height: var(--btn-anel); padding: var(--esp-3); border: 0; border-radius: var(--raio-lente); background: var(--cor-tinta); color: var(--cor-papel); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 var(--fio) var(--cor-luz-a40), 0 0 var(--esp-5) var(--cor-luz-a18); transition: box-shadow var(--tempo-lento) var(--curva), transform var(--tempo-medio) var(--curva); }
.btn-anel:hover, .btn-anel.e-hover { box-shadow: 0 0 0 var(--fio) var(--cor-luz), 0 0 var(--esp-7) var(--cor-luz-a40); }
.btn-anel:active { transform: scale(var(--aperta)); }

/* link editorial (Riska: .reveal-link) */
.reveal-link { position: relative; display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) 0; font-family: var(--letra-rotulo); font-weight: var(--peso-medio); letter-spacing: var(--tr-rotulo); word-spacing: normal; text-decoration: none; color: var(--cor-texto); }
.reveal-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fio-fino); background: currentColor; transform-origin: right; transform: scaleX(1); transition: transform var(--tempo-lento) var(--curva); }
.reveal-link:hover::after, .reveal-link.e-hover::after { transform-origin: left; animation: sublinha var(--tempo-lento) var(--curva); }
@keyframes sublinha { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

.botao-icone { display: inline-grid; place-items: center; width: var(--alvo-toque); height: var(--alvo-toque); border: var(--fio-fino) solid var(--cor-fio-forte); border-radius: var(--raio-lente); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--tempo-rapido) var(--curva-suave), border-color var(--tempo-rapido) var(--curva-suave); }
.nav .botao-icone { border-color: currentColor; }
.botao-icone:hover { background: var(--cor-tinta-a06); }
.e-escuro .botao-icone:hover, [data-folha="tinta"] .botao-icone:hover, [data-folha="noite"] .botao-icone:hover { background: var(--cor-papel-a10); }
.botao-icone[aria-pressed="true"] { background: var(--cor-framboesa); border-color: var(--cor-framboesa); color: var(--cor-papel); }
.botao-icone:disabled { opacity: var(--opac-desligado); cursor: not-allowed; }

/* vitrine de estados */
.estados { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-estados)), 1fr)); }
.estado { display: grid; gap: var(--esp-2); justify-items: start; }
.estado > span:first-child:not(.btn) { color: var(--cor-texto-2); }

/* ---------- chips, pílulas e selos ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chip { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--btn-altura-p); padding: 0 var(--esp-4); border: var(--fio-fino) solid var(--cor-borda-campo); border-radius: var(--raio-pilula); background: transparent; color: var(--cor-texto); font-family: var(--letra-rotulo); font-size: var(--tam-pequeno); letter-spacing: var(--tr-rotulo); word-spacing: normal; cursor: pointer; transition: background-color var(--tempo-rapido) var(--curva-suave), color var(--tempo-rapido) var(--curva-suave), border-color var(--tempo-rapido) var(--curva-suave); }
.chip:hover { border-color: var(--cor-destaque); }
.chip[aria-pressed="true"] { background: var(--cor-acao); border-color: var(--cor-acao); color: var(--cor-acao-texto); }
.pilula { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-3); border-radius: var(--raio-pilula); background: var(--cor-po); color: var(--cor-tinta); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-pilula); word-spacing: normal; }
.pilula--vidro { background: var(--cor-papel-a18); color: var(--cor-papel); -webkit-backdrop-filter: blur(var(--desfoque-vidro)); backdrop-filter: blur(var(--desfoque-vidro)); box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-papel-a30); }
.pilula--salvia { background: var(--cor-salvia-clara); color: var(--cor-salvia-noite); }
.pilula--framboesa { background: var(--cor-framboesa); color: var(--cor-papel); }
.selo-lente { position: relative; display: inline-grid; place-items: center; width: var(--selo); aspect-ratio: 1; border-radius: var(--raio-lente); background: var(--cor-tinta); color: var(--cor-papel); box-shadow: 0 0 0 var(--fio) var(--cor-luz-a70), 0 0 var(--esp-6) var(--cor-luz-a18); }
.selo-lente svg { width: 58%; height: auto; }

/* ---------- papel com elevação (Halftone: .panel, .ink-card, .print-card) ---------- */
.panel { border: var(--fio-fino) solid var(--cor-fio); border-radius: var(--raio-3); background: var(--cor-superficie); box-shadow: var(--sombra-papel); }
.panel--baixo { box-shadow: var(--sombra-papel-baixa); }

/* ficha numerada (Halftone: .spec-row) */
.spec { display: grid; margin: 0; }
.spec-row { display: grid; grid-template-columns: minmax(var(--spec-rotulo), 0.45fr) 1fr; align-items: baseline; gap: var(--esp-3); padding: var(--esp-3) 0; border-top: var(--fio-fino) solid var(--cor-fio); }
.spec-row:last-child { border-bottom: var(--fio-fino) solid var(--cor-fio); }
.spec-row .num { font-family: var(--letra-rotulo); font-size: var(--tam-legenda); color: var(--cor-texto-2); font-variant-numeric: tabular-nums; }
.spec-row dt { display: grid; grid-template-columns: var(--spec-num) 1fr; align-items: baseline; gap: var(--esp-3); font-family: var(--letra-rotulo); font-size: var(--tam-pequeno); letter-spacing: var(--tr-rotulo); word-spacing: normal; color: var(--cor-texto-2); }
.spec-row dd { margin: 0; }

/* ---------- cartões de caminho (Lunar: .card-hover) ---------- */
.caminhos { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cartao-caminho-min)), 1fr)); }
.card-hover { position: relative; overflow: hidden; border-radius: var(--raio-4); aspect-ratio: var(--cartao-caminho); color: var(--cor-papel); isolation: isolate; transition: transform var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva); }
.card-hover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--tempo-zoom) var(--curva-suave); }
.card-hover::before { content: ""; position: absolute; inset: 0; z-index: var(--z-base); background: var(--degrade-tinta); }
.card-hover::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); background: var(--veu-cor, var(--cor-po)); opacity: 0; mix-blend-mode: soft-light; transition: opacity var(--tempo-lento) var(--curva); }
.card-hover__topo { position: absolute; z-index: var(--z-cima); top: var(--esp-4); left: var(--esp-4); right: var(--esp-4); display: flex; justify-content: space-between; align-items: center; }
.card-hover__base { position: absolute; z-index: var(--z-cima); left: 0; right: 0; bottom: 0; display: grid; gap: var(--esp-2); padding: var(--esp-5); }
.card-hover__base h4 { color: var(--cor-papel); font-size: var(--tam-h4); }
.card-hover__desc { max-height: 0; opacity: 0; transform: translateY(var(--esp-2)); overflow: hidden; color: var(--cor-papel-a88); font-size: var(--tam-pequeno); transition: opacity var(--tempo-lento) var(--curva), transform var(--tempo-lento) var(--curva), max-height var(--tempo-lento) var(--curva); }
.card-hover__abrir { position: absolute; inset: 0; z-index: var(--z-alto); border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.card-hover:hover, .card-hover.e-aberto { box-shadow: var(--sombra-tinta); }
.card-hover:hover img, .card-hover.e-aberto img { transform: scale(var(--cresce-foto)); }
.card-hover:hover::after, .card-hover.e-aberto::after { opacity: var(--opac-veu-cor); }
.card-hover:hover .card-hover__desc, .card-hover.e-aberto .card-hover__desc, .card-hover:focus-within .card-hover__desc { max-height: 8rem; opacity: 1; transform: none; }
.icone-vidro { display: grid; place-items: center; width: var(--tam-icone-vidro); height: var(--tam-icone-vidro); border-radius: var(--raio-lente); background: var(--cor-papel-a18); box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-papel-a30); -webkit-backdrop-filter: blur(var(--desfoque-leve)); backdrop-filter: blur(var(--desfoque-leve)); }

/* ---------- foto com zoom lento, véu e mini-cartão de vidro (Veloura: .photo) ---------- */
.photo { position: relative; overflow: hidden; border-radius: var(--raio-4); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tempo-zoom) var(--curva-suave); }
.photo:hover img, .photo:focus-within img { transform: scale(var(--cresce-foto)); }
.photo__veil { position: absolute; inset: 0; background: var(--degrade-tinta); opacity: var(--opac-veu); transition: opacity var(--tempo-lento) var(--curva-suave); pointer-events: none; }
.photo:hover .photo__veil { opacity: var(--opac-veu-forte); }
.fl-card { position: absolute; left: var(--esp-4); right: var(--esp-4); bottom: var(--esp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4); border-radius: var(--raio-3); background: var(--cor-papel-a88); color: var(--cor-tinta); -webkit-backdrop-filter: blur(var(--desfoque-vidro)); backdrop-filter: blur(var(--desfoque-vidro)); box-shadow: var(--sombra-papel-baixa); transition: transform var(--tempo-medio) var(--curva); }
.photo:hover .fl-card { transform: translateY(calc(var(--esp-1) * -1)); }
.fl-card b { font-family: var(--letra-titulo); font-weight: var(--peso-normal); font-size: var(--tam-h6); line-height: var(--lh-sub); }

/* ---------- marquee de fotos (Lunar: .marquee-mask + .animate-marquee) ---------- */
.marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, var(--mascara) 10%, var(--mascara) 90%, transparent); mask-image: linear-gradient(to right, transparent, var(--mascara) 10%, var(--mascara) 90%, transparent); }
.animate-marquee { display: flex; width: max-content; animation: marquee var(--tempo-marquee) linear infinite; will-change: transform; }
.animate-marquee > div { display: flex; gap: var(--esp-4); padding-right: var(--esp-4); }
.marquee-foto { width: var(--marquee-foto-l); height: var(--marquee-foto-a); border-radius: var(--raio-3); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- a cartela: vitrine presa (Riska: #productStory, #productTrack, .product-slide) ---------- */
#productStory { position: relative; margin-inline: calc(var(--esp-gutter) * -1); }
.product-sticky { position: relative; }
.product-head { display: flex; justify-content: space-between; gap: var(--esp-4); margin: 0 var(--esp-gutter) var(--esp-5); padding-top: var(--esp-3); border-top: var(--fio-fino) solid var(--cor-fio-forte); }
#productTrack { display: grid; gap: var(--esp-7); padding-inline: var(--esp-gutter); }
.product-slide { display: grid; gap: var(--esp-5); align-content: center; }
.product-visual { position: relative; overflow: hidden; border-radius: var(--raio-4); aspect-ratio: var(--proporcao-retrato); }
.product-visual.duo img, .product-image { width: 100%; height: 100%; object-fit: cover; }
.product-texto { display: grid; gap: var(--esp-4); align-content: end; }
.product-meta { font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); word-spacing: normal; color: var(--cor-texto-2); }
.product-title { font-size: var(--tam-h1); line-height: var(--lh-justo); }
.product-bar { height: var(--fio-foco); margin: var(--esp-5) var(--esp-gutter) 0; background: var(--cor-fio); display: none; }
#productProgress { height: 100%; background: var(--cor-framboesa); transform-origin: left; transform: scaleX(0); }
#productStory.e-presa { height: calc(var(--cartela-slides) * var(--altura-tela)); }
#productStory.e-presa .product-sticky { position: sticky; top: 0; height: var(--altura-tela); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
#productStory.e-presa #productTrack { display: flex; gap: 0; width: max-content; justify-self: start; padding: 0; will-change: transform; }
#productStory.e-presa .product-slide { width: var(--cartela-slide); padding: 0 var(--esp-gutter); grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); align-items: end; gap: var(--esp-8); }
#productStory.e-presa .product-texto { order: 0; padding-bottom: var(--esp-6); }
#productStory.e-presa .product-visual { aspect-ratio: auto; height: 68svh; }
#productStory.e-presa .product-bar { display: block; }

/* ---------- campos (a ficha de avaliação) ---------- */
.ficha-form { display: grid; gap: var(--esp-5); padding: var(--esp-6); }
.campo { display: grid; gap: var(--esp-2); }
.campo__rotulo { font-family: var(--letra-rotulo); font-weight: var(--peso-medio); font-size: var(--tam-pequeno); letter-spacing: var(--tr-rotulo); word-spacing: normal; color: var(--cor-texto); }
.campo__ajuda { font-size: var(--tam-pequeno); color: var(--cor-texto-2); }
.campo__erro { min-height: 0; font-size: var(--tam-pequeno); color: var(--cor-framboesa); }
.entrada { width: 100%; min-height: var(--campo-altura); padding: var(--esp-3) var(--esp-4); border: var(--fio-fino) solid var(--cor-borda-campo); border-radius: var(--raio-2); background: var(--cor-papel-alto); color: var(--cor-tinta); font-family: var(--letra-texto); transition: border-color var(--tempo-rapido) var(--curva-suave), box-shadow var(--tempo-rapido) var(--curva-suave); }
.entrada::placeholder { color: var(--cor-marrom-medio); opacity: var(--opac-apoio); }
.entrada:hover { border-color: var(--cor-marrom); }
.entrada:focus-visible, .entrada.e-foco { outline: var(--fio-foco) solid var(--cor-framboesa); outline-offset: var(--fio-foco); border-color: var(--cor-framboesa); }
.entrada:disabled { opacity: var(--opac-desligado); cursor: not-allowed; }
textarea.entrada { min-height: var(--altura-campo-texto); resize: vertical; }
select.entrada { appearance: none; padding-right: var(--esp-8); background-image: linear-gradient(45deg, transparent 50%, var(--cor-marrom) 50%), linear-gradient(135deg, var(--cor-marrom) 50%, transparent 50%); background-position: calc(100% - var(--esp-5)) 52%, calc(100% - var(--esp-4)) 52%; background-size: var(--esp-2) var(--esp-2); background-repeat: no-repeat; }
.campo.e-erro .entrada { border-color: var(--cor-framboesa); }
.opcao { display: flex; align-items: flex-start; gap: var(--esp-3); font-size: var(--tam-pequeno); cursor: pointer; }
.opcao input { flex: none; width: var(--caixa-opcao); height: var(--caixa-opcao); margin-top: 0.15em; accent-color: var(--cor-framboesa); }
.opcao input:focus-visible { outline: var(--fio-foco) solid var(--cor-foco); outline-offset: var(--recuo-foco); }

/* ---------- depoimento (Halftone: .quote-card), sempre marcado como exemplo enquanto não for real ---------- */
.quote-card { position: relative; display: grid; gap: var(--esp-4); padding: var(--esp-7) var(--esp-6) var(--esp-6); }
.quote-card .q-mark { position: absolute; top: var(--esp-2); left: var(--esp-5); font-family: var(--letra-titulo); font-size: var(--aspas); line-height: var(--lh-justo); color: var(--cor-framboesa); }
.quote-card blockquote { margin: 0; font-family: var(--letra-titulo); font-size: var(--tam-h5); line-height: var(--lh-sub); color: var(--cor-titulo); }

/* ---------- antes e depois em prancha comparativa (cor natural, o mesmo tratamento) ---------- */
.comparativa { display: grid; gap: var(--esp-4); grid-template-columns: 1fr 1fr; }
.comparativa figure { display: grid; gap: var(--esp-2); }
.comparativa .foto-cor { aspect-ratio: 1; border-radius: var(--raio-3); }

/* ---------- acordeão ---------- */
.acordeao { border-top: var(--fio-fino) solid var(--cor-fio); }
.acordeao:last-child { border-bottom: var(--fio-fino) solid var(--cor-fio); }
.acordeao summary { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); min-height: var(--alvo-toque); padding: var(--esp-4) 0; cursor: pointer; list-style: none; font-family: var(--letra-titulo); font-size: var(--tam-h5); line-height: var(--lh-sub); color: var(--cor-titulo); }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary .icone { transition: transform var(--tempo-medio) var(--curva); }
.acordeao[open] summary .icone { transform: rotate(45deg); }
.acordeao__corpo { padding: 0 0 var(--esp-5); max-width: var(--largura-texto); color: var(--cor-texto-2); }

/* ---------- dica (tooltip): abre no toque, no foco e com o mouse ---------- */
.dica { position: relative; display: inline-flex; }
.dica__conteudo { position: absolute; z-index: var(--z-cima); left: 50%; bottom: calc(100% + var(--esp-2)); width: max-content; max-width: var(--largura-dica); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-2); background: var(--cor-tinta); color: var(--cor-papel); font-size: var(--tam-pequeno); line-height: var(--lh-rotulo); opacity: 0; pointer-events: none; transform: translate(-50%, var(--esp-1)); transition: opacity var(--tempo-rapido) var(--curva-suave), transform var(--tempo-rapido) var(--curva-suave); }
.dica:hover .dica__conteudo, .dica:focus-within .dica__conteudo, .dica.e-aberto .dica__conteudo { opacity: 1; transform: translate(-50%, 0); }

/* ---------- janela (modal) ---------- */
.janela { width: min(100% - var(--esp-6), var(--largura-janela)); max-height: calc(100svh - var(--esp-6)); padding: 0; border: 0; border-radius: var(--raio-3); background: var(--cor-papel); color: var(--cor-marrom); box-shadow: var(--sombra-papel); }
.janela::backdrop { background: var(--cor-tinta-a72); -webkit-backdrop-filter: blur(var(--desfoque-leve)); backdrop-filter: blur(var(--desfoque-leve)); }
.janela[open] { animation: janela-entra var(--tempo-lento) var(--curva); }
@keyframes janela-entra { from { opacity: 0; transform: translateY(var(--esp-5)) scale(var(--aperta)); } }
.janela__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-4); padding: var(--esp-5) var(--esp-5) 0; }
.janela__corpo { display: grid; gap: var(--esp-4); padding: var(--esp-5); }
.janela__pe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-3); padding: 0 var(--esp-5) var(--esp-5); }

/* ---------- aviso (toast) ---------- */
.aviso { position: fixed; z-index: var(--z-aviso); left: 50%; bottom: var(--esp-5); display: flex; align-items: center; gap: var(--esp-3); max-width: calc(100% - var(--esp-6)); padding: var(--esp-3) var(--esp-5); border-radius: var(--raio-2); background: var(--cor-tinta); color: var(--cor-papel); box-shadow: var(--sombra-tinta); opacity: 0; transform: translate(-50%, var(--esp-4)); pointer-events: none; transition: opacity var(--tempo-medio) var(--curva), transform var(--tempo-medio) var(--curva); }
.aviso.e-visivel { opacity: 1; transform: translate(-50%, 0); }
.aviso .icone { color: var(--cor-po); }

/* ---------- estados: carregando, vazio e erro ---------- */
.agenda { position: relative; min-height: var(--altura-agenda); padding: var(--esp-5); }
.agenda__estado { display: none; gap: var(--esp-3); align-content: start; }
.agenda[data-estado="pronto"] .agenda__estado--pronto, .agenda[data-estado="carregando"] .agenda__estado--carregando, .agenda[data-estado="vazio"] .agenda__estado--vazio, .agenda[data-estado="erro"] .agenda__estado--erro { display: grid; }
.horarios { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.esqueleto { height: var(--btn-altura-p); border-radius: var(--raio-pilula); background: linear-gradient(90deg, var(--cor-tinta-a06) 0%, var(--cor-po-a60) 50%, var(--cor-tinta-a06) 100%); background-size: 200% 100%; animation: esqueleto var(--tempo-respira) linear infinite; }
.esqueleto--linha { height: var(--esp-4); border-radius: var(--raio-1); }
@keyframes esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.estado-vazio, .estado-erro { display: grid; gap: var(--esp-3); justify-items: start; }
.estado-erro b { color: var(--cor-framboesa); font-family: var(--letra-titulo); font-weight: var(--peso-normal); font-size: var(--tam-h5); }
.estado-vazio b { font-family: var(--letra-titulo); font-weight: var(--peso-normal); font-size: var(--tam-h5); color: var(--cor-titulo); }
@media (prefers-reduced-motion: reduce) { .esqueleto, .btn .spinner::after { animation: none; } }
[data-movimento="pausado"] .esqueleto { animation-play-state: paused; }
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; max-width: 100%; padding-inline: var(--esp-5); line-height: var(--lh-rotulo); } .ficha-form { padding: var(--esp-4); } }

/* a dica pequena ao lado do aceite */
.campo--aceite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.campo--aceite .campo__erro { flex-basis: 100%; }
.botao-icone--p { width: var(--tam-chamada); height: var(--tam-chamada); }
.icone--p { width: var(--tam-icone-p); height: var(--tam-icone-p); }
.comparativa__aviso { margin-top: var(--esp-3); font-family: var(--letra-rotulo); font-size: var(--tam-pequeno); letter-spacing: var(--tr-rotulo); color: var(--cor-texto); word-spacing: normal; }
/* o foco do cartão de caminho: o contorno vai no cartão (o overflow escondido cortava o do botão) */
.card-hover:has(:focus-visible) { outline: var(--fio-foco) solid var(--cor-foco); outline-offset: var(--recuo-foco); }
.card-hover :focus-visible { outline-offset: calc(var(--recuo-foco) * -2); }
.product-desc { color: var(--cor-texto-2); max-width: var(--medida-frase); }
.photo--alta { min-height: var(--altura-foto); }
.esqueleto--p { width: var(--esqueleto-p); }
.esqueleto--m { width: var(--esqueleto-m); }
.esqueleto--linha { width: var(--esqueleto-linha); }