/* =========================================================
   LEX STUDIO — Comunicação Jurídica Premium
   Design system: editorial / boutique / luxo discreto
   ========================================================= */

:root{
  --bg:#08080A;
  --surface:#0F1115;
  --surface-2:#15181D;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.14);
  --text:#F5F4F1;
  --text-secondary:#A3A3A3;
  --text-tertiary:#6B6B6E;
  --gold:#C9A96E;
  --gold-bright:#E4C892;
  --gold-deep:#8C7038;
  --gold-soft:rgba(201,169,110,.13);
  --gold-glow:rgba(201,169,110,.24);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.65,0,.35,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

::selection{background:var(--gold-soft);color:var(--gold-bright);}
a{color:inherit;text-decoration:none;}
a,button{touch-action:manipulation;} /* remove delay de 300ms no toque, crítico em anúncios */
.font-display{font-family:'Playfair Display',serif;}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px;}

/* ---------- ambient background: noise + layered gradients ---------- */
.bg-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
}
.bg-layer .gradients{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 40% at 88% 6%, var(--gold-glow) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 4% 96%, rgba(201,169,110,.09) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(255,255,255,.025) 0%, transparent 70%);
  opacity:.65;
}
.bg-layer .noise{
  position:absolute;inset:0;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow{
  position:fixed;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  pointer-events:none;z-index:1;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .6s ease;filter:blur(14px);will-change:transform;
}
@media (min-width:900px){ .cursor-glow.active{opacity:.45;} }

.wrap{max-width:1240px;margin:0 auto;padding:0 1.5rem;}
@media (min-width:768px){ .wrap{padding:0 3rem;} }

/* ---------- HEADER / MASTHEAD ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:1.5rem 0;
  transition:background .5s ease, padding .4s ease, backdrop-filter .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
header.scrolled{
  background:rgba(8,8,10,.7);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border);
  padding:1.05rem 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:.85rem;}
.mono{
  width:34px;height:34px;flex-shrink:0;
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.mono svg{width:16px;height:16px;}
.brand-word{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  letter-spacing:.14em;
  font-weight:600;
}
.masthead-right{
  display:flex;align-items:center;gap:2rem;
}
.edition{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-tertiary);
  display:none;
}
@media (min-width:768px){ .edition{display:inline-block;} }
.nav-cta{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
  border:1px solid var(--border-strong);
  padding:.6rem 1.25rem;
  transition:all .4s var(--ease);
  display:none;
}
@media (min-width:640px){ .nav-cta{display:inline-block;} }
.nav-cta:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-soft);}

/* ---------- HERO: capa de revista, foto full-bleed ---------- */
.hero{
  position:relative;
  min-height:100vh;   /* fallback: navegadores in-app (Instagram/Facebook) sem suporte a svh */
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-media{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}
.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:75% 18%;
  filter:grayscale(.12) contrast(1.08) brightness(.82);
  transform:scale(1.06);
  transition:transform 1.6s var(--ease);
  will-change:transform;
}
@media (max-width:640px){
  .hero-media img{ object-position:62% 14%; } /* mantém o rosto visível em telas estreitas/altas */
}
.hero-media .scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(8,8,10,.98) 0%, rgba(8,8,10,.86) 30%, rgba(8,8,10,.35) 58%, rgba(8,8,10,.15) 78%, rgba(8,8,10,.55) 100%),
    linear-gradient(0deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,0) 32%);
}
@media (max-width:767px){
  .hero-media .scrim{
    background:
      linear-gradient(0deg, rgba(8,8,10,.98) 0%, rgba(8,8,10,.9) 38%, rgba(8,8,10,.4) 62%, rgba(8,8,10,.25) 100%);
  }
}
.hero-media .vignette{
  position:absolute;inset:0;
  box-shadow:inset 0 0 180px 40px rgba(8,8,10,.7);
}

.hero-content{
  position:relative;z-index:2;
  width:100%;
  padding:6.5rem 1.25rem 3rem;
}
@media (min-width:480px){ .hero-content{padding:7rem 1.5rem 3.75rem;} }
@media (min-width:768px){ .hero-content{padding:9rem 3rem 6rem;} }

/* landscape phones (comum em anúncios abertos deitado, telas curtas) */
@media (max-height:480px) and (orientation:landscape){
  .hero{min-height:100vh;}
  .hero-content{padding-top:5.5rem;padding-bottom:2rem;}
  .scroll-cue{display:none;}
}

.hero-kicker{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
  margin-bottom:1.6rem;
  display:flex;align-items:center;gap:.7rem;
  opacity:0;animation:fadeUp .9s .15s var(--ease) forwards;
}
.hero-kicker::before{content:"";width:26px;height:1px;background:var(--gold);}

.hero h1{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-size:clamp(2.15rem, 8.5vw, 5.4rem);
  line-height:1.08;
  letter-spacing:-.01em;
  max-width:16ch;
  opacity:0;animation:fadeUp 1s .3s var(--ease) forwards;
}
.hero h1 .accent{
  color:var(--gold-bright);
  font-style:italic;
}

.hero-sub{
  margin-top:1.75rem;
  font-size:1.02rem;line-height:1.75;
  color:var(--text-secondary);
  max-width:38ch;font-weight:300;
  opacity:0;animation:fadeUp 1s .48s var(--ease) forwards;
}

.hero-tagline{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
  font-size:1.05rem;color:#E9DDBF;
  margin-top:1.9rem;
  opacity:0;animation:fadeUp 1s .62s var(--ease) forwards;
}
.hero-tagline::before{content:"“";color:var(--gold);}
.hero-tagline::after{content:"”";color:var(--gold);}

.cta-btn{
  display:inline-flex;align-items:center;gap:.7rem;
  margin-top:2.6rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:#08080A;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  padding:1.05rem 2.15rem;
  border-radius:2px;
  position:relative;
  transition:transform .4s var(--ease), box-shadow .5s var(--ease), filter .4s var(--ease);
  opacity:0;animation:fadeUp 1s .78s var(--ease) forwards;
}
.cta-btn:hover{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 18px 40px -10px rgba(201,169,110,.5), 0 0 0 1px rgba(201,169,110,.3);
  filter:brightness(1.06);
}
.cta-btn svg{transition:transform .4s var(--ease);width:15px;height:15px;}
.cta-btn:hover svg{transform:translateX(4px);}

.scroll-cue{
  position:absolute;left:1.5rem;bottom:2rem;z-index:2;
  display:flex;align-items:center;gap:.7rem;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-tertiary);
  opacity:0;animation:fadeUp 1s 1s var(--ease) forwards;
}
@media (min-width:768px){ .scroll-cue{left:3rem;} }
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(180deg,var(--gold),transparent);position:relative;overflow:hidden;}
.scroll-cue .line::after{
  content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:var(--gold-bright);
  animation:scrollDrip 2.4s ease-in-out infinite;
}
@keyframes scrollDrip{ 0%{top:-100%;} 60%,100%{top:100%;} }

@keyframes fadeUp{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }

/* ---------- SUMÁRIO (table of contents) ---------- */
.toc{position:relative;z-index:2;padding:6rem 0 4rem;}
@media (min-width:768px){ .toc{padding:9rem 0 6rem;} }

.toc-head{margin-bottom:4.5rem;display:flex;flex-direction:column;gap:1rem;}
@media (min-width:860px){
  .toc-head{flex-direction:row;justify-content:space-between;align-items:flex-end;}
}
.toc-eyebrow{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600;
  display:flex;align-items:center;gap:.7rem;
}
.toc-eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);}
.toc-head h2{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.25;
  max-width:22ch;margin-top:.9rem;
}
.toc-head .toc-note{
  font-size:.82rem;color:var(--text-tertiary);max-width:26ch;line-height:1.6;
}

.toc-list{border-top:1px solid var(--border);}

.toc-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:1rem;
  padding:1.9rem 0;
  border-bottom:1px solid var(--border);
  position:relative;
  cursor:pointer;
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), padding .5s var(--ease);
}
.toc-row.in-view{opacity:1;transform:translateY(0);}

.toc-folio{
  font-family:'Playfair Display',serif;font-size:1rem;color:var(--gold);
  opacity:.6;transition:opacity .4s ease;min-width:2.4ch;
}
.toc-row:hover .toc-folio{opacity:1;}

.toc-main{min-width:0;display:flex;align-items:baseline;gap:1rem;overflow:hidden;}
.toc-title{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:1.15rem;white-space:nowrap;
  transition:color .4s ease, transform .5s var(--ease);
}
@media (min-width:640px){ .toc-title{font-size:1.4rem;} }
.toc-row:hover .toc-title{color:var(--gold-bright);}

.toc-dots{
  flex:1;min-width:20px;
  border-bottom:1px dotted var(--border-strong);
  transform:translateY(-.35em);
  opacity:.6;transition:opacity .4s ease;
}
.toc-row:hover .toc-dots{opacity:1;border-bottom-color:var(--gold);}

.toc-desc{
  display:none;
  font-size:.82rem;color:var(--text-secondary);white-space:nowrap;
}
@media (min-width:860px){ .toc-desc{display:inline;} }

.toc-arrow-wrap{display:flex;align-items:center;gap:1rem;}
.toc-arrow{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  transition:all .45s var(--ease);
  flex-shrink:0;
}
.toc-arrow svg{width:13px;height:13px;transition:transform .45s var(--ease);}
@media (pointer:coarse){
  .toc-row{padding:1.5rem 0;min-height:44px;}
  .toc-arrow{width:38px;height:38px;}
  .toc-arrow svg{width:15px;height:15px;}
}
.toc-row:hover .toc-arrow{border-color:var(--gold);background:var(--gold-soft);}
.toc-row:hover .toc-arrow svg{transform:translateX(3px) translateY(-3px);}

/* expanded description on mobile (below title) */
.toc-desc-mobile{
  grid-column:1 / -1;
  font-size:.85rem;color:var(--text-secondary);
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease), margin .5s var(--ease);
  margin-top:0;line-height:1.6;
}
@media (min-width:860px){ .toc-desc-mobile{display:none;} }
.toc-row.open .toc-desc-mobile{max-height:6rem;margin-top:.9rem;}

/* ---------- MANIFESTO STRIP ---------- */
.manifesto{
  position:relative;z-index:2;
  padding:6rem 0;
  border-top:1px solid var(--border);
  text-align:center;
}
.manifesto blockquote{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,3.2vw,2.1rem);
  line-height:1.5;
  max-width:24ch;margin:0 auto;
  color:#EDE3C9;
}
.manifesto blockquote em{color:var(--gold-bright);font-style:italic;}
.manifesto .attribution{
  margin-top:1.6rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-tertiary);
}

/* ---------- FOOTER / COLOPHON ---------- */
footer{
  position:relative;z-index:2;
  padding:4rem 0 2.5rem;
  border-top:1px solid var(--border);
}
.footer-inner{
  display:flex;flex-direction:column;gap:2.5rem;align-items:center;text-align:center;
}
@media (min-width:768px){
  .footer-inner{flex-direction:row;justify-content:space-between;text-align:left;}
}
.footer-brand{display:flex;align-items:center;gap:.85rem;}
.footer-links{
  display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);
}
.footer-links a{transition:color .35s ease;}
.footer-links a:hover{color:var(--gold);}
.footer-meta{
  font-size:.68rem;color:var(--text-tertiary);letter-spacing:.05em;
}
.footer-bottom{
  margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center;
  font-size:.66rem;color:var(--text-tertiary);letter-spacing:.05em;
}
@media (min-width:768px){
  .footer-bottom{flex-direction:row;justify-content:space-between;text-align:left;}
}

/* ---------- WHATSAPP FLUTUANTE (mobile) ---------- */
.wa-float{
  position:fixed;
  right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:70;
  width:54px;height:54px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(201,169,110,.35);
  transition:transform .35s var(--ease), box-shadow .4s var(--ease);
}
.wa-float svg{width:24px;height:24px;color:#08080A;}
.wa-float::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(201,169,110,.35);
  animation:waPulse 2.6s ease-out infinite;
}
@keyframes waPulse{
  0%{transform:scale(.9);opacity:.9;}
  100%{transform:scale(1.35);opacity:0;}
}
.wa-float:hover{transform:scale(1.06);box-shadow:0 14px 34px -6px rgba(201,169,110,.55);}
@media (min-width:960px){ .wa-float{width:58px;height:58px;right:1.5rem;bottom:1.5rem;} }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}