/* Diário de bordo da Vale Atlântica (09/10/2026): caderno de campo claro, o rio como linha do tempo. */
:root {
  --jucara: #10261f; --jucara-2: #0b1a15; --neblina: #eef2ee; --papel: #f6f8f5; --mata: #1e5b43; --mata-luz: #5fc29a;
  --ribeira: #2e8b87; --ribeira-luz: #5ec7c1; --bromelia: #d94f5c; --banana: #f0c24b;
  --tinta: #10261f; --tinta-2: #4a5d55; --linha: #d6ded8; --cartao: #fff;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --texto: 'Instrument Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #0e1f19; --neblina: #13281f; --tinta: #e6ece8; --tinta-2: #a8b9b0; --linha: #2a4238; --cartao: #15302a; --mata: #5fc29a; --ribeira: #5ec7c1; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { background: var(--papel); color: var(--tinta); font: 400 17px/1.6 var(--texto); overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ribeira); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; text-wrap: balance; letter-spacing: -.03em; }
.rot { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ribeira); }
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 14px 26px; border-radius: 999px; font: 600 16px/1 var(--texto); text-decoration: none; transition: transform .2s; }
.bt:active { transform: scale(.97); }
.bt--escuro { background: var(--jucara); color: var(--neblina); }
.bt--banana { background: var(--banana); color: var(--jucara); box-shadow: 0 14px 30px -14px rgba(240,194,75,.9); }
@media (prefers-color-scheme: dark) { .bt--escuro { background: var(--neblina); color: var(--tinta); border: 1px solid var(--linha); } }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px; background: color-mix(in srgb, var(--papel) 88%, transparent); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca span { font: 800 19px/.9 var(--display); letter-spacing: -.03em; } .marca b { display: block; font-weight: 400; }
.topo__cta { padding: 9px 16px; border-radius: 99px; background: var(--banana); color: var(--jucara); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }

/* abertura */
.abre { width: min(1120px, 100%); margin: 0 auto; padding: clamp(56px, 10vw, 120px) 20px clamp(48px, 7vw, 80px); }
.abre h1 { font-size: clamp(46px, 9vw, 112px); font-weight: 800; margin: 18px 0 22px; }
.abre h1 em { font-style: normal; font-weight: 400; color: var(--mata); }
.abre__sub { max-width: 58ch; font-size: clamp(17px, 2vw, 20px); color: var(--tinta-2); }
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 36px 0 34px; max-width: 900px; }
.numeros div { padding: 16px 18px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); }
.numeros dt { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.numeros dd { font: 800 clamp(26px, 3.4vw, 38px)/1.1 var(--display); letter-spacing: -.03em; margin-top: 6px; }
.numeros .vivo dd { color: var(--mata); display: flex; align-items: center; gap: 10px; }
.numeros .vivo dd::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--mata-luz); box-shadow: 0 0 0 0 rgba(95,194,154,.7); animation: pulsa 2s infinite; flex: none; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 12px rgba(95,194,154,0); } 100% { box-shadow: 0 0 0 0 rgba(95,194,154,0); } }

/* o diário */
.diario { background: var(--neblina); border-block: 1px solid var(--linha); padding: clamp(56px, 8vw, 96px) 20px; }
.diario__cab, .rio, .proximo { width: min(900px, 100%); margin-inline: auto; }
.diario__cab h2, .ideia h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; }
.diario__cab p { color: var(--tinta-2); margin-top: 12px; max-width: 60ch; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.filtros button { padding: 8px 15px; border-radius: 99px; border: 1px solid var(--linha); background: var(--cartao); font-size: 14.5px; font-weight: 500; }
.filtros button[aria-pressed="true"] { background: var(--jucara); color: var(--neblina); border-color: var(--jucara); }
@media (prefers-color-scheme: dark) { .filtros button[aria-pressed="true"] { background: var(--mata-luz); color: #0b1a15; border-color: var(--mata-luz); } }
.filtros small { opacity: .6; margin-left: 4px; font-family: var(--mono); font-size: 12px; }

.rio { position: relative; margin-top: 44px; padding-left: 44px; }
.rio__linha { position: absolute; left: 13px; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.rio__linha i { position: absolute; inset: 0 0 auto; height: calc(var(--enchente, 0) * 100%); background: linear-gradient(var(--ribeira-luz), var(--ribeira)); border-radius: 4px; }
.registros { list-style: none; display: grid; gap: 14px; }
.mes { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); padding: 22px 0 4px; position: relative; }
.mes:first-child { padding-top: 0; }
.reg { position: relative; padding: 20px 22px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); opacity: .35; transform: translateY(14px); transition: opacity .6s, transform .6s, box-shadow .3s; }
.reg.aceso { opacity: 1; transform: none; }
.reg::before { content: ''; position: absolute; left: -38px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--papel); border: 3px solid var(--linha); transition: background .5s, border-color .5s, box-shadow .5s; }
.reg.aceso::before { background: var(--banana); border-color: var(--banana); box-shadow: 0 0 0 5px rgba(240,194,75,.25), 0 0 18px rgba(240,194,75,.8); }
.reg__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 12.5px/1 var(--mono); color: var(--tinta-2); }
.reg__data { color: var(--tinta); font-weight: 500; }
.reg__tag { padding: 4px 9px; border-radius: 99px; background: color-mix(in srgb, var(--ribeira) 14%, transparent); color: var(--ribeira); letter-spacing: .04em; }
.reg__distancia { margin-left: auto; }
.reg h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; letter-spacing: -.015em; margin: 12px 0 10px; }
.reg__par { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15.5px; }
.reg__par dt { font: 500 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.reg__par dd { color: var(--tinta); }
.reg__par dd.chegou { color: var(--tinta-2); }
.reg__ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; font-size: 15px; color: var(--mata); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.reg__ver:hover { color: var(--ribeira); }
.reg--hoje { border-color: var(--banana); box-shadow: 0 18px 40px -26px rgba(240,194,75,.9); }
.reg--hoje .reg__distancia { color: var(--tinta); font-weight: 500; }
.proximo { margin-top: 26px; padding-left: 44px; font: 500 13px/1.5 var(--mono); color: var(--tinta-2); }

/* a ideia */
.ideia { width: min(1120px, 100%); margin: 0 auto; padding: clamp(64px, 9vw, 112px) 20px; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.ideia__texto h2 { margin: 16px 0 16px; }
.ideia__texto > p { color: var(--tinta-2); max-width: 54ch; }
.form { display: grid; gap: 16px; margin-top: 28px; }
.form label { display: grid; gap: 7px; font-weight: 600; font-size: 15px; }
.form__rot { display: block; } .form__rot span { font-weight: 400; color: var(--tinta-2); }
.form input, .form textarea { width: 100%; font: 400 17px/1.5 var(--texto); color: var(--tinta); background: var(--cartao); border: 1.5px solid var(--linha); border-radius: 16px; padding: 13px 16px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ribeira); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ribeira) 18%, transparent); }
.exemplos { display: flex; flex-wrap: wrap; gap: 8px; }
.exemplos button { padding: 7px 13px; border-radius: 99px; border: 1px dashed var(--linha); font-size: 14px; color: var(--tinta-2); background: transparent; text-align: left; }
.exemplos button:hover { border-color: var(--ribeira); color: var(--tinta); }

.esboco { position: sticky; top: 90px; padding: clamp(24px, 3.4vw, 34px); border-radius: 28px; background: var(--jucara); color: #eef2ee; box-shadow: 0 40px 80px -40px rgba(16,38,31,.7); }
.esboco__rot { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mata-luz); }
.esboco h3 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; margin: 14px 0 8px; overflow-wrap: anywhere; }
.esboco__tipo { color: #b9c9c0; font-size: 15.5px; }
.esboco__tipo b { color: var(--banana); font-weight: 600; }
.esboco__parecido { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(238,242,238,.07); border: 1px solid rgba(238,242,238,.12); font-size: 14.5px; color: #d4e0d9; }
.esboco__parecido a { color: var(--banana); font-weight: 600; }
.degraus { list-style: none; counter-reset: d; display: grid; gap: 12px; margin: 22px 0 24px; }
.degraus li { counter-increment: d; display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; font-size: 14.5px; color: #b9c9c0; }
.degraus li::before { content: counter(d); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--mono); background: rgba(238,242,238,.1); color: #eef2ee; transition: background .4s, color .4s; }
.degraus b { color: #eef2ee; font-weight: 600; font-size: 15.5px; }
.esboco.pronto .degraus li::before { background: var(--mata-luz); color: var(--jucara); }
.esboco .bt { width: 100%; }
.esboco__nota { margin-top: 12px; font-size: 12.5px; color: #8fa89b; text-align: center; }
.esboco.pisca { animation: pisca .5s; } @keyframes pisca { 40% { box-shadow: 0 0 0 4px rgba(240,194,75,.5), 0 40px 80px -40px rgba(16,38,31,.7); } }

.rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-2); justify-content: center; text-align: center; }
.rodape a { font-weight: 600; color: var(--mata); }

@media (max-width: 860px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ideia { grid-template-columns: 1fr; }
  .esboco { position: static; }
}
@media (max-width: 520px) {
  .rio { padding-left: 30px; } .rio__linha { left: 6px; } .reg::before { left: -30px; } .proximo { padding-left: 30px; }
  .reg { padding: 18px 16px; }
  .reg__par { grid-template-columns: 1fr; gap: 0; } .reg__par dd + dt { margin-top: 8px; }
  .reg__distancia { margin-left: 0; width: 100%; }
  .topo__cta { padding: 8px 13px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } .reg { transition: none; opacity: 1; transform: none; } .numeros .vivo dd::before { animation: none; }
}