/* ═══════════════════════════════════════════
   CSS PRINCIPAL
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   RESET + VARIÁVEIS
═══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --cyan:#00f5ff;
  --magenta:#ff006e;
  --gold:#ffd700;
  --dark:#02040a;
  --dark-secondary:#0a0f1f;
  --text:#f7fbff;
  --text-secondary:#c9d1df;
  --muted:#7a8695;
  --glass:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.12);
  
  /* Glass Hierarchy */
  --glass-1: rgba(255,255,255,0.08);
  --glass-2: rgba(255,255,255,0.05);
  --glass-border-1: rgba(0,245,255,0.15);
  --glass-border-2: rgba(255,255,255,0.08);
  
  /* Glow Effects */
  --glow-subtle: 0 0 20px rgba(0,245,255,0.1);
  --glow-medium: 0 0 30px rgba(0,245,255,0.2);
}
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--dark);
  color:var(--text);
  font-family:'Barlow',sans-serif;
  overflow-x:hidden;
  position:relative;
}

body.menu-open{overflow:hidden}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

/* ═══════════════════════════════════════════
   GRAIN OVERLAY
═══════════════════════════════════════════ */
.grain{
  display:none !important;
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

@media (max-width: 480px) {
  .quem-scroll-pair {
    animation-duration: 0.3s;
  }
}

@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}

/* ═══════════════════════════════════════════
   LOADER
═══════════════════════════════════════════ */
#loader{
  position:fixed;inset:0;z-index:9000;
  background:var(--dark);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(5rem,15vw,10rem);
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:logoPulse 1.5s ease-in-out infinite alternate;
  letter-spacing:.05em;
}
@keyframes logoPulse{
  from{filter:drop-shadow(0 0 20px rgba(0,245,255,.4))}
  to{filter:drop-shadow(0 0 40px rgba(255,0,110,.4))}
}
.loader-bar-wrap{
  width:200px;height:1px;
  background:rgba(255,255,255,.1);
  margin-top:2rem;overflow:hidden;
}
.loader-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  animation:loadBar 2.2s ease forwards;
}
@keyframes loadBar{to{width:100%}}
.loader-text{
  font-family:'Space Mono',monospace;
  font-size:.55rem;letter-spacing:.3em;
  color:var(--muted);margin-top:1rem;
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════
   LETTERBOX
═══════════════════════════════════════════ */
.letterbox-top,.letterbox-bottom{
  position:fixed;left:0;right:0;
  height:60px;background:var(--dark);
  z-index:8000;transition:transform 1s ease;
}
.letterbox-top{top:0;transform:translateY(0)}
.letterbox-bottom{bottom:0;transform:translateY(0)}
.letterbox-top.open{transform:translateY(-100%)}
.letterbox-bottom.open{transform:translateY(100%)}

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:7000;padding:1.2rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .3s,backdrop-filter .3s;
}
nav.scrolled{
  background:rgba(2,4,10,.94);
  border-bottom:1px solid rgba(0,245,255,.08);
}
.nav-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.8rem;letter-spacing:.05em;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-decoration:none;
}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
  font-family:'Space Mono',monospace;
  font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  text-decoration:none;transition:color .2s;
  position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;
  height:1px;background:var(--cyan);
  transform:scaleX(0);transition:transform .3s;
}
.nav-links a:hover{color:var(--cyan)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;background:none;border:none;
}
.nav-toggle span{
  width:24px;height:1px;
  background:var(--text);transition:.3s;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
#hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:6.5rem 0 2rem;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 32%, rgba(0,234,255,.16) 0%, rgba(0,234,255,.06) 22%, transparent 52%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.04) 0%, transparent 24%),
    linear-gradient(135deg, rgba(2,4,10,.42) 0%, rgba(2,4,10,.22) 45%, rgba(2,4,10,.55) 100%),
    url('/assets/img/danielherocanva.webp') center center / 100% no-repeat,
    linear-gradient(115deg, #02040a 0%, #040914 42%, #02040a 100%);
  transform:scale(1);
}
.hero-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(2,4,10,.28) 0%, rgba(2,4,10,.48) 100%),
    linear-gradient(90deg, rgba(2,4,10,.55) 0%, rgba(2,4,10,.40) 32%, rgba(2,4,10,.18) 66%, rgba(2,4,10,.12) 100%);

}
.hero-noise{
  display:none;
}
.hero-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 44%, rgba(2,4,10,.12) 70%, rgba(2,4,10,.42) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:min(100%, 1400px);
  margin:0 auto;
  padding:0 1rem 2rem;
  display:flex;
  justify-content:flex-start;
}
.hero-panel{
  width:min(100%, 720px);
  padding:1.2rem 0 0;
}


.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.2rem;
  font-family:'Inter',sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.hero-kicker::before{
  content:'';
  width:42px;
  height:1px;
  background:linear-gradient(90deg, var(--cyan), transparent);
}


.hero-title{
  margin:0;
  max-width:12ch;
  font-family:'Inter',sans-serif;
  font-size:clamp(2.9rem, 8.5vw, 6.8rem);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--text);
  text-wrap:balance;
}
.hero-title .text-cyan{
  color:var(--cyan);
  text-shadow:0 0 30px rgba(0,245,255,.2);
}
.hero-dynamic-wrap{
  display:inline-flex;
  align-self:flex-start;
  margin-top:1.5rem;
  width:auto;
  max-width:min(100%, 580px);
  padding:1rem 0;
}
.hero-dynamic{
  margin:0;
  max-width:36ch;
  min-height:3.6em;
  font-family:'Inter',sans-serif;
  font-size:clamp(1.15rem, 2.8vw, 1.4rem);
  font-weight:600;
  line-height:1.6;
  color:var(--text);
}
.hero-dynamic .accent{
  color:var(--cyan);
  font-weight:700;
}
.hero-cursor{
  display:inline-block;
  width:.6ch;
  color:var(--cyan);
  animation:blinkCursor .9s steps(1) infinite;
}
.hero-actions{
  display:flex;
  gap:.9rem;
  margin-top:1.4rem;
  flex-wrap:wrap;
}
.btn-neon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  min-height:60px;
  padding:0 2.5rem;
  border-radius:12px;
  background:var(--cyan) !important;
  border:1px solid var(--cyan) !important;
  font-family:'Inter',sans-serif;
  font-size:1.1rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#000 !important;
  text-decoration:none;
  box-shadow: 
    0 0 10px var(--cyan),
    0 0 25px var(--cyan),
    0 0 50px rgba(0,245,255,0.4) !important;
  transition:all .4s ease;
  cursor:pointer;
  margin-top: 1.5rem;
}
.btn-neon:hover{
  transform:scale(1.05);
  box-shadow: 
    0 0 15px var(--cyan),
    0 0 40px var(--cyan),
    0 0 80px rgba(0,245,255,0.6) !important;
}


.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:54px;
  padding:0 1.35rem;
  border-radius:16px;
  font-family:'Inter',sans-serif;
  font-size:.93rem;
  font-weight:700;
  letter-spacing:.01em;
  text-transform:none;
  text-decoration:none;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary{
  color:#041018;
  border:1px solid rgba(0,245,255,.26);
  background:linear-gradient(135deg, var(--cyan) 0%, #4ef5ff 100%);
  box-shadow:0 12px 38px rgba(0,245,255,.2);
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 18px 48px rgba(0,245,255,.35);
  background:linear-gradient(135deg, #4ef5ff 0%, var(--cyan) 100%);
}
.btn-primary:active{
  transform:translateY(-1px) scale(0.98);
}
.btn-secondary{
  color:var(--cyan);
  border:1px solid rgba(0,245,255,.3);
  background:rgba(255,255,255,.02);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover{
  transform:translateY(-3px);
  background:rgba(0,245,255,.1);
  box-shadow:0 10px 30px rgba(0,245,255,.15);
  border-color:var(--cyan);
}
.btn-secondary:active{
  transform:translateY(-1px) scale(0.98);
}
.scroll-indicator{
  left:auto;
  right:1.35rem;
  bottom:1.35rem;
  transform:none;
  align-items:flex-end;
}
.scroll-indicator span{
  font-family:'Inter',sans-serif;
  font-size:.68rem;
  letter-spacing:.14em;
}
@keyframes blinkCursor{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@keyframes heroLight{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(18px,-10px,0) scale(1.08)}
  100%{transform:translate3d(-10px,16px,0) scale(1.03)}
}
@keyframes heroPulse{
  0%,100%{opacity:.45;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.72;transform:translate3d(-12px,8px,0) scale(1.06)}
}
@keyframes quemLightDrift{
  0%{transform:translate3d(-1.5%,0,0) scale(1);opacity:.78}
  50%{transform:translate3d(1.5%,-1%,0) scale(1.04);opacity:.96}
  100%{transform:translate3d(3%,1%,0) scale(1.08);opacity:.84}
}

/* ═══════════════════════════════════════════
   SEÇÃO PROBLEMA
═══════════════════════════════════════════ */
#problema{
  padding:7rem 2rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,245,255,.08) 0%, transparent 28%),
    radial-gradient(circle at 84% 26%, rgba(255,0,110,.07) 0%, transparent 30%),
    linear-gradient(180deg, #02040a 0%, #040813 100%);
  position:relative;
  overflow:hidden;
}
#problema::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%, transparent 82%, rgba(255,255,255,.02)),
    radial-gradient(ellipse at center, rgba(255,255,255,.018) 0%, transparent 68%);
  pointer-events:none;
}
.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.3rem, 6vw, 5rem);
  letter-spacing:.025em;
  line-height:.92;
  margin-bottom:3.2rem;
}
.problema-head{
  max-width:900px;
  margin:0 0 3.2rem;
}
.problema-title{
  max-width:780px;
  text-wrap:balance;
}
.problema-title .title-accent{
  background:linear-gradient(90deg, var(--cyan) 0%, #a2f8ff 45%, #ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 30px rgba(0,245,255,.2);
}
.problema-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.35rem;
  max-width:1100px;
  margin:0 auto;
}
.glass-card{
  min-height:205px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026));
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:1.65rem 1.5rem 1.45rem;
  position:relative;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 50px rgba(0,0,0,.28);
  transition:
    transform .32s ease,
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease;
}
.glass-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(0,245,255,.09), transparent 28%, transparent 68%, rgba(255,0,110,.08)),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 48%);
  opacity:.78;
  pointer-events:none;
}
.glass-card::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:23px;
  border:1px solid rgba(255,255,255,.03);
  pointer-events:none;
}
.glass-card:hover{
  transform:translateY(-8px);
  border-color:rgba(0,245,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 60px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,245,255,.04);
}
.card-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(0,245,255,.24);
  background:linear-gradient(180deg, rgba(0,245,255,.08), rgba(0,245,255,.02));
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.25rem;
}
.card-icon svg{
  width:22px;
  height:22px;
  stroke:var(--cyan);
  fill:none;
  stroke-width:1.8;
}
.card-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.38rem;
  letter-spacing:.04em;
  margin-bottom:.85rem;
  line-height:1;
}
.card-desc{
  max-width:31ch;
  font-size:.96rem;
  font-weight:300;
  color:rgba(232,234,240,.72);
  line-height:1.68;
}

/* ═══════════════════════════════════════════
   SEÇÃO QUEM SOU
═══════════════════════════════════════════ */
#quem-sou{
  position:relative;
  overflow:clip; /* clip em vez de hidden — necessário para o pin do GSAP funcionar */
  min-height:100vh;
  padding:5.5rem 1.25rem 2.5rem;

  /* =========================================================
     CONTROLE DA IMAGEM DE FUNDO - DESKTOP
     BUSCA RAPIDA: CONTROLE DA IMAGEM DE FUNDO - DESKTOP
     ========================================================= */
  --quem-bg-size-desktop: clamp(680px, 54vw, 700px);
  --quem-bg-desktop-x: 50%;
  --quem-bg-desktop-y: 100%;

  background:
    radial-gradient(circle at 50% 32%, rgba(0,234,255,.05) 0%, transparent 28%),
    radial-gradient(circle at 18% 62%, rgba(0,234,255,.04) 0%, rgba(0,234,255,.015) 24%, transparent 48%),
    radial-gradient(circle at 82% 58%, rgba(0,234,255,.03) 0%, transparent 30%),
    linear-gradient(180deg, rgba(2,4,10,.06) 0%, rgba(2,4,10,.04) 34%, rgba(2,4,10,.12) 66%, rgba(2,4,10,.22) 100%),
    url('/assets/img/soueupc.webp?v=2') var(--quem-bg-desktop-x) var(--quem-bg-desktop-y) / var(--quem-bg-size-desktop) no-repeat,
    linear-gradient(115deg, #02040a 0%, #040914 42%, #02040a 100%);
}

#quem-sou::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015) 0%, transparent 22%, transparent 78%, rgba(255,255,255,.012) 100%);
}

#quem-sou::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(74vw, 980px);
  height:18%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.10) 0%, transparent 72%);
  filter:blur(14px);
  pointer-events:none;
}

.quem-composition{
  position:relative;
  width:min(100%, 1440px);
  min-height:880px;
  margin:0 auto;
  isolation:isolate;
  z-index:1;
}

.quem-headline{
  position:absolute;
  top:2.2rem;
  left:50%;
  transform:translateX(-50%);
  width:min(100%, 680px);
  text-align:center;
  z-index:4;
}

/* =========================================================
   CORREÇÃO DA CENTRALIZAÇÃO DO TEXTO
   BUSCA RAPIDA: CORREÇÃO DA CENTRALIZAÇÃO DO TEXTO
   ========================================================= */
.quem-headline.reveal{
  transform:translateX(-50%) translateY(40px);
}

.quem-headline.reveal.visible{
  transform:translateX(-50%) translateY(0);
}

.quem-headline-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.02rem;
  margin:0;
  line-height:.86;
}

.quem-headline-line{
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:.03em;
  color:#f2f5fb;
  text-shadow:0 10px 36px rgba(0,0,0,.28);
}

.quem-headline-line--small{ font-size:clamp(2rem, 3vw, 2.9rem); }
.quem-headline-line--mid{ font-size:clamp(3rem, 4.6vw, 4.7rem); }

.quem-headline-line--highlight{
  font-size:clamp(4.2rem, 6.4vw, 6.8rem);
  background:linear-gradient(90deg, #defcff 0%, #80f9ff 28%, #00f5ff 70%, #9ef7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

.quem-headline-subtext{
  max-width:36ch;
  margin:.95rem auto 0;
  font-size:1rem;
  line-height:1.7;
  color:rgba(232,234,240,.78);
}

/* =========================================================
   CARDS DESKTOP - POSIÇÃO GERAL
   BUSCA RÁPIDA: CARDS DESKTOP POSICAO GERAL
   ========================================================= */
.quem-side{
  position:absolute;
  top:75%;
  transform:translateY(-50%);
  z-index:3;
}

.quem-side--left{ left:1.25rem; }
.quem-side--right{ right:1.25rem; }

.quem-side-content{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}

.quem-side--right .quem-side-content{
  align-items:flex-end;
}

/* =========================================================
   POSIÇÃO FINAL DOS CARDS - DESKTOP
   BUSCA RÁPIDA: POSICAO FINAL CARDS QUEM SOU
   step 1 = mais aberto para fora
   step 2 = mantém posição atual
   step 3 = mais centralizado
   ========================================================= */
.quem-floating-card--left-top{ margin-left:-1.65rem; }
.quem-floating-card--right-top{ margin-right:-1.65rem; }

.quem-floating-card--left-middle{ margin-left:0; }
.quem-floating-card--right-middle{ margin-right:0; }

.quem-floating-card--left-bottom{ margin-left:1.25rem; }
.quem-floating-card--right-bottom{ margin-right:1.25rem; }

/* =========================================================
   CARD BASE - TAMANHO
   BUSCA RÁPIDA: CARD BASE TAMANHO QUEM SOU
   ========================================================= */
.quem-floating-card{
  width:min(220px, 16vw);
  min-width:180px;
  padding:.85rem .95rem;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(8,14,24,.78), rgba(8,14,24,.52));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 22px 64px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.quem-floating-value{
  display:block;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.6rem;
  line-height:.95;
  letter-spacing:.04em;
  color:var(--cyan);
}

.quem-floating-label{
  display:block;
  margin-top:.2rem;
  font-family:'Space Mono',monospace;
  font-size:.5rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(232,234,240,.68);
}

/* =========================================================
   ANIMAÇÃO SCROLL DOS CARDS - DESKTOP
   BUSCA RÁPIDA: ANIMACAO SCROLL CARDS QUEM SOU
   Cada par (esquerda + direita) entra junto conforme o scroll.
   ========================================================= */
/* =========================================================
   QUEM SOU - SCROLL PAIRS — ESTADO INICIAL
   O GSAP controla opacity e transform via JS.
   CSS apenas define o estado inicial invisível.
   BUSCA RÁPIDA: QUEM SCROLL PAIRS CSS
   ========================================================= */
.quem-scroll-pair{
  opacity:0;
  will-change:transform, opacity;
  pointer-events:none;
}

.quem-scroll-pair[data-step="1"].quem-scroll-pair--left{
  transform:translate3d(78px,250px,0);
}

.quem-scroll-pair[data-step="2"].quem-scroll-pair--left{
  transform:translate3d(38px,215px,0);
}

.quem-scroll-pair[data-step="3"].quem-scroll-pair--left{
  transform:translate3d(12px,180px,0);
}

.quem-scroll-pair[data-step="1"].quem-scroll-pair--right{
  transform:translate3d(-78px,250px,0);
}

.quem-scroll-pair[data-step="2"].quem-scroll-pair--right{
  transform:translate3d(-38px,215px,0);
}

.quem-scroll-pair[data-step="3"].quem-scroll-pair--right{
  transform:translate3d(-12px,180px,0);
}

.quem-scroll-pair.is-visible{
  pointer-events:auto;
}

/* Floating animation só quando visível — GSAP adiciona is-visible */
.quem-scroll-pair.is-visible .quem-floating-card{
  animation:quemCardFloat 7s ease-in-out infinite;
}

.quem-scroll-pair[data-step="1"].is-visible .quem-floating-card{ animation-delay:0s; }
.quem-scroll-pair[data-step="2"].is-visible .quem-floating-card{ animation-delay:.3s; }
.quem-scroll-pair[data-step="3"].is-visible .quem-floating-card{ animation-delay:.6s; }

@keyframes quemCardFloat{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-6px,0); }
}

/* =========================================================
   MARQUEE MOBILE - BASE
   BUSCA RÁPIDA: MARQUEE MOBILE QUEM SOU
   ========================================================= */
.quem-mobile-marquee{
  display:none;
}

.quem-mobile-track{
  display:flex;
  align-items:stretch;
  gap:.85rem;
  width:max-content;
  will-change:transform;
}

.quem-mobile-marquee .quem-floating-card{
  width:190px;
  min-width:190px;
  padding:.85rem .95rem;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(8,14,24,.78), rgba(8,14,24,.52));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 12px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.quem-mobile-marquee .quem-floating-value{
  font-size:1.45rem;
}

.quem-mobile-marquee .quem-floating-label{
  font-size:.5rem;
  letter-spacing:.14em;
}

@keyframes quemMarqueeLoop{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(-50% - .425rem),0,0); }
}

@media(max-width:1280px){
  #quem-sou{
    --quem-bg-size-desktop: clamp(620px, 52vw, 820px);
    --quem-bg-desktop-x: 50%;
    --quem-bg-desktop-y: 100%;
    background:
      radial-gradient(circle at 50% 32%, rgba(0,234,255,.05) 0%, transparent 28%),
      radial-gradient(circle at 18% 62%, rgba(0,234,255,.04) 0%, rgba(0,234,255,.015) 24%, transparent 48%),
      radial-gradient(circle at 82% 58%, rgba(0,234,255,.03) 0%, transparent 30%),
      linear-gradient(180deg, rgba(2,4,10,.07) 0%, rgba(2,4,10,.05) 34%, rgba(2,4,10,.14) 66%, rgba(2,4,10,.24) 100%),
      url('/assets/img/soueupc.webp?v=2') var(--quem-bg-desktop-x) var(--quem-bg-desktop-y) / var(--quem-bg-size-desktop) no-repeat,
      linear-gradient(115deg, #02040a 0%, #040914 42%, #02040a 100%);
  }

  .quem-composition{ min-height:780px; }

  .quem-headline{
    width:min(100%, 720px);
    top:2rem;
  }

  .quem-side--left{ left:.25rem; }
  .quem-side--right{ right:.25rem; }

  .quem-floating-card{
    width:min(210px, 17vw);
    min-width:170px;
  }
}

@media (max-width: 980px){

  /* ============================================
     MOBILE LIMPO - CONTROLE TOTAL DA IMAGEM
     BUSCA: MOBILE LIMPO QUEM SOU
     ============================================ */
  #quem-sou{
    min-height: 100vh;
    padding: 3rem 1rem 2rem;
    background-image: url('/assets/img/soueupc.webp?v=2');
    background-repeat: no-repeat;
    background-size: 84% auto;
    background-position: center bottom;
    background-color: #02040a;
  }

  .quem-composition{
    min-height:100svh;
  }

  .quem-headline{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    max-width: 350px;
    margin-top: 40px;
    z-index:5;
  }

  .quem-side{
    display: none;
  }

  .quem-mobile-marquee{
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:1rem;
    z-index:5;
    overflow:hidden;
    padding:0 1rem;
    mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent 100%);
  }

  .quem-mobile-track{
    animation:quemMarqueeLoop 20s linear infinite;
  }
}

@media(max-width:450px){
  #quem-sou{
    min-height:100svh;
    padding:3.6rem .9rem 2.6rem;
    --quem-bg-size-mobile: clamp(560px, 120vw, 720px);
    --quem-bg-mobile-x: 50%;
    --quem-bg-mobile-y: 100%;
    background:
      radial-gradient(circle at 50% 34%, rgba(0,234,255,.06) 0%, rgba(0,234,255,.025) 24%, transparent 48%),
      linear-gradient(180deg, rgba(2,4,10,.06) 0%, rgba(2,4,10,.05) 28%, rgba(2,4,10,.12) 70%, rgba(2,4,10,.20) 100%),
      url('/assets/img/soueupc.webp?v=2') var(--quem-bg-mobile-x) var(--quem-bg-mobile-y) / var(--quem-bg-size-mobile) no-repeat,
      linear-gradient(180deg, rgba(2,4,10,.68) 0%, rgba(2,4,10,.58) 52%, rgba(2,4,10,.72) 100%);
  }

  .quem-headline{
    width:min(100%, 330px);
  }

  .quem-mobile-marquee{
    bottom:.85rem;
    padding:0 .8rem;
  }

  .quem-mobile-marquee .quem-floating-card{
    width:168px;
    min-width:168px;
    padding:.78rem .88rem;
  }

  .quem-mobile-marquee .quem-floating-value{
    font-size:1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quem-scroll-pair,
  .quem-scroll-pair--left,
  .quem-scroll-pair--right{
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    transition:none !important;
  }

  .quem-scroll-pair .quem-floating-card,
  .quem-mobile-track{
    animation:none !important;
    transform:none !important;
  }
}

/* ═══════════════════════════════════════════
   SEÇÃO SERVIÇOS
═══════════════════════════════════════════ */
#servicos{
  padding:7rem 2rem;
  background:var(--dark);
  position:relative;overflow:hidden;
}
#servicos::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(0,245,255,.04) 0%,transparent 70%);
}
.servicos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.5rem;
  max-width:1100px;margin:3.5rem auto 0;
}
.servico-card{
  position:relative;overflow:hidden;
  background:var(--glass-1);
  border:1px solid var(--glass-border-2);
  backdrop-filter:blur(8px);
  padding:2.8rem 2.2rem;
  transition:all .35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor:default;
}
.servico-card:hover{
  border-color:var(--cyan);
  transform:translateY(-8px);
  box-shadow:var(--glow-medium);
}
.servico-card.destaque{
  border-color:rgba(255,0,110,.25);
  background:linear-gradient(180deg, rgba(255,0,110,0.04), transparent);
}
.servico-card.destaque:hover{
  border-color:var(--magenta);
  box-shadow:0 0 30px rgba(255,0,110,0.2);
}
.servico-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:4.5rem;color:rgba(255,255,255,.04);
  line-height:1;margin-bottom:1rem;
  position:absolute;top:1rem;right:1.5rem;
}
.servico-icon{
  width:54px;height:54px;
  border:1px solid rgba(0,245,255,.3);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.8rem;position:relative;z-index:1;
  transition:transform .3s;
}
.servico-card:hover .servico-icon{transform:scale(1.05)}
.servico-icon svg{width:24px;height:24px;stroke:var(--cyan);fill:none;stroke-width:1.5}
.servico-card.destaque .servico-icon{border-color:rgba(255,0,110,.3)}
.servico-card.destaque .servico-icon svg{stroke:var(--magenta)}
.servico-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.75rem;letter-spacing:.03em;
  margin-bottom:1rem;position:relative;z-index:1;
  color:var(--text);
}
.servico-desc{
  font-size:.95rem;font-weight:400;
  color:var(--text-secondary);line-height:1.7;
  margin-bottom:1.5rem;position:relative;z-index:1;
}
.servico-tag{
  font-family:'Space Mono',monospace;
  font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);position:relative;z-index:1;
  font-weight:700;
}
.servico-card.destaque .servico-tag{color:var(--magenta)}

/* ═══════════════════════════════════════════
   PORTFÓLIO
═══════════════════════════════════════════ */
#portfolio{
  padding:6rem 2rem;
  background:var(--dark2);
  position:relative;overflow:hidden;
}
#portfolio::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(0,245,255,.04) 0%,transparent 60%);
}
.portfolio-sub{
  margin:-1.3rem 0 2.1rem;
  text-align:center;
  font-family:'Space Mono',monospace;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(232,234,240,.72);
}
.portfolio-sub span{
  color:var(--cyan);
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  max-width:1100px;margin:3.5rem auto 0;
}
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.portfolio-slot{
  position:relative;aspect-ratio:16/9;
  background:rgba(8,12,22,.8);
  border:1px solid var(--glass-border-2);
  border-radius:24px;
  overflow:hidden;cursor:pointer;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
@media (max-width: 600px) {
  .portfolio-slot {
    aspect-ratio: 4/3;
  }
}
.portfolio-slot:hover{
  border-color:var(--cyan);
  box-shadow:var(--glow-medium);
  transform:translateY(-5px);
}
.portfolio-slot-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:1rem;
}
.portfolio-play{
  width:56px;height:56px;
  border:1px solid rgba(0,245,255,.3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s;
}
.portfolio-slot:hover .portfolio-play{
  background:rgba(0,245,255,.1);
  border-color:var(--cyan);
}
.portfolio-play svg{width:18px;height:18px;fill:var(--cyan);margin-left:3px}
.portfolio-cat{
  font-family:'Space Mono',monospace;
  font-size:.58rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);
}
.portfolio-slot:hover .portfolio-cat{color:var(--cyan)}
.portfolio-coming{
  font-family:'Space Mono',monospace;
  font-size:.52rem;letter-spacing:.22em;
  color:var(--muted);text-transform:uppercase;
}
.portfolio-note{
  text-align:center;margin-top:2rem;
  font-family:'Space Mono',monospace;
  font-size:.6rem;letter-spacing:.15em;
  color:var(--muted);
}
.portfolio-note span{color:var(--cyan)}


/* PORTFÓLIO — PREVIEW ROTATIVO */
.portfolio-slot{
  isolation:isolate;
}
.portfolio-slot-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.portfolio-slot-thumb,
.portfolio-slot-preview,
.portfolio-slot-overlay{
  position:absolute;
  inset:0;
}
.portfolio-slot-thumb{
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  filter:saturate(.9) brightness(.42) contrast(1.05);
  opacity:.8;
  transition:transform 1.2s ease, filter .45s ease, opacity .45s ease;
}
.portfolio-slot-preview{
  opacity:0;
  transition:opacity .45s ease;
}
.portfolio-slot-preview iframe{
  width:100%;
  height:100%;
  border:0;
  pointer-events:none;
  transform:scale(1.08);
}
.portfolio-slot-overlay{
  background:
    linear-gradient(180deg, rgba(2,4,10,.16) 0%, rgba(2,4,10,.48) 54%, rgba(2,4,10,.72) 100%),
    linear-gradient(120deg, rgba(0,245,255,.10), transparent 34%, transparent 68%, rgba(123,47,255,.12));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.portfolio-slot-content,
.portfolio-slot-badge,
.portfolio-slot-glow,
.portfolio-slot-hint{
  position:relative;
  z-index:2;
}
.portfolio-slot-hint{
  position:absolute;
  left:1.1rem;
  right:1.1rem;
  bottom:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(8,14,26,.42);
  font-family:'Space Mono',monospace;
  font-size:.54rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(232,234,240,.74);
  opacity:1;
  transform:translateY(0);
  transition:opacity .32s ease, transform .32s ease, border-color .32s ease, color .32s ease, background .32s ease;
}
.portfolio-slot:hover .portfolio-slot-hint,
.portfolio-slot.is-active .portfolio-slot-hint{
  opacity:1;
  transform:translateY(0);
  color:rgba(232,234,240,.9);
  border-color:rgba(0,245,255,.18);
  background:rgba(8,14,26,.54);
}
.portfolio-slot.has-preview.is-active .portfolio-slot-thumb{
  transform:scale(1.12);
  filter:saturate(1) brightness(.56) contrast(1.06);
  opacity:.94;
}
.portfolio-slot.has-preview.is-active .portfolio-slot-preview{
  opacity:.82;
}
.portfolio-slot.has-preview.is-active .portfolio-slot-overlay{
  background:
    linear-gradient(180deg, rgba(2,4,10,.10) 0%, rgba(2,4,10,.34) 54%, rgba(2,4,10,.56) 100%),
    linear-gradient(120deg, rgba(0,245,255,.08), transparent 34%, transparent 68%, rgba(123,47,255,.10));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.portfolio-slot.has-preview:hover .portfolio-slot-thumb{
  filter:saturate(1) brightness(.62) contrast(1.08);
}
.portfolio-slot.has-preview:hover .portfolio-slot-overlay{
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.portfolio-slot-title{
  text-shadow:0 8px 28px rgba(0,0,0,.42);
}
@media (max-width: 600px){
  .portfolio-slot-thumb{
    filter:saturate(.92) brightness(.48) contrast(1.04);
  }
  .portfolio-slot.has-preview.is-active .portfolio-slot-thumb{
    filter:saturate(1) brightness(.60) contrast(1.06);
  }
  .portfolio-slot-hint{
    opacity:1;
    transform:none;
    font-size:.5rem;
    color:rgba(232,234,240,.62);
    background:rgba(8,14,26,.42);
  }
}

/* ═══════════════════════════════════════════
   PROCESSO
═══════════════════════════════════════════ */
#processo{
  padding:6rem 2rem;
  background:var(--dark2);
  position:relative;
}
.processo-wrap{max-width:1100px;margin:0 auto}
.processo-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;margin-top:4rem;position:relative;
}
.processo-steps::before{
  content:'';position:absolute;
  top:28px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,
    transparent,var(--cyan),var(--magenta),var(--cyan),transparent
  );
  opacity: 0.3;
}
.fade-text{
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: inline-block;
}
.fade-text.hidden{
  opacity: 0;
  transform: translateY(10px);
}
.fade-text.is-accent{
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(0,245,255,0.3);
}
.step{
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
  padding:0 .5rem;position:relative;
}
.step-dot{
  width:56px;height:56px;
  border:1px solid rgba(0,245,255,.3);
  background:var(--dark2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;position:relative;z-index:1;
  transition:border-color .3s,background .3s;
}
.step:hover .step-dot{
  border-color:var(--cyan);
  background:rgba(0,245,255,.05);
}
.step-dot svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:1.5}
.step-num{
  position:absolute;top:-8px;right:-8px;
  width:20px;height:20px;
  background:var(--magenta);
  font-family:'Space Mono',monospace;
  font-size:.5rem;font-weight:700;
  color:#000;display:flex;align-items:center;justify-content:center;
}
.step-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.15rem;letter-spacing:.08em;
  margin-bottom:.5rem;
  color:var(--text);
}
.step-desc{
  font-size:.78rem;font-weight:400;
  color:var(--text-secondary);line-height:1.6;
}

/* ═══════════════════════════════════════════
   DEPOIMENTOS — Holographic
═══════════════════════════════════════════ */
#depoimentos{
  padding:6rem 2rem;
  background:var(--dark);
  position:relative;overflow:hidden;
}
#depoimentos::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,215,0,.03) 0%,transparent 70%);
}
.depo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
  max-width:1100px;margin:3rem auto 0;
}
/* Holographic card */
.holo-card{
  padding:2.5rem 2rem;
  border-radius:24px;
  background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(16px);
  box-shadow:0 0 50px rgba(0,245,255,.05),inset 0 0 30px rgba(255,255,255,.05);
  transform-style:preserve-3d;
  animation:holoFloat 6s ease-in-out infinite;
  position:relative;border:1px solid rgba(255,255,255,.1);
}
.holo-card:nth-child(2){animation-delay:-2s}
.holo-card:nth-child(3){animation-delay:-4s}
.holo-card::before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(120deg,transparent 20%,var(--gold),var(--magenta),var(--cyan),transparent 80%);
  filter:blur(20px);opacity:.15;z-index:-1;
  animation:holoShift 4s linear infinite;
  background-size:400% 100%;
}
@keyframes holoShift{to{background-position:400% 0}}
@keyframes holoFloat{
  0%,100%{transform:rotateX(4deg) rotateY(-4deg) translateY(0)}
  50%{transform:rotateX(6deg) rotateY(4deg) translateY(-12px)}
}
.depo-top{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem}
.depo-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--magenta));
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:1rem;color:#000;
  flex-shrink:0;
}
.depo-avatar img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}
.depo-name{
  font-family:'Space Mono',monospace;
  font-size:.7rem;font-weight:700;
  letter-spacing:.1em;
}
.depo-role{
  font-size:.75rem;font-weight:300;
  color:var(--muted);margin-top:.1rem;
}
.depo-stars{
  color:var(--gold);font-size:.8rem;
  letter-spacing:2px;margin-bottom:.8rem;
}
.depo-text{
  font-size:.9rem;font-weight:300;
  color:rgba(232,234,240,.8);line-height:1.7;
  font-style:italic;
}
.depo-waiting{
  text-align:center;padding:3rem;
  font-family:'Space Mono',monospace;
  font-size:.6rem;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;
  border:1px dashed rgba(255,215,0,.15);
}



/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */
#faq{
  padding:6rem 2rem;
  background:var(--dark2);
}
.faq-wrap{max-width:700px;margin:3rem auto 0}
.faq-item{
  border-bottom:1px solid var(--glass-border);
  overflow:hidden;
}
.faq-q{
  width:100%;background:none;border:none;
  padding:1.4rem 0;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;text-align:left;
  font-family:'Barlow',sans-serif;font-size:1rem;font-weight:600;
  color:var(--text);transition:color .2s;
  gap:1rem;
}
.faq-q:hover{color:var(--cyan)}
.faq-icon{
  width:20px;height:20px;flex-shrink:0;
  border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:var(--muted);
  transition:transform .3s,border-color .2s,color .2s;
}
.faq-item.open .faq-icon{
  transform:rotate(45deg);
  border-color:var(--cyan);color:var(--cyan);
}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease,padding .3s;
  font-size:.9rem;font-weight:300;
  color:rgba(232,234,240,.7);line-height:1.8;
}
.faq-item.open .faq-a{
  max-height:300px;padding-bottom:1.4rem;
}


/* ═══════════════════════════════════════════
   CTA FINAL
═══════════════════════════════════════════ */
#contato{
  position:relative;
  padding:6.5rem 2rem 3.5rem;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 28%, rgba(0,245,255,.08) 0%, transparent 34%),
    radial-gradient(circle at 78% 34%, rgba(0,245,255,.04) 0%, transparent 30%),
    linear-gradient(180deg, #040813 0%, #02040a 100%);
}
#contato::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 18%, transparent 82%, rgba(255,255,255,.015) 100%),
    radial-gradient(circle at 50% 18%, rgba(0,245,255,.05) 0%, transparent 42%);
  pointer-events:none;
}
.contato-bg{display:none;}
.contato-content{
  position:relative;
  z-index:1;
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.contato-pre{
  display:inline-block;
  margin-bottom:1rem;
  font-family:'Space Mono',monospace;
  font-size:.58rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(0,245,255,.78);
}
.contato-title{
  margin:0 auto 1rem;
  max-width:11ch;
  font-family:'Inter',sans-serif;
  font-size:clamp(2.15rem, 4.6vw, 4rem);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.04em;
  color:#f7fbff;
  text-wrap:balance;
}
.contato-title span{
  background:linear-gradient(90deg, #00f5ff 0%, #8fdcff 58%, #ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 26px rgba(0,245,255,.12);
}
.contato-sub{
  max-width:42ch;
  margin:0 auto 1.6rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.75;
  color:rgba(232,234,240,.78);
}
.contato-escassez{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .9rem;
  margin-bottom:1.8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  font-family:'Space Mono',monospace;
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(232,234,240,.62);
}
.contato-btns{
  display:flex;
  gap:.9rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:2.1rem;
}
.contato-btns .btn-primary,
.contato-btns .btn-secondary{
  min-width:190px;
  min-height:56px;
  border-radius:16px;
}
.contato-links{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
  max-width:820px;
  margin:0 auto;
  padding-top:1.35rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.contato-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:46px;
  padding:.8rem 1rem;
  border-radius:16px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  font-family:'Inter',sans-serif;
  font-size:.87rem;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(232,234,240,.74);
  text-decoration:none;
  transition:border-color .28s ease, background .28s ease, transform .28s ease, color .28s ease;
}
.contato-link:hover{
  color:#f7fbff;
  background:rgba(255,255,255,.045);
  border-color:rgba(0,245,255,.18);
  transform:translateY(-2px);
}
.contato-link svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  flex-shrink:0;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer{
  position:relative;
  padding:1.35rem 2rem 1.8rem;
  background:#02040a;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-shell{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr .8fr .9fr;
  gap:2rem;
  align-items:start;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.footer-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:2rem;
  letter-spacing:.05em;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.footer-tag{
  max-width:28ch;
  font-size:.92rem;
  line-height:1.65;
  color:rgba(232,234,240,.58);
}
.footer-col{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.footer-title{
  font-family:'Space Mono',monospace;
  font-size:.56rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(0,245,255,.72);
  margin-bottom:.2rem;
}
.footer-link{
  color:rgba(232,234,240,.72);
  text-decoration:none;
  font-size:.92rem;
  line-height:1.6;
  transition:color .22s ease, transform .22s ease;
}
.footer-link:hover{
  color:#fff;
  transform:translateX(2px);
}
.footer-bottom{
  max-width:1100px;
  margin:1.5rem auto 0;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.05);
  font-family:'Space Mono',monospace;
  font-size:.56rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(232,234,240,.38);
}

@media(max-width:980px){
  #contato{
    padding:5.25rem 1.25rem 3rem;
  }
  .contato-title{
    max-width:12ch;
    font-size:clamp(1.95rem, 8vw, 3.2rem);
  }
  .contato-links{
    grid-template-columns:1fr;
  }
  .footer-shell{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
}

@media(max-width:640px){
  #contato{
    padding:4.5rem 1rem 2.5rem;
  }
  .contato-pre{
    font-size:.52rem;
    letter-spacing:.22em;
  }
  .contato-title{
    max-width:12ch;
    font-size:clamp(1.8rem, 10vw, 2.6rem);
    line-height:1.02;
  }
  .contato-sub{
    font-size:.95rem;
    line-height:1.65;
  }
  .contato-escassez{
    width:100%;
    max-width:340px;
    padding:.7rem .9rem;
    font-size:.52rem;
    line-height:1.5;
  }
  .contato-btns{
    gap:.75rem;
  }
  .contato-btns .btn-primary,
  .contato-btns .btn-secondary{
    width:100%;
    min-width:0;
  }
  .contato-link{
    justify-content:flex-start;
    text-align:left;
    font-size:.84rem;
  }
  .footer-shell > .footer-col:nth-of-type(2){
    display:none;
  }
  footer{
    padding:1.2rem 1rem 1.6rem;
  }
  .footer-bottom{
    font-size:.52rem;
    letter-spacing:.12em;
  }
}


/* ═══════════════════════════════════════════
   BACKGROUND GRADIENTE RESPONSIVO POR SEÇÃO
═══════════════════════════════════════════ */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;
  z-index:-1;transition:background 1.2s ease;
}
body[data-section="hero"]::after{background:radial-gradient(ellipse at 70% 30%,rgba(0,245,255,.04) 0%,transparent 60%)}
body[data-section="problema"]::after{background:radial-gradient(ellipse at 50% 50%,rgba(255,0,110,.04) 0%,transparent 60%)}
body[data-section="quem-sou"]::after{background:radial-gradient(ellipse at 30% 50%,rgba(0,245,255,.04) 0%,transparent 60%)}
body[data-section="servicos"]::after{background:radial-gradient(ellipse at 70% 50%,rgba(123,47,255,.04) 0%,transparent 60%)}
body[data-section="portfolio"]::after{background:radial-gradient(ellipse at 50% 30%,rgba(0,245,255,.03) 0%,transparent 60%)}
body[data-section="depoimentos"]::after{background:radial-gradient(ellipse at 50% 50%,rgba(255,215,0,.03) 0%,transparent 60%)}
body[data-section="contato"]::after{background:radial-gradient(ellipse at 50% 50%,rgba(0,245,255,.04) 0%,transparent 60%)}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(52px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}


/* ═══════════════════════════════════════════
   ULTRA PREMIUM DESIGN SYSTEM
═══════════════════════════════════════════ */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:none;
  pointer-events:none;
  z-index:-2;
}
body::after{
  z-index:-1;
}

.light-orb,
.light-orb--hero,
.light-orb--secondary{
  display:none !important;
}

.premium-card,
.glass-card,
.servico-card,
.portfolio-slot,
.holo-card,
.quem-prova,
.proof-item,
.hero-dynamic-wrap{
  position:relative;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 22px 64px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s cubic-bezier(.22,1,.36,1),
    border-color .35s cubic-bezier(.22,1,.36,1),
    background .35s cubic-bezier(.22,1,.36,1);
}

.premium-card::before,
.glass-card::before,
.servico-card::before,
.portfolio-slot::before,
.quem-prova::before,
.proof-item::before,
.hero-dynamic-wrap::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(
    120deg,
    transparent 12%,
    rgba(0,234,255,.16) 38%,
    rgba(255,0,110,.07) 62%,
    transparent 88%
  );
  opacity:.18;
  z-index:-1;
  pointer-events:none;
}

.premium-card:hover,
.glass-card:hover,
.servico-card:hover,
.portfolio-slot:hover,
.holo-card:hover,
.quem-prova:hover,
.proof-item:hover,
.hero-dynamic-wrap:hover{
  transform:translateY(-4px);
  border-color:rgba(0,234,255,.14);
  box-shadow:
    0 14px 32px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
}

section{
  position:relative;
}
/* overlay removed */

.container,
.processo-wrap,
.hero-content,
.quem-wrap{
  position:relative;
  z-index:1;
}

.btn-primary,
.btn-secondary,
.btn-premium{
  min-height:56px;
  border-radius:16px;
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    box-shadow .3s cubic-bezier(.22,1,.36,1),
    border-color .3s cubic-bezier(.22,1,.36,1),
    background .3s cubic-bezier(.22,1,.36,1),
    color .3s cubic-bezier(.22,1,.36,1);
}

.btn-primary,
.btn-premium{
  background:linear-gradient(135deg,#00eaff 0%,#4ef5ff 100%);
  border:1px solid rgba(0,234,255,.26);
  box-shadow:
    0 0 25px rgba(0,234,255,.25),
    0 16px 40px rgba(0,0,0,.32);
}

.btn-primary:hover,
.btn-premium:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 0 42px rgba(0,234,255,.40),
    0 16px 40px rgba(0,0,0,.45);
}

.btn-secondary{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(0,234,255,.34);
  color:#dbf9ff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 10px 28px rgba(0,0,0,.22);
}

.btn-secondary:hover{
  transform:translateY(-2px);
  background:rgba(0,234,255,.10);
  box-shadow:
    0 0 30px rgba(0,234,255,.16),
    0 14px 34px rgba(0,0,0,.34);
}

.card-icon,
.servico-icon,
.portfolio-play,
.step-dot,
.faq-icon{
  border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.24);
}

.section-title,
.hero-title,
.quem-title-line,
.contato-title{
  text-shadow:0 4px 24px rgba(0,0,0,.18);
}

.problema-grid,
.servicos-grid,
.portfolio-grid,
.depo-grid{
  gap:1.6rem;
}

#problema,
#servicos,
#portfolio,
#processo,
#depoimentos,
#faq,
#contato{
  overflow:hidden;
}

@media(max-width:768px){
  .light-orb{
    display:none;
  }
  .premium-card,
  .glass-card,
  .servico-card,
  .portfolio-slot,
  .holo-card,
  .quem-prova,
  .proof-item,
  .hero-dynamic-wrap{
    border-radius:20px;
  }
}


/* ═══════════════════════════════════════════
   SECTION OVERLAY CINEMATOGRÁFICO
═══════════════════════════════════════════ */
.section-overlap{
  position:relative;
  margin-top:-88px;
  z-index:4;
  border-radius:34px 34px 0 0;
  box-shadow:
    0 -24px 60px rgba(0,0,0,.42),
    0 -1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(255,255,255,.03);
}
.section-overlap::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035) 0%, transparent 18%),
    radial-gradient(circle at 50% 0%, rgba(0,234,255,.08) 0%, transparent 42%);
  opacity:.9;
}
#problema.section-overlap,
#servicos.section-overlap,
#contato.section-overlap{
  overflow:visible;
}
#problema.section-overlap{ z-index:5; }
#servicos.section-overlap{ z-index:4; }
#contato.section-overlap{ z-index:4; }

@media(max-width:1024px){
  .section-overlap{
    margin-top:-64px;
    border-radius:28px 28px 0 0;
  }
}
@media(max-width:768px){
  .section-overlap{
    margin-top:-36px;
    border-radius:24px 24px 0 0;
    box-shadow:
      0 -14px 34px rgba(0,0,0,.34),
      0 -1px 0 rgba(255,255,255,.03);
  }
}


/* ═══════════════════════════════════════════
   VIEWPORT ACTIVATION TEST
═══════════════════════════════════════════ */
/* Resquícios antigos do mobile da seção Quem Sou removidos.
   As classes abaixo pertenciam a estruturas anteriores:
   .quem-visual, .quem-content, .quem-picture, .quem-kicker,
   .quem-title, .quem-subtext, .mobile-curve-card
*/


/* ═══════════════════════════════════════════
   SECTION ACTIVATION — PÁGINA INTEIRA
═══════════════════════════════════════════ */
#hero .hero-kicker,
#hero .hero-title,
#hero .hero-dynamic-wrap,
#hero .hero-actions,
#hero .hero-proof,
#problema .problema-head,
#problema .glass-card,
#servicos .section-tag,
#servicos .section-title,
#servicos .servico-card,
#portfolio .section-tag,
#portfolio .section-title,
#portfolio .portfolio-slot,
#portfolio .portfolio-note,
#processo .section-tag,
#processo .section-title,
#processo .step,
#depoimentos .section-tag,
#depoimentos .section-title,
#depoimentos .holo-card,
#depoimentos .depo-waiting,
#faq .section-tag,
#faq .section-title,
#faq .faq-item,
#contato .contato-pre,
#contato .contato-title,
#contato .contato-sub,
#contato .contato-escassez,
#contato .contato-btns,
#contato .contato-links{
  opacity:0;
  will-change:transform, opacity;
}

#hero .hero-kicker,
#hero .hero-title,
#hero .hero-dynamic-wrap,
#hero .hero-actions,
#hero .hero-proof,
#problema .problema-head,
#servicos .section-tag,
#servicos .section-title,
#portfolio .section-tag,
#portfolio .section-title,
#portfolio .portfolio-note,
#processo .section-tag,
#processo .section-title,
#depoimentos .section-tag,
#depoimentos .section-title,
#faq .section-tag,
#faq .section-title,
#contato .contato-pre,
#contato .contato-title,
#contato .contato-sub,
#contato .contato-escassez,
#contato .contato-btns,
#contato .contato-links{
  transform:translateY(26px);
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1);
}

#problema .glass-card,
#servicos .servico-card,
#portfolio .portfolio-slot,
#depoimentos .holo-card,
#depoimentos .depo-waiting,
#faq .faq-item{
  transform:translateY(28px);
  transition:
    opacity .52s cubic-bezier(.22,1,.36,1),
    transform .52s cubic-bezier(.22,1,.36,1);
}

#processo .step{
  transform:translateY(24px);
  transition:
    opacity .5s cubic-bezier(.22,1,.36,1),
    transform .5s cubic-bezier(.22,1,.36,1);
}

#hero.is-active .hero-kicker,
#hero.is-active .hero-title,
#hero.is-active .hero-dynamic-wrap,
#hero.is-active .hero-actions,
#hero.is-active .hero-proof,
#problema.is-active .problema-head,
#problema.is-active .glass-card,
#servicos.is-active .section-tag,
#servicos.is-active .section-title,
#servicos.is-active .servico-card,
#portfolio.is-active .section-tag,
#portfolio.is-active .section-title,
#portfolio.is-active .portfolio-slot,
#portfolio.is-active .portfolio-note,
#processo.is-active .section-tag,
#processo.is-active .section-title,
#processo.is-active .step,
#depoimentos.is-active .section-tag,
#depoimentos.is-active .section-title,
#depoimentos.is-active .holo-card,
#depoimentos.is-active .depo-waiting,
#faq.is-active .section-tag,
#faq.is-active .section-title,
#faq.is-active .faq-item,
#contato.is-active .contato-pre,
#contato.is-active .contato-title,
#contato.is-active .contato-sub,
#contato.is-active .contato-escassez,
#contato.is-active .contato-btns,
#contato.is-active .contato-links{
  opacity:1;
  transform:none;
}

#hero.is-active .hero-kicker{transition-delay:.04s}
#hero.is-active .hero-title{transition-delay:.12s}
#hero.is-active .hero-dynamic-wrap{transition-delay:.22s}
#hero.is-active .hero-actions{transition-delay:.32s}
#hero.is-active .hero-proof{transition-delay:.42s}

#problema.is-active .problema-head{transition-delay:.05s}
#problema.is-active .glass-card:nth-child(1){transition-delay:.14s}
#problema.is-active .glass-card:nth-child(2){transition-delay:.24s}
#problema.is-active .glass-card:nth-child(3){transition-delay:.34s}

#servicos.is-active .section-tag{transition-delay:.04s}
#servicos.is-active .section-title{transition-delay:.12s}
#servicos.is-active .servico-card:nth-child(1){transition-delay:.22s}
#servicos.is-active .servico-card:nth-child(2){transition-delay:.32s}
#servicos.is-active .servico-card:nth-child(3){transition-delay:.42s}

#portfolio.is-active .section-tag{transition-delay:.04s}
#portfolio.is-active .section-title{transition-delay:.12s}
#portfolio.is-active .portfolio-slot:nth-child(1){transition-delay:.22s}
#portfolio.is-active .portfolio-slot:nth-child(2){transition-delay:.30s}
#portfolio.is-active .portfolio-slot:nth-child(3){transition-delay:.38s}
#portfolio.is-active .portfolio-slot:nth-child(4){transition-delay:.46s}
#portfolio.is-active .portfolio-note{transition-delay:.54s}

#processo.is-active .section-tag{transition-delay:.04s}
#processo.is-active .section-title{transition-delay:.12s}
#processo.is-active .step:nth-child(1){transition-delay:.22s}
#processo.is-active .step:nth-child(2){transition-delay:.28s}
#processo.is-active .step:nth-child(3){transition-delay:.34s}
#processo.is-active .step:nth-child(4){transition-delay:.40s}
#processo.is-active .step:nth-child(5){transition-delay:.46s}

#depoimentos.is-active .section-tag{transition-delay:.04s}
#depoimentos.is-active .section-title{transition-delay:.12s}
#depoimentos.is-active .holo-card:nth-child(1){transition-delay:.22s}
#depoimentos.is-active .holo-card:nth-child(2){transition-delay:.32s}
#depoimentos.is-active .holo-card:nth-child(3){transition-delay:.42s}
#depoimentos.is-active .depo-waiting{transition-delay:.22s}

#faq.is-active .section-tag{transition-delay:.04s}
#faq.is-active .section-title{transition-delay:.12s}
#faq.is-active .faq-item:nth-child(1){transition-delay:.22s}
#faq.is-active .faq-item:nth-child(2){transition-delay:.28s}
#faq.is-active .faq-item:nth-child(3){transition-delay:.34s}
#faq.is-active .faq-item:nth-child(4){transition-delay:.40s}
#faq.is-active .faq-item:nth-child(5){transition-delay:.46s}

#contato.is-active .contato-pre{transition-delay:.04s}
#contato.is-active .contato-title{transition-delay:.12s}
#contato.is-active .contato-sub{transition-delay:.20s}
#contato.is-active .contato-escassez{transition-delay:.28s}
#contato.is-active .contato-btns{transition-delay:.36s}
#contato.is-active .contato-links{transition-delay:.44s}

@media(max-width:980px){
  #hero .hero-kicker,
  #hero .hero-title,
  #hero .hero-dynamic-wrap,
  #hero .hero-actions,
  #problema .problema-head,
  #problema .glass-card,
  #servicos .section-tag,
  #servicos .section-title,
  #servicos .servico-card,
  #portfolio .section-tag,
  #portfolio .section-title,
  #portfolio .portfolio-slot,
  #portfolio .portfolio-note,
  #processo .section-tag,
  #processo .section-title,
  #processo .step,
  #depoimentos .section-tag,
  #depoimentos .section-title,
  #depoimentos .holo-card,
  #depoimentos .depo-waiting,
  #faq .section-tag,
  #faq .section-title,
  #faq .faq-item,
  #contato .contato-pre,
  #contato .contato-title,
  #contato .contato-sub,
  #contato .contato-escassez,
  #contato .contato-btns,
  #contato .contato-links{
    transition-duration:.42s;
  }
}


/* ═══════════════════════════════════════════
   DEVICE PROFILES / LITE MODE
═══════════════════════════════════════════ */
html.touch-device .cursor,
html.touch-device .cursor-ring{
  display:none !important;
}

html.mobile-device .grain{
  display:none !important;
}

html.lite-mode .grain,
html.lite-mode .light-orb,
html.lite-mode .hero-noise{
  display:none !important;
}

html.lite-mode .glass-card,
html.lite-mode .servico-card,
html.lite-mode .portfolio-slot,
html.lite-mode .holo-card,
html.lite-mode .quem-prova,
html.lite-mode .proof-item,
html.lite-mode .hero-dynamic-wrap,
html.lite-mode .mobile-curve-card{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html.lite-mode .glass-card::before,
html.lite-mode .servico-card::before,
html.lite-mode .portfolio-slot::before,
html.lite-mode .holo-card::before,
html.lite-mode .quem-prova::before,
html.lite-mode .proof-item::before,
html.lite-mode .hero-dynamic-wrap::before,
html.lite-mode .mobile-curve-card::before{
  display:none !important;
}

html.lite-mode #hero .hero-bg::after,
html.lite-mode .holo-card,
html.lite-mode .loader-logo,
html.lite-mode .grain{
  animation:none !important;
}

html.lite-mode .premium-card:hover,
html.lite-mode .glass-card:hover,
html.lite-mode .servico-card:hover,
html.lite-mode .portfolio-slot:hover,
html.lite-mode .holo-card:hover,
html.lite-mode .quem-prova:hover,
html.lite-mode .proof-item:hover,
html.lite-mode .hero-dynamic-wrap:hover,
html.lite-mode .btn-primary:hover,
html.lite-mode .btn-secondary:hover{
  transform:none !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html.lite-mode .section-overlap{
  box-shadow:
    0 -8px 24px rgba(0,0,0,.22),
    0 -1px 0 rgba(255,255,255,.03) !important;
}

html.lite-mode .hero-bg::after{
  opacity:.45 !important;
  filter:blur(26px) !important;
}

html.lite-mode .mobile-curve-card,
html.lite-mode .glass-card,
html.lite-mode .servico-card,
html.lite-mode .portfolio-slot,
html.lite-mode .holo-card,
html.lite-mode .faq-item{
  transition-duration:.28s !important;
}

@media(max-width:980px){
  html.mobile-device .glass-card,
  html.mobile-device .servico-card,
  html.mobile-device .portfolio-slot,
  html.mobile-device .holo-card,
  html.mobile-device .hero-dynamic-wrap,
  html.mobile-device .proof-item,
  html.mobile-device .quem-prova,
  html.mobile-device .mobile-curve-card{
    box-shadow:
      0 12px 30px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.04);
  }
}

/* ═══════════════════════════════════════════
   UTILITÁRIOS
═══════════════════════════════════════════ */
.container{max-width:1100px;margin:0 auto}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.text-cyan{color:var(--cyan)}
.text-magenta{color:var(--magenta)}

/* ═══════════════════════════════════════════
   RESPONSIVIDADE
═══════════════════════════════════════════ */
@media(max-width:1024px){
  .quem-grid{gap:3rem}
  .processo-steps{grid-template-columns:1fr 1fr;gap:2rem}
  .processo-steps::before{display:none}
  .vira-grid{gap:2rem}
}
@media(min-width:769px){
  #hero{
    align-items:stretch;
    min-height:100vh;
  }
  .hero-bg{
    background:
      linear-gradient(to right, rgba(2,4,10,.88) 0%, rgba(2,4,10,.72) 28%, rgba(2,4,10,.38) 52%, rgba(2,4,10,.14) 72%, rgba(2,4,10,.08) 100%),
      url('/assets/img/danielherocanva.webp') right top / auto 108% no-repeat,
      radial-gradient(circle at 72% 42%, rgba(0,245,255,.16) 0%, rgba(0,245,255,.07) 18%, transparent 52%),
      radial-gradient(circle at 83% 72%, rgba(0,245,255,.08) 0%, transparent 42%),
      linear-gradient(115deg, #02040a 0%, #040914 42%, #02040a 100%);
  }
  .hero-bg::before{
    background:
      linear-gradient(to right, rgba(2,4,10,.92) 0%, rgba(2,4,10,.78) 24%, rgba(2,4,10,.44) 46%, rgba(2,4,10,.16) 70%, rgba(2,4,10,.05) 100%),
      radial-gradient(circle at 22% 40%, rgba(255,255,255,.025) 0%, transparent 28%),
      linear-gradient(90deg, transparent 0%, rgba(0,245,255,.03) 46%, transparent 100%);
  }
  #hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 79% 52%, rgba(0,245,255,.16) 0%, rgba(0,245,255,.05) 28%, transparent 58%),
      radial-gradient(circle at 64% 82%, rgba(123,47,255,.12) 0%, transparent 45%),
      linear-gradient(to top, rgba(2,4,10,.86) 0%, transparent 28%);
    pointer-events:none;
    z-index:1;
    animation:heroPulse 16s ease-in-out infinite;
  }
  .hero-content{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 clamp(1.8rem, 6vw, 7rem) 2.5rem;
    justify-content:flex-start;
  }
  .hero-panel{
    width:min(100%, 760px);
  }
  .hero-title{
    font-size:clamp(4rem, 6vw, 6.4rem);
    max-width:10ch;
  }
  .hero-dynamic-wrap{
    margin-top:1.45rem;
  }
  .hero-proof{
    gap:1rem;
  }
  .proof-item{
    min-width:170px;
  }
  .hero-daniel{
    display:none;
    right:clamp(-0.5rem, 2.5vw, 2.5rem);
    height:min(95vh, 980px);
    filter:
      drop-shadow(0 0 42px rgba(0,245,255,.18))
      drop-shadow(0 32px 110px rgba(0,0,0,.52));
  }
  .hero-daniel::before{
    content:'';
    position:absolute;
    right:4%;
    bottom:8%;
    width:62%;
    height:38%;
    background:radial-gradient(circle at center, rgba(0,245,255,.34), rgba(0,245,255,0));
    filter:blur(46px);
    z-index:-1;
    opacity:.8;
    pointer-events:none;
  }
}
@media(min-width:1200px){
  .hero-content{
    padding-left:clamp(4rem, 9vw, 11rem);
    padding-right:clamp(3rem, 6vw, 6rem);
  }
  .hero-panel{
    max-width:560px;
  }
  .hero-title{
    font-size:clamp(4.8rem, 5.5vw, 6.8rem);
  }
  .hero-daniel{
    right:clamp(0rem, 2vw, 2rem);
    height:min(96vh, 1040px);
  }
}
@media(max-width:768px){
  body{cursor:auto}
  .cursor,.cursor-ring{display:none}
  nav{padding:1rem 1.2rem}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;gap:1.5rem;
    position:fixed;inset:0;background:rgba(2,4,10,.98);
    padding:5rem 2rem;z-index:6999;
  }
  .nav-links a{font-size:.8rem}
  .nav-toggle{display:flex}
  .hero-bg::after{
    width:420px;
    height:420px;
    right:-110px;
    top:30%;
    filter:blur(110px);
    opacity:.7;
  }
  .hero-content{
    padding:0 1rem 2rem;
  }
  .hero-panel{
    max-width:100%;
    margin-top:0;
    padding:0;
  }
  .hero-dynamic{
    max-width:100%;
    min-height:3.8em;
  }
  .hero-actions{
    flex-direction:column;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    width:100%;
  }
  .scroll-indicator{
    display:none;
  }
  .hero-daniel{
    display:none;
  }
  .problema-grid{grid-template-columns:1fr;gap:1rem}
  .problema-head{margin-bottom:2.1rem}
  .problema-title{max-width:100%}
  .glass-card{min-height:auto;padding:1.35rem 1.15rem 1.2rem;border-radius:22px}
  .card-desc{max-width:100%;font-size:.92rem;line-height:1.62}
  .quem-grid{grid-template-columns:1fr}
  .quem-photo-wrap{max-width:400px;margin:0 auto}
  .vira-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .processo-steps{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  #hero{min-height:100svh}
  .hero-title{font-size:2.7rem}
  .hero-dynamic{
    max-width:100%;
    min-height:4em;
    font-size:1.08rem;
    line-height:1.58;
  }
  .hero-dynamic-wrap{
    width:100%;
    max-width:100%;
    padding:.85rem .9rem;
    border-radius:18px;
  }
  .hero-daniel{
    display:none;
  }
  .scroll-indicator{bottom:1.1rem}
  .section-title{font-size:2rem}
  .problema-title{font-size:2.5rem;line-height:.96}
  .card-title{font-size:1.26rem}
  .contato-btns{flex-direction:column;align-items:center}
  .quem-stats{grid-template-columns:1fr 1fr}
}





@media(max-width:980px){
  #hero .hero-bg::after,
  #quem-sou .quem-visual::before,
  #depoimentos .holo-card{
    animation-play-state:paused;
  }

  #hero.is-active .hero-bg::after,
  #quem-sou.is-active .quem-visual::before,
  #depoimentos.is-active .holo-card{
    animation-play-state:running;
  }
}


/* === FADE TEXT EFFECT (Como trabalho) === */
.fade-text{
  transition: opacity .5s ease;
  opacity:1;
}
.fade-text.hidden{
  opacity:0;
}


/* === FIX REAL DO TÍTULO DINÂMICO EM PROCESSO === */
.processo-title-dynamic{
  min-height: 2.2em;
}

.fade-text{
  display:inline-block;
  min-width: 10ch;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:.95;
  background:linear-gradient(90deg,#f2f5fb 0%, #eaf0f6 45%, #ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 20px rgba(255,255,255,.08);
  transition:opacity .45s ease, transform .45s ease, filter .45s ease;
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.fade-text.is-accent{
  background:linear-gradient(90deg,#00eaff 0%, #79f7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 24px rgba(0,234,255,.16);
}
.fade-text.hidden{
  opacity:0;
  transform:translateY(10px);
  filter:blur(6px);
}

@media (max-width: 768px){
  .processo-title-dynamic{
    min-height: 2.6em;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🎥 CARROSSEL DE VÍDEOS COM SWIPER - ESTILOS CUSTOMIZADOS
═══════════════════════════════════════════════════════════════════════════════ */

/* Grid de cards */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Card de portfólio */
.portfolio-slot {
  background: rgba(6, 12, 22, 0.8);
  border: 1px solid rgba(0, 245, 255, 0.12);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.portfolio-slot:hover {
  border-color: var(--cyan);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 245, 255, 0.1);
}

.portfolio-slot-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.portfolio-slot-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.portfolio-slot-count {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: var(--cyan);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Modal/Pop-up */
.modal-portfolio {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 4, 10, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: auto;
}

.modal-portfolio.active {
  display: flex;
}

.modal-content {
  background: rgba(6, 12, 22, 0.9);
  border: 1px solid rgba(0, 245, 255, 0.12);
  border-radius: 12px;
  width: 100%;
  max-width: 750px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.4s ease-out;
}

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

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(0, 245, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--cyan);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--magenta);
}

.modal-body {
  flex: 1;
  overflow: auto;
  padding: 2rem;
}

/* Swiper Container */
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* Container de vídeo com aspect ratio */
.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0, 245, 255, 0.12);
}

.video-container.vertical {
  max-width: 400px;
  aspect-ratio: 9 / 16;
}

.video-container.horizontal {
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* EFEITOS SWIPER - Blur e Scale */
.swiper-slide-prev {
  filter: blur(10px);
  transform: scale(0.5);
  transition: 0.5s;
  opacity: 0.5;
}

.swiper-slide-active {
  filter: blur(3px);
  transform: scale(0.7);
  transition: 0.5s;
  opacity: 1;
}

.swiper-slide-next {
  filter: blur(10px);
  transform: scale(0.5);
  transition: 0.5s;
  opacity: 0.5;
}

.swiper-slide-next ~ .swiper-slide {
  filter: blur(3px);
  transform: scale(0.7);
  transition: 0.5s;
  opacity: 0.5;
}

/* Informações do vídeo */
.video-info {
  text-align: center;
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(0, 245, 255, 0.12);
}

.video-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}

.video-count {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.2em;
}

/* Paginação */
.swiper-pagination {
  bottom: 0 !important;
  padding: 1rem 0;
}

.swiper-pagination-bullet {
  background: var(--cyan);
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background: var(--magenta);
  opacity: 1;
}

/* Botões de navegação */
.swiper-button-next,
.swiper-button-prev {
  color: var(--cyan);
  width: 40px;
  height: 40px;
  background: rgba(0, 245, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
  margin-top: 0;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(0, 245, 255, 0.3);
  color: var(--magenta);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px;
}

/* Responsividade */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .swiper-slide {
    padding: 1rem 0.5rem;
  }
  
  .video-container.vertical {
    max-width: 300px;
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 480px) {
  .portfolio-slot {
    padding: 1.5rem 1rem;
  }
  
  .portfolio-slot-icon {
    font-size: 2rem;
  }
  
  .modal-header {
    padding: 1rem;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .video-container.vertical {
    max-width: 280px;
  }
}


/* ═══════════════════════════════════════════
   PORTFÓLIO 3D INTEGRADO
═══════════════════════════════════════════ */
.portfolio-grid-3d{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
}

.portfolio-slot{
  min-height:240px;
  aspect-ratio:auto;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 22px 64px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 1.4rem;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s cubic-bezier(.22,1,.36,1);
}

.portfolio-slot::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(120deg, transparent 12%, rgba(0,234,255,.16) 38%, rgba(255,0,110,.07) 62%, transparent 88%);
  filter:blur(24px);
  opacity:.34;
  z-index:-1;
  pointer-events:none;
}

.portfolio-slot:hover{
  transform:translateY(-4px);
  border-color:rgba(0,234,255,.14);
  box-shadow:
    0 14px 32px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.portfolio-slot-icon{
  font-size:2.6rem;
  margin-bottom:.9rem;
}

.portfolio-slot-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  letter-spacing:.04em;
  color:#f2f5fb;
  margin-bottom:.5rem;
}

/* PORTFÓLIO MODAL 3D — FOCO NO VÍDEO CENTRAL */
/* ═══════════════════════════════════════════
   MODAL PREMIUM - PLAYER ÚNICO
═══════════════════════════════════════════ */
.portfolio-modal-3d{
  display:none;
  position:fixed;
  inset:0;
  z-index:9500;
  background:rgba(2,4,10,.92);
  overflow:hidden;
  padding:0;
}
.portfolio-modal-3d.active{
  display:flex;
  align-items:center;
  justify-content:center;
}
body.modal-open #mainNav,
body.modal-open .nav-logo,
body.modal-open .nav-toggle{
  opacity:0;
  pointer-events:none;
}
.portfolio-modal-dialog{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#02040a;
}
.portfolio-modal-header{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(2,4,10,.98), rgba(2,4,10,.94));
}
.portfolio-modal-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1rem, 4vw, 1.5rem);
  letter-spacing:.05em;
  color:var(--cyan);
}
.portfolio-modal-close{
  appearance:none;
  border:1px solid rgba(0,245,255,.2);
  background:rgba(0,245,255,.08);
  color:var(--cyan);
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  cursor:pointer;
  transition:all .25s ease;
  flex-shrink:0;
  position:relative;
  z-index:25;
}
.portfolio-modal-close:hover{
  background:rgba(0,245,255,.15);
  border-color:rgba(0,245,255,.4);
  transform:scale(1.05);
}
.portfolio-modal-body{
  flex:1;
  display:block;
  padding:clamp(1rem, 3vw, 2rem);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.portfolio-player-container{
  width:100%;
  max-width:min(100%, 1160px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-height:0;
}
.portfolio-player-main{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:clamp(8px, 2vw, 20px);
  overflow:visible;
  background:transparent;
  border:none;
  box-shadow:none;
  min-height:0;
}
.portfolio-player-video{
  position:relative;
  width:min(100%, 960px);
  aspect-ratio:16/9;
  margin:0 auto;
  border-radius:clamp(8px, 2vw, 20px);
  overflow:hidden;
  background:#000;
  border:1px solid rgba(0,245,255,.15);
  box-shadow:
    0 0 0 1px rgba(0,245,255,.08),
    0 30px 60px rgba(0,0,0,.5);
}
.portfolio-player-video.vertical{
  width:min(100%, 380px);
  aspect-ratio:9/16;
}
.portfolio-player-video.horizontal{
  width:min(100%, 960px);
  aspect-ratio:16/9;
}
.portfolio-player-main iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}
.portfolio-player-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 0.5rem;
}
.portfolio-player-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1rem, 3vw, 1.3rem);
  letter-spacing:.03em;
  color:#f7fbff;
}
.portfolio-player-counter{
  font-family:'Space Mono',monospace;
  font-size:clamp(.6rem, 2vw, .75rem);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(232,234,240,.5);
  white-space:nowrap;
}
.portfolio-thumbnails-wrapper{
  width:100%;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(2,4,10,.5), rgba(2,4,10,.8));
  overflow:hidden;
}
.portfolio-thumbnails{
  display:flex;
  gap:clamp(.75rem, 2vw, 1rem);
  padding:clamp(.9rem, 2vw, 1.2rem);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,245,255,.24) transparent;
  align-items:flex-start;
}
.portfolio-thumbnails::-webkit-scrollbar{
  height:6px;
}
.portfolio-thumbnails::-webkit-scrollbar-thumb{
  background:rgba(0,245,255,.24);
  border-radius:3px;
}
.portfolio-thumbnails::-webkit-scrollbar-track{
  background:transparent;
}
.portfolio-thumbnail{
  flex:0 0 auto;
  position:relative;
  width:clamp(86px, 12vw, 118px);
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  border:2px solid rgba(255,255,255,.08);
  transition:all .3s ease;
  flex-shrink:0;
}
.portfolio-thumbnail.vertical{
  width:clamp(72px, 8vw, 92px);
  aspect-ratio:9/16;
}
.portfolio-thumbnail img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.portfolio-thumbnail::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
  transition:all .3s ease;
}
.portfolio-thumbnail.active{
  border-color:var(--cyan);
  box-shadow:
    0 0 20px rgba(0,245,255,.4),
    inset 0 0 10px rgba(0,245,255,.1);
}
.portfolio-thumbnail.active::after{
  background:rgba(0,245,255,.1);
}
.portfolio-thumbnail:hover{
  transform:scale(1.05);
  border-color:rgba(0,245,255,.3);
}
.portfolio-thumbnail:hover::after{
  background:rgba(0,0,0,.2);
}
.portfolio-empty-state{
  text-align:center;
  padding:3rem 1rem;
  color:var(--muted);
}
.portfolio-empty-icon{
  font-size:3rem;
  margin-bottom:1rem;
}

@media(max-width:1024px){
  .portfolio-player-container{
    gap:0.9rem;
  }
  .portfolio-player-video.horizontal{
    width:min(100%, 860px);
  }
  .portfolio-player-video.vertical{
    width:min(100%, 340px);
  }
}

@media(max-width:768px){
  .portfolio-modal-dialog{
    height:100vh;
  }
  .portfolio-modal-body{
    padding:clamp(.8rem, 3vw, 1.2rem);
  }
  .portfolio-player-container{
    gap:0.75rem;
  }
  .portfolio-player-video.horizontal,
  .portfolio-player-video.vertical{
    width:100%;
    max-width:100%;
  }
  .portfolio-player-main{
    overflow:hidden;
  }
  .portfolio-thumbnails-wrapper{
    border-top:none;
    background:transparent;
  }
  .portfolio-thumbnails{
    display:flex;
    flex-direction:column;
    gap:.75rem;
    padding:.75rem 0 0;
    overflow-x:hidden;
    overflow-y:visible;
  }
  .portfolio-thumbnail,
  .portfolio-thumbnail.vertical{
    width:100%;
    max-width:100%;
    height:84px;
    aspect-ratio:auto;
  }
}

@media(max-width:480px){
  .portfolio-modal-header{
    padding:.75rem 1rem;
  }
  .portfolio-modal-title{
    font-size:1rem;
  }
  .portfolio-modal-close{
    width:40px;
    height:40px;
    font-size:1rem;
  }
  .portfolio-modal-body{
    padding:0.5rem;
  }
  .portfolio-player-container{
    gap:0.5rem;
  }
  .portfolio-player-info{
    padding:0.25rem 0;
  }
  .portfolio-player-title{
    font-size:0.9rem;
  }
  .portfolio-thumbnails{
    gap:0.5rem;
  }
  .portfolio-thumbnail,
  .portfolio-thumbnail.vertical{
    height:74px;
  }
}



.btn-primary:hover svg {
  transform: scale(1.15) rotate(-5deg);
}


/* ═══════════════════════════════════════════
   HERO MOBILE IMAGE + FOOTER MOBILE CLEANUP
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  #hero{
    min-height: 85svh;
    padding: 5.75rem 0 1.5rem;
    align-items: flex-start;
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(2,4,10,.18) 0%, rgba(2,4,10,.56) 38%, rgba(2,4,10,.92) 100%),
      radial-gradient(circle at 50% 14%, rgba(0,234,255,.12) 0%, rgba(0,234,255,.04) 24%, transparent 52%),
      url('/assets/img/danielheromobile.webp') 150% top / cover no-repeat,
      linear-gradient(180deg, #02040a 0%, #040914 100%);
    transform: none;
  }

  .hero-bg::before{
    background:
      linear-gradient(180deg, rgba(2,4,10,.16) 0%, rgba(2,4,10,.42) 28%, rgba(2,4,10,.84) 72%, rgba(2,4,10,.96) 100%);
  }

  .hero-bg::after{
    inset: auto auto 10% 50%;
    width: 64vw;
    height: 64vw;
    transform: translateX(-50%);
    opacity: .58;
    filter: blur(34px);
  }

  .hero-content{
    padding: 0 1rem 1.5rem;
  }

  .hero-panel{
    width: 100%;
    padding-top: .4rem;
  }

  .hero-kicker{
    font-size: .62rem;
    letter-spacing: .14em;
    margin-bottom: .9rem;
  }

  .hero-kicker::before{
    width: 30px;
  }

  .hero-title{
    max-width: 10.5ch;
    font-size: clamp(2.25rem, 10vw, 3.35rem);
    line-height: .95;
    letter-spacing: -.035em;
  }

  .hero-dynamic-wrap{
    margin-top: 1rem;
    max-width: 100%;
    padding: .75rem 0;
  }

  .hero-dynamic{
    max-width: 31ch;
    min-height: 3.2em;
    font-size: clamp(.98rem, 4.2vw, 1.12rem);
    line-height: 1.52;
  }

  .hero-actions{
    width: 100%;
    gap: .7rem;
    margin-top: 1.15rem;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary,
  .hero-actions .btn-neon{
    width: 100%;
    min-height: 50px;
    padding: 0 1rem;
    font-size: .92rem;
    border-radius: 14px;
  }

  .scroll-indicator{
    right: 1rem;
    bottom: .9rem;
  }

  .footer-tag{
    display: none;
  }
}


/* HERO MOBILE REFINAMENTO FINAL */
@media(max-width:768px){

  #hero{
    min-height:85svh;
    padding:5.75rem 0 1.5rem;
    align-items:flex-start;
  }

  .hero-content{
    padding:0 1.2rem 1.5rem;
    justify-content:flex-start;
  }

  .hero-panel{
    width:min(100%, 420px);
    align-items:flex-start;
    text-align:left;
  }

  .hero-kicker{
    font-size:.62rem;
    letter-spacing:.14em;
    margin-bottom:.9rem;
  }

  .hero-title{
    max-width:10.5ch;
    font-size:clamp(2.2rem, 10vw, 3.35rem);
    line-height:.95;
    letter-spacing:-.035em;

    /* 🔥 ADICIONE SÓ ISSO */
    position: relative;
    top: -12px;
  }

  .hero-dynamic-wrap{
    margin-top:1rem;
    padding:.75rem 0;
  }

  .hero-dynamic{
    max-width:31ch;
    min-height:3.2em;
    font-size:clamp(.98rem, 4.2vw, 1.12rem);
    line-height:1.52;
  }

  .hero-actions{
    margin-top:1.2rem;
    gap:.7rem;
  }

  .btn-primary,
  .btn-secondary{
    min-height:48px;
    padding:0 1.1rem;
    font-size:.85rem;
    border-radius:14px;
  }
}


/* HERO MOBILE — botões menores à esquerda + card autoheight */
@media (max-width: 768px){
  .hero-dynamic-wrap{
    display: inline-flex;
    align-self: flex-start;
    width: auto;
    max-width: min(100%, 340px);
    min-width: 0;
    padding: .7rem .9rem;
    margin-top: .85rem;
    border-radius: 16px;
  }

  .hero-dynamic{
    max-width: 24ch;
    min-height: 0;
    font-size: .95rem;
    line-height: 1.45;
  }

  .hero-actions{
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 100rem;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 1rem;
    font-size: .88rem;
    border-radius: 12px;
    flex: 0 0 auto;
  }

  .hero-actions .btn-primary{
    box-shadow: 0 8px 26px rgba(0,245,255,.18);
  }
}

@media (max-width: 480px){
  .hero-dynamic-wrap{
    max-width: min(100%, 300px);
    padding: .62rem .82rem;
  }

  .hero-dynamic{
    max-width: 22ch;
    font-size: .92rem;
  }

  .hero-actions{
    gap: .6rem;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    min-height: 42px;
    padding: 0 .92rem;
    font-size: .84rem;
  }
}


/* HERO MOBILE — ajuste de botões + clarear base */
@media (max-width: 768px){

  /* descer os botões */
  .hero-actions{
    margin-top: 30rem;
  }

  /* reduzir escurecimento da base */
  .hero-bg{
    background:
      linear-gradient(180deg, rgba(2,4,10,.12) 0%, rgba(2,4,10,.38) 38%, rgba(2,4,10,.0) 100%),
      radial-gradient(circle at 50% 14%, rgba(0,234,255,.10) 0%, rgba(0,234,255,.03) 24%, transparent 52%),
      url('/assets/img/danielheromobile.webp') 35% -40px / cover no-repeat,
      linear-gradient(180deg, #02040a 0%, #040914 100%);
  }

  .hero-bg::before{
    background:
      linear-gradient(180deg, rgba(2,4,10,.10) 0%, rgba(2,4,10,.28) 28%, rgba(2,4,10,.15) 72%, rgba(2,4,10,.20) 100%);
  }

  .hero-bg::after{
    opacity: .45;
  }
}


/* HERO MOBILE — corte mais agressivo */
@media (max-width: 768px){
  #hero{
    min-height: 74svh;
    padding: 4.2rem 0 .6rem;
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(2,4,10,.04) 0%, rgba(2,4,10,.16) 36%, rgba(2,4,10,.38) 100%),
      radial-gradient(circle at 40% 14%, rgba(0,234,255,.09) 0%, rgba(0,234,255,.025) 24%, transparent 52%),
      url('/assets/img/danielheromobile.webp') 34% -60px / cover no-repeat,
      linear-gradient(180deg, #02040a 0%, #040914 100%);
  }

  .hero-bg::before{
    background:
      linear-gradient(180deg, rgba(2,4,10,.05) 0%, rgba(2,4,10,.16) 24%, rgba(2,4,10,.44) 72%, rgba(2,4,10,.68) 100%);
  }
}

@media (max-width: 480px){
  #hero{
    min-height: 72svh;
    padding: 4rem 0 .5rem;
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(2,4,10,.06) 0%, rgba(2,4,10,.22) 34%, rgba(2,4,10,.52) 100%),
      radial-gradient(circle at 38% 14%, rgba(0,234,255,.08) 0%, rgba(0,234,255,.02) 24%, transparent 52%),
      url('/assets/img/danielheromobile.webp') 32% -70px / cover no-repeat,
      linear-gradient(180deg, #02040a 0%, #040914 100%);
  }
}


/* ═══════════════════════════════════════════
   HERO MOBILE FIX SEGURO (SEM REMOVER NADA)
═══════════════════════════════════════════ */
@media (max-width: 768px){
  #hero{
    min-height:84svh !important;
    padding:5.2rem 0 1rem !important;
    align-items:flex-start !important;
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(2,4,10,.10) 0%, rgba(2,4,10,.28) 36%, rgba(2,4,10,.58) 100%),
      radial-gradient(circle at 40% 14%, rgba(0,234,255,.09) 0%, rgba(0,234,255,.03) 24%, transparent 52%),
      url('/assets/img/danielheromobile.webp') 36% -42px / cover no-repeat,
      linear-gradient(180deg, #02040a 0%, #040914 100%) !important;
    transform:none !important;
  }

  .hero-bg::before{
    background:
      linear-gradient(180deg, rgba(2,4,10,.07) 0%, rgba(2,4,10,.18) 24%, rgba(2,4,10,.46) 72%, rgba(2,4,10,.72) 100%) !important;
  }

  .hero-bg::after{
    inset:auto auto 10% 48% !important;
    width:58vw !important;
    height:58vw !important;
    transform:translateX(-50%) !important;
    opacity:.38 !important;
    filter:blur(30px) !important;
  }

  .hero-content{
    padding:0 1rem 1.25rem !important;
  }

  .hero-panel{
    width:100% !important;
    padding-top:.4rem !important;
    align-items:flex-start !important;
    text-align:left !important;
  }

  .hero-kicker{
    font-size:.58rem !important;
    letter-spacing:.12em !important;
    text-align:left !important;
    margin-bottom:.9rem !important;
  }

  .hero-kicker::before{
    width:30px !important;
  }

  .hero-title{
    max-width:9.5ch !important;
    font-size:clamp(1.9rem, 8.5vw, 2.6rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.03em !important;
    text-align:left !important;
  }

  .hero-dynamic-wrap{
    display:inline-flex !important;
    align-self:flex-start !important;
    width:auto !important;
    max-width:min(100%, 320px) !important;
    min-width:0 !important;
    padding:.68rem .85rem !important;
    margin-top:.85rem !important;
    border-radius:16px !important;
  }

  .hero-dynamic{
    max-width:23ch !important;
    min-height:0 !important;
    font-size:.94rem !important;
    line-height:1.45 !important;
  }

  .hero-actions{
    width:auto !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:.65rem !important;
    margin-top:1.6rem !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    width:auto !important;
    min-width:0 !important;
    min-height:44px !important;
    padding:0 1rem !important;
    font-size:.86rem !important;
    border-radius:12px !important;
    flex:0 0 auto !important;
  }
}

@media (max-width: 480px){
  #hero{
    min-height:82svh !important;
    padding:5rem 0 .9rem !important;
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(2,4,10,.08) 0%, rgba(2,4,10,.24) 34%, rgba(2,4,10,.54) 100%),
      radial-gradient(circle at 38% 14%, rgba(0,234,255,.08) 0%, rgba(0,234,255,.02) 24%, transparent 52%),
      url('/assets/img/danielheromobile.webp') 34% -52px / cover no-repeat,
      linear-gradient(180deg, #02040a 0%, #040914 100%) !important;
  }

  .hero-title{
    font-size:clamp(1.8rem, 9.3vw, 2.45rem) !important;
  }

  .hero-dynamic-wrap{
    max-width:min(100%, 295px) !important;
    padding:.62rem .8rem !important;
  }

  .hero-dynamic{
    max-width:22ch !important;
    font-size:.9rem !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    min-height:42px !important;
    padding:0 .9rem !important;
    font-size:.83rem !important;
  }
}


/* HERO MOBILE — ritmo vertical ajustado para igualar a versão perfeita */
@media (max-width: 768px){
  .hero-content{
    padding:0 1rem 1.25rem !important;
  }

  .hero-panel{
    padding-top:1rem !important;
  }

  .hero-kicker{
    margin-bottom:1.05rem !important;
  }

  .hero-title{
    transform:translateY(10px) !important;
  }

  .hero-dynamic-wrap{
    margin-top:1.15rem !important;
    padding:.72rem .88rem !important;
  }

  .hero-actions{
    margin-top:1.3rem !important;
  }
}

@media (max-width: 480px){
  .hero-panel{
    padding-top:1.05rem !important;
  }

  .hero-title{
    transform:translateY(12px) !important;
  }

  .hero-dynamic-wrap{
    margin-top:1.2rem !important;
    padding:.68rem .84rem !important;
  }

  .hero-actions{
    margin-top:1.35rem !important;
  }
}



/* ═══════════════════════════════════════════
   ETAPA 2 — HERO: MENOS ESCURO + SEM BRILHO NA TESTA
   Ajuste isolado. Não mexe em #quem-sou.
═══════════════════════════════════════════ */
@media (min-width: 769px){
  .hero-bg{
    background:
      linear-gradient(to right, rgba(2,4,10,.82) 0%, rgba(2,4,10,.60) 26%, rgba(2,4,10,.30) 52%, rgba(2,4,10,.10) 74%, rgba(2,4,10,.04) 100%),
      url('/assets/img/danielherocanva.webp') right top / auto 108% no-repeat,
      radial-gradient(circle at 83% 72%, rgba(0,245,255,.04) 0%, transparent 42%),
      linear-gradient(115deg, #02040a 0%, #040914 42%, #02040a 100%) !important;
  }

  .hero-bg::before{
    background:
      linear-gradient(to right, rgba(2,4,10,.56) 0%, rgba(2,4,10,.38) 26%, rgba(2,4,10,.18) 52%, rgba(2,4,10,.06) 74%, transparent 100%),
      linear-gradient(90deg, transparent 0%, rgba(0,245,255,.018) 46%, transparent 100%) !important;
  }

  #hero::before{
    background:
      radial-gradient(circle at 79% 52%, rgba(0,245,255,.06) 0%, rgba(0,245,255,.02) 24%, transparent 52%),
      radial-gradient(circle at 64% 82%, rgba(123,47,255,.04) 0%, transparent 40%),
      linear-gradient(to top, rgba(2,4,10,.42) 0%, transparent 24%) !important;
  }

  .hero-vignette{
    background:radial-gradient(circle at center, transparent 52%, rgba(2,4,10,.06) 78%, rgba(2,4,10,.22) 100%) !important;
  }
}

@media (max-width: 768px){
  .hero-bg{
    background:
      linear-gradient(to right, rgba(2,4,10,.82) 0%, rgba(2,4,10,.58) 28%, rgba(2,4,10,.24) 58%, rgba(2,4,10,.08) 78%, transparent 100%),
      url('/assets/img/danielheromobile.webp') 42% -52px / cover no-repeat,
      linear-gradient(180deg, #02040a 0%, #040914 100%) !important;
  }

  .hero-bg::before{
    background:
      linear-gradient(to right, rgba(2,4,10,.42) 0%, rgba(2,4,10,.22) 34%, rgba(2,4,10,.08) 62%, transparent 100%) !important;
  }

  .hero-bg::after{
    display:none !important;
    opacity:0 !important;
    background:none !important;
    filter:none !important;
    box-shadow:none !important;
    animation:none !important;
  }

  .hero-vignette{
    background:radial-gradient(circle at center, transparent 60%, rgba(2,4,10,.05) 82%, rgba(2,4,10,.16) 100%) !important;
  }
}



/* ═══════════════════════════════════════════
   PORTFÓLIO + MODAL — AJUSTES VISUAIS FINOS
   MOBILE CARDS / MODAL MOBILE / MODAL DESKTOP
═══════════════════════════════════════════ */

/* MODAL DESKTOP — adapta ao formato do vídeo */
.portfolio-player-container{
  align-items:center;
}

.portfolio-player-main{
  flex:0 0 auto;
  width:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:visible;
}

.portfolio-player-video{
  position:relative;
  width:min(100%, 980px);
  aspect-ratio:16/9;
  margin:0 auto;
  background:#000;
  border-radius:clamp(8px, 2vw, 20px);
  overflow:hidden;
  border:1px solid rgba(0,245,255,.15);
  box-shadow:
    0 0 0 1px rgba(0,245,255,.08),
    0 30px 60px rgba(0,0,0,.5);
}

.portfolio-player-video.vertical{
  width:min(100%, 380px);
  max-width:380px;
  aspect-ratio:9/16;
}

.portfolio-player-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}

/* MOBILE — cards mais largos e um por linha */
@media (max-width: 768px){
  .portfolio-grid-3d,
  .portfolio-grid{
    grid-template-columns:1fr !important;
    gap:1rem;
  }

  .portfolio-slot{
    width:100%;
    max-width:100%;
    min-height:320px;
    padding:1.35rem;
    border-radius:22px;
  }

  .portfolio-slot-title{
    font-size:clamp(2rem, 8vw, 2.8rem);
    line-height:.95;
  }

    .portfolio-slot-hint{
    min-height:42px;
    font-size:.58rem;
    letter-spacing:.14em;
  }

  /* MODAL MOBILE — thumbs em coluna e mais largos */
  .portfolio-modal-body{
    justify-content:flex-start;
    overflow-y:auto;
  }

  .portfolio-player-container{
    max-height:none;
    height:auto;
    min-height:100%;
  }

  .portfolio-player-main{
    width:100%;
  }

  .portfolio-player-video{
    width:min(100%, 760px);
  }

  .portfolio-player-video.vertical{
    width:min(100%, 320px);
    max-width:320px;
  }

  .portfolio-thumbnails-wrapper{
    width:100%;
    max-height:none;
    background:transparent;
    border-top:1px solid rgba(255,255,255,.06);
  }

  .portfolio-thumbnails{
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:visible;
    padding:.85rem 0;
    gap:.75rem;
  }

  .portfolio-thumbnail{
    width:100%;
    max-width:100%;
    height:84px;
    aspect-ratio:auto;
    border-radius:14px;
  }

  .portfolio-thumbnail.vertical{
    height:110px;
    aspect-ratio:auto;
  }
}

/* DESKTOP EXTRA — vídeo vertical não ficar perdido no espaço */
@media (min-width: 769px){
  .portfolio-modal-dialog{
    width:min(92vw, 1200px);
    margin:0 auto;
  }
}



/* ═══════════════════════════════════════════
   PORTFÓLIO — REFINO FINAL VISUAL DOS CARDS
═══════════════════════════════════════════ */
.portfolio-slot{
  border-radius: 26px !important;
  border-color: rgba(0,245,255,.22) !important;
  box-shadow:
    0 0 0 1px rgba(0,245,255,.06),
    0 18px 44px rgba(0,0,0,.34),
    0 0 34px rgba(0,245,255,.12) !important;
}

.portfolio-slot::before{
  opacity: .48 !important;
  filter: blur(30px) !important;
}

.portfolio-slot-media{
  isolation: isolate;
}

.portfolio-slot-thumb{
  transform: scale(1.12) !important;
  filter: saturate(.82) brightness(.26) contrast(1.02) blur(11px) !important;
  opacity: .78 !important;
}

.portfolio-slot-preview{
  opacity: 0 !important;
}

.portfolio-slot-overlay{
  background:
    linear-gradient(180deg, rgba(2,4,10,.40) 0%, rgba(2,4,10,.62) 42%, rgba(2,4,10,.82) 100%),
    linear-gradient(135deg, rgba(0,245,255,.12) 0%, transparent 40%, transparent 72%, rgba(0,245,255,.08) 100%) !important;
  backdrop-filter: blur(8px) saturate(.95) !important;
  -webkit-backdrop-filter: blur(8px) saturate(.95) !important;
}

.portfolio-slot:hover .portfolio-slot-thumb,
.portfolio-slot.has-preview.is-active .portfolio-slot-thumb{
  filter: saturate(.88) brightness(.22) contrast(1.04) blur(14px) !important;
  opacity: .88 !important;
}

.portfolio-slot:hover .portfolio-slot-overlay,
.portfolio-slot.has-preview.is-active .portfolio-slot-overlay{
  background:
    linear-gradient(180deg, rgba(2,4,10,.36) 0%, rgba(2,4,10,.58) 42%, rgba(2,4,10,.80) 100%),
    linear-gradient(135deg, rgba(0,245,255,.16) 0%, transparent 42%, transparent 72%, rgba(0,245,255,.12) 100%) !important;
  backdrop-filter: blur(10px) saturate(1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1) !important;
}

.portfolio-slot-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 1rem;
}

.portfolio-slot-icon-svg{
  width: 64px;
  height: 64px;
  color: var(--cyan);
  filter:
    drop-shadow(0 0 8px rgba(0,245,255,.28))
    drop-shadow(0 0 18px rgba(0,245,255,.18));
  opacity: .98;
}

.portfolio-slot-badge--play{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(0,245,255,.26);
  background: radial-gradient(circle at center, rgba(0,245,255,.16) 0%, rgba(0,245,255,.06) 48%, rgba(0,245,255,.02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(0,245,255,.06),
    0 18px 38px rgba(0,0,0,.28);
}

.portfolio-slot-badge--play .portfolio-slot-icon-svg{
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.portfolio-slot:hover .portfolio-slot-badge--play{
  border-color: rgba(0,245,255,.42);
  background: radial-gradient(circle at center, rgba(0,245,255,.22) 0%, rgba(0,245,255,.09) 48%, rgba(0,245,255,.03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 28px rgba(0,245,255,.18),
    0 18px 38px rgba(0,0,0,.32);
}

.portfolio-slot-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  transform: translateY(01px);
}

.portfolio-slot-title{
  font-size: clamp(1.7rem, 2vw, 2.35rem) !important;
  line-height: .96 !important;
  letter-spacing: .03em !important;
  color: #f8fbff !important;
  text-shadow:
    0 6px 22px rgba(0,0,0,.44),
    0 0 12px rgba(255,255,255,.08) !important;
  max-width: 12ch;
  text-align: center;
  margin: 0;
}

.portfolio-slot-hint{
  min-height: 34px !important;
  padding: 0 1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,245,255,.14) !important;
  background: rgba(3,9,18,.42) !important;
  color: rgba(223,251,255,.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.24) !important;
  bottom: .9rem !important;
  font-size: .50rem !important;
  letter-spacing: .16em !important;
}

.portfolio-slot:hover .portfolio-slot-hint{
  border-color: rgba(0,245,255,.24) !important;
  background: rgba(3,9,18,.58) !important;
}

@media (max-width: 768px){
  .portfolio-slot{
    min-height: 300px !important;
    border-radius: 24px !important;
  }

  .portfolio-slot-badge--play{
    width: 56px;
    height: 56px;
  }

  .portfolio-slot-badge--play .portfolio-slot-icon-svg{
    width: 21px;
    height: 21px;
  }

  .portfolio-slot-content{
    transform: translateY(18px);
  }

  .portfolio-slot-title{
    font-size: clamp(1.45rem, 7vw, 1.95rem) !important;
    max-width: 11ch;
  }

  .portfolio-slot-hint{
    min-height: 32px !important;
    font-size: .47rem !important;
    bottom: .85rem !important;
  }

  .portfolio-slot-thumb{
    filter: saturate(.82) brightness(.24) contrast(1.02) blur(12px) !important;
  }

  .portfolio-slot-overlay{
    backdrop-filter: blur(9px) saturate(.95) !important;
    -webkit-backdrop-filter: blur(9px) saturate(.95) !important;
  }
}


/* ═══════════════════════════════════════════
   ETAPA FINAL — OTIMIZAÇÃO SEGURA DE LCP E CLS
   Ajustes pensados para aliviar hero, evitar shift nas seções críticas
   e preservar o visual da LP sem reestruturar o HTML.
═══════════════════════════════════════════ */

/* Hero: render inicial mais leve.
   Os efeitos extras voltam depois que a página termina de carregar. */
html:not(.hero-enhanced) #hero::before,
html:not(.hero-enhanced) .hero-vignette{
  opacity:0 !important;
}

html:not(.hero-enhanced) .hero-bg{
  background:
    linear-gradient(to right, rgba(2,4,10,.88) 0%, rgba(2,4,10,.72) 28%, rgba(2,4,10,.34) 56%, rgba(2,4,10,.12) 76%, rgba(2,4,10,.06) 100%),
    url('/assets/img/danielherocanva.webp') right top / auto 104% no-repeat,
    linear-gradient(115deg, #02040a 0%, #040914 42%, #02040a 100%) !important;
}

html:not(.hero-enhanced) .hero-bg::before{
  background:linear-gradient(to right, rgba(2,4,10,.74) 0%, rgba(2,4,10,.50) 28%, rgba(2,4,10,.20) 54%, rgba(2,4,10,.08) 76%, transparent 100%) !important;
}

@media (max-width: 768px){
  html:not(.hero-enhanced) .hero-bg{
    background:
      linear-gradient(180deg, rgba(2,4,10,.10) 0%, rgba(2,4,10,.26) 36%, rgba(2,4,10,.56) 100%),
      url('/assets/img/danielheromobile.webp') 36% -42px / cover no-repeat,
      linear-gradient(180deg, #02040a 0%, #040914 100%) !important;
  }

  html:not(.hero-enhanced) .hero-bg::before{
    background:linear-gradient(180deg, rgba(2,4,10,.06) 0%, rgba(2,4,10,.16) 24%, rgba(2,4,10,.42) 72%, rgba(2,4,10,.68) 100%) !important;
  }
}

/* Reservas de espaço e isolamento para reduzir CLS abaixo da dobra */
#problema,
#servicos,
#portfolio,
#processo,
#depoimentos,
#faq,
#contato{
  content-visibility:auto;
}

#problema{ contain-intrinsic-size: 760px; }
#servicos{ contain-intrinsic-size: 980px; }
#portfolio{ contain-intrinsic-size: 860px; }
#processo{ contain-intrinsic-size: 760px; }
#depoimentos{ contain-intrinsic-size: 840px; }
#faq{ contain-intrinsic-size: 700px; }
#contato{ contain-intrinsic-size: 640px; }

/* Quem Sou: manter a área estável antes do GSAP pinar */
#quem-sou{
  min-height:1000px;
}

.quem-composition{
  min-height:900px;
}

@media (max-width: 1280px){
  #quem-sou{ min-height:900px; }
  .quem-composition{ min-height:820px; }
}

@media (max-width: 980px){
  #quem-sou{ min-height:100svh; }
  .quem-composition{ min-height:100svh; }
}

/* Reduzir deslocamento visual nas seções que o Cloudflare marcou.
   Mantém fade, mas remove o deslocamento físico do layout. */
#problema .reveal,
#problema .reveal-left,
#problema .reveal-right,
#servicos .reveal,
#servicos .reveal-left,
#servicos .reveal-right,
#portfolio .reveal,
#portfolio .reveal-left,
#portfolio .reveal-right,
#processo .reveal,
#processo .reveal-left,
#processo .reveal-right,
#depoimentos .reveal,
#depoimentos .reveal-left,
#depoimentos .reveal-right,
#faq .reveal,
#faq .reveal-left,
#faq .reveal-right,
#contato .reveal,
#contato .reveal-left,
#contato .reveal-right{
  transform:none !important;
}

#problema .glass-card,
#servicos .servico-card,
#portfolio .portfolio-slot,
#processo .step,
#depoimentos .holo-card,
#faq .faq-item{
  transform:none;
}

/* Portfólio: reservar altura fixa do card para evitar variação
   quando thumb, preview e overlays entram em ação. */
.portfolio-slot{
  min-height:320px;
}

@media (max-width: 768px){
  .portfolio-slot{
    min-height:280px;
  }
}

.portfolio-slot-preview iframe{
  display:block;
}

/* FAQ: altura previsível durante expansão */
.faq-item{
  contain:layout paint;
}

/* Hero typing: já reserva caixa suficiente para não empurrar CTA */
.hero-dynamic{
  min-height:3.8em;
}

@media (max-width:768px){
  .hero-dynamic{
    min-height:4.2em;
  }
}