/* =================================================================
   Paris Colchões — camada de design sobre o Tailwind
   Preto, branco e amarelo #F2E737. O amarelo aqui não é detalhe:
   ele preenche seções inteiras, marca palavras e move a fita.
   ================================================================= */

:root{
  --ink:#0B0B0A;
  --ink-2:#26251F;
  --paper:#FBFAF6;
  --paper-2:#F0EEE4;
  --linha:#DEDACB;
  --amarelo:#F2E737;
  --amarelo-claro:#FFF27A;
  --oliva:#4E4805;
  --cinza:#6E6C61;
}

html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{ -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; height:auto; }

/* ---------- tipografia ---------- */
.h-display{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800; letter-spacing:-.035em; line-height:.97; }
.h-display-2{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:600; letter-spacing:-.02em; line-height:1.08; }

.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; display:inline-block;
}

/* Marcador amarelo por trás da palavra: o gesto mais "vivo" do layout. */
.marca{
  background-image:linear-gradient(180deg,transparent 58%,var(--amarelo) 58%,var(--amarelo) 96%,transparent 96%);
  padding:0 .08em;
}
.marca-cheia{
  background:var(--amarelo); color:var(--ink);
  padding:0 .22em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ---------- botões ---------- */
.btn-amarelo,.btn-escuro,.btn-linha,.btn-claro{
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  font-weight:600; line-height:1; text-align:center;
  border:2px solid var(--ink); transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-amarelo{ background:var(--amarelo); color:var(--ink); padding:1rem 1.6rem; box-shadow:4px 4px 0 var(--ink); }
.btn-amarelo:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:var(--amarelo-claro); }
.btn-escuro{ background:var(--ink); color:var(--amarelo); padding:1rem 1.6rem; box-shadow:4px 4px 0 var(--amarelo); }
.btn-escuro:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--amarelo); }
.btn-linha{ background:transparent; color:var(--ink); padding:1rem 1.6rem; }
.btn-linha:hover{ background:var(--ink); color:var(--paper); }
.btn-claro{ background:transparent; color:var(--paper); border-color:rgba(251,250,246,.4); padding:1rem 1.6rem; }
.btn-claro:hover{ background:var(--amarelo); color:var(--ink); border-color:var(--amarelo); }

.btn-amarelo:active,.btn-escuro:active{ transform:translate(0,0); box-shadow:2px 2px 0 currentColor; }

/* ---------- navegação ---------- */
.link-nav{ position:relative; padding-block:.35rem; }
.link-nav::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:3px;
  background:var(--amarelo); transition:right .25s ease;
}
.link-nav:hover::after,.link-nav.is-ativo::after{ right:0; }

/* ---------- fita rolante ---------- */
.fita{ background:var(--amarelo); border-block:2px solid var(--ink); overflow:hidden; }
.fita-trilho{ display:flex; width:max-content; animation:correr 38s linear infinite; }
.fita-trilho > span{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(18px,2.6vw,26px); padding:.7rem 1.6rem; white-space:nowrap; display:flex; align-items:center; gap:1.6rem;
}
.fita-trilho > span::after{ content:"◆"; font-size:.55em; opacity:.5; }
.fita:hover .fita-trilho{ animation-play-state:paused; }
@keyframes correr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- régua (herança do estudo v1, agora só como divisor) ---------- */
.regua{
  height:16px;
  background-image:
    linear-gradient(to right,var(--ink) 1px,transparent 1px),
    linear-gradient(to right,var(--ink) 1px,transparent 1px);
  background-size:96px 16px,16px 7px;
  background-position:0 0,0 bottom;
  background-repeat:repeat-x;
  opacity:.28;
}

/* ---------- cartões ---------- */
.cartao{
  background:#fff; border:2px solid var(--ink); position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cartao:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--amarelo); }
.cartao-escuro{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.cartao-escuro:hover{ box-shadow:8px 8px 0 var(--amarelo); }
.cartao-plano{ background:#fff; border:1px solid var(--linha); transition:border-color .2s ease, transform .2s ease; }
.cartao-plano:hover{ border-color:var(--ink); transform:translateY(-3px); }

.selo{
  position:absolute; top:-1px; right:-1px; background:var(--amarelo); color:var(--ink);
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:.35rem .6rem;
}

/* ---------- escala de firmeza ---------- */
.escala{ display:flex; gap:4px; }
.escala i{ width:22px; height:8px; background:var(--linha); display:block; }
.escala i.on{ background:var(--ink); }
.escala-clara i{ background:rgba(251,250,246,.25); }
.escala-clara i.on{ background:var(--amarelo); }

/* ---------- conteúdo editorial (blog e páginas de texto) ---------- */
.prosa{ font-size:17px; line-height:1.75; color:var(--ink-2); }
.prosa > * + *{ margin-top:1.15em; }
.prosa h2{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:-.03em; font-size:clamp(24px,3.4vw,31px); line-height:1.12; color:var(--ink); margin-top:2.4em; }
.prosa h3{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:clamp(19px,2.6vw,22px); color:var(--ink); margin-top:1.9em; }
.prosa ul,.prosa ol{ padding-left:1.2em; }
.prosa ul{ list-style:none; padding-left:0; }
.prosa ul li{ position:relative; padding-left:1.6em; margin-top:.5em; }
.prosa ul li::before{ content:""; position:absolute; left:0; top:.62em; width:.85em; height:4px; background:var(--amarelo); }
.prosa ol{ list-style:decimal; }
.prosa ol li{ margin-top:.5em; padding-left:.3em; }
.prosa ol li::marker{ font-family:"JetBrains Mono",monospace; font-size:.85em; color:var(--oliva); }
.prosa a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--amarelo); text-decoration-thickness:3px; text-underline-offset:3px; }
.prosa a:hover{ background:var(--amarelo); }
.prosa strong{ font-weight:600; color:var(--ink); }

/* ---------- sanfonas ---------- */
details > summary{ list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker{ display:none; }
.faq-item summary{ display:flex; gap:1.5rem; align-items:flex-start; justify-content:space-between; padding:1.15rem 0; font-size:18px; font-weight:600; }
.faq-item .sinal{ flex:none; color:var(--oliva); font-size:26px; line-height:1; transition:transform .2s ease; }
.faq-item[open] .sinal{ transform:rotate(45deg); }
.faq-item[open] summary{ color:var(--oliva); }

.grupo-rodape > summary{ display:flex; justify-content:space-between; align-items:center; padding:.9rem 0; }
.grupo-rodape .sinal{ font-size:20px; line-height:1; transition:transform .2s ease; }
.grupo-rodape[open] .sinal{ transform:rotate(45deg); }
.lista-rodape{ padding-bottom:1rem; display:grid; gap:.6rem; font-size:14px; }
.lista-rodape a:hover{ color:var(--amarelo); }
@media (min-width:768px){
  .grupo-rodape > summary{ pointer-events:none; padding-top:0; }
  .lista-rodape{ padding-bottom:0; }
}

/* ---------- animação de entrada ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.on{ opacity:1; transform:none; }
.reveal[data-atraso="1"]{ transition-delay:.08s; }
.reveal[data-atraso="2"]{ transition-delay:.16s; }
.reveal[data-atraso="3"]{ transition-delay:.24s; }

/* ---------- utilidades ---------- */
.grade-fundo{
  background-image:
    linear-gradient(var(--linha) 1px,transparent 1px),
    linear-gradient(90deg,var(--linha) 1px,transparent 1px);
  background-size:56px 56px;
}
.recorte{ clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),0 100%); }

.foto-pendente{
  background-color:var(--paper-2);
  background-image:repeating-linear-gradient(135deg,rgba(11,11,10,.055) 0 10px,transparent 10px 20px);
  border:1px dashed #C3BFAE; color:#8B8878;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:"JetBrains Mono",monospace; font-size:11px; padding:14px; line-height:1.5;
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--amarelo); outline-offset:3px; border-radius:2px;
}

/* campos de formulário */
.campo{
  width:100%; border:2px solid var(--ink); background:#fff; padding:.9rem 1rem; font-size:16px;
}
.campo::placeholder{ color:#9A978A; }
.rotulo{ display:block; font-size:14px; font-weight:600; margin-bottom:.4rem; }

/* ---------- celular ---------- */
@media (max-width:640px){
  .h-display{ letter-spacing:-.03em; }
  .esconde-mobile{ display:none !important; }
  .btn-amarelo,.btn-escuro,.btn-linha,.btn-claro{ width:100%; padding:.95rem 1.2rem; box-shadow:3px 3px 0 var(--ink); }
  .btn-escuro{ box-shadow:3px 3px 0 var(--amarelo); }
  .cartao:hover,.cartao-plano:hover{ transform:none; box-shadow:none; }
  .prosa{ font-size:16.5px; }
  .fita-trilho{ animation-duration:26s; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .fita-trilho{ animation:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}