/* Aplicação · Planejamento Nutricional Estratégico
   Mesma linguagem do site: carbono, luz de LED como barra de progresso,
   Archivo expandida nas perguntas, Newsreader itálica nos destaques. */

.app {
  --bg: var(--carbon); --fg: var(--lume); --muted: #a6a29b;
  --line: rgba(251,250,246,.16); --line-strong: rgba(251,250,246,.4); --accent: var(--signal-d);
  min-height: 100svh; background: var(--carbon); color: var(--fg);
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr;
}

/* barra de progresso: a linha de luz */
.app__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; background: rgba(251,250,246,.08); }
.app__progress span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--lume); box-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 30px rgba(255,255,255,.4); transition: transform .8s var(--ease-out); }

.app__header {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem;
  height: var(--header-h); padding-inline: var(--gutter); color: var(--lume);
  background: linear-gradient(var(--carbon) 60%, transparent);
}
.app__header .brand__mono { --mono-b: var(--signal-d); }
.app__count { margin-left: auto; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; color: var(--muted); opacity: 0; transition: opacity .4s; }
.is-flow .app__count, .is-done .app__count { opacity: 1; }
.app__exit { font-size: .88rem; text-decoration: none; padding: .55rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; transition: background-color .3s, color .3s; white-space: nowrap; }
.app__exit:hover { background: var(--lume); color: var(--ink); }
.app:not(.is-flow):not(.is-done) .app__exit { margin-left: auto; }

/* painel lateral com a foto da sala de espera (desktop) */
.app__aside { display: none; }
@media (min-width: 1024px) {
  .app { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; }
  .app__aside { display: block; grid-column: 1; grid-row: 1 / 3; position: sticky; top: 0; height: 100svh; padding: 14px; }
  .app__header { grid-column: 2; }
  .app__main { grid-column: 2; }
  .app__header .brand { display: none; }
  .app__photo { position: absolute; inset: 14px; border-radius: var(--radius-l); overflow: hidden; }
  .app__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; }
  .app__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.15) 30%, rgba(10,10,10,.85)); }
  .app__aside-copy { position: absolute; left: 44px; right: 44px; bottom: 44px; color: var(--lume); }
  .app__tag { display: inline-block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; background: var(--signal-d); margin-bottom: 1rem; }
  .app__aside-title { font-size: clamp(1.8rem, 1rem + 1.6vw, 2.6rem); font-weight: 600; font-stretch: 112%; letter-spacing: -.03em; line-height: 1.02; }
  .app__aside-title em { font-family: var(--f-serif); font-weight: 400; font-stretch: 100%; }
  .app__aside-note { margin-top: .75rem; color: #d8d4cd; font-size: .95rem; }
}

.app__main { position: relative; display: grid; align-items: center; padding: clamp(1.5rem, 5vh, 4rem) var(--gutter) calc(6rem + env(safe-area-inset-bottom)); min-height: calc(100svh - var(--header-h)); }
.app__main > * { grid-area: 1 / 1; width: 100%; max-width: 720px; justify-self: center; }

/* telas de boas-vindas e agradecimento */
.screen { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.js .screen:not(.is-active) { opacity: 0; transform: translateY(24px); }
.screen.is-leaving-up { opacity: 0 !important; transform: translateY(-24px) !important; }
.app__eyebrow { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-d); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.app__eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); }
.screen__title { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); font-weight: 600; font-stretch: 112%; letter-spacing: -.04em; line-height: .98; margin-bottom: 1.75rem; }
.screen__title em { font-family: var(--f-serif); font-weight: 400; font-stretch: 100%; letter-spacing: -.02em; }
.screen__title:focus { outline: none; }
.screen__text { display: grid; gap: 1rem; color: #cfcac2; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); max-width: 56ch; }
.screen__text strong { color: var(--lume); font-weight: 600; }
.screen__text a { color: var(--lume); }
.screen__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.screen__time { color: var(--muted); font-size: .95rem; }
.screen__time em { font-family: var(--f-serif); font-size: 1.05rem; }
.btn--big { min-height: 58px; padding: 1rem 1.8rem; font-size: 1rem; }
.thanks__mark svg { width: 56px; height: 56px; --mono-a: var(--lume); --mono-b: var(--signal-d); margin-bottom: 1.5rem; }

/* perguntas */
.flow { position: relative; }
.q { border: 0; margin: 0; padding: 0; min-width: 0; transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.q.from-down { opacity: 0; transform: translateY(40px); transition: none; }
.q.from-up { opacity: 0; transform: translateY(-40px); transition: none; }
.q.is-leaving-up { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(-40px); }
.q.is-leaving-down { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(40px); }
.q.shake { animation: shake .4s var(--ease-out); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.q__n { display: flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-size: .8rem; color: var(--signal-d); margin-bottom: 1rem; }
.q__n .i { width: .9em; height: .9em; }
.q__lead { display: grid; gap: .8rem; color: #cfcac2; font-size: 1.02rem; margin-bottom: 1.5rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-m); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.q__lead strong { color: var(--lume); }
.q__t { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem); font-weight: 560; font-stretch: 108%; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.q__opt { font-size: .55em; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.q__note { margin-top: .75rem; color: var(--muted); font-size: 1rem; max-width: 60ch; }

.q__input {
  display: block; width: 100%; margin-top: 2rem; padding: .6rem 0 .7rem;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  color: var(--lume); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.8rem); font-weight: 400; font-stretch: 104%; caret-color: var(--signal-d);
  transition: border-color .3s, box-shadow .3s;
}
.q__input::placeholder { color: rgba(251,250,246,.3); }
.q__input:focus { outline: none; border-bottom-color: var(--lume); box-shadow: 0 1px 0 0 var(--lume), 0 10px 22px -16px rgba(255,255,255,.6); }
.q__input[aria-invalid="true"] { border-bottom-color: var(--signal-d); }
.q__input--long { resize: none; min-height: 3.2em; field-sizing: content; max-height: 40vh; line-height: 1.35; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.q__phone { display: flex; gap: 1rem; align-items: flex-end; }
.q__phone .q__input { flex: 1; min-width: 0; }
.q__ddi {
  flex: none; margin-top: 2rem; padding: .7rem 2rem .7rem .9rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.04); color: var(--lume); font-size: .95rem; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.q__ddi option { background: var(--carbon); }

.q__choices { display: grid; gap: .55rem; margin-top: 1.75rem; max-width: 560px; }
.choice {
  position: relative; display: flex; align-items: center; gap: .9rem; min-height: 56px; padding: .7rem 1rem;
  border-radius: var(--radius-m); border: 1px solid var(--line-strong); background: rgba(255,255,255,.04);
  cursor: pointer; transition: background-color .25s, border-color .25s, transform .4s var(--ease-out);
}
.choice:hover { background: rgba(255,255,255,.09); border-color: var(--lume); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__key { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-strong); font-family: var(--f-mono); font-size: .75rem; transition: background-color .25s, color .25s; }
.choice__txt { flex: 1; font-size: 1.02rem; line-height: 1.35; }
.choice__check { flex: none; width: 20px; height: 20px; opacity: 0; transition: opacity .25s; }
.choice__check::after { content: ""; display: block; width: 6px; height: 12px; margin: 1px auto 0; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.choice:has(input:checked) { background: var(--lume); color: var(--ink); border-color: var(--lume); }
.choice:has(input:checked) .choice__key { background: var(--ink); color: var(--lume); border-color: var(--ink); }
.choice:has(input:checked) .choice__check { opacity: 1; }
.choice:has(input:focus-visible) { outline: 2px solid var(--signal-d); outline-offset: 3px; }
.choice:active { transform: scale(.99); }

.q__err { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 8px; background: rgba(224,87,75,.14); color: #ffb3aa; font-size: .92rem; }
.q__err::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--signal-d); color: #fff; font-size: .7rem; font-weight: 700; }
.q__actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.q__hint { color: var(--muted); font-size: .82rem; }
.q__hint--long { margin-top: .6rem; font-size: .78rem; }
kbd { font-family: var(--f-mono); font-size: .78em; padding: .1rem .4rem; border-radius: 5px; border: 1px solid var(--line-strong); }
@media (hover: none) { .q__hint, .q__hint--long { display: none; } }

.flow__nav { position: fixed; right: var(--gutter); bottom: calc(1.25rem + env(safe-area-inset-bottom)); display: flex; gap: .4rem; z-index: 10; }
.flow__nav .round { background: rgba(15,15,15,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--lume); }
.flow__nav .round:disabled { opacity: .35; pointer-events: none; }

.app__noscript { padding: 2rem var(--gutter); color: var(--lume); }

@media (prefers-reduced-motion: reduce) {
  .q.from-down, .q.from-up, .q.is-leaving-up, .q.is-leaving-down { transform: none; }
  .js .screen:not(.is-active) { transform: none; }
}

.app__count { white-space: nowrap; }
@media (max-width: 480px) {
  .app__header { gap: .9rem; }
  .app__header .brand__name small { display: none; }
  .app__exit { padding: .5rem .8rem; font-size: .82rem; }
}
@media (max-width: 767.98px) {
  .flow__nav { position: static; margin-top: 1.75rem; justify-content: flex-start; }
}