/* Home — direção "a frase é o layout" (tasteskill), com a paleta e a fonte do WORLDEXIS.
   Ideia: o nome WORLDEXIS é a frase; o "O" de WORLD é um globo terrestre real (acervo do Metropolitan Museum).
   Sem filetes, sem degradês, sem sombras em repouso; superfícies por tom; números tabulares. */
body.home { --ink: var(--text); --stage: #040d1c; --inv: #e9eff8; --inv-ink: #0a1b36; --gap-section: clamp(72px, 11vw, 176px); --side: clamp(16px, 4vw, 32px); }
:root[data-theme="light"] body.home { --stage: #0a1b36; }
body.home .wrap { width: min(1280px, 100% - 2 * var(--side)); }

/* ---------- 1. Hero: o nome é a frase ---------- */
body.home .hero { min-height: calc(100svh - 68px); display: flex; align-items: center; padding: clamp(24px, 5vw, 56px) var(--side); background: none; }
.hero-in { display: grid; gap: clamp(32px, 6vw, 72px); width: min(1280px, 100%); margin-inline: auto; }
body.home .hero .hero-name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; font: 700 clamp(3.4rem, 12.2vw, 11.5rem)/.92 var(--sans); letter-spacing: -.045em; text-wrap: nowrap; color: var(--text); }
body.home .hero .hero-name > span[aria-hidden] { display: inline-block; }
.o-frame { position: relative; display: inline-block; width: .7em; height: .7em; margin: 0 .03em; overflow: hidden; flex: none; background: #cfd5dc; clip-path: inset(0 0 100% 0); animation: shutter 1.1s cubic-bezier(0.23, 1, 0.32, 1) .15s forwards; }
.o-frame img { position: absolute; width: 215%; max-width: none; height: auto; left: -50%; top: -22%; animation: settle 1.1s cubic-bezier(0.23, 1, 0.32, 1) .15s both; }
@keyframes shutter { to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.hero-sub { margin: 0; max-width: 40ch; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.45; color: var(--muted); }
.hero-foot .btn { min-height: 56px; padding-inline: 28px; font-size: 1.0625rem; }
body.home #status { grid-column: auto; grid-row: auto; align-self: auto; }
body.home #status .signal { margin: 0; }
@media (max-width: 720px) {
  body.home .hero .hero-name { font-size: 19vw; line-height: .9; flex-direction: row; justify-content: flex-start; }
  body.home .hero .hero-name > span:last-child { flex-basis: 100%; }
  .hero-foot { flex-direction: column; align-items: stretch; }
  .hero-foot .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .o-frame { clip-path: none; animation: none; } .o-frame img { animation: none; } }

/* ---------- seções: declaração à esquerda, prova à direita; respiro grande entre blocos ---------- */
body.home section.blk { padding: var(--gap-section) 0 0; background: none; }
body.home .statement { font: 700 clamp(2rem, 4.2vw, 4rem)/1.04 var(--sans); letter-spacing: -.035em; margin: 0 0 clamp(28px, 4vw, 56px); max-width: 24ch; text-wrap: balance; }
body.home .sec-sub { font-size: 1.125rem; max-width: 56ch; color: var(--muted); }

/* ---------- 2. Escolha de destino ---------- */
body.home .live .pick label { font-size: 1.0625rem; }
body.home .live .pick-row input { min-height: 60px; font-size: 1.1875rem; padding-inline: 18px; }
body.home .live .pick-row .btn { min-height: 60px; padding-inline: 28px; font-size: 1.0625rem; }
body.home #feat { margin-top: 32px; }
body.home .feat { background: var(--surface); border-radius: 0; }
body.home .feat-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
body.home .feat-v { font-size: 1.125rem; }
body.home .pick-res { border-radius: 0; margin-top: 24px; }

/* ---------- 3. Módulos: linhas com imagem na margem, num eixo só ---------- */
body.home .mods { display: grid; grid-template-columns: 1fr; gap: clamp(64px, 8vw, 112px); }
body.home .mod { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4.4fr) minmax(0, 2.6fr); column-gap: clamp(16px, 3vw, 40px); align-items: start; background: none; padding: 0; border-radius: 0; transition: none; }
body.home .mod:hover { background: none; transform: none; }
body.home .mod > *:not(.mod-pic) { grid-column: 2; }
body.home .mod .mod-pic { grid-column: 3; grid-row: 1 / span 6; width: 100%; height: auto; object-fit: cover; display: block; align-self: start; }
body.home .mod:nth-child(1) .mod-pic { aspect-ratio: 4 / 5; }
body.home .mod:nth-child(2) .mod-pic { aspect-ratio: 3 / 2; width: 82%; }
body.home .mod:nth-child(3) .mod-pic { aspect-ratio: 1; width: 64%; }
body.home .mod:nth-child(4) .mod-pic { aspect-ratio: 3 / 2; }
body.home .mod .mod-h h2 { font: 700 clamp(1.75rem, 3.2vw, 3rem)/1.05 var(--sans); letter-spacing: -.03em; }
body.home .mod .tg { font-size: 1.1875rem; margin-top: 4px; }
body.home .mod li, body.home .mod .sig-rows div { font-size: 1.0625rem; }
body.home .mod .stat { font-size: .9375rem; margin-top: 8px; }
body.home .mod .go { font-size: 1.0625rem; }
body.home .commercial { grid-column: auto; display: grid; grid-template-columns: 1fr; gap: 20px; background: none; padding: 0; }
body.home .commercial .com-lab { grid-column: auto; padding-left: calc(100% * 3 / 10); text-transform: none; letter-spacing: 0; font-size: .9375rem; }
body.home .mod.tier-com { background: none; padding: 0; }
@media (max-width: 860px) {
  body.home .mod { grid-template-columns: 1fr; }
  body.home .mod > *:not(.mod-pic), body.home .mod .mod-pic { grid-column: 1; grid-row: auto; }
  body.home .mod .mod-pic { margin-top: 16px; order: 99; }
  body.home .mod:nth-child(2) .mod-pic { width: 70%; margin-left: auto; }
  body.home .mod:nth-child(3) .mod-pic { width: 55%; }
  body.home .commercial .com-lab { padding-left: 0; }
}

/* ---------- 4. Razão: números reais alinhados ---------- */
.ledger-in, .how-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.ledger-in .statement, .how-in .statement { position: sticky; top: 96px; }
.figures { margin: 0; display: grid; gap: clamp(20px, 2.4vw, 32px); }
.fig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(16px, 2vw, 32px); align-items: baseline; }
.fig dt { font: 700 clamp(3rem, 7vw, 6.5rem)/1 var(--sans); letter-spacing: -.04em; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.fig dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--muted); max-width: 26ch; }
@media (max-width: 860px) {
  .ledger-in, .how-in { grid-template-columns: 1fr; }
  .ledger-in .statement, .how-in .statement { position: static; }
  .fig dt { font-size: 15vw; }
  .fig { grid-template-columns: 52% 1fr; }
}

/* ---------- 5. Feed ---------- */
body.home .item { border-radius: 0; padding: 22px 0 26px; background: none; }
body.home .item + .item { margin-top: 8px; }
body.home .list { gap: 0; }
body.home .item h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.015em; }
body.home .item .sum { font-size: 1.0625rem; }
body.home .tag { background: var(--surface-2); border: 0; }

/* ---------- 6. Como se mantém atualizada ---------- */
body.home .how { max-width: none; gap: 28px; padding-left: 1.2em; font-size: 1.125rem; line-height: 1.55; }
body.home .how li { color: var(--muted); }
body.home .how strong { display: block; color: var(--text); font-size: 1.375rem; letter-spacing: -.01em; margin-bottom: 4px; }

/* ---------- 7. A pergunta nas duas bordas ---------- */
.choice { position: relative; margin-top: var(--gap-section); min-height: 100svh; background: var(--stage); color: #e8eef8; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--side); }
.choice-q { margin: 0; font: 700 clamp(3rem, 11vw, 10.5rem)/1 var(--sans); letter-spacing: -.045em; }
.choice-q span { position: absolute; left: 0; right: 0; }
.choice-q span:first-child { top: 32px; }
.choice-q span:last-child { bottom: 24px; }
.choice-row { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 7vw, 120px); }
.choice-row .btn { min-width: 200px; min-height: 56px; justify-content: center; font-size: 1.125rem; font-weight: 600; }
.choice-or { font-size: 1.125rem; color: #93a8c6; }
.choice-note { margin: 16px 0 0; color: #93a8c6; font-size: 1rem; }
@media (max-width: 720px) {
  .choice-q { font-size: 13.5vw; }
  .choice-row { flex-direction: column; gap: 12px; width: 72%; }
  .choice-row .btn { width: 100%; }
}

/* ---------- rodapé: convite sobre o nome cortado, em campo invertido ---------- */
body.home .foot { margin: 0; padding: clamp(56px, 8vw, 112px) 0 0; background: var(--inv); color: var(--inv-ink); position: relative; overflow: hidden; }
:root[data-theme="light"] body.home .foot { background: #0a1b36; color: #e8eef8; }
body.home .foot a, body.home .foot p, body.home .foot strong { color: inherit; }
body.home .foot-in { align-items: flex-start; gap: clamp(24px, 6vw, 96px); }
body.home .foot-invite { display: grid; gap: 20px; max-width: 16ch; }
body.home .foot-q { margin: 0; font: 700 clamp(1.8rem, 4.6vw, 4.2rem)/1.02 var(--sans); letter-spacing: -.035em; max-width: 14ch; }
body.home .foot .btn { background: var(--inv-ink); color: var(--inv); width: fit-content; }
:root[data-theme="light"] body.home .foot .btn { background: #e8eef8; color: #0a1b36; }
body.home .foot-in > div:not(.foot-invite) { max-width: 44ch; opacity: .85; }
body.home .foot-links a { font-size: 1rem; }
body.home .foot-credits { width: min(1280px, 100% - 2 * var(--side)); margin: clamp(32px, 5vw, 64px) auto 0; font-size: .8125rem; line-height: 1.5; opacity: .75; }
body.home .foot-mark { margin: 0; padding: 0 var(--side); font: 800 clamp(4rem, 15.4vw, 17rem)/.8 var(--sans); letter-spacing: -.05em; white-space: nowrap; transform: translateY(20%); user-select: none; }
@media (max-width: 720px) { body.home .foot-mark { font-size: 15.4vw; } }

body.home .item-meta { margin-top: 10px; }

/* ajustes após a primeira inspeção */
body.home .ledger-in .statement, body.home .how-in .statement { font-size: clamp(2rem, 3.4vw, 3.25rem); }
body.home .item h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.home .item + .item { margin-top: 40px; }
body.home .how { font-size: 1.0625rem; }
body.home .how strong { font-size: 1.1875rem; }
@media (max-width: 720px) {
  .choice-q { font-size: 11vw; }
  body.home .feat-cols { display: grid; grid-template-columns: 1fr; overflow: visible; }
  body.home .feat-col { flex: none; }
}
body.home .commercial { margin-bottom: clamp(24px, 6vw, 48px); }
body.home .commercial .com-lab { margin: 0; }
@media (max-width: 860px) { body.home .modules { padding-bottom: 24px; } }

/* ===== Acabamento de interação (emil-design-eng) ===== */
/* hover só com mouse; no toque o estado "grudaria" depois do toque */
@media (hover: hover) and (pointer: fine) {
  body.home .mod:hover .mod-h h2 { color: var(--accent2); }
  body.home .mod:hover .mod-pic { filter: brightness(1.08); }
  body.home .feat-col:hover { background: var(--surface-2); }
  body.home .foot a:hover { text-underline-offset: 4px; }
}
body.home .mod .mod-h h2 { transition: color 160ms var(--ease-out); }
body.home .mod .mod-pic { transition: filter 200ms var(--ease-out); }
/* pressão em tudo que é clicável: resposta imediata */
body.home .mod:active .mod-h h2 { color: var(--accent); }
body.home .feat-col:active { transform: scale(0.99); }
body.home .feat-col { transition: background-color 160ms var(--ease-out), transform 120ms var(--ease-out); }
/* foco visível nas três superfícies: azul-marinho, palco escuro e rodapé invertido */
body.home .mod:focus-visible { outline: 2px solid var(--accent2); outline-offset: 8px; }
body.home .foot a:focus-visible, body.home .foot .btn:focus-visible { outline: 2px solid var(--inv-ink); outline-offset: 3px; }
:root[data-theme="light"] body.home .foot a:focus-visible, :root[data-theme="light"] body.home .foot .btn:focus-visible { outline-color: #e8eef8; }
.choice .btn:focus-visible { outline: 2px solid #e8eef8; outline-offset: 4px; }
/* o obturador do globo: com movimento reduzido, só aparece (sem varredura nem zoom) */
@media (prefers-reduced-motion: reduce) {
  .o-frame { clip-path: none; animation: fade-in 200ms ease-out both; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
}