/* Floralice — site (frontend). Cores do manual de identidade (valores lidos dos vetores do PDF, p.8). */
@font-face { font-family: 'Instrument Serif'; src: url('fontes/instrument-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fontes/instrument-serif-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fontes/instrument-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fontes/instrument-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fontes/instrument-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* Paleta oficial (manual p.8) */
  --terracota: #B3512F;   /* Memória & Afeto */
  --verde: #435935;       /* Vida & Continuidade */
  --bege: #E5D5C0;        /* Leveza & Sofisticação */
  --off: #EFEFEF;         /* Respeito & Pureza */
  --tinta: #0C1926;       /* texto usado sobre as cores claras no manual */
  /* Derivadas da paleta (misturas, sem cor nova) */
  --bege-claro: color-mix(in srgb, var(--bege) 45%, var(--off));
  --tinta-suave: color-mix(in srgb, var(--tinta) 72%, var(--off));
  --linha: color-mix(in srgb, var(--tinta) 16%, var(--off));
  --verde-escuro: color-mix(in srgb, var(--verde) 82%, #000);
  --terracota-escura: color-mix(in srgb, var(--terracota) 84%, #000);
  /* Funções */
  --fundo: var(--off);
  --acao: var(--verde);
  --acao-hover: var(--verde-escuro);
  --foco: var(--verde);
  --erro: var(--terracota-escura);
  /* Tipografia — Instrument Serif é PROVISÓRIA no lugar da Awesome Serif (licença web pendente) */
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-hero: clamp(3rem, 2rem + 5vw, 6rem);
  --t-1: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem);
  --t-2: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
  --t-3: clamp(1.35rem, 1.2rem + .6vw, 1.7rem);
  --raio: 14px;
  --raio-g: 22px;
  --sombra: 0 1px 2px rgb(12 25 38 / .06), 0 8px 24px rgb(12 25 38 / .07);
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 1.0625rem/1.6 var(--sans); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--verde); text-underline-offset: .18em; }
a:hover { color: var(--verde-escuro); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: var(--t-1); }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-3); }
p { margin: 0 0 1em; text-wrap: pretty; }
[hidden] { display: none !important; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; background: var(--verde); color: var(--off); padding: 10px 16px; border-radius: 10px; z-index: 50; }
.pular:focus { top: 12px; color: var(--off); }
.envelope { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.secao { padding-block: clamp(56px, 8vw, 104px); }
.secao--bege { background: var(--bege-claro); }
.secao--terracota { background: var(--terracota); color: var(--off); }
.secao--verde { background: var(--verde); color: var(--off); }
.olho { font: 600 .78rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota); margin-bottom: 14px; }
.secao--terracota .olho, .secao--verde .olho { color: var(--bege); }
.lead { font-size: 1.18rem; color: var(--tinta-suave); max-width: 60ch; }
.secao--terracota .lead, .secao--verde .lead { color: var(--off); }
.centro { text-align: center; margin-inline: auto; }
.centro .lead { margin-inline: auto; }

/* Aviso de estágio */
.aviso-lancamento { background: var(--tinta); color: var(--off); font-size: .9rem; text-align: center; padding: 9px 16px; }
.aviso-lancamento a { color: var(--bege); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 30; background: var(--off); border-bottom: 1px solid var(--linha); }
.topo__barra { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.topo__marca { flex: none; display: block; }
.topo__marca img { width: 196px; }
.nav { margin-left: auto; }
.nav__lista { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav__lista a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .98rem; position: relative; }
.nav__lista a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--terracota); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav__lista a:hover::after, .nav__lista a[aria-current="page"]::after { transform: scaleX(1); }
.nav__lista a[aria-current="page"] { color: var(--terracota-escura); }
.topo__acoes { display: flex; gap: 8px; align-items: center; }
.topo__conta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--tinta); text-decoration: none; font-weight: 500; border-radius: 10px; }
.topo__conta:hover { background: var(--bege-claro); color: var(--tinta); }
.topo__conta svg { width: 20px; }
.menu-botao { display: none; }
@media (max-width: 1080px) {
  .topo__marca img { width: 168px; }
  .menu-botao { display: inline-flex; margin-left: auto; align-items: center; gap: 8px; background: none; border: 1px solid var(--linha); border-radius: 12px; min-height: 44px; padding: 0 14px; font: 500 1rem var(--sans); color: var(--tinta); cursor: pointer; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--off); box-shadow: -16px 0 40px rgb(12 25 38 / .16); padding: 88px 24px 24px; transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; margin: 0; z-index: 40; }
  .nav[data-aberto] { transform: none; visibility: visible; transition: transform .28s ease; }
  .nav__lista { flex-direction: column; gap: 2px; }
  .nav__lista a { font-size: 1.15rem; padding: 14px 12px; }
  .nav__fechar { position: absolute; top: 20px; right: 20px; }
  .topo__acoes .topo__conta span { display: none; }
  .topo__acoes .botao { display: none; }
}
@media (min-width: 1081px) { .nav .nav__fechar { display: none; } }
.veu { position: fixed; inset: 0; background: rgb(12 25 38 / .35); z-index: 35; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--acao); background: var(--acao); color: var(--off); font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.botao:hover { background: var(--acao-hover); border-color: var(--acao-hover); color: var(--off); }
.botao--contorno { background: transparent; color: var(--verde); }
.botao--contorno:hover { background: var(--verde); color: var(--off); }
.botao--claro { background: var(--off); border-color: var(--off); color: var(--verde); }
.botao--claro:hover { background: var(--bege); border-color: var(--bege); color: var(--verde-escuro); }
.botao--texto { background: none; border-color: transparent; color: var(--verde); padding: 0 10px; }
.botao--texto:hover { background: var(--bege-claro); border-color: transparent; color: var(--verde-escuro); }
.botao--perigo { background: var(--terracota-escura); border-color: var(--terracota-escura); }
.botao--perigo:hover { background: color-mix(in srgb, var(--terracota) 70%, #000); border-color: color-mix(in srgb, var(--terracota) 70%, #000); }
.botao--pequeno { min-height: 40px; padding: 0 16px; font-size: .94rem; }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.seta::after { content: '→'; font-weight: 400; }

/* Abertura */
.abertura { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); position: relative; overflow: hidden; }
.abertura__topo { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.abertura h1 { font-size: var(--t-hero); line-height: .95; margin: 0; color: var(--terracota); }
.abertura h1 em { font-style: italic; }
.abertura__texto .apoio { font: 400 var(--t-3)/1.25 var(--serif); margin-bottom: .5em; }
.abertura__texto p { color: var(--tinta-suave); margin: 0; }
@media (max-width: 820px) { .abertura__topo { grid-template-columns: 1fr; gap: 20px; } }

/* Três caminhos */
.caminhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 900px) { .caminhos { grid-template-columns: 1fr; } }
.caminho { display: flex; flex-direction: column; background: var(--off); border-radius: var(--raio-g); overflow: hidden; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra); outline-offset: 4px; transition: transform .25s ease, box-shadow .25s ease; }
.caminho:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(12 25 38 / .06), 0 18px 40px rgb(12 25 38 / .12); color: var(--tinta); }
.caminho__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bege); }
.caminho__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.caminho:hover .caminho__foto img { transform: scale(1.04); }
.caminho__corpo { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.caminho__rotulo { font: 600 .76rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota); }
.caminho h2 { font-size: 1.9rem; margin: 0; }
.caminho p { margin: 0; color: var(--tinta-suave); }
.caminho__acao { margin-top: auto; padding-top: 12px; font-weight: 600; color: var(--verde); display: inline-flex; gap: 8px; }
.caminho__acao::after { content: '→'; transition: transform .2s; }
.caminho:hover .caminho__acao::after { transform: translateX(4px); }
@media (max-width: 900px) { .caminho { flex-direction: row; } .caminho__foto { flex: 0 0 38%; aspect-ratio: auto; } .caminho h2 { font-size: 1.6rem; } }
@media (max-width: 480px) { .caminho { flex-direction: column; } .caminho__foto { aspect-ratio: 16 / 9; } }

/* Legenda de imagem demonstrativa */
.demonstrativa { position: relative; }
.demonstrativa::after { content: 'Imagem demonstrativa'; position: absolute; left: 10px; bottom: 10px; font: 500 .7rem/1 var(--sans); background: rgb(12 25 38 / .62); color: var(--off); padding: 5px 8px; border-radius: 6px; letter-spacing: .02em; }

/* Passos */
.passos { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: passo; }
@media (max-width: 820px) { .passos { grid-template-columns: 1fr; } }
.passos li { counter-increment: passo; padding: 28px; border-radius: var(--raio-g); background: var(--off); border: 1px solid var(--linha); }
.secao--bege .passos li { border-color: transparent; }
.passos li::before { content: counter(passo); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--terracota); color: var(--off); font: 400 1.5rem/1 var(--serif); margin-bottom: 16px; }
.passos h3 { margin-bottom: .3em; }
.passos p { margin: 0; color: var(--tinta-suave); }

/* Blocos de duas colunas */
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.duas--larga { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 860px) { .duas, .duas--larga { grid-template-columns: 1fr; } }
.foto-arredondada { border-radius: var(--raio-g); overflow: hidden; }
.foto-arredondada img { width: 100%; height: 100%; object-fit: cover; }

/* Faixa da frase */
.faixa-frase { position: relative; overflow: hidden; }
.faixa-frase .envelope { position: relative; z-index: 1; }
.faixa-frase blockquote { margin: 0; font: 400 clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem)/1 var(--serif); max-width: 14ch; }
.faixa-frase blockquote span { display: block; font: 400 clamp(1rem, .9rem + .5vw, 1.35rem)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-top: 22px; }
.faixa-frase blockquote strong { font-weight: 600; }
.petalas { position: absolute; right: -6%; top: 50%; width: min(620px, 70vw); transform: translateY(-50%); opacity: .9; pointer-events: none; }
.secao--verde .petalas { opacity: .14; filter: brightness(0); }

/* Cartões genéricos */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.cartao { background: var(--off); border-radius: var(--raio); padding: 24px; border: 1px solid var(--linha); }
.secao--bege .cartao { border-color: transparent; }
.cartao h3 { font-size: 1.45rem; margin-bottom: .35em; }
.cartao p:last-child { margin-bottom: 0; }
.cartao--bege { background: var(--bege-claro); border-color: transparent; }
.lista-check { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.lista-check li { padding-left: 30px; position: relative; }
.lista-check li::before { content: ''; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23EFEFEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lista-nao li::before { background: var(--terracota) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23EFEFEF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Personalidade */
.selos { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 24px 0 0; }
.selos li { background: var(--terracota); color: var(--bege); font: 600 1.15rem/1 var(--sans); padding: 16px 22px; border-radius: 14px; }

/* Perguntas frequentes */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--off); border-radius: var(--raio); border: 1px solid var(--linha); }
.secao--bege .faq details { border-color: transparent; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 var(--sans); color: var(--terracota); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 22px 20px; color: var(--tinta-suave); }
.faq details > div p:last-child { margin: 0; }

/* Formulários */
.form { display: grid; gap: 28px; }
.etapa { border: 0; margin: 0; padding: 28px; background: var(--off); border-radius: var(--raio-g); border: 1px solid var(--linha); display: grid; gap: 18px; min-width: 0; }
.etapa[disabled] { opacity: .5; }
.etapa legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; display: flex; gap: 14px; align-items: baseline; font: 400 var(--t-3)/1.15 var(--serif); }
.etapa legend .num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bege); color: var(--terracota-escura); font: 600 .95rem/1 var(--sans); transform: translateY(-3px); }
.etapa[data-ok] legend .num { background: var(--verde); color: var(--off); }
.etapa > p.ajuda, .ajuda { color: var(--tinta-suave); font-size: .95rem; margin: 0; }
.campo { display: grid; gap: 6px; }
.campo label, .rotulo { font-weight: 600; font-size: .96rem; }
.campo input, .campo select, .campo textarea { width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--tinta); background: #fff; border: 1.5px solid var(--linha); border-radius: 12px; min-height: 48px; padding: 11px 14px; }
.campo textarea { min-height: 104px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde); outline: 2px solid color-mix(in srgb, var(--verde) 25%, transparent); outline-offset: 0; }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.campo .erro { color: var(--erro); font-size: .92rem; font-weight: 500; display: none; }
.campo .erro:not(:empty) { display: block; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: start; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.opcoes--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.opcao { position: relative; display: block; }
.opcao input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcao span { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border: 1.5px solid var(--linha); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.opcao span strong { font-weight: 600; }
.opcao span small { color: var(--tinta-suave); font-size: .9rem; line-height: 1.45; }
.opcao span em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--verde); letter-spacing: .04em; text-transform: uppercase; }
.opcao input:checked + span { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 8%, #fff); box-shadow: inset 0 0 0 1px var(--verde); }
.opcao input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.opcao input:disabled + span { opacity: .5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linha); background: #fff; font-size: .95rem; }
.chip input:checked + span { background: var(--verde); border-color: var(--verde); color: var(--off); }
.chip input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--verde); flex: none; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mensagem { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; font-size: .97rem; }
.mensagem:empty { display: none; }
.mensagem--ok { background: color-mix(in srgb, var(--verde) 12%, var(--off)); color: var(--verde-escuro); }
.mensagem--aviso { background: color-mix(in srgb, var(--terracota) 12%, var(--off)); color: var(--terracota-escura); }
.mensagem--info { background: var(--bege-claro); }

/* Configurador: formulário + resumo */
.configurador { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .configurador { grid-template-columns: 1fr; } }
.resumo { position: sticky; top: 100px; background: var(--verde); color: var(--off); border-radius: var(--raio-g); padding: 26px; display: grid; gap: 16px; }
.resumo h2 { font-size: 1.9rem; margin: 0; }
.resumo dl { margin: 0; display: grid; gap: 10px; }
.resumo dl div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgb(239 239 239 / .18); padding-bottom: 10px; }
.resumo dt { color: color-mix(in srgb, var(--off) 80%, var(--verde)); }
.resumo dd { margin: 0; text-align: right; font-weight: 600; }
.resumo .total { font: 400 2.2rem/1 var(--serif); }
.resumo .regras { font-size: .9rem; color: color-mix(in srgb, var(--off) 86%, var(--verde)); display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.resumo .regras li { padding-left: 18px; position: relative; }
.resumo .regras li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--bege); }
.resumo .botao { width: 100%; }
.resumo .nota { font-size: .82rem; margin: 0; color: color-mix(in srgb, var(--off) 80%, var(--verde)); }
@media (max-width: 980px) { .resumo { position: static; } }

/* Recomendação de planta */
.planta { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 22px; border-radius: var(--raio-g); background: var(--bege-claro); }
.planta__icone { width: 120px; height: 120px; border-radius: 18px; background: var(--off); display: grid; place-items: center; }
.planta__icone img { width: 72px; }
.planta h3 { margin: 0; }
.planta .cientifico { font-style: italic; color: var(--tinta-suave); margin: 0 0 10px; }
.medidor { display: inline-flex; gap: 4px; vertical-align: middle; }
.medidor i { width: 18px; height: 6px; border-radius: 3px; background: var(--linha); }
.medidor i.on { background: var(--terracota); }
@media (max-width: 560px) { .planta { grid-template-columns: 1fr; } }

/* Kit */
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.kit li { background: var(--off); border-radius: var(--raio); padding: 20px; display: grid; gap: 6px; }
.kit li strong { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.1; }
.kit li span { color: var(--tinta-suave); font-size: .95rem; }

/* Estados */
.estado { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem/1 var(--sans); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado--recebido { background: var(--bege); color: var(--tinta); }
.estado--preparacao { background: color-mix(in srgb, var(--terracota) 14%, var(--off)); color: var(--terracota-escura); }
.estado--programado { background: color-mix(in srgb, var(--verde) 12%, var(--off)); color: var(--verde-escuro); }
.estado--concluido { background: var(--verde); color: var(--off); }
.estado--impedimento { background: var(--terracota-escura); color: var(--off); }
.estado--encerrado, .estado--pausado { background: var(--linha); color: var(--tinta); }
.linha-estados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Minha conta */
.conta-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 28px; }
.compromisso { background: var(--terracota); color: var(--off); border-radius: var(--raio-g); padding: clamp(24px, 4vw, 36px); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; position: relative; overflow: hidden; margin-bottom: 28px; }
.compromisso .olho { color: var(--bege); }
.compromisso h2 { margin: 0 0 6px; font-size: var(--t-2); }
.compromisso p { margin: 0; color: var(--bege); }
.compromisso img.petalas { right: -60px; width: 300px; opacity: .2; filter: brightness(0) invert(1); }
@media (max-width: 640px) { .compromisso { grid-template-columns: 1fr; } }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.abas button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 16px; font: 600 1rem var(--sans); color: var(--tinta-suave); cursor: pointer; margin-bottom: -1px; }
.abas button[aria-selected="true"] { color: var(--terracota-escura); border-bottom-color: var(--terracota); }
.painel-conta { display: grid; gap: 20px; }
.servico { background: var(--off); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: clamp(20px, 3vw, 28px); display: grid; gap: 16px; }
.servico__topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: start; }
.servico__topo h3 { margin: 0; }
.servico__topo p { margin: 4px 0 0; color: var(--tinta-suave); }
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 520px; }
.tabela th { text-align: left; font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.registro { font-size: .9rem; color: var(--tinta-suave); }
.vazio { text-align: center; padding: clamp(32px, 6vw, 64px) 24px; background: var(--bege-claro); border-radius: var(--raio-g); display: grid; gap: 14px; justify-items: center; }
.vazio img { width: 84px; opacity: .85; }
.vazio h2 { margin: 0; }
.vazio p { margin: 0; color: var(--tinta-suave); max-width: 52ch; }
.esqueleto { display: grid; gap: 14px; }
.esqueleto i { display: block; height: 92px; border-radius: var(--raio-g); background: linear-gradient(90deg, var(--bege-claro), var(--off), var(--bege-claro)); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
@keyframes brilho { to { background-position: -200% 0; } }
.guia { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.guia div { background: var(--bege-claro); border-radius: 14px; padding: 16px; }
.guia dt { font-weight: 600; margin-bottom: 4px; }
.guia dd { margin: 0; color: var(--tinta-suave); font-size: .95rem; }

/* Diálogo */
dialog { border: 0; border-radius: var(--raio-g); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); color: var(--tinta); background: var(--off); box-shadow: 0 30px 80px rgb(12 25 38 / .3); }
dialog::backdrop { background: rgb(12 25 38 / .45); }
.dialogo { padding: 28px; display: grid; gap: 16px; position: relative; }
.dialogo h2 { font-size: 2rem; margin: 0; padding-right: 40px; }
.dialogo p { margin: 0; }
.dialogo .fechar { position: absolute; top: 16px; right: 16px; }
.botao-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--tinta); cursor: pointer; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; }
.botao-x:hover { background: var(--bege-claro); }

/* Aviso flutuante */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--tinta); color: var(--off); padding: 14px 20px; border-radius: 14px; box-shadow: var(--sombra); z-index: 60; transition: transform .3s ease; max-width: calc(100vw - 32px); }
.toast[data-visivel] { transform: translate(-50%, 0); }

/* Rodapé */
.rodape { background: var(--verde); color: var(--off); padding-block: 64px 28px; position: relative; overflow: hidden; }
.rodape .petalas { right: -120px; top: 40%; width: 640px; opacity: .14; filter: brightness(0); }
.rodape__grade { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 32px; position: relative; z-index: 1; }
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rodape__grade { grid-template-columns: 1fr; } }
.rodape__marca img { width: 210px; }
.rodape h2 { font: 600 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bege); margin: 8px 0 16px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape a { color: var(--off); text-decoration: none; }
.rodape a:hover { color: var(--bege); text-decoration: underline; }
.rodape__base { position: relative; z-index: 1; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgb(239 239 239 / .2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; color: color-mix(in srgb, var(--off) 82%, var(--verde)); }

/* Página interna: abertura */
.abertura-interna { padding-block: clamp(40px, 6vw, 72px); }
.abertura-interna .duas { align-items: center; }
.abertura-interna h1 { color: var(--terracota); font-size: clamp(2.8rem, 2rem + 3.4vw, 5rem); line-height: .98; }
.abertura-interna .foto-arredondada { aspect-ratio: 5 / 4; }
.trilha { font-size: .9rem; color: var(--tinta-suave); margin-bottom: 18px; }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.trilha li + li::before { content: '/'; margin-right: 8px; color: var(--linha); }
.trilha a { color: var(--tinta-suave); }
.marcadores { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; margin: 20px 0 28px; color: var(--tinta-suave); font-size: .97rem; }
.marcadores li { display: flex; align-items: center; gap: 8px; }
.marcadores li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--terracota); }
.prosa { max-width: 70ch; }
.prosa h2 { margin-top: 1.2em; }
.selo-pesquisa { display: inline-flex; gap: 8px; align-items: center; background: var(--bege); color: var(--tinta); font: 600 .76rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.erro-404 { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.erro-404 img { width: 120px; margin: 0 auto 24px; }

/* Utilidades (sem estilo inline: a política de segurança bloqueia) */
.mt { margin-top: 28px; }
.mt-p { margin: 16px 0; }
.h3 { font-size: var(--t-3); }
[data-centro], .erro-404 .botoes { justify-content: center; }
.so-celular { display: none; }
@media (max-width: 1080px) { .so-celular { display: list-item; } }
.secao--verde .cartao, .secao--terracota .cartao { color: var(--tinta); }
.secao--verde .cartao a { color: var(--verde); }
.toast { visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.toast[data-visivel] { visibility: visible; transition: transform .3s ease; }
.compromisso > :not(.petalas) { position: relative; z-index: 1; }
.compromisso img.petalas { opacity: .14; right: -90px; }
[data-interesse], [data-atendimento], [data-cobertura] { display: grid; gap: 16px; align-content: start; }
[data-interesse] .mt-p, [data-atendimento] .mt-p, [data-cobertura] .mt-p { margin: 0; }
.demonstrativa::after { top: 10px; bottom: auto; }
@media (max-width: 700px) {
  .faixa-frase .petalas { width: 260px; top: auto; bottom: -70px; right: -70px; transform: none; }
  .faixa-frase blockquote { padding-bottom: 120px; }
}

/* ===================== v2: emoção e conversão ===================== */
.icone { width: 28px; height: 28px; flex: none; }
.icone--g { width: 44px; height: 44px; }
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.revelar[data-visto] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; } }

/* Abertura com foto em tela cheia */
.hero { position: relative; min-height: min(88vh, 860px); display: grid; align-items: end; color: var(--off); overflow: hidden; isolation: isolate; }
.hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 25 38 / .05) 20%, rgb(12 25 38 / .55) 62%, rgb(12 25 38 / .82) 100%); }
.hero__conteudo { padding-block: 120px clamp(80px, 9vw, 120px); display: grid; gap: 18px; max-width: 760px; }
.hero h1 { color: var(--off); font-size: clamp(3.2rem, 2.2rem + 5vw, 6.6rem); line-height: .92; margin: 0; }
.hero h1 em { color: var(--bege); }
.hero .lead { color: var(--off); font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); max-width: 36ch; }
.hero .botoes .botao--contorno { color: var(--off); border-color: var(--off); }
.hero .botoes .botao--contorno:hover { background: var(--off); color: var(--verde); }
.hero .botao--texto { color: var(--off); }
.hero .botao--texto:hover { background: rgb(239 239 239 / .14); color: var(--off); }
.hero--meia { min-height: min(76vh, 720px); }
.selo-hero { display: inline-flex; gap: 8px; align-items: center; font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bege); }

/* Para quem é o seu carinho (escolha interativa) */
.escolha { background: var(--off); border-radius: var(--raio-g); box-shadow: var(--sombra); margin-top: -64px; position: relative; z-index: 2; padding: clamp(20px, 3vw, 32px); display: grid; gap: 20px; }
.escolha__pergunta { font: 400 var(--t-3)/1.1 var(--serif); margin: 0; }
.escolha__opcoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 860px) { .escolha__opcoes { grid-template-columns: repeat(2, 1fr); } .escolha { margin-top: -40px; } }
.escolha__opcoes button { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 16px; border-radius: 16px; border: 1.5px solid var(--linha); background: #fff; cursor: pointer; font: 600 1rem/1.3 var(--sans); color: var(--tinta); transition: border-color .2s, background .2s, transform .2s; }
.escolha__opcoes button:hover { border-color: var(--terracota); transform: translateY(-2px); }
.escolha__opcoes button[aria-pressed="true"] { border-color: var(--terracota); background: color-mix(in srgb, var(--terracota) 8%, #fff); box-shadow: inset 0 0 0 1px var(--terracota); }
.escolha__opcoes button .icone { color: var(--terracota); }
.escolha__opcoes small { color: var(--tinta-suave); font-size: .86rem; font-weight: 400; }
.escolha__resposta { display: grid; grid-template-columns: 220px 1fr auto; gap: 24px; align-items: center; padding: 18px; border-radius: 16px; background: var(--bege-claro); }
.escolha__resposta img { width: 220px; height: 150px; object-fit: cover; border-radius: 12px; }
.escolha__resposta h3 { margin: 0 0 4px; }
.escolha__resposta p { margin: 0; color: var(--tinta-suave); }
@media (max-width: 760px) { .escolha__resposta { grid-template-columns: 1fr; } .escolha__resposta img { width: 100%; height: 190px; } }

/* Faixa emocional com foto */
.emocao { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.emocao__foto { position: relative; overflow: hidden; min-height: 420px; }
.emocao__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.emocao__texto { display: grid; align-content: center; gap: 18px; padding: clamp(40px, 7vw, 96px); }
.emocao__texto h2 { font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4.2rem); line-height: 1; margin: 0; }
.emocao__texto p { font-size: 1.15rem; margin: 0; max-width: 46ch; }
.emocao--terracota { background: var(--terracota); color: var(--off); }
.emocao--verde { background: var(--verde); color: var(--off); }
.emocao--bege { background: var(--bege-claro); }
.emocao--terracota .olho, .emocao--verde .olho { color: var(--bege); }
.emocao--invertida .emocao__foto { order: 2; }
@media (max-width: 860px) { .emocao { grid-template-columns: 1fr; } .emocao--invertida .emocao__foto { order: 0; } }
.citacao { font: 400 italic clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.15 var(--serif); margin: 0; }

/* Cartões das frentes */
.frentes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .frentes { grid-template-columns: 1fr; } }
.frente { position: relative; border-radius: var(--raio-g); overflow: hidden; min-height: 480px; display: grid; align-items: end; color: var(--off); text-decoration: none; isolation: isolate; }
.frente img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s ease; }
.frente::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgb(12 25 38 / .82)); }
.frente:hover img { transform: scale(1.05); }
.frente:hover { color: var(--off); }
.frente__corpo { padding: 26px; display: grid; gap: 8px; }
.frente__corpo .caminho__rotulo { color: var(--bege); }
.frente__corpo h3 { font-size: 2.3rem; margin: 0; }
.frente__corpo p { margin: 0; }
.frente__corpo .caminho__acao { color: var(--bege); }

/* Kit interativo */
.kit-interativo { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: stretch; }
@media (max-width: 900px) { .kit-interativo { grid-template-columns: 1fr; } }
.kit-itens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 560px) { .kit-itens { grid-template-columns: repeat(2, 1fr); } }
.kit-itens button { width: 100%; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 10px; padding: 12px; border-radius: 18px; border: 1.5px solid transparent; background: var(--off); color: var(--terracota); cursor: pointer; font: 600 .86rem/1.2 var(--sans); text-align: center; transition: transform .2s, border-color .2s, background .2s; }
.kit-itens button span { color: var(--tinta); }
.kit-itens button:hover { transform: translateY(-3px); }
.kit-itens button[aria-selected="true"] { border-color: var(--terracota); background: #fff; box-shadow: var(--sombra); }
.kit-itens button[data-destaque] { background: var(--verde); color: var(--bege); }
.kit-itens button[data-destaque] span { color: var(--off); }
.kit-itens button[data-destaque][aria-selected="true"] { box-shadow: 0 0 0 3px var(--bege), var(--sombra); }
.kit-detalhe { background: var(--off); border-radius: var(--raio-g); padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; align-content: start; }
.kit-detalhe .icone--g { color: var(--terracota); }
.kit-detalhe h3 { margin: 0; font-size: 2rem; }
.kit-detalhe p { margin: 0; color: var(--tinta-suave); }
.kit-detalhe .significado { font: 400 italic 1.25rem/1.35 var(--serif); color: var(--tinta); border-left: 3px solid var(--terracota); padding-left: 14px; }
.kit-detalhe img { border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Ritual de plantar */
.ritual { list-style: none; padding: 0; margin: 40px 0 0; display: grid; position: relative; max-width: 760px; }
.ritual::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 40px; width: 2px; background: rgb(229 213 192 / .35); }
.ritual li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 36px; position: relative; }
.ritual .marco { width: 56px; height: 56px; border-radius: 50%; background: var(--verde-escuro); color: var(--bege); display: grid; place-items: center; position: relative; z-index: 1; transition: background .6s, color .6s; border: 2px solid var(--bege); }
.ritual li[data-visto] .marco { background: var(--bege); color: var(--verde); }
.ritual h3 { margin: 6px 0 6px; }
.ritual p { margin: 0; max-width: 56ch; }
.ritual .porque { font: 400 italic 1.2rem/1.4 var(--serif); color: var(--bege); margin-top: 8px; }

/* Destaque do aditivo */
.aditivo { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; background: var(--terracota); color: var(--off); border-radius: var(--raio-g); padding: clamp(28px, 5vw, 56px); position: relative; overflow: hidden; }
.aditivo__selo { width: clamp(150px, 18vw, 210px); aspect-ratio: 1; border-radius: 50%; background: var(--bege); color: var(--terracota-escura); display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 22px; border: 6px double var(--terracota); box-shadow: 0 0 0 6px var(--bege); }
.aditivo__selo strong { font: 400 1.45rem/1 var(--serif); display: block; }
.aditivo__selo span { font: 600 .66rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.aditivo h2 { margin: 0 0 10px; }
.aditivo .olho { color: var(--bege); }
.aditivo p { color: var(--off); }
.aditivo .lista-check li::before { background-color: var(--verde); }
@media (max-width: 700px) { .aditivo { grid-template-columns: 1fr; justify-items: start; } }

/* Planos */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; }
.plano { background: var(--off); border: 1.5px solid var(--linha); border-radius: var(--raio-g); padding: 30px 28px; display: grid; gap: 14px; align-content: start; position: relative; }
.plano--destaque { border-color: var(--terracota); box-shadow: var(--sombra); }
.plano__selo { position: absolute; top: -13px; left: 24px; background: var(--terracota); color: var(--off); font: 600 .74rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.plano h3 { margin: 0; font-size: 2rem; }
.plano .preco { font: 400 2.6rem/1 var(--serif); color: var(--terracota-escura); margin: 0; }
.plano .preco small { font: 500 1rem var(--sans); color: var(--tinta-suave); }
.plano .botao { margin-top: auto; }

/* Plaquinha com nome (prévia ao vivo) */
.plaquinha { display: grid; grid-template-columns: 1fr 64px; width: min(440px, 100%); aspect-ratio: 1.7; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px rgb(12 25 38 / .18); transform: rotate(-3deg); background: var(--bege); transition: transform .4s ease; }
.plaquinha:hover { transform: rotate(0deg) scale(1.02); }
.plaquinha__frente { display: grid; align-content: center; justify-items: center; gap: 8px; padding: 18px; text-align: center; }
.plaquinha__frente img { width: 46px; }
.plaquinha__titulo { font: 600 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--verde); }
.plaquinha__nome { font: 400 italic clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem)/1 var(--serif); color: var(--terracota-escura); overflow-wrap: anywhere; }
.plaquinha__data { font: 500 .82rem/1.3 var(--sans); color: var(--tinta-suave); min-height: 1.1em; }
.plaquinha__faixa { background: var(--verde); color: var(--bege); writing-mode: vertical-rl; transform: rotate(180deg); display: grid; place-items: center; font: 400 italic 1.05rem var(--serif); }
.memorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .memorial { grid-template-columns: 1fr; } }
.memorial__palco { display: grid; place-items: center; gap: 24px; padding: 48px 16px; border-radius: var(--raio-g); background: var(--bege-claro); min-height: 380px; }
.memorial__palco .ajuda { text-align: center; }

/* Duas vertentes de homenagem */
.vertentes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .vertentes { grid-template-columns: 1fr; } }
.vertente { border-radius: var(--raio-g); overflow: hidden; background: var(--off); display: grid; grid-template-rows: 320px auto; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra); transition: transform .3s ease; }
.vertente:hover { transform: translateY(-4px); color: var(--tinta); }
.vertente img { width: 100%; height: 100%; object-fit: cover; }
.vertente__corpo { padding: 28px; display: grid; gap: 10px; }
.vertente__corpo h3 { margin: 0; font-size: 2.1rem; }
.vertente__corpo p { margin: 0; color: var(--tinta-suave); }

/* Galeria */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 12px; }
.galeria figure { margin: 0; border-radius: 16px; overflow: hidden; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.galeria figure:hover img { transform: scale(1.04); }
.galeria .alta { grid-row: span 2; }
.galeria .larga { grid-column: span 2; }
@media (max-width: 760px) { .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } }

/* Loja */
.loja-topo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros button { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linha); background: #fff; font: 500 .95rem var(--sans); color: var(--tinta); cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--off); }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.produto { background: var(--off); border-radius: var(--raio-g); overflow: hidden; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--linha); }
.produto__foto { aspect-ratio: 1; overflow: hidden; background: var(--bege); position: relative; }
.produto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.produto:hover .produto__foto img { transform: scale(1.04); }
.produto__corpo { padding: 18px; display: grid; gap: 8px; align-content: start; }
.produto__corpo h3 { margin: 0; font-size: 1.55rem; }
.produto__corpo p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }
.produto__rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.produto__preco { font: 400 1.6rem/1 var(--serif); }
.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.trilho > * { scroll-snap-align: start; }
.rotulo-ilustracao { position: absolute; left: 10px; top: 10px; font: 500 .7rem/1 var(--sans); background: rgb(12 25 38 / .62); color: var(--off); padding: 5px 8px; border-radius: 6px; }

/* Sacola */
.topo__sacola { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--tinta); cursor: pointer; }
.topo__sacola:hover { background: var(--bege-claro); }
.topo__sacola svg { width: 24px; height: 24px; }
.topo__sacola [data-contador] { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--terracota); color: var(--off); font: 600 .72rem/20px var(--sans); text-align: center; }
.topo__sacola [data-contador="0"] { display: none; }
.gaveta { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); background: var(--off); z-index: 45; box-shadow: -20px 0 50px rgb(12 25 38 / .2); display: grid; grid-template-rows: auto 1fr auto; transform: translateX(105%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.gaveta[data-aberta] { transform: none; visibility: visible; transition: transform .3s ease; }
.gaveta__topo { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--linha); }
.gaveta__topo h2 { margin: 0; font-size: 1.9rem; }
.gaveta__itens { overflow-y: auto; padding: 16px 24px; display: grid; gap: 16px; align-content: start; }
.gaveta__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; }
.gaveta__item img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--bege); }
.gaveta__item h3 { font-size: 1.2rem; margin: 0; }
.gaveta__item p { margin: 0; font-size: .88rem; color: var(--tinta-suave); }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; }
.qtd button { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--tinta); border-radius: 50%; }
.qtd span { min-width: 22px; text-align: center; font-weight: 600; }
.gaveta__rodape { padding: 20px 24px; border-top: 1px solid var(--linha); display: grid; gap: 12px; }
.gaveta__total { display: flex; justify-content: space-between; font: 400 1.6rem var(--serif); }
.gaveta .vazio { background: none; padding: 32px 0; }

/* Barra de ação fixa no celular */
.barra-acao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--off); border-top: 1px solid var(--linha); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: none; gap: 10px; align-items: center; justify-content: space-between; box-shadow: 0 -8px 24px rgb(12 25 38 / .08); }
.barra-acao strong { font: 400 1.25rem var(--serif); display: block; }
.barra-acao small { display: block; color: var(--tinta-suave); font-size: .8rem; }
@media (max-width: 760px) { .barra-acao { display: flex; } body:has(.barra-acao) .rodape { padding-bottom: 104px; } body:has(.barra-acao) .toast { bottom: 88px; } }

/* Fala da marca */
.manifesto { font: 400 clamp(2rem, 1.4rem + 2.4vw, 3.6rem)/1.08 var(--serif); max-width: 22ch; margin: 0 auto; text-align: center; }
.manifesto em { color: var(--terracota); }
.botao--claro-contorno { background: transparent; border-color: var(--off); color: var(--off); }
.botao--claro-contorno:hover { background: var(--off); border-color: var(--off); color: var(--terracota-escura); }
.passos--lista { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
.passos--lista li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 18px; }
.passos--lista li::before { grid-row: span 2; margin: 0; }
.passos--lista h3 { margin: 0; font-size: 1.35rem; }
/* ajustes v2: menu enxuto e abertura sem cobrir rostos */
.nav__lista a, .topo__conta { white-space: nowrap; }
@media (max-width: 1360px) { .topo__acoes .topo__conta span { display: none; } }
.hero h1 { font-size: clamp(2.6rem, 1.9rem + 3.2vw, 5rem); line-height: .96; max-width: 16ch; }
.hero__conteudo { max-width: 820px; gap: 14px; padding-block: 160px 96px; }
.hero::before { background: linear-gradient(180deg, transparent 38%, rgb(12 25 38 / .5) 64%, rgb(12 25 38 / .86) 100%); }
.hero > img { object-position: center 22%; }
/* Abertura dividida: texto num bloco de cor, foto inteira ao lado */
.hero-dividido { display: grid; grid-template-columns: 1fr 1fr; min-height: min(84vh, 820px); background: var(--verde); color: var(--off); }
.hero-dividido--terracota { background: var(--terracota); }
.hero-dividido__texto { display: grid; align-content: center; gap: 18px; padding: clamp(40px, 6vw, 96px) clamp(16px, 5vw, 80px); }
.hero-dividido h1 { color: var(--off); font-size: clamp(2.6rem, 1.9rem + 3vw, 4.8rem); line-height: .96; margin: 0; }
.hero-dividido h1 em { color: var(--bege); }
.hero-dividido .lead { color: var(--off); }
.hero-dividido .botao--contorno { color: var(--off); border-color: var(--off); }
.hero-dividido .botao--contorno:hover { background: var(--off); color: var(--verde); }
.hero-dividido .botao { --x: 0; }
.hero-dividido__foto { position: relative; overflow: hidden; min-height: 420px; }
.hero-dividido__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .hero-dividido { grid-template-columns: 1fr; } .hero-dividido__foto { order: -1; min-height: 56vh; } }
.hero-dividido .botao:not(.botao--contorno) { background: var(--off); border-color: var(--off); color: var(--verde); }
.hero-dividido--terracota .botao:not(.botao--contorno) { color: var(--terracota-escura); }
.hero-dividido .botao:not(.botao--contorno):hover { background: var(--bege); border-color: var(--bege); }
@media (max-width: 480px) {
  .topo__barra { gap: 8px; }
  .topo__marca img { width: 138px; }
  .menu-botao { padding: 0 10px; }
  .topo__acoes { gap: 2px; }
}

.kit-itens { align-content: start; }
.barra-acao { transition: transform .3s ease; }
.barra-acao[data-escondida] { transform: translateY(110%); }

/* ===================== v2.1: revisão de UI/UX e acessibilidade ===================== */
/* Contraste: rótulos pequenos em terracota escuro (o terracota puro dá 4,4:1 em texto pequeno) */
.olho, .caminho__rotulo, .marcadores li::before { color: var(--terracota-escura); }
.secao--terracota .olho, .secao--verde .olho, .emocao--terracota .olho, .emocao--verde .olho, .aditivo .olho, .compromisso .olho, .frente__corpo .caminho__rotulo { color: var(--bege); }
/* Alvos de toque de 44 px */
.botao--pequeno { min-height: 44px; }
.chip span, .filtros button { min-height: 44px; }
.qtd button { width: 44px; height: 44px; }
.check input { width: 24px; height: 24px; }

/* Barra de aviso com atalhos de ajuda */
.aviso-lancamento { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.aviso-lancamento p { margin: 0; }
.aviso-lancamento__ajuda a { color: var(--off); }
@media (max-width: 640px) { .aviso-lancamento__ajuda { display: none; } }

/* Abertura da página inicial: foto inteira, nenhum texto por cima dos rostos */
.abertura-familia { position: relative; overflow: hidden; padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 48px); }
.abertura-familia .petalas { right: auto; left: -180px; top: -120px; width: 520px; opacity: .08; transform: none; }
.abertura-familia__grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 56px); align-items: center; position: relative; }
.abertura-familia h1 { font-size: clamp(2.8rem, 2rem + 3.4vw, 5.2rem); line-height: .95; color: var(--terracota); margin: 0 0 18px; }
.abertura-familia h1 em { color: var(--verde); }
.abertura-familia .lead { margin-bottom: 24px; }
.abertura-familia__foto { margin: 0; border-radius: var(--raio-g); overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--sombra); }
.abertura-familia__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .abertura-familia__grade { grid-template-columns: 1fr; } .abertura-familia__foto { order: -1; } }
.garantias { list-style: none; padding: 0; margin: clamp(24px, 4vw, 40px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.garantias li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--bege-claro); font-size: .95rem; line-height: 1.35; }
.garantias .icone { color: var(--terracota-escura); }
@media (max-width: 1000px) { .garantias { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .garantias { grid-template-columns: 1fr; } }
.escolha { margin-top: 0; }

/* Mosaico sem corte: cada foto na sua proporção natural */
.mosaico { columns: 2 320px; column-gap: 16px; }
.mosaico figure { margin: 0 0 16px; break-inside: avoid; border-radius: 16px; overflow: hidden; }
.mosaico img { width: 100%; height: auto; }

/* Fotos de grupo em blocos de emoção: proporção natural, sem esticar */
.emocao--grupo .emocao__foto { min-height: 0; display: grid; align-items: center; padding: clamp(16px, 3vw, 40px); }
.emocao--grupo .emocao__foto img { position: static; aspect-ratio: 3 / 2; height: auto; border-radius: var(--raio-g); }
.emocao__foto img, .frente img, .vertente img, .hero-dividido__foto img { transition: object-position .2s; }
.vertente { grid-template-rows: 380px auto; }
@media (max-width: 860px) { .vertente { grid-template-rows: 420px auto; } }

/* Depois da compra (Cultivar) */
.jornada { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: j; }
.jornada li { background: var(--bege-claro); border-radius: var(--raio); padding: 20px; position: relative; }
.jornada span { display: inline-block; font: 600 .76rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--off); background: var(--verde); padding: 6px 10px; border-radius: 999px; margin-bottom: 12px; }
.jornada h3 { font-size: 1.35rem; margin: 0 0 6px; }
.jornada p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }
@media (max-width: 1000px) { .jornada { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .jornada { grid-template-columns: 1fr; } }
.info-linha { list-style: none; padding: 18px 20px; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; border: 1px solid var(--linha); border-radius: var(--raio); font-size: .95rem; }

/* Produto: abrir detalhes */
.produto__abrir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.produto__abrir:focus-visible { outline-offset: -3px; }
.detalhes-produto { display: grid; gap: 12px; }
.detalhes-produto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--bege); }
.detalhes-produto dl { margin: 0; display: grid; gap: 8px; }
.detalhes-produto dt { font-weight: 600; }
.detalhes-produto dd { margin: 0 0 4px; color: var(--tinta-suave); }
/* Contraste AA sobre terracota: off-white dá 4,42:1 e bege 3,53:1 em texto pequeno; usamos branco (5,08:1).
   Bege fica só em texto grande (títulos em itálico, selos em negrito a partir de 19px). */
:root { --sobre-terracota: #FFFFFF; }
.secao--terracota, .emocao--terracota, .hero-dividido--terracota, .aditivo, .compromisso { color: var(--sobre-terracota); }
.secao--terracota .lead, .emocao--terracota p, .hero-dividido--terracota .lead, .hero-dividido--terracota p, .aditivo p, .aditivo li, .compromisso p { color: var(--sobre-terracota); }
.secao--terracota .olho, .emocao--terracota .olho, .hero-dividido--terracota .selo-hero, .aditivo .olho, .compromisso .olho { color: var(--sobre-terracota); }
.hero-dividido--terracota .botao--contorno, .botao--claro-contorno { color: var(--sobre-terracota); border-color: var(--sobre-terracota); }
.faixa-frase blockquote span { font-weight: 600; letter-spacing: .06em; }
.selos li { font-size: 1.2rem; }
.plano__selo { background: var(--terracota-escura); }
.rotulo-ilustracao { background: rgb(12 25 38 / .92); }

/* ===================== Aberturas criativas (A · Jardim, B · Nome) ===================== */
.comparar-aberturas { position: fixed; left: 16px; bottom: 16px; z-index: 26; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--tinta); color: var(--off); font: 500 .85rem var(--sans); box-shadow: var(--sombra); }
.comparar-aberturas a { color: var(--off); text-decoration: none; padding: 10px 14px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.comparar-aberturas a[aria-current] { background: var(--off); color: var(--tinta); font-weight: 600; }
.comparar-aberturas span { margin-right: 6px; opacity: .8; }
@media (max-width: 520px) { .comparar-aberturas span { display: none; } }

/* Pétala genérica: ancorada no centro da flor, girada pelo ângulo --a */
.petala { position: absolute; left: 50%; top: 50%; width: var(--pw); height: var(--pl); margin-left: calc(var(--pw) / -2); margin-top: calc(var(--pl) * -1); transform-origin: 50% 100%; transform: rotate(calc(var(--a) + 90deg)); padding: 0; border: 0; background: none; cursor: pointer; }
.petala__forma { position: absolute; inset: 0; border-radius: 50% 50% 50% 50% / 34% 34% 66% 66%; background: var(--terracota); transition: background .3s, transform .3s; transform-origin: 50% 100%; }
.petala--deco { cursor: default; pointer-events: none; }
.petala--deco .petala__forma { background: color-mix(in srgb, var(--terracota) 55%, var(--bege)); transform: scale(.82); }
.petala:hover .petala__forma, .petala:focus-visible .petala__forma { transform: scale(1.07); }
.petala[aria-pressed="true"] .petala__forma { background: var(--verde); transform: scale(1.1); }
.petala:focus-visible { outline: none; }
.petala:focus-visible .petala__forma { box-shadow: 0 0 0 3px var(--off), 0 0 0 6px var(--verde); }
.petala__nome { position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%) rotate(calc(-1 * (var(--a) + 90deg))); white-space: nowrap; font: 600 .84rem/1 var(--sans); color: var(--tinta); background: var(--off); padding: 8px 12px; border-radius: 999px; box-shadow: 0 4px 14px rgb(12 25 38 / .14); }
.petala[aria-pressed="true"] .petala__nome { background: var(--tinta); color: var(--off); }
@keyframes desabrochar { from { scale: 0; opacity: 0; } 60% { opacity: 1; } to { scale: 1; opacity: 1; } }
.florescendo .petala { animation: desabrochar .9s cubic-bezier(.2, .8, .2, 1.2) both; animation-delay: calc(var(--i) * 70ms); }
@media (prefers-reduced-motion: reduce) { .florescendo .petala { animation: none; } }

/* A · Jardim */
.abertura-jardim { padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 48px); overflow: hidden; }
.abertura-jardim__grade { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.titulo-abertura { font: 400 clamp(2.8rem, 2rem + 3.4vw, 5.2rem)/.95 var(--serif); color: var(--terracota); margin: 0 0 18px; }
.titulo-abertura em { color: var(--verde); }
.zinia { --S: min(600px, 88vw); --pl: calc(var(--S) * .4); --pw: calc(var(--pl) * .42); position: relative; width: var(--S); height: calc(var(--S) * 1.18); margin-inline: auto; }
.zinia__flor { position: absolute; left: 0; top: 0; width: var(--S); height: var(--S); z-index: 1; }
.zinia__miolo { position: absolute; left: 50%; top: 50%; width: calc(var(--S) * .2); height: calc(var(--S) * .2); transform: translate(-50%, -50%); border-radius: 50%; background: var(--verde); display: grid; place-items: center; z-index: 2; box-shadow: 0 0 0 8px var(--off); }
.zinia__miolo img { width: 56%; }
.zinia__caule { position: absolute; left: 50%; top: 50%; width: 6px; height: calc(var(--S) * .66); margin-left: -3px; background: var(--verde); border-radius: 3px; }
.zinia__folha { position: absolute; top: calc(var(--S) * .95); width: calc(var(--S) * .2); height: calc(var(--S) * .11); background: var(--verde); }
.zinia__folha--e { right: 50%; border-radius: 100% 0 0 0 / 100% 0 0 0; margin-right: 6px; }
.zinia__folha--d { left: 50%; border-radius: 0 100% 0 0 / 0 100% 0 0; margin-left: 6px; }
.jardim-painel { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: start; background: var(--bege-claro); border-radius: var(--raio-g); padding: 18px; min-height: 196px; margin-top: 8px; }
.jardim-painel__foto img { width: 132px; height: 160px; object-fit: cover; border-radius: 14px; }
.jardim-painel__texto h2 { font-size: 2rem; margin: 0 0 6px; }
.jardim-painel__texto p { margin: 0 0 12px; color: var(--tinta-suave); }
.jardim-painel__texto .olho { margin: 0 0 6px; }
.jardim-painel.entrando { animation: entrar .45s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) { .abertura-jardim__grade { grid-template-columns: 1fr; } .zinia { order: -1; --S: min(520px, 92vw); } }
@media (max-width: 480px) { .jardim-painel { grid-template-columns: 1fr; } .jardim-painel__foto img { width: 100%; height: 180px; } .petala__nome { font-size: .74rem; padding: 7px 9px; } }

/* B · Nome */
.abertura-nome { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 80px) clamp(28px, 4vw, 48px); text-align: center; isolation: isolate; }
.abertura-nome__flor { --S: min(1000px, 150vw); --pl: calc(var(--S) * .4); --pw: calc(var(--pl) * .42); position: absolute; left: 50%; top: clamp(120px, 16vw, 210px); width: var(--S); height: var(--S); transform: translate(-50%, -50%); z-index: -1; opacity: .13; pointer-events: none; }
.abertura-nome__flor .petala__forma { background: var(--terracota); transform: none; }
.abertura-nome__conteudo { display: grid; justify-items: center; gap: 10px; }
.nome-form { display: grid; justify-items: center; gap: 12px; width: 100%; }
.nome-pergunta { font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1.1 var(--serif); color: var(--tinta); }
.nome-campo { position: relative; width: min(900px, 100%); }
.nome-campo input { width: 100%; border: 0; border-bottom: 2px solid var(--terracota); background: transparent; text-align: center; font: italic 400 clamp(3rem, 2rem + 5.4vw, 7.4rem)/1.1 var(--serif); color: var(--terracota-escura); padding: 4px 8px 10px; border-radius: 0; }
.nome-campo input::placeholder { color: color-mix(in srgb, var(--terracota) 70%, var(--off)); opacity: 1; }
.nome-campo input:focus { outline: none; border-bottom-color: var(--verde); }
.nome-campo input:focus-visible { box-shadow: 0 6px 0 -2px var(--verde); }
.nome-para { border: 0; margin: 8px 0 0; padding: 4px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: var(--bege-claro); border-radius: 999px; }
.nome-para label { position: relative; }
.nome-para input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nome-para span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 600 .95rem var(--sans); color: var(--tinta); transition: background .2s, color .2s; }
.nome-para input:checked + span { background: var(--verde); color: var(--off); }
.nome-para input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.nome-ofertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; margin-top: clamp(20px, 3vw, 36px); text-align: left; }
@media (max-width: 900px) { .nome-ofertas { grid-template-columns: 1fr; } }
.oferta-nome { display: grid; grid-template-rows: auto 1fr; background: var(--off); border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra); transition: transform .25s ease, box-shadow .25s ease; animation: entrar .5s ease both; }
.oferta-nome:nth-child(2) { animation-delay: .08s; } .oferta-nome:nth-child(3) { animation-delay: .16s; }
.oferta-nome:hover { transform: translateY(-4px); color: var(--tinta); }
.oferta-nome__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bege); }
.oferta-nome__foto img { width: 100%; height: 100%; object-fit: cover; }
.oferta-nome__corpo { display: grid; gap: 8px; padding: 18px 20px 20px; align-content: start; }
.oferta-nome__rotulo { font: 600 .76rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-escura); }
.oferta-nome__titulo { font: 400 1.65rem/1.1 var(--serif); }
.oferta-nome__titulo em { color: var(--terracota-escura); }
.oferta-nome__texto { color: var(--tinta-suave); font-size: .95rem; }
.oferta-nome__rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.oferta-nome__preco { font: 600 .92rem var(--sans); }
.oferta-nome__acao { font-weight: 600; color: var(--verde); display: inline-flex; gap: 6px; }
.oferta-nome__acao::after { content: '→'; transition: transform .2s; }
.oferta-nome:hover .oferta-nome__acao::after { transform: translateX(4px); }
@media (max-width: 900px) { .oferta-nome { grid-template-columns: 38% 1fr; grid-template-rows: none; } .oferta-nome__foto { aspect-ratio: auto; } }
@media (max-width: 480px) { .oferta-nome { grid-template-columns: 1fr; } .oferta-nome__foto { aspect-ratio: 16 / 9; } }

/* História: o nome */
.nome-origem { display: grid; justify-items: center; gap: 18px; margin: 12px auto 8px; text-align: center; }
.nome-origem__nomes { display: flex; gap: 18px; align-items: baseline; font: italic 400 clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem)/1 var(--serif); color: var(--tinta); }
.nome-origem__e { color: var(--terracota-escura); font-style: normal; }
.nome-origem__seta { width: 2px; height: 48px; background: linear-gradient(var(--linha), var(--terracota)); }
.nome-origem__marca { font: 400 clamp(4rem, 2.4rem + 8vw, 9rem)/.9 var(--serif); letter-spacing: -.02em; }
.nome-origem__marca .flor { color: var(--verde); }
.nome-origem__marca .alice { color: var(--terracota); font-style: italic; }
.mosaico--2 { columns: 2 200px; }
.frase-grande { font: 400 clamp(2.2rem, 1.5rem + 3vw, 4.4rem)/1.02 var(--serif); max-width: 20ch; color: var(--off); margin: 0; }
.frase-grande em { color: var(--bege); }

/* Ajustes das aberturas */
.abertura-nome__flor { opacity: .07; }
@media (max-width: 640px) {
  .nome-para { border-radius: 22px; display: grid; width: 100%; }
  .nome-para span { justify-content: center; width: 100%; }
  .comparar-aberturas { position: static; margin: 12px auto 0; width: fit-content; }
}

/* Três gerações */
.geracoes { list-style: none; padding: 0; margin: 36px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 900px; position: relative; }
.geracoes::before { content: ''; position: absolute; left: 16%; right: 16%; top: 30px; height: 2px; background: linear-gradient(90deg, var(--terracota), var(--verde)); }
.geracoes li { display: grid; justify-items: center; gap: 6px; text-align: center; position: relative; }
.geracoes li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--terracota); box-shadow: 0 0 0 6px var(--bege-claro); margin: 22px 0 10px; }
.geracoes li:nth-child(2)::before { background: color-mix(in srgb, var(--terracota) 50%, var(--verde)); }
.geracoes li:nth-child(3)::before { background: var(--verde); }
.geracoes__nome { font: italic 400 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--serif); color: var(--tinta); }
.geracoes__antes { color: var(--tinta-suave); font-size: .95rem; text-decoration: line-through; text-decoration-color: var(--terracota); }
.geracoes__hoje { font: 600 .82rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--off); background: var(--verde); padding: 8px 12px; border-radius: 999px; }
@media (max-width: 560px) { .geracoes { grid-template-columns: 1fr; gap: 18px; } .geracoes::before { left: 50%; right: auto; width: 2px; top: 30px; bottom: 30px; height: auto; background: linear-gradient(var(--terracota), var(--verde)); } }
.nome-origem__fontes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 760px; width: 100%; }
.nome-origem__fontes span { padding-top: 14px; border-top: 3px solid; font-size: 1.02rem; color: var(--tinta-suave); }
.nome-origem__fontes strong { font: 400 1.5rem/1 var(--serif); display: block; margin-bottom: 4px; }
.fonte-flor { border-color: var(--verde) !important; text-align: right; }
.fonte-flor strong { color: var(--verde); }
.fonte-alice { border-color: var(--terracota) !important; text-align: left; }
.fonte-alice strong { color: var(--terracota-escura); font-style: italic; }
.geracoes__papel { color: var(--tinta-suave); font-size: .92rem; max-width: 24ch; margin-top: 4px; }
@media (max-width: 560px) { .nome-origem__fontes { grid-template-columns: 1fr; } .fonte-flor, .fonte-alice { text-align: center; } }
.geracoes li { align-content: start; }
.titulo-secao-centro { text-align: center; margin-inline: auto; max-width: 22ch; }
.secao--terracota .frase-grande, .faixa-frase .frase-grande { color: var(--sobre-terracota, #fff); }
.secao--verde .frase-grande { color: var(--off); }
.faixa-frase .botoes { position: relative; z-index: 1; }


/* Mockup interativo do kit */
.kit-interativo--cena { grid-template-columns: 1.35fr .65fr; align-items: start; }
@media (max-width: 1000px) { .kit-interativo--cena { grid-template-columns: 1fr; } }
.kit-personalizar { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin-bottom: 14px; }
.kit-personalizar label { font: 400 1.5rem var(--serif); }
.kit-personalizar input { font: italic 400 1.4rem var(--serif); color: var(--terracota-escura); border: 0; border-bottom: 2px solid var(--terracota); background: transparent; padding: 6px 4px; min-height: 44px; }
.kit-personalizar input:focus { outline: none; border-bottom-color: var(--verde); }
.kit-personalizar .ajuda { grid-column: 1 / -1; }
@media (max-width: 560px) { .kit-personalizar { grid-template-columns: 1fr; } }
.cena { width: 100%; height: auto; display: block; border-radius: 22px; }
.cena__mesa { fill: var(--off); }
.cena__sombras ellipse { fill: rgb(12 25 38 / .08); }
.cena__marca { font: 400 19px var(--serif); letter-spacing: .04em; }
.cena__assinatura { font: 600 7.5px var(--sans); letter-spacing: .14em; }
.cena__gravado { font: italic 400 22px var(--serif); }
.cena__titulo-livro { font: 400 26px var(--serif); }
.cena__nome-livro { font: italic 400 30px var(--serif); }
.cena__nome-plaquinha { font: italic 400 24px var(--serif); }
.cena__rotulo-frasco { font: 400 21px var(--serif); }
.cena__item { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1.2), opacity .3s, filter .3s; outline: none; }
.cena__item:hover { transform: translateY(-8px) scale(1.03); filter: drop-shadow(0 14px 16px rgb(12 25 38 / .18)); }
.cena__item:focus-visible { filter: drop-shadow(0 0 4px #435935) drop-shadow(0 0 2px #435935); }
.tem-ativo .cena__item:not(.ativo) { opacity: .55; }
.tem-ativo .cena__item:not(.ativo):hover { opacity: .9; }
.cena__item.ativo { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 16px 18px rgb(12 25 38 / .22)); }
.pino circle { fill: var(--verde); stroke: var(--off); stroke-width: 3; }
.pino path { stroke: var(--off); stroke-width: 3; stroke-linecap: round; }
.pino { animation: pulsar 2.4s ease-in-out infinite; pointer-events: none; }
.pino:nth-child(2n) { animation-delay: .6s; }
.pino:nth-child(3n) { animation-delay: 1.2s; }
@keyframes pulsar { 0%, 100% { opacity: .95; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .pino { animation: none; } .cena__item { transition: none; } }
.kit-lateral { display: grid; gap: 14px; position: sticky; top: 100px; }
@media (max-width: 1000px) { .kit-lateral { position: static; } }
.kit-itens--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-itens--chips button { width: auto; aspect-ratio: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 600 .9rem var(--sans); color: var(--tinta); background: var(--off); border: 1.5px solid var(--linha); display: inline-flex; }
.kit-itens--chips button[aria-selected="true"] { background: var(--terracota-escura); border-color: var(--terracota-escura); color: #fff; box-shadow: none; }
.kit-itens--chips button[data-destaque] { background: var(--verde); border-color: var(--verde); color: var(--off); }
.kit-detalhe .cena--zoom { background: var(--off); border-radius: 14px; max-height: 300px; }
.kit-detalhe .cena--zoom .cena__mesa { fill: var(--bege-claro); }
.comparar-aberturas { left: auto; right: 16px; }

/* Quatro gerações: a quarta em destaque, florescendo */
.geracoes--4 { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }
.geracoes--4::before { left: 12%; right: 12%; }
.geracoes__nova::before { background: var(--off) !important; border: 3px solid var(--verde); box-sizing: border-box; animation: brotar 2.4s ease-in-out infinite; }
.geracoes__nova .geracoes__nome { color: var(--verde); }
.geracoes__nova .geracoes__antes { text-decoration: none; }
@keyframes brotar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .geracoes__nova::before { animation: none; } }
@media (max-width: 860px) { .geracoes--4 { grid-template-columns: 1fr 1fr; gap: 28px 12px; } .geracoes--4::before { display: none; } }
@media (max-width: 480px) { .geracoes--4 { grid-template-columns: 1fr; } }
.geracoes__nova .geracoes__nome { color: var(--verde); }
/* A flor sobe: alinhada ao topo da abertura, sem a sobra acima das pétalas */
.abertura-jardim__grade { align-items: start; }
.abertura-jardim .zinia { align-self: start; margin-top: calc(var(--S) * -0.09); margin-bottom: calc(var(--S) * -0.06); }
@media (max-width: 960px) { .abertura-jardim { padding-top: 20px; } .abertura-jardim .zinia { margin-top: calc(var(--S) * -0.07); } }
@media (max-width: 960px) { .abertura-jardim .zinia { margin-bottom: 8px; } }

/* ---------- Backend: quem paga, código de acesso, cadeado ---------- */
.pagador { display: grid; gap: 12px; padding: 16px; border-radius: var(--raio); background: var(--bege-claro); }
.pagador .rotulo { margin: 0; }
.pagador__resumo { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.campo-codigo { font: 600 1.6rem/1 var(--sans); letter-spacing: .4em; text-align: center; max-width: 12ch; }
.cadeado { display: inline-flex; align-items: baseline; gap: 2px; color: var(--tinta-suave); font-size: .92rem; cursor: help; }
.cadeado small { font-size: .78rem; }

/* ---------- Gestão ---------- */
body.gestao { background: var(--bege-claro); min-height: 100vh; }
.gestao-entrar { max-width: 440px; margin: 10vh auto; display: grid; gap: 14px; }
.gestao-entrar h1 { font-size: var(--t-2); margin: 0; }
.gestao-topo { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px var(--gutter); background: var(--off); border-bottom: 1px solid var(--linha); }
.gestao-titulo { font: 400 1.5rem/1 var(--serif); color: var(--terracota-escura); }
.gestao-eu { margin-left: auto; font-size: .92rem; color: var(--tinta-suave); }
.gestao-corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 20px var(--gutter) 60px; max-width: 1500px; margin: 0 auto; }
.gestao-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: sticky; top: 76px; }
.gestao-menu a, .gestao-menu .cadeado { display: block; padding: 10px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; }
.gestao-menu a:hover { background: var(--off); }
.gestao-menu a[aria-current=page] { background: var(--verde); color: var(--off); }
.gestao-area { min-width: 0; }
.gestao-area > h1 { font-size: var(--t-2); margin: 0 0 14px; }
.gestao-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 16px; }
.gestao-filtros .campo { margin: 0; min-width: 150px; }
.gestao-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.gestao-cartao { display: grid; gap: 4px; text-align: left; padding: 18px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--off); cursor: pointer; font: inherit; color: var(--tinta); }
.gestao-cartao strong { font: 400 2.4rem/1 var(--serif); }
.gestao-cartao small { color: var(--tinta-suave); }
.gestao-cartao:hover { border-color: var(--verde); }
.gestao-cartao--alerta { border-color: var(--terracota); background: color-mix(in srgb, var(--terracota) 8%, var(--off)); }
.gestao-dia { margin-bottom: 26px; }
.gestao-dia > h2 { font-size: var(--t-3); margin: 0 0 10px; }
.gestao-item { margin-bottom: 10px; }
.gestao-item--atrasado { border-left: 4px solid var(--terracota); }
.gestao-onde { font-weight: 600; margin: 6px 0; }
.gestao-detalhes { margin: 0 0 8px; padding-left: 18px; color: var(--tinta-suave); }
.gestao-mini { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.gestao-parametros { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 20px; }
.gestao-email { white-space: pre-wrap; font: .9rem/1.5 var(--sans); max-height: 60vh; overflow: auto; }
@media (max-width: 860px) {
  .gestao-corpo { grid-template-columns: 1fr; }
  .gestao-menu ul { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .gestao-menu a, .gestao-menu .cadeado { padding: 8px 10px; background: var(--off); }
  .gestao-eu { margin-left: 0; width: 100%; }
}
.resumo__corpo { display: contents; }
/* Entrada única */
.entrar { max-width: 480px; margin: 0 auto; display: grid; gap: 14px; text-align: left; }
.entrar h1 { font-size: var(--t-1); margin: 0; }
.ou { display: flex; align-items: center; gap: 10px; color: var(--tinta-suave); font-size: .9rem; margin: 0; }
.ou::before, .ou::after { content: ''; flex: 1; border-top: 1px solid var(--linha); }
.botao-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; }
.botao-google img { width: 18px; height: 18px; }

/* Pix na página */
.pix { display: grid; gap: 12px; justify-items: center; text-align: center; }
.pix__valor { font: 400 2rem/1.1 var(--serif); margin: 0; display: grid; gap: 4px; }
.pix__valor small { font: 400 .9rem/1.3 var(--sans); color: var(--tinta-suave); }
.pix__qr { width: 240px; height: 240px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--linha); }
.pix__passos { text-align: left; margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.pix__codigo { width: 100%; font: .8rem/1.4 ui-monospace, monospace; resize: none; word-break: break-all; }
.pix__status { margin: 0; color: var(--tinta-suave); }
.pix__ok { display: grid; gap: 6px; }
/* Pix dentro da página (no lugar do formulário) */
.pagamento-painel { background: var(--off); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: clamp(20px, 4vw, 40px); display: grid; gap: 14px; outline: none; }
.pagamento-painel h2 { font-size: var(--t-2); margin: 0; }
.pix__grade { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; text-align: left; justify-items: stretch; }
.pix__lado { display: grid; gap: 12px; justify-items: start; }
.pix__lado:first-child { justify-items: center; text-align: center; }
.pix__status { display: flex; align-items: center; gap: 10px; }
.pix__pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); animation: pulso 1.4s ease-in-out infinite; flex: none; }
@keyframes pulso { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .pix__pulso { animation: none; } }
.pix__ok { justify-items: center; text-align: center; }
@media (max-width: 720px) { .pix__grade { grid-template-columns: 1fr; } .pix__lado { justify-items: stretch; } }

/* Kit Cultivar: nome nos rótulos da cena */
.cena__nome-rotulo { font: italic 400 20px var(--serif); }

/* Nossa história: frases de afeto ao lado das fotos da família */
.historia-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.historia-dupla__lado { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.historia-frase { margin: 0; padding-left: 20px; border-left: 3px solid var(--terracota); }
.historia-frase p { margin: 0; font: 400 clamp(1.9rem, 3.4vw, 2.8rem)/1.12 var(--serif); color: var(--tinta); text-wrap: balance; }
.historia-frase em { color: var(--terracota-escura); }
.historia-nota { margin: 0; font: italic 400 clamp(1.15rem, 1.8vw, 1.4rem)/1.45 var(--serif); color: var(--verde); max-width: 34ch; }
@media (max-width: 760px) { .historia-dupla { grid-template-columns: 1fr; } }
.historia-dupla__lado .foto-arredondada { margin: 0; width: 100%; }