/* Dailymark News — estilos da landing page. Tokens e componentes vêm do guia de padrões (ver CLAUDE.md). */
/* Fontes hospedadas aqui (sem Google Fonts). */
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/libre-caslon-text-400.woff2) format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/libre-caslon-text-700.woff2) format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/libre-caslon-text-400-italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/source-serif-4-variable.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:300 700;font-display:swap;src:url(../fonts/source-serif-4-variable-italic.woff2) format('woff2')}
@font-face{font-family:'Manufacturing Consent';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manufacturing-consent-400.woff2) format('woff2')}

:root {
  --font-heading: 'Libre Caslon Text', Georgia, serif;
  --font-heading-weight: 700;
  --font-body: 'Source Serif 4', Georgia, serif;

  --color-bg: #f6f5f2;
  --color-surface: #eae9e9;
  --color-text: #2b2a28;
  --color-title: #151413;
  --color-divider: #d8d5cf;
  --color-accent: #a61b1b;

  --color-neutral-100: #f8f4f4;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #5f5c57;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: oklch(0.97 0.014 27);
  --color-accent-200: oklch(0.93 0.035 27);
  --color-accent-500: oklch(0.6 0.17 27);
  --color-accent-600: oklch(0.53 0.18 27);
  --color-accent-700: #a61b1b;
  --color-accent-800: oklch(0.38 0.14 27);
  --color-accent-900: oklch(0.29 0.1 27);

  --color-paper: #fbfaf7;

  --space-1: 4px;
  --space-2: 7px;
  --space-3: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; font-weight: 400; }
h1, h2, h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
button { font-family: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent; border-radius: 0;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
}
.btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, currentColor 18%, transparent); }
.btn-ghost:not(.btn-icon):not(.btn-sm) { padding-inline: calc(var(--space-3) * 1.2); }
.btn-icon { width: 36px; height: 36px; padding: 0; }

.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--color-accent-700); }

.tag {
  display: inline-flex; align-items: center; font-size: 12px;
  letter-spacing: 0.02em; padding: 3px 10px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }

.link { display: inline-block; background: none; border: 0; padding: 12px 0; margin: -12px 0; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.25; letter-spacing: normal; text-transform: none; text-decoration: underline; text-underline-offset: 3px; color: var(--color-accent-700); }
.link:hover { color: var(--color-accent-600); }
.link-neutral { color: var(--color-neutral-800); }
.link-neutral:hover { color: var(--color-title); }
.link-icon { display: inline-flex; align-items: center; gap: 4px; }

.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; }
.dialog { display: flex; flex-direction: column; border: 0; border-top: 3px solid var(--color-accent); }
/* Lista de espera — estilos só deste quadro. */
:root{--page-edge:clamp(20px,5vw,56px)}
@media (max-width: 599px){ :root{--page-edge:16px} }
.wl-wrap{max-width:1440px;margin:0 auto;padding:0 var(--page-edge);box-sizing:border-box}
.wl-sticky{display:none}
@media (max-width: 767px){ .wl-foot-clear{padding-bottom:calc(59px + env(safe-area-inset-bottom))} }
.wl-ws-how-touch{display:none}
@media (hover: none) and (pointer: coarse){ .wl-ws-how-fine{display:none} .wl-ws-how-touch{display:inline} }
.wl-logo{font-size:clamp(44px,10.5vw,80px)}
@media (max-width: 1023px){ .wl-logo{font-size:clamp(39.6px,9.45vw,72px)} }
@media (max-width: 599px){ .wl-foot-info{display:flex;flex-direction:column;gap:7px} .wl-foot-info a{display:inline-flex;align-items:center;min-height:44px;margin:-7px 0} .wl-foot-sep{display:none} }
@media (max-width: 767px){ .wl-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:14px;background:var(--color-bg);border-top:1px solid var(--color-title);padding:7px var(--page-edge) calc(7px + env(safe-area-inset-bottom))} }
.wl-ws-grid{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.wl-ws-grid > [data-i]{grid-column:var(--c);grid-row:var(--r)}
.wl-ws-band{position:absolute;box-sizing:border-box;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:var(--h);transform-origin:var(--h2) var(--h2);transform:var(--tf)}
.wl-chips{display:flex;flex-wrap:wrap;gap:7px}
/* Modal da pergunta: mesmo diálogo da home (fio vermelho no topo, sem sombra, raio 0). Cabeça e rodapé fixos, assuntos rolam no meio. */
.wl-ask-backdrop{z-index:80;padding:clamp(14px,4vw,56px);background:color-mix(in srgb, var(--color-title) 55%, transparent);animation:wl-fade .18s ease-out}
.wl-ask{position:relative;width:min(640px,100%);max-height:min(780px,calc(100vh - 56px));padding:0;gap:0;overflow:hidden;background:var(--color-bg);animation:wl-rise .22s ease-out}
.wl-ask-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:28px 28px 14px;border-bottom:1px solid var(--color-divider)}
.wl-ask-form{display:flex;flex-direction:column;flex:1;min-height:0}
.wl-ask-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px}
.wl-ask-foot{padding:14px 28px 28px;border-top:1px solid var(--color-divider)}
.wl-ask-actions{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px}
.wl-ask-actions .btn{min-height:44px}
.wl-ask-count{margin-left:auto;font-size:14px;color:var(--color-neutral-700);font-variant-numeric:lining-nums}
.wl-ask-title{font-family:var(--font-heading);font-size:28.43px;font-weight:400;line-height:1.2;letter-spacing:-0.006em;color:var(--color-title);margin:0;outline:none;text-wrap:balance}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-width:371px}
.otp-box{box-sizing:border-box;width:100%;aspect-ratio:1;min-height:44px;padding:0;margin:0;border:1px solid var(--color-divider);border-radius:0;background:transparent;text-align:center;font-family:var(--font-heading);font-size:28.43px;line-height:1;color:var(--color-title);caret-color:var(--color-accent);font-variant-numeric:lining-nums tabular-nums}
.otp-box:hover{border-color:color-mix(in srgb, var(--color-text) 45%, transparent)}
.otp-box:focus{outline:none;border-color:var(--color-accent);border-bottom-width:3px}
.otp.is-invalid .otp-box{border-color:var(--color-accent-700)}
.wl-toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);width:min(560px,calc(100% - 32px));z-index:85;pointer-events:none}
.wl-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:14px;background:var(--color-surface);border:1px solid var(--color-title);border-top:3px solid var(--color-accent);padding:14px;animation:wl-rise .22s ease-out}
.wl-toast-ck{flex:none;color:var(--color-accent-700);margin-top:2px}
.btn-sm.btn-icon{width:32px;height:32px;min-height:0;padding:0}
@media (prefers-reduced-motion: reduce){ .wl-toast{animation:none} }
@media (max-width: 599px){ .wl-toast-wrap{bottom:14px;width:calc(100% - 28px)} }
@keyframes wl-fade{from{opacity:0}}
@keyframes wl-rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion: reduce){ .wl-ask-backdrop,.wl-ask{animation:none} }
.wl-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:7px 14px;box-sizing:border-box;background:transparent;border:1px solid var(--color-divider);border-radius:0;color:var(--color-text);font-family:var(--font-body);font-size:16px;line-height:1.2;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.wl-chip:hover{border-color:var(--color-neutral-700)}
.wl-chip:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.wl-chip[aria-pressed="true"]{background:var(--color-accent-100);border-color:var(--color-accent);color:var(--color-accent-800)}
.wl-chip svg{flex:none}
.wl-chip-ck{display:none}
.wl-chip[aria-pressed="true"] .wl-chip-ck{display:block}
.wl-chip-plus{transition:transform .15s ease}
.wl-chip[aria-pressed="true"] .wl-chip-plus{transform:rotate(45deg)}
.btn-sm{font-size:14px;line-height:1.2;padding:7px 12px;min-height:32px;box-sizing:border-box}
.btn-filled{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.btn-filled:hover{background:var(--color-accent-600);border-color:var(--color-accent-600)}
/* Título dos cards de exemplo. */
.wl-card-title{font-family:var(--font-heading);font-size:28.43px;font-weight:400;line-height:1.2;letter-spacing:-0.006em;margin:0 0 7px;color:var(--color-title);text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Celular: textos dos cards na escala de tela estreita, botões de feedback alinhados e jogos lado a lado com rolagem. */
.wl-row.wl-mid-row{row-gap:28px}
@media (max-width: 599px){
  .wl-card-title{font-size:21.33px;line-height:1.25}
  .wl-tldr{font-size:16px !important;line-height:1.5 !important}
  .wl-tl-title{font-size:16px !important;line-height:1.3 !important}
  .wl-fb-row{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .wl-fb-row .btn{width:100%;margin-left:0 !important;font-size:14px;padding:7px 12px;min-height:44px;white-space:nowrap}
  .wl-fb-row .btn svg{flex:none}
  /* Caça-palavras: no celular a grade de 20 colunas tem casas de ~17px; a letra acompanha a casa. */
  .wl-ws-grid{grid-template-columns:repeat(12,minmax(0,1fr)) !important}
  .wl-ws-grid > [data-i]{grid-column:var(--mc);grid-row:var(--mr)}
  .wl-ws-band{left:var(--ml);top:var(--mt);width:var(--mw);height:var(--mh);border-radius:var(--mh);transform-origin:var(--mh2) var(--mh2);transform:var(--mtf)}
  .wl-ws-ch{font-size:clamp(16px,4.6vw,21.33px) !important;padding-top:2px !important}
  /* Pistas em duas colunas, para caberem logo abaixo da grade. */
  .wl-ws-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .wl-ws-q{flex-direction:column;justify-content:flex-start !important;align-items:flex-start !important;gap:0 !important}
  .wl-ws-clue{font-size:14px !important}
  /* Modal vira folha presa na base da tela, com a ação ao alcance do polegar. */
  .wl-ask-backdrop{place-items:end stretch;padding:0}
  .wl-ask{width:100%;max-height:92vh;max-height:92dvh}
  .wl-ask-head{padding:var(--page-edge) var(--page-edge) 14px}
  .wl-ask-body{padding:var(--page-edge)}
  .wl-ask-foot{padding:14px var(--page-edge) var(--page-edge)}
  .wl-ask-title{font-size:21.33px;line-height:1.25}
  /* Botões empilhados: a ação principal em cima, ocupando a largura toda. */
  .wl-ask-actions{flex-direction:column;align-items:stretch;gap:7px}
  .wl-ask-count{order:-2;margin-left:0}
  .wl-ask-actions .btn-primary{order:-1;margin-left:0 !important}
  .wl-fb-row .btn:nth-child(n+3){grid-column:1 / -1}
  .wl-games{grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:minmax(220px,80%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch}
  .wl-games > div{scroll-snap-align:start}
  details.wl-faq summary{font-size:16px;line-height:1.4}
}
/* Exemplos de pauta em cards, como a tela "A sua pauta" da plataforma. No celular, deslizam para o lado. */
.wl-pauta-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.wl-pauta-card{background:var(--color-paper);border:1px solid var(--color-divider);padding:28px;min-width:0}
@media (max-width: 599px){ .wl-pauta-cards{--edge:var(--page-edge);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:calc(-1 * var(--edge)) !important;margin-right:calc(-1 * var(--edge)) !important;padding:0 var(--edge) 14px !important;scroll-padding-inline:var(--edge);scrollbar-width:none} .wl-pauta-cards::-webkit-scrollbar{display:none} .wl-pauta-card{scroll-snap-align:start} }
.wl-kicker{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-accent-700);margin:0 0 7px}
.wl-h2{font-family:var(--font-heading);font-size:clamp(28.43px,2.2vw + 7px,37.9px);font-weight:400;letter-spacing:-0.012em;line-height:1.14;color:var(--color-title);margin:0 0 14px;text-wrap:balance}
.wl-p{font-size:16px;line-height:1.6;color:var(--color-neutral-800);margin:0;max-width:65ch;text-wrap:pretty}
.wl-section{padding-top:56px}
.wl-row{display:flex;flex-wrap:wrap;gap:42px 56px;align-items:flex-start}
.wl-form-row{display:flex;flex-wrap:wrap;gap:7px}
.wl-form-row .input{flex:1 1 240px}
.wl-form-row .btn{flex:0 0 auto;min-height:44px}
@media (max-width: 559px){ .wl-form-row .btn{flex:1 1 100%} }
@media (max-width: 599px){ .wl-form-note{text-align:center} }
.wl-num{font-family:var(--font-heading);font-weight:400;font-size:37.9px;line-height:1;color:var(--color-accent-700);font-variant-numeric:lining-nums tabular-nums;display:block;margin-bottom:14px}
.wl-h3{font-family:var(--font-heading);font-weight:400;font-size:21.33px;line-height:1.25;margin:0 0 7px;color:var(--color-title)}
/* Como funciona: as três colunas dividem as mesmas linhas (subgrid), então número, título, texto e exemplo ficam alinhados e com a mesma altura. */
.wl-how-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:56px;row-gap:42px}
.wl-how-step{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;min-width:0;border-top:1px solid var(--color-title);padding-top:14px}
.wl-how-step .wl-p{margin-bottom:28px}
.wl-ex{border-top:1px solid var(--color-divider);padding-top:14px}
.wl-ex-label{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-neutral-700);margin:0 0 7px}
.wl-ex-line{font-size:16px;line-height:1.5;color:var(--color-title);margin:0 0 4px;text-wrap:pretty}
.wl-faq-col{flex:999 1 520px;min-width:0;border-top:1px solid var(--color-divider)}
@media (min-width: 600px){ .wl-faq-col{flex:0 1 max(481px,calc(92.4% - 384px));margin-left:auto} }
.wl-faq{border-bottom:1px solid var(--color-divider)}
.wl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px;padding:14px 0;font-family:var(--font-heading);font-size:21.33px;line-height:1.3;color:var(--color-title)}
.wl-faq summary::-webkit-details-marker{display:none}
.wl-faq summary:hover{color:var(--color-accent-700)}
.wl-faq .wl-faq-ic{flex:none;transition:transform .15s ease}
.wl-faq[open] .wl-faq-ic{transform:rotate(45deg)}
.wl-faq .wl-p{padding:0 0 14px;max-width:none}
/* A miniatura cresce com a largura do papel: 1 unidade = 1px quando o miolo tem 652px. */
/* Jornal de exemplo: papel (computador) com o celular sobreposto no canto. */
.wl-shot{position:relative;width:100%;max-width:1328px;padding-bottom:7%;box-sizing:border-box}
.wl-shot-paper{position:relative;width:91%;container-type:inline-size}
/* Tela do computador: moldura escura como a do celular, com a câmera no centro da borda de cima. */
.wl-screen{position:relative;background:var(--color-title);border-radius:max(12px,1.6cqw);padding:max(10px,1.5cqw) max(6px,0.9cqw) max(6px,0.9cqw)}
.wl-screen-cam{position:absolute;top:max(4px,0.6cqw);left:50%;width:max(3px,0.32cqw);aspect-ratio:1;border-radius:50%;background:var(--color-neutral-700);transform:translateX(-50%)}
.wl-shot-phone{position:absolute;right:0;bottom:0;width:23%;container-type:inline-size}
.ph{--p:calc(100cqw / 300)}
@media (max-width: 699px){ .wl-shot{padding-bottom:16%} .wl-shot-paper{width:86%} .wl-shot-phone{width:31%} }
/* Corte do hero: as ilustrações terminam num fio, como se continuassem por baixo da página. */
.wl-crop{width:100%;max-width:1328px}
.wl-crop.is-cut{aspect-ratio:1328/560;overflow:hidden}
.wl-crop.is-cut .wl-shot .wl-shot{padding-bottom:0}
/* Dobra: o fio vermelho que corta as ilustrações atravessa a tela de borda a borda (a raiz tem overflow-x:clip). */
.wl-fold{position:relative}
.wl-fold::before{content:"";position:absolute;top:-3px;left:50%;width:100vw;margin-left:-50vw;border-top:3px solid var(--color-accent);pointer-events:none}
.wl-crop.is-cut .wl-shot-phone .wl-shot-phone{top:12%;bottom:auto}
@media (max-width: 699px){ .wl-crop.is-cut{aspect-ratio:1328/760} }
/* Celular: só o mockup do celular, centralizado e grande o bastante para ler; a dobra corta logo depois da manchete. */
@media (max-width: 599px){
  .wl-shot-paper{display:none}
  .wl-shot{display:flex;justify-content:center;padding-bottom:0}
  .wl-shot-phone,.wl-crop.is-cut .wl-shot-phone .wl-shot-phone{position:relative;top:auto;right:auto;bottom:auto;width:min(300px,82%)}
  .wl-crop.is-cut{aspect-ratio:auto;height:min(460px,120vw)}
}
.mini-paper{container-type:inline-size}
.mini-scale{--u:calc(100cqw / 652)}
.mini-bar{display:block;height:calc(var(--u) * 3);background:var(--color-neutral-300);margin-top:calc(var(--u) * 4)}
.mini-kicker{font-size:calc(var(--u) * 6.5);letter-spacing:0.1em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:calc(var(--u) * 3)}
.mini-h{font-family:var(--font-heading);font-weight:700;color:var(--color-title);margin:0;letter-spacing:0}
.mini-rule{border-top:1px solid var(--color-divider);margin:calc(var(--u) * 9) 0}
/* Grão de papel: textura em ladrilho que cobre a página inteira, em qualquer largura de tela. */
.dm-grain{background-image:url(../img/grain.png);background-repeat:repeat;background-size:256px 256px}

/* Blocos condicionais gerados a partir do canvas: não criam caixa própria e somem quando escondidos. */
.dc-if{display:contents}
.dc-if[hidden],[hidden]{display:none !important}

@media (max-width: 767px){ .wl-toast-wrap{bottom:calc(73px + env(safe-area-inset-bottom))} }