@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/newsreader-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/newsreader-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* inteira · semana zero.
   Tokens: design system "inteira". Colour use and layout: brand designer
   handoff 2026-10-24 (55 Neve · 21 Bétula · 13 Tinta · 8 Fiorde · 3 rose). */
:root {
  --neve: #F7F7F5;          /* surface */
  --branco: #FFFFFF;        /* surface-raised */
  --betula: #EAE3D6;        /* surface-muted */
  --nevoa: #CBD0D3;         /* line */
  --nevoa-forte: #858D95;   /* line-strong */
  --tinta: #1E1F21;         /* ink */
  --tinta-suave: #565B60;   /* ink-muted */
  --fiorde: #5B7186;        /* accent */
  --fiorde-hover: #4E6274;
  --fiorde-suave: #DCE3EA;  /* accent-soft */
  --rosa: #C99A93;          /* rose */
  --noite: #17191C;         /* Noite surface */
  --noite-ink: #EEF0F1;     /* Noite ink */
  --noite-ink-suave: #A9B0B6;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: 21px;
  --gap-section: 55px;
  /* House curves (the animator's handles, 1:1): no overshoot. */
  --suave: cubic-bezier(0.45, 0, 0.55, 1);   /* crossfades, leaving, rotations */
  --pousar: cubic-bezier(0.25, 0.1, 0.25, 1); /* arriving, answering a press */
  --traco: cubic-bezier(0.3, 0, 0.7, 1);     /* pen speed: lines drawing on */
  /* Durations: Fibonacci frame counts at 24 fps. */
  --t-toque: 120ms;
  --t-curto: 200ms;
  --t-medio: 333ms;
  --t-pousar: 542ms;
}
@media (min-width: 760px) {
  :root { --pad: 55px; --gap-section: 89px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--neve); color: var(--tinta); font-family: var(--sans); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--fiorde); text-underline-offset: 3px; }
a:hover { color: var(--fiorde-hover); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }
strong, .strong { font-weight: 600; }
.muted { color: var(--tinta-suave); }
.small { font-size: 13px; line-height: 1.5; }
.center { text-align: center; }
:focus-visible { outline: 2px solid var(--fiorde); outline-offset: 2px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-bottom: var(--gap-section); }
.stack-21 { display: flex; flex-direction: column; gap: 21px; }
.stack-34 { display: flex; flex-direction: column; gap: 34px; }

/* Type */
.label { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-suave); line-height: 1.4; }
.label-ink { color: var(--tinta); }
.h1 { font-family: var(--serif); font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; }
.h2 { font-family: var(--serif); font-size: 30px; line-height: 1.15; }
.lead { font-size: 17px; line-height: 1.6; }
@media (min-width: 760px) {
  .h1 { font-size: clamp(48px, 5.4vw, 72px); }
  .h2 { font-size: clamp(34px, 3vw, 44px); }
  .lead { font-size: 21px; }
}

/* Button: one style on the whole page */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--fiorde); color: var(--branco); font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--fiorde-hover); color: var(--branco); }
.btn-form { min-height: 52px; width: 100%; }
.btn-block { display: flex; width: 100%; }

/* Header */
.header { padding-top: 21px; padding-bottom: 21px; }
.logo { display: block; height: 26px; width: auto; }

/* Bands: full bleed, content inside the 1200 grid */
.band { width: 100%; }
.band-in { padding-top: var(--gap-section); padding-bottom: var(--gap-section); }
.band-betula { background: var(--betula); }
.band-betula a, .band-betula a:hover { color: var(--tinta); text-decoration: underline; }
.band-noite { background: var(--noite); color: var(--noite-ink); }
.band + .section { padding-top: var(--gap-section); }
.rose-rule { display: block; width: 34px; height: 2px; background: var(--rosa); margin-bottom: 21px; }

/* Hero */
.hero { padding-top: 13px; padding-bottom: var(--gap-section); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.hero-text { display: flex; flex-direction: column; gap: 34px; }
.hero-v { display: none; flex-direction: column; gap: 21px; }
[data-versao="juntos"] .hero-v[data-v="juntos"],
[data-versao="porque"] .hero-v[data-v="porque"],
[data-versao="oque"] .hero-v[data-v="oque"] { display: flex; }
.hero-v .lead { max-width: 560px; }
.fatos { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.fatos li { display: flex; gap: 13px; align-items: baseline; line-height: 1.5; }
.fatos .label { flex: none; min-width: 84px; }
.hero-img { order: -1; position: relative; overflow: hidden; border-radius: 13px; aspect-ratio: 1200 / 920; width: 100%; }
.hero-img img, .hero-img .lottie, .hero-img .lottie svg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.hero-img img { object-fit: cover; object-position: center; }
@media (min-width: 760px) {
  .hero { padding-top: 34px; }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 55px; align-items: start; }
  .hero-img { order: 0; aspect-ratio: 4 / 5; max-height: 640px; }
}

/* Animation boxes: keep the JSON's aspect; still + player fill it */
.anim { position: relative; width: 100%; }
.anim img, .anim .lottie, .anim .lottie svg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.anim img { object-fit: contain; }

/* Reconhecimento: lines 8/12, #02 4/12; phone: #02 before the closing line */
.reconhecimento { padding-top: 34px; padding-bottom: var(--gap-section); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "linhas" "anim" "fecho"; gap: 34px; }
.rec-linhas { grid-area: linhas; display: flex; flex-direction: column; gap: 55px; max-width: 900px; }
.rec-anim { grid-area: anim; width: 176px; }
.rec-fecho { grid-area: fecho; max-width: 620px; }
.serif-line { font-family: var(--serif); font-size: 26px; line-height: 1.25; }
@media (min-width: 760px) {
  .reconhecimento { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "linhas anim" "fecho fecho"; column-gap: 55px; row-gap: 55px; }
  .rec-anim { width: 240px; justify-self: center; align-self: start; }
  .serif-line { font-size: clamp(30px, 2.8vw, 38px); }
}

/* Por quê (Bétula band) */
.porque-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.crenca { font-family: var(--serif); font-size: 28px; line-height: 1.2; max-width: 920px; margin-top: 21px; }
.porque-ilus { width: 200px; }
.ilus img { display: block; width: 100%; height: auto; }
@media (min-width: 760px) {
  .porque-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 55px; align-items: end; }
  .crenca { font-size: clamp(34px, 3.6vw, 48px); }
  .porque-ilus { width: 280px; justify-self: end; }
}

/* Como: one stage, five verbs */
.como { padding-top: var(--gap-section); }
.como .h2 { margin-bottom: 34px; }
.como-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.como-palco-wrap { position: sticky; top: var(--topo); z-index: 2; background: var(--neve); padding: 21px 0; display: flex; justify-content: center; }
.como-palco { position: relative; width: 160px; aspect-ratio: 1; background: var(--branco); border-radius: 13px; }
.palco-peca { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms var(--suave); }
.palco-peca.ativa { opacity: 1; }
.como-verbos { display: flex; flex-direction: column; }
.verbo { min-height: 45svh; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 13px 21px; border-radius: 8px; transition: background-color 200ms var(--suave); }
.verbo-titulo { font-family: var(--sans); font-size: 21px; font-weight: 600; line-height: 1.3; }
.verbo.ativo { background: var(--fiorde-suave); }
html:not(.js) .verbo { min-height: 0; padding: 13px 0; }
@media (min-width: 760px) {
  .como-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 55px; align-items: start; }
  .como-palco-wrap { top: 89px; padding: 0; background: transparent; justify-content: flex-start; }
  .como-palco { width: 320px; }
  .verbo { min-height: 40vh; }
}
@media (prefers-reduced-motion: reduce) { .palco-peca, .verbo { transition: none; } }

/* O quê */
.oque-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.oque-ilus img { border-radius: 13px; aspect-ratio: 1200 / 940; object-fit: cover; }
.icon-list { display: flex; flex-direction: column; gap: 21px; }
.icon-list li { display: flex; gap: 13px; align-items: flex-start; }
.ic { color: var(--tinta); flex: none; }
@media (min-width: 760px) {
  .oque-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "titulo ilus" "lista ilus"; column-gap: 55px; row-gap: 34px; align-items: start; }
  .oque-grid.sem-ilus { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "lista"; }
  .oque-titulo { grid-area: titulo; }
  .oque-ilus { grid-area: ilus; }
  .oque-lista { grid-area: lista; }
}

/* A semana (Bétula band): #08 row, then cards (≥1100) or a compact list */
.semana-row { width: 100%; }
.semana { display: flex; flex-direction: column; }
.dia { display: flex; gap: 13px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--nevoa-forte); }
.dia:last-child { border-bottom: 1px solid var(--nevoa-forte); }
.dia .label { flex: none; min-width: 64px; }
.dia-titulo { font-family: var(--serif); font-size: 21px; line-height: 1.25; }
@media (min-width: 1100px) {
  .semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 13px; }
  .dia { flex-direction: column; gap: 13px; background: var(--branco); border: 1px solid var(--nevoa); border-radius: 13px; padding: 21px; }
  .dia:last-child { border-bottom: 1px solid var(--nevoa); }
  .semana-row.alinhada { padding: 0 6.5px; }
}

/* O que fica com você (Noite band) */
.fica-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.fica { display: flex; flex-direction: column; gap: 21px; }
.fica li { display: flex; gap: 13px; align-items: flex-start; font-size: 17px; line-height: 1.5; }
.fica .ic { color: var(--noite-ink-suave); margin-top: 2px; }
@media (min-width: 760px) {
  .fica-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 55px; align-items: start; }
  .fica li { font-size: 21px; }
}

/* Quem guia */
.guia-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
@media (min-width: 760px) { .guia-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 55px; align-items: center; } }
.guia-foto { aspect-ratio: 4 / 5; max-height: 460px; background: var(--betula); border-radius: 13px; display: flex; align-items: center; justify-content: center; padding: 21px; font-size: 13px; line-height: 1.5; color: var(--tinta-suave); text-align: center; }

/* Convite (Bétula band) + form */
.convite-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.convite-anim { width: 200px; margin-top: 13px; }
@media (min-width: 760px) {
  .convite-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 55px; align-items: start; }
  .h2-convite { font-size: clamp(34px, 3.4vw, 48px); }
  .convite-anim { width: 280px; }
}
form { display: flex; flex-direction: column; gap: 21px; }
form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 16px; font-weight: 600; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
.field input, .field select { font-family: inherit; font-size: 16px; min-height: 48px; padding: 0 13px; border: 1px solid var(--nevoa-forte); border-radius: 5px; background: var(--branco); color: var(--tinta); width: 100%; appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%231E1F21' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--fiorde); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--tinta); border-width: 2px; }
.ajuda { font-size: 13px; line-height: 1.5; color: var(--tinta-suave); }
.erro { font-size: 13px; line-height: 1.5; color: var(--tinta); font-weight: 600; }
.erro::before { content: "! "; }
.form-foot { display: flex; flex-direction: column; gap: 13px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sucesso { background: var(--branco); border-radius: 13px; padding: 34px; display: flex; flex-direction: column; gap: 13px; }
.sucesso[hidden] { display: none; }
.sucesso-titulo { font-family: var(--serif); font-size: 26px; line-height: 1.25; }

/* FAQ */
.faq { display: flex; flex-direction: column; }
.faq > * { max-width: 900px; width: 100%; }
.faq h2 { margin-bottom: 34px; }
.faq details { border-top: 1px solid var(--nevoa-forte); padding: 21px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--nevoa-forte); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 13px; font-size: 18px; font-weight: 600; line-height: 1.4; min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin-top: 13px; }
.mais { color: var(--tinta); font-size: 24px; line-height: 1; flex: none; transition: transform var(--t-curto) var(--suave); }
details[open] .mais { transform: rotate(45deg); }

/* Mobile sticky bar */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--branco); border-top: 1px solid var(--nevoa-forte); padding: 13px 21px calc(13px + env(safe-area-inset-bottom)); transform: translateY(100%); opacity: 0; transition: transform var(--t-curto) var(--suave), opacity var(--t-curto) var(--suave); }
.sticky.visivel { transform: none; opacity: 1; transition: transform var(--t-medio) var(--pousar), opacity var(--t-medio) var(--pousar); }
.sticky[hidden] { display: none; }
@media (min-width: 760px) { .sticky { display: none !important; } }
@media (max-width: 759px) { body.com-sticky { padding-bottom: 80px; } }

/* Footer (Noite) */
.footer-in { padding-top: 55px; padding-bottom: 55px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 21px; }
.footer-frase { font-family: var(--serif); font-size: 34px; line-height: 1.15; color: var(--noite-ink); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; font-size: 13px; }
.footer-links img { height: 14px; width: auto; display: block; }
.footer-links a, .footer-links a:hover { color: var(--noite-ink-suave); text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------------------------------------
   Microinteractions (spec 2026-10-24; Saffer 2013, Lomakina 2017).
   Movement = transform/opacity only. Colour changes stay with reduced motion.
   ------------------------------------------------------------------ */

/* #1 Button: hover (pointer only), 1 px press, instant focus ring. */
.btn { transition: background-color var(--t-toque) var(--pousar), transform var(--t-toque) var(--pousar); position: relative; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--fiorde-hover); } }
.btn:active { background: var(--fiorde-hover); transform: translateY(1px); transition-duration: 60ms; }
.btn[aria-disabled="true"] { cursor: progress; }
.btn[aria-disabled="true"]:active { transform: none; }

/* #8 Sending: one white pen line inside the button, drawn to 61.8%, rests. */
.btn-form::after {
  content: ""; position: absolute; left: 13px; bottom: 4px; height: 2px;
  width: calc(100% - 26px); background: var(--branco); transform-origin: left;
  transform: scaleX(0); opacity: 0; pointer-events: none;
}
.btn-form.enviando::after { opacity: 1; transform: scaleX(0.618); transition: transform 1600ms var(--traco), opacity var(--t-toque) var(--pousar); }

/* #2 Links: always underlined; the line thickens on hover. */
a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--t-toque) var(--pousar); }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
  .footer-links a:hover { color: var(--noite-ink); }
  .faq summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
}
.band-noite :focus-visible { outline-color: #9DB3C8; }
.band-betula a, .band-betula a:hover { color: var(--tinta); }

/* #6 Errors arrive at the field, leave quietly. */
.erro { opacity: 0; transform: translateY(-4px); transition: opacity var(--t-toque) var(--suave), transform var(--t-toque) var(--suave); }
.erro.visivel { opacity: 1; transform: none; transition: opacity var(--t-curto) var(--pousar), transform var(--t-curto) var(--pousar); }

/* #7 Select: Fiorde suave once chosen; empty option in ink-muted. */
.field select { color: var(--tinta-suave); transition: background-color var(--t-curto) var(--suave); }
.field select.escolhido { background-color: var(--fiorde-suave); color: var(--tinta); transition: background-color var(--t-curto) var(--pousar); }
.field select.sem-transicao { transition: none; }
.field select option { color: var(--tinta); background: var(--branco); }

/* #9/#10 Welcome: the form steps back, the card lands, "Thiago" last. */
form { transition: opacity var(--t-medio) var(--suave); }
form.saindo { opacity: 0; pointer-events: none; }
.sucesso { opacity: 0; transform: translateY(8px); }
.sucesso.chegou { opacity: 1; transform: none; transition: opacity var(--t-pousar) var(--pousar), transform var(--t-pousar) var(--pousar); }
.sucesso > .strong { opacity: 0; }
.sucesso.assinou > .strong { opacity: 1; transition: opacity var(--t-medio) var(--suave); }
.sucesso:focus { outline: none; }
.sucesso:focus-visible { outline: 2px solid var(--fiorde); outline-offset: 2px; }
.convite h2:focus { outline: none; }

/* #12 FAQ: the answer arrives; height animates where supported. */
.faq details[open] > p { animation: chegar var(--t-curto) var(--pousar); }
@keyframes chegar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height var(--t-curto) var(--pousar), content-visibility var(--t-curto) allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* #13 Lazy illustrations: fade only if they finish loading while in view. */
.ilus img.pode-surgir:not(.surgiu) { opacity: 0; }
.ilus img.pode-surgir { transition: opacity var(--t-medio) var(--suave); }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .sticky, .sticky.visivel { transform: none; transition: opacity var(--t-toque) linear; }
  .btn-form.enviando::after { transition: opacity var(--t-toque) linear; }
  .erro, .erro.visivel, .sucesso, .sucesso.chegou { transform: none; }
  .faq details[open] > p { animation: none; }
  .mais { transition: none; }
  .ilus img.pode-surgir:not(.surgiu) { opacity: 1; }
  .faq details::details-content { transition: none; }
}

/* ------------------------------------------------------------------
   Scrollytelling: the scroll is the timeline. A .scene is N screens tall;
   its .scene-pin sticks for that distance while JS maps the progress to
   text steps and animation frames. Only with html.scrolly (JS on, motion
   allowed, no Save-Data); otherwise the page reads as a normal page.
   ------------------------------------------------------------------ */
html.scrolly .scene { position: relative; height: calc(var(--passos, 2) * 100vh); height: calc(var(--passos, 2) * 100svh); }
@media (max-width: 759px) { html.scrolly .scene { height: calc(var(--passos-m, var(--passos, 2)) * 100svh); } }
html.scrolly .scene-pin { position: sticky; top: var(--topo); height: calc(100vh - var(--topo)); height: calc(100svh - var(--topo)); display: flex; align-items: center; overflow: hidden; }
html.scrolly .scene-pin > .wrap { width: 100%; }
html.scrolly .scene-rec .reconhecimento { padding-top: 0; padding-bottom: 0; }
html.scrolly [data-passo] { will-change: opacity; }
html.scrolly .scene-rec .rec-linhas { gap: 34px; }
@media (min-width: 760px) { html.scrolly .scene-rec .rec-linhas { gap: 55px; } }
@media (max-width: 759px) {
  html.scrolly .scene-rec .reconhecimento { gap: 21px; }
  html.scrolly .scene-rec .rec-anim { width: 144px; }
  html.scrolly .scene-semana .band-in { padding-top: 34px; padding-bottom: 34px; gap: 21px; }
  html.scrolly .scene-semana .dia { padding: 8px 0; }
}
/* The day being filled lights up on its card (ink label, ink border). */
.dia .label, .dia { transition: color var(--t-curto) var(--pousar), border-color var(--t-curto) var(--pousar); }
/* Day being filled: 2px ink outline (no fill, no Fiorde, nothing shifts);
   phone list: a 2px ink rule on the left. */
.dia { transition: outline-color var(--t-curto) var(--pousar), box-shadow var(--t-curto) var(--pousar); outline: 2px solid transparent; outline-offset: -1px; }
.dia.aceso .label { color: var(--tinta); }
@media (min-width: 1100px) { .dia.aceso { outline-color: var(--tinta); } }
@media (max-width: 1099px) { .dia { padding-left: 13px; } .dia.aceso { box-shadow: inset 2px 0 0 var(--tinta); } }
[data-pause].trocando img { opacity: 0; transition: opacity 200ms var(--suave); }

/* Header: logo left, member login right (24/10) */
.header { display: flex; align-items: center; justify-content: space-between; gap: 21px; }
.logo-anim { width: auto; height: 26px; aspect-ratio: 78371 / 18632; flex: none; }
/* Secondary button (design system: line-strong border, ink, 44px, Manrope 600 16px) */
.btn-secundario { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 21px; border: 1px solid var(--nevoa-forte); border-radius: 8px; background: transparent; color: var(--tinta); font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color var(--t-toque) var(--pousar), background-color var(--t-toque) var(--pousar); }
@media (hover: hover) and (pointer: fine) { .btn-secundario:hover { border-color: var(--tinta); color: var(--tinta); text-decoration: none; } }
.btn-secundario:active { transform: translateY(1px); }
.header-entrar { flex: none; }
@media (max-width: 380px) { .header-entrar { padding: 0 13px; font-size: 15px; } }

/* Como (24/10): titles in italic serif; on mobile the stage sits left,
   the words right; snappier steps. */
.verbo-titulo { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.2; }
@media (max-width: 759px) {
  .como-grid { grid-template-columns: 148px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .como-palco-wrap { top: calc(50svh - 74px + var(--topo) / 2); padding: 0; background: transparent; justify-content: flex-start; }
  .como-palco { width: 148px; }
  .verbo { min-height: 34svh; padding: 13px; }
  .verbo-titulo { font-size: 21px; }
}
@media (min-width: 760px) { .verbo { min-height: 30vh; } .verbo-titulo { font-size: 28px; } }
.oque-anim { border-radius: 13px; overflow: hidden; }

/* ------------------------------------------------------------------
   Member pages (/entrar, /area)
   ------------------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo-link { display: inline-flex; }
.m-main { padding-top: 21px; padding-bottom: 89px; }
.m-card { background: var(--branco); border: 1px solid var(--nevoa); border-radius: 13px; padding: 34px 21px; max-width: 560px; display: flex; flex-direction: column; gap: 21px; }
@media (min-width: 760px) { .m-card { padding: 55px; } }
.m-vista { display: flex; flex-direction: column; gap: 21px; }
.m-vista[hidden] { display: none; }
.m-vista h1:focus, .m-vista p:focus { outline: none; }
.m-links { display: flex; flex-wrap: wrap; gap: 13px 21px; align-items: center; }
.m-link { background: none; border: 0; padding: 0; font: inherit; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .m-link:hover { color: var(--fiorde); text-decoration-thickness: 2px; } }
.m-saiu { margin-bottom: 8px; }
.m-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 21px 0 55px; }
.m-topo-texto { display: flex; flex-direction: column; gap: 13px; }
.m-pote { margin: 0; display: flex; gap: 21px; align-items: center; }
.m-pote svg { width: 120px; height: 120px; flex: none; }
.m-pote figcaption { display: flex; flex-direction: column; gap: 5px; max-width: 280px; }
.m-pote-agua { fill: var(--fiorde); transform-box: fill-box; transform: translateY(91.17%); transition: transform 900ms var(--pousar); }
.sem-movimento .m-pote-agua { transition: none; }
.m-pote-cheio { font-family: var(--serif); font-style: italic; font-size: 18px; }
@media (min-width: 760px) { .m-topo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 55px; } }
.m-vazio { margin-bottom: 34px; max-width: none; }
.a-dias { display: flex; flex-direction: column; gap: 13px; margin-bottom: 55px; }
.a-dia { background: var(--branco); border: 1px solid var(--nevoa); border-radius: 13px; padding: 21px; display: flex; flex-direction: column; gap: 13px; transition: border-color var(--t-curto) var(--pousar); }
.a-dia-topo { display: flex; justify-content: space-between; gap: 13px; }
.a-dia-titulo { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.a-dia.fechado { background: transparent; }
.a-dia.fechado .a-dia-titulo { color: var(--tinta-suave); }
.a-dia.feito { border-color: var(--tinta); }
.a-dia-corpo { display: flex; flex-direction: column; gap: 21px; }
.a-dia-corpo:empty { display: none; }
.a-audio { display: flex; flex-direction: column; gap: 8px; }
.a-audio audio { width: 100%; }
.a-caderno { font-weight: 600; color: var(--tinta); }
.a-pergunta { background: var(--betula); border-radius: 8px; padding: 21px; display: flex; flex-direction: column; gap: 8px; }
.a-pergunta-texto { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; }
.a-acoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.a-feito { display: none; align-items: baseline; gap: 13px; font-weight: 600; }
.a-dia.feito .a-feito { display: flex; }
.a-dia.feito .a-marcar { display: none; }
.a-desfazer { background: none; border: 0; padding: 0; font: inherit; font-weight: 400; color: var(--tinta); text-decoration: underline; cursor: pointer; min-height: 44px; }
.a-carregando { color: var(--tinta-suave); }
.m-circulo { border-radius: 13px; margin-bottom: 21px; }
.m-circulo-in { padding: 34px 21px; display: flex; flex-direction: column; gap: 13px; }
@media (min-width: 760px) { .m-circulo-in { padding: 34px 55px; } }
.m-lembrete { max-width: 720px; }

/* No horizontal scroll on mobile (Thiago 24/10). `clip` keeps the sticky
   scenes working (hidden would create a scroll container). */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@media (max-width: 759px) {
  body { touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
  img, svg, .anim, .lottie { max-width: 100%; }
}

/* Sticky header (brand designer 24/10, Thiago: "I need to be present"):
   the lockup stays on screen the whole way down, at the same place and
   size, so the name is never out of sight. Fixed height, so nothing below
   jumps; a Névoa hairline appears only once the page moves. Neve on every
   band (one anchor, same colours throughout). */
:root { --topo: 70px; }
@media (max-width: 759px) { :root { --topo: 60px; } }
html { scroll-padding-top: var(--topo); }
.topo { position: sticky; top: 0; z-index: 20; background: var(--neve); border-bottom: 1px solid transparent; transition: border-color var(--t-curto) var(--suave); }
.topo.rolou { border-bottom-color: var(--nevoa); }
.topo .header { height: var(--topo); padding-top: 0; padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .topo { transition: none; } }

/* Real photo of Thiago (graded calm, 24/10) */
.guia-foto-real { display: block; padding: 0; overflow: hidden; background: var(--betula); max-width: 368px; width: 100%; }
.guia-foto-real img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hero clarity (brand designer 24/10): label, H1, lead, three rows,
   reassurance, button, start date. Phone: art below the button. Only the
   H1 changes per C3 arm. */
.hero-text { gap: 21px; }
.hero-copy { display: flex; flex-direction: column; gap: 13px; max-width: 560px; }
.hero-copy .label { margin-bottom: 0; }
.hero-v { display: none; }
[data-versao="juntos"] .hero-v[data-v="juntos"],
[data-versao="porque"] .hero-v[data-v="porque"],
[data-versao="oque"] .hero-v[data-v="oque"] { display: block; }
.hero-linhas { display: flex; flex-direction: column; gap: 13px; margin: 8px 0 0; padding: 0; list-style: none; }
.hero-linhas li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 13px; align-items: baseline; font-size: 16px; line-height: 1.4; color: var(--tinta); }
.hero-linhas .label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--tinta-suave); }
.hero-tranquilo { font-size: 16px; line-height: 1.5; color: var(--tinta-suave); margin: 0; }
.hero-acao { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hero-inicio { font-size: 13px; line-height: 1.5; color: var(--tinta-suave); margin: 0; max-width: 560px; }
@media (max-width: 759px) {
  .hero { padding-top: 8px; }
  .hero-img { order: 0; }
  .hero .h1 { font-size: 34px; line-height: 1.15; }
  .hero .lead { font-size: 16px; line-height: 1.5; }
  .hero-acao .btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Story + palette (brand designer 24/10, "story and colour").
   Fiorde profundo: the turn and the footer. Centeio: the payoff, once.
   Fiorde stays on light surfaces only (button, potes, logo, links).
   --------------------------------------------------------------------- */
:root {
  --fundo: #2E4A5F;        /* field-deep · Fiorde profundo */
  --fundo-ink: #F7F7F5;    /* text on it, 8.7:1 */
  --fundo-suave: #DCE3EA;  /* labels and links on it, 7.2:1 */
  --centeio: #D9B26A;      /* field-warm · ink only, 8.3:1 */
}
.stack-13 { display: flex; flex-direction: column; gap: 13px; }
.band-fundo { background: var(--fundo); color: var(--fundo-ink); }
.band-fundo a, .band-fundo a:hover { color: var(--fundo-suave); text-decoration: underline; }
.band-fundo :focus-visible { outline-color: var(--fundo-suave); }
.band-centeio { background: var(--centeio); color: var(--tinta); }
.band-centeio .label { color: var(--tinta); }
.band-centeio a, .band-centeio a:hover { color: var(--tinta); text-decoration: underline; }
.band-centeio :focus-visible { outline-color: var(--tinta); }
.ink-rule { display: block; width: 34px; height: 2px; background: var(--tinta); }

/* Open-loop closers: the half-finished line at the end of each chapter */
.fecha { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--tinta); }
@media (min-width: 760px) { .fecha { font-size: 28px; } }

/* Header: the member link is quiet text, never a second button */
.header-entrar { font-size: 13px; font-weight: 600; color: var(--tinta); text-decoration: none; padding: 13px 0; min-height: 44px; display: inline-flex; align-items: center; }
.header-entrar:hover { color: var(--tinta); text-decoration: underline; }

/* Hero, calmer: sentence-case serif row labels, one line under the button */
.hero-linhas { gap: 8px; }
.hero-linhas li { grid-template-columns: 96px minmax(0, 1fr); }
.linha-rotulo { font-family: var(--serif); font-size: 21px; line-height: 1.2; color: var(--tinta); }
@media (max-width: 759px) {
  /* The coador peeks ~89px above the fold: the half-seen cup is the scroll cue */
  .hero-text { min-height: calc(100svh - var(--topo) - 89px - 8px - 21px); justify-content: center; }
}

/* Chapter 1 opener */
.rec-abre { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--tinta-suave); }

/* Chapter 2 · O segundo: type only, the gap opens as you scroll */
.segundo { display: flex; flex-direction: column; gap: 34px; padding-top: var(--gap-section); padding-bottom: var(--gap-section); }
.segundo-frase { font-family: var(--serif); font-size: 34px; line-height: 1.25; color: var(--fundo-ink); max-width: 1000px; }
.segundo-gap { display: inline-block; width: var(--gap, 1.5em); transition: none; }
.segundo-dest { color: var(--fundo-suave); font-style: italic; }
.segundo-fecha { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--fundo-suave); }
@media (min-width: 760px) {
  .segundo-frase { font-size: 55px; line-height: 1.15; }
  .segundo-gap { width: var(--gap, 2.5em); }
  .segundo-fecha { font-size: 28px; }
}
html.scrolly .scene-segundo .segundo { padding-top: 0; padding-bottom: 0; }

/* Por quê */
.porque-texto .fecha { margin-top: 34px; }

/* Chapter 4 · one morning: #11 opens, then at least one screen before the stage */
.como-abre { display: flex; flex-direction: column; gap: 21px; margin-bottom: 55px; }
.como-abre .h2 { margin-bottom: 0; }
.como-tranquilo { max-width: 620px; color: var(--tinta-suave); }
.como-ilus { max-width: 720px; }
.como-fecha { margin-top: 34px; }

/* Chapter 6 · Centeio payoff: plain ink lines, no icons */
.fica li { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--tinta); }
@media (min-width: 760px) { .fica li { font-size: 28px; } }
html.scrolly .fica li[data-fica] { will-change: opacity; }

/* Chapter 7 opener */
.guia-abre { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--tinta-suave); }

/* Footer on Fiorde profundo */
.footer.band-fundo .footer-frase { color: var(--fundo-ink); }
.footer.band-fundo .footer-links a, .footer.band-fundo .footer-links a:hover { color: var(--fundo-suave); }
.segundo-frase { max-width: none; }
.segundo-frase span, .segundo-frase em { white-space: nowrap; }
@media (max-width: 759px) {
  .hero-linhas li { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
}

/* Illustrator's icon set (24/10): line in ink, spot up to 61.8%.
   On Neve: line only (Fiorde suave is too faint there). On Centeio: Neve spot.
   Footer (Fiorde profundo): Neve line, no spot. */
.ic { flex: none; width: 24px; height: 24px; }
.ic .spot { fill: var(--spot, none); }
.hero-linhas li { grid-template-columns: 24px minmax(0, 1fr); gap: 13px; align-items: center; }
.ic-par { display: inline-flex; gap: 8px; margin-right: 13px; vertical-align: -5px; color: var(--tinta); }
.como-tranquilo { display: flex; align-items: center; gap: 0; }
.band-centeio { --spot: var(--neve); }
.fica li { display: flex; gap: 13px; align-items: flex-start; }
.fica li .ic { margin-top: 0.15em; width: 28px; height: 28px; }
.mais { display: inline-flex; font-size: 0; transform: none !important; }
.mais .ic-menos { display: none; }
details[open] .mais .ic-mais { display: none; }
details[open] .mais .ic-menos { display: block; }
.footer-links a { gap: 8px; }
.footer-links .ic { width: 18px; height: 18px; }
.header-entrar.btn-secundario { font-size: 16px; padding: 0 21px; min-height: 44px; text-decoration: none; }
.header-entrar.btn-secundario:hover { text-decoration: none; }
@media (max-width: 380px) { .header-entrar.btn-secundario { padding: 0 13px; font-size: 15px; } }

/* ---------------------------------------------------------------------
   Every button fills like the pote (Thiago 24/10): on hover or press the
   colour rises to 61.8% (never full), the surface sloshes, then settles
   flat. Primary: Fiorde → Fiorde hover. Secondary: Neve → Fiorde suave.
   The fill sits under the label (z-index -1 inside an isolated button).
   --------------------------------------------------------------------- */
.btn, .btn-secundario {
  --enche: #2E4A5F; /* Fiorde profundo: white label 8.7:1 */
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q12 0 24 4T48 4V8H0Z' fill='%232E4A5F'/%3E%3C/svg%3E");
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-secundario {
  --enche: var(--fiorde-suave);
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q12 0 24 4T48 4V8H0Z' fill='%23DCE3EA'/%3E%3C/svg%3E");
}
.btn::before, .btn-secundario::before {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 0; z-index: -1; pointer-events: none;
  background: var(--onda) 0 -1px / 48px 7px repeat-x, linear-gradient(var(--enche), var(--enche)) 0 6px / 100% calc(100% - 6px) no-repeat;
  transition: height var(--t-medio) var(--suave);
}
/* The base colour stays; only the water changes the button */
.btn:hover, .btn:active { background: var(--fiorde); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before, .btn-secundario:hover::before { height: 61.8%; animation: agua 1100ms var(--pousar) both; transition: height var(--t-pousar) var(--pousar); }
}
.btn.enchendo::before, .btn-secundario.enchendo::before, .btn:focus-visible::before, .btn-secundario:focus-visible::before {
  height: 61.8%; animation: agua 1100ms var(--pousar) both; transition: height var(--t-pousar) var(--pousar);
}
@keyframes agua {
  0%   { background-position: 0 -1px, 0 6px;     background-size: 48px 7px, 100% calc(100% - 6px); }
  35%  { background-position: -20px 0, 0 6px;    background-size: 48px 6px, 100% calc(100% - 6px); }
  70%  { background-position: -38px 3px, 0 6px;  background-size: 48px 3px, 100% calc(100% - 6px); }
  100% { background-position: -48px 6px, 0 6px;  background-size: 48px 0.01px, 100% calc(100% - 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn-secundario::before { transition: none; animation: none !important; background: linear-gradient(var(--enche), var(--enche)); }
}

/* ---- PR #5 review fixes (brand designer, illustrator, content writer) ---- */
/* Icons on Centeio in ink, Neve spot; footer icons in Neve, no spot */
.band-centeio .ic, .fica .ic { color: var(--tinta); }
.band-centeio .ic .spot { fill: var(--neve); }
.footer .ic { color: var(--fundo-ink); }
.footer .ic .spot { display: none; }
.hero-linhas .ic { align-self: start; margin-top: 1px; }

/* Ch 1: the opener is a heading; the first line is there when it pins */
.rec-abre { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--tinta); font-weight: 400; }
@media (min-width: 760px) { .rec-abre { font-size: 34px; } }

/* Phone hero: 34 px from the header to the label, no vertical centring */
@media (max-width: 759px) {
  .hero { padding-top: 34px; }
  .hero-text { min-height: 0; justify-content: flex-start; }
}

/* Ch 2: the first line never breaks on desktop, so the gap is seen opening */
@media (min-width: 760px) {
  .segundo-l1 { white-space: nowrap; }
  .segundo-frase { font-size: clamp(34px, 3.7vw, 55px); }
}
/* Ch 2 phone: the closing line sits 89 px above the end of the band */
@media (max-width: 759px) {
  html.scrolly .scene-segundo .scene-pin { align-items: flex-end; }
  html.scrolly .scene-segundo .segundo { padding-bottom: 89px; }
}

/* Ch 3: crop the belief art at the sill until the illustrator fixes the floor */
.porque-ilus { overflow: hidden; aspect-ratio: 640 / 480; align-self: start; }
.porque-ilus .anim { width: 100%; }

/* Ch 4 desktop: #11 at most a 5/12 column beside the heading */
@media (min-width: 760px) {
  .como-abre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 55px; align-items: start; }
  .como-ilus { max-width: 460px; justify-self: end; width: 100%; }
}
/* Ch 4 → 5: one full screen for "Amanhã tem outra." so the last stage pote
   is gone before the week's potes arrive (one vessel per view) */
.como-fecha { min-height: calc(100svh - var(--topo)); display: flex; align-items: center; margin: 0; }
.como-fecha .fecha { margin: 0; }

/* Ch 4 phone: one column, the stage sticks at the top, 160 × 160, centred */
@media (max-width: 759px) {
  .como-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .como-palco-wrap { position: sticky; top: var(--topo); padding: 13px 0; background: var(--neve); justify-content: center; z-index: 2; }
  .como-palco { width: 160px; }
  .como-verbos { padding-top: 21px; }
}

/* Ch 5 phone: the day marker never cuts "DIA" */
@media (max-width: 1099px) { html.scrolly .scene-semana .dia, .dia { padding-left: 21px; } }

/* Ch 7 opener */
.guia-abre { font-size: 21px; color: var(--tinta); margin-bottom: -8px; }
@media (min-width: 760px) { .guia-abre { font-size: 28px; } }
@media (max-width: 759px) { .segundo-frase .segundo-l1 { white-space: normal; } }

/* UX review 24/10 */
.pular { position: absolute; left: 13px; top: -100px; z-index: 50; background: var(--branco); color: var(--tinta); padding: 13px 21px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 13px; }
main:focus { outline: none; }
.convite-inicio { font-size: 16px; line-height: 1.5; color: var(--tinta); font-weight: 600; }
.m-nao-membro { margin-top: 21px; font-size: 16px; color: var(--tinta-suave); }
.header-convite { font-size: 13px; font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 0.18em; margin-left: auto; padding: 13px 8px; }
.header .header-convite + .header-entrar { margin-left: 13px; }

/* Parallax (24/10): the picture moves inside its frame, slightly enlarged so
   the edges never show. Only with html.scrolly (motion allowed, not Save-Data). */
html.scrolly [data-paralaxe-dentro] { overflow: hidden; }
html.scrolly [data-paralaxe-dentro] > * { transform: translate3d(0, var(--py, 0), 0) scale(1.1); will-change: transform; }
html.scrolly .hero-img[data-paralaxe-dentro] > * { position: absolute; inset: 0; }
html.scrolly [data-paralaxe] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  [data-paralaxe-dentro] > *, [data-paralaxe] { transform: none !important; }
}

/* ---------------------------------------------------------------------
   Public website (interest list) · brand designer brief 24/10
   --------------------------------------------------------------------- */
.lista-area { max-width: 460px; }
#lista-form { display: flex; flex-direction: column; gap: 13px; }
#lista-form[hidden] { display: none; }
#lista-form .field { gap: 5px; }
.field-opcional summary { cursor: pointer; font-size: 15px; color: var(--tinta); list-style: none; min-height: 32px; display: flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.field-opcional summary::-webkit-details-marker { display: none; }
.field-opcional[open] summary { text-decoration: none; }
.field-opcional input { margin-top: 5px; }
.site-hero .hero-text { gap: 21px; }
@media (max-width: 759px) {
  .site-hero { padding-top: 21px; }
  .site-hero .h1 { font-size: 30px; }
  .site-hero .lead { font-size: 16px; }
  .site-hero .hero-img { order: 0; }
}
.logo-link { display: inline-flex; }
.site-fim .lead { max-width: 620px; }
@media (min-width: 760px) { .site-hero .h1 { font-size: clamp(40px, 3.6vw, 52px); line-height: 1.1; } .site-hero .hero-grid { align-items: center; } }