/* ============================================================
   EMERSON BONFIM — Portfolio CSS v3
   Dark Mode Premium | Split Hero | 12-Column Grid
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Montserrat:wght@700;800;900&display=swap');

/* ─── RESET & TOKENS ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --black:      #000000;
  --orange:     #F2780C;
  --red:        #F23E2E;
  --dark-red:   #8C0303;
  --white:      #FFFFFF;
  --gray:       #C0C0C0;
  --gray-dim:   #888888;
  --gray-dark:  #1a1a1a;

  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Inter', Helvetica, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.22s;
  --dur-med:  0.45s;
  --dur-slow: 0.75s;

  --nav-h: 76px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  /* clip corta o scroll horizontal mas não cria stacking context que quebraria o 3D coverflow */
  overflow-x: clip;
  cursor: none;
}

/* scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--orange), var(--red)); border-radius: 2px; }

/* ─── CURSOR ─── */
#cursor-dot {
  position: fixed; top:0; left:0; z-index: 10000;
  width:8px; height:8px; border-radius:50%;
  background: var(--orange);
  pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
  will-change: left,top;
}
#cursor-ring {
  position: fixed; top:0; left:0; z-index:9999;
  width:36px; height:36px; border-radius:50%;
  border: 1.5px solid rgba(242,120,12,.55);
  pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s;
  will-change: left,top;
}
#cursor-canvas { position: fixed; inset:0; z-index:9998; pointer-events: none; width:100%; height:100%; }
body.hov #cursor-dot  { width:12px; height:12px; background:var(--red); }
body.hov #cursor-ring { width:52px; height:52px; border-color:rgba(242,62,46,.45); }

/* ─── SHARED SECTION STYLES ─── */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
}

.section-label { display:flex; align-items:center; gap:14px; font-size:10px; font-weight:600; letter-spacing:.35em; text-transform:uppercase; color:var(--orange); margin-bottom: 20px; }
.section-label::before { content:''; width:28px; height:1px; background:var(--orange); }
.section-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 68px); font-weight: 900; text-transform:uppercase; line-height:.93; letter-spacing:-.02em; color:var(--white); margin-bottom:48px; }
.section-title em { font-style:normal; color:var(--orange); }

/* ─── NAVBAR ─── */
#navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h); width: 100%;
  transition: background var(--dur-med), backdrop-filter var(--dur-med);
}
#navbar.scrolled { background: rgba(0,0,0,.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-container { height: 100%; align-items: center; }
.nav-logo { grid-column: 1 / span 4; display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 28px; width: auto; object-fit: contain; }

.nav-links {
  grid-column: 7 / 12; /* Starts at 7, ends right inside col 11 to perfectly align with right spacing */
  display: flex; align-items: center; justify-content: flex-end; gap: 48px;
}
.nav-link {
  font-size: 14px; font-weight: 500;
  color: var(--white); text-decoration: none;
  transition: color var(--dur-fast);
}
.nav-link.active {
  padding: 8px 32px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50px;
}
.nav-link:not(.active):hover { color: var(--orange); }

/* ─── LANGUAGE SWITCHER ─── */
.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 20px;
  z-index: 950;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: none;
  transition: all var(--dur-fast);
  backdrop-filter: blur(8px);
}
.lang-btn svg { width: 14px; height: 14px; color: var(--gray-dim); transition: color var(--dur-fast); }
.lang-btn:hover { border-color: var(--orange); color: var(--orange); background: rgba(242,120,12,.08); }
.lang-btn:hover svg { color: var(--orange); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: rgba(15,15,15,0.95);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  list-style: none;
  padding: 8px 0;
  min-width: 140px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all var(--dur-fast) var(--ease-out);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lang-switcher:hover .lang-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lang-dropdown li a {
  display: block;
  padding: 10px 20px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: all var(--dur-fast);
}
.lang-dropdown li a:hover {
  background: rgba(255,255,255,0.04);
  color: var(--orange);
  padding-left: 24px;
}

/* ─── GOOGLE TRANSLATE OVERRIDES ─── */
.skiptranslate, #google_translate_element { display: none !important; }
body { top: 0px !important; }
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; } /* Esconde popup balãozinho nativo */

.hamburger { display: none; flex-direction: column; gap:5px; background: none; border: none; cursor: none; padding: 4px; grid-column: 12 / 13; justify-self: end; }
.hamburger span { display:block; width:22px; height:2px; background: var(--white); border-radius:1px; transition: transform var(--dur-fast), opacity var(--dur-fast); }

/* ─── OVERLAY MENU (mobile) ─── */
#overlay-menu { position:fixed; inset:0; z-index:950; background: rgba(0,0,0,.96); backdrop-filter: blur(20px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity var(--dur-med); }
#overlay-menu.open { opacity:1; pointer-events:all; }
.overlay-nav { list-style:none; text-align:center; }
.overlay-nav li { overflow:hidden; margin-bottom:8px; }
.overlay-nav a { display:block; font-family: var(--font-display); font-size: clamp(44px,9vw,90px); font-weight:900; text-transform:uppercase; color: var(--white); text-decoration:none; transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out), color var(--dur-fast); -webkit-text-stroke: 1px transparent; }
#overlay-menu.open .overlay-nav a { transform: translateY(0); }
.overlay-nav li:nth-child(1) a { transition-delay:.05s; }
.overlay-nav li:nth-child(2) a { transition-delay:.10s; }
.overlay-nav li:nth-child(3) a { transition-delay:.15s; }
.overlay-nav li:nth-child(4) a { transition-delay:.20s; }
.overlay-nav a:hover { color:transparent; -webkit-text-stroke:2px var(--orange); }
.overlay-nav a span { font-size:11px; font-family:var(--font-body); color:var(--gray-dim); margin-left:8px; vertical-align:super; -webkit-text-stroke:0; }
#overlay-close { position:absolute; top:24px; right:48px; background:none; border:none; color:var(--gray-dim); font-size:11px; letter-spacing:.2em; text-transform:uppercase; cursor:none; transition: color var(--dur-fast); }
#overlay-close:hover { color:var(--orange); }

/* ─── HERO ─── */
#home {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  overflow: hidden; /* REMOVED display: flex */
}

/* New Vibrant Gradient exactly like Photoshop */
.hero-bg-gradient {
  position: absolute; inset: 0;
  
  z-index: 0;
}

/* Fades the left side nicely so text reads well */
.hero-photo-mask {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--black) 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,0) 55%);
  z-index: 5;
  pointer-events: none;
}

.hero-container {
  height: 100%;
  align-items: stretch; /* Allows grid items to take full height */
  position: relative;
  z-index: 10;
}

.hero-left {
  grid-column: 1 / span 6;
  display: flex;
  align-items: center; /* Vertically centers the text block */
  position: relative; z-index: 10;
  padding-top: var(--nav-h);
}

.hero-text-wrap { max-width: 500px; }
.hero-greeting { font-size: 20px; font-weight: 400; color: var(--white); margin-bottom: 4px; letter-spacing: 0.01em; }
.hero-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(52px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 24px; display: block; }
.hero-name-line { display: block; background: linear-gradient(135deg, var(--orange) 0%, var(--red) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-desc { font-size: 13.5px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.62); margin-bottom: 36px; max-width: 440px; }
.hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hero-right-col {
  grid-column: 7 / 13;
  position: relative; /* Anchors the photo */
  z-index: 1;
}

.hero-photo {
  position: absolute;
  bottom: 0;
  right: 0; /* Aligned exactly to the right edge of col 12 */
  height: 90vh; /* Large, responsive to screen height */
  max-height: 100%; /* Never overflow the container vertically */
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  transform-origin: bottom center;
  filter: drop-shadow(0 0 60px rgba(242,62,46,.15));
}

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--orange), var(--red)); color: var(--white); font-family: var(--font-body); font-size: 13px; font-weight: 600; text-decoration: none; border: none; border-radius: 50px; padding: 14px 30px; cursor: none; box-shadow: 0 0 28px rgba(242,120,12,.3); transition: opacity var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); letter-spacing: 0.03em;
}
.btn-primary:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(242,62,46,.4); }
.btn-primary svg { width:16px; height:16px; flex-shrink:0; }

.btn-secondary {
  display: inline-flex; align-items: center; background: rgba(255,255,255,.06); color: var(--white); font-family: var(--font-body); font-size: 13px; font-weight: 500; text-decoration: none; border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: 14px 30px; cursor: none; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); letter-spacing: 0.03em; backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.4); }

.scroll-cue { position: absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:8px; font-size: 9px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color: var(--gray-dim); }
.scroll-line { width:1px; height:40px; background: linear-gradient(to bottom, var(--orange), transparent); animation: line-anim 2.4s ease-in-out infinite; }
@keyframes line-anim { 0% { transform:scaleY(0); transform-origin:top; opacity:1; } 50% { transform:scaleY(1); transform-origin:top; opacity:1; } 100% { transform:scaleY(0); transform-origin:bottom; opacity:0; } }

/* ─── CASES (SWIPER) ─── */
/* Section não pode ter overflow:hidden pois corta o efeito 3D coverflow */
.section-cases {
  padding: 120px 0 100px;
  border-top: 1px solid rgba(255,255,255,.05);
  overflow: visible;
  position: relative;
}
/* Linha decorativa de separação via pseudo-elemento para não clipar */
.section-cases::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.05);
}

.cases-container {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  margin-bottom: 40px;
}
.cases-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.cases-header .section-label { margin-bottom: 12px; }
.cases-header .section-label::before { display: none; }
.cases-header .section-title { margin-bottom: 0; }

.cases-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 0; }
.case-tag {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--gray-dim);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 9px 22px; border-radius: 50px;
  cursor: none; transition: all var(--dur-fast);
}
.case-tag:hover { border-color: rgba(255,255,255,.5); color: var(--white); }
.case-tag.active {
  background: linear-gradient(135deg, var(--orange), var(--red));
  border-color: transparent; color: var(--white);
  box-shadow: 0 4px 16px rgba(242,120,12,.3);
}
.case-tag-link {
  display: inline-flex; align-items: center;
  padding: 9px 22px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 50px; color: var(--white); font-size: 13px;
  font-weight: 500; text-decoration: none; cursor: none;
  transition: all var(--dur-fast);
}
.case-tag-link:hover { border-color: var(--orange); color: var(--orange); }

/* ── SWIPER WRAPPER ── */
/* Área do carrossel: separa o swiper do container para ter 100% de largura */
.cases-carousel-area {
  width: 100%;
  position: relative;
  padding-bottom: 20px;
}

.cases-swiper {
  width: 100%;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  /* CRÍTICO: overflow visible para o efeito 3D não ser cortado */
  overflow: visible !important;
}

/* Slides: tamanho fixo, respeitando Swiper auto width */
.swiper-slide {
  width: 400px !important;
  height: 540px !important;
  flex-shrink: 0;
  transition: opacity 0.5s ease;
  opacity: 0.45;
}
.swiper-slide.swiper-slide-active { opacity: 1 !important; }
.swiper-slide.swiper-slide-prev,
.swiper-slide.swiper-slide-next { opacity: 0.65 !important; }

/* Card base */
.case-card {
  display: block;
  text-decoration: none;
  width: 100%; height: 100%;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  cursor: none;
  transition: box-shadow var(--dur-med), border var(--dur-med);
}
.swiper-slide-active .case-card {
  box-shadow: 0 30px 90px rgba(242,62,46,0.18), 0 0 0 1px rgba(255,255,255,.12);
}



/* Thumbnail — imagem de fundo */
.case-thumb {
  position: absolute; inset: 0;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.case-card:hover .case-thumb { transform: scale(1.07); }

/* Glow sutil ao hover */
.case-glow {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 90%, rgba(242,120,12,.3), transparent 65%);
  transition: opacity var(--dur-med);
  z-index: 1;
}
.case-card:hover .case-glow { opacity: 1; }

/* Overlay com gradiente — título sempre visível */
.case-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.28) 40%,
    transparent 100%
  );
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 28px;
  /* Sempre visível */
  opacity: 1;
  transition: background 0.4s ease;
}
.case-card:hover .case-overlay {
  background: linear-gradient(to top,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.1) 100%
  );
}

.case-cat {
  font-size: 10px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
.case-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900; text-transform: uppercase;
  color: var(--white); line-height: 1.1;
}

/* Ícone play (apenas para slides com vídeo) */
.play-icon {
  position: absolute; top: 40%; left: 50%;
  transform: translate(-50%, -50%) scale(0.65);
  width: 56px; height: 56px;
  background: rgba(242,120,12,.9); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.4s var(--ease-out);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 32px rgba(242,120,12,.55);
  z-index: 4;
}
.play-icon svg { width: 20px; height: 20px; color: var(--white); margin-left: 3px; }
.case-card:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Navegação */
.cases-navigation {
  display: flex; justify-content: center;
  gap: 16px; margin-top: 16px;
}
.swiper-btn-prev, .swiper-btn-next {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: none; transition: all var(--dur-fast);
  backdrop-filter: blur(8px);
}
.swiper-btn-prev:hover, .swiper-btn-next:hover {
  border-color: var(--orange); color: var(--orange);
  background: rgba(242,120,12,.08);
}
.swiper-btn-prev svg, .swiper-btn-next svg { width: 18px; height: 18px; }

/* ─── SOBRE ─── */
.section-sobre { padding: 130px 0; border-top: 1px solid rgba(255,255,255,.05); }
.sobre-left { grid-column: 1 / span 5; }
.sobre-right { grid-column: 7 / span 6; align-self: center; }
.sobre-counters { display:flex; gap:40px; margin-top:40px; }
.counter { display:flex; flex-direction:column; }
.counter-num { font-family:var(--font-display); font-size: clamp(44px,5vw,68px); font-weight:900; line-height:1; letter-spacing:-.03em; background: linear-gradient(135deg, var(--orange), var(--red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.counter-label { font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dim); margin-top:4px; }
.sobre-right p { font-size:15px; line-height:1.8; color:rgba(255,255,255,.65); font-weight:300; margin-bottom:20px; }
.sobre-right strong { color:var(--white); font-weight:500; }
.sobre-right em { font-style:normal; color:var(--orange); }
.skills-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.skills-tags span { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-dim); border:1px solid rgba(255,255,255,.1); border-radius:4px; padding:7px 14px; transition: border-color var(--dur-fast), color var(--dur-fast); }
.skills-tags span:hover { border-color:var(--orange); color:var(--orange); }

/* ─── CONTATO ─── */
.section-contato { padding: 130px 0 80px; border-top: 1px solid rgba(255,255,255,.05); }
.contato-inner > .section-label, .contato-inner > .contact-heading, .contato-inner > .contact-email, .contato-inner > .social-row { grid-column: 1 / -1; justify-self: center; text-align: center; }
.contact-heading { font-family:var(--font-display); font-size: clamp(44px,7vw,100px); font-weight:900; text-transform:uppercase; line-height:.9; letter-spacing:-.03em; color:var(--white); margin-bottom:32px; }
.contact-heading span { display:block; color:var(--orange); }
.contact-email { display:inline-block; font-size: clamp(14px,2vw,20px); font-weight:300; color:var(--gray-dim); text-decoration:none; border-bottom:1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); margin-bottom:52px; letter-spacing:.04em; }
.contact-email:hover { color:var(--orange); border-color:var(--orange); }
.contact-form { grid-column: 4 / span 6; display:grid; gap:16px; width: 100%; margin:40px auto; text-align:left; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field label { font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dim); }
.form-field input, .form-field textarea { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:13px 16px; color:var(--white); font-family:var(--font-body); font-size:14px; font-weight:300; outline:none; resize:none; transition: border-color var(--dur-fast), background var(--dur-fast); }
.form-field input:focus, .form-field textarea:focus { border-color:var(--orange); background:rgba(242,120,12,.05); }
.form-field textarea { height:130px; }
.contact-form .btn-primary { justify-content:center; width:100%; }
.social-row { display:flex; align-items:center; justify-content:center; gap:28px; margin-top:48px; }
.social-row a { font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dim); text-decoration:none; transition: color var(--dur-fast); }
.social-row a:hover { color:var(--orange); }
.sdivider { width:1px; height:14px; background:rgba(255,255,255,.12); }

/* ─── FOOTER ─── */
footer { border-top:1px solid rgba(255,255,255,.05); padding:28px 60px; display:flex; align-items:center; justify-content:space-between; }
.footer-copy { font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.2); }
.footer-made { font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.18); }
.footer-made em { font-style:normal; color:var(--orange); }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity:0; transform:translateY(36px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(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; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .container { grid-template-columns: repeat(8, 1fr); padding: 0 40px; }
  .nav-logo { grid-column: 1 / span 4; }
  .nav-links { grid-column: 5 / 9; gap: 24px; }
  .hero-left { grid-column: 1 / span 5; }
  .hero-right-col { grid-column: 5 / 9; }
  .hero-photo { right: 0; height: 80vh; }
  .swiper-slide { width: 340px !important; height: 460px !important; }
  .sobre-left, .sobre-right { grid-column: 1 / -1; }
  .contact-form { grid-column: 2 / span 6; }
}

@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; padding: 0 24px; gap: 20px; }
  #navbar .container { display: flex; justify-content: space-between; }
  .nav-logo { grid-column: 1 / -1; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .hero-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
  .hero-left { width: 100%; padding-top: var(--nav-h); }
  .hero-right-col { position: absolute; inset: 0; opacity: 0.3; z-index: 0; grid-column: auto; }
  .hero-photo { right: -20%; height: 100%; }
  .hero-photo-mask { background: linear-gradient(to right, var(--black) 0%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.5) 100%); }
  .swiper-slide { width: 280px !important; height: 380px !important; }
  .section-cases,.section-sobre,.section-contato { padding:80px 0; }
  .contact-form { grid-column: 1 / -1; }
  .form-row { grid-template-columns:1fr; }
  footer { flex-direction:column; gap:10px; text-align:center; padding:20px; }
}

/* =======================================================================
   ESTILOS NATIVOS DO GUTENBERG PARA OS PROJETOS
   ======================================================================= */
.case-content-wrap {
    display: block;
    padding: 60px 0;
    max-width: 1000px;
    margin: 0 auto;
    color: var(--color-text);
}
.case-content-wrap h2, .case-content-wrap h3 {
    color: var(--color-light);
    font-family: var(--font-heading);
    margin-top: 2em;
    margin-bottom: 1em;
}
.case-content-wrap p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 1.5em;
}
.case-content-wrap .wp-block-image img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    width: 100%;
    height: auto;
    margin: 2em 0;
}
.case-content-wrap .wp-block-gallery {
    gap: 20px;
    margin: 3em 0;
}
.case-content-wrap .wp-block-gallery .wp-block-image img {
    margin: 0;
}

/* CORRECAO DO MENU NATIVO (REMOVER BOLINHAS DO LI) */
.nav-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.nav-links li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.nav-links li::before { content: none !important; }
/* MOBILE UX FIXES & TYPOGRAPHY CORRECTIONS */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 24px;
}
.hero-subtitle {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin-bottom: 36px;
  max-width: 440px;
}

@media (max-width: 768px) {
  .hero-right-col { opacity: 0.12 !important; }
  .sobre-counters { flex-direction: row; gap: 16px; align-items: flex-start; justify-content: space-between; width: 100%; flex-wrap: wrap; }
  .contact-heading { font-size: 40px !important; }
  .swiper-slide { width: 300px !important; }
  .section-cases, .section-sobre, .section-contato { padding: 80px 0 60px !important; }
}
/* =======================================================================
   RESETA AS RESTRI��ES DE LARGURA/PADDING DO ELEMENTOR PARA A HOME
   ======================================================================= */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
}
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
    padding: 0 !important;
}
.elementor-widget-wrap {
    padding: 0 !important;
}
.elementor-widget-container {
    margin: 0 !important;
}
/* FIX LOGO CUTOFF WHEN WORDPRESS ADMIN BAR IS PRESENT */
.admin-bar #navbar {
    top: 32px;
}
.case-card {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
.scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 10; }
.scroll-text { font-size: 9px; font-weight: 700; letter-spacing: .25em; color: var(--gray-dim); text-transform: uppercase; }
.scroll-line { width: 1px; height: 32px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }


/* Show elements in Elementor editor regardless of reveal animation */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
}

.hero-bg-gradient {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 75% 50%, rgba(242,62,46,0.6) 0%, rgba(140,3,3,0.8) 35%, var(--black) 70%);
    z-index: 0;
}

/* =======================================================================
   MOBILE RESPONSIVENESS AND OVERFLOW FIXES
   ======================================================================= */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        }\n    .hero-container {
        overflow: visible !important;
    }
    .hero-photo {
        right: -10% !important;
        max-width: 120% !important;
    }
    
.section-cases {
        overflow: hidden !important;
    }
}