/* ==========================================================================
   Erick Alves — Web Designer e Designer Gráfico
   Recriação de erickalveswebdesign.com.br  +  camada de refino visual
   Tipografia: Cormorant Garamond (títulos) + Manrope (subtítulos / textos)
   ========================================================================== */

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}

:root{
  --bg:#080808;
  --bg-2:#0c0c0c;
  --bg-marquee:#282828;

  --gold-a:#ecd035;
  --gold-b:#c0a613;
  --gold-lite:#f5e27a;
  --gold-grad:linear-gradient(92deg,#f3dc63 0%,#e7cb31 45%,#c7ac18 100%);
  --gold-grad-135:linear-gradient(135deg,#f5e27a,#ebcf34,#d4af37,#fff1a8);

  --white:#ffffff;
  --muted:#8b8b8b;
  --line:#2c2c2c;
  --container:1140px;

  --ff-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ff-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ff-sans:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --ff-nav:var(--ff-sans);

  /* Escala tipográfica — enxuta, calibrada pela referência do cliente */
  --fs-eyebrow:0.9375rem;                     /* 15px  — kickers / pill  */
  --fs-h1:clamp(2.4rem,4.4vw,52px);            /* hero                    */
  --fs-h2:clamp(1.55rem,2.5vw,33px);          /* títulos de seção        */
  --fs-h3:1.3125rem;                          /* 21px — títulos de card  */
  --fs-sub:clamp(0.95rem,1.25vw,15.5px);      /* subtítulos / statement  */
  --fs-body:0.9375rem;                        /* 15px                    */
  --fs-small:0.875rem;                        /* 14px                    */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--ff-sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:rgba(236,208,53,.28);color:#fff}

body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 82% 8%,rgba(236,208,53,.10),transparent 60%),
    radial-gradient(50% 45% at 10% 45%,rgba(199,172,24,.07),transparent 60%),
    radial-gradient(55% 40% at 88% 92%,rgba(236,208,53,.06),transparent 60%);
}

@supports (scrollbar-color: auto){
  html{scrollbar-color:#3a3a3a transparent;scrollbar-width:thin}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#333333;border-radius:20px;border:2px solid #0a0a0a}
::-webkit-scrollbar-thumb:hover{background:var(--gold-b)}

.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:var(--gold-grad);box-shadow:0 0 12px rgba(236,208,53,.6);
  transition:width .08s linear;
}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.col-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.ta-center{text-align:center}

/* ---------- Texto em degradê dourado ---------- */
.gold,
.h-serif b,
.h-serif strong,
.hero-title b,
.degrade{
  background:var(--gold-grad);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------- Headings ---------- */
.h-serif{
  font-family:var(--ff-serif);
  font-weight:600;
  font-size:var(--fs-h2);
  line-height:1.22;
  letter-spacing:.005em;
  text-wrap:balance;
}
.h-serif b,.h-serif strong{font-weight:700}

.h-statement{
  font-family:var(--ff-sans);
  font-weight:400;
  font-size:var(--fs-sub);
  line-height:1.55;
  max-width:640px;
  color:#c9c9c9;
  text-wrap:balance;
}

/* ---------- Buttons ---------- */
.btn{
  --btn-grad:linear-gradient(92deg,#ecd035,#c0a613);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--ff-sans);font-weight:700;
  text-transform:uppercase;text-align:center;color:#080808;
  overflow:hidden;isolation:isolate;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.btn--gold{background:var(--btn-grad)}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 38px -12px rgba(236,208,53,.6)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--gold-lite);outline-offset:3px}
.btn--md{font-size:12.5px;letter-spacing:.09em;padding:13px 24px;border-radius:9px}
.btn--cut{font-size:13px;letter-spacing:.08em;padding:14px 36px;border-radius:24px 4px 24px 4px}
.btn--cut::before{content:"→";font-family:var(--ff-sans);font-weight:700;transition:transform .3s var(--ease)}
.btn--cut:hover::before{transform:translateX(5px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:120;background:var(--bg);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease);
}
.site-header.scrolled{
  background:rgba(8,8,8,.72);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:rgba(236,208,53,.16);
}
.header-inner{
  display:flex;align-items:center;gap:32px;padding-block:20px;max-width:1140px;
  transition:padding .3s var(--ease);
}
.site-header.scrolled .header-inner{padding-block:12px}
.logo img{width:196px;height:auto;transition:width .3s var(--ease)}
.site-header.scrolled .logo img{width:172px}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;align-items:center;gap:28px}
.main-nav a{
  position:relative;
  font-family:var(--ff-nav);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  color:var(--white);padding:4px 2px;transition:color .2s var(--ease);
}
.main-nav a::after{
  content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:2px;
  background:var(--gold-grad);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.main-nav a:hover{color:var(--gold-a)}
.main-nav a:hover::after{transform:scaleX(1)}
.header-cta{margin-left:8px}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:.28s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  display:none;background:rgba(8,8,8,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;max-height:0;transition:max-height .38s var(--ease)}
.mobile-nav.open{max-height:440px}
.mobile-nav ul{display:flex;flex-direction:column;padding:10px 20px 24px}
.mobile-nav a{display:block;padding:14px 4px;font-family:var(--ff-nav);font-weight:600;font-size:15px;border-bottom:1px solid rgba(255,255,255,.07)}
.mobile-nav .btn{margin-top:16px;border-bottom:0}

/* ==========================================================================
   HERO
   ========================================================================== */
/* Divisor elegante entre o menu e a primeira seção */
.section-divider{
  position:relative;height:1px;z-index:110;
  background:linear-gradient(90deg,transparent,rgba(236,208,53,.5) 26%,rgba(255,241,168,.9) 50%,rgba(236,208,53,.5) 74%,transparent);
}
.section-divider::before{
  content:"";position:absolute;left:0;right:0;top:-2px;height:5px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(236,208,53,.28) 38%,rgba(236,208,53,.28) 62%,transparent);
  filter:blur(3px);
}
.section-divider::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold-lite);box-shadow:0 0 14px 2px rgba(236,208,53,.7);
}

.hero{
  position:relative;
  background:#080808 url("../assets/img/hero_erick_web_designer_1_1x.webp") no-repeat center top;
  background-size:cover;
  /* altura próxima da proporção da imagem, levemente mais compacta */
  height:clamp(525px,42.5vw,800px);
  display:flex;overflow:hidden;
}
.hero::after{ /* vinheta para leitura do texto */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,rgba(8,8,8,.86) 0%,rgba(8,8,8,.42) 40%,transparent 62%),
            linear-gradient(0deg,rgba(8,8,8,.5),transparent 42%);
}
.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1120px;margin-inline:auto;
  padding:44px 20px;
  display:flex;align-items:center;
}
.hero-copy{max-width:430px;margin-left:clamp(0px,2vw,34px)}
.hero-title{
  font-family:var(--ff-serif);font-weight:600;
  font-size:var(--fs-h1);line-height:1.24;letter-spacing:.005em;
  margin:8px 0 26px;text-wrap:balance;
}
.hero-title b{font-weight:700}
.hero-desc{
  font-family:var(--ff-sans);font-weight:400;
  font-size:clamp(.9rem,1.3vw,15px);line-height:1.6;
  color:#c9c9c9;margin-bottom:32px;max-width:44ch;
}
.hero-btn{align-self:flex-start}
.hero-icons{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-icon{
  position:absolute;
  height:clamp(62px,5.6vw,82px);             /* ambos os ícones com a mesma altura visual */
  width:auto;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));
  will-change:transform;
}
/* posições sobre os ombros do rosto na foto — ajuste fino aqui se necessário */
.hero-icon--word{left:52.5%;top:56%;animation:float1 4.5s ease-in-out infinite}
.hero-icon--figma{left:75.8%;top:55%;animation:float2 3.8s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  background:var(--bg-marquee);padding:18px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:scroll-left 44s linear infinite}
.marquee-item{
  display:inline-flex;align-items:center;gap:24px;padding-right:24px;
  font-family:var(--ff-sans);font-size:12px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:#f4f4f4;white-space:nowrap;
}
.diamond{width:6px;height:6px;background:var(--gold-a);transform:rotate(45deg);flex:none;box-shadow:0 0 10px rgba(236,208,53,.7)}
@keyframes scroll-left{to{transform:translateX(-50%)}}

/* ==========================================================================
   LOGO MARCA
   ========================================================================== */
.s-logomarca{background:var(--bg)}
.s-logomarca .container{padding-block:76px;gap:16px}

.pill{
  display:inline-block;padding:9px 20px;
  border:1.5px solid transparent;border-radius:1000px;
  background:linear-gradient(#101010,#0a0a0a) padding-box,var(--gold-grad-135) border-box;
  box-shadow:0 0 34px -12px rgba(236,208,53,.4);
}
.pill b{
  font-family:var(--ff-sans);font-weight:700;
  font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;line-height:1.4;
}
.s-logomarca .h-serif{max-width:560px;margin-top:6px}
.s-logomarca .h-statement{margin-bottom:24px}

/* Card rows */
.cards-row{display:flex;gap:20px;width:100%;padding:8px 0}
.cards-row--3{flex-wrap:wrap}
.cards-row--2{flex-wrap:wrap;align-items:stretch}

.gcard{
  flex:1 1 300px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:26px 32px;
  border:1px solid rgba(192,166,19,.5);border-radius:14px;
  text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),#0d0d0d;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.gcard::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 120% at 100% 0%,rgba(236,208,53,.16),transparent 55%);
  opacity:0;transition:opacity .4s var(--ease);
}
.gcard:hover{transform:translateY(-6px);border-color:var(--gold-a);box-shadow:0 26px 50px -24px rgba(236,208,53,.4)}
.gcard:hover::before{opacity:1}
.gcard h3{font-family:var(--ff-serif);font-weight:600;font-size:var(--fs-h3);letter-spacing:.005em;color:var(--white);line-height:1.2}
.gcard p{font-family:var(--ff-sans);font-weight:400;font-size:var(--fs-small);line-height:1.5;color:#cfcfcf}
.gcard--wide{flex:1 1 560px}
.cards-row--2 .gcard{flex:1 1 420px;padding:30px 36px;min-height:250px}

/* Cards com mídia (bloco / estátua) */
.cards-row--2 .gcard--media{background:#0d0d0d;justify-content:center;min-height:272px}
.gcard--media h3,.gcard--media p{position:relative;z-index:3;max-width:56%}
.gcard-smoke{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);
          mask-image:linear-gradient(90deg,transparent,#000 55%);
}
.gcard-deco{position:absolute;pointer-events:none;z-index:2}
.gcard-deco--scales{right:6%;top:50%;transform:translateY(-50%);width:min(42%,300px);opacity:.13;z-index:1;filter:saturate(1.2)}
.gcard-deco--notebook{right:1%;bottom:-14%;width:min(46%,290px);filter:drop-shadow(0 22px 34px rgba(0,0,0,.55))}
.gcard-deco--statue{right:3%;bottom:-9%;width:min(40%,210px);filter:drop-shadow(0 22px 34px rgba(0,0,0,.55))}

/* ==========================================================================
   PORTFÓLIO
   ========================================================================== */
.s-portfolio{background:var(--bg)}
.s-portfolio .container{padding-block:88px 76px;gap:28px}

.logo-marquee{
  width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.logo-marquee + .logo-marquee{margin-top:8px}
.logo-marquee-track{display:flex;gap:20px;width:max-content}
.logo-marquee-track img{
  width:344px;height:218px;object-fit:cover;border-radius:12px;flex:none;
  border:1px solid rgba(255,255,255,.06);
  filter:saturate(.92) brightness(.94);
  transition:transform .4s var(--ease),filter .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.logo-marquee-track img:hover{
  transform:scale(1.04);filter:saturate(1.08) brightness(1.03);
  border-color:rgba(236,208,53,.55);box-shadow:0 20px 40px -18px rgba(236,208,53,.4);
}
.logo-marquee-track--left{animation:scroll-left 48s linear infinite}
.logo-marquee-track--right{animation:scroll-right 48s linear infinite}
@keyframes scroll-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.logo-marquee:hover .logo-marquee-track{animation-play-state:paused}
.s-portfolio .btn{margin-top:14px}

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.s-processo{background:var(--bg)}
.processo-grid{display:flex;gap:76px;align-items:flex-start;padding-block:100px}
.processo-left{
  flex:1 1 400px;position:sticky;top:120px;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:40px;
}
.processo-left .h-serif{font-size:clamp(1.55rem,2.6vw,32px)}

.processo-right{flex:1 1 500px;display:flex;flex-direction:column;gap:22px}
.pcard{
  position:sticky;top:112px;
  background:linear-gradient(180deg,#101010,#0c0c0c);
  border:1px solid rgba(192,166,19,.3);border-radius:22px;padding:30px 34px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.pcard:hover{border-color:rgba(236,208,53,.55);box-shadow:0 34px 66px -28px rgba(236,208,53,.28)}
.pcard-num{
  display:block;font-family:var(--ff-serif);font-weight:700;font-size:1.15rem;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.pcard h3{font-family:var(--ff-serif);font-weight:600;font-size:var(--fs-h3);letter-spacing:.005em;color:var(--white);margin:4px 0 11px;line-height:1.25}
.pcard p{font-family:var(--ff-sans);font-weight:400;font-size:var(--fs-small);line-height:1.55;color:#cfcfcf}
.pcard:nth-child(1){top:112px}
.pcard:nth-child(2){top:130px}
.pcard:nth-child(3){top:148px}
.pcard:nth-child(4){top:166px}

/* ==========================================================================
   SITES QUE GERAM RESULTADO
   ========================================================================== */
.s-resultado{background:var(--bg)}
.s-resultado .container{padding-block:90px;gap:16px}
.s-resultado .h-serif{max-width:560px}
.s-resultado .carousel{margin-top:28px}

/* ==========================================================================
   CAROUSEL
   ========================================================================== */
.carousel{position:relative;width:100%}
.carousel-viewport{overflow:hidden;width:100%}
.carousel-track{display:flex;gap:20px;transition:transform .6s var(--ease-out)}
.carousel-slide{flex:none}
.s-resultado .carousel-slide img{
  width:100%;height:auto;aspect-ratio:366/618;object-fit:cover;border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
}
.carousel-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.carousel-dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:width .3s var(--ease),background .3s var(--ease)}
.carousel-dots button.active{width:24px;border-radius:5px;background:var(--gold-grad)}
.carousel-arrow{
  position:absolute;top:38%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(92deg,#ecd035,#c0a613);color:#080808;
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:3;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.carousel-arrow:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 12px 26px -8px rgba(236,208,53,.6)}
.carousel-arrow--prev{left:-6px}
.carousel-arrow--next{right:-6px}
@media(min-width:900px){
  .carousel-arrow--prev{left:-34px}
  .carousel-arrow--next{right:-34px}
}
@media(min-width:1300px){
  .carousel-arrow--prev{left:-68px}
  .carousel-arrow--next{right:-68px}
}

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.s-depoimentos{background:var(--bg)}
.s-depoimentos .container{padding-block:56px}
.dep-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px;margin-bottom:36px}
.dep-head-left{
  position:relative;flex:1 1 460px;
  display:grid;place-items:center;
  min-height:clamp(64px,9vw,104px);
}
.dep-watermark{
  grid-area:1/1;display:block;width:100%;text-align:center;
  font-family:var(--ff-serif);font-weight:700;
  font-size:clamp(2.6rem,7vw,72px);line-height:1;letter-spacing:.01em;
  color:#232323;
  white-space:nowrap;
}
.dep-sub{
  grid-area:1/1;position:relative;z-index:1;text-align:center;
  font-family:var(--ff-serif);font-weight:600;font-size:clamp(1.3rem,2.4vw,26px);letter-spacing:.005em;color:var(--white);
}
.dep-head-right{display:flex;align-items:center;gap:16px}
.dep-count{font-family:var(--ff-serif);font-weight:600;font-size:clamp(1.15rem,2vw,21px);color:var(--white);max-width:170px;line-height:1.2}
.dep-head-right img{width:104px;height:auto}

.tcard{
  background:linear-gradient(180deg,#151515,#0d0d0d);
  border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:34px 30px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;height:100%;
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.tcard:hover{border-color:rgba(236,208,53,.3);transform:translateY(-4px)}
.stars{color:var(--gold-a);letter-spacing:4px;font-size:14px;filter:drop-shadow(0 0 8px rgba(236,208,53,.35))}
.tcard p{font-family:var(--ff-sans);font-weight:400;font-size:var(--fs-small);line-height:1.6;color:#c6c6c6}
.tcard h4{font-family:var(--ff-serif);font-weight:600;font-size:1rem;color:var(--white);letter-spacing:.01em}
.tcard-role{font-family:var(--ff-sans);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-a)}
.s-depoimentos .carousel-slide{align-self:stretch}

/* ==========================================================================
   LANDING PAGE
   ========================================================================== */
.s-landing{background:var(--bg)}
.s-landing .container{padding-block:132px;gap:24px}
.s-landing .h-serif{max-width:600px}
.s-landing .cards-row--3{gap:26px;margin-top:22px;align-items:stretch}

.wcard{
  --mx:50%;--my:50%;
  flex:1 1 300px;min-height:300px;
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:18px;
  padding:44px 38px;
  border:1px solid rgba(192,166,19,.5);border-radius:30px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),#0d0d0d;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease);
}
.wcard>*{position:relative;z-index:2}
.wcard::before{ /* holofote que segue o cursor */
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(236,208,53,.20),transparent 68%);
  opacity:0;transition:opacity .4s var(--ease);
}
.wcard::after{ /* filete superior que acende no hover */
  content:"";position:absolute;left:38px;right:38px;top:0;height:2px;z-index:2;pointer-events:none;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.wcard:hover{
  transform:translateY(-10px);
  border-color:var(--gold-a);
  box-shadow:0 34px 64px -30px rgba(236,208,53,.4),0 12px 34px -18px rgba(0,0,0,.65);
}
.wcard:hover::before{opacity:1}
.wcard:hover::after{transform:scaleX(1)}

.wcard-top{display:flex;align-items:center;justify-content:space-between}
.wcard-ico{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;
  border-radius:12px;color:var(--gold-a);
  background:#0d0d0d;
  border:1px solid rgba(192,166,19,.5)}
.wcard-ico svg{width:20px;height:20px}
.wcard-num{font-family:var(--ff-serif);font-weight:700;font-size:1.5rem;line-height:1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wcard h3{font-family:var(--ff-serif);font-weight:700;font-size:calc(var(--fs-h3) + 1px);letter-spacing:.005em;color:var(--white);line-height:1.2;margin-top:2px}
.wcard p{font-family:var(--ff-sans);font-weight:400;font-size:var(--fs-small);line-height:1.6;color:#cfcfcf}

/* ==========================================================================
   DEGRADÊ
   ========================================================================== */
.s-degrade{background:var(--bg);padding-inline:50px}
.s-degrade .container{padding-block:58px;display:flex;flex-direction:column;gap:4px}
.degrade-line{
  font-family:var(--ff-sans);font-weight:800;
  font-size:clamp(2rem,5.2vw,58px);line-height:1.25;
  text-transform:uppercase;text-align:center;letter-spacing:-.01em;
}
.degrade-line .degrade{font-weight:800;background-size:280% 100%;animation:goldflow 6s linear infinite}
@keyframes goldflow{to{background-position:280% 0}}
.degrade-rule{border:0;height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}

/* ==========================================================================
   SOBRE
   ========================================================================== */
.s-sobre{background:var(--bg)}
.s-sobre .container{padding-block:104px 48px;max-width:1220px}
.sobre-card{
  display:flex;gap:40px;align-items:center;
  border:1px solid #4a4a4a;border-radius:16px;padding:0 80px;overflow:hidden;
  background:linear-gradient(120deg,rgba(255,255,255,.03),transparent 60%);
}
.sobre-text{flex:1 1 440px;display:flex;flex-direction:column;gap:11px;padding:52px 0}
.sobre-hi{font-family:var(--ff-serif);font-weight:600;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:#cfcfcf}
.sobre-rule{border:0;border-top:1px solid var(--line);width:100%}
.sobre-name{font-family:var(--ff-serif);font-weight:700;font-size:1.5rem;letter-spacing:.01em}
.sobre-bio{display:flex;flex-direction:column;gap:11px}
.sobre-bio p{font-family:var(--ff-sans);font-weight:300;font-size:var(--fs-small);line-height:1.6;color:#cfcfcf}
.sobre-photo{flex:0 0 auto;align-self:stretch;display:flex;align-items:flex-end}
.sobre-photo img{width:480px;max-width:44vw;height:100%;object-fit:cover}

/* ==========================================================================
   PARCERIA DEDICADA
   ========================================================================== */
.s-parceria{background:var(--bg)}
.s-parceria .container{padding-block:56px}
.parceria-card{
  display:flex;align-items:center;
  border:2px solid #4a4a4a;border-radius:22px;padding-left:100px;overflow:hidden;
  background:
    linear-gradient(120deg,transparent 55%,rgba(236,208,53,.06)),
    linear-gradient(90deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,.74) 45%,rgba(8,8,8,.9) 100%),
    url("../assets/img/fundo_abstrato_1_1x.webp") center/cover no-repeat,
    #080808;
}
.parceria-img{flex:0 0 auto;align-self:flex-end}
.parceria-img img{
  width:400px;max-width:40vw;height:auto;will-change:transform;
  animation:floatStatue 3.4s ease-in-out infinite;
}
@keyframes floatStatue{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.parceria-text{flex:1;padding:46px 64px 46px 36px;display:flex;flex-direction:column;gap:16px}
.parceria-text h2{
  font-family:var(--ff-serif);font-weight:600;
  font-size:clamp(1.35rem,2vw,23px);line-height:1.3;letter-spacing:.005em;color:var(--white);text-transform:capitalize;
}
.parceria-text p{font-family:var(--ff-sans);font-weight:400;font-size:var(--fs-body);line-height:1.55;color:#cfcfcf}

/* ==========================================================================
   FAQ
   ========================================================================== */
.s-faq{background:var(--bg)}
.s-faq .container{padding-block:26px 92px;gap:6px}
.faq-big{
  position:relative;z-index:0;
  font-family:var(--ff-serif);font-weight:700;
  font-size:clamp(3.6rem,11vw,120px);line-height:1;letter-spacing:.01em;
  background:linear-gradient(165deg,#f6e18a 0%,#e7cb31 45%,#a9860f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 8px 34px rgba(236,208,53,.2));
  /* apaga o dourado onde "Perguntas Frequentes" sobrepõe, pra manter legibilidade */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.12) 78%,rgba(0,0,0,.05) 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.12) 78%,rgba(0,0,0,.05) 100%);
}
.faq-sub{
  position:relative;z-index:1;
  margin-top:clamp(-58px,-4.6vw,-16px);margin-bottom:26px;
  font-family:var(--ff-serif);font-weight:500;font-style:italic;
  font-size:clamp(1.6rem,3.4vw,32px);letter-spacing:.005em;color:var(--white);
}

.faq-list{width:100%;max-width:900px}
.faq-item{
  margin-bottom:14px;border-radius:12px;overflow:hidden;
  border:1px solid #242424;background:#1c1c1c;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.faq-item:hover{border-color:rgba(236,208,53,.35)}
.faq-item[open]{border-color:rgba(236,208,53,.45);background:#1f1f1f}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;
  font-family:var(--ff-sans);font-weight:600;font-size:clamp(14px,1.7vw,16px);color:var(--white);text-align:left;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ico{position:relative;width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--gold-a);border-radius:2px;transition:.3s var(--ease)}
.faq-ico::before{top:7px;left:0;width:16px;height:2px}
.faq-ico::after{top:0;left:7px;width:2px;height:16px}
.faq-item[open] .faq-ico{transform:rotate(135deg)}
.faq-answer{height:0;overflow:hidden;transition:height .34s var(--ease)}
.faq-item[open] .faq-answer{height:auto}
.faq-answer>*{padding:0 22px 20px;font-family:var(--ff-sans);font-weight:400;font-size:var(--fs-small);line-height:1.6;color:#c9c9c9}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.s-cta{background:var(--bg)}
.s-cta .container{padding-block:20px 48px}
.cta-box{
  position:relative;overflow:hidden;
  border:1px solid rgba(236,208,53,.4);border-radius:26px;padding:56px 30px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
  background:#080808 url("../assets/img/fundo_abstrato_1_1x.webp") no-repeat center/cover;
}
.cta-box::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0%,rgba(8,8,8,.58),rgba(8,8,8,.86))}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{font-family:var(--ff-serif);font-weight:600;font-size:clamp(1.6rem,3vw,30px);line-height:1.25;letter-spacing:.005em;color:var(--white)}
.cta-box p{font-family:var(--ff-sans);font-weight:400;font-size:clamp(.95rem,1.6vw,16px);line-height:1.55;color:#c9c9c9;max-width:520px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--bg)}
.site-footer .container{padding-block:100px;gap:26px}
.site-footer .logo img{width:186px}
.footer-email{display:flex;align-items:center;gap:9px;font-family:var(--ff-nav);font-weight:500;font-size:14px;color:#cfcfcf;transition:color .2s var(--ease)}
.footer-email:hover{color:var(--gold-a)}
.footer-email svg{color:var(--gold-a)}
.footer-copy{font-family:var(--ff-nav);font-weight:400;font-size:12.5px;letter-spacing:.02em;color:#7c7c7c}

/* ==========================================================================
   BOTÕES FLUTUANTES — WhatsApp + voltar ao topo
   ========================================================================== */
.whatsapp-fab,.back-to-top{
  position:fixed;right:24px;z-index:150;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .3s var(--ease),visibility .3s;
}
.whatsapp-fab{
  bottom:24px;background:#25d366;color:#fff;
}
.whatsapp-fab svg{width:29px;height:29px;fill:currentColor}
.whatsapp-fab:hover{transform:scale(1.08);box-shadow:0 16px 34px -8px rgba(37,211,102,.55)}
.whatsapp-fab:focus-visible,.back-to-top:focus-visible{outline:2px solid var(--gold-lite);outline-offset:3px}

.back-to-top{
  bottom:92px;border:0;cursor:pointer;
  background:linear-gradient(92deg,#ecd035,#c0a613);color:#080808;
  opacity:0;visibility:hidden;transform:translateY(14px);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 16px 34px -8px rgba(236,208,53,.55)}
.back-to-top svg{width:22px;height:22px;fill:currentColor}

@media(max-width:620px){
  .whatsapp-fab,.back-to-top{width:50px;height:50px;right:16px}
  .whatsapp-fab{bottom:16px}
  .back-to-top{bottom:76px}
  .whatsapp-fab svg{width:25px;height:25px}
  .back-to-top svg{width:20px;height:20px}
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.js .reveal{
  opacity:0;transform:translateY(34px);filter:blur(5px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal.is-visible{opacity:1;transform:none;filter:none}

/* ==========================================================================
   MOTION REDUCTION
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none;filter:none}
  .marquee-track,.logo-marquee-track,.hero-icon,.degrade-line .degrade{animation:none!important}
  .scroll-progress{display:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .processo-grid{gap:44px}
  .processo-left{position:static;top:auto}
}

@media(max-width:900px){
  .main-nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .mobile-nav{display:block}
  .header-inner{gap:16px;padding-block:15px}
  .logo img{width:168px}

  .hero{height:auto;min-height:auto}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:22px;padding:110px 24px 72px;max-width:620px}
  .hero-copy{max-width:none}
  .hero-icons{display:none}

  .cards-row--2 .gcard--media{min-height:0;padding-bottom:158px}
  .gcard--media h3,.gcard--media p{max-width:100%}
  .gcard-smoke{-webkit-mask-image:linear-gradient(0deg,#000,transparent 70%);mask-image:linear-gradient(0deg,#000,transparent 70%)}
  .gcard-deco--notebook{width:150px;right:6%;bottom:-10%}
  .gcard-deco--statue{width:120px;right:8%;bottom:-6%}
  .gcard-deco--scales{width:180px;opacity:.1}

  .processo-grid{flex-direction:column;padding-block:64px}
  .processo-left{flex:none;padding-bottom:0}
  .pcard{position:static}
  .processo-right{flex:none;gap:18px}

  .sobre-card{flex-direction:column;padding:0}
  .sobre-text{padding:40px 28px}
  .sobre-photo{align-self:stretch}
  .sobre-photo img{width:100%;max-width:none;max-height:400px}

  .parceria-card{flex-direction:column;padding-left:0}
  .parceria-img{align-self:center}
  .parceria-img img{width:auto;max-width:74%;margin-top:22px}
  .parceria-text{padding:30px 26px 36px;text-align:center;align-items:center}

  .dep-head{justify-content:center;text-align:center}
  .dep-head-left,.dep-head-right{width:100%;justify-content:center}
  .dep-watermark{text-align:center}

  .gcard,.wcard{flex:1 1 100%}
}

@media(max-width:620px){
  html{scroll-padding-top:80px}
  .container{padding-inline:18px}

  .hero{
    background-image:url("../assets/img/003_1_1_1x.webp");
    background-position:center top;
    min-height:680px;
  }
  .hero::after{display:none}
  .header-inner{justify-content:center}
  .hero-inner{padding:34px 24px 0;align-items:center}
  .hero-copy{text-align:center}
  .hero-title{font-size:1.85rem;line-height:1.06;letter-spacing:-.01em;margin:0 0 14px}
  .hero-desc{margin-bottom:18px}
  .hero-icons{display:block}
  .hero-icon{height:clamp(44px,13vw,58px)}
  .hero-icon--word{left:8%;right:auto;top:83%}
  .hero-icon--figma{left:auto;right:8%;top:83%}
  .s-logomarca .container,.s-portfolio .container,.s-resultado .container,
  .s-landing .container,.s-sobre .container{padding-block:56px}
  .cards-row{padding:0}
  .gcard,.wcard{flex:1 1 100%}
  .wcard{min-height:0;padding:28px 26px}
  .s-degrade{padding-inline:20px}
  .degrade-line{font-size:1.65rem}
  .logo-marquee-track img{width:240px;height:152px}
  .carousel-arrow{top:34%;width:38px;height:38px}
  .carousel--arrows .carousel-viewport{width:calc(100% - 92px);margin-inline:auto}
  .carousel-arrow--prev{left:0}
  .carousel-arrow--next{right:0}
  .cta-box{padding:40px 20px}
  .site-footer .container{padding-block:70px}
  .footer-copy{text-align:center}
}