/* ============================================================
   SISTEMA CADERNO NO SITE: a página /fuw-labs (src/pages/fuw-labs.astro)
   Vem da prancha aprovada por Beto em 27/10/2026
   (FUW-LABs/2026/BRANDING/Sistema de design FUW LABs/testes/2026-10-27-site/).
   A página /fuw-labs dentro do site do Beto: cabeçalho e rodapé do
   site, abertura em Campo Profundo com a reação de luz, miolo em
   caderno claro, fórmula das cinco soluções de volta ao escuro.
   Mora por cima de visor.css e paginas-v2.css (cópias intactas do
   site) e de caderno-tokens.css (cópia de assets/). Cor e fonte só
   por var(--caderno-*).
   ============================================================ */

@font-face{font-family:'PP Monument Wide';src:url('/fonts/PPMonumentWide-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* linha de margem e recuo do texto, medidos a partir da lateral do site */
:root{--cad-linha:24px; --cad-recuo:60px}
@media (max-width:760px){ :root{--cad-linha:10px; --cad-recuo:30px} }

/* ---------- 1. linha de margem: a mesma no escuro e no claro ---------- */
.com-margem{position:relative}
.com-margem::before{content:""; position:absolute; top:0; bottom:0; z-index:1; pointer-events:none; width:2px;
  left:calc(max(0px, (100% - 1180px) / 2) + var(--lateral) + var(--cad-linha));
  background:var(--caderno-margem); opacity:.5}
.com-margem .in{padding-left:calc(var(--lateral) + var(--cad-recuo))}

/* ---------- 2. registro: carimbo e nota de margem ---------- */
.carimbo{display:inline-flex; flex-wrap:wrap; gap:4px 16px; justify-self:start; align-self:start;
  font:400 13px/1.35 var(--caderno-font-registro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--caderno-caneta); border:2px dashed currentColor; padding:9px 14px; transform:rotate(var(--caderno-carimbo-giro))}
.nota{font:400 14px/1.5 var(--caderno-font-registro); color:var(--caderno-caneta); max-width:44ch}
.nota::before{content:"// "}
.marca-texto{background:linear-gradient(transparent 55%, rgba(255,125,0,.55) 55%, rgba(255,125,0,.55) 92%, transparent 92%)}

/* ---------- 3. títulos da FUW: PP Monument Wide ---------- */
.titulo-wide{font:900 clamp(1.5rem, 4.4vw + .4rem, 4.25rem)/1.04 var(--caderno-font-titulo); letter-spacing:-.01em; margin:0; max-width:16ch; text-wrap:balance}
.sub-wide{font:900 clamp(1.35rem, 2.4vw + .4rem, 2.5rem)/1.08 var(--caderno-font-titulo); letter-spacing:-.005em; margin:0; text-wrap:balance}

/* ---------- 4. abertura em Campo Profundo (capa apagada + uma reação de luz) ---------- */
.abre.profundo{border-bottom:0; background-color:var(--caderno-profundo);
  background-image:linear-gradient(var(--caderno-escuro-grade) 1px, transparent 1px), linear-gradient(90deg, var(--caderno-escuro-grade) 1px, transparent 1px);
  background-size:var(--caderno-grade-passo) var(--caderno-grade-passo); background-position:-1px -1px}
.abre.profundo .abre-luz{background:var(--caderno-escuro-luz); mix-blend-mode:normal}
.abre.profundo .in{gap:30px}
.profundo .carimbo,.profundo .nota{color:var(--caderno-escuro-carimbo)}
.profundo .com-margem::before,.abre.profundo.com-margem::before{opacity:.75}
/* marca-texto na capa escura: laranja sólido, letra em tinta (decisão de 27/10, opção B) */
.marca-solida{background:var(--caderno-escuro-marca-fundo); color:var(--caderno-escuro-marca-letra); padding:0 .12em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* abertura com a amostra (aprovada por Beto em 27/10): texto à esquerda, amostra à direita; a luz sai dela */
.abre-dupla{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); grid-template-areas:"carimbo amostra" "texto amostra"; column-gap:clamp(24px,4vw,64px); align-items:start}
.abre-dupla > .abre-cabeca{grid-area:carimbo; display:grid; gap:clamp(20px,2.4vw,32px); justify-items:start}
/* logo numa cor só, papel no Campo Profundo e tinta no caderno (Beto, 28/10) */
.abre-logo{display:block; height:clamp(36px,3.4vw,52px); width:auto}
.registro-marca{display:inline-flex; align-items:center; gap:8px}
.registro-marca img{display:block; height:14px; width:auto}
.abre-texto{grid-area:texto; display:grid; gap:28px; align-content:start}
.abre-dupla .titulo-wide{font-size:clamp(1.5rem, 3.6vw + .3rem, 3.6rem); max-width:none}
.abre-amostra{grid-area:amostra; margin:0; display:grid; gap:6px; align-self:center}
.abre-amostra canvas{display:block; width:100%; height:480px}
.legenda{text-align:center; font:400 12px/1.4 var(--caderno-font-registro); letter-spacing:.14em; text-transform:uppercase; color:var(--caderno-escuro-carimbo)}
@media (max-width:1040px){
  .abre-dupla{grid-template-columns:minmax(0,1fr); grid-template-areas:"carimbo" "amostra" "texto"; row-gap:20px}
  .abre-amostra canvas{height:380px}
}
@media (max-width:760px){ .abre-amostra canvas{height:300px} .legenda{letter-spacing:.08em} }

/* ---------- 5. caderno claro: o miolo ---------- */
.caderno{
  --campo:var(--caderno-papel); --texto:var(--caderno-tinta); --texto-2:var(--caderno-texto-2); --texto-3:var(--caderno-texto-3);
  --fio:var(--caderno-fio); --fio-forte:var(--caderno-tinta); --hover:rgba(10,10,18,.05); --foco:var(--caderno-caneta);
  color-scheme:light; color:var(--caderno-tinta); background-color:var(--caderno-papel);
  background-image:linear-gradient(var(--caderno-grade) 1px, transparent 1px), linear-gradient(90deg, var(--caderno-grade) 1px, transparent 1px);
  background-size:var(--caderno-grade-passo) var(--caderno-grade-passo); background-position:-1px -1px}
.caderno .secao{border-bottom-color:var(--caderno-fio)}
.caderno .secao:last-child{border-bottom:0}
.caderno ::selection{background:rgba(255,125,0,.4)}
.caderno :focus-visible{outline-color:var(--caderno-caneta)}

/* "abrir o caderno": cabeça da página com fio duplo e o registro */
.registro{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-block:18px 14px;
  font:400 12px/1.4 var(--caderno-font-registro); letter-spacing:.14em; text-transform:uppercase; color:var(--caderno-texto-3);
  border-bottom:2px solid var(--caderno-tinta); box-shadow:0 4px 0 -2px var(--caderno-papel), 0 5px 0 -2px var(--caderno-tinta)}

/* leitura no caderno */
.caderno .kicker{color:var(--caderno-texto-3)}
.caderno p{color:var(--caderno-texto-2)}
.caderno .cabeca{gap:18px}

/* famílias: linhas numeradas com fio */
.familias{list-style:none; margin:0; padding:0; border-top:2px solid var(--caderno-tinta); counter-reset:f}
.familias li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; padding:16px 0; border-bottom:1px solid var(--caderno-fio);
  font:400 17px/1.45 var(--caderno-font-leitura); color:var(--caderno-tinta)}
.familias li::before{counter-increment:f; content:counter(f, decimal-leading-zero); padding-top:3px;
  font:400 12px var(--caderno-font-registro); letter-spacing:.12em; color:var(--caderno-caneta)}

/* ---------- 6. estados do experimento ---------- */
.estado{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font:400 11.5px/1 var(--caderno-font-registro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--caderno-texto-3); border:1.5px solid var(--caderno-fio); border-radius:var(--caderno-raio-pilula); padding:7px 12px}
.estado.on{color:var(--caderno-tinta); border-color:var(--caderno-tinta); background:var(--caderno-branco)}
.estado.on::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--caderno-marca)}
.estado.vazio{border-style:dashed}
.estados{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- 7. índice de experimentos ---------- */
.indice{list-style:none; margin:0; padding:0; border-top:2px solid var(--caderno-tinta)}
.indice-cab,.entrada > :is(a,div){display:grid; grid-template-columns:72px minmax(0,1.7fr) minmax(0,1fr) 190px 28px; gap:20px; align-items:center}
.indice-cab{padding:12px 0; border-bottom:1px solid var(--caderno-fio);
  font:400 11px var(--caderno-font-registro); letter-spacing:.16em; text-transform:uppercase; color:var(--caderno-texto-3)}
.entrada > :is(a,div){padding:22px 0; border-bottom:1px solid var(--caderno-fio); color:inherit; text-decoration:none}
.entrada > a{transition:background-color var(--t-toque)}
.entrada > a:hover{background:rgba(255,255,255,.55)}
.entrada .n{font:400 13px var(--caderno-font-registro); letter-spacing:.12em; color:var(--caderno-caneta)}
.entrada .nome{display:grid; gap:6px; min-width:0}
.entrada strong{font:900 clamp(1rem, 1.2vw + .5rem, 1.35rem)/1.15 var(--caderno-font-titulo)}
.entrada .linha{font:400 15px/1.45 var(--caderno-font-leitura); color:var(--caderno-texto-2)}
.entrada .meta{display:contents}
.entrada .meta > *{justify-self:start}
.entrada .fam{font:400 11.5px/1.4 var(--caderno-font-registro); letter-spacing:.12em; text-transform:uppercase; color:var(--caderno-texto-3)}
.entrada .ir{font:400 16px var(--caderno-font-registro); color:var(--caderno-caneta); transition:transform var(--t-rapido) var(--enfase)}
.entrada > a:hover .ir{transform:translateX(4px)}

/* ---------- 8. ficha web ---------- */
.ficha{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(36px,5vw,80px); align-items:start}
.ficha-campos{display:grid; grid-template-columns:150px minmax(0,1fr); margin:0; border-top:2px solid var(--caderno-tinta)}
.ficha-campos dt{padding:18px 0 16px; border-bottom:1px solid var(--caderno-fio);
  font:400 11.5px var(--caderno-font-registro); letter-spacing:.14em; text-transform:uppercase; color:var(--caderno-texto-3)}
.ficha-campos dd{margin:0; padding:14px 0; border-bottom:1px solid var(--caderno-fio); font:400 17px/1.45 var(--caderno-font-leitura); color:var(--caderno-tinta)}
.ficha-campos dd.vazio{font:400 13px/1.5 var(--caderno-font-registro); color:var(--caderno-texto-3); padding-top:17px}

/* foto colada: borda branca, giro leve, duas fitas âmbar */
.foto-colada{position:relative; margin:18px 8px 0; padding:10px; background:var(--caderno-branco); transform:rotate(var(--caderno-foto-giro));
  box-shadow:0 1px 2px rgba(10,10,18,.12), 0 14px 30px rgba(10,10,18,.08)}
.foto-colada::before,.foto-colada::after{content:""; position:absolute; top:-14px; width:96px; height:28px; background:var(--caderno-fita); opacity:.6}
.foto-colada::before{left:22px; transform:rotate(-6deg)}
.foto-colada::after{right:22px; transform:rotate(5deg)}
.foto-colada .vaga{aspect-ratio:4/3; display:grid; place-items:center; text-align:center; padding:20px;
  border:1.5px dashed var(--caderno-fio); font:400 12px/1.5 var(--caderno-font-registro); letter-spacing:.1em; text-transform:uppercase; color:var(--caderno-texto-3)}

/* ---------- 9. botões no papel (mesma matéria da home, invertida) ---------- */
.caderno .btn{background:transparent; border:1.5px solid var(--caderno-tinta); color:var(--caderno-tinta);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none}
.caderno .btn .seta{color:var(--caderno-tinta)}
.caderno .btn:is(:hover, :focus-visible){background:var(--caderno-branco); border-color:var(--caderno-tinta); box-shadow:0 12px 30px rgba(10,10,18,.08)}
.caderno .btn:focus-visible{box-shadow:0 0 0 3px var(--caderno-caneta)}
.caderno .btn:active{background:rgba(10,10,18,.06)}
.caderno .btn:not(.primario) .sup5,.caderno .btn:not(.primario) .luz5{display:none}
.caderno .btn.primario{background:var(--caderno-tinta); color:var(--caderno-papel); border-color:var(--caderno-tinta);
  box-shadow:inset 0 1px rgba(255,255,255,.2), 0 12px 32px rgba(10,10,18,.16)}
.caderno .btn.primario .seta{color:var(--caderno-papel)}
.caderno .btn.primario:is(:hover, :focus-visible){background:var(--caderno-tinta); box-shadow:inset 0 1px rgba(255,255,255,.26), 0 16px 40px rgba(36,59,254,.2)}
/* a cor de dentro do principal sai do FUW!: azul, magenta e um ponto de laranja */
.caderno .btn.primario .sup5::before{opacity:.55;
  background:conic-gradient(from 30deg, transparent 0 12%, rgba(36,59,254,.75) 22%, rgba(231,29,115,.72) 42%, rgba(255,125,0,.45) 58%, rgba(36,59,254,.6) 78%, transparent 94%)}
.caderno .em-breve{color:var(--caderno-texto-3)}
.caderno .em-breve::before{background:var(--caderno-marca); box-shadow:0 0 10px 2px rgba(255,125,0,.35)}
.caderno .linha-zap{color:var(--caderno-texto-3)}
.caderno .pendente{color:#b34700; background:rgba(255,125,0,.12); border-color:rgba(255,125,0,.7)}

/* ---------- 10. sem barra de carregamento: no site ela não entra, só no carrossel (Beto, 27/10) ---------- */

/* ---------- 11. celular ---------- */
@media (max-width:1040px){
  .ficha{grid-template-columns:minmax(0,1fr)}
  .foto-colada{max-width:460px}
}
@media (max-width:760px){
  .indice-cab{display:none}
  .entrada > :is(a,div){grid-template-columns:44px minmax(0,1fr) 20px; gap:10px 12px; align-items:start; padding:20px 0}
  .entrada .n{padding-top:4px}
  .entrada .ir{grid-column:3; grid-row:1}
  .entrada .meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; grid-column:2 / -1}
  .ficha-campos{grid-template-columns:minmax(0,1fr)}
  .ficha-campos dt{padding:16px 0 4px; border-bottom:0}
  .ficha-campos dd{padding-top:0}
  .ficha-campos dd.vazio{padding-top:0}
  .registro{font-size:11px}
}