/* ============================================================
   HENRIQUE RAMOS — Social Media & Posicionamento
   CSS mobile-first: estilos base = celular; @media (min-width:861px) = desktop.
   Mesmo design, fontes, cores e tamanhos do layout original.
============================================================ */

/* ============================ TOKENS ============================ */
:root{
  --deep:#342e57;
  --deep-2:#2a2548;
  --lav:#837bb9;
  --lav-soft:#a9a3d1;
  --cream:#fdf4e5;
  --white:#ffffff;
  --ink:#1a1535;
  --stone:#5a5475;

  --display:'Playfair Display', Georgia, serif;
  --editorial:'Cormorant Garamond', Georgia, serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;

  --maxw:1060px;
  --radius:16px;
  --shadow:0 20px 50px -25px rgba(26,21,53,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0 0 .45em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,6vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.65rem,4.2vw,2.5rem);font-weight:700}
h3{font-size:clamp(1.15rem,2.4vw,1.4rem);font-weight:600}
p{margin:0 0 1em}
em.ed{font-family:var(--editorial);font-style:italic;font-weight:500}

.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:60px 0}
.section--dark{background:var(--deep);color:var(--cream)}
.section--dark h2,.section--dark h3{color:var(--cream)}
.section--white{background:var(--white)}

.eyebrow{
  font-weight:600;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--lav);margin:0 0 16px;display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"✦";font-size:.85em}
.lead{font-size:1.12rem;color:var(--stone);max-width:58ch}
.section--dark .lead{color:rgba(253,244,229,.7)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ============================ ESTRELA ============================ */
.star{display:inline-block;line-height:1}
.star svg{display:block}

/* ============================ BOTÕES ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--body);font-weight:600;font-size:1rem;
  padding:16px 32px;border-radius:60px;border:0;cursor:pointer;
  text-decoration:none;line-height:1.25;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn--cta{
  background:var(--lav);color:var(--white);
  box-shadow:0 14px 30px -14px rgba(131,123,185,.9);
  position:relative;overflow:hidden;
}
.btn--cta::before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-80px;width:55px;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform:skewX(-22deg);
  animation:shine 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{
  0%{left:-80px}
  45%{left:calc(100% + 40px)}
  100%{left:calc(100% + 40px)}
}
.btn--cta:hover{background:#736bab;transform:translateY(-2px)}
.btn--dark{background:var(--deep);color:var(--cream)}
.btn--dark:hover{background:var(--deep-2);transform:translateY(-2px)}
.btn--lg{font-size:1.1rem;padding:19px 42px}
.btn:focus-visible{outline:3px solid var(--lav);outline-offset:3px}
.cta-note{font-size:.85rem;color:var(--stone);margin-top:13px}
.section--dark .cta-note{color:rgba(253,244,229,.55)}

/* ============================ TOPBAR ============================ */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(52,46,87,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(131,123,185,.25);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 22px;max-width:var(--maxw);margin:0 auto}
.topbar .btn{padding:10px 22px;font-size:.88rem}
.topbar .btn .hide-m{display:none}

.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo__name{font-family:var(--display);font-weight:700;font-size:1.18rem;color:var(--cream);letter-spacing:-.01em}
.logo__name em{font-family:var(--display);font-style:italic;font-weight:500;color:var(--lav-soft)}

/* ============================ HERO ============================ */
.hero{position:relative;background:var(--deep);color:var(--cream);overflow:hidden;display:block}

/* Foto mesclada ao fundo — desaparece nas bordas */
.hero__photo{
  position:relative;width:100%;height:58vh;min-height:380px;max-height:520px;
  pointer-events:none;z-index:1;
}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;object-position:86% center;
  -webkit-mask-image:linear-gradient(to top, transparent 0%, #000 34%);
  mask-image:linear-gradient(to top, transparent 0%, #000 34%);
  -webkit-mask-composite:source-over;
  mask-composite:add;
}
/* Véu roxo por cima da foto pra fundir com a paleta */
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, var(--deep) 0%, rgba(52,46,87,.25) 45%, rgba(52,46,87,.15) 100%);
}

/* Marca d'água gigante estilo editorial */
.hero__mark{
  position:absolute;top:18%;right:-8%;transform:none;
  font-family:var(--editorial);font-style:italic;font-weight:400;
  font-size:220px;line-height:1;
  color:rgba(253,244,229,.05);z-index:2;pointer-events:none;user-select:none;
}

.hero__inner{position:relative;z-index:3;padding:0 22px 52px;margin:-90px auto 0;max-width:var(--maxw);width:100%}
.hero__copy{max-width:100%}
.hero h1{color:var(--cream);margin-bottom:.4em}
.hero h1 em{font-family:var(--editorial);font-style:italic;font-weight:500;color:var(--lav-soft);letter-spacing:0}
.hero .lead{color:rgba(253,244,229,.72)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.trust-line{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;font-size:.86rem;color:rgba(253,244,229,.6)}
.trust-line span{display:inline-flex;align-items:center;gap:8px}
.trust-line .tdot{color:var(--lav-soft);font-size:.8em}

.hero .floatstar{position:absolute;z-index:2;opacity:.55;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ============================ FAIXA MARQUEE ============================ */
.strip{background:var(--lav);color:var(--white);overflow:hidden;padding:14px 0}
.strip__track{display:flex;gap:36px;white-space:nowrap;font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;animation:slide 26s linear infinite;width:max-content}
.strip__track span{display:inline-flex;align-items:center;gap:36px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ SERVIÇOS ============================ */
.svc-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:46px}
.svc{
  background:var(--white);border-radius:var(--radius);padding:32px 28px;
  box-shadow:0 6px 24px -14px rgba(52,46,87,.25);
  border-top:3px solid transparent;
  transition:transform .2s ease, border-color .2s ease;
}
.svc:hover{transform:translateY(-4px);border-top-color:var(--lav)}
.svc__star{color:var(--lav);margin-bottom:16px}
.svc h3{margin-bottom:.4em}
.svc p{font-size:.94rem;color:var(--stone);margin:0}
.svc--featured{background:var(--deep);border-top-color:var(--lav)}
.svc--featured h3{color:var(--cream)}
.svc--featured p{color:rgba(253,244,229,.7)}
.svc__tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--deep);background:var(--cream);border-radius:20px;padding:4px 12px;margin-bottom:14px}

/* ============================ NÚMEROS ANIMADOS ============================ */
.metrics{position:relative;overflow:hidden}
.metrics::after{
  content:"✦";position:absolute;right:-30px;bottom:-60px;font-size:280px;line-height:1;
  color:rgba(131,123,185,.08);pointer-events:none;
}
.metrics-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:50px}
.metric{
  background:rgba(131,123,185,.1);border:1px solid rgba(131,123,185,.22);
  border-radius:var(--radius);padding:34px 26px 28px;text-align:center;
}
.metric__label{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lav-soft);margin-bottom:14px}
.metric__num{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,5.5vw,3.2rem);color:var(--cream);line-height:1;display:flex;align-items:baseline;justify-content:center;gap:4px}
.metric__num .suf{font-size:.45em;color:var(--lav-soft);font-family:var(--editorial);font-style:italic}
.metric__sub{font-size:.86rem;color:rgba(253,244,229,.55);margin-top:12px}
.bars{display:flex;align-items:flex-end;justify-content:center;gap:7px;height:52px;margin-top:22px}
.bars i{width:12px;border-radius:4px 4px 0 0;background:linear-gradient(to top, rgba(131,123,185,.5), var(--lav-soft));transform:scaleY(.08);transform-origin:bottom;transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.metrics.on .bars i{transform:scaleY(1)}
.metrics.on .bars i:nth-child(1){transition-delay:.05s}
.metrics.on .bars i:nth-child(2){transition-delay:.18s}
.metrics.on .bars i:nth-child(3){transition-delay:.31s}
.metrics.on .bars i:nth-child(4){transition-delay:.44s}
.metrics.on .bars i:nth-child(5){transition-delay:.57s}
.metrics-note{font-size:.8rem;color:rgba(253,244,229,.45);text-align:center;margin-top:26px}

/* ============================ SOBRE ============================ */
.about{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.about__photo{position:relative}
.about__photo img{border-radius:var(--radius);box-shadow:var(--shadow);max-width:400px;margin:0 auto}
.about__photo .cornerstar{position:absolute;top:-18px;right:-18px;color:var(--lav)}
.about ul{list-style:none;padding:0;margin:18px 0 0}
.about li{display:block;padding-left:24px;margin-bottom:12px;font-size:.98rem;color:var(--stone);position:relative;line-height:1.55}
.about li::before{content:"✦";position:absolute;left:0;top:4px;color:var(--lav);font-size:.8em}

/* ============================ DORES ============================ */
.pain-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:46px}
.pain{
  background:var(--white);border:1px solid rgba(52,46,87,.12);border-radius:var(--radius);
  padding:30px 26px;font-size:.94rem;color:var(--stone);line-height:1.6;
  transition:transform .2s ease;
}
.pain:hover{transform:translateY(-3px)}
.pain__x{
  width:36px;height:36px;border-radius:50%;border:1.5px solid var(--lav);
  display:flex;align-items:center;justify-content:center;
  color:var(--lav);font-weight:700;font-size:.85rem;margin-bottom:18px;
}
.pain strong{color:var(--deep)}

/* ============================ A VERDADE ============================ */
.truth{background:var(--lav);color:var(--white);position:relative;overflow:hidden}
.truth h2{color:var(--white)}
.truth h2 em{font-family:var(--editorial);font-style:italic;font-weight:500;color:var(--deep)}
.truth .lead{color:rgba(255,255,255,.85)}
.truth__mark{
  position:absolute;top:44%;left:-3%;transform:translateY(-50%);
  font-family:var(--editorial);font-style:italic;
  font-size:clamp(200px,30vw,420px);line-height:1;
  color:rgba(253,244,229,.08);pointer-events:none;user-select:none;white-space:nowrap;
}
.truth .container{position:relative;z-index:2}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:44px 0 10px}
.chip{
  background:var(--cream);color:var(--deep);border-radius:12px;
  padding:18px 26px;font-family:var(--display);font-weight:600;font-size:1.05rem;
  box-shadow:0 14px 30px -14px rgba(26,21,53,.5);
}
.truth-list{list-style:none;padding:0;max-width:620px;margin:40px auto 0}
.truth-list li{
  display:block;position:relative;padding:14px 0 14px 34px;text-align:left;
  font-size:.96rem;color:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(253,244,229,.25);
}
.truth-list li:last-child{border-bottom:none}
.truth-list li::before{
  content:"✓";position:absolute;left:0;top:13px;
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--cream);
}
.truth__punch{margin-top:52px;text-align:center}
.truth__punch h2{margin-bottom:.3em}
.truth__punch .lead{max-width:56ch;margin-left:auto;margin-right:auto}

/* ============================ CONTRASTE ============================ */
.pill-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:46px}
.pill{
  background:rgba(131,123,185,.14);border:1px solid rgba(131,123,185,.28);
  border-radius:12px;padding:22px 26px;display:block;position:relative;
  padding-left:52px;font-size:.96rem;color:var(--ink);line-height:1.55;
}
.pill::before{content:"✦";position:absolute;left:24px;top:24px;color:var(--lav);font-size:.85em}
.pill strong{color:var(--deep)}
.contrast__punch{text-align:center;margin-top:56px}
.contrast__punch h2 em{font-family:var(--editorial);font-style:italic;font-weight:500;color:var(--lav)}

/* ============================ É PRA VOCÊ? ============================ */
.fit-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:46px}
.fit{border-radius:var(--radius);padding:36px 30px;position:relative}
.fit--no{background:var(--white);box-shadow:0 6px 24px -14px rgba(52,46,87,.25)}
.fit--yes{background:var(--deep);color:var(--cream)}
.fit h3{margin-bottom:22px}
.fit--yes h3{color:var(--cream)}
.fit h3 strong{color:var(--lav)}
.fit--yes h3 strong{color:var(--lav-soft)}
.fit ul{list-style:none;padding:0;margin:0}
.fit li{display:block;padding:13px 0 13px 26px;font-size:.94rem;border-bottom:1px solid rgba(52,46,87,.09);position:relative;line-height:1.55}
.fit li:last-child{border-bottom:none}
.fit--no li{color:var(--stone)}
.fit--no li::before{content:"✕";position:absolute;left:0;top:15px;font-weight:700;font-size:.8em;color:#c97474}
.fit--yes li{color:rgba(253,244,229,.85);border-bottom-color:rgba(131,123,185,.25)}
.fit--yes li::before{content:"✦";position:absolute;left:0;top:16px;font-size:.8em;color:var(--lav-soft)}

/* ============================ PROCESSO (ETAPAS) ============================ */
.steps{display:grid;grid-template-columns:1fr;gap:22px;margin-top:46px}
.step{
  background:var(--white);border:1px solid rgba(52,46,87,.1);border-radius:var(--radius);
  padding:30px 28px;box-shadow:0 6px 24px -16px rgba(52,46,87,.22);position:relative;
}
.step--wide{grid-column:1 / -1}
.step__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}
.step__title{display:flex;align-items:center;gap:12px}
.step__title .star{color:var(--deep);flex:0 0 auto}
.step h3{margin:0}
.step__badge{
  flex:0 0 auto;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--deep);background:var(--cream);border-radius:20px;padding:6px 14px;
}
.step__intro{font-size:.9rem;color:var(--stone);margin:10px 0 4px}
.step ul{list-style:none;padding:0;margin:0}
.step li{display:block;padding:12px 0 12px 24px;font-size:.93rem;color:var(--stone);border-bottom:1px solid rgba(52,46,87,.08);position:relative;line-height:1.55}
.step li:last-child{border-bottom:none}
.step li::before{content:"✦";position:absolute;left:0;top:14px;color:var(--lav);font-size:.8em}

/* ============================ FAQ ============================ */
.faq{max-width:720px;margin:44px auto 0}
.faq details{background:var(--white);border-radius:12px;margin-bottom:12px;box-shadow:0 4px 18px -12px rgba(52,46,87,.3);overflow:hidden}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:600;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"✦";color:var(--lav);font-size:.75em;transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px;font-size:.93rem;color:var(--stone)}

/* ============================ CTA FINAL ============================ */
.final{position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 100% at 50% 0%, rgba(131,123,185,.25) 0%, rgba(131,123,185,0) 65%)}
.final .container{position:relative}
.final h2 em{font-family:var(--editorial);font-style:italic;font-weight:500;color:var(--lav-soft)}

/* ============================ FOOTER ============================ */
.footer{background:var(--deep-2);color:rgba(253,244,229,.5);padding:38px 0;text-align:center;font-size:.82rem}
.footer .logo{justify-content:center;margin-bottom:10px}
.footer a{color:inherit}

/* ============================ REVEAL ============================ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.rv.on{opacity:1;transform:none}

/* ============================ DESKTOP (min-width:861px) ============================ */
@media (min-width:861px){
  .section{padding:80px 0}

  .hero{min-height:82vh;display:flex;align-items:center}
  /* A arte do topo (1920x936) já traz o Rique à direita e a área do texto
     à esquerda — ela cobre o hero inteiro, como imagem de fundo */
  .hero__photo{
    position:absolute;top:0;right:0;bottom:0;left:0;width:100%;
    height:auto;min-height:0;max-height:none;
  }
  .hero__photo img{
    object-position:center top;
    -webkit-mask-image:none;
    mask-image:none;
  }
  /* Véu leve só na área do texto, pra garantir contraste */
  .hero__photo::after{
    background:linear-gradient(to right, rgba(52,46,87,.55) 0%, rgba(52,46,87,.22) 38%, rgba(52,46,87,0) 62%);
  }
  .hero__mark{
    font-size:clamp(300px,42vw,560px);
    top:50%;right:-2%;transform:translateY(-52%);
  }
  .hero__inner{padding:72px 22px 64px;margin-top:0}
  .hero__copy{max-width:600px}

  .topbar .btn .hide-m{display:inline}

  .svc-grid,.metrics-grid,.pain-grid{grid-template-columns:repeat(3,1fr)}
  .steps,.fit-grid,.pill-grid{grid-template-columns:1fr 1fr}

  .chip:nth-child(1){transform:rotate(-3.5deg)}
  .chip:nth-child(2){transform:rotate(2deg)}
  .chip:nth-child(3){transform:rotate(-1.5deg)}

  .about{grid-template-columns:.9fr 1.1fr;gap:52px}
  .about__photo img{max-width:100%;margin:0}
}

/* ============================ ACESSIBILIDADE: MENOS MOVIMENTO ============================ */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .strip__track,.floatstar{animation:none}
  .btn--cta::before{animation:none}
  .bars i{transform:scaleY(1);transition:none}
  html{scroll-behavior:auto}
}