@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400;12..96,75..100,700;12..96,75..100,800&display=swap");
@import url("./tokens.css");
@import url("./base.css");

html, body { overflow-x: clip; }
body { min-height: 100vh; font-size: 1.125rem; }
.container { max-width: 74rem; }
.skip-link { position: fixed; inset: 1rem auto auto 1rem; z-index: 500; padding: .75rem 1rem; color: white; background: var(--color-ink); transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; }
.masthead { min-height: 4rem; display: flex; align-items: center; border-bottom: 4px solid var(--color-ink); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font-weight: 800; text-decoration: none; }
.button { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.5rem; border: 2px solid var(--action); border-radius: 0; color: var(--action-text); background: var(--action); font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.button:hover { border-color: var(--action-hover); background: var(--action-hover); }
.button--secondary { color: var(--color-ink); background: transparent; border-color: var(--color-ink); }
.button--secondary:hover { color: var(--color-paper); background: var(--color-ink); }
.button--quiet { color: var(--color-ink); background: transparent; border-color: var(--color-rule-2); }
.button:focus-visible, .choice:focus-visible, input:focus-visible { outline: 4px solid var(--color-focus); outline-offset: 3px; }
.hero { min-height: calc(100vh - 4rem); min-height: calc(100dvh - 4rem); display: grid; align-items: center; padding-block: 4rem; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr); gap: 4rem; align-items: center; }
.hero h1 { max-width: 13ch; }
.hero .lead { margin-top: 1.5rem; }
.hero .lead + p { margin-top: 1rem; }
.hero .button { margin-top: 2rem; }
.promise-card { padding: 2rem; border-top: 6px solid var(--color-accent); background: var(--color-paper-2); }
.promise-card strong { display: block; font-size: 1.55rem; line-height: 1.15; }
.promise-card ul { margin: 1.5rem 0 0; padding-left: 1.25rem; }
.promise-card li + li { margin-top: .75rem; }
.footer { padding-block: 2rem; border-top: 4px solid var(--color-ink); }
.footer p { max-width: 76ch; color: var(--color-muted); font-size: 1rem; }
.quiz-shell { min-height: calc(100vh - 4rem); min-height: calc(100dvh - 4rem); display: flex; flex-direction: column; }
.quiz-progress { height: .7rem; background: var(--color-paper-3); }
.quiz-progress__bar { width: 12.5%; height: 100%; background: var(--color-accent); transition: width .22s ease-out; }
.quiz-main { flex: 1; display: grid; align-items: center; padding-block: 2rem; }
.quiz-card { max-width: 44rem; margin-inline: auto; }
.quiz-count { margin-bottom: .75rem; color: var(--color-muted); font-weight: 700; }
.quiz-card h1 { max-width: 20ch; font-size: clamp(2rem, 8vw, 3.5rem); }
.quiz-hint { margin-top: .75rem; color: var(--color-muted); }
.choices { display: grid; gap: .75rem; margin-top: 2rem; }
.choice { width: 100%; min-height: 64px; padding: 1rem 1.25rem; border: 2px solid var(--color-rule-2); color: var(--color-ink); background: var(--color-paper); font-weight: 700; text-align: left; cursor: pointer; }
.choice:hover { border-color: var(--color-accent); }
.choice[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-success-ink); background: var(--color-success-paper); box-shadow: inset 6px 0 0 var(--color-accent); }
.quiz-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
.quiz-actions .button { flex: 1; }
.error { min-height: 1.6em; margin-top: .75rem; color: var(--color-error); font-weight: 700; }
.page-main { padding-block: 4rem; }
.page-main--closing { padding-top: 0; }
.analysis-screen { min-height: calc(100vh - 8rem); min-height: calc(100dvh - 8rem); display: grid; align-content: center; gap: 1.25rem; max-width: 48rem; margin-inline: auto; }
.analysis-screen h1 { max-width: 18ch; }
.analysis-progress { height: 1rem; overflow: hidden; border: 2px solid var(--color-ink); background: var(--color-paper-3); }
.analysis-progress__bar { width: 0; height: 100%; background: var(--color-accent); animation: analyze 3.5s linear forwards; }
@keyframes analyze { to { width: 100%; } }
.page-intro { padding-bottom: 2rem; border-bottom: 4px solid var(--color-ink); }
.page-intro h1 { max-width: 16ch; }
.page-intro .lead { margin-top: 1rem; }
.summary-card, .card { padding: 1.5rem; border-top: 4px solid var(--color-ink); background: var(--color-paper-2); }
.summary-card { margin-top: 2rem; border-top-color: var(--color-accent); }
.summary-card p + p { margin-top: 1rem; }
.preview { position: relative; margin-top: 2rem; max-height: 34rem; overflow: hidden; }
.preview::after { position: absolute; inset: 45% 0 0; content: ""; background: linear-gradient(transparent, var(--color-paper) 78%); pointer-events: none; }
.preview__blur { filter: blur(5px); user-select: none; }
.preview table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.preview th, .preview td { padding: .75rem; border: 1px solid var(--color-rule-2); text-align: left; }
.diagnosis { padding-block: 4rem; border-bottom: 4px solid var(--color-ink); }
.diagnosis > .lead { margin-top: 1rem; }
.diagnosis__block { margin-top: 2.5rem; max-width: 52rem; }
.diagnosis__block h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.diagnosis__block p { margin-top: 1rem; }
.mechanism { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: mechanism; }
.mechanism li { min-height: 11rem; padding: 1.25rem; border-top: 5px solid var(--color-accent); background: var(--color-paper-2); counter-increment: mechanism; }
.mechanism strong, .mechanism span { display: block; }
.mechanism strong::before { content: counter(mechanism) ". "; color: var(--color-accent); }
.mechanism span { margin-top: .75rem; }
.gesso { padding: 1.25rem; border-left: 6px solid var(--color-accent); background: var(--color-success-paper); font-size: 1.25rem; font-weight: 800; }
.vsl { margin-block: 4rem; }
.vsl-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-ink); }
.vsl-frame iframe, .vsl-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan-preview { padding-block: 2rem 4rem; }
.offer { padding: 2rem; border-top: 6px solid var(--color-accent); background: var(--color-paper-2); }
.offer h2 { margin-top: .5rem; }
.offer > p, .offer > ul, .offer .guarantee, .offer .button { margin-top: 1.25rem; }
.offer li + li { margin-top: .5rem; }
.guarantee { padding: 1.25rem; border-left: 5px solid var(--color-accent); background: var(--color-success-paper); }
.guarantee strong { font-size: 1.3rem; }
.guarantee p { margin-top: .5rem; }
.plan-head { padding-block: 4rem 2.5rem; border-bottom: 6px solid var(--color-ink); }
.plan-head .lead { margin-top: 1rem; }
.plan-head__focus { margin-top: 1rem; color: var(--color-success-ink); font-weight: 700; }
.plan-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.plan-section { padding-block: 3.5rem; border-bottom: 1px solid var(--color-rule-2); }
.plan-section > h2 { margin-bottom: 2rem; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.rule-card { padding: 1.5rem; border-top: 5px solid var(--color-accent); background: var(--color-paper-2); break-inside: avoid; }
.rule-card h3 { margin-top: .35rem; }
.rule-card > p { margin-top: .75rem; }
.rule-card ul { margin-bottom: 0; padding-left: 1.3rem; }
.rule-card li + li { margin-top: .6rem; }
.week-label { color: var(--color-accent); font-weight: 700; font-size: 1.125rem; }
.check-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.check-row { display: grid; grid-template-columns: 2rem 3.2rem 1fr; gap: .75rem; align-items: center; min-height: 56px; padding: .6rem; border-bottom: 1px solid var(--color-rule); }
.check-row input, .shopping-row input { width: 1.45rem; height: 1.45rem; accent-color: var(--color-accent); }
.check-row:has(input:checked) span:last-child, .shopping-row:has(input:checked) span { color: var(--color-muted); text-decoration: line-through; }
.menu-week { margin-top: 2.5rem; break-inside: avoid; }
.menu-week:first-of-type { margin-top: 0; }
.family-note { margin-block: .75rem 1rem; padding: .8rem 1rem; border-left: 5px solid var(--color-accent); background: var(--color-success-paper); }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem; border: 1px solid var(--color-rule-2); text-align: left; vertical-align: top; }
th { background: var(--color-paper-2); }
.symptom-card { border-top-color: var(--color-terra); }
.alert { margin-top: 1rem; padding: 1rem; border-left: 5px solid var(--color-terra); color: var(--color-warning-ink); background: var(--color-warning-paper); font-weight: 700; }
.recipes { margin-top: 2rem; }
.recipes h3 { margin-bottom: 1rem; }
.recipe + .recipe { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-rule-2); }
.recipe p { margin-top: .3rem; }
.shopping-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.shopping-column h3 { margin-bottom: 1rem; }
.shopping-row { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: start; padding-block: .55rem; }
.diary-table td { height: 3.5rem; }
.lines { display: grid; gap: 1.75rem; margin-top: 1.5rem; }
.line { min-height: 2.5rem; border-bottom: 1px solid var(--color-ink); }
.plan-disclaimer { margin-top: 2rem; padding: 1.25rem; border: 4px solid var(--color-ink); font-weight: 700; }
.empty-state { max-width: 42rem; min-height: 60vh; display: grid; align-content: center; gap: 1.25rem; }
.empty-state h1 { max-width: 16ch; }

@media (max-width: 48rem) {
  .hero { padding-block: 2.5rem; }
  .hero__inner, .card-grid, .shopping-columns, .mechanism { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
  .button { width: 100%; }
  .quiz-main { align-items: start; padding-top: 1.5rem; }
  .quiz-actions { flex-direction: column-reverse; }
  .plan-actions { display: grid; }
  .table-wrap { margin-inline: -1rem; width: calc(100% + 2rem); }
  th, td { min-width: 10rem; font-size: 1rem; }
  th:first-child, td:first-child { min-width: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-progress__bar { transition: none; }
  .analysis-progress__bar { width: 100%; animation: none; }
}

@page { size: auto; margin: 12mm; }
@media print {
  html, body { overflow: visible; background: #fff; color: #000; }
  body { font-size: 11pt; line-height: 1.35; }
  .masthead, .footer, .plan-actions, .no-print { display: none !important; }
  .container { max-width: none; padding: 0; }
  .plan-head, .plan-section { padding-block: 8mm; }
  .plan-section { border-color: #777; }
  .card-grid { gap: 5mm; }
  .rule-card, .card, .summary-card, .menu-week, .symptom-card, .shopping-column, table, tr { break-inside: avoid; page-break-inside: avoid; }
  .rule-card, .card, th { color: #000; background: #fff; border-color: #000; }
  .table-wrap { overflow: visible; }
  th, td { min-width: 0 !important; padding: 3mm; border-color: #555; font-size: 9pt; }
  input[type="checkbox"] { appearance: none; width: 4mm; height: 4mm; border: 1px solid #000; background: #fff; }
  input[type="checkbox"]:checked::after { content: "✓"; position: relative; top: -2mm; font-size: 4mm; }
  .check-row:has(input:checked) span:last-child, .shopping-row:has(input:checked) span { color: #000; }
  .plan-disclaimer { display: block !important; border-color: #000; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
}

/* headings receive programmatic focus for screen readers; no visible box needed */
[tabindex="-1"]:focus { outline: none; }

/* phone: each cardápio day becomes a stacked card instead of a sideways-scrolling table */
@media screen and (max-width: 40rem) {
  .menu-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menu-table, .menu-table tbody, .menu-table tr, .menu-table td { display: block; width: 100%; }
  .menu-week .table-wrap { margin-inline: 0; width: 100%; overflow: visible; }
  .menu-table tr { border: 2px solid var(--color-rule-2); margin-bottom: 1rem; background: var(--color-paper); }
  .menu-table td { border: 0; border-top: 1px solid var(--color-rule); padding: 0.6rem 0.9rem; }
  .menu-table td:first-child { border-top: 0; font-weight: 700; font-size: 1.25rem; background: var(--color-paper-2); }
  .menu-table td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 0.95rem; font-weight: 700; color: var(--color-accent); }
}

@media print { .skip-link { display: none !important; } }
@media print { .table-wrap { margin-inline: 0 !important; width: 100% !important; } }