:root{
  /* Color tokens (ajuste depois) */
  --tw-bg: #0c0d0f;
  --tw-fg: #f5f2eb;
  --tw-muted: rgba(245,242,235,.72);
  --tw-hairline: rgba(245,242,235,.14);

  /* Typography */
  --tw-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --tw-max: 1120px;

  /* Motion tokens */
  --tw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tw-ease-std: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tw-dur-xs: 160ms;
  --tw-dur-s: 240ms;
  --tw-dur-m: 420ms;
  --tw-dur-l: 650ms;

  /* Shadow/AO tokens (presença física mínima) — DARK (corrigido) */
  --tw-shadow-wall: 0 18px 40px rgba(0,0,0,.40);
  --tw-shadow-table: 0 10px 22px rgba(0,0,0,.32);
  --tw-shadow-table-hover: 0 12px 30px rgba(0,0,0,.36);

  /* AO “mínimo físico” — aparece no fundo escuro sem virar moldura */
  --tw-ao:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -10px 22px rgba(0,0,0,.22);

  /* Layout */
  --tw-gutter: 24px;
  --tw-radius: 18px;
}

@media (prefers-color-scheme: light){
  :root{
    --tw-bg:#fbfaf7;
    --tw-fg:#121317;
    --tw-muted: rgba(18,19,23,.68);
    --tw-hairline: rgba(18,19,23,.12);

    /* Shadow/AO tokens — LIGHT (corrigido e consistente) */
    --tw-shadow-wall: 0 18px 40px rgba(0,0,0,.18);
    --tw-shadow-table: 0 10px 22px rgba(0,0,0,.14);
    --tw-shadow-table-hover: 0 12px 30px rgba(0,0,0,.16);

    /* AO leve no claro (não “moldura”) */
    --tw-ao:
      inset 0 0 0 1px rgba(0,0,0,.08),
      inset 0 -10px 22px rgba(0,0,0,.10);
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--tw-font);
  background:var(--tw-bg);
  color:var(--tw-fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none;}
a:focus{outline:2px solid currentColor; outline-offset:3px;}
img{max-width:100%; height:auto; display:block;}
img{-webkit-user-drag:none; user-select:none;}

.tw-container{max-width:var(--tw-max); margin:0 auto; padding:0 var(--tw-gutter);}

/* Header */
.tw-header{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--tw-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--tw-hairline);}
.tw-header__inner{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px;}
.tw-brand__name{font-weight:500; letter-spacing:.02em;}
.tw-nav__list{list-style:none; display:flex; gap:18px; padding:0; margin:0;}
.tw-nav__list a{color:var(--tw-muted); transition:color var(--tw-dur-xs) var(--tw-ease-std);} 
.tw-nav__list a:hover{color:var(--tw-fg);} 

/* Typo */
.tw-h1{font-size:clamp(28px, 3.2vw, 44px); letter-spacing:-0.02em; line-height:1.15; margin:0;}
.tw-h2{font-size:clamp(20px, 2.2vw, 28px); letter-spacing:-0.01em; line-height:1.25; margin:0;}
.tw-muted{color:var(--tw-muted);}
.tw-link{display:inline-block; color:var(--tw-fg); border-bottom:1px solid var(--tw-hairline); padding-bottom:2px;}
.tw-link:hover{border-bottom-color:currentColor;}
.tw-dot{opacity:.5; padding:0 10px;}

/* Sections */
.tw-main{padding-bottom:72px;}
.tw-section{padding:52px 0;}
.tw-section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--tw-hairline); margin-bottom:22px;}

/* Hero */
.tw-hero{padding:42px 0 26px;}
.tw-hero__inner{display:grid; gap:22px;}
.tw-hero__caption{display:flex; flex-direction:column; gap:10px;}
.tw-hero__meta{margin:0; color:var(--tw-muted);}

/* Poster object */
.tw-poster{position:relative; border-radius:var(--tw-radius); overflow:hidden; background:color-mix(in srgb, var(--tw-bg) 90%, var(--tw-fg) 10%);}
.tw-poster__img{width:100%; height:auto; display:block;}
.tw-poster__placeholder{aspect-ratio: 3/4; background:color-mix(in srgb, var(--tw-bg) 88%, var(--tw-fg) 12%);}

/* Presence: wall vs table */
.tw-poster--wall{
  box-shadow: var(--tw-shadow-wall);
}
.tw-poster--wall::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: var(--tw-ao);
  pointer-events:none;
}

.tw-poster--table{
  box-shadow: var(--tw-shadow-table);
  transition: box-shadow var(--tw-dur-s) var(--tw-ease-std);
}
.tw-poster--table::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: var(--tw-ao);
  pointer-events:none;
}

/* Cards / Grid */
.tw-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px;}
@media (max-width: 980px){.tw-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width: 620px){.tw-grid{grid-template-columns:1fr;}}

.tw-card{border-radius:24px;}
.tw-card__link{display:flex; flex-direction:column; gap:14px;}
.tw-card__title{font-size:16px; margin:0; letter-spacing:.01em;}
.tw-card__sub{margin:6px 0 0; font-size:13px; color:var(--tw-muted);}

/* Hover: NÃO levanta, NÃO zoom. Só reforça presença */
@media (hover:hover){
  .tw-card__link:hover .tw-poster--table{
    box-shadow: var(--tw-shadow-table-hover);
  }
}

/* Editorial */
.tw-editorial{padding:68px 0; border-top:1px solid var(--tw-hairline); border-bottom:1px solid var(--tw-hairline);}
.tw-editorial__inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center;}
@media (max-width: 860px){
  .tw-editorial__inner{grid-template-columns:1fr;}
}

/* Article */
.tw-article__head{padding-top:38px; padding-bottom:20px;}
.tw-article__meta{margin:10px 0 0;}
.tw-article__poster{margin-top:22px;}
.tw-article__body{padding-top:10px; max-width: 78ch;}
.tw-article__body p{margin: 0 0 16px;}
.tw-article__body h2{margin: 28px 0 10px;}
.tw-article__foot{padding-top:28px;}

/* Pagination */
.tw-pagination{padding-top:26px;}
.page-numbers{display:inline-flex; gap:10px; align-items:center;}
.page-numbers a, .page-numbers span{
  padding:8px 10px;
  border:1px solid var(--tw-hairline);
  border-radius:999px;
  color:var(--tw-muted);
}
.page-numbers .current{color:var(--tw-fg); border-color:currentColor;}

/* Footer */
.tw-footer{border-top:1px solid var(--tw-hairline); padding:22px 0;}
.tw-footer__inner{display:flex; justify-content:space-between; gap:12px;}
.tw-footer__small{font-size:13px; color:var(--tw-muted);}

/* Reveal */
[data-reveal]{
  opacity:0;
  transform: translate3d(0, 12px, 0);
  filter: blur(8px);
  transition:
    opacity var(--tw-dur-m) var(--tw-ease-out),
    transform var(--tw-dur-m) var(--tw-ease-out),
    filter var(--tw-dur-m) var(--tw-ease-out);
}
[data-reveal].is-inview{
  opacity:1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{transition:none; opacity:1; transform:none; filter:none;}
}

/* Lightbox (Museum View) */
.tw-lightbox{position:fixed; inset:0; background:color-mix(in srgb, var(--tw-bg) 92%, transparent); backdrop-filter: blur(10px); display:none; z-index:50;}
.tw-lightbox.is-open{display:block;}
.tw-lightbox__close{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--tw-hairline);
  background:transparent;
  color:var(--tw-fg);
  font-size:24px;
  cursor:pointer;
}
.tw-lightbox__stage{position:absolute; inset:0; display:grid; place-items:center; padding:86px var(--tw-gutter) 46px;}
.tw-lightbox__img{
  max-width:min(980px, 92vw);
  max-height:72vh;
  border-radius:22px;
  box-shadow: var(--tw-shadow-wall);
}
.tw-lightbox__caption{margin-top:14px; color:var(--tw-muted); font-size:13px; text-align:center; max-width: 80ch;}

/* =========================================================
   PATCHES — Respiro Hero + Mobile confortável + Toggle motion
   ========================================================= */

/* Hero com respiro real (resolve “imagem gigante”) */
.tw-hero{
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.tw-hero .tw-container{
  max-width: var(--tw-max);
}
.tw-hero .tw-poster{
  max-width: 980px;
  margin-inline: auto;
}

/* Mobile safe area + header/nav mais respirável */
@media (max-width: 768px){
  :root{ --tw-gutter: 16px; }

  .tw-header__inner{min-height:58px;}
  .tw-nav__list{gap:12px; font-size:14px;}

  .tw-section{padding:40px 0;}
  .tw-section__head{margin-bottom:18px;}

  .tw-hero{
    padding-block: 2.25rem;
    padding-inline: 1rem;
  }

  .tw-container{padding:0 var(--tw-gutter);}

  .tw-footer__inner{flex-direction:column;}
}

/* Modo “sem motion” (adicione class no body: no-motion) */
body.no-motion [data-reveal]{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}
