/* SEMEIA — componentes extras: formulários, galeria de fotos e blocos de venda.
Requer tokens/tokens.css, css/base.css e css/components.css.
Documentação: docs/componentes-extras.md */
/* =====================================================================
FORMULÁRIOS
===================================================================== */
.formulario { display: grid; gap: var(--e-4); }
.formulario--2col { grid-template-columns: 1fr; }
@media (min-width: 640px) { .formulario--2col { grid-template-columns: 1fr 1fr; } .campo--inteiro { grid-column: 1 / -1; } }
.campo { display: grid; gap: var(--e-2); align-content: start; }
.campo__rotulo { font-weight: var(--peso-semibold); font-size: var(--texto-sm); color: var(--verde-900); }
.campo__rotulo small { font-weight: var(--peso-regular); color: var(--cor-texto-suave); }
.campo__ajuda { font-size: var(--texto-xs); color: var(--cor-texto-suave); }
.campo__erro { font-size: var(--texto-xs); color: #A33A2B; font-weight: var(--peso-semibold); }
.entrada, .selecao, .area-texto {
width: 100%; min-height: 3.25rem; padding: 0.8rem 1rem;
font: inherit; color: var(--cor-texto);
background: var(--branco); border: 1.5px solid var(--linha); border-radius: var(--raio-md);
transition: border-color var(--rapido), box-shadow var(--rapido);
}
.area-texto { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.entrada::placeholder, .area-texto::placeholder { color: #9A9485; }
.entrada:hover, .selecao:hover, .area-texto:hover { border-color: var(--salvia); }
.entrada:focus, .selecao:focus, .area-texto:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 22%, transparent); }
.entrada:disabled, .selecao:disabled, .area-texto:disabled { background: #F4EEE2; color: #9A9485; cursor: not-allowed; }
.selecao {
appearance: none; padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%234A6640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
}
/* estados de validação: aplique na .campo */
.campo--erro .entrada, .campo--erro .selecao, .campo--erro .area-texto { border-color: #C2513F; background: #FDF1EE; }
.campo--ok .entrada { border-color: var(--verde); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%235E7D4E'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25rem; padding-right: 2.9rem; }
/* caixa de seleção e opção */
.marcar { display: flex; gap: var(--e-3); align-items: flex-start; cursor: pointer; font-size: var(--texto-sm); }
.marcar input { appearance: none; flex: none; width: 1.4rem; height: 1.4rem; margin: 0.1rem 0 0; border: 1.5px solid var(--salvia); border-radius: 0.4rem; background: var(--branco); display: grid; place-content: center; cursor: pointer; }
.marcar input[type="radio"] { border-radius: 50%; }
.marcar input::before { content: ""; width: 0.8rem; height: 0.8rem; transform: scale(0); transition: transform var(--rapido) var(--curva); background: var(--branco); clip-path: polygon(14% 52%, 0 66%, 40% 100%, 100% 22%, 86% 10%, 39% 70%); }
.marcar input[type="radio"]::before { clip-path: circle(42%); }
.marcar input:checked { background: var(--verde); border-color: var(--verde); }
.marcar input:checked::before { transform: scale(1); }
/* opções em cartão (escolher kit, quantidade, forma de envio) */
.opcoes { display: grid; gap: var(--e-3); }
@media (min-width: 640px) { .opcoes--lado { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcao__caixa { display: grid; gap: var(--e-1); padding: var(--e-4); background: var(--branco); border: 2px solid var(--linha); border-radius: var(--raio-md); transition: border-color var(--rapido), background var(--rapido); }
.opcao__caixa strong { color: var(--verde-900); }
.opcao__caixa span { font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.opcao input:checked + .opcao__caixa { border-color: var(--verde); background: var(--salvia-100); }
.opcao input:focus-visible + .opcao__caixa { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
/* campo com botão colado (e-mail da lista de espera, CEP, cupom) */
.campo-acao { display: flex; background: var(--branco); border: 1.5px solid var(--linha); border-radius: var(--raio-pill); padding: 0.3rem; }
.campo-acao:focus-within { border-color: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 22%, transparent); }
.campo-acao input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--cor-texto); padding: 0.5rem 1rem; }
.campo-acao input:focus { outline: none; }
.campo-acao .botao { min-height: 2.75rem; padding: 0.6rem 1.25rem; box-shadow: none; white-space: nowrap; }
/* seletor de quantidade */
.quantidade { display: inline-flex; align-items: center; background: var(--branco); border: 1.5px solid var(--linha); border-radius: var(--raio-pill); }
.quantidade button { width: 2.75rem; height: 2.75rem; border: 0; background: transparent; font: inherit; font-size: 1.35rem; font-weight: var(--peso-bold); color: var(--verde-700); cursor: pointer; border-radius: 50%; }
.quantidade button:hover { background: var(--verde-100); }
.quantidade input { width: 2.75rem; border: 0; text-align: center; font: inherit; font-weight: var(--peso-bold); background: transparent; -moz-appearance: textfield; }
.quantidade input::-webkit-outer-spin-button, .quantidade input::-webkit-inner-spin-button { appearance: none; }
/* cartão que envolve um formulário */
.caixa-formulario { background: var(--cor-superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--sombra-2); }
.formulario__rodape { font-size: var(--texto-xs); color: var(--cor-texto-suave); }
/* avisos */
.aviso { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4); border-radius: var(--raio-md); background: var(--salvia-100); border-left: 5px solid var(--verde); font-size: var(--texto-sm); }
.aviso--sucesso { background: var(--verde-100); }
.aviso--atencao { background: var(--amarelo-100); border-color: var(--amarelo); }
.aviso--erro { background: #FDF1EE; border-color: #C2513F; }
/* =====================================================================
GALERIA DE FOTOS
===================================================================== */
.foto { margin: 0; position: relative; border-radius: var(--raio-md); overflow: hidden; background: var(--salvia-100); box-shadow: var(--sombra-1); }
.foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--proporcao, 4 / 3); transition: transform var(--medio) var(--curva); }
.foto:hover img { transform: scale(1.04); }
.foto figcaption { position: absolute; inset: auto 0 0 0; padding: var(--e-5) var(--e-4) var(--e-3); color: var(--branco); font-size: var(--texto-sm); font-weight: var(--peso-semibold); background: linear-gradient(transparent, rgba(51, 71, 44, .78)); }
.foto--quadrada { --proporcao: 1; }
.foto--retrato { --proporcao: 4 / 5; }
.foto--larga { --proporcao: 16 / 9; }
.foto--redonda { border-radius: 50%; --proporcao: 1; }
.foto--arco { border-radius: 999px 999px var(--raio-md) var(--raio-md); --proporcao: 4 / 5; } /* mesmo formato da tag do kit */
/* espaço reservado enquanto a foto real não existe */
.foto--vazia { display: grid; place-items: center; aspect-ratio: var(--proporcao, 4 / 3); border: 2px dashed var(--salvia); background: var(--salvia-100); box-shadow: none; color: var(--verde-700); font-size: var(--texto-sm); font-weight: var(--peso-semibold); text-align: center; padding: var(--e-4); }
/* grade simples */
.galeria { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); } }
@media (min-width: 1024px) { .galeria--4 { grid-template-columns: repeat(4, 1fr); } }
/* mosaico: a primeira foto ocupa 2×2 */
.galeria--mosaico { grid-auto-flow: dense; }
.galeria--mosaico .foto:first-child { grid-column: span 2; grid-row: span 2; }
.galeria--mosaico .foto img { aspect-ratio: auto; height: 100%; min-height: 9rem; }
/* faixa que desliza (carrossel sem script) */
.galeria--faixa { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--e-4); padding-bottom: var(--e-3); scrollbar-width: thin; scrollbar-color: var(--salvia) transparent; }
.galeria--faixa > * { flex: 0 0 78%; scroll-snap-align: center; }
@media (min-width: 640px) { .galeria--faixa > * { flex-basis: 42%; } }
@media (min-width: 1024px) { .galeria--faixa > * { flex-basis: 30%; } }
/* polaroide: foto com moldura, legenda manuscrita e leve inclinação */
.polaroide { margin: 0; background: var(--branco); padding: 0.75rem 0.75rem 0.4rem; border-radius: 0.35rem; box-shadow: var(--sombra-2); rotate: var(--giro, -2deg); transition: rotate var(--medio) var(--curva), translate var(--medio) var(--curva); }
.polaroide:nth-child(even) { --giro: 2.5deg; }
.polaroide:nth-child(3n) { --giro: -1deg; }
.polaroide:hover { rotate: 0deg; translate: 0 -6px; }
.polaroide img, .polaroide .foto--vazia { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.2rem; }
.polaroide figcaption { font-family: var(--fonte-manuscrita); font-size: 1.6rem; line-height: 1.3; color: var(--marrom); text-align: center; padding-top: 0.2rem; }
/* ampliar ao clicar, sem script: … */
.ampliada { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: var(--gutter); background: rgba(51, 71, 44, .88); cursor: zoom-out; }
.ampliada:target { display: grid; }
.ampliada img { max-height: 88vh; width: auto; max-width: 100%; border-radius: var(--raio-md); box-shadow: var(--sombra-2); }
/* antes e depois / frente e verso lado a lado */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); align-items: start; }
.par figcaption { text-align: center; margin-top: var(--e-2); }
/* vídeo responsivo com capa */
.video { position: relative; border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--verde-900); box-shadow: var(--sombra-2); }
.video iframe, .video video, .video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__tocar { position: absolute; inset: 0; margin: auto; width: 5rem; height: 5rem; border: 0; border-radius: 50%; background: var(--creme); cursor: pointer; box-shadow: var(--sombra-2); display: grid; place-items: center; transition: transform var(--rapido) var(--curva); }
.video__tocar::before { content: ""; border-left: 1.4rem solid var(--terracota-700); border-block: 0.9rem solid transparent; margin-left: 0.35rem; }
.video__tocar:hover { transform: scale(1.08); }
/* =====================================================================
OUTROS COMPONENTES DE VENDA
===================================================================== */
/* faixa de aviso no topo */
.faixa-topo { background: var(--verde); color: var(--branco); text-align: center; font-size: var(--texto-sm); font-weight: var(--peso-semibold); padding: 0.55rem var(--gutter); }
.faixa-topo--amarelo { background: var(--amarelo); color: var(--tinta); }
/* números em destaque */
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5); text-align: center; }
@media (min-width: 640px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numero strong { display: block; font-size: var(--titulo-lg); line-height: 1; color: var(--verde-700); }
.numero span { font-size: var(--texto-xs); font-weight: var(--peso-semibold); letter-spacing: var(--espaco-letras-caixa-alta); text-transform: uppercase; color: var(--terracota-700); }
/* card que vira: frente e verso (passe o mouse ou toque) */
.vira { perspective: 1200px; width: min(100%, 18rem); aspect-ratio: 4 / 5; margin-inline: auto; cursor: pointer; }
.vira__dentro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 600ms var(--curva); }
.vira:hover .vira__dentro, .vira:focus-within .vira__dentro, .vira input:checked ~ .vira__dentro { transform: rotateY(180deg); }
.vira img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--raio-card); box-shadow: var(--sombra-2); }
.vira__verso { transform: rotateY(180deg); }
.vira input { position: absolute; opacity: 0; inset: 0; z-index: 2; cursor: pointer; }
/* abas sem script (ex.: as 5 seções dos cards) */
.abas { display: grid; gap: var(--e-5); }
.abas__lista { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; }
.abas input { position: absolute; opacity: 0; }
.abas label { padding: 0.55rem 1.1rem; border-radius: var(--raio-pill); border: 2px solid var(--linha); background: var(--branco); font-weight: var(--peso-semibold); font-size: var(--texto-sm); cursor: pointer; }
.abas input:checked + label { background: var(--verde); border-color: var(--verde); color: var(--branco); }
.abas input:focus-visible + label { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
.abas__painel { display: none; }
.abas:has(#aba-1:checked) [data-aba="1"], .abas:has(#aba-2:checked) [data-aba="2"], .abas:has(#aba-3:checked) [data-aba="3"],
.abas:has(#aba-4:checked) [data-aba="4"], .abas:has(#aba-5:checked) [data-aba="5"] { display: block; }
/* linha do tempo (mapa da Semeia: semente → raiz → broto → árvore → fruto) */
.jornada { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); position: relative; }
.jornada::before { content: ""; position: absolute; left: 1.75rem; top: 1.75rem; bottom: 1.75rem; border-left: 2px dashed var(--salvia); }
.jornada li { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--e-4); align-items: center; position: relative; }
.jornada img, .jornada__marca { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--papel); border: 2px solid var(--salvia); padding: 0.45rem; }
.jornada strong { display: block; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--texto-sm); color: var(--verde-700); }
.jornada span { font-size: var(--texto-sm); color: var(--cor-texto-suave); }
@media (min-width: 1024px) {
.jornada--horizontal { grid-template-columns: repeat(5, 1fr); }
.jornada--horizontal::before { left: 10%; right: 10%; top: 1.75rem; bottom: auto; border-left: 0; border-top: 2px dashed var(--salvia); }
.jornada--horizontal li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
/* comparação: com Semeia × sem */
.comparacao { display: grid; gap: var(--e-4); }
@media (min-width: 640px) { .comparacao { grid-template-columns: 1fr 1fr; } }
.comparacao__lado { border-radius: var(--raio-md); padding: var(--e-5); background: var(--papel); border: 1px solid var(--linha); }
.comparacao__lado--sim { background: var(--salvia-100); border: 2px solid var(--verde); }
.comparacao ul { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-3); font-size: var(--texto-sm); }
.comparacao li { padding-left: 1.9rem; position: relative; }
.comparacao li::before { content: "–"; position: absolute; left: 0; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--linha); color: var(--tinta-suave); font-weight: 700; }
.comparacao__lado--sim li::before { content: "✓"; background: var(--verde); color: var(--branco); font-size: 0.8rem; }
/* planos / combos lado a lado */
.planos { display: grid; gap: var(--e-5); align-items: stretch; }
@media (min-width: 1024px) { .planos { grid-template-columns: repeat(3, 1fr); } }
.plano { position: relative; display: grid; gap: var(--e-3); align-content: start; background: var(--cor-superficie); border: 1.5px solid var(--linha); border-radius: var(--raio-lg); padding: var(--e-6) var(--e-5); text-align: center; }
.plano--destaque { border: 2.5px solid var(--verde); box-shadow: var(--sombra-2); }
@media (min-width: 1024px) { .plano--destaque { transform: scale(1.04); } }
.plano__faixa { position: absolute; top: -0.9rem; left: 50%; translate: -50% 0; white-space: nowrap; }
.plano__preco { font-size: var(--titulo-lg); font-weight: var(--peso-bold); color: var(--verde-700); line-height: 1; }
.plano__preco small { font-size: 0.42em; }
.plano ul { list-style: none; padding: 0; margin: var(--e-2) 0; display: grid; gap: var(--e-2); font-size: var(--texto-sm); text-align: left; }
.plano li::before { content: "♥ "; color: var(--terracota); }
.plano .botao { margin-top: auto; }
/* selos de confiança */
.confianca { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3) var(--e-6); list-style: none; padding: 0; margin: 0; }
.confianca li { display: flex; align-items: center; gap: var(--e-2); font-size: var(--texto-sm); font-weight: var(--peso-semibold); color: var(--verde-900); }
.confianca li::before { content: ""; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
/* resumo de avaliações */
.avaliacao { display: inline-flex; align-items: center; gap: var(--e-3); font-size: var(--texto-sm); }
.avaliacao__estrelas { color: var(--amarelo); font-size: 1.25rem; letter-spacing: 0.1em; }
.avaliacao strong { color: var(--verde-900); }
/* quem criou / autora */
.autora { display: grid; gap: var(--e-5); align-items: center; justify-items: center; text-align: center; }
@media (min-width: 640px) { .autora { grid-template-columns: 11rem 1fr; justify-items: start; text-align: left; } }
.autora .foto { width: 11rem; }
/* citação em destaque */
.citacao { position: relative; margin: 0; padding: var(--e-6) var(--e-5) var(--e-5) 4.5rem; background: var(--papel); border-radius: var(--raio-lg); font-size: var(--texto-lg); }
.citacao::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 3rem; height: 3rem; background: url("../assets/elementos/aspas.svg") center / contain no-repeat; }
.citacao footer { margin-top: var(--e-3); font-size: var(--texto-sm); color: var(--cor-texto-suave); }
/* faixa de frases que desliza */
.letreiro { overflow: hidden; background: var(--amarelo); color: var(--tinta); padding-block: 0.7rem; font-weight: var(--peso-semibold); font-size: var(--texto-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.letreiro__trilho { display: flex; gap: var(--e-7); width: max-content; animation: letreiro 28s linear infinite; }
.letreiro__trilho > * { white-space: nowrap; }
.letreiro__trilho > *::after { content: "♥"; margin-left: var(--e-7); color: var(--terracota-700); }
@keyframes letreiro { to { transform: translateX(-50%); } }
/* botão flutuante de WhatsApp */
.zap { position: fixed; right: 1rem; bottom: 6rem; z-index: 25; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25A55A; display: grid; place-items: center; box-shadow: var(--sombra-2); }
.zap svg { width: 1.9rem; height: 1.9rem; fill: #fff; }
@media (min-width: 1024px) { .zap { bottom: 1.5rem; } }
/* aviso de cookies (LGPD) */
.cookies { position: fixed; inset: auto 1rem 1rem 1rem; z-index: 40; max-width: 34rem; margin-inline: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--e-4); box-shadow: var(--sombra-2); display: grid; gap: var(--e-3); font-size: var(--texto-sm); }
.cookies__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cookies .botao { min-height: 2.6rem; padding: 0.5rem 1.1rem; font-size: var(--texto-sm); box-shadow: none; }
/* janela (use o elemento