/* =========================================================
   Recanto do Dario · v4
   Mesma identidade, copy e fotos da v3 (o v3.css carrega antes e dá
   cores, fontes, botões, planejador, dúvidas e rodapé). Aqui muda a
   diagramação: um caderno de campo em capítulos (Água, Fogo, Mata,
   Gente, Chegada), abertura em cena, cortinas, sanfona, mosaico em
   paralaxe e o planejador como bilhete de entrada.
   Fonte em px por breakpoint, h1 até 50px, grade até 1280px.
   ========================================================= */

/* ---------- rótulos numerados: o número do capítulo puxa a leitura ---------- */
.rotulo__num { display: inline-grid; place-items: center; min-width: 32px; height: 22px; margin-right: 10px; padding: 0 6px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 11px; letter-spacing: .08em; }
.cabeca--linha { display: grid; gap: var(--space-1); max-width: none; border-bottom: 1px solid var(--linha); padding-bottom: var(--space-3); margin-bottom: var(--space-6); }

/* =========================================================
   LINHA DE LEITURA
   ========================================================= */
.indice { position: fixed; z-index: 50; pointer-events: none; }
.indice__barra { position: fixed; left: 0; top: 0; height: 3px; width: calc(var(--lido, 0) * 100%); background: var(--ciano); z-index: 70; }

/* =========================================================
   ABERTURA EM CENA
   A seção fica presa na tela durante 2,3 alturas de rolagem. O JS
   escreve --p (0 a 1): o vídeo encolhe para uma janela com cantos
   redondos, o texto sai e a frase da marca entra palavra por palavra.
   ========================================================= */
.cena { position: relative; }
.cena__frase { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 var(--gutter); text-align: center; font: 400 44px/1.05 var(--font-display); color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.35); pointer-events: none; }
.cena__frase span { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.cena__frase span.acesa { opacity: 1; transform: none; }
.cena__onda { z-index: 4; }
.js .cena { height: 230vh; height: 230svh; }
.js .cena .abertura { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 96px 0 120px; }
.js .cena .abertura__midia,
.js .cena .abertura__veu { clip-path: inset(calc(var(--p, 0) * 14svh) calc(var(--p, 0) * 6vw) round calc(var(--p, 0) * 32px)); }
.js .cena .abertura__midia { transform: scale(calc(1 + var(--p, 0) * .06)); }
.js .cena .abertura__conteudo { opacity: calc(1 - var(--p, 0) * 3); transform: translateY(calc(var(--p, 0) * -80px)); }
.js .cena .abertura.apagada .abertura__conteudo { pointer-events: none; visibility: hidden; }
.js .cena .abertura__veu { background: linear-gradient(180deg, rgba(0,12,40,.55) 0%, rgba(0,12,40,0) 24%), linear-gradient(0deg, rgba(0,12,40,calc(.92 - var(--p, 0) * .5)) 0%, rgba(0,12,40,calc(.55 - var(--p, 0) * .3)) 38%, rgba(0,12,40,0) 66%); }
.cena__onda { position: absolute; bottom: -1px; }

/* =========================================================
   00 · A CASA
   ========================================================= */
.casa { position: relative; padding: var(--space-12) 0; overflow: hidden; }
/* no celular o ano fica no pé da seção, longe do título; no computador sobe para o alto */
.casa__ano { position: absolute; right: -24px; bottom: 8px; margin: 0; font: 400 140px/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px var(--linha); letter-spacing: -.02em; pointer-events: none; user-select: none; }
.casa__grade { position: relative; display: grid; gap: var(--space-4); }
.casa__texto > p:not(.rotulo) { color: var(--tinta-2); max-width: 56ch; }
.contadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0; }
.contadores div { padding: var(--space-2); border-radius: var(--radius-md); background: var(--papel); box-shadow: 0 1px 0 rgba(0,12,40,.06); }
.contadores dt { font: 500 11px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.contadores dd { margin: 6px 0 0; font: 400 44px/1 var(--font-display); color: var(--azul); }
.casa__foto img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-lg); }
.casa__foto--a img { aspect-ratio: 4 / 5; }
.casa__foto--b img { aspect-ratio: 4 / 3; border: 6px solid var(--nevoa); }
.casa__foto figcaption { font-size: 14px; color: var(--tinta-2); margin-top: 8px; }
.casa__foto--b { width: 72%; margin: -96px 0 0 auto; position: relative; }

/* =========================================================
   SEIS JEITOS · sanfona
   ========================================================= */
.jeitos { padding: var(--space-12) 0; }
.sanfona { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.sanfona::-webkit-scrollbar { display: none; }
.painel { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 440px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; scroll-snap-align: start; }
.painel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.painel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,12,40,.9) 0%, rgba(0,12,40,.35) 55%, rgba(0,12,40,.1) 100%); }
.painel__num { position: absolute; top: 20px; left: 24px; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; color: rgba(255,255,255,.85); }
.painel__texto { padding: var(--space-3); }
.painel__texto .icone { width: 24px; height: 24px; color: var(--ciano); margin-bottom: var(--space-1); }
.painel__texto p { color: rgba(255,255,255,.9); max-width: 36ch; font-size: 16px; }
.painel__texto .botao { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.painel .credito { position: absolute; top: 12px; right: 12px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(0,12,40,.6); font: 500 11px/1.2 var(--font-mono); color: #fff; }

@media (min-width: 1024px) {
  /* os seis painéis lado a lado; o aberto cresce e os outros viram faixas com o título na vertical */
  .sanfona { display: flex; overflow: visible; margin: 0; padding: 0; height: 600px; }
  .painel { flex: 1 1 0; min-width: 0; min-height: 0; transition: flex-grow .8s cubic-bezier(.2,.7,.2,1); cursor: pointer; }
  .painel.aberto { flex-grow: 5.2; cursor: default; }
  .painel__texto { width: 440px; flex: none; transition: opacity .45s ease .25s, transform .6s cubic-bezier(.2,.7,.2,1) .2s; }
  .painel:not(.aberto) .painel__texto { opacity: 0; transform: translateY(16px); transition-delay: 0s; pointer-events: none; }
  .painel:not(.aberto) > img { transform: scale(1.15); }
  .painel h3 { white-space: nowrap; }
  .painel::before { content: attr(data-titulo); position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font: 400 22px/1 var(--font-display); color: #fff; white-space: nowrap; transition: opacity .3s; z-index: 1; }
  .painel.aberto::before { opacity: 0; }
  .painel__num { left: 50%; transform: translateX(-50%); }
  .painel.aberto .painel__num { left: 24px; transform: none; }
  .painel .credito { transition: opacity .3s; }
  .painel:not(.aberto) .credito { opacity: 0; }
}

/* =========================================================
   01 · ÁGUA
   ========================================================= */
.agua { position: relative; overflow: hidden; background: var(--noite); color: #fff; padding: calc(var(--space-12) + 72px) 0 calc(var(--space-12) + 72px); }
.capitulo__gigante { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); margin: 0; white-space: nowrap; font: 400 120px/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(70,146,194,.35); pointer-events: none; user-select: none; }
.agua .container { position: relative; z-index: 2; }
.quedas { display: grid; gap: var(--space-6); }
.queda figcaption { margin-top: 14px; color: rgba(255,255,255,.85); max-width: 46ch; }
.queda .manuscrito { display: block; font-size: 32px; }
/* a cortina: a foto vai sendo descoberta de cima para baixo, como a água caindo */
.cortina { overflow: hidden; border-radius: var(--radius-lg); clip-path: inset(0 0 calc((1 - var(--c, 1)) * 100%) 0 round var(--radius-lg)); }
.cortina img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transform: scale(calc(1.18 - var(--c, 1) * .18)); transform-origin: 50% 0; }
.js .cortina { --c: 0; }
.agua .cuidado { margin-top: var(--space-8); }

/* faixa de palavras */
.faixa { overflow: hidden; padding: var(--space-4) 0; border-bottom: 1px solid var(--linha); }
.faixa__trilho { display: flex; width: max-content; animation: correr 38s linear infinite; }
.faixa span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font: 400 40px/1 var(--font-mao); color: var(--azul); white-space: nowrap; }
.faixa span::after { content: ""; width: 34px; height: 12px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 6c4-5 8-5 12 0s8 5 12 0 6-4 8-2' fill='none' stroke='%2300ccff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
@keyframes correr { to { transform: translateX(-50%); } }

/* =========================================================
   02 · FOGO
   ========================================================= */
.fogo { padding: var(--space-12) 0; }
.ancora-sec { position: absolute; margin-top: -96px; }
.fogo__grade { display: grid; gap: var(--space-6); }
.fogo__principal { position: relative; }
.fogo__principal img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
/* selo do preço girando devagar no canto da foto */
.fogo__preco { position: absolute; right: 16px; bottom: -28px; width: 112px; height: 112px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 18px 40px rgba(0,12,40,.25); }
.fogo__preco strong { font: 400 30px/1 var(--font-display); }
.fogo__preco span { font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.fogo__texto > div > p:not(.rotulo):not(.preco-linha) { color: var(--tinta-2); max-width: 50ch; }
.fogo__menores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--space-6); align-items: start; }
.fogo__menores img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-md); }
.fogo__menores figure:first-child img { aspect-ratio: 3 / 4; }
.fogo__menores figure:last-child { margin-top: 64px; }
.fogo__menores figure:last-child img { aspect-ratio: 4 / 5; }

/* =========================================================
   03 · MATA · mosaico
   ========================================================= */
.mata { padding: var(--space-12) 0; overflow: hidden; }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaico__coluna { display: contents; }
.mosaico figure { margin: 0; }
.mosaico img { width: 100%; height: auto; border-radius: var(--radius-md); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.mosaico figure:hover img { transform: scale(1.03); }

/* =========================================================
   04 · GENTE
   ========================================================= */
.gente { padding: var(--space-12) 0; }
.gente__topo { display: grid; gap: var(--space-3); align-items: end; margin-bottom: var(--space-6); }
.gente__nota { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.gente__nota strong { font: 400 72px/1 var(--font-display); color: var(--noite); }
.estrelas { color: var(--ciano); font-size: 22px; letter-spacing: 2px; }
.gente__nota span:last-child { font: 500 13px/1.3 var(--font-mono); color: var(--tinta-2); width: 100%; }
.carrossel { position: relative; padding: var(--space-4) var(--space-3); border-radius: var(--radius-lg); background: var(--noite); color: #fff; overflow: hidden; }
.carrossel::before { content: "\201C"; position: absolute; right: 24px; top: -24px; font: 400 220px/1 var(--font-display); color: rgba(0,204,255,.18); }
.carrossel__falas { display: grid; }
.grande-fala { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); visibility: hidden; }
.grande-fala.ativa { opacity: 1; transform: none; visibility: visible; }
.grande-fala p { font: 400 26px/1.3 var(--font-display); margin: 0 0 var(--space-2); max-width: 30ch; }
.grande-fala footer { font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--espuma); }
.carrossel__controle { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); }
.carrossel__ponto { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.carrossel__ponto::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); transition: background-color .3s, width .3s; }
.carrossel__ponto.ativo::before { background: var(--ciano); width: 40px; }
.carrossel .link-texto { color: #fff; margin: 0 0 0 auto; }
.turma { display: grid; gap: 0; margin-top: var(--space-12); }
.turma__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.turma__cartao { position: relative; margin: -56px 12px 0; padding: var(--space-3); background: var(--papel); border-radius: var(--radius-md); box-shadow: var(--sombra-cartao); }
.turma__cartao > p:not(.rotulo) { color: var(--tinta-2); }

/* =========================================================
   05 · CHEGADA · o planejador como bilhete de entrada
   ========================================================= */
.bilhete { position: relative; padding-top: 0; overflow: visible; }
.bilhete__topo { display: flex; justify-content: space-between; gap: 12px; margin: 0 calc(var(--space-2) * -1); padding: 14px var(--space-2) 18px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--azul); color: #fff; font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  /* o picote: furinhos na borda de baixo, como bilhete destacável */
  -webkit-mask: radial-gradient(circle 6px at 8px 100%, transparent 98%, #000) 0 0 / 16px 100% repeat-x;
          mask: radial-gradient(circle 6px at 8px 100%, transparent 98%, #000) 0 0 / 16px 100% repeat-x; }
.bilhete::before, .bilhete::after { content: ""; position: absolute; top: 46px; width: 22px; height: 22px; border-radius: 50%; background: var(--nevoa); }
.bilhete::before { left: -11px; } .bilhete::after { right: -11px; }

/* =========================================================
   Tablet
   ========================================================= */
@media (min-width: 768px) {
  .cena__frase { font-size: 64px; }
  .casa__ano { font-size: 220px; }
  .contadores { grid-template-columns: repeat(4, 1fr); }
  .sanfona { grid-auto-columns: 46%; }
  .capitulo__gigante { font-size: 200px; }
  .quedas { grid-template-columns: 7fr 5fr; align-items: start; gap: var(--space-4); }
  .queda--b { margin-top: 160px; }
  .mosaico { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .mosaico__coluna { display: grid; gap: 16px; align-content: start; }
  .mosaico__coluna:nth-child(2) { padding-top: 96px; }
  .gente__topo { grid-template-columns: 1.3fr 1fr; }
  .gente__nota { justify-content: flex-end; }
  .gente__nota span:last-child { width: auto; }
  .carrossel { padding: var(--space-6); }
  .grande-fala p { font-size: 34px; }
    .turma { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .turma__cartao { margin: 0 0 0 -96px; padding: var(--space-4); }
  .bilhete__topo { margin: 0 calc(var(--space-4) * -1); padding-inline: var(--space-4); }
}

/* =========================================================
   Computador
   ========================================================= */
@media (min-width: 1024px) {
  .cena__frase { font-size: 88px; letter-spacing: -.01em; }
  .casa { padding: var(--space-16) 0; }
  .casa__ano { font-size: 300px; right: 2%; top: 40px; bottom: auto; }
  .casa__grade { grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto; column-gap: var(--space-8); row-gap: var(--space-6); align-items: start; }
  .casa__texto { grid-column: 1; grid-row: 1; padding-top: var(--space-6); }
  .contadores { grid-column: 1; grid-row: 2; }
  .casa__foto--a { grid-column: 2; grid-row: 1 / span 2; }
  .casa__foto--b { position: absolute; left: 51%; bottom: -48px; width: 21%; margin: 0; }
  .contadores dd { font-size: 56px; }
  .capitulo__gigante { font-size: 320px; top: 80px; }
  .fogo__grade { grid-template-columns: 1.15fr 1fr; gap: var(--space-8); align-items: start; }
  /* a foto principal fica presa enquanto o texto e as fotos menores passam ao lado */
  .fogo__principal { position: sticky; top: 120px; }
  .fogo__principal img { aspect-ratio: 4 / 5; max-height: calc(100vh - 180px); }
  .fogo__texto { padding-top: var(--space-6); }
  .fogo__preco { width: 136px; height: 136px; right: -40px; bottom: 48px; }
  .fogo__preco strong { font-size: 36px; }
  .turma__cartao { margin-left: -160px; padding: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .js .cena { height: auto; }
  .js .cena .abertura { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
  .js .cena .abertura__midia, .js .cena .abertura__veu { clip-path: none; transform: none; }
  .js .cena .abertura__conteudo { opacity: 1; transform: none; }
  .cena__frase { display: none; }
  .js .cortina { --c: 1; }
  .faixa__trilho { animation: none; }
  .painel, .painel__texto, .grande-fala { transition: none; }
}

/* a v3 deixa as seções claras transparentes; a de água precisa do azul-noite de volta */
/* mesma força da regra da v3 (três :not), declarada depois, para ganhar */
main > section.agua:not(.a):not(.b):not(.c) { background: var(--noite); }

/* =========================================================
   SEIS JEITOS no celular: a seção fica presa e a rolagem para baixo
   corre os cartões para o lado até o último; depois a página segue.
   O JS liga a classe .pino só abaixo de 1024px e sem "reduzir movimento".
   ========================================================= */
.sanfona__progresso { display: none; }
@media (max-width: 1023px) {
  .jeitos.pino { padding: 0; }
  .jeitos.pino .jeitos__palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 64px 0 84px; overflow: hidden; }
  .jeitos.pino .cabeca--linha { margin-bottom: var(--space-3); padding-bottom: var(--space-2); }
  .jeitos.pino .sanfona { overflow-x: hidden; scroll-snap-type: none; }
  .jeitos.pino .painel { min-height: min(440px, calc(100svh - 330px)); }
  /* linha de progresso: mostra que há mais cartões e quanto falta */
  .jeitos.pino .sanfona__progresso { display: block; height: 3px; margin-top: var(--space-3); border-radius: 3px; background: var(--linha); overflow: hidden; }
  .sanfona__progresso i { display: block; height: 100%; width: var(--p, 20%); margin-left: var(--x, 0%); border-radius: 3px; background: var(--azul); }
}