/* Hallmark · macrostructure: bespoke (noite -> folha de agenda) · tone: direto, de balcão · anchor hue: azul de caneta 265
 * theme: custom · paper oklch(97% 0.008 240) · accent oklch(42% 0.17 265) · Schibsted Grotesk + Kalam (só na agenda)
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 */

:root {
  --cor-noite: oklch(21% 0.05 265);
  --cor-noite-2: oklch(27% 0.055 265);
  --cor-papel: oklch(97% 0.008 240);
  --cor-papel-2: oklch(93.5% 0.014 240);
  --cor-folha: oklch(99.2% 0.004 240);
  --cor-tinta: oklch(24% 0.05 265);
  --cor-tinta-suave: oklch(44% 0.04 265);
  --cor-luar: oklch(86% 0.03 250);
  --cor-caneta: oklch(42% 0.17 265);
  --cor-caneta-forte: oklch(35% 0.17 265);
  --cor-margem: oklch(64% 0.19 25);
  --cor-pauta: oklch(87% 0.03 240);
  --cor-balao: oklch(92% 0.08 148);
  --cor-balao-tinta: oklch(26% 0.05 160);
  --cor-branco: oklch(100% 0 0);
  --cor-lida: oklch(62% 0.15 235);
  --cor-foco: oklch(78% 0.16 85);
  --cor-destaque: oklch(85% 0.16 90);

  --fonte-texto: "Schibsted Grotesk", system-ui, sans-serif;
  --fonte-caneta: "Kalam", "Segoe Print", cursive;

  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-24: 6rem;

  --texto-p: 0.875rem;
  --texto-m: 1.0625rem;
  --texto-g: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  --texto-h3: 1.25rem;
  --texto-h2: clamp(1.875rem, 3.4vw + 1rem, 3.25rem);
  --texto-h1: clamp(2.5rem, 5.2vw + 1rem, 5.25rem);

  --raio-botao: 0.625rem;
  --raio-balao: 1rem;
  --raio-folha: 0.25rem;
  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  --sombra-folha: 0 1px 0 var(--cor-pauta), 0 18px 40px -24px oklch(24% 0.05 265 / 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--texto-m);
  line-height: 1.55;
  color: var(--cor-tinta);
  background: var(--cor-papel);
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-style: normal; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--texto-h1); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: var(--texto-h2); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
h3 { font-size: var(--texto-h3); font-weight: 700; line-height: 1.25; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; border-radius: 4px; }

.largura { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.pular { position: absolute; left: var(--esp-4); top: -4rem; padding: var(--esp-2) var(--esp-4); background: var(--cor-branco); color: var(--cor-tinta); z-index: 2; }
.pular:focus { top: var(--esp-4); }

/* ---------- botões ---------- */
.botao {
  display: inline-block;
  padding: 0.85rem 1.35rem;
  border-radius: var(--raio-botao);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s var(--suave), background-color 0.15s var(--suave);
}
.botao:active { transform: translateY(1px); }
.botao-p { padding: 0.55rem 1rem; font-size: var(--texto-p); }
.botao-claro { background: var(--cor-papel); color: var(--cor-noite); }
.botao-claro:hover { background: var(--cor-branco); }
.botao-azul { background: var(--cor-caneta); color: var(--cor-branco); }
.botao-azul:hover { background: var(--cor-caneta-forte); }

/* ---------- noite ---------- */
.noite { background: var(--cor-noite); color: var(--cor-papel); }
.topo { display: flex; align-items: center; gap: var(--esp-6); padding-block: var(--esp-6); }
.marca { display: inline-flex; align-items: center; gap: var(--esp-2); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.marca svg { width: 1.75rem; height: 1.75rem; fill: currentColor; stroke: none; }
.topo nav { display: none; gap: var(--esp-6); margin-left: auto; font-size: var(--texto-p); }
.topo nav a { color: var(--cor-luar); text-decoration: none; white-space: nowrap; }
.topo nav a:hover { color: var(--cor-papel); text-decoration: underline; text-underline-offset: 0.3em; }
.topo .botao { margin-left: auto; }

.abertura { display: grid; gap: var(--esp-12); padding-block: var(--esp-8) var(--esp-16); }
.lide { font-size: var(--texto-g); max-width: 34rem; }
.abertura .lide { margin-top: var(--esp-6); color: var(--cor-luar); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-6); margin-top: var(--esp-8); }
.link-claro { color: var(--cor-papel); text-underline-offset: 0.3em; white-space: nowrap; }
.miudo { margin-top: var(--esp-4); font-size: var(--texto-p); color: var(--cor-tinta-suave); }
.noite .miudo { color: var(--cor-luar); }

/* ---------- balões ---------- */
.msg {
  position: relative;
  width: fit-content;
  max-width: min(100%, 26rem);
  padding: 0.6rem 0.85rem 0.5rem;
  border-radius: var(--raio-balao);
  font-size: 1rem;
  line-height: 1.4;
}
.msg + .msg { margin-top: var(--esp-3); }
.recebida { background: var(--cor-branco); color: var(--cor-tinta); border-top-left-radius: 0.2rem; }
.enviada { background: var(--cor-balao); color: var(--cor-balao-tinta); border-top-right-radius: 0.2rem; margin-left: auto; }
.msg .quem { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--cor-caneta); }
.msg time { display: flex; justify-content: flex-end; align-items: center; gap: var(--esp-1); margin-top: var(--esp-1); font-size: 0.6875rem; color: var(--cor-tinta-suave); }
.msg time svg { width: 1.05rem; height: 0.7rem; stroke: var(--cor-lida); stroke-width: 1.6; }

.conversa { max-width: 30rem; }
.conversa figcaption { margin-top: var(--esp-6); font-size: var(--texto-p); color: var(--cor-luar); }

@media (prefers-reduced-motion: no-preference) {
  .conversa .msg { animation: chegar 0.5s var(--suave) both; }
  .conversa .msg:nth-child(1) { animation-delay: 0.4s; }
  .conversa .msg:nth-child(2) { animation-delay: 1.7s; }
  .conversa .msg:nth-child(3) { animation-delay: 3.1s; }
  .conversa .msg:nth-child(4) { animation-delay: 4.2s; }
  .conversa .teste { animation: chegar 0.5s var(--suave) 5s both; }
  .conversa figcaption { animation: chegar 0.5s var(--suave) 5.4s both; }
}

/* demonstração clicável */
.teste { margin-top: var(--esp-6); padding-top: var(--esp-4); border-top: 1px solid var(--cor-noite-2); }
.teste p { font-size: var(--texto-p); font-weight: 700; }
.teste div { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }
.teste button {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--cor-luar);
  border-radius: 999px;
  background: none;
  color: var(--cor-papel);
  font: inherit;
  font-size: var(--texto-p);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s var(--suave);
}
.teste button:hover { background: var(--cor-noite-2); }
.teste button:active { transform: translateY(1px); }
@keyframes chegar {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}

/* ---------- manhã: folha de agenda ---------- */
.manha { padding-block: var(--esp-16) var(--esp-24); }
.apoio { margin-top: var(--esp-4); font-size: var(--texto-g); color: var(--cor-tinta-suave); max-width: 36rem; }
.folha {
  margin-top: var(--esp-12);
  background: var(--cor-folha);
  border-radius: var(--raio-folha);
  box-shadow: var(--sombra-folha);
  border-top: 0.5rem solid var(--cor-caneta);
}
.folha-dia { padding: var(--esp-4) var(--esp-6) var(--esp-3); font-weight: 700; color: var(--cor-tinta-suave); border-bottom: 2px solid var(--cor-pauta); }
.linhas li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--esp-1) var(--esp-4); padding: var(--esp-4) var(--esp-6) var(--esp-4) 0; border-bottom: 1px solid var(--cor-pauta); }
.linhas li:last-child { border-bottom: 0; }
.linhas time { grid-row: span 2; padding-top: 0.3rem; text-align: right; font-weight: 700; font-size: var(--texto-p); color: var(--cor-tinta-suave); }
.caneta { font-family: var(--fonte-caneta); font-weight: 700; font-size: 1.375rem; line-height: 1.25; color: var(--cor-caneta); }
.explica { color: var(--cor-tinta-suave); max-width: 34rem; }
.explica strong { color: var(--cor-tinta); font-weight: 700; }

/* ---------- limites ---------- */
.limites { padding-block: var(--esp-16); background: var(--cor-papel-2); }
.colunas { display: grid; gap: var(--esp-12); }
.limites h2 + p { margin-top: var(--esp-6); font-size: var(--texto-g); max-width: 34rem; }
.limites ul { margin-top: var(--esp-4); }
.limites li { padding-block: var(--esp-3); border-top: 1px solid var(--cor-pauta); max-width: 34rem; }

/* ---------- dúvidas ---------- */
.duvidas { padding-block: var(--esp-24); }
.papo { margin-top: var(--esp-12); max-width: 40rem; }
.papo .msg { max-width: min(92%, 32rem); font-size: var(--texto-m); }
.papo .recebida { box-shadow: 0 1px 0 var(--cor-pauta); }
.papo .recebida + .enviada { margin-top: var(--esp-8); }
.papo .enviada { font-weight: 500; }

/* ---------- seletores (ramo e noite) ---------- */
.ramos { margin-bottom: var(--esp-6); }
.ramos p { font-size: var(--texto-p); font-weight: 700; color: var(--cor-luar); }
.ramos div, .chave { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }
.ramos button, .chave button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--cor-luar);
  border-radius: 999px;
  background: none;
  color: var(--cor-papel);
  font: inherit;
  font-size: var(--texto-p);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s var(--suave), color 0.15s var(--suave);
}
.ramos button:hover { background: var(--cor-noite-2); }
.ramos button[aria-pressed="true"] { background: var(--cor-papel); color: var(--cor-noite); border-color: var(--cor-papel); }

/* ---------- duas noites ---------- */
.duas-noites { padding-block: var(--esp-16); background: var(--cor-noite-2); color: var(--cor-papel); }
.chave { margin-top: var(--esp-8); }
.chave button { font-size: var(--texto-m); padding: 0.7rem 1.2rem; }
.chave button:hover { background: var(--cor-noite); }
.chave button[data-noite="sem"][aria-pressed="true"] { background: var(--cor-margem); border-color: var(--cor-margem); color: var(--cor-branco); }
.chave button[data-noite="com"][aria-pressed="true"] { background: var(--cor-balao); border-color: var(--cor-balao); color: var(--cor-balao-tinta); }
.noites { display: grid; gap: var(--esp-12); margin-top: var(--esp-8); }
.noite-caso { max-width: 30rem; }
.noite-caso h3 { margin-bottom: var(--esp-4); color: var(--cor-luar); }
.noites.uma .noite-caso h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.noite-caso[hidden] { display: none; }
.aviso-hora { margin-block: var(--esp-4); text-align: center; font-size: var(--texto-p); font-weight: 700; color: var(--cor-luar); }
.aviso-hora::before, .aviso-hora::after { content: ""; display: inline-block; width: 2rem; height: 1px; margin-inline: var(--esp-2); vertical-align: middle; background: var(--cor-luar); }
.placar { margin-top: var(--esp-6); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-botao); font-size: var(--texto-g); }
.placar-ruim { background: var(--cor-margem); color: var(--cor-branco); }
.placar-bom { background: var(--cor-balao); color: var(--cor-balao-tinta); }
@media (prefers-reduced-motion: no-preference) {
  .noites.uma .noite-caso > * { animation: chegar 0.45s var(--suave) both; }
  .noites.uma .noite-caso > :nth-child(3) { animation-delay: 0.25s; }
  .noites.uma .noite-caso > :nth-child(4) { animation-delay: 0.7s; }
  .noites.uma .noite-caso > :nth-child(5) { animation-delay: 1.2s; }
  .noites.uma .noite-caso > :nth-child(6) { animation-delay: 1.7s; }
}

/* ---------- conta das faltas ---------- */
.conta { padding-block: var(--esp-16) var(--esp-24); background: var(--cor-noite); color: var(--cor-papel); }
.conta .lide { margin-top: var(--esp-6); color: var(--cor-luar); }
.controles { display: grid; gap: var(--esp-8); margin-top: var(--esp-8); max-width: 30rem; }
.controles label span { display: flex; justify-content: space-between; gap: var(--esp-4); font-weight: 700; }
.controles output { color: var(--cor-destaque); white-space: nowrap; }
.controles input[type="range"] { width: 100%; margin-top: var(--esp-3); accent-color: var(--cor-destaque); height: 2rem; cursor: pointer; }
.resultado { align-self: center; padding: var(--esp-8); border: 2px solid var(--cor-destaque); border-radius: var(--raio-balao); }
.resultado p { font-size: var(--texto-g); }
.resultado .grande { margin-block: var(--esp-2); font-size: clamp(3rem, 6vw + 1rem, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--cor-destaque); white-space: nowrap; }
.resultado strong { color: var(--cor-destaque); }
.resultado .miudo { margin-top: var(--esp-6); color: var(--cor-luar); font-size: var(--texto-p); }
@media (min-width: 48rem) {
  .noites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noites.uma { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 62rem) {
  .duas-noites .largura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--esp-16); align-items: start; }
  .duas-noites h2 { grid-column: 1; }
  .duas-noites .chave { grid-column: 1; }
  .duas-noites .noites { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; min-height: 24rem; }
  .duas-noites .noites:not(.uma) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mais perguntas ---------- */
.perguntas { padding-block: var(--esp-16) var(--esp-24); background: var(--cor-papel-2); }
.sanfona { margin-top: var(--esp-8); max-width: 48rem; }
.sanfona details { border-bottom: 1px solid var(--cor-pauta); }
.sanfona summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-4);
  font-size: var(--texto-g);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.sanfona summary::-webkit-details-marker { display: none; }
.seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--cor-folha);
  color: var(--cor-tinta);
  transition: background-color 0.15s var(--suave);
}
.seta svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.4; transition: transform 0.2s var(--suave); }
.sanfona summary:hover .seta { background: var(--cor-branco); }
.sanfona details[open] .seta svg { transform: rotate(180deg); }
.sanfona details p { padding: 0 var(--esp-12) var(--esp-6) 0; color: var(--cor-tinta-suave); max-width: 40rem; }

/* ---------- preço ---------- */
.preco { padding-block: var(--esp-16) var(--esp-24); border-top: 2px solid var(--cor-margem); }
.preco h2 { max-width: 18ch; }
.preco .lide { margin-block: var(--esp-6) var(--esp-8); color: var(--cor-tinta-suave); }
.nota { margin-top: 0; max-width: 26rem; align-self: start; }
.nota li { padding: var(--esp-3) var(--esp-6); border-bottom: 1px solid var(--cor-pauta); font-size: 1.3125rem; }
.nota li:last-child { border-bottom: 0; }

/* ---------- rodapé ---------- */
.rodape { padding-block: var(--esp-12); background: var(--cor-noite); color: var(--cor-luar); font-size: var(--texto-p); }
.rodape .marca { color: var(--cor-papel); margin-bottom: var(--esp-3); }
.rodape a { color: var(--cor-papel); text-underline-offset: 0.3em; }
.rodape details { margin-top: var(--esp-6); max-width: 44rem; }
.rodape summary { width: fit-content; cursor: pointer; color: var(--cor-papel); text-decoration: underline; text-underline-offset: 0.3em; }
.rodape details p { margin-top: var(--esp-3); }

/* ---------- telas maiores ---------- */
@media (min-width: 48rem) {
  .topo nav { display: flex; }
  .topo .botao { margin-left: 0; }
  .linhas li { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--esp-6); align-items: baseline; padding-block: var(--esp-6); }
  .linhas time { grid-row: auto; padding-top: 0; font-size: 1rem; }
  .linhas li > time { border-right: 2px solid var(--cor-margem); padding-right: var(--esp-4); align-self: stretch; margin-block: calc(var(--esp-6) * -1); padding-top: var(--esp-6); }
  .folha-dia { padding-left: calc(5.5rem + var(--esp-6)); }
  .caneta { font-size: 1.5rem; }
  .colunas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--esp-16); }
}
@media (min-width: 62rem) {
  .abertura { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: var(--esp-16); padding-block: var(--esp-12) var(--esp-24); }
  .conversa { justify-self: end; width: 100%; }
  .duvidas .largura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--esp-16); align-items: start; }
  .duvidas h2 { position: sticky; top: var(--esp-8); }
  .duvidas .papo { margin-top: 0; justify-self: end; width: 100%; }
  .nota { justify-self: end; width: 100%; transform: rotate(1.2deg); }
  .nota .folha-dia { padding-left: var(--esp-6); }
}