/* Kit Ceia na Geladeira: tela clara de papelaria; as folhas A4 imprimem sem fundo (economia de tinta). */
:root {
  --bg: #EFF2EE;
  --sheet: #FFFFFF;
  --ink: #15201A;
  --muted: #5A665F;
  --line: #D6DDD7;
  --pine: #1F5A3F;
  --berry: #B8322B;
  --r: 14px;
  --r-sm: 10px;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  /* cor do tema do kit, trocada pelo JS */
  --k: #1F5A3F;
  --k2: #B8322B;
  --k-soft: #E6EFE9;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--body); }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(1220px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--berry) 55%, transparent); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 22px; border-radius: var(--r-sm); border: 1.5px solid transparent; font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .12s ease, filter .15s; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-accent { background: var(--berry); color: #fff; }
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .92rem; }

.top { padding: 16px 0; border-bottom: 1px solid var(--line); background: var(--sheet); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 700 1.1rem var(--display); text-decoration: none; }
.logo i { color: var(--pine); font-size: 1.4rem; }

/* ---------- gerador ---------- */
.kit-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px 0 72px; }
.form { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 20px; position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow: auto; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
legend { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; padding: 0; }
.campo { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; }
.campo input, .campo select { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; color: var(--ink); font: 500 1rem var(--body); }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: .9rem; user-select: none; background: #fff; }
.chip:has(input:checked) { background: var(--pine); color: #fff; border-color: var(--pine); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--berry) 55%, transparent); outline-offset: 2px; }
.temas { display: flex; flex-wrap: wrap; gap: 8px; }
.tema { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: 600 .9rem var(--body); color: var(--ink); }
.tema span { width: 28px; height: 28px; border-radius: 50%; }
.tema[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dica { font-size: .84rem; color: var(--muted); }
.imprimir { position: sticky; bottom: 0; background: var(--sheet); padding-top: 6px; }

.previa-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.previa-cab h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.paginas { display: grid; gap: 18px; justify-items: center; }
.pagina-box { width: 100%; max-width: 794px; min-width: 0; position: relative; }
.pagina-box .rot { font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.escala { width: 100%; aspect-ratio: 210 / 297; overflow: hidden; border-radius: 4px; box-shadow: 0 1px 2px rgba(20, 30, 25, .08), 0 18px 40px -24px rgba(20, 30, 25, .35); background: #fff; }
.escala > .folha { transform-origin: top left; }

/* ---------- folhas A4 (impressão) ---------- */
.folha {
  width: 210mm; height: 297mm; padding: 14mm 14mm 12mm; background: #fff; color: #1B1F1D; overflow: hidden;
  font: 400 10.5pt/1.4 var(--body); display: flex; flex-direction: column; position: relative;
}
.folha .cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; border-bottom: 1.2mm solid var(--k); padding-bottom: 4mm; margin-bottom: 6mm; }
.folha .cab h2 { font-size: 26pt; color: var(--k); }
.folha .cab .meta { text-align: right; font-size: 10pt; color: #4A524E; }
.folha .cab .meta b { overflow-wrap: anywhere; display: block; font: 700 12pt var(--display); color: #1B1F1D; }
.folha .rodape { margin-top: auto; padding-top: 4mm; font-size: 8pt; color: #7A827E; display: flex; justify-content: space-between; }
.folha h3 { font-size: 13pt; color: var(--k); margin: 0 0 2mm; }
.box { width: 3.6mm; height: 3.6mm; border: .35mm solid var(--k); border-radius: .8mm; flex: none; margin-top: .9mm; }
.tarefa { display: flex; gap: 3mm; padding: 1.6mm 0; border-bottom: .2mm dashed #CBD3CE; break-inside: avoid; }
.tarefa .h { font: 700 10.5pt var(--display); min-width: 13mm; color: var(--k2); }
.dias { columns: 2; column-gap: 8mm; }
.dia { break-inside: avoid; margin-bottom: 5mm; }
.dia h3 { border-left: 1.4mm solid var(--k2); padding-left: 2.5mm; }
.odia .tarefa { padding: 2.4mm 0; font-size: 12pt; }
.odia .tarefa .h { font-size: 15pt; min-width: 20mm; }
.odia .servir { margin-top: 4mm; background: var(--k-soft); border-radius: 3mm; padding: 5mm; display: flex; align-items: center; justify-content: space-between; }
.odia .servir b { font: 800 30pt var(--display); color: var(--k); }
.carnes-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(40mm, 1fr)); gap: 3mm; margin-bottom: 5mm; }
.carnes-res div { border: .35mm solid var(--k); border-radius: 2.5mm; padding: 3mm; }
.carnes-res b { display: block; font: 800 18pt var(--display); color: var(--k); }
.setores { columns: 2; column-gap: 8mm; }
.setor { break-inside: avoid; margin-bottom: 4mm; }
.item { display: flex; gap: 2.5mm; padding: 1.2mm 0; border-bottom: .2mm dashed #CBD3CE; }
.item span:not(.box) { flex: 1; }
.item b { white-space: nowrap; }
.etiquetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; flex: 1; gap: 0; border: .2mm dashed #9AA39E; }
.etiqueta { border: .2mm dashed #9AA39E; padding: 5mm 4mm; display: flex; flex-direction: column; gap: 2.5mm; justify-content: center; }
.etiqueta .nome { font: 800 15pt/1.1 var(--display); color: var(--k); min-height: 8mm; overflow-wrap: anywhere; }
.etiqueta .nome.vazio { border-bottom: .3mm solid #9AA39E; }
.etiqueta .lin { font-size: 9pt; color: #4A524E; display: flex; gap: 2mm; }
.etiqueta .lin i { flex: 1; border-bottom: .3mm solid #9AA39E; font-style: normal; }
.etiqueta .selo { overflow-wrap: anywhere; font-size: 7.5pt; letter-spacing: .12em; text-transform: uppercase; color: var(--k2); font-weight: 700; }
.plaquinhas { flex: 1; display: grid; grid-template-rows: 1fr 1fr; }
.plaquinha { display: grid; grid-template-rows: 1fr 1fr; border-bottom: .2mm dashed #9AA39E; }
.plaquinha:last-child { border-bottom: 0; }
.plaquinha .face { display: grid; place-items: center; text-align: center; padding: 6mm; }
.plaquinha .face.topo { transform: rotate(180deg); }
.plaquinha .face:not(.topo) { border-top: .3mm dotted #9AA39E; }
.plaquinha .nome { font: 800 34pt/1.05 var(--display); color: var(--k); overflow-wrap: anywhere; max-width: 170mm; }
.plaquinha .sub { overflow-wrap: anywhere; font-size: 11pt; color: #4A524E; margin-top: 2mm; }
.plaquinha .enfeite { font-size: 9pt; letter-spacing: .3em; color: var(--k2); margin-bottom: 3mm; }
.quem table { width: 100%; border-collapse: collapse; font-size: 11pt; table-layout: fixed; }
.quem th:first-child, .quem td:first-child { width: 48%; }
.quem td { overflow-wrap: anywhere; }
.quem.c1 td { height: 9.5mm; padding: 2mm; font-size: 10pt; }
.quem.c2 td { height: 8mm; padding: 1.2mm 2mm; font-size: 9pt; }
.quem th { text-align: left; font: 700 10pt var(--display); color: var(--k); border-bottom: .5mm solid var(--k); padding: 2mm; }
.quem td { border-bottom: .2mm solid #CBD3CE; padding: 3.2mm 2mm; height: 11mm; }
.quem td.c { width: 12mm; }
.dobra { font-size: 7.5pt; color: #7A827E; text-align: center; margin-bottom: 2mm; }
.notas { flex: 1 1 0; min-height: 0; margin-top: 5mm; border-top: .5mm solid var(--k); padding-top: 2mm; overflow: hidden; }
.notas i { display: block; height: 9mm; border-bottom: .25mm solid #CBD3CE; }
.notas span { font: 700 10pt var(--display); color: var(--k); }
/* encaixe automático quando o conteúdo não cabe na folha (muita gente, muito prato) */
.folha.c1 { font-size: 9.5pt; }
.folha.c1 .tarefa { padding: 1mm 0; }
.folha.c1 .item { padding: .7mm 0; }
.folha.c1 h3 { font-size: 11.5pt; }
.folha.c1 .dia, .folha.c1 .setor { margin-bottom: 3mm; }
.folha.c2 { font-size: 8.5pt; }
.folha.c2 .dias, .folha.c2 .setores { columns: 3; column-gap: 6mm; }
.folha.c2 .carnes-res b { font-size: 14pt; }
.odia.c1 .tarefa { padding: 1.3mm 0; font-size: 10.5pt; }
.odia.c1 .tarefa .h { font-size: 12pt; min-width: 16mm; }
.odia.c2 .lista { columns: 2; column-gap: 7mm; }
.odia.c2 .tarefa { padding: 1mm 0; font-size: 9pt; }
.odia.c2 .tarefa .h { font-size: 10pt; min-width: 13mm; }
.odia.c2 .servir b { font-size: 22pt; }
.economia .folha .cab { border-bottom-width: .6mm; }
.economia .odia .servir { background: none; border: .5mm solid var(--k); }

@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .top, .form, .previa-cab { display: none !important; }
  .kit-grid { display: block; padding: 0; width: auto; margin: 0; }
  .paginas { display: block; }
  .pagina-box { max-width: none; width: auto; }
  .pagina-box .rot { display: none; }
  .escala { aspect-ratio: auto; box-shadow: none; border-radius: 0; overflow: visible; }
  .escala > .folha { transform: none !important; }
  .folha { break-after: page; page-break-after: always; }
  .folha, .folha * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- landing ---------- */
.hero { padding: 64px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.eyebrow { font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--berry); }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); margin-top: 14px; }
.hero h1 em { font-style: normal; color: var(--pine); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 52ch; margin-top: 18px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.leque { position: relative; height: 460px; }
.leque .escala { position: absolute; width: 260px; }
.leque .escala:nth-child(1) { left: 0; top: 40px; transform: rotate(-6deg); }
.leque .escala:nth-child(2) { left: 32%; top: 0; transform: rotate(1deg); z-index: 1; }
.leque .escala:nth-child(3) { right: 0; top: 60px; transform: rotate(6deg); }
.secao { padding: 80px 0; border-top: 1px solid var(--line); }
.secao h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.paginas-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.paginas-lista article { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 8px; align-content: start; }
.paginas-lista i { font-size: 1.6rem; color: var(--berry); }
.paginas-lista p { color: var(--muted); font-size: .95rem; }
.oferta { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.preco { display: flex; align-items: baseline; gap: 14px; margin: 16px 0 6px; }
.preco s { color: var(--muted); }
.preco strong { font: 800 3.2rem/1 var(--display); color: var(--berry); }
.inclui { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.inclui li { display: flex; gap: 10px; }
.inclui i { color: var(--pine); margin-top: 3px; }
details { border-top: 1px solid var(--line); padding: 16px 0; }
summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--pine); font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { color: var(--muted); margin-top: 8px; }
footer { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); font-size: .9rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 960px) {
  .kit-grid, .hero-grid, .oferta { grid-template-columns: minmax(0, 1fr); }
  .form { position: static; max-height: none; }
  .paginas-lista { grid-template-columns: 1fr 1fr; }
  .leque { height: 400px; }
}
@media (max-width: 640px) {
  .paginas-lista { grid-template-columns: 1fr; }
  .leque { height: 320px; }
  .leque .escala { width: 180px; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero { padding: 40px 0 56px; }
}

.erro-campo { font-size: .88rem; color: var(--berry); font-weight: 600; min-height: 1em; }

.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 20; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700; max-width: calc(100% - 32px); }
.campo-input { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; font: 500 1rem var(--body); }
.campo select { width: auto; }