/* ════════════════════════════════════════════════════════
   VARIÁVEIS GLOBAIS
════════════════════════════════════════════════════════ */
:root {
  --red:        #BC1010;
  --red-dim:    #7a0a0a;
  --red-glow:   rgba(188,16,16,0.35);
  --bg:         #0d0c0c;
  --bg-mid:     #171515;
  --text:       #e8e0e0;
  --text-muted: #6b5f5f;
  --nav-logo-size: 56px;

  --hero-height:       100vh;
  --projetos-padding:  100px;
  --contato-padding:   100px;

  /* Nome "MAYCON" */
  --maycon-letter-spacing:  -0.01em;
  --maycon-word-spacing:     0em;

  /* Nome "WESLLEY" */
  --weslley-spacing:         50px;
  --weslley-spacing-comp:    28px;
  --weslley-word-spacing:    -10em;

  /* Tagline */
  --tagline-letter-spacing:  .35em;
  --tagline-word-spacing:    0.1em;

  /* Nav */
  --nav-letter-spacing:      .22em;
  --nav-word-spacing:        0em;

  /* Títulos de seção */
  --section-title-letter:    0em;
  --section-title-word:      20em;

  /* Labels */
  --label-letter-spacing:    .3em;
  --label-word-spacing:      0.01em;

  /* Serviços */
  --proj-services-letter:    .15em;
  --proj-services-word:      0.1em;

  /* Botões */
  --btn-letter-spacing:      .2em;
  --btn-word-spacing:        0em;

  /* Botões contato */
  --contact-btn-letter:      .15em;
  --contact-btn-word:        0em;

  /* Zeph */
  --zeph-color-primary:             #BC101020;
  --zeph-color-primary-dark:        #BC101030;
  --zeph-color-primary-light:       #BC1010;
  --zeph-color-primary-medium:      #BC101050;
  --zeph-color-bg:                  #ffffff10;
  --zeph-color-bg-outline:          #ffffff20;
  --zeph-color-primary-transparent: #BC101000;
}

/* ════════════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nebula', sans-serif;
  overflow-x: hidden;
  cursor: none;
}
body.loading { overflow: hidden; }

/* ════════════════════════════════════════════════════════
   CURSOR
════════════════════════════════════════════════════════ */
#cursor { position:fixed; z-index:99999; left:0; top:0; pointer-events:none; will-change:transform; }
.cursor__circle {
  width:16px; height:16px;
  background-color: rgba(188,16,16,0.55);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 0.5px solid #BC1010;
  margin-top:-50%; margin-left:-50%;
  border-radius:50%;
  transition: opacity .3s cubic-bezier(.25,1,.5,1), background-color .3s cubic-bezier(.25,1,.5,1),
              border-color .3s cubic-bezier(.25,1,.5,1), width .3s cubic-bezier(.25,1,.5,1),
              height .3s cubic-bezier(.25,1,.5,1);
  color: transparent;
}
.cursor__circle::after {
  content:"COPIAR"; font-family:'OrbitronLight',sans-serif; font-weight:700; font-size:14px;
  color:inherit; position:absolute; white-space:nowrap;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
@media (max-width:1024px) { #cursor{display:none;} body{cursor:auto;} }

/* ════════════════════════════════════════════════════════
   LOADER
════════════════════════════════════════════════════════ */
#loader {
  position:fixed; inset:0; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  z-index:9999; transition: opacity 1s ease, visibility 1s ease;
}
#loader.hide { opacity:0; visibility:hidden; pointer-events:none; }
#loader-content { position:relative; width:240px; height:240px; display:flex; justify-content:center; align-items:center; }
#logoAnim { position:absolute; inset:0; width:100%; height:100%; transition: opacity .7s ease, transform .7s ease; }
#logoAnim.exit { opacity:0; transform:scale(0.72); }
#welcome {
  position:absolute; font-family:'Nebula',sans-serif; font-size:1.4rem; letter-spacing:.06em;
  color:var(--red); opacity:0; transform:translateY(10px);
  transition: opacity .7s ease, transform .7s ease; text-align:center; white-space:nowrap; pointer-events:none;
}
#welcome.show { opacity:1; transform:translateY(0); }
#loader-bar-wrap { position:absolute; bottom:48px; left:50%; transform:translateX(-50%); width:160px; height:1px; background:var(--red-dim); overflow:hidden; }
#loader-bar { height:100%; width:0%; background:var(--red); box-shadow:0 0 8px var(--red-glow); transition:width linear; }

/* ════════════════════════════════════════════════════════
   SITE
════════════════════════════════════════════════════════ */
#site { opacity:0; transition: opacity 1.2s ease; }
#site.show { opacity:1; }

/* ════════════════════════════════════════════════════════
   HERO / TUBES
════════════════════════════════════════════════════════ */
.hero, #tubes-section {
  position:relative; width:100%; height:var(--hero-height, 100vh); overflow:hidden; background:#171515;
}
#tubesCanvasSection { position:absolute; inset:0; width:100%!important; height:100%!important; z-index:0; pointer-events:none; }
.vignette {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(13,12,12,.82) 100%);
}

/* NAV */
.hero-nav { position:absolute; top:0; left:0; right:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:16px 48px; opacity:0; transform:translateY(-12px); transition: opacity .8s ease, transform .8s ease; }
.hero-nav.show { opacity:1; transform:translateY(0); }
.nav-logo-wrap { width:var(--nav-logo-size); height:var(--nav-logo-size); flex-shrink:0; }
.nav-logo-anim { display:block; width:100%; height:100%; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a { font-family:'OrbitronLight',sans-serif; font-size:.65rem; letter-spacing:var(--nav-letter-spacing); word-spacing:var(--nav-word-spacing); text-transform:uppercase; color:var(--text-muted); text-decoration:none; transition: color .25s ease; }
.nav-links a:hover { color:var(--red); }

/* HERO CONTENT */
.hero-content { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; align-items:center; }

/* ══════════════════════════════════════════════════════
   FORMA DE VIDRO (glassmorphism) atrás do nome
   ► Para aumentar o desfoque: mude blur(20px) abaixo.
     Exemplos: blur(10px) = menos | blur(40px) = mais
════════════════════════════════════════════════════════ */
.name-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s ease;

  position: relative;
  padding: 2.5rem 3.5rem;
  border-radius: 24px;
  background: rgba(13, 12, 12, 0.25);
  backdrop-filter: blur(70px);           /* ◄ DESFOQUE — altere aqui */
  -webkit-backdrop-filter: blur(20px);   /* ◄ DESFOQUE — altere aqui (Safari) */
  border: 1px solid rgba(188, 16, 16, 0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.name-box.show { opacity:1; transform:translateY(0); }

.maycon { font-family:'NebulaBold',sans-serif; font-size:clamp(64px,10vw,120px); line-height:.9; color:var(--red); letter-spacing:var(--maycon-letter-spacing); word-spacing:var(--maycon-word-spacing); text-shadow:0 0 24px var(--red-glow),0 0 64px rgba(188,16,16,.15); animation:glowPulse 3.5s ease-in-out infinite; }
.weslley { font-family:'OrbitronLight',sans-serif; font-size:clamp(16px,2.2vw,30px); letter-spacing:var(--weslley-spacing); word-spacing:var(--weslley-word-spacing); color:var(--red); margin-top:-4px; padding-left:var(--weslley-spacing-comp); opacity:.75; }
.tagline { font-family:'OrbitronLight',sans-serif; font-size:.6rem; letter-spacing:var(--tagline-letter-spacing); word-spacing:var(--tagline-word-spacing); text-transform:uppercase; color:var(--text-muted); margin-top:20px; }
.scroll-hint { position:absolute; bottom:40px; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; animation:fadeIn 1s .5s ease forwards; }
.scroll-line { display:block; width:1px; height:48px; background:linear-gradient(to bottom,var(--red),transparent); animation:scrollPulse 1.8s ease-in-out infinite; }
.scroll-label { font-family:'OrbitronLight',sans-serif; font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-muted); }

/* ════════════════════════════════════════════════════════
   PROJETOS — seção
════════════════════════════════════════════════════════ */
.projetos-section {
  background: var(--bg);
  padding: var(--projetos-padding, 100px) 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Bloco centralizado (texto + carrossel empilhados) */
.carousel-block--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-text--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.proj-label {
  font-family:'OrbitronLight',sans-serif; font-size:.6rem;
  letter-spacing:var(--label-letter-spacing); word-spacing:var(--label-word-spacing);
  text-transform:uppercase; color:var(--red);
  display:block; margin-bottom:12px;
}
.proj-title {
  font-family:'NebulaBold',sans-serif; font-size:clamp(36px,4vw,64px);
  letter-spacing:var(--section-title-letter); word-spacing:var(--section-title-word);
  color:var(--text); line-height:1; margin-bottom:16px;
}

/* Botões de especialidade */
.proj-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.proj-tags .zeph19 { flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════
   CARROSSEL — fade-mask nas bordas + movimento linear
════════════════════════════════════════════════════════ */
.swiper-carousel-wrap {
  width: 100%;
  position: relative;
  /* Máscara gradiente: fades transparentes nas laterais */
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

/* Movimento contínuo linear */
.swiper-carousel-wrap .swiper-wrapper {
  transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
}

.swiper-designer,
.swiper-motion {
  width: 100%;
  padding: 0.5rem 0;
}

/* Item do slide */
.carousel-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(188,16,16,0.18);
  transition: border-color .3s ease;
}
.carousel-item:hover {
  border-color: rgba(188,16,16,0.5);
}

.carousel-item img,
.carousel-item video {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Setas — refeitas do zero */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(188,16,16,0.5);
  background: rgba(13,12,12,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--red);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 0 var(--red-glow);
}
.carousel-btn:hover {
  background: rgba(188,16,16,0.2);
  border-color: var(--red);
  box-shadow: 0 0 14px var(--red-glow);
}
.carousel-btn--prev { left: 10px; }
.carousel-btn--next { right: 10px; }

/* ════════════════════════════════════════════════════════
   SHINY CTA — botões animados dos Projetos
   Font: ExoRegular  |  Cores: identidade visual (#BC1010)
════════════════════════════════════════════════════════ */
@font-face {
  font-family: "ExoRegular";
  src: url("fonts/ExoRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Variáveis — alinhadas com a identidade vermelha */
:root {
  --shiny-cta-bg:               #0d0c0c;   /* fundo do botão */
  --shiny-cta-bg-subtle:        #1e1b1b;   /* borda interna escura */
  --shiny-cta-fg:               #e8e0e0;   /* texto (--text do site) */
  --shiny-cta-highlight:        #BC1010;   /* luz girante vermelha */
  --shiny-cta-highlight-subtle: #ff3a3a;   /* brilho extra no hover */
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

/* BASE — mobile first */
.proj-tags .elementor-button {
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 0.9rem 1.4rem;
  font-family: "ExoRegular", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-cta-fg);
  background:
    linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}

/* Desktop */
@media (min-width: 601px) {
  .proj-tags .elementor-button {
    padding: 1.1rem 2.2rem;
    font-size: 0.95rem;
    cursor: none;
  }
}

/* Pseudo-elementos compartilhados */
.proj-tags .elementor-button::before,
.proj-tags .elementor-button::after,
.proj-tags .elementor-button span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

/* Pontilhado giratório */
.proj-tags .elementor-button::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at var(--position) var(--position),
    #BC1010 calc(var(--position) / 4),
    transparent 0
  ) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black, transparent 10% 90%, black
  );
  border-radius: inherit;
  opacity: 0.35;
}

/* Brilho rotativo inferior */
.proj-tags .elementor-button::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.5;
}

/* Span — necessário para o glow interno */
.proj-tags .elementor-button span {
  z-index: 1;
  position: relative;
}
.proj-tags .elementor-button span::before {
  width: 340px;
  height: 80px;
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
  opacity: 0;
  transition: opacity 1500ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover / focus */
.proj-tags .elementor-button:hover,
.proj-tags .elementor-button:focus-visible {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
}
.proj-tags .elementor-button:hover span::before { opacity: 1; }

/* Keyframes */
@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer         { to { transform: rotate(360deg); } }

/* Animação parada — só roda no hover */
.proj-tags .elementor-button,
.proj-tags .elementor-button::before,
.proj-tags .elementor-button::after {
  animation:
    var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}
.proj-tags .elementor-button:hover,
.proj-tags .elementor-button:hover::before,
.proj-tags .elementor-button:hover::after {
  animation-play-state: running;
}

/* ════════════════════════════════════════════════════════
   CONTATO — botões de link
════════════════════════════════════════════════════════ */
.contato-section { background:var(--bg); padding:var(--contato-padding, 100px) 60px; border-top:1px solid #1e1b1b; }
.contato-inner { max-width:960px; margin:0 auto; text-align:center; }
.contato-row { display:flex; justify-content:center; flex-wrap:wrap; gap:24px; margin-top:60px; }

.botao * { transition:.5s; font-size:14px; font-weight:600; font-family:'OrbitronLight',sans-serif; text-align:center; }
.botao {
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:8px; width:240px; height:60px; border-radius:100px; text-decoration:none;
  background:linear-gradient(104deg,#25d36680 0%,#128C7E 100%);
}
.botao--insta { background:linear-gradient(104deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.botao--yt    { background:linear-gradient(104deg,#ff4e45 0%,#BC1010 100%); }

.container-botao {
  position:relative; display:flex; align-items:center; justify-content:flex-start;
  padding:10px 30px; width:100%; height:100%; border-radius:100px;
  border:1px solid #ffffff30; overflow:hidden;
}
.wrapper-icones {
  display:flex; flex-wrap:nowrap; width:28px; height:28px;
  align-items:center; justify-content:center;
  position:absolute; top:50%; left:10px; transform:translate(0,-50%);
  border-radius:50%; z-index:2;
  background:linear-gradient(#25d366 0%,#128C7E 100%);
  box-shadow:rgba(18,140,126,.3) 0 4px 24px;
}
.wrapper-icones--insta { background:linear-gradient(#f09433 0%,#bc1888 100%); box-shadow:rgba(220,39,67,.3) 0 4px 24px; }
.wrapper-icones--yt    { background:linear-gradient(#ff4e45 0%,#BC1010 100%); box-shadow:rgba(188,16,16,.3) 0 4px 24px; }
.wrapper-icones--wpp   { background:linear-gradient(#25d366 0%,#128C7E 100%); box-shadow:rgba(18,140,126,.3) 0 4px 24px; }

.icone-svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:14px; height:14px; z-index:1; opacity:1; transition:.5s; }
.icone-1 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:6px; height:6px; background:#fff; border-radius:50%; z-index:2; }

.fundo {
  position:absolute; left:0; width:0%; height:80%;
  background:#fff; border-radius:100px;
  box-shadow:rgba(0,0,0,.04) 0 -1px 0,rgba(255,255,255,.25) 0 0 1px inset, rgba(188,16,16,.3) 0 4px 44px,rgba(188,16,16,.2) 0 0 12px inset;
}
.fundo--wpp   { box-shadow:rgba(18,140,126,.3) 0 4px 44px, rgba(37,211,102,.2) 0 0 12px inset; }
.fundo--insta { box-shadow:rgba(220,39,67,.3)  0 4px 44px, rgba(240,148,51,.2)  0 0 12px inset; }
.fundo--yt    { box-shadow:rgba(188,16,16,.3)   0 4px 44px, rgba(255,78,69,.2)   0 0 12px inset; }

.texto-1 { margin-left:28px; color:#fff; font-family:'OrbitronLight',sans-serif; font-size:.65rem; letter-spacing:var(--contact-btn-letter); word-spacing:var(--contact-btn-word); text-transform:uppercase; }
.texto-2 { position:absolute; color:#333; opacity:0; transform:translateX(100%); font-family:'OrbitronLight',sans-serif; font-size:.65rem; letter-spacing:var(--contact-btn-letter); word-spacing:var(--contact-btn-word); text-transform:uppercase; }

.botao:hover .fundo         { width:calc(100% - 35px); height:100%; }
.botao:hover .wrapper-icones{ left:calc(100% - 34px); }
.botao:hover .texto-1       { opacity:0; }
.botao:hover .icone-svg     { opacity:0; }
.botao:hover .icone-1       { opacity:0; }
.botao:hover .texto-2       { opacity:1; transform:translateX(0); }

/* ════════════════════════════════════════════════════════
   SERVIÇOS — zeph buttons
════════════════════════════════════════════════════════ */
.zeph19 {
  position: relative;
  --before-opacity: 1;
  --after-opacity: 0;
}
.zeph19::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--zeph-color-primary), var(--zeph-color-primary-transparent));
  opacity: var(--before-opacity);
  transition: opacity 0.3s;
  pointer-events: none;
  border-radius: 360px;
}
.zeph19::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to left, var(--zeph-color-primary), var(--zeph-color-primary-transparent));
  opacity: var(--after-opacity);
  transition: opacity 0.3s;
  pointer-events: none;
  border-radius: 360px;
}
.zeph20 { position: relative; z-index: 1; }
/* zeph20 — apenas posicionamento; o visual vem do shiny CTA */
.zeph20 .elementor-button {
  --button-translate-x: -10%;
}

/* ════════════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════════════ */
@keyframes glowPulse {
  0%,100% { text-shadow:0 0 20px var(--red-glow),0 0 56px rgba(188,16,16,.12); }
  50%     { text-shadow:0 0 36px rgba(188,16,16,.6),0 0 80px rgba(188,16,16,.22),0 0 120px rgba(188,16,16,.08); }
}
@keyframes scrollPulse {
  0%,100% { transform:scaleY(1);  opacity:.6; }
  50%     { transform:scaleY(.5); opacity:1;  }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ════════════════════════════════════════════════════════
   LUZ DO MOUSE
════════════════════════════════════════════════════════ */
.meio:before, .meio:after {
  content: ""; position: absolute; width: 100%; height: 100%;
  top: 0; left: 0; border-radius: inherit; opacity: 0;
  transition: 0.5s; pointer-events: none;
}
.meio:before {
  background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), #660303, transparent 40%);
  filter: blur(100px); mix-blend-mode: screen; z-index: 3;
}
.meio:hover:before { opacity: 1; }
#bgluz:hover .meio:after { opacity: 1; }

/* ════════════════════════════════════════════════════════
   RESPONSIVO — LARGE DESKTOP (min 1400px)
════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .carousel-block--centered { max-width: 1400px; }
  .contato-inner { max-width: 1100px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVO — TABLET LARGO (max 1200px)
════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .carousel-block--centered { padding: 2rem 1.5rem; }
  .contato-section { padding: 80px 40px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVO — TABLET (max 900px)
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Nav */
  .hero-nav { padding: 12px 24px; }
  .nav-links { gap: 20px; }

  /* Hero */
  .name-box { padding: 2rem 2.5rem; }

  /* Projetos */
  .projetos-section { padding: 80px 0; gap: 60px; }
  .carousel-block--centered { padding: 2rem 1.5rem; gap: 2rem; }
  .carousel-item img,
  .carousel-item video { height: 220px; }

  /* Contato */
  .contato-section { padding: 80px 32px; }
  .contato-row { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .botao { width: 220px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVO — TABLET PEQUENO (max 768px)
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Esconde cursor customizado */
  #cursor { display: none; }
  body { cursor: auto; }

  /* Nav */
  .hero-nav { padding: 10px 20px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: .58rem; letter-spacing: .15em; }

  /* Hero */
  .name-box { padding: 1.8rem 2rem; margin: 0 20px; }
  .maycon  { font-size: clamp(52px, 11vw, 90px); }
  .weslley { font-size: clamp(13px, 2.8vw, 24px); letter-spacing: 30px; padding-left: 30px; }
  .tagline { font-size: .52rem; letter-spacing: .25em; margin-top: 16px; }

  /* Projetos */
  .proj-title { font-size: clamp(30px, 7vw, 56px); }
  .carousel-item img,
  .carousel-item video { height: 200px; }

  /* Botões de tag */
  .proj-tags .elementor-button { padding: 0.9rem 1.6rem; font-size: 0.88rem; }

  /* Contato */
  .contato-section { padding: 70px 24px; }
  .contato-row { gap: 14px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVO — MOBILE (max 600px)
════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Video background: não fixed no mobile (evita bug iOS) */
  .video-background { position: absolute; }
  .video-placeholder { position: absolute; width: 100%; left: 0; top: 0; height: 100%; opacity: .4; }

  /* Nav */
  .hero-nav { padding: 10px 16px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: .55rem; letter-spacing: .12em; }

  /* Loader */
  #loader-content { width: 180px; height: 180px; }

  /* Hero / Nome */
  .name-box {
    padding: 1.75rem 1.5rem;
    border-radius: 16px;
    margin: 0 16px;
  }
  .maycon   { font-size: clamp(48px, 14vw, 80px); }
  .weslley  { font-size: clamp(11px, 3.5vw, 18px); letter-spacing: 16px; padding-left: 16px; }
  .tagline  { font-size: .5rem; letter-spacing: .2em; }
  .scroll-hint { bottom: 24px; }

  /* Projetos */
  .projetos-section { padding: 60px 0; gap: 50px; }
  .carousel-block--centered { padding: 1.5rem 1rem; gap: 1.5rem; }
  .proj-title { font-size: clamp(28px, 8vw, 48px); }

  .carousel-item img,
  .carousel-item video { height: 190px; }

  .carousel-btn { width: 32px; height: 32px; font-size: 1rem; }
  .carousel-btn--prev { left: 4px; }
  .carousel-btn--next { right: 4px; }

  /* Botões de tag */
  .proj-tags { gap: 0.5rem; }
  .proj-tags .elementor-button { padding: 0.75rem 1.2rem; font-size: 0.82rem; }

  /* Contato */
  .contato-section { padding: 60px 16px; }
  .contato-row { flex-direction: column; align-items: center; gap: 12px; }
  .botao { width: 100%; max-width: 300px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVO — MOBILE PEQUENO (max 400px)
════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .name-box { padding: 1.4rem 1.1rem; margin: 0 12px; border-radius: 14px; }
  .maycon   { font-size: clamp(38px, 16vw, 64px); }
  .weslley  { font-size: clamp(9px, 4vw, 14px); letter-spacing: 10px; padding-left: 10px; }
  .tagline  { font-size: .45rem; letter-spacing: .15em; margin-top: 12px; }

  .hero-nav { padding: 8px 12px; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: .5rem; letter-spacing: .08em; }

  .proj-title { font-size: clamp(24px, 9vw, 40px); }
  .carousel-item img,
  .carousel-item video { height: 160px; }

  .botao { max-width: 260px; height: 52px; }
  .texto-1 { font-size: .58rem; }
}