/* op · Opiniões — agora quem fala são elas: bilhetes com a frase literal e o grifo na palavra-chave */

.op-fundo{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 40% at 0% 0%, color-mix(in oklab, var(--rosado) 45%, transparent), transparent 72%),
    radial-gradient(50% 36% at 100% 78%, color-mix(in oklab, var(--ouro-claro) 32%, transparent), transparent 70%),
    var(--perola)}

.op-grade{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(40px,6vw,104px);align-items:start}

/* ---------- lado: título, nota, assuntos ---------- */
.op-lado{position:sticky;top:96px;display:flex;flex-direction:column;gap:clamp(28px,3.4vw,44px)}
.op-titulo{font-size:clamp(2.4rem, 1.2rem + 2.9vw, 4.4rem)}
.op-titulo .voz-dela{color:var(--cafe)}

.op-nota{display:flex;align-items:center;gap:22px}
.op-nota-n{font-weight:800;font-size:clamp(4.6rem, 2.4rem + 4.4vw, 7.6rem);line-height:.8;letter-spacing:-.05em;color:var(--cafe)}
.op-nota-txt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:var(--t-peq);line-height:1.4;color:var(--cafe-2)}
.op-nota-txt b{font-weight:700;color:var(--cafe)}
.op-est{display:inline-flex;gap:3px}
.op-est svg{width:18px;height:18px;fill:var(--ouro)}
.op-nota-txt .link-fio{min-height:44px;font-size:var(--t-peq)}

.op-temas-rotulo{font-weight:700;font-size:1rem;margin-bottom:12px;color:var(--cafe)}
.op-fileira{display:flex;flex-wrap:wrap;gap:8px}
.op-tema{display:inline-flex;align-items:center;gap:10px;min-height:46px;cursor:pointer;border:1px solid color-mix(in oklab, var(--cafe) 26%, transparent);background:color-mix(in oklab, #fff 55%, transparent);border-radius:999px;padding:0 8px 0 18px;font-family:var(--f-dela);font-weight:500;font-size:1rem;color:var(--cafe);white-space:nowrap;transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease);-webkit-tap-highlight-color:transparent}
.op-tema-n{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:999px;background:color-mix(in oklab, var(--ouro-claro) 55%, transparent);font-weight:700;font-size:.875rem;color:var(--cafe)}
.op-tema:hover{border-color:var(--cafe);transform:translateY(-1px)}
.op-tema[aria-pressed="true"]{background:var(--cafe);border-color:var(--cafe);color:var(--creme)}
.op-tema[aria-pressed="true"] .op-tema-n{background:var(--ouro-claro);color:var(--cafe)}
.op-conta{margin-top:16px;font-size:var(--t-peq);line-height:1.45;color:var(--cafe-2);max-width:28em;min-height:2.9em}
.op-conta b{color:var(--cafe);font-weight:700}

/* ---------- a mesa de bilhetes ---------- */
.op-mesa{list-style:none;margin:0;padding:8px 0 0;columns:2;column-gap:clamp(20px,2.4vw,34px)}
.op-bilhete{--r:-.8deg;--papel:#fffaf3;position:relative;break-inside:avoid;margin:0 0 clamp(20px,2.4vw,32px);padding:clamp(22px,2vw,30px) clamp(22px,2vw,30px) 20px;background:var(--papel);border-radius:4px;color:var(--cafe);
  box-shadow:0 1px 0 rgba(58,36,25,.06), 0 22px 34px -22px rgba(58,36,25,.42), 0 4px 10px -6px rgba(58,36,25,.18);
  transform:rotate(var(--r));transition:transform .6s var(--ease), opacity .5s var(--ease), box-shadow .6s var(--ease), filter .5s}
.op-bilhete:nth-child(4n+2){--r:1.1deg}
.op-bilhete:nth-child(4n+3){--r:-1.5deg}
.op-bilhete:nth-child(4n+4){--r:.6deg}
.op-bilhete:nth-child(3n+2){--papel:#fbefe7}
.op-bilhete:nth-child(5n+4){--papel:#f8f1e1}
.op-bilhete::before{content:"";position:absolute;inset:0 0 auto 0;height:38%;border-radius:4px 4px 0 0;background:linear-gradient(to bottom, rgba(255,255,255,.55), transparent);pointer-events:none}
.op-bilhete::after{content:"";position:absolute;right:0;bottom:0;width:46px;height:46px;border-radius:0 0 4px 0;background:linear-gradient(135deg, transparent 50%, color-mix(in oklab, var(--papel) 70%, #c9b7a3) 50%, color-mix(in oklab, var(--papel) 88%, #b8a28c) 100%);box-shadow:-3px -3px 8px -4px rgba(58,36,25,.18);clip-path:polygon(100% 0, 100% 100%, 0 100%);pointer-events:none;opacity:.0;transition:opacity .4s}
.op-bilhete:hover::after,.js .op-mesa.op-filtra .op-bilhete.op-acende::after{opacity:1}
.op-bilhete blockquote{margin:0;position:relative}
.op-quem{position:relative}
.op-bilhete blockquote p{font-family:var(--f-sua);font-style:italic;font-weight:400;line-height:1.28;letter-spacing:-.005em}
.op-g blockquote p{font-size:clamp(1.6rem, 1.1rem + .9vw, 2.05rem);line-height:1.18}
.op-m blockquote p{font-size:clamp(1.3rem, 1rem + .55vw, 1.55rem)}
.op-w{column-span:all;--r:.35deg!important;padding:clamp(28px,2.6vw,40px) clamp(28px,3vw,44px) 24px}
.op-w blockquote p{font-size:clamp(1.9rem, 1.1rem + 1.6vw, 2.9rem);line-height:1.12;letter-spacing:-.012em;max-width:22em}
.op-w:nth-child(6){--r:-.45deg!important;margin-left:6%}
.op-w:nth-child(11){margin-right:5%}
.op-p blockquote p{font-size:clamp(1.15rem, .98rem + .35vw, 1.3rem);line-height:1.34}
.op-quem{z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:16px;font-size:var(--t-mini);font-weight:500;color:var(--cafe-2)}
.op-quem .op-est svg{width:12px;height:12px}
.op-quem span:last-child{white-space:nowrap}
.op-deslize{display:none}

/* o grifo: marca-texto na palavra-chave */
.op mark{color:inherit;background:linear-gradient(to bottom, transparent 12%, color-mix(in oklab, var(--ouro-claro) 78%, var(--rosado)) 12%, color-mix(in oklab, var(--ouro-claro) 78%, var(--rosado)) 90%, transparent 90%) no-repeat 0 0 / 100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;transition:background-size .8s var(--ease)}

/* entrada (só com JS) e filtro */
.js .op-mesa .op-bilhete{opacity:0;transform:translateY(34px) rotate(calc(var(--r) * 3))}
.js .op-mesa .op-bilhete mark{background-size:0% 100%}
.js .op-mesa.op-on .op-bilhete{opacity:1;transform:rotate(var(--r));transition-delay:calc(var(--i) * 55ms)}
.js .op-mesa.op-on .op-bilhete mark{background-size:100% 100%;transition-delay:calc(var(--i) * 55ms + .45s)}
.js .op-mesa.op-pronto .op-bilhete,.js .op-mesa.op-pronto .op-bilhete mark{transition-delay:0s}
.js .op-mesa.op-filtra .op-bilhete:not(.op-acende){opacity:.34;filter:saturate(.5);transform:rotate(var(--r)) scale(.97)}
.js .op-mesa.op-filtra .op-bilhete:not(.op-acende) mark{background-size:0% 100%}
.js .op-mesa.op-filtra .op-bilhete.op-acende{transform:rotate(0deg) translateY(-6px);box-shadow:0 1px 0 rgba(58,36,25,.06), 0 34px 44px -26px rgba(58,36,25,.5), 0 6px 14px -8px rgba(58,36,25,.22)}
.js .op-mesa.op-filtra .op-bilhete.op-acende mark{transition-delay:.25s}

/* ---------- fecho: a frase de quem ficou, e a resposta dela ---------- */
.op-fecho{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:40px clamp(40px,6vw,96px);align-items:end;margin-top:clamp(72px,9vw,150px);padding-top:clamp(40px,5vw,64px);border-top:1px solid color-mix(in oklab, var(--cafe) 14%, transparent)}
.op-fecho figure{margin:0}
.op-fecho blockquote{margin:0}
.op-fecho-delas blockquote p{font-family:var(--f-dela);font-weight:800;font-size:clamp(2.6rem, .9rem + 5.2vw, 7rem);line-height:.96;letter-spacing:-.045em;color:var(--cafe);text-wrap:balance}
.op-fecho-delas mark{padding:0 .04em}
.js .op-fecho-delas mark{background-size:0% 100%;transition:background-size 1s var(--ease) .7s}
.js .op-fecho-delas.rev-on mark{background-size:100% 100%}
.op-fecho figcaption{margin-top:18px;font-size:var(--t-peq);font-weight:500;color:var(--cafe-2)}
.op-fecho-dela{border-left:2px solid var(--ouro);padding:4px 0 6px 22px;margin-bottom:.6em}
.op-fecho-dela blockquote p{font-family:var(--f-dela);font-weight:500;font-size:var(--t-h3);line-height:1.22;letter-spacing:-.02em;color:var(--cafe)}

/* ---------- notebook ---------- */
@media (min-width:1024px) and (max-width:1279px){
  .op-grade{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:48px}
  .op-tema{font-size:.95rem;padding-left:14px}
}
@media (min-width:1024px) and (max-height:820px){
  .op-lado{top:84px;gap:24px}
  .op-nota-n{font-size:5rem}
}

/* ---------- tablet e celular ---------- */
@media (max-width:1023px){
  .op-grade{grid-template-columns:minmax(0,1fr);gap:40px}
  .op-lado{position:static}
  .op-fecho{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  /* fileira lateral de bilhetes */
  .op-deslize{display:block;margin-top:-14px;font-size:var(--t-mini);font-weight:500;color:var(--cafe-2)}
  .op-mesa{columns:auto;display:flex;align-items:center;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:14px var(--pad) 34px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .op-mesa::-webkit-scrollbar{display:none}
  .op-bilhete,.op-w{flex:0 0 min(80vw, 340px);margin:0!important;scroll-snap-align:start;--r:0deg!important}
  .op-w blockquote p,.op-g blockquote p{font-size:1.6rem}
  .js .op-mesa.op-filtra .op-bilhete:not(.op-acende){display:none}
  .js .op-mesa.op-filtra .op-bilhete.op-acende{transform:none}
  .op-fileira{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 10px;scrollbar-width:none;-webkit-mask:linear-gradient(to right,#000 86%,transparent);mask:linear-gradient(to right,#000 86%,transparent)}
  .op-fileira::-webkit-scrollbar{display:none}
  .op-tema{flex:none}
  .op-nota{gap:16px}
}

@media (prefers-reduced-motion:reduce){
  .op-bilhete,.op mark,.op-tema{transition:none!important}
  .js .op-mesa .op-bilhete{opacity:1;transform:rotate(var(--r))}
  .js .op-mesa .op-bilhete mark,.js .op-fecho-delas mark{background-size:100% 100%}
}