/* =========================================
   PORTFÓLIO — ABRAÃO LIMA RIBEIRO
   Dark premium · Preto + Laranja + Glow
   Layout inspirado na referência mobile enviada
   ========================================= */

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

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

:root {
  --bg: #050505;
  --bg-2: #090909;
  --surface: rgba(18, 18, 18, .88);
  --surface-2: rgba(24, 24, 24, .92);

  --orange: #ff7a00;
  --orange-2: #ff6a00;
  --orange-3: #ff9a2f;

  --white: #ffffff;
  --text: rgba(255,255,255,.84);
  --text-soft: rgba(255,255,255,.62);
  --muted: rgba(255,255,255,.42);

  --border: rgba(255,255,255,.10);
  --border-orange: rgba(255,122,0,.45);

  --whatsapp: #25d366;
  --whatsapp-dark: #16b855;

  --blue: #2e8fff;
  --blue-dark: #176ee8;

  --radius: 18px;
  --radius-lg: 24px;
  --container: 1180px;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --orange-shadow: 0 0 40px rgba(255,122,0,.24);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 75% 8%, rgba(255,122,0,.12), transparent 28%),
    radial-gradient(circle at 20% 20%, rgba(255,122,0,.06), transparent 35%),
    #050505;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.grad-text {
  background: linear-gradient(135deg, var(--orange-3), var(--orange-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ANIMAÇÃO */
.reveal-init {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal-init.visible {
  opacity: 1;
  transform: translateY(0);
}

/* BOTÕES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  box-shadow: 0 12px 28px rgba(255,106,0,.35);
}

.btn-primary:hover {
  box-shadow: 0 16px 40px rgba(255,106,0,.48);
}

.btn-outline {
  background: rgba(10,10,10,.58);
  color: #fff;
  border-color: var(--border-orange);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.btn-outline:hover {
  border-color: var(--orange);
  box-shadow: 0 0 24px rgba(255,122,0,.18);
}

.btn-whatsapp {
  background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
  color: #fff;
  box-shadow: 0 12px 28px rgba(37,211,102,.32);
}

.btn-whatsapp:hover {
  box-shadow: 0 18px 40px rgba(37,211,102,.45);
}

.btn-sm {
  min-height: 38px;
  padding: 10px 18px;
  font-size: 13px;
}

.btn-lg {
  min-height: 52px;
  padding: 14px 24px;
  font-size: 15px;
}

.btn-xl {
  min-height: 56px;
  padding: 16px 32px;
  font-size: 16px;
}

.btn-disabled {
  opacity: .35;
  pointer-events: none;
}

/* HEADER */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  background: rgba(5,5,5,.72);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.8px;
  text-decoration: none;
}

.logo span {
  color: var(--orange);
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: color .2s ease;
}

.nav a:hover {
  color: var(--orange);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18,18,18,.8);
  cursor: pointer;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: #fff;
}

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 138px 0 78px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 34%, rgba(255,122,0,.22), transparent 22%),
    radial-gradient(circle at 83% 38%, rgba(255,122,0,.14), transparent 26%),
    linear-gradient(180deg, #050505 0%, #070707 58%, #050505 100%);
}

.hero::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: 8%;
  top: 185px;
  border-radius: 50%;
  border: 2px solid rgba(255,122,0,.55);
  box-shadow:
    0 0 28px rgba(255,122,0,.45),
    inset 0 0 38px rgba(255,122,0,.14);
  opacity: .75;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 240px;
  background: linear-gradient(180deg, transparent, #050505 82%);
  z-index: 2;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.glow-1 {
  width: 500px;
  height: 500px;
  left: -220px;
  top: -120px;
  background: rgba(255,122,0,.18);
}

.glow-2 {
  width: 420px;
  height: 420px;
  right: -160px;
  bottom: 10%;
  background: rgba(255,122,0,.15);
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, .92fr);
  align-items: center;
  gap: 40px;
}

.hero-text {
  position: relative;
  z-index: 5;
  max-width: 610px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 20px;
  padding: 8px 15px;
  border: 1px solid var(--border-orange);
  border-radius: 999px;
  background: rgba(5,5,5,.45);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(255,122,0,.10);
}

.hero .eyebrow::before {
  content: "⚡";
  color: var(--orange);
}

.hero-title {
  max-width: 590px;
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(42px, 5.7vw, 68px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -2.4px;
  text-wrap: balance;
}

.hero-sub {
  max-width: 500px;
  margin-bottom: 28px;
  color: rgba(255,255,255,.72);
  font-size: 17px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 42px;
}

/* Foto no desktop */
.hero-photo {
  position: relative;
  z-index: 4;
  justify-self: end;
  width: min(480px, 100%);
  margin-top: 1px;
}

.hero-photo::before {
  content: "";
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  top: 18%;
  right: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,0,.34), rgba(255,122,0,.08) 48%, transparent 72%);
  filter: blur(8px);
  z-index: -1;
}

.hero-photo-frame {
  position: relative;
  overflow: visible;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  aspect-ratio: auto;
}

.hero-photo-frame::after {
  display: none;
}

.hero-photo-frame img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  object-position: center top;
  border-radius: 0;
  filter: saturate(1.08) contrast(1.08);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
}

.hero-photo-badge {
  display: none;
}

/* Cards pequenos abaixo da hero */
.hero-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 780px;
}

.hero-badge {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(18,18,18,.82);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

.hero-badge-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.hero-badge strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  word-break: normal;
  white-space: normal;
}

.hero-badge-desc {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,.58);
  line-height: 1.45;
}

.hero-badge:nth-child(n+4) {
  display: none;
}

/* SEÇÕES */
.section {
  position: relative;
  padding: 90px 0;
}

.section-alt {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,122,0,.10), transparent 30%),
    #050505;
}

.section-head {
  max-width: 740px;
  margin-bottom: 40px;
}

.section-title {
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -1.4px;
}

.section-lead {
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 16px;
}

/* SERVIÇOS */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.service-card {
  padding: 28px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(18,18,18,.86);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,122,0,.35);
  box-shadow: 0 18px 50px rgba(255,122,0,.14);
}

.service-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 16px;
  background: rgba(255,122,0,.11);
  color: var(--orange);
  font-size: 25px;
}

.service-card h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 8px;
}

.service-card p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
}

/* PROJETOS */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.proj-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    rgba(15,15,15,.95);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 16px 42px rgba(0,0,0,.42);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.proj-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,122,0,.45);
  box-shadow: 0 22px 56px rgba(255,122,0,.16);
}

.proj-card.featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: 24px;
  padding: 20px;
  border-color: rgba(255,122,0,.55);
  box-shadow:
    0 20px 60px rgba(0,0,0,.50),
    0 0 36px rgba(255,122,0,.12);
}

.proj-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background:
    radial-gradient(circle at 70% 35%, rgba(255,122,0,.22), transparent 32%),
    rgba(255,122,0,.08);
  border: 1px solid rgba(255,255,255,.08);
}

.proj-card.featured .proj-media {
  height: 100%;
  min-height: 260px;
  aspect-ratio: auto;
}

.proj-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-media-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 50px;
  opacity: .35;
}

.proj-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 8;
  padding: 7px 13px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 8px 22px rgba(255,106,0,.35);
}

.proj-body {
  display: flex;
  flex-direction: column;
  padding: 20px;
  min-width: 0;
}

.proj-card.featured .proj-body {
  padding: 8px 10px 8px 0;
}

.proj-name {
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.6px;
  margin-bottom: 7px;
}

.proj-card.featured .proj-name {
  font-size: 30px;
}

.proj-desc {
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.58;
  margin-bottom: 16px;
}

.proj-card.featured .proj-desc {
  font-size: 16px;
}

.proj-problem {
  display: block;
  margin: 0 0 18px;
  padding: 17px 18px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,122,0,.18), rgba(255,122,0,.05));
  border: 1px solid rgba(255,122,0,.32);
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.55;
}

.proj-problem strong {
  color: var(--orange-3);
}

.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.proj-tags span {
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(255,122,0,.14);
  border: 1px solid rgba(255,122,0,.26);
  color: #ffb36d;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.proj-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.proj-actions .btn {
  border-radius: 12px;
}

/* JS AutoCar azul */
.proj-card--blue:hover {
  border-color: rgba(46,143,255,.48);
  box-shadow: 0 22px 56px rgba(46,143,255,.15);
}

.proj-card--blue .proj-media {
  background:
    radial-gradient(circle at 70% 35%, rgba(46,143,255,.22), transparent 32%),
    rgba(46,143,255,.08);
}

.proj-card--blue .proj-problem {
  background: linear-gradient(135deg, rgba(46,143,255,.16), rgba(46,143,255,.05));
  border-color: rgba(46,143,255,.32);
}

.proj-card--blue .proj-problem strong {
  color: #62adff;
}

.proj-card--blue .proj-tags span {
  color: #75baff;
  background: rgba(46,143,255,.12);
  border-color: rgba(46,143,255,.28);
}

.proj-card--blue .proj-actions .btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: 0 12px 28px rgba(46,143,255,.34);
}

/* PROCESSO */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.process-card {
  padding: 24px;
  border-radius: 18px;
  background: rgba(18,18,18,.86);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}

.process-num {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.process-card h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
}

.process-card p {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}

/* CTA */
.contact {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 35%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(135deg, #1a0c02 0%, #d95400 45%, #ff7a00 100%);
}

.contact-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.contact-title {
  color: #fff;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.6px;
  margin-bottom: 16px;
}

.contact-sub {
  color: rgba(255,255,255,.82);
  font-size: 17px;
  margin-bottom: 30px;
}

/* FOOTER */
.footer {
  padding: 34px 0;
  background: #050505;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-name {
  display: block;
  color: #fff;
  font-weight: 900;
}

.footer-role {
  display: block;
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 13px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-links a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.footer-links a:hover {
  color: var(--orange);
}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
  color: #fff;
  text-decoration: none;
  box-shadow:
    0 14px 34px rgba(37,211,102,.45),
    0 0 0 8px rgba(37,211,102,.10);
  animation: waPulse 2.4s infinite;
}

.whatsapp-float:hover {
  transform: scale(1.05);
}

.whatsapp-float-text {
  display: none;
}

@keyframes waPulse {
  0% {
    box-shadow:
      0 14px 34px rgba(37,211,102,.45),
      0 0 0 0 rgba(37,211,102,.35);
  }
  70% {
    box-shadow:
      0 14px 34px rgba(37,211,102,.45),
      0 0 0 18px rgba(37,211,102,0);
  }
  100% {
    box-shadow:
      0 14px 34px rgba(37,211,102,.45),
      0 0 0 0 rgba(37,211,102,0);
  }
}

/* TABLET */
@media (max-width: 1024px) {
  .nav,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .header.open .nav {
    display: flex;
    position: absolute;
    top: 76px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 18px;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.10);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE — igual ao conceito da segunda imagem */
@media (max-width: 720px) {
  .container {
    padding: 0 18px;
  }

  .header {
    background: rgba(5,5,5,.78);
  }

  .header-inner {
    height: 78px;
  }

  .logo {
    font-size: 23px;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }

  .hero {
    min-height: 100vh;
    padding: 92px 0 44px;
    background:
      radial-gradient(circle at 80% 27%, rgba(255,122,0,.38), transparent 22%),
      radial-gradient(circle at 92% 35%, rgba(255,122,0,.16), transparent 28%),
      linear-gradient(180deg, #050505 0%, #080808 54%, #050505 100%);
  }

  .hero::before {
    width: 178px;
    height: 178px;
    top: 202px;
    right: -12px;
    opacity: .9;
  }

  .hero::after {
    height: 140px;
  }

  .hero-inner {
    position: relative;
    display: block;
    min-height: 650px;
  }

  .hero-text {
    position: relative;
    z-index: 5;
    max-width: 62%;
    padding-top: 22px;
  }

  .hero .eyebrow {
    max-width: 300px;
    margin-bottom: 18px;
    padding: 7px 11px;
    font-size: 9.5px;
    line-height: 1.1;
    letter-spacing: .45px;
    white-space: nowrap;
  }

  .hero-title {
    max-width: 260px;
    margin-bottom: 15px;
    font-size: clamp(31px, 8.6vw, 38px);
    line-height: 1.11;
    letter-spacing: -1.5px;
  }

  .hero-sub {
    max-width: 235px;
    margin-bottom: 23px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,.74);
  }

  .hero-actions {
    width: min(350px, 92vw);
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 32px;
  }

  .hero-actions .btn {
    min-height: 47px;
    padding: 12px 15px;
    font-size: 12.5px;
    border-radius: 11px;
  }

  .hero-actions .btn-whatsapp,
  .hero-actions .btn-primary:first-child {
    background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
    box-shadow: 0 12px 26px rgba(37,211,102,.30);
  }

  .hero-actions .btn-outline {
    background: rgba(8,8,8,.58);
    border-color: rgba(255,122,0,.72);
  }

  .hero-photo {
    position: absolute;
    z-index: 3;
    top: 22px;
    right: -86px;
    width: 78%;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  .hero-photo::before {
    width: 70%;
    top: 21%;
    right: 13%;
    opacity: .9;
  }

  .hero-photo-frame img {
    width: 100%;
    height: auto;
    max-height: 510px;
    object-fit: contain;
    object-position: center top;
    filter: saturate(1.08) contrast(1.08) brightness(.98);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  }

  .hero-photo-badge {
    display: none;
  }

  .hero-badges {
    position: relative;
    z-index: 6;
    width: 100%;
    margin-top: 84px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .hero-badge {
    min-height: 126px;
    padding: 13px 11px;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    border-radius: 15px;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.28;
    white-space: normal;
    background:
      linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
      rgba(18,18,18,.88);
    border-color: rgba(255,255,255,.13);
  }

  .hero-badge::before {
    display: block;
    margin-bottom: 12px;
    color: var(--orange);
    font-size: 25px;
    line-height: 1;
  }

  .hero-badge:nth-child(1)::before {
    content: "▭";
  }

  .hero-badge:nth-child(2)::before {
    content: "</>";
  }

  .hero-badge:nth-child(3)::before {
    content: "◔";
  }

  .section {
    padding: 58px 0;
  }

  .section-head {
    margin-bottom: 24px;
  }

  .section-head .eyebrow {
    font-size: 10px;
    letter-spacing: .7px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--orange);
  }

  .section-title {
    font-size: 28px;
  }

  .section-lead {
    font-size: 14px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-card {
    padding: 22px;
  }

  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .proj-card.featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .proj-card.featured .proj-media {
    min-height: 188px;
    border-radius: 13px;
  }

  .proj-card.featured .proj-body {
    padding: 2px 0;
  }

  .proj-card.featured .proj-name {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .proj-card.featured .proj-desc {
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 9px;
  }

  .proj-card.featured .proj-problem {
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 11.5px;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .proj-card.featured .proj-tags {
    gap: 6px;
    margin-bottom: 10px;
  }

  .proj-card.featured .proj-tags span {
    padding: 5px 8px;
    font-size: 9.5px;
    border-radius: 7px;
  }

  .proj-card.featured .proj-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .proj-card.featured .proj-actions .btn {
    min-height: 40px;
    padding: 9px 8px;
    font-size: 11px;
    border-radius: 10px;
  }

  .proj-badge {
    top: 11px;
    left: 11px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 9.5px;
  }

  .proj-card:not(.featured) {
    min-height: 180px;
    border-radius: 14px;
  }

  .proj-card:not(.featured) .proj-media {
    aspect-ratio: 1.25 / .82;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }

  .proj-card:not(.featured) .proj-body {
    padding: 10px;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 12.5px;
    line-height: 1.2;
    margin-bottom: 3px;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 10.5px;
    line-height: 1.3;
    margin-bottom: 0;
  }

  .proj-card:not(.featured) .proj-problem,
  .proj-card:not(.featured) .proj-tags,
  .proj-card:not(.featured) .proj-actions {
    display: none;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .contact {
    margin: 0 18px 48px;
    padding: 34px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,122,0,.45);
    box-shadow: 0 20px 60px rgba(255,122,0,.16);
  }

  .contact-title {
    font-size: 27px;
  }

  .contact-sub {
    font-size: 14px;
  }

  .footer {
    padding: 24px 0 36px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }

  .whatsapp-float {
    width: 58px;
    height: 58px;
    right: 18px;
    bottom: 18px;
  }
}

/* MOBILE PEQUENO */
@media (max-width: 380px) {
  .container {
    padding: 0 16px;
  }

  .hero-text {
    max-width: 64%;
  }

  .hero-photo {
    right: -92px;
    width: 82%;
  }

  .hero-title {
    font-size: 30px;
  }

  .hero-sub {
    font-size: 13px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-badges {
    margin-top: 54px;
  }

  .hero-badge {
    min-height: 116px;
    font-size: 11.5px;
    padding: 11px 9px;
  }

  .proj-card.featured {
    grid-template-columns: 1fr;
  }

  .proj-card.featured .proj-media {
    min-height: 190px;
  }
}

/* DESKTOP GRANDE — regras movidas para o bloco final */

/* ============================================================
   AJUSTE FINAL MOBILE — HERO IGUAL AO MOCKUP DE REFERÊNCIA
   Cole este bloco NO FINAL do portfolio.css
   ============================================================ */

@media (max-width: 720px) {
  body {
    background: #050505;
  }

  .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* HEADER */
  .header {
    background: rgba(5, 5, 5, .92);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .header-inner {
    height: 82px;
  }

  .logo {
    font-size: 24px;
    font-weight: 900;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(20, 20, 20, .75);
    border: 1px solid rgba(255, 255, 255, .18);
  }

  .nav-toggle span {
    width: 23px;
    height: 2px;
  }

  /* HERO GERAL */
  .hero {
    min-height: 100vh;
    padding: 104px 0 48px;
    overflow: hidden;
    background:
      radial-gradient(circle at 80% 29%, rgba(255, 122, 0, .32), transparent 20%),
      radial-gradient(circle at 95% 38%, rgba(255, 122, 0, .16), transparent 28%),
      linear-gradient(180deg, #050505 0%, #0b0704 42%, #050505 100%);
  }

  .hero::before {
    width: 180px;
    height: 180px;
    top: 200px;
    right: -18px;
    opacity: .9;
    border: 2px solid rgba(255, 122, 0, .65);
    box-shadow:
      0 0 26px rgba(255, 122, 0, .55),
      inset 0 0 34px rgba(255, 122, 0, .14);
  }

  .hero::after {
    height: 180px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(5, 5, 5, .72) 46%,
      #050505 100%
    );
  }

  .hero-inner {
    position: relative;
    display: block;
    min-height: 640px;
  }

  /* TEXTO DA HERO */
  .hero-text {
    position: relative;
    z-index: 8;
    max-width: 68%;
    padding-top: 26px;
    text-align: left;
  }

  .hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: none;
    width: max-content;
    margin-bottom: 18px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 0, .72);
    background: rgba(5, 5, 5, .55);
    color: #fff;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .35px;
    white-space: nowrap;
    box-shadow: 0 0 22px rgba(255, 122, 0, .14);
  }

  .hero-title {
    max-width: 270px;
    margin-bottom: 16px;
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -1.6px;
    color: #fff;
  }

  .hero-title .grad-text {
    display: inline;
    background: linear-gradient(135deg, #ff9a2f, #ff6a00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero-sub {
    max-width: 260px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
  }

  /* BOTÕES DA HERO — SEM EMPILHAR */
  .hero-actions {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 350px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
  }

  .hero-actions .btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 900;
  }

  .hero-actions .btn:first-child {
    flex: 1.06;
    background: linear-gradient(135deg, #25d366, #16b855);
    color: #fff;
    border: none;
    box-shadow: 0 12px 28px rgba(37, 211, 102, .34);
  }

  .hero-actions .btn-outline {
    flex: .84;
    background: rgba(8, 8, 8, .62);
    border: 1px solid rgba(255, 122, 0, .78);
    color: #fff;
    box-shadow: none;
  }

  /* FOTO INTEGRADA NA DIREITA */
  .hero-photo {
    position: absolute;
    z-index: 4;
    top: 34px;
    right: -98px;
    width: 82%;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  .hero-photo::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 72%;
    aspect-ratio: 1;
    top: 19%;
    right: 13%;
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(255, 122, 0, .42), rgba(255, 122, 0, .12) 48%, transparent 72%);
    filter: blur(8px);
  }

  .hero-photo-frame {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
  }

  .hero-photo-frame::after {
    display: none !important;
  }

  .hero-photo-frame img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    object-position: center top;
    border-radius: 0 !important;
    filter: saturate(1.08) contrast(1.08) brightness(.97);
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 74%,
      rgba(0, 0, 0, .75) 84%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 74%,
      rgba(0, 0, 0, .75) 84%,
      transparent 100%
    );
  }

  .hero-photo-badge {
    display: none !important;
  }

  /* CARDS DA HERO */
  .hero-badges {
    position: relative;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-top: 66px;
  }

  .hero-badge {
    position: relative;
    min-height: 126px;
    padding: 16px 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    border-radius: 16px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
      rgba(18, 18, 18, .94);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .32);

    color: #fff;
    font-size: 0;
    line-height: 1.25;
    white-space: normal;
    overflow: hidden;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  .hero-badge::before {
    display: block;
    margin-bottom: 16px;
    color: #ff7a00;
    font-size: 31px;
    line-height: 1;
    font-weight: 400;
  }

  .hero-badge:nth-child(1)::before {
    content: "▭";
  }

  .hero-badge:nth-child(2)::before {
    content: "</>";
    font-size: 25px;
    font-weight: 900;
  }

  .hero-badge:nth-child(3)::before {
    content: "◔";
  }

  .hero-badge:nth-child(1)::after {
    content: "Sites\A profissionais\A \A Design moderno e\A alta conversão";
  }

  .hero-badge:nth-child(2)::after {
    content: "Sistemas\A web\A \A Soluções completas\A e escaláveis";
  }

  .hero-badge:nth-child(3)::after {
    content: "Automações\A WhatsApp\A \A Atendimento 24/7\A e mais vendas";
  }

  .hero-badge::after {
    white-space: pre-line;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.32;
  }

  .hero-badge:nth-child(1)::after,
  .hero-badge:nth-child(2)::after,
  .hero-badge:nth-child(3)::after {
    color: rgba(255, 255, 255, .72);
  }
}

/* AJUSTE PARA CELULAR PEQUENO — NÃO EMPILHAR BOTÕES */
@media (max-width: 380px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero {
    padding-top: 100px;
  }

  .hero-text {
    max-width: 69%;
  }

  .hero-title {
    max-width: 255px;
    font-size: 30px;
  }

  .hero-sub {
    max-width: 245px;
    font-size: 13.3px;
  }

  .hero-photo {
    top: 42px;
    right: -106px;
    width: 86%;
  }

  .hero-actions {
    flex-direction: row !important;
    gap: 10px;
    max-width: 330px;
  }

  .hero-actions .btn {
    min-height: 46px;
    padding-left: 13px;
    padding-right: 13px;
    font-size: 12px;
  }

  .hero-badges {
    margin-top: 58px;
    gap: 9px;
  }

  .hero-badge {
    min-height: 118px;
    padding: 13px 9px;
  }

  .hero-badge::after {
    font-size: 10.2px;
  }
}

/* ============================================================
   CORREÇÃO DEFINITIVA — HERO + FUNDO + CARDS + PROJETOS MOBILE
   Cole no FINAL do portfolio.css
   ============================================================ */

@media (max-width: 720px) {

  /* BASE */
  body {
    background: #050505 !important;
    overflow-x: hidden !important;
  }

  .container {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* HEADER */
  .header {
    background: rgba(5, 5, 5, .94) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  .header-inner {
    height: 82px !important;
  }

  .logo {
    font-size: 24px !important;
    font-weight: 900 !important;
  }

  .nav-toggle {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(18,18,18,.85) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
  }

  /* HERO FUNDO MAIS PRETO, MENOS MARROM */
  .hero {
    min-height: 100vh !important;
    padding: 104px 0 42px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 82% 28%, rgba(255,122,0,.22), transparent 18%),
      radial-gradient(circle at 92% 36%, rgba(255,122,0,.10), transparent 28%),
      linear-gradient(180deg, #050505 0%, #060606 48%, #050505 100%) !important;
  }

  .hero::before {
    content: "" !important;
    position: absolute !important;
    width: 180px !important;
    height: 180px !important;
    top: 198px !important;
    right: -18px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,122,0,.62) !important;
    box-shadow:
      0 0 26px rgba(255,122,0,.48),
      inset 0 0 28px rgba(255,122,0,.12) !important;
    opacity: .88 !important;
    z-index: 1 !important;
  }

  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        rgba(5,5,5,.96) 34%,
        rgba(5,5,5,.48) 58%,
        rgba(5,5,5,.20) 100%
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 68%,
        #050505 100%
      ) !important;
  }

  .hero-inner {
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    min-height: 635px !important;
  }

  /*
    IMPORTANTE:
    isso solta os cards de dentro da coluna esquerda.
    Sem isso, os 3 cards ficam pequenos e presos no texto.
  */
  .hero-text {
    display: contents !important;
  }

  /* TEXTO DA HERO */
  .hero .eyebrow {
    position: relative !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: max-content !important;
    max-width: calc(100vw - 44px) !important;
    margin: 18px 0 18px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,122,0,.75) !important;
    background: rgba(5,5,5,.62) !important;
    color: #fff !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .35px !important;
    white-space: nowrap !important;
    box-shadow: 0 0 22px rgba(255,122,0,.13) !important;
  }

  .hero-title {
    position: relative !important;
    z-index: 10 !important;
    max-width: 270px !important;
    margin: 0 0 16px !important;
    font-size: 32px !important;
    line-height: 1.08 !important;
    letter-spacing: -1.6px !important;
    color: #fff !important;
    text-align: left !important;
  }

  .hero-title .grad-text {
    background: linear-gradient(135deg, #ff9a2f, #ff6a00) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
  }

  .hero-sub {
    position: relative !important;
    z-index: 10 !important;
    max-width: 260px !important;
    margin: 0 0 24px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  /* BOTÕES LADO A LADO */
  .hero-actions {
    position: relative !important;
    z-index: 12 !important;
    width: 100% !important;
    max-width: 350px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 44px !important;
  }

  .hero-actions .btn {
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  .hero-actions .btn:first-child {
    flex: 1.08 !important;
    background: linear-gradient(135deg, #25d366, #16b855) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(37,211,102,.34) !important;
  }

  .hero-actions .btn-outline {
    flex: .88 !important;
    background: rgba(8,8,8,.68) !important;
    border: 1px solid rgba(255,122,0,.78) !important;
    color: #fff !important;
  }

  /* FOTO MAIS IGUAL À REFERÊNCIA */
  .hero-photo {
    position: absolute !important;
    z-index: 6 !important;
    top: 56px !important;
    right: -92px !important;
    width: 82% !important;
    max-width: none !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .hero-photo::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 70% !important;
    aspect-ratio: 1 !important;
    top: 24% !important;
    right: 12% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255,122,0,.32), rgba(255,122,0,.10) 48%, transparent 72%) !important;
    filter: blur(8px) !important;
  }

  .hero-photo-frame {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
  }

  .hero-photo-frame::after,
  .hero-photo-badge {
    display: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 0 !important;
    filter: saturate(1.08) contrast(1.08) brightness(.94) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.65) 84%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.65) 84%,
      transparent 100%
    ) !important;
  }

  /* CARDS DA HERO — AGORA OCUPAM A LARGURA TODA */
  .hero-badges {
    position: relative !important;
    z-index: 14 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 74px 0 0 !important;
  }

  .hero-badge {
    position: relative !important;
    min-height: 126px !important;
    padding: 16px 12px 14px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      rgba(18,18,18,.94) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.34) !important;
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden !important;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  .hero-badge::before {
    display: block !important;
    margin-bottom: 14px !important;
    color: #ff7a00 !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  .hero-badge:nth-child(1)::before {
    content: "▭";
  }

  .hero-badge:nth-child(2)::before {
    content: "</>";
    font-size: 25px !important;
    font-weight: 900 !important;
  }

  .hero-badge:nth-child(3)::before {
    content: "◔";
  }

  .hero-badge:nth-child(1)::after {
    content: "Sites\A profissionais\A\A Design moderno\A e alta conversão";
  }

  .hero-badge:nth-child(2)::after {
    content: "Sistemas\A web\A\A Soluções completas\A e escaláveis";
  }

  .hero-badge:nth-child(3)::after {
    content: "Automações\A WhatsApp\A\A Atendimento 24/7\A e mais vendas";
  }

  .hero-badge::after {
    white-space: pre-line !important;
    color: rgba(255,255,255,.74) !important;
    font-size: 10.8px !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
  }

  /* PROJETOS — AJUSTE IGUAL AO MOCKUP */
  #projetos {
    padding-top: 36px !important;
    background: #050505 !important;
  }

  #projetos .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #projetos .section-head {
    margin-bottom: 16px !important;
  }

  #projetos .eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .3px !important;
  }

  #projetos .eyebrow::before {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ff7a00 !important;
    display: inline-block !important;
  }

  #projetos .section-title,
  #projetos .section-lead {
    display: none !important;
  }

  .projects-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .proj-card.featured {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
      rgba(8,8,8,.96) !important;
    border: 1px solid rgba(255,122,0,.62) !important;
    box-shadow:
      0 18px 48px rgba(0,0,0,.55),
      0 0 24px rgba(255,122,0,.10) !important;
  }

  .proj-card.featured .proj-media {
    min-height: 188px !important;
    height: 100% !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    overflow: hidden !important;
  }

  .proj-card.featured .proj-media img {
    object-fit: cover !important;
    object-position: center !important;
  }

  .proj-card.featured .proj-body {
    padding: 2px 0 !important;
  }

  .proj-card.featured .proj-name {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
    margin-bottom: 4px !important;
  }

  .proj-card.featured .proj-desc {
    color: rgba(255,255,255,.72) !important;
    font-size: 12.5px !important;
    line-height: 1.48 !important;
    margin-bottom: 9px !important;
  }

  .proj-card.featured .proj-problem {
    padding: 11px 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255,122,0,.05), rgba(255,122,0,.05)) !important;
    border: 1px solid rgba(255,122,0,.05) !important;
    font-size: 11.5px !important;
    line-height: 1.42 !important;
    margin-bottom: 10px !important;
  }

  .proj-card.featured .proj-tags {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .proj-card.featured .proj-tags span {
    padding: 5px 8px !important;
    border-radius: 7px !important;
    font-size: 9.5px !important;
  }

  .proj-card.featured .proj-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .proj-card.featured .proj-actions .btn {
    min-height: 40px !important;
    padding: 8px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  .proj-badge {
    top: 11px !important;
    left: 11px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 9.5px !important;
  }

  .proj-card:not(.featured) {
    min-height: 176px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
      rgba(10,10,10,.96) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    overflow: hidden !important;
  }

  .proj-card:not(.featured) .proj-media {
    aspect-ratio: 1.24 / .82 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .proj-card:not(.featured) .proj-media img {
    object-fit: cover !important;
    object-position: center !important;
  }

  .proj-card:not(.featured) .proj-body {
    padding: 10px !important;
  }

  .proj-card:not(.featured) .proj-name {
    color: #fff !important;
    font-size: 12.5px !important;
    line-height: 1.18 !important;
    margin-bottom: 3px !important;
  }

  .proj-card:not(.featured) .proj-desc {
    color: rgba(255,255,255,.58) !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .proj-card:not(.featured) .proj-problem,
  .proj-card:not(.featured) .proj-tags,
  .proj-card:not(.featured) .proj-actions {
    display: none !important;
  }
}

/* CELULAR PEQUENO — MANTÉM LAYOUT IGUAL, SEM EMPILHAR */
@media (max-width: 380px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-text {
    display: contents !important;
  }

  .hero-title {
    max-width: 260px !important;
    font-size: 30px !important;
  }

  .hero-sub {
    max-width: 248px !important;
    font-size: 13.3px !important;
  }

  .hero-photo {
    top: 62px !important;
    right: -102px !important;
    width: 86% !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    max-width: 335px !important;
  }

  .hero-actions .btn {
    min-height: 46px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12px !important;
  }

  .hero-badges {
    margin-top: 60px !important;
    gap: 10px !important;
  }

  .hero-badge {
    min-height: 118px !important;
    padding: 13px 9px !important;
  }

  .hero-badge::after {
    font-size: 10px !important;
  }

  .proj-card.featured {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr) !important;
  }
}

/* ============================================================
   AJUSTE FINAL — BOTÕES HERO + CARDS DE SERVIÇOS MOBILE
   Cole no FINAL do portfolio.css
   ============================================================ */

@media (max-width: 720px) {
  /* Reduz a altura da hero para os projetos subirem mais */
  .hero {
    min-height: auto !important;
    padding-top: 102px !important;
    padding-bottom: 34px !important;
  }

  .hero-inner {
    min-height: 575px !important;
  }

  /* Ajusta a área dos textos */
  .hero .eyebrow {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  .hero-title {
    max-width: 270px !important;
    margin-bottom: 15px !important;
    font-size: 31px !important;
    line-height: 1.08 !important;
  }

  .hero-sub {
    max-width: 255px !important;
    margin-bottom: 20px !important;
    font-size: 13.4px !important;
    line-height: 1.52 !important;
  }

  /* Foto um pouco mais para trás, sem brigar com os botões */
  .hero-photo {
    top: 58px !important;
    right: -104px !important;
    width: 84% !important;
    opacity: .96 !important;
  }

  .hero-photo-frame img {
    max-height: 475px !important;
    filter: saturate(1.08) contrast(1.08) brightness(.92) !important;
  }

  /* BOTÕES — menores e alinhados como o mockup */
  .hero-actions {
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    max-width: 322px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 34px !important;
  }

  .hero-actions .btn {
    min-width: 0 !important;
    min-height: 43px !important;
    height: 43px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .hero-actions .btn-whatsapp,
  .hero-actions .btn:first-child {
    flex: 1.05 1 0 !important;
    background: linear-gradient(135deg, #25d366, #16b855) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(37,211,102,.34) !important;
  }

  .hero-actions .btn-outline {
    flex: .85 1 0 !important;
    background: rgba(8,8,8,.68) !important;
    border: 1px solid rgba(255,122,0,.82) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  /* CARDS ABAIXO DOS BOTÕES — corrigidos */
  .hero-badges {
    position: relative !important;
    z-index: 22 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-badge {
    position: relative !important;
    min-height: 112px !important;
    height: 112px !important;
    padding: 12px 10px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      rgba(18,18,18,.94) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.34) !important;
    overflow: hidden !important;

    /* Esconde texto original do HTML */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  /* Remove conflitos antigos */
  .hero-badge::before,
  .hero-badge::after {
    position: static !important;
  }

  /* Ícones */
  .hero-badge::before {
    display: block !important;
    margin: 0 0 10px !important;
    color: #ff7a00 !important;
    line-height: 1 !important;
  }

  .hero-badge:nth-child(1)::before {
    content: "" !important;
    width: 28px !important;
    height: 22px !important;
    border: 3px solid #ff7a00 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 5px 0 rgba(255,122,0,.18) !important;
  }

  .hero-badge:nth-child(2)::before {
    content: "</>" !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
  }

  .hero-badge:nth-child(3)::before {
    content: "◔" !important;
    font-size: 27px !important;
    font-weight: 900 !important;
  }

  /* Textos dos cards */
  .hero-badge:nth-child(1)::after {
    content: "Sites\A profissionais\A\A Design moderno\A e alta conversão" !important;
  }

  .hero-badge:nth-child(2)::after {
    content: "Sistemas\A web\A\A Soluções completas\A e escaláveis" !important;
  }

  .hero-badge:nth-child(3)::after {
    content: "Automações\A WhatsApp\A\A Atendimento 24/7\A e mais vendas" !important;
  }

  .hero-badge::after {
    display: block !important;
    white-space: pre-line !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 10.2px !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
  }

  /* Dá mais peso visual nas duas primeiras linhas */
  .hero-badge:nth-child(1)::after,
  .hero-badge:nth-child(2)::after,
  .hero-badge:nth-child(3)::after {
    text-shadow: 0 0 0 #fff !important;
  }
}

/* Ajuste fino para telas bem estreitas, tipo 360px */
@media (max-width: 380px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero {
    padding-top: 100px !important;
    padding-bottom: 30px !important;
  }

  .hero-inner {
    min-height: 560px !important;
  }

  .hero-title {
    max-width: 255px !important;
    font-size: 29px !important;
  }

  .hero-sub {
    max-width: 248px !important;
    font-size: 13px !important;
  }

  .hero-photo {
    top: 64px !important;
    right: -112px !important;
    width: 88% !important;
  }

  .hero-actions {
    max-width: 320px !important;
    gap: 9px !important;
    margin-bottom: 30px !important;
  }

  .hero-actions .btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }

  .hero-badges {
    gap: 9px !important;
  }

  .hero-badge {
    height: 108px !important;
    min-height: 108px !important;
    padding: 11px 8px !important;
  }

  .hero-badge::after {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  .hero-badge:nth-child(1)::before {
    width: 25px !important;
    height: 20px !important;
  }

  .hero-badge:nth-child(2)::before {
    font-size: 20px !important;
  }

  .hero-badge:nth-child(3)::before {
    font-size: 24px !important;
  }
}

/* ============================================================
   CORREÇÃO FINAL MOBILE — CARDS HERO + PROJETOS COMPACTOS
   Cole este bloco no FINAL do portfolio.css
   ============================================================ */

@media (max-width: 720px) {

  /* Remove a seção de serviços no mobile para os projetos subirem */
  #servicos {
    display: none !important;
  }

  /* HERO mais compacta */
  .hero {
    min-height: auto !important;
    padding-top: 104px !important;
    padding-bottom: 28px !important;
    background:
      radial-gradient(circle at 86% 30%, rgba(255,122,0,.20), transparent 22%),
      radial-gradient(circle at 96% 38%, rgba(255,122,0,.10), transparent 28%),
      linear-gradient(180deg, #050505 0%, #060606 58%, #050505 100%) !important;
  }

  .hero-inner {
    min-height: 565px !important;
    display: block !important;
    position: relative !important;
  }

  .hero-text {
    display: contents !important;
  }

  .hero::after {
    background:
      linear-gradient(90deg, #050505 0%, rgba(5,5,5,.95) 35%, rgba(5,5,5,.38) 70%, rgba(5,5,5,.10) 100%),
      linear-gradient(180deg, transparent 0%, transparent 72%, #050505 100%) !important;
  }

  /* Foto */
  .hero-photo {
    top: 62px !important;
    right: -104px !important;
    width: 84% !important;
    z-index: 6 !important;
  }

  .hero-photo-frame img {
    max-height: 465px !important;
    filter: saturate(1.08) contrast(1.08) brightness(.92) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.65) 84%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.65) 84%, transparent 100%) !important;
  }

  /* Texto */
  .hero .eyebrow {
    margin: 16px 0 16px !important;
    font-size: 9.3px !important;
    padding: 7px 12px !important;
    max-width: calc(100vw - 44px) !important;
  }

  .hero-title {
    max-width: 270px !important;
    margin-bottom: 15px !important;
    font-size: 31px !important;
    line-height: 1.08 !important;
  }

  .hero-sub {
    max-width: 258px !important;
    margin-bottom: 19px !important;
    font-size: 13.4px !important;
    line-height: 1.52 !important;
  }

  /* Botões menores e na posição certa */
  .hero-actions {
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    max-width: 322px !important;
    display: grid !important;
    grid-template-columns: 1.05fr .85fr !important;
    gap: 10px !important;
    margin: 0 0 36px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .hero-actions .btn-whatsapp,
  .hero-actions .btn:first-child {
    background: linear-gradient(135deg, #25d366, #16b855) !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(37,211,102,.34) !important;
  }

  .hero-actions .btn-outline {
    background: rgba(8,8,8,.70) !important;
    border: 1px solid rgba(255,122,0,.82) !important;
    box-shadow: none !important;
  }

  /* Cards abaixo dos botões — estilo igual referência */
  .hero-badges {
    position: relative !important;
    z-index: 22 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-badge {
    height: 124px !important;
    min-height: 124px !important;
    padding: 14px 11px 12px !important;
    border-radius: 15px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      rgba(18,18,18,.94) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.34) !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  .hero-badge::before,
  .hero-badge::after {
    position: static !important;
  }

  .hero-badge::before {
    display: block !important;
    margin: 0 0 12px !important;
    color: #ff7a00 !important;
    line-height: 1 !important;
  }

  .hero-badge:nth-child(1)::before {
    content: "" !important;
    width: 29px !important;
    height: 23px !important;
    border: 3px solid #ff7a00 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 6px 0 rgba(255,122,0,.17) !important;
  }

  .hero-badge:nth-child(2)::before {
    content: "</>" !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
  }

  .hero-badge:nth-child(3)::before {
    content: "◔" !important;
    font-size: 28px !important;
    font-weight: 900 !important;
  }

  .hero-badge:nth-child(1)::after {
    content: "Sites\A profissionais\A\A Design moderno\A e alta conversão" !important;
  }

  .hero-badge:nth-child(2)::after {
    content: "Sistemas\A web\A\A Soluções completas\A e escaláveis" !important;
  }

  .hero-badge:nth-child(3)::after {
    content: "Automações\A WhatsApp\A\A Atendimento 24/7\A e mais vendas" !important;
  }

  .hero-badge::after {
    display: block !important;
    white-space: pre-line !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 10.2px !important;
    font-weight: 650 !important;
    line-height: 1.22 !important;
  }

  /* =========================================
     PROJETOS COMPACTOS IGUAL À SEGUNDA FOTO
     ========================================= */

  #projetos {
    display: block !important;
    padding: 28px 0 44px !important;
    background: #050505 !important;
  }

  #projetos .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #projetos .section-head {
    margin: 0 0 14px !important;
  }

  #projetos .eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .2px !important;
  }

  #projetos .eyebrow::before {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ff7a00 !important;
    flex: 0 0 auto !important;
  }

  #projetos .eyebrow {
    font-size: 0 !important;
  }

  #projetos .eyebrow::after {
    content: "PROJETOS DESENVOLVIDOS" !important;
    font-size: 13px !important;
    color: #fff !important;
  }

  #projetos .section-title,
  #projetos .section-lead {
    display: none !important;
  }

  .projects-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Card grande Day Lanches */
  .proj-card.featured {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: .92fr 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
      rgba(8,8,8,.98) !important;
    border: 1px solid rgba(255,122,0,.60) !important;
    box-shadow:
      0 18px 44px rgba(0,0,0,.58),
      0 0 24px rgba(255,122,0,.10) !important;
  }

  .proj-card.featured .proj-media {
    min-height: 176px !important;
    height: 100% !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    overflow: hidden !important;
  }

  .proj-card.featured .proj-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .proj-card.featured .proj-body {
    padding: 2px 0 !important;
    min-width: 0 !important;
  }

  .proj-card.featured .proj-name {
    font-size: 20px !important;
    line-height: 1.12 !important;
    margin: 0 0 4px !important;
    color: #fff !important;
  }

  .proj-card.featured .proj-desc {
    font-size: 12.2px !important;
    line-height: 1.44 !important;
    margin: 0 0 9px !important;
    color: rgba(255,255,255,.72) !important;
  }

  .proj-card.featured .proj-problem {
    padding: 10px 11px !important;
    margin: 0 0 9px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255,122,0,.05), rgba(255,122,0,.05)) !important;
    border: 1px solid rgba(255,122,0,.05) !important;
    font-size: 11px !important;
    line-height: 1.38 !important;
  }

  .proj-card.featured .proj-tags {
    display: flex !important;
    gap: 6px !important;
    margin: 0 0 9px !important;
  }

  .proj-card.featured .proj-tags span {
    padding: 5px 8px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
  }

  .proj-card.featured .proj-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
  }

  .proj-badge {
    top: 10px !important;
    left: 10px !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
  }

  /* Cards pequenos dos projetos */
  .proj-card:not(.featured) {
    min-height: 164px !important;
    height: 164px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
      rgba(10,10,10,.96) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    overflow: hidden !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.36) !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 82px !important;
    min-height: 82px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .proj-card:not(.featured) .proj-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .proj-card:not(.featured) .proj-body {
    padding: 9px 9px 8px !important;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 12px !important;
    line-height: 1.16 !important;
    margin: 0 0 3px !important;
    color: #fff !important;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 10px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: rgba(255,255,255,.58) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .proj-card:not(.featured) .proj-problem,
  .proj-card:not(.featured) .proj-tags,
  .proj-card:not(.featured) .proj-actions {
    display: none !important;
  }
}

/* Ajuste para 360px */
@media (max-width: 380px) {
  .hero-inner {
    min-height: 548px !important;
  }

  .hero-title {
    max-width: 255px !important;
    font-size: 29px !important;
  }

  .hero-sub {
    max-width: 250px !important;
    font-size: 13px !important;
  }

  .hero-photo {
    top: 66px !important;
    right: -112px !important;
    width: 88% !important;
  }

  .hero-actions {
    max-width: 318px !important;
    gap: 9px !important;
    margin-bottom: 30px !important;
  }

  .hero-actions .btn {
    height: 41px !important;
    min-height: 41px !important;
    font-size: 11.3px !important;
  }

  .hero-badge {
    height: 112px !important;
    min-height: 112px !important;
    padding: 11px 8px !important;
  }

  .hero-badge::after {
    font-size: 9.3px !important;
    line-height: 1.18 !important;
  }

  .proj-card.featured {
    grid-template-columns: .9fr 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .proj-card.featured .proj-media {
    min-height: 166px !important;
  }

  .proj-card.featured .proj-name {
    font-size: 18px !important;
  }

  .proj-card.featured .proj-desc {
    font-size: 11.5px !important;
  }

  .proj-card.featured .proj-problem {
    font-size: 10.5px !important;
  }

  .proj-card:not(.featured) {
    height: 154px !important;
    min-height: 154px !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 76px !important;
    min-height: 76px !important;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 11.4px !important;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 9.5px !important;
  }
}

/* =========================================================
   AJUSTE FINO FINAL — HERO E PROJETOS MAIS IGUAIS AO MOCKUP
   Cole NO FINAL do portfolio.css
   ========================================================= */

@media (max-width: 720px) {

  /* -----------------------------
     HERO MAIS PRETA / MENOS LARANJA
     ----------------------------- */
  .hero {
    min-height: auto !important;
    padding: 100px 0 26px !important;
    background:
      radial-gradient(circle at 92% 42%, rgba(255,122,0,.14), transparent 16%),
      linear-gradient(180deg, #050505 0%, #050505 52%, #040404 100%) !important;
  }

  /* tira aquele laranja grande acima da foto */
  .hero::before {
    width: 132px !important;
    height: 132px !important;
    top: 250px !important;
    right: -26px !important;
    border: 2px solid rgba(255,122,0,.58) !important;
    box-shadow:
      0 0 18px rgba(255,122,0,.40),
      inset 0 0 18px rgba(255,122,0,.10) !important;
    opacity: .9 !important;
  }

  /* camada preta em cima para esconder o formato da foto */
  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        rgba(5,5,5,.97) 38%,
        rgba(5,5,5,.78) 58%,
        rgba(5,5,5,.38) 76%,
        rgba(5,5,5,.08) 100%
      ),
      linear-gradient(
        180deg,
        #050505 0%,
        rgba(5,5,5,.88) 10%,
        transparent 26%,
        transparent 78%,
        #050505 100%
      ) !important;
  }

  .hero-inner {
    min-height: 520px !important;
    position: relative !important;
    display: block !important;
    z-index: 5 !important;
  }

  .hero-text {
    display: contents !important;
  }

  /* -----------------------------
     TEXTO HERO
     ----------------------------- */
  .hero .eyebrow {
    position: relative !important;
    z-index: 10 !important;
    margin: 10px 0 14px !important;
    padding: 7px 11px !important;
    font-size: 8.8px !important;
    letter-spacing: .2px !important;
    background: rgba(5,5,5,.72) !important;
  }

  .hero-title {
    position: relative !important;
    z-index: 10 !important;
    max-width: 238px !important;
    margin: 0 0 12px !important;
    font-size: 28px !important;
    line-height: 1.06 !important;
    letter-spacing: -1.5px !important;
  }

  .hero-sub {
    position: relative !important;
    z-index: 10 !important;
    max-width: 225px !important;
    margin: 0 0 18px !important;
    font-size: 12.1px !important;
    line-height: 1.48 !important;
    color: rgba(255,255,255,.78) !important;
  }

  /* -----------------------------
     FOTO MAIS ENCOLHIDA
     ----------------------------- */
  .hero-photo {
    position: absolute !important;
    z-index: 4 !important;
    top: 82px !important;
    right: -120px !important;
    width: 74% !important;
    max-width: none !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .hero-photo::before {
    width: 58% !important;
    top: 29% !important;
    right: 16% !important;
    background: radial-gradient(circle, rgba(255,122,0,.22), rgba(255,122,0,.07) 46%, transparent 72%) !important;
    filter: blur(8px) !important;
  }

  .hero-photo-frame,
  .hero-photo-frame::after,
  .hero-photo-badge {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    max-height: 418px !important;
    object-fit: contain !important;
    object-position: center top !important;
    filter: saturate(1.04) contrast(1.04) brightness(.90) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 70%,
      rgba(0,0,0,.56) 82%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 70%,
      rgba(0,0,0,.56) 82%,
      transparent 100%
    ) !important;
  }

  /* -----------------------------
     BOTÕES MENORES
     ----------------------------- */
  .hero-actions {
    position: relative !important;
    z-index: 15 !important;
    width: 100% !important;
    max-width: 304px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 0 20px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
  }

  .hero-actions .btn:first-child {
    background: linear-gradient(135deg, #25d366, #16b855) !important;
    box-shadow: 0 10px 20px rgba(37,211,102,.26) !important;
  }

  .hero-actions .btn-outline {
    background: rgba(8,8,8,.78) !important;
    border: 1px solid rgba(255,122,0,.80) !important;
  }

  /* -----------------------------
     CARDS ABAIXO DOS BOTÕES MENORES
     ----------------------------- */
  .hero-badges {
    position: relative !important;
    z-index: 16 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  .hero-badge {
    height: 104px !important;
    min-height: 104px !important;
    padding: 11px 8px 10px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      rgba(20,20,20,.95) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.28) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  .hero-badge::before {
    margin: 0 0 8px !important;
    color: #ff7a00 !important;
    line-height: 1 !important;
  }

  .hero-badge:nth-child(1)::before {
    content: "" !important;
    width: 24px !important;
    height: 18px !important;
    border: 2px solid #ff7a00 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 4px 0 rgba(255,122,0,.18) !important;
  }

  .hero-badge:nth-child(2)::before {
    content: "</>" !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
  }

  .hero-badge:nth-child(3)::before {
    content: "◔" !important;
    font-size: 21px !important;
    font-weight: 900 !important;
  }

  .hero-badge:nth-child(1)::after {
    content: "Sites\A profissionais\A\A Design moderno\A e alta conversão" !important;
  }

  .hero-badge:nth-child(2)::after {
    content: "Sistemas\A web\A\A Soluções completas\A e escaláveis" !important;
  }

  .hero-badge:nth-child(3)::after {
    content: "Automações\A WhatsApp\A\A Atendimento 24/7\A e mais vendas" !important;
  }

  .hero-badge::after {
    white-space: pre-line !important;
    color: rgba(255,255,255,.80) !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
  }

  /* -----------------------------
     PROJETOS MAIS PEQUENOS
     ----------------------------- */
  #projetos {
    padding: 22px 0 24px !important;
    background: #050505 !important;
  }

  #projetos .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #projetos .section-head {
    margin-bottom: 12px !important;
  }

  .projects-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  /* projeto destaque menor */
  .proj-card.featured {
    grid-column: 1 / -1 !important;
    grid-template-columns: .88fr 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .proj-card.featured .proj-media {
    min-height: 148px !important;
    border-radius: 11px !important;
  }

  .proj-card.featured .proj-name {
    font-size: 16px !important;
    margin-bottom: 3px !important;
    line-height: 1.1 !important;
  }

  .proj-card.featured .proj-desc {
    font-size: 10.8px !important;
    line-height: 1.34 !important;
    margin-bottom: 7px !important;
  }

  .proj-card.featured .proj-problem {
    padding: 8px 9px !important;
    font-size: 9.8px !important;
    line-height: 1.28 !important;
    border-radius: 10px !important;
    margin-bottom: 7px !important;
  }

  .proj-card.featured .proj-tags {
    gap: 5px !important;
    margin-bottom: 7px !important;
  }

  .proj-card.featured .proj-tags span {
    padding: 4px 6px !important;
    font-size: 8px !important;
    border-radius: 6px !important;
  }

  .proj-card.featured .proj-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    font-size: 9.3px !important;
    border-radius: 8px !important;
  }

  .proj-badge {
    top: 8px !important;
    left: 8px !important;
    padding: 4px 8px !important;
    font-size: 8px !important;
    border-radius: 7px !important;
  }

  /* cards pequenos dos projetos */
  .proj-card:not(.featured) {
    height: 138px !important;
    min-height: 138px !important;
    border-radius: 12px !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 68px !important;
    min-height: 68px !important;
    aspect-ratio: auto !important;
  }

  .proj-card:not(.featured) .proj-body {
    padding: 7px !important;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 8.6px !important;
    line-height: 1.15 !important;
    -webkit-line-clamp: 2 !important;
  }

  .proj-card:not(.featured) .proj-problem,
  .proj-card:not(.featured) .proj-tags,
  .proj-card:not(.featured) .proj-actions {
    display: none !important;
  }

  /* CTA menor */
  .contact {
    margin: 20px 18px 42px !important;
    padding: 24px 16px !important;
    border-radius: 18px !important;
  }

  .contact-title {
    font-size: 22px !important;
    line-height: 1.08 !important;
  }

  .contact-sub {
    font-size: 12.5px !important;
    margin-bottom: 18px !important;
  }

  .contact .btn {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 12px !important;
  }

  .whatsapp-float {
    width: 54px !important;
    height: 54px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* CELULAR PEQUENO */
@media (max-width: 380px) {
  .hero-title {
    max-width: 224px !important;
    font-size: 26px !important;
  }

  .hero-sub {
    max-width: 215px !important;
    font-size: 11.6px !important;
  }

  .hero-photo {
    right: -126px !important;
    width: 76% !important;
    top: 88px !important;
  }

  .hero-photo-frame img {
    max-height: 396px !important;
  }

  .hero-actions {
    max-width: 292px !important;
  }

  .hero-actions .btn {
    font-size: 10.8px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .hero-badge {
    height: 98px !important;
    min-height: 98px !important;
    padding: 10px 7px !important;
  }

  .hero-badge::after {
    font-size: 8.4px !important;
  }

  .proj-card.featured .proj-media {
    min-height: 138px !important;
  }

  .proj-card.featured .proj-name {
    font-size: 15px !important;
  }

  .proj-card.featured .proj-desc {
    font-size: 10px !important;
  }

  .proj-card:not(.featured) {
    height: 130px !important;
    min-height: 130px !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 62px !important;
    min-height: 62px !important;
  }
}

/* =========================================================
   AJUSTE FINAL — FOTO MAIS CENTRALIZADA IGUAL À REFERÊNCIA
   Cole NO FINAL do portfolio.css
   ========================================================= */

@media (max-width: 720px) {
  .hero {
    overflow: hidden !important;
  }

  .hero-inner {
    min-height: 560px !important;
    position: relative !important;
  }

  /* FOTO MAIS PARA A ESQUERDA E MAIS NATURAL */
  .hero-photo {
    position: absolute !important;
    z-index: 4 !important;
    top: 88px !important;
    right: -58px !important;   /* antes estava muito no canto */
    width: 79% !important;     /* ocupa melhor a área, igual referência */
    max-width: none !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .hero-photo::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 64% !important;
    aspect-ratio: 1 !important;
    top: 25% !important;
    right: 10% !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(255, 122, 0, .26),
      rgba(255, 122, 0, .08) 48%,
      transparent 72%
    ) !important;
    filter: blur(8px) !important;
  }

  .hero-photo-frame {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .hero-photo-frame::after,
  .hero-photo-badge {
    display: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    height: auto !important;
    max-height: 455px !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 0 !important;
    filter: saturate(1.04) contrast(1.03) brightness(.94) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 74%,
      rgba(0, 0, 0, .62) 85%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 74%,
      rgba(0, 0, 0, .62) 85%,
      transparent 100%
    ) !important;
  }

  /* TEXTO continua na esquerda, mas dá mais respiro para a foto */
  .hero-title {
    max-width: 245px !important;
  }

  .hero-sub {
    max-width: 230px !important;
  }

  /* escurece a faixa de cima da foto para não aparecer o recorte */
  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        rgba(5,5,5,.96) 36%,
        rgba(5,5,5,.78) 58%,
        rgba(5,5,5,.34) 80%,
        rgba(5,5,5,.06) 100%
      ),
      linear-gradient(
        180deg,
        #050505 0%,
        rgba(5,5,5,.94) 12%,
        transparent 30%,
        transparent 80%,
        #050505 100%
      ) !important;
  }
}

@media (max-width: 380px) {
  .hero-photo {
    top: 94px !important;
    right: -66px !important;
    width: 80% !important;
  }

  .hero-photo-frame img {
    max-height: 430px !important;
  }

  .hero-title {
    max-width: 232px !important;
  }

  .hero-sub {
    max-width: 220px !important;
  }
}

/* =========================================================
   AJUSTE FINAL — BLOCO DE TEXTO AO LADO DA FOTO
   Deixa a parte da esquerda mais parecida com a referência
   Cole NO FINAL do portfolio.css
   ========================================================= */

@media (max-width: 720px) {
  /* escurece melhor a área do texto */
  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        rgba(5,5,5,1) 0%,
        rgba(5,5,5,.98) 28%,
        rgba(5,5,5,.92) 45%,
        rgba(5,5,5,.52) 64%,
        rgba(5,5,5,.12) 100%
      ),
      linear-gradient(
        180deg,
        rgba(5,5,5,.95) 0%,
        rgba(5,5,5,.30) 22%,
        transparent 42%,
        transparent 80%,
        #050505 100%
      ) !important;
  }

  .hero-inner {
    position: relative !important;
    min-height: 635px !important;
    z-index: 5 !important;
  }

  /* mantém tudo do lado esquerdo mais organizado */
  .hero .eyebrow,
  .hero-title,
  .hero-sub,
  .hero-actions {
    position: relative !important;
    z-index: 12 !important;
  }

  /* faixa superior */
  .hero .eyebrow {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
    padding: 7px 12px !important;
    font-size: 9px !important;
    letter-spacing: .3px !important;
    line-height: 1 !important;
    max-width: 290px !important;
    white-space: nowrap !important;
  }

  /* título principal mais parecido com a referência */
  .hero-title {
    max-width: 235px !important;
    margin: 0 0 14px !important;
    font-size: 29px !important;
    line-height: 1.03 !important;
    letter-spacing: -1.7px !important;
    text-wrap: balance !important;
  }

  /* subtítulo menor e mais estreito */
  .hero-sub {
    max-width: 205px !important;
    margin: 0 0 22px !important;
    font-size: 12.8px !important;
    line-height: 1.52 !important;
    color: rgba(255,255,255,.82) !important;
  }

  /* botões alinhados com o texto */
  .hero-actions {
    max-width: 338px !important;
    gap: 10px !important;
    margin-bottom: 26px !important;
  }

  .hero-actions .btn {
    min-height: 46px !important;
    font-size: 12.5px !important;
    padding: 0 15px !important;
  }

  /* garante que os cards comecem mais perto dos botões */
  .hero-badges {
    margin-top: 18px !important;
  }
}

@media (max-width: 380px) {
  .hero-title {
    max-width: 220px !important;
    font-size: 27px !important;
    line-height: 1.03 !important;
  }

  .hero-sub {
    max-width: 192px !important;
    font-size: 12.2px !important;
    line-height: 1.5 !important;
  }

  .hero .eyebrow {
    max-width: 270px !important;
    font-size: 8.6px !important;
  }

  .hero-actions {
    max-width: 320px !important;
  }

  .hero-actions .btn {
    min-height: 44px !important;
    font-size: 11.8px !important;
    padding: 0 12px !important;
  }
}

/* =========================================================
   AJUSTE FINAL REAL — TEXTO, FOTO E BOTÕES IGUAL REFERÊNCIA
   Cole NO FINAL do portfolio.css
   ========================================================= */

@media (max-width: 720px) {

  /* HERO geral mais parecida com o mockup */
  .hero {
    min-height: auto !important;
    padding-top: 104px !important;
    padding-bottom: 28px !important;
    background:
      radial-gradient(circle at 88% 38%, rgba(255,122,0,.18), transparent 18%),
      linear-gradient(180deg, #050505 0%, #050505 55%, #040404 100%) !important;
  }

  .hero-inner {
    position: relative !important;
    display: block !important;
    min-height: 575px !important;
    z-index: 5 !important;
  }

  .hero-text {
    display: contents !important;
  }

  /* camada escura para o texto ficar limpo e a foto não marcar corte */
  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        rgba(5,5,5,.98) 30%,
        rgba(5,5,5,.86) 48%,
        rgba(5,5,5,.46) 68%,
        rgba(5,5,5,.08) 100%
      ),
      linear-gradient(
        180deg,
        #050505 0%,
        rgba(5,5,5,.95) 13%,
        transparent 31%,
        transparent 78%,
        #050505 100%
      ) !important;
  }

  /* círculo laranja só atrás da foto, não no topo */
  .hero::before {
    width: 150px !important;
    height: 150px !important;
    top: 250px !important;
    right: -22px !important;
    border: 2px solid rgba(255,122,0,.58) !important;
    box-shadow:
      0 0 22px rgba(255,122,0,.42),
      inset 0 0 22px rgba(255,122,0,.10) !important;
    opacity: .9 !important;
  }

  /* LOGO / NOME */
  .header-inner {
    height: 82px !important;
  }

  .logo {
    font-size: 25px !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  /* SELO */
  .hero .eyebrow {
    position: relative !important;
    z-index: 12 !important;
    margin: 10px 0 17px !important;
    padding: 7px 12px !important;
    max-width: max-content !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .25px !important;
    background: rgba(5,5,5,.72) !important;
    border-color: rgba(255,122,0,.80) !important;
  }

  /* TEXTO — mais largo, para quebrar igual à referência */
  .hero-title {
    position: relative !important;
    z-index: 12 !important;
    max-width: 292px !important;
    margin: 0 0 15px !important;
    font-size: 31px !important;
    line-height: 1.07 !important;
    letter-spacing: -1.65px !important;
    color: #fff !important;
  }

  .hero-title .grad-text {
    background: linear-gradient(135deg, #ff9a2f, #ff6a00) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
  }

  .hero-sub {
    position: relative !important;
    z-index: 12 !important;
    max-width: 275px !important;
    margin: 0 0 22px !important;
    font-size: 13px !important;
    line-height: 1.52 !important;
    color: rgba(255,255,255,.80) !important;
  }

  /* FOTO — maior e mais parecida com a referência */
  .hero-photo {
    position: absolute !important;
    z-index: 4 !important;
    top: 70px !important;
    right: -70px !important;
    width: 80% !important;
    max-width: none !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .hero-photo::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 62% !important;
    aspect-ratio: 1 !important;
    top: 27% !important;
    right: 8% !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(255,122,0,.28),
      rgba(255,122,0,.09) 48%,
      transparent 72%
    ) !important;
    filter: blur(8px) !important;
  }

  .hero-photo-frame,
  .hero-photo-frame::after,
  .hero-photo-badge {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    height: auto !important;
    max-height: 470px !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 0 !important;
    filter: saturate(1.05) contrast(1.04) brightness(.93) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 74%,
      rgba(0,0,0,.62) 85%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 74%,
      rgba(0,0,0,.62) 85%,
      transparent 100%
    ) !important;
  }

  /* BOTÕES — menores como a segunda imagem */
  .hero-actions {
    position: relative !important;
    z-index: 15 !important;
    width: 100% !important;
    max-width: 315px !important;
    display: grid !important;
    grid-template-columns: 1fr .92fr !important;
    gap: 10px !important;
    margin: 0 0 24px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 11.6px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .hero-actions .btn-whatsapp,
  .hero-actions .btn:first-child {
    background: linear-gradient(135deg, #25d366, #16b855) !important;
    border: none !important;
    box-shadow: 0 10px 22px rgba(37,211,102,.30) !important;
  }

  .hero-actions .btn-outline {
    background: rgba(8,8,8,.76) !important;
    border: 1px solid rgba(255,122,0,.82) !important;
    box-shadow: none !important;
  }

  /* CARDS abaixo dos botões */
  .hero-badges {
    position: relative !important;
    z-index: 16 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .hero-badge {
    height: 112px !important;
    min-height: 112px !important;
    padding: 12px 9px 10px !important;
    border-radius: 14px !important;
  }

  .hero-badge::after {
    font-size: 9.4px !important;
    line-height: 1.18 !important;
  }

  .hero-badge:nth-child(1)::before {
    width: 25px !important;
    height: 19px !important;
  }

  .hero-badge:nth-child(2)::before {
    font-size: 20px !important;
  }

  .hero-badge:nth-child(3)::before {
    font-size: 23px !important;
  }
}

/* ajuste fino para 360px */
@media (max-width: 380px) {
  .hero-inner {
    min-height: 555px !important;
  }

  .logo {
    font-size: 24px !important;
  }

  .hero-title {
    max-width: 276px !important;
    font-size: 29px !important;
    line-height: 1.06 !important;
  }

  .hero-sub {
    max-width: 258px !important;
    font-size: 12.4px !important;
  }

  .hero-photo {
    top: 76px !important;
    right: -76px !important;
    width: 82% !important;
  }

  .hero-photo-frame img {
    max-height: 448px !important;
  }

  .hero-actions {
    max-width: 305px !important;
    gap: 9px !important;
  }

  .hero-actions .btn {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 11px !important;
  }

  .hero-badge {
    height: 106px !important;
    min-height: 106px !important;
    padding: 11px 8px !important;
  }

  .hero-badge::after {
    font-size: 8.8px !important;
  }
}

/* =========================================================
   AJUSTE CIRÚRGICO — FOTO ENTRE TÍTULO E BOTÕES
   Cole NO FINAL do portfolio.css
   ========================================================= */

@media (max-width: 720px) {
  .hero {
    padding-top: 102px !important;
    padding-bottom: 28px !important;
    overflow: hidden !important;
  }

  .hero-inner {
    position: relative !important;
    min-height: 540px !important;
  }

  .hero-text {
    display: contents !important;
  }

  /* escurece a área do texto e some com recorte da imagem */
  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        rgba(5,5,5,.98) 34%,
        rgba(5,5,5,.82) 52%,
        rgba(5,5,5,.36) 72%,
        rgba(5,5,5,.06) 100%
      ),
      linear-gradient(
        180deg,
        #050505 0%,
        rgba(5,5,5,.92) 14%,
        transparent 30%,
        transparent 74%,
        #050505 100%
      ) !important;
  }

  /* selo */
  .hero .eyebrow {
    position: relative !important;
    z-index: 12 !important;
    margin: 8px 0 15px !important;
    padding: 7px 12px !important;
    font-size: 8.8px !important;
    max-width: max-content !important;
  }

  /* texto fica menor para não invadir tanto a foto */
  .hero-title {
    position: relative !important;
    z-index: 12 !important;
    max-width: 252px !important;
    margin: 0 0 14px !important;
    font-size: 29px !important;
    line-height: 1.04 !important;
    letter-spacing: -1.7px !important;
  }

  .hero-sub {
    position: relative !important;
    z-index: 12 !important;
    max-width: 250px !important;
    margin: 0 0 20px !important;
    font-size: 12.7px !important;
    line-height: 1.5 !important;
  }

  /* botões menores e com fim alinhando com a foto */
  .hero-actions {
    position: relative !important;
    z-index: 15 !important;
    max-width: 310px !important;
    display: grid !important;
    grid-template-columns: 1fr .95fr !important;
    gap: 10px !important;
    margin: 0 0 24px !important;
  }

  .hero-actions .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 11.4px !important;
    border-radius: 10px !important;
  }

  /* FOTO: começa no início do título e termina no fim dos botões */
  .hero-photo {
    position: absolute !important;
    z-index: 4 !important;

    /* aqui controla a altura da foto na hero */
    top: 74px !important;
    height: 330px !important;

    /* aqui controla posição lateral */
    right: -42px !important;
    width: 66% !important;

    max-width: none !important;
    margin: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .hero-photo-frame {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .hero-photo-frame::after,
  .hero-photo-badge {
    display: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 0 !important;
    filter: saturate(1.05) contrast(1.04) brightness(.93) !important;

    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 76%,
      rgba(0,0,0,.52) 88%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 76%,
      rgba(0,0,0,.52) 88%,
      transparent 100%
    ) !important;
  }

  /* glow/círculo fica atrás da cabeça, não acima */
  .hero-photo::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 72% !important;
    aspect-ratio: 1 !important;
    top: 34% !important;
    right: -2% !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(255,122,0,.28),
      rgba(255,122,0,.08) 48%,
      transparent 72%
    ) !important;
    filter: blur(8px) !important;
  }

  /* tira o círculo antigo grande se estiver aparecendo estranho */
  .hero::before {
    width: 135px !important;
    height: 135px !important;
    top: 265px !important;
    right: -34px !important;
    opacity: .75 !important;
  }

  /* cards ficam abaixo da área da foto */
  .hero-badges {
    position: relative !important;
    z-index: 16 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 380px) {
  .hero-inner {
    min-height: 525px !important;
  }

  .hero-title {
    max-width: 242px !important;
    font-size: 27px !important;
  }

  .hero-sub {
    max-width: 238px !important;
    font-size: 12.1px !important;
  }

  .hero-actions {
    max-width: 300px !important;
  }

  .hero-actions .btn {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 10.8px !important;
  }

  .hero-photo {
    top: 78px !important;
    right: -48px !important;
    width: 68% !important;
    height: 318px !important;
  }
}

/* =========================================================
   AJUSTE FINAL — FOTO MAIS ALTA E MAIS PRÓXIMA DO TÍTULO
   Cole no FINAL do portfolio.css
   ========================================================= */

@media (max-width: 720px) {
  .hero {
    overflow: hidden !important;
  }

  .hero-inner {
    position: relative !important;
    min-height: 640px !important;
  }

  /* TEXTO */
  .hero-title {
    position: relative !important;
    z-index: 12 !important;
    max-width: 235px !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 14px !important;
  }

  .hero-sub {
    position: relative !important;
    z-index: 12 !important;
    max-width: 245px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }

  /* BOTÕES */
  .hero-actions {
    position: relative !important;
    z-index: 13 !important;
    max-width: 345px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .hero-actions .btn {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  /* FOTO — MAIS ALTA E SUBINDO MAIS */
  .hero-photo {
    position: absolute !important;
    z-index: 6 !important;

    /* SUBE A FOTO */
    top: 70px !important;

    /* PUXA UM POUCO PARA A ESQUERDA */
    right: -18px !important;

    /* AUMENTA A FOTO */
    width: 66% !important;
    height: 430px !important;

    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .hero-photo-frame {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .hero-photo-frame::after,
  .hero-photo-badge {
    display: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;

    /* deixa a cabeça mais alta e enquadrada */
    object-position: center top !important;

    border-radius: 0 !important;
    filter: saturate(1.05) contrast(1.03) brightness(.96) !important;

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 84%,
      rgba(0,0,0,.45) 93%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 84%,
      rgba(0,0,0,.45) 93%,
      transparent 100%
    ) !important;
  }

  /* BRILHO/CÍRCULO */
  .hero-photo::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 72% !important;
    aspect-ratio: 1 !important;
    top: 31% !important;
    right: 2% !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(255,122,0,.30),
      rgba(255,122,0,.10) 48%,
      transparent 72%
    ) !important;
    filter: blur(8px) !important;
  }

  .hero::before {
    width: 160px !important;
    height: 160px !important;
    top: 255px !important;
    right: -18px !important;
    opacity: .82 !important;
  }

  /* CARDS */
  .hero-badges {
    margin-top: 0 !important;
    gap: 10px !important;
  }

  .hero-badge {
    min-height: 108px !important;
    padding: 14px 10px 12px !important;
  }

  .hero-badge::before {
    margin-bottom: 10px !important;
    font-size: 24px !important;
  }

  .hero-badge::after {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }
}

@media (max-width: 380px) {
  .hero-inner {
    min-height: 620px !important;
  }

  .hero-title {
    max-width: 228px !important;
    font-size: 28px !important;
  }

  .hero-sub {
    max-width: 236px !important;
    font-size: 12.4px !important;
  }

  .hero-actions {
    max-width: 315px !important;
  }

  .hero-actions .btn {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 11px !important;
  }

  .hero-photo {
    top: 72px !important;
    right: -22px !important;
    width: 68% !important;
    height: 410px !important;
  }
}

/* =========================================
   AJUSTE FINO — FOTO MAIS ALTA
   Cole no FINAL do portfolio.css
   ========================================= */

@media (max-width: 720px) {
  .hero-inner {
    min-height: 670px !important;
  }

  .hero-photo {
    position: absolute !important;
    z-index: 6 !important;

    /* sobe mais a foto */
    top: -70px !important;

    /* mantém ela na direita */
    right: -14px !important;

    /* aumenta um pouco */
    width: 67% !important;
    height: 500px !important;

    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .hero-photo-frame {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .hero-photo-frame::after,
  .hero-photo-badge {
    display: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 0 !important;

    /* leve zoom para preencher melhor */
    transform: scale(1.04) !important;

    filter: saturate(1.05) contrast(1.03) brightness(.96) !important;

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 88%,
      rgba(0,0,0,.45) 95%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 88%,
      rgba(0,0,0,.45) 95%,
      transparent 100%
    ) !important;
  }

  .hero-photo::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 72% !important;
    aspect-ratio: 1 !important;
    top: 34% !important;
    right: 2% !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(255,122,0,.30),
      rgba(255,122,0,.10) 48%,
      transparent 72%
    ) !important;
    filter: blur(8px) !important;
  }

  .hero::before {
    width: 160px !important;
    height: 160px !important;
    top: 272px !important;
    right: -16px !important;
    opacity: .86 !important;
  }
}

@media (max-width: 380px) {
  .hero-inner {
    min-height: 650px !important;
  }

  .hero-photo {
    top: 38px !important;
    right: -18px !important;
    width: 69% !important;
    height: 480px !important;
  }
}

/* =========================================================
   AJUSTE FINAL — TEXTO E BOTÕES MENORES NO MOBILE
   Cole no FINAL do portfolio.css
   ========================================================= */

@media (max-width: 720px) {

  /* bloco do texto */
  .hero-text {
    position: relative !important;
    z-index: 12 !important;
    max-width: 56% !important;
  }

  /* faixa de cima */
  .hero .eyebrow {
    margin-bottom: 14px !important;
    padding: 6px 3px !important;
    font-size: 10px !important;
    letter-spacing: .2px !important;
    line-height: 1 !important;
  }

  /* título principal */
  .hero-title {
    max-width: 230px !important;
    margin-bottom: 12px !important;
    font-size: 26px !important;
    line-height: 1.04 !important;
    letter-spacing: -1.2px !important;
  }

  /* subtítulo / parágrafo */
  .hero-sub {
    max-width: 220px !important;
    margin-bottom: 18px !important;
    font-size: 11.8px !important;
    line-height: 1.42 !important;
    color: rgba(255,255,255,.84) !important;
  }

  /* botões */
  .hero-actions {
    width: 100% !important;
    max-width: 305px !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .hero-actions .btn {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 11.5px !important;
    border-radius: 11px !important;
    font-weight: 800 !important;
  }

  .hero-actions .btn:first-child {
    flex: 1 !important;
  }

  .hero-actions .btn-outline {
    flex: .9 !important;
  }

  /* cards embaixo dos botões */
  .hero-badges {
    margin-top: 10px !important;
    gap: 10px !important;
  }

  .hero-badge {
    min-height: 108px !important;
    padding: 11px 9px !important;
    border-radius: 14px !important;
  }

  .hero-badge::before {
    margin-bottom: 10px !important;
    font-size: 24px !important;
  }

  .hero-badge::after {
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }
}

@media (max-width: 380px) {
  .hero-text {
    max-width: 55% !important;
  }

  .hero-title {
    max-width: 215px !important;
    font-size: 24px !important;
  }

  .hero-sub {
    max-width: 205px !important;
    font-size: 11.2px !important;
    line-height: 1.38 !important;
  }

  .hero-actions {
    max-width: 290px !important;
    gap: 8px !important;
  }

  .hero-actions .btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 10.8px !important;
  }

  .hero-badge {
    min-height: 102px !important;
    padding: 10px 8px !important;
  }

  .hero-badge::after {
    font-size: 8.9px !important;
  }
}

/* FORÇA HEADER TRANSPARENTE NO MOBILE */
@media (max-width: 720px) {
  header.header,
  .header,
  body .header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .header .container,
  .header-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .header::before,
  .header::after,
  .header-inner::before,
  .header-inner::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
  }

  .nav-toggle {
    background: rgba(5,5,5,.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

.texto-laranja {
  background: linear-gradient(90deg, #ffb347, #ff7a00, #ff3d00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
}

@media (max-width: 720px) {
  .hero .eyebrow {
    position: relative !important;
    top: -8px !important;
    left: -6px !important;

    display: inline-flex !important;
    align-items: center !important;      /* centraliza na vertical */
    justify-content: center !important;  /* centraliza na horizontal */
    gap: 5px !important;

    padding: 5px 7px !important;
    font-size: 6.7px !important;
    line-height: 1 !important;
    text-align: center !important;

    max-width: max-content !important;
    white-space: nowrap !important;
  }

  .hero .eyebrow::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
}

@media (max-width: 720px) {
  .hero-title {
    max-width: 260px !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
    letter-spacing: -1.1px !important;
    font-weight: 12px !important;
    margin-top: -12px !important; /* sobe o título */
  }

  .hero-title .linha-title {
    display: block !important;
  }

  .hero-title .linha-nowrap {
    white-space: nowrap !important;
  }

  .hero-title .grad-text {
    display: inline !important;
    background: linear-gradient(135deg, #ff9a2f, #ff6a00) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}

@media (max-width: 720px) {
  .hero-sub {
    max-width: 190px !important;  /* deixa o texto mais estreito e longe da imagem */
    font-size: 10.5px !important; /* diminui o texto */
    line-height: 1.35 !important; /* aproxima as linhas */
    margin-bottom: 16px !important;
  }
}

@media (max-width: 720px) {
  .hero-actions {
    max-width: 210px !important; /* largura total dos dois botões */
    display: grid !important;
    grid-template-columns: 1.15fr .85fr !important; /* 1º maior, 2º menor */
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .hero-actions .btn {
    height: 32px !important;       /* diminui a altura */
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 10.8px !important;  /* diminui o texto */
    border-radius: 10px !important;
  }

  /* Botão verde */
  .hero-actions .btn:first-child {
    width: 100% !important;
  }

  /* Botão Ver projetos */
  .hero-actions .btn-outline {
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  .hero-actions {
    position: relative !important;
    z-index: 30 !important;
    width: 100% !important;
    max-width: 214px !important;
    display: grid !important;
    grid-template-columns: 1.2fr .9fr !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    font-size: 9.6px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Botão WhatsApp — verde escuro */
  .hero-actions .btn-whatsapp,
  .hero-actions a.btn-whatsapp,
  .hero-actions a.whatsapp-link,
  .hero-actions a.btn.btn-whatsapp,
  .hero-actions a.btn.btn-whatsapp.whatsapp-link,
  .hero-actions a:first-child {
    background: #16743f !important;
    background-color: #16743f !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 18px rgba(22, 116, 63, .35) !important;
  }

  .hero-actions .btn-whatsapp:hover,
  .hero-actions a.btn-whatsapp:hover,
  .hero-actions a.whatsapp-link:hover,
  .hero-actions a:first-child:hover {
    background: #16743f !important;
    background-color: #16743f !important;
    background-image: none !important;
    color: #ffffff !important;
  }

  /* Botão Ver projetos */
  .hero-actions .btn-outline {
    background: rgba(8, 8, 8, .75) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid #ff7a00 !important;
    box-shadow: 0 0 15px rgba(255, 122, 0, .18) !important;
  }

  .hero-actions .wa-icon {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .hero-actions .btn-whatsapp span {
    line-height: 1 !important;
    transform: translateY(0) !important;
  }

  .hero-actions .cor {
    color: #ff7a00 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-left: 2px !important;
  }
}

@media (max-width: 720px) {
  .hero-badges {
    position: relative !important;
    z-index: 22 !important;

    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;
  }

  .hero-badge {
    height: 70px !important;
    min-height: 70px !important;

    padding: 8px 7px !important;
    border-radius: 9px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
      rgba(18,18,18,.92) !important;

    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.30) !important;

    overflow: hidden !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  .hero-badge::before,
  .hero-badge::after {
    position: static !important;
  }

  .hero-badge::before {
    display: block !important;
    margin: 0 0 5px !important;
    color: #ff7a00 !important;
    line-height: 1 !important;
  }

  .hero-badge:nth-child(1)::before {
    content: "" !important;
    width: 20px !important;
    height: 15px !important;
    border: 2px solid #ff7a00 !important;
    border-radius: 3px !important;
    box-shadow: inset 0 4px 0 rgba(255,122,0,.16) !important;
  }

  .hero-badge:nth-child(2)::before {
    content: "</>" !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
  }

  .hero-badge:nth-child(3)::before {
    content: "◔" !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  .hero-badge:nth-child(1)::after {
    content: "Sites\A profissionais\A Design moderno e\A alta conversão" !important;
  }

  .hero-badge:nth-child(2)::after {
    content: "Sistemas\A web\A Soluções completas\A e escaláveis" !important;
  }

  .hero-badge:nth-child(3)::after {
    content: "Automações\A WhatsApp\A Atendimento 24/7\A e mais vendas" !important;
  }

  .hero-badge::after {
    display: block !important;
    white-space: pre-line !important;
    color: rgba(255,255,255,.82) !important;

    font-size: 7.4px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 720px) {
  .hero-badge::before {
    display: block !important;
    margin: 0 0 5px !important;
    color: #ff7a00 !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  /* Ícone Sites profissionais */
  .hero-badge:nth-child(1)::before {
    content: "▭" !important;
    font-size: 21px !important;
    font-weight: 900 !important;
  }

  /* Ícone Sistemas web */
  .hero-badge:nth-child(2)::before {
    content: "</>" !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
  }

  /* Ícone Automações WhatsApp */
  .hero-badge:nth-child(3)::before {
    content: "☎" !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }
}
@media (max-width: 720px) {
  /* Ícones dos cards da hero */
  .hero-badge::before {
    content: "" !important;
    display: block !important;

    width: 22px !important;
    height: 22px !important;

    margin: 0 0 6px !important;

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    border: none !important;
    box-shadow: none !important;
    color: transparent !important;
  }

  /* Card 1 — Sites profissionais */
  .hero-badge:nth-child(1)::before {
    background-image: url("https://img.icons8.com/?size=100&id=24517&format=png&color=FD7E14") !important;
  }

  /* Card 2 — Sistemas web */
  .hero-badge:nth-child(2)::before {
    background-image: url("https://img.icons8.com/?size=100&id=XZzsxYpJLV3S&format=png&color=FD7E14") !important;
  }

  /* Card 3 — Automações WhatsApp */
  .hero-badge:nth-child(3)::before {
    background-image: url("https://img.icons8.com/?size=100&id=Vnz4A9DdDXEL&format=png&color=FD7E14") !important;
  }
}

@media (max-width: 720px) {
  .hero-badge:nth-child(1)::before,
  .hero-badge:nth-child(2)::before,
  .hero-badge:nth-child(3)::before {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
  }

  .hero-badge::before {
    width: 20px !important;
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  .hero-badge:nth-child(1)::before {
    content: "" !important;
    background-image: url("https://img.icons8.com/?size=100&id=24517&format=png&color=FD7E14") !important;
  }

  .hero-badge:nth-child(2)::before {
    content: "" !important;
    background-image: url("https://img.icons8.com/?size=100&id=XZzsxYpJLV3S&format=png&color=FD7E14") !important;
  }

  .hero-badge:nth-child(3)::before {
    content: "" !important;
    background-image: url("https://img.icons8.com/?size=100&id=Vnz4A9DdDXEL&format=png&color=FD7E14") !important;
  }
}

@media (max-width: 720px) {
  .hero-badges {
    position: relative !important;
    z-index: 22 !important;

    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;
  }

  .hero-badge {
    height: 74px !important;
    min-height: 74px !important;

    padding: 10px 8px !important;
    border-radius: 10px !important;

    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    column-gap: 7px !important;
    align-items: flex-start !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
      rgba(18,18,18,.94) !important;

    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.30) !important;

    overflow: hidden !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  .hero-badge::before {
    content: "" !important;

    width: 21px !important;
    height: 21px !important;

    margin: 1px 0 0 !important;

    display: block !important;

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  .hero-badge:nth-child(1)::before {
    background-image: url("https://img.icons8.com/?size=100&id=24517&format=png&color=FD7E14") !important;
  }

  .hero-badge:nth-child(2)::before {
    background-image: url("https://img.icons8.com/?size=100&id=XZzsxYpJLV3S&format=png&color=FD7E14") !important;
  }

  .hero-badge:nth-child(3)::before {
    background-image: url("https://img.icons8.com/?size=100&id=Vnz4A9DdDXEL&format=png&color=FD7E14") !important;
  }

  .hero-badge:nth-child(1)::after {
    content: "Sites\A profissionais\A\A Design moderno e\A alta conversão" !important;
  }

  .hero-badge:nth-child(2)::after {
    content: "Sistemas\A web\A\A Soluções completas\A e escaláveis" !important;
  }

  .hero-badge:nth-child(3)::after {
    content: "Automações\A WhatsApp\A\A Atendimento 24/7\A e mais vendas" !important;
  }

  .hero-badge::after {
    display: block !important;
    white-space: pre-line !important;

    color: rgba(255,255,255,.86) !important;

    font-size: 7.5px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;

    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================
   CARDS HERO MOBILE — VERSÃO DEFINITIVA COM HTML SEMÂNTICO
   Usa <img>, <strong>, <span> no HTML
   ========================================================= */

@media (max-width: 720px) {
  .hero-badges {
    position: relative !important;
    z-index: 22 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
  }

  .hero-badge {
    height: auto !important;
    min-height: 78px !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;

    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    column-gap: 7px !important;
    align-items: flex-start !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
      rgba(18,18,18,.94) !important;

    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.30) !important;
    overflow: hidden !important;

    color: #fff !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  .hero-badge::before,
  .hero-badge::after {
    content: none !important;
    display: none !important;
  }

  .hero-badge-icon {
    width: 32px !important;
    height: 32px !important;
    margin-top: 1px !important;
    display: block !important;
    object-fit: contain !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .hero-badge-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  .hero-badge-text strong {
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    display: block !important;
  }

  .hero-badge-text span {
    color: rgba(255,255,255,.50) !important;
    font-size: 7px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    display: block !important;
  }
}

@media (max-width: 380px) {
  .hero-badge {
    min-height: 72px !important;
    padding: 8px 6px !important;
    grid-template-columns: 28px 1fr !important;
    column-gap: 6px !important;
  }

  .hero-badge-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .hero-badge-text strong {
    font-size: 7.5px !important;
  }

  .hero-badge-text span {
    font-size: 6.5px !important;
  }
}

/* =========================================================
   CARDS HERO MOBILE — TÍTULOS EM 2 LINHAS + GRID DEFINITIVO
   ========================================================= */

@media (max-width: 720px) {
  .hero-badge {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 8px !important;
    align-items: start !important;

    height: 78px !important;
    min-height: 78px !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
      rgba(18,18,18,.94) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.30) !important;
    overflow: hidden !important;

    color: #fff !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .hero-badge::before,
  .hero-badge::after {
    content: none !important;
    display: none !important;
  }

  .hero-badge-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    align-self: start !important;
    margin-top: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .hero-badge strong {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    color: #ffffff !important;
    font-size: 8.6px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;

    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
  }

  .hero-badge strong span {
    display: block !important;
    color: #ffffff !important;
    font-size: 8.6px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  .hero-badge-desc {
    grid-column: 2 !important;
    grid-row: 2 !important;

    display: block !important;
    margin-top: 25px !important;

    color: rgba(255,255,255,.50) !important;
    font-size: 6.4px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
  }

  .hero-badge-text {
    display: contents !important;
  }
}

@media (max-width: 380px) {
  .hero-badge {
    min-height: 72px !important;
    height: 72px !important;
    padding: 8px 6px !important;
    grid-template-columns: 30px 1fr !important;
    column-gap: 6px !important;
  }

  .hero-badge-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .hero-badge strong,
  .hero-badge strong span {
    font-size: 8px !important;
  }

  .hero-badge-desc {
    font-size: 6px !important;
    margin-top: 6px !important;
  }
}

@media (max-width: 720px) {
  .hero-badges {
    width: 100% !important;          /* diminui a largura total dos 3 cards */
    max-width: 390px !important;    /* controla o tamanho máximo */
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
    margin: 8px 0 0 !important;
  }

  .hero-badge {
    height: 108px !important;        /* diminui a altura */
    min-height: 66px !important;
    padding: 13px 9px !important;    /* diminui o espaço interno */
    border-radius: 9px !important;

    grid-template-columns: 28px 1fr !important;
    column-gap: 6px !important;
  }

  .hero-badge-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .hero-badge strong {
    font-size: 7.6px !important;
    line-height: 1.05 !important;
  }

  .hero-badge > span {
    font-size: 6px !important;
    line-height: 1.1 !important;
    margin-top: 6px !important;
  }
}

@media (max-width: 720px) {
  .hero-badges {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 14px !important;
  }

  .hero-badge {
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  .hero-badges {
    width: calc(100vw - 88px) !important; /* distância total das laterais */
    max-width: none !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;

    margin: 14px auto 0 auto !important; /* centraliza esquerda/direita */
  }
}

@media (max-width: 720px) {
  .hero .eyebrow,
  .hero-title,
  .hero-sub,
  .hero-actions {
    margin-left: 22px !important;
  }
}

@media (max-width: 720px) {
  .hero-photo {
    right: -30px !important; /* move a imagem para a direita */
  }
}

/* =========================================================
   AJUSTE FINAL — CONTEÚDO DOS CARDS HERO MOBILE
   Mantém tamanho dos cards e ajusta só ícone/textos
   ========================================================= */

@media (max-width: 720px) {
  /* Mantém os cards no tamanho atual, ajusta só o conteúdo interno */
  .hero-badge {
    display: grid !important;
    grid-template-columns: 34px 1fr !important; /* espaço do ícone maior */
    grid-template-rows: auto auto !important;
    column-gap: 7px !important;
    align-items: flex-start !important;
  }

  /* Aumenta os emojis/ícones */
  .hero-badge-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    margin-top: 0 !important;
    object-fit: contain !important;
  }

  /* Faz o bloco de texto ocupar o espaço certo */
  .hero-badge-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }

  /* Texto branco */
  .hero-badge-text strong,
  .hero-badge strong {
    color: #ffffff !important;
    font-size: 8.4px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.25px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    white-space: normal !important;
  }

  .hero-badge-text strong span,
  .hero-badge strong span {
    display: block !important;
    color: #ffffff !important;
    font-size: 8.4px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  /* Texto cinza mais abaixo */
  .hero-badge-text > span,
  .hero-badge-desc,
  .hero-badge > span {
    color: rgba(255, 255, 255, .52) !important;
    font-size: 6.1px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    margin-top: 12px !important; /* distância entre branco e cinza */
    display: block !important;
  }
}

@media (max-width: 720px) {
  /* Texto branco dos cards */
  .hero-badge-text strong,
  .hero-badge strong,
  .hero-badge-text strong span,
  .hero-badge strong span {
    font-size: 9.2px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }

  /* Texto cinza dos cards */
  .hero-badge-text > span,
  .hero-badge-desc,
  .hero-badge > span {
    font-size: 7.8px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 720px) {
  .hero-badge-text strong,
  .hero-badge strong,
  .hero-badge-text strong span,
  .hero-badge strong span {
    transform: translateY(3px) !important; /* desce as palavras brancas */
  }
}

@media (max-width: 720px) {
  .hero-badges {
    margin-top: 28px !important; /* aumenta a distância dos botões */
  }
}

@media (max-width: 720px) {
  .hero-badge {
    height: 94px !important;
    min-height: 94px !important;
  }
}

@media (max-width: 720px) {
  .logo {
    margin-left: 22px !important;
  }
}

@media (max-width: 720px) {
  /* Diminui o espaço depois dos cards da hero */
  .hero {
    padding-bottom: 8px !important;
  }

  /* Diminui a altura vazia da hero */
  .hero-inner {
    min-height: 560px !important;
  }

  /* Sobe o título PROJETOS DESENVOLVIDOS */
  #projetos {
    padding-top: 8px !important;
  }

  #projetos .section-head {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 720px) {
  #projetos {
    margin-top: -180px !important; /* sobe a seção */
    padding-top: 0 !important;
    position: relative !important;
    z-index: 30 !important;
  }

  #projetos .section-head {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
}

/* =========================================================
   ALINHAMENTO FINAL — HERO CARDS E PROJETOS NA MESMA LARGURA
   ========================================================= */

@media (max-width: 720px) {
  .hero-badges,
  #projetos .container {
    width: calc(100vw - 88px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #projetos {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #projetos .section-head,
  #projetos .projects-grid {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   CORREÇÃO 381px ATÉ 430px — EVITA QUEBRAR NO 392px
   Cole no FINAL do portfolio.css
   ========================================================= */

@media (min-width: 381px) and (max-width: 430px) {

  /* Largura padrão alinhada para cards e projetos */
  .hero-badges,
  #projetos .container {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* HERO */
  .hero {
    padding-bottom: 8px !important;
  }

  .hero-inner {
    min-height: 560px !important;
  }

  .hero .eyebrow,
  .hero-title,
  .hero-sub,
  .hero-actions {
    margin-left: 18px !important;
  }

  .hero-title {
    max-width: 245px !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  .hero-sub {
    max-width: 195px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .hero-actions {
    max-width: 218px !important;
    grid-template-columns: 1.2fr .9fr !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

  .hero-actions .btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 9.6px !important;
    border-radius: 10px !important;
  }

  .hero-photo {
    right: -32px !important;
    width: 68% !important;
  }

  /* CARDS DA HERO */
  .hero-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 26px !important;
  }

  .hero-badge {
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    padding: 11px 7px !important;
    border-radius: 10px !important;

    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    column-gap: 6px !important;
    align-items: flex-start !important;
  }

  .hero-badge-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .hero-badge-text strong,
  .hero-badge strong,
  .hero-badge-text strong span,
  .hero-badge strong span {
    font-size: 8.2px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    transform: translateY(2px) !important;
  }

  .hero-badge-text > span,
  .hero-badge-desc,
  .hero-badge > span {
    font-size: 6.7px !important;
    line-height: 1.15 !important;
    margin-top: 10px !important;
  }

  /* PROJETOS */
  #projetos {
    margin-top: -190px !important;
    padding-top: 0 !important;
  }

  #projetos .section-head,
  #projetos .projects-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .proj-card.featured {
    grid-template-columns: .9fr 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .proj-card.featured .proj-media {
    min-height: 165px !important;
  }

  .proj-card.featured .proj-name {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .proj-card.featured .proj-desc {
    font-size: 10.8px !important;
    line-height: 1.35 !important;
  }

  .proj-card.featured .proj-problem {
    padding: 8px 9px !important;
    font-size: 9.8px !important;
    line-height: 1.3 !important;
  }

  .proj-card.featured .proj-tags {
    gap: 5px !important;
  }

  .proj-card.featured .proj-tags span {
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  .proj-card.featured .proj-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: 9.2px !important;
    border-radius: 8px !important;
  }

  .proj-card:not(.featured) {
    height: 142px !important;
    min-height: 142px !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 68px !important;
    min-height: 68px !important;
  }

  .proj-card:not(.featured) .proj-body {
    padding: 7px !important;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 8.7px !important;
    line-height: 1.15 !important;
  }
}



/* =========================================================
   MOBILE 0px até 490px — MESMO FORMATO DO 490px
   Não encolhe tudo proporcionalmente. Apenas adapta espaços.
   COLE NO FINAL DO portfolio.css
   ========================================================= */

@media (max-width: 490px) {
  body {
    overflow-x: hidden !important;
    background: #050505 !important;
  }

  .container {
    width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* HEADER */
  .header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .header-inner {
    height: 82px !important;
  }

  .logo {
    margin-left: 22px !important;
    font-size: clamp(22px, 5.8vw, 25px) !important;
    letter-spacing: -1px !important;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(5,5,5,.35) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* HERO */
  .hero {
    min-height: auto !important;
    padding-top: 104px !important;
    padding-bottom: 8px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 88% 40%, rgba(255,122,0,.18), transparent 18%),
      linear-gradient(180deg, #050505 0%, #050505 55%, #040404 100%) !important;
  }

  .hero-inner {
    position: relative !important;
    display: block !important;
    min-height: 560px !important;
    z-index: 5 !important;
  }

  .hero-text {
    display: contents !important;
  }

  .hero::before {
    width: 150px !important;
    height: 150px !important;
    top: 250px !important;
    right: -22px !important;
    opacity: .85 !important;
    border: 2px solid rgba(255,122,0,.58) !important;
    box-shadow:
      0 0 22px rgba(255,122,0,.42),
      inset 0 0 22px rgba(255,122,0,.10) !important;
  }

  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        rgba(5,5,5,.98) 30%,
        rgba(5,5,5,.86) 48%,
        rgba(5,5,5,.46) 68%,
        rgba(5,5,5,.08) 100%
      ),
      linear-gradient(
        180deg,
        #050505 0%,
        rgba(5,5,5,.95) 13%,
        transparent 31%,
        transparent 78%,
        #050505 100%
      ) !important;
  }

  /* TEXTO HERO */
  .hero .eyebrow,
  .hero-title,
  .hero-sub,
  .hero-actions {
    position: relative !important;
    z-index: 30 !important;
    margin-left: 22px !important;
  }

  .hero .eyebrow {
    top: -8px !important;
    left: -6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: max-content !important;
    max-width: calc(100vw - 44px) !important;
    margin-bottom: 14px !important;
    padding: 5px 7px !important;
    font-size: clamp(6.2px, 1.7vw, 6.7px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .hero-title {
    max-width: 260px !important;
    margin-top: -12px !important;
    margin-bottom: 12px !important;
    font-size: clamp(18px, 5.1vw, 20px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1.1px !important;
    font-weight: 900 !important;
  }

  .hero-sub {
    max-width: 190px !important;
    margin-bottom: 16px !important;
    font-size: clamp(9.7px, 2.7vw, 10.5px) !important;
    line-height: 1.35 !important;
  }

  /* FOTO */
  .hero-photo {
    position: absolute !important;
    z-index: 6 !important;
    top: -70px !important;
    right: -30px !important;
    width: 67% !important;
    height: 500px !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .hero-photo-frame {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .hero-photo-frame::after,
  .hero-photo-badge {
    display: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 0 !important;
    transform: scale(1.04) !important;
    filter: saturate(1.05) contrast(1.03) brightness(.96) !important;

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 88%,
      rgba(0,0,0,.45) 95%,
      transparent 100%
    ) !important;

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 88%,
      rgba(0,0,0,.45) 95%,
      transparent 100%
    ) !important;
  }

  /* BOTÕES */
  .hero-actions {
    width: 214px !important;
    max-width: 214px !important;
    display: grid !important;
    grid-template-columns: 1.2fr .9fr !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 9.6px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .hero-actions .btn-whatsapp,
  .hero-actions a:first-child {
    background: #16743f !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 18px rgba(22,116,63,.35) !important;
  }

  .hero-actions .btn-outline {
    background: rgba(8,8,8,.75) !important;
    border: 1px solid #ff7a00 !important;
    box-shadow: 0 0 15px rgba(255,122,0,.18) !important;
  }

  .hero-actions img,
  .hero-actions svg,
  .hero-actions .wa-icon {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    object-fit: contain !important;
  }

  /* CARDS DA HERO */
  .hero-badges {
    position: relative !important;
    z-index: 30 !important;
    width: calc(100vw - 88px) !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 28px auto 0 auto !important;
    padding: 0 !important;
  }

  .hero-badge {
    width: 100% !important;
    height: 94px !important;
    min-height: 94px !important;
    padding: 13px 9px !important;
    border-radius: 10px !important;

    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    column-gap: 7px !important;
    align-items: flex-start !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
      rgba(18,18,18,.94) !important;

    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.30) !important;
    overflow: hidden !important;
  }

  .hero-badge:nth-child(n+4) {
    display: none !important;
  }

  .hero-badge::before,
  .hero-badge::after {
    display: none !important;
    content: none !important;
  }

  .hero-badge-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    object-fit: contain !important;
  }

  .hero-badge-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  .hero-badge-text strong,
  .hero-badge-text strong span {
    display: block !important;
    color: #fff !important;
    font-size: 9.2px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    transform: translateY(3px) !important;
  }

  .hero-badge-text > span,
  .hero-badge-desc {
    display: block !important;
    color: rgba(255,255,255,.52) !important;
    font-size: 7.8px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    margin-top: 12px !important;
  }

  /* PROJETOS */
  #projetos {
    margin-top: -180px !important;
    padding: 0 0 24px !important;
    background: #050505 !important;
    position: relative !important;
    z-index: 40 !important;
  }

  #projetos .container {
    width: calc(100vw - 88px) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #projetos .section-head {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  #projetos .eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 0 !important;
    font-weight: 900 !important;
  }

  #projetos .eyebrow::before {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ff7a00 !important;
    flex: 0 0 auto !important;
  }

  #projetos .eyebrow::after {
    content: "PROJETOS DESENVOLVIDOS" !important;
    color: #fff !important;
    font-size: clamp(11px, 3.3vw, 13px) !important;
    font-weight: 900 !important;
  }

  #projetos .section-title,
  #projetos .section-lead {
    display: none !important;
  }

  .projects-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .proj-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .proj-card.featured {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: .88fr 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .proj-card.featured .proj-media {
    min-height: 148px !important;
    height: 100% !important;
    border-radius: 11px !important;
  }

  .proj-card.featured .proj-name {
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
  }

  .proj-card.featured .proj-desc {
    font-size: 10.8px !important;
    line-height: 1.34 !important;
    margin-bottom: 7px !important;
  }

  .proj-card.featured .proj-problem {
    padding: 8px 9px !important;
    font-size: 9.8px !important;
    line-height: 1.28 !important;
    border-radius: 10px !important;
    margin-bottom: 7px !important;
  }

  .proj-card.featured .proj-tags {
    gap: 5px !important;
    margin-bottom: 7px !important;
  }

  .proj-card.featured .proj-tags span {
    padding: 4px 6px !important;
    font-size: 8px !important;
    border-radius: 6px !important;
  }

  .proj-card.featured .proj-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    font-size: 9.3px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .proj-badge {
    top: 8px !important;
    left: 8px !important;
    padding: 4px 8px !important;
    font-size: 8px !important;
    border-radius: 7px !important;
  }

  .proj-card:not(.featured) {
    height: 138px !important;
    min-height: 138px !important;
    border-radius: 12px !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 68px !important;
    min-height: 68px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
  }

  .proj-card:not(.featured) .proj-body {
    padding: 7px !important;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 8.6px !important;
    line-height: 1.15 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .proj-card:not(.featured) .proj-problem,
  .proj-card:not(.featured) .proj-tags,
  .proj-card:not(.featured) .proj-actions {
    display: none !important;
  }
}

/* Ajuste só para telas muito estreitas */
@media (max-width: 390px) {
  .hero-badges,
  #projetos .container {
    width: calc(100vw - 52px) !important;
  }

  .hero-photo {
    right: -38px !important;
    width: 70% !important;
  }

  .hero-actions {
    width: 210px !important;
    max-width: 210px !important;
  }

  .hero-badge {
    height: 90px !important;
    min-height: 90px !important;
    padding: 11px 7px !important;
    grid-template-columns: 30px 1fr !important;
  }

  .hero-badge-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .hero-badge-text strong,
  .hero-badge-text strong span {
    font-size: 8.4px !important;
  }

  .hero-badge-text > span,
  .hero-badge-desc {
    font-size: 7px !important;
    margin-top: 10px !important;
  }

  .proj-card.featured {
    grid-template-columns: .9fr 1fr !important;
  }

  .proj-card.featured .proj-media {
    min-height: 138px !important;
  }

  .proj-card.featured .proj-name {
    font-size: 15px !important;
  }

  .proj-card.featured .proj-desc {
    font-size: 10px !important;
  }

  .proj-card:not(.featured) {
    height: 130px !important;
    min-height: 130px !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 62px !important;
    min-height: 62px !important;
  }
}

/* =========================================================
   ALINHAMENTO FINAL — MARGEM ÚNICA PARA TUDO NO MOBILE
   ESTE BLOCO TEM QUE SER O ÚLTIMO DO CSS
   ========================================================= */

@media (max-width: 430px) {
  :root {
    --top-x: 6px;
    --section-x: 16px;
    --section-w: calc(100vw - 32px);
  }

  .logo,
  .hero .eyebrow,
  .hero-title,
  .hero-sub,
  .hero-actions {
    margin-left: var(--top-x) !important;
  }

  .hero-badges {
    width: var(--section-w) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  #projetos {
    margin-top: -205px !important;
  }

  #projetos .container {
    width: var(--section-w) !important;
    max-width: none !important;
    margin-left: var(--section-x) !important;
    margin-right: var(--section-x) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  #projetos .section-head,
  #projetos .projects-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .proj-card.featured {
    display: grid !important;
    grid-template-columns: .95fr 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    align-items: start !important;
  }

  .proj-featured-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .proj-card.featured .proj-media {
    width: 100% !important;
    min-height: 132px !important;
    height: 132px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .proj-card.featured .proj-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 8px !important;
    transform: none !important;
  }

  .proj-tech-under {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .tech-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 6px 12px rgba(0,0,0,.32) !important;
  }

  .tech-html {
    background: linear-gradient(135deg, #7b1f0c 0%, #a43a16 55%, #4d1307 100%) !important;
  }

  .tech-css {
    background: linear-gradient(135deg, #06376f 0%, #0d5aa8 55%, #05224a 100%) !important;
  }

  .tech-js {
    background: linear-gradient(135deg, #6a4a05 0%, #9b7612 55%, #3f2b02 100%) !important;
  }

  .proj-card.featured .proj-tags {
    display: none !important;
  }

  .proj-card.featured .proj-name {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }

  .proj-card.featured .proj-desc {
    font-size: 9.4px !important;
    line-height: 1.25 !important;
    margin-bottom: 5px !important;
  }

  .proj-card.featured .proj-problem {
    padding: 6px 7px !important;
    font-size: 8.7px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 8.3px !important;
  }
}

/* IMAGEM + BADGE DO CARD DESTAQUE — MOBILE */
@media (max-width: 720px) {
  .proj-card.featured .proj-media {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 1.5px solid #ff7a00 !important;
    border-radius: 16px !important;
    background: #0b0b0b !important;
  }

  .proj-card.featured .proj-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .proj-card.featured .proj-badge {
    position: absolute !important;
    top: 9px !important;
    left: 9px !important;
    z-index: 5 !important;
    background: linear-gradient(135deg, #ff8a2a, #ff6800) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 6px 11px !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(255,106,0,.35) !important;
  }
}

@media (max-width: 390px) {
  .proj-tech-under {
    gap: 6px !important;
  }

  .tech-pill {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
  }

  .proj-card.featured .proj-media {
    aspect-ratio: 1 / 0.95 !important;
    border-radius: 14px !important;
  }

  .proj-card.featured .proj-badge {
    top: 7px !important;
    left: 7px !important;
    padding: 5px 9px !important;
    font-size: 8.5px !important;
    border-radius: 8px !important;
  }
}

/* CORREÇÃO: PROJETOS + BOTÕES DO CARD DESTAQUE — MOBILE */
@media (max-width: 720px) {
  #projetos {
    margin-top: -195px !important;
    padding-top: 6px !important;
    position: relative !important;
    z-index: 30 !important;
  }

  #projetos .section-head {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .proj-card.featured {
    overflow: hidden !important;
    min-height: auto !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  .proj-card.featured .proj-body {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .proj-card.featured .proj-media {
    width: 96% !important;
    min-height: 178px !important;
    height: 178px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .proj-card.featured .proj-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .proj-card.featured .proj-body > .proj-tags {
    display: none !important;
  }

  .proj-card.featured .proj-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
  }

  .proj-card.featured .proj-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    text-decoration: none !important;
    gap: 5px !important;
  }

  .proj-card.featured .proj-actions .btn:first-child {
    background: linear-gradient(180deg, #ff9a3d 0%, #ff7a00 45%, #ff5a00 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(255,122,0,.32) !important;
  }

  .proj-card.featured .proj-actions .btn:last-child {
    background: rgba(10,10,10,.92) !important;
    color: #fff !important;
    border: 1px solid rgba(255,122,0,.65) !important;
    box-shadow: none !important;
  }

  .proj-card.featured .proj-actions .btn svg {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
  }
}

@media (max-width: 390px) {
  #projetos {
    margin-top: -185px !important;
    padding-top: 6px !important;
  }

  .proj-card.featured .proj-media {
    height: 168px !important;
    min-height: 168px !important;
  }

  .proj-card.featured .proj-actions {
    gap: 6px !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}

/* AJUSTE FINO: TAGS MENORES + BOTÕES MAIORES */
@media (max-width: 720px) {
  .tech-pill {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 9.8px !important;
    border-radius: 7px !important;
  }

  .proj-tech-under {
    gap: 6px !important;
  }

  .proj-card.featured .proj-actions {
    grid-template-columns: 1.12fr 1fr !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 11.2px !important;
    font-weight: 900 !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

@media (max-width: 390px) {
  .tech-pill {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 10.5px !important;
    padding: 0 9px !important;
  }
}

/* AJUSTE FINO FINAL: BOTÕES MAIS BAIXOS + SETA ">" */
@media (max-width: 720px) {
  .proj-card.featured .proj-actions {
    margin-top: 12px !important;
    align-items: center !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 10.4px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .proj-card.featured .proj-actions .btn .btn-arrow {
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-left: 2px !important;
  }
}

@media (max-width: 390px) {
  .proj-card.featured .proj-actions {
    margin-top: 10px !important;
    gap: 7px !important;
  }

  .proj-card.featured .proj-actions .btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 9.8px !important;
  }
}

/* ============================================================
   CARDS PEQUENOS QUADRADOS — MOBILE
   ============================================================ */

@media (max-width: 720px) {
  .proj-card:not(.featured) {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 54% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
  }

  .proj-card:not(.featured) .proj-body {
    height: 46% !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 9.6px !important;
    line-height: 1.08 !important;
    margin-bottom: 2px !important;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 8px !important;
    line-height: 1.12 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  .proj-card:not(.featured) {
    border-radius: 6px !important;
  }

  .proj-card:not(.featured) .proj-media {
    height: 53% !important;
  }

  .proj-card:not(.featured) .proj-body {
    height: 47% !important;
    padding: 5px !important;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 9.2px !important;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 7.7px !important;
  }
}

/* ============================================================
   TAGS DO CARD DESTAQUE (DAY LANCHES) — MOBILE
   ============================================================ */

@media (max-width: 720px) {
  .proj-card.featured .proj-tags {
    grid-column: 1 !important;
    grid-row: auto !important;

    display: grid !important;
    grid-template-columns: repeat(3, max-content) !important;
    justify-content: start !important;
    align-items: center !important;

    gap: 7px !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
  }

  .proj-card.featured .proj-tags span {
    height: 24px !important;
    min-height: 24px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 10px !important;
    border-radius: 6px !important;

    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .proj-card.featured .proj-tags span:nth-child(1) {
    min-width: 47px !important;
    background: linear-gradient(135deg, #9b351c, #5b180d) !important;
    border-color: rgba(255, 120, 70, .45) !important;
    color: #fff !important;
  }

  .proj-card.featured .proj-tags span:nth-child(2) {
    min-width: 42px !important;
    background: linear-gradient(135deg, #0f65bc, #063667) !important;
    border-color: rgba(55, 145, 255, .45) !important;
    color: #fff !important;
  }

  .proj-card.featured .proj-tags span:nth-child(3) {
    min-width: 78px !important;
    background: linear-gradient(135deg, #9b7a12, #5a3f00) !important;
    border-color: rgba(255, 190, 35, .45) !important;
    color: #fff !important;
  }
}

@media (max-width: 390px) {
  .proj-card.featured .proj-tags {
    gap: 6px !important;
    margin-top: 7px !important;
  }

  .proj-card.featured .proj-tags span {
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 8px !important;
    font-size: 8.5px !important;
  }

  .proj-card.featured .proj-tags span:nth-child(1) {
    min-width: 44px !important;
  }

  .proj-card.featured .proj-tags span:nth-child(2) {
    min-width: 39px !important;
  }

  .proj-card.featured .proj-tags span:nth-child(3) {
    min-width: 72px !important;
  }
}

/* ============================================================
   LARGURA DAS TAGS DAY LANCHES — MOBILE
   ============================================================ */

@media (max-width: 720px) {
  .proj-card.featured > .proj-tags {
    width: 58% !important;
    max-width: 58% !important;
    gap: 6px !important;
  }

  .proj-card.featured > .proj-tags span {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 8.4px !important;
    border-radius: 6px !important;
  }
}

/* ============================================================
   TEXTO DOS BOTÕES DAY LANCHES — MOBILE
   ============================================================ */

@media (max-width: 720px) {
  .proj-card.featured .proj-actions .btn {
    font-size: 8.4px !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: center !important;
  }

  .proj-card.featured .proj-actions .btn .cor,
  .proj-card.featured .proj-actions .btn span {
    font-size: inherit !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 720px) {
  .proj-card.featured .proj-problem {
    border: 1px solid rgba(255, 122, 0, .75) !important;
    background:
      linear-gradient(135deg, rgba(255, 122, 0, .10), rgba(255, 122, 0, .025)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 122, 0, .12),
      0 0 18px rgba(255, 122, 0, .10) !important;
  }
}

@media (max-width: 720px) {
  .proj-card.featured .proj-tags {
    width: 100px !important; /* diminui/aumenta o comprimento total das 3 tags */
    max-width: 100px !important;
    display: flex !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
  }

  .proj-card.featured .proj-tags span {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 720px) {
  /* NÃO diminui o bloco/pai das tags */
  .proj-card.featured .proj-tags {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
  }

  /* diminui SOMENTE o comprimento de cada tag */
  .proj-card.featured .proj-tags span {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;

    padding-left: 1px !important;
    padding-right: -30px !important;

    height: 26px !important;
    min-height: 26px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 10px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 720px) {
  .proj-card.featured .proj-media {
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .proj-card.featured .proj-media img {
    border-radius: 8px !important;
  }
}

@media (max-width: 720px) {
  .nav-toggle {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-toggle span {
    display: block !important;
    width: 26px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   MENU MOBILE — OVERLAY TELA CHEIA
   ============================================================ */

@media (max-width: 1024px) {
  .header.open .nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(5, 5, 5, .96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .header.open .nav a {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
  }

  .header.open .nav a:hover,
  .header.open .nav a:active {
    color: #ff7a00 !important;
  }

  .header.open .nav-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 22px !important;
    z-index: 10000 !important;
  }

  .header.open .nav-toggle span {
    transition: transform .3s ease, opacity .2s ease !important;
  }

  .header.open .nav-toggle span:nth-child(1) {
    transform: translateY(5px) rotate(45deg) !important;
  }

  .header.open .nav-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  .header.open .nav-toggle span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg) !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }
}

/* ============================================================
   MENU MOBILE — OVERLAY PREMIUM (PÁGINA COMPLETA)
   ============================================================ */

.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility .35s ease;
  pointer-events: none;
}

.mob-menu.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mob-menu__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 85%, rgba(255,122,0,.18), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,122,0,.06), transparent 35%),
    #070707;
  z-index: 0;
}

.mob-menu__bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 45%;
  background: url('../img/foto-hero.jpg') center top / cover no-repeat;
  opacity: .08;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.5), transparent 70%),
                      linear-gradient(to bottom, rgba(0,0,0,.4), transparent 80%);
  mask-image: linear-gradient(to left, rgba(0,0,0,.5), transparent 70%),
              linear-gradient(to bottom, rgba(0,0,0,.4), transparent 80%);
  pointer-events: none;
}

.mob-menu__scroll {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 22px 40px;
}

/* ── TOPO ── */
.mob-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(7,7,7,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 0 -22px;
  padding: 0 22px;
}

.mob-menu__logo {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.8px;
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
}

.mob-menu__logo span {
  color: #ff7a00;
}

.mob-menu__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease;
}

.mob-menu__close:hover {
  background: rgba(255,255,255,.12);
}

/* ── HERO DO MENU ── */
.mob-menu__hero {
  margin-top: 28px;
  margin-bottom: 32px;
}

.mob-menu__title {
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.4px;
  margin-bottom: 14px;
}

.mob-menu__title span {
  background: linear-gradient(135deg, #ff9a2f, #ff6a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mob-menu__sub {
  color: rgba(255,255,255,.68);
  font-size: 14px;
  line-height: 1.55;
  max-width: 320px;
  margin-bottom: 22px;
}

.mob-menu__sub strong {
  color: #ff7a00;
  font-weight: 700;
}

/* ── BOTÕES CTA ── */
.mob-menu__ctas {
  display: flex;
  gap: 12px;
}

.mob-menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.mob-menu__btn:hover {
  transform: translateY(-2px);
}

.mob-menu__btn--wa {
  background: linear-gradient(135deg, #25d366, #16b855);
  color: #fff;
  box-shadow: 0 10px 28px rgba(37,211,102,.32);
}

.mob-menu__btn--outline {
  background: rgba(8,8,8,.6);
  color: #fff;
  border: 1px solid rgba(255,122,0,.72);
}

/* ── NAVEGAÇÃO ── */
.mob-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}

.mob-menu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.mob-menu__item:hover,
.mob-menu__item:active {
  border-color: rgba(255,122,0,.5);
  background: rgba(255,122,0,.06);
}

.mob-menu__item--active {
  border-color: rgba(255,122,0,.65) !important;
  background: rgba(255,122,0,.08) !important;
  box-shadow: 0 0 20px rgba(255,122,0,.10);
}

.mob-menu__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.mob-menu__label {
  flex: 1;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.mob-menu__arrow {
  color: #ff7a00;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ── ESPECIALIDADES ── */
.mob-menu__specs {
  margin-bottom: 28px;
}

.mob-menu__specs-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.mob-menu__specs-bolt {
  font-size: 18px;
}

.mob-menu__specs-title span {
  color: #ff7a00;
}

.mob-menu__specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.mob-menu__spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 8px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,122,0,.28);
}

.mob-menu__spec strong {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.mob-menu__spec span {
  color: rgba(255,255,255,.52);
  font-size: 10.5px;
  line-height: 1.3;
}

/* ── FOOTER/STATS ── */
.mob-menu__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 24px;
}

.mob-menu__footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mob-menu__footer-left svg {
  flex-shrink: 0;
}

.mob-menu__footer-left strong {
  display: block;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
}

.mob-menu__footer-left span {
  display: block;
  color: rgba(255,255,255,.52);
  font-size: 10px;
  line-height: 1.3;
  margin-top: 2px;
}

.mob-menu__stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.mob-menu__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 10px 8px;
  border-radius: 10px;
  background: rgba(255,122,0,.08);
  border: 1px solid rgba(255,122,0,.25);
  min-width: 68px;
}

.mob-menu__stat strong {
  color: #ff7a00;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.mob-menu__stat span {
  color: rgba(255,255,255,.58);
  font-size: 8.5px;
  line-height: 1.2;
  margin-top: 4px;
}

/* ── DESKTOP: ESCONDER OVERLAY ── */
@media (min-width: 1025px) {
  .mob-menu {
    display: none !important;
  }
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */

.testimonials-section {
  background:
    radial-gradient(circle at 20% 80%, rgba(255,122,0,.08), transparent 30%),
    #050505;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.testimonial-card {
  position: relative;
  padding: 28px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    rgba(15,15,15,.95);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 42px rgba(0,0,0,.42);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,122,0,.45);
  box-shadow: 0 22px 56px rgba(255,122,0,.14);
}

.testimonial-stars {
  color: #ff7a00;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.testimonial-text {
  color: rgba(255,255,255,.76);
  font-size: 15px;
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 22px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,122,0,.22), rgba(255,122,0,.08));
  border: 1px solid rgba(255,122,0,.35);
  display: grid;
  place-items: center;
  color: #ff7a00;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}

.testimonial-name {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.testimonial-role {
  display: block;
  color: #ff7a00;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

/* DEPOIMENTOS — MOBILE */
@media (max-width: 720px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .testimonial-card {
    padding: 22px;
    border-radius: 16px;
  }

  .testimonial-stars {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .testimonial-text {
    font-size: 14px;
    margin-bottom: 18px;
  }
}

/* ============================================================
   SOBRE MIM
   ============================================================ */

.about-section {
  background:
    radial-gradient(circle at 80% 30%, rgba(255,122,0,.08), transparent 30%),
    #050505;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.about-text p {
  color: rgba(255,255,255,.76);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.about-text p:last-child {
  margin-bottom: 0;
}

.about-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.about-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px 16px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    rgba(15,15,15,.95);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transition: transform .25s ease, border-color .25s ease;
}

.about-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,122,0,.4);
}

.about-card-icon {
  font-size: 28px;
}

.about-card strong {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

/* SOBRE MIM — MOBILE */
@media (max-width: 720px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-text p {
    font-size: 14px;
  }

  .about-cards {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .about-card {
    padding: 18px 12px;
    border-radius: 14px;
  }

  .about-card-icon {
    font-size: 24px;
  }

  .about-card strong {
    font-size: 12.5px;
  }
}

/* ============================================================
   AVATAR COM FOTO — DEPOIMENTOS
   ============================================================ */

.testimonial-avatar-img {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 122, 0, .55);
  box-shadow: 0 0 18px rgba(255, 122, 0, .18);
  background: rgba(255, 122, 0, .08);
}

@media (max-width: 720px) {
  .testimonial-avatar-img {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
}

/* ============================================================
   BLOCO STATS DO MENU MOBILE — LAYOUT EMPILHADO
   ============================================================ */

@media (max-width: 720px) {
  .mob-menu__footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
    align-items: start !important;
  }

  .mob-menu__footer-left {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mob-menu__footer-left svg {
    width: 28px !important;
    height: 28px !important;
    margin-top: 2px !important;
  }

  .mob-menu__footer-left strong {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .mob-menu__footer-left span {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin-top: 3px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .mob-menu__stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    flex-shrink: unset !important;
  }

  .mob-menu__stat {
    min-width: 0 !important;
    padding: 12px 6px 10px !important;
    border-radius: 10px !important;
  }

  .mob-menu__stat strong {
    font-size: 18px !important;
  }

  .mob-menu__stat span {
    font-size: 9px !important;
    margin-top: 5px !important;
    white-space: normal !important;
    word-break: normal !important;
  }
}

/* ============================================================
   CORREÇÃO CARDS HERO — POCO C65 (até 430px)
   Ajusta apenas os 3 cards da hero para texto legível
   ============================================================ */

@media (max-width: 430px) {
  .hero-badge {
    grid-template-columns: 26px 1fr !important;
    column-gap: 6px !important;
    padding: 10px 7px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .hero-badge-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }

  .hero-badge-text {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .hero-badge-text strong,
  .hero-badge-text strong span {
    font-size: 8px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -0.25px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    transform: none !important;
  }

  .hero-badge-text > span,
  .hero-badge-desc {
    font-size: 6.6px !important;
    line-height: 1.18 !important;
    margin-top: 7px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (max-width: 390px) {
  .hero-badge {
    grid-template-columns: 24px 1fr !important;
    column-gap: 5px !important;
    padding: 9px 6px !important;
  }

  .hero-badge-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  .hero-badge-text strong,
  .hero-badge-text strong span {
    font-size: 7.5px !important;
    line-height: 1.08 !important;
  }

  .hero-badge-text > span,
  .hero-badge-desc {
    font-size: 6.2px !important;
    line-height: 1.15 !important;
    margin-top: 6px !important;
  }
}

/* ============================================================
   CORREÇÃO MENU MOBILE — POCO C65 (até 430px)
   Ajusta apenas a tela do menu overlay mobile
   ============================================================ */

@media (max-width: 430px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .mob-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .mob-menu * {
    box-sizing: border-box !important;
  }

  .mob-menu__scroll {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px 40px !important;
    overflow-x: hidden !important;
  }

  .mob-menu__top {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .mob-menu__close {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .mob-menu__hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .mob-menu__title {
    font-size: 26px !important;
    line-height: 1.12 !important;
    word-break: normal !important;
  }

  .mob-menu__sub {
    font-size: 13px !important;
    max-width: 100% !important;
  }

  .mob-menu__ctas {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 0.78fr !important;
    gap: 10px !important;
    margin-top: 22px !important;
    overflow: hidden !important;
  }

  .mob-menu__ctas .mob-menu__btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mob-menu__btn--outline {
    font-size: 12.5px !important;
    padding: 0 8px !important;
  }

  .mob-menu__nav {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .mob-menu__item {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .mob-menu__specs {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .mob-menu__specs-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .mob-menu__spec {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 14px 6px 12px !important;
  }

  .mob-menu__footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .mob-menu__stats {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .mob-menu__stat {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 380px) {
  .mob-menu__scroll {
    padding: 0 16px 40px !important;
  }

  .mob-menu__top {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    padding: 0 16px !important;
  }

  .mob-menu__ctas {
    grid-template-columns: 1fr 0.72fr !important;
    gap: 8px !important;
  }

  .mob-menu__ctas .mob-menu__btn {
    height: 46px !important;
    min-height: 46px !important;
    font-size: 12px !important;
  }

  .mob-menu__btn--outline {
    font-size: 11.5px !important;
  }

  .mob-menu__title {
    font-size: 24px !important;
  }

  .mob-menu__specs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* ============================================================
   BOTÃO X DO MENU MOBILE — SEM FUNDO/BORDA
   ============================================================ */

.mob-menu__close {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.mob-menu__close::before,
.mob-menu__close::after {
  box-shadow: none !important;
  border: none !important;
}

/* ============================================================
   BOTÃO FLUTUANTE ORÇAMENTO
   ============================================================ */

.orcamento-float {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 56px;
  padding: 0 28px;
  border-radius: 15px;
  border: none;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.2px;
  cursor: pointer;
  box-shadow:
    0 0 32px rgba(255,122,0,.26),
    0 14px 36px rgba(255,106,0,.28);
  transition: transform .22s ease, box-shadow .22s ease;
}

.orcamento-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 48px rgba(255,122,0,.38),
    0 18px 44px rgba(255,106,0,.36);
}

.orcamento-float svg {
  color: #fff;
  flex-shrink: 0;
}

/* ============================================================
   CHAT IA — ORÇAMENTO
   ============================================================ */

.orcamento-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.orcamento-overlay.active {
  opacity: 1;
  visibility: visible;
}

.orcamento-chat-modal {
  position: relative;
  width: 92%;
  max-width: 520px;
  height: 80vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: rgba(12,12,12,.98);
  border: 1px solid rgba(255,122,0,.45);
  box-shadow:
    0 24px 64px rgba(0,0,0,.60),
    0 0 40px rgba(255,122,0,.12);
  transform: translateY(20px);
  transition: transform .3s ease;
  overflow: hidden;
}

.orcamento-overlay.active .orcamento-chat-modal {
  transform: translateY(0);
}

.orcamento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(18,18,18,.95);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.orcamento-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.orcamento-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,122,0,.14);
  border: 1px solid rgba(255,122,0,.35);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}

.orcamento-header h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.3px;
  line-height: 1.2;
}

.orcamento-status {
  color: #25d366;
  font-size: 11px;
  font-weight: 700;
}

.orcamento-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background .2s ease;
  flex-shrink: 0;
}

.orcamento-close:hover {
  background: rgba(255,255,255,.08);
}

/* ── CHAT AREA ──────────────────────────────────────────────── */
.orcamento-chat {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  animation: chatFade .3s ease;
}

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

.chat-msg--ai {
  align-self: flex-start;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  border-bottom-left-radius: 4px;
}

.chat-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(255,122,0,.18), rgba(255,122,0,.08));
  border: 1px solid rgba(255,122,0,.30);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg--ai strong {
  color: #ff9a2f;
}

.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-bottom-left-radius: 4px;
}

.chat-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,122,0,.6);
  animation: typingBounce .6s ease-in-out infinite;
}

.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes typingBounce {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* ── WA BUTTON ──────────────────────────────────────────────── */
.orcamento-chat-wa {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.orcamento-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #25d366, #16b855);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(37,211,102,.30);
  transition: transform .2s ease, box-shadow .2s ease;
}

.orcamento-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(37,211,102,.40);
}

/* ── INPUT BAR ──────────────────────────────────────────────── */
.orcamento-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(15,15,15,.95);
  flex-shrink: 0;
}

.orcamento-input-bar input {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .2s ease;
}

.orcamento-input-bar input::placeholder {
  color: rgba(255,255,255,.35);
}

.orcamento-input-bar input:focus {
  border-color: rgba(255,122,0,.55);
}

.orcamento-input-bar button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}

.orcamento-input-bar button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(255,122,0,.30);
}

.orcamento-input-bar button:disabled {
  opacity: .4;
  pointer-events: none;
}

/* ── CHAT MOBILE ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .orcamento-float {
    left: 14px;
    bottom: 26px;
    height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 12px;
    gap: 7px;
  }

  .orcamento-float svg {
    width: 16px;
    height: 16px;
  }

  .orcamento-chat-modal {
    width: 96%;
    height: 88vh;
    max-height: none;
    border-radius: 18px;
  }

  .orcamento-header {
    padding: 14px 16px;
  }

  .orcamento-header h2 {
    font-size: 15px;
  }

  .orcamento-chat {
    padding: 16px;
    gap: 12px;
  }

  .chat-msg {
    max-width: 88%;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 14px;
  }

  .orcamento-input-bar {
    padding: 10px 12px;
    gap: 8px;
  }

  .orcamento-input-bar input {
    height: 40px;
    font-size: 13px;
    padding: 0 12px;
    border-radius: 10px;
  }

  .orcamento-input-bar button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .orcamento-send {
    height: 44px;
    font-size: 13px;
    border-radius: 10px;
  }
}

@media (max-width: 430px) {
  .orcamento-float {
    left: 12px;
    bottom: 24px;
    height: 44px;
    padding: 0 14px;
    font-size: 11px;
    border-radius: 10px;
  }

  .orcamento-float svg {
    width: 15px;
    height: 15px;
  }

  .orcamento-chat-modal {
    width: 98%;
    border-radius: 16px;
  }

  .chat-msg {
    max-width: 90%;
    font-size: 12.5px;
  }
}

/* ============================================================
   DESKTOP — LAYOUT PREMIUM (min-width: 721px)
   ============================================================ */

@media (min-width: 721px) {

  /* ── BASE ──────────────────────────────────────────────────── */
  .container {
    max-width: 1200px;
    padding: 0 32px;
  }

  /* ── HEADER ────────────────────────────────────────────────── */
  .header {
    position: fixed;
    background: rgba(5,5,5,.80);
    border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .header-inner {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    margin-left: 0 !important;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.8px;
  }

  .nav {
    display: flex !important;
    align-items: center;
    gap: 32px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .nav a {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,.70);
    transition: color .2s ease;
  }

  .nav a:hover {
    color: var(--orange);
  }

  .nav-toggle {
    display: none !important;
  }

  .nav-cta {
    display: inline-flex !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 20px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  /* ── HERO ──────────────────────────────────────────────────── */
  .hero {
    min-height: calc(100vh - 78px);
    padding: 130px 0 70px;
    overflow: hidden;
    background:
      radial-gradient(circle at 72% 36%, rgba(255,122,0,.20), transparent 24%),
      radial-gradient(circle at 82% 40%, rgba(255,122,0,.12), transparent 28%),
      linear-gradient(180deg, #050505 0%, #070707 58%, #050505 100%);
  }

  .hero::before {
    width: 340px;
    height: 340px;
    right: 10%;
    top: 200px;
    opacity: .65;
    border: 2px solid rgba(255,122,0,.50);
    box-shadow:
      0 0 24px rgba(255,122,0,.38),
      inset 0 0 32px rgba(255,122,0,.12);
  }

  .hero::after {
    position: absolute;
    inset: auto 0 0 0;
    height: 200px;
    background: linear-gradient(180deg, transparent, #050505 85%);
  }

  .hero-inner {
    display: grid !important;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 60px;
    min-height: auto !important;
    position: relative;
    z-index: 3;
  }

  .hero-text {
    display: block !important;
    max-width: 620px;
    position: relative;
    z-index: 5;
  }

  /* ── EYEBROW ──────────────────────────────────────────────── */
  .hero .eyebrow {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: none;
    margin: 0 0 22px !important;
    margin-left: 0 !important;
    padding: 8px 16px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .6px;
    white-space: nowrap;
    background: rgba(5,5,5,.45);
    border: 1px solid var(--border-orange);
    border-radius: 999px;
    box-shadow: 0 0 24px rgba(255,122,0,.10);
  }

  /* ── TÍTULO ────────────────────────────────────────────────── */
  .hero-title {
    position: static !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    max-width: 600px !important;
    margin: 0 0 20px !important;
    font-size: clamp(48px, 4.4vw, 68px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: -2.4px;
    color: #fff;
  }

  .hero-title .linha-title {
    display: block;
  }

  .hero-title .grad-text {
    display: inline;
    background: linear-gradient(135deg, #ff9a2f, #ff6a00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* ── SUBTÍTULO ─────────────────────────────────────────────── */
  .hero-sub {
    position: static !important;
    margin-left: 0 !important;
    max-width: 520px !important;
    margin: 0 0 28px !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
    color: rgba(255,255,255,.72);
  }

  /* ── BOTÕES HERO ───────────────────────────────────────────── */
  .hero-actions {
    position: static !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 14px;
    max-width: none !important;
    width: auto !important;
    margin: 0 0 40px !important;
  }

  .hero-actions .btn {
    width: auto !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 24px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap;
    line-height: 1 !important;
  }

  .hero-actions .btn-whatsapp,
  .hero-actions .btn:first-child {
    width: auto !important;
    flex: none !important;
    background: linear-gradient(135deg, #25d366, #16b855) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(37,211,102,.30) !important;
  }

  .hero-actions .btn-outline {
    width: auto !important;
    flex: none !important;
    background: rgba(8,8,8,.62) !important;
    border: 1px solid rgba(255,122,0,.80) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .hero-actions .wa-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    object-fit: contain !important;
  }

  /* ── FOTO ──────────────────────────────────────────────────── */
  .hero-photo {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 500px !important;
    justify-self: center;
    overflow: hidden !important;
    z-index: 4;
    margin: 0 !important;
    pointer-events: auto;
    opacity: 1 !important;
    border-radius: 28px;
  }

  .hero-photo::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 80%;
    aspect-ratio: 1;
    top: 15%;
    right: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,0,.30), rgba(255,122,0,.08) 48%, transparent 72%);
    filter: blur(12px);
  }

  .hero-photo-frame {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 28px !important;
    padding: 0 !important;
  }

  .hero-photo-frame::after {
    display: none !important;
  }

  .hero-photo-frame img {
    width: 100% !important;
    height: auto !important;
    max-height: 620px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 28px !important;
    transform: none !important;
    filter: saturate(1.06) contrast(1.06) brightness(.98);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%) !important;
  }

  .hero-photo-badge {
    display: none;
  }

  /* ── HERO BADGES ──────────────────────────────────────────── */
  .hero-badges {
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    position: static;
    z-index: auto;
    transform: none;
  }

  .hero-badge {
    min-height: 110px !important;
    height: auto !important;
    padding: 18px 16px !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    column-gap: 12px !important;
    align-items: start !important;
    overflow: hidden !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      rgba(18,18,18,.82);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
    color: #fff;
    font-size: 15px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  .hero-badge:hover {
    transform: translateY(-4px);
    border-color: rgba(255,122,0,.40);
    box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 24px rgba(255,122,0,.10);
  }

  .hero-badge:nth-child(n+4) {
    display: none;
  }

  .hero-badge::before,
  .hero-badge::after {
    content: none !important;
    display: none !important;
  }

  .hero-badge-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    object-fit: contain !important;
    grid-column: 1;
    grid-row: 1 / 3;
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    margin-top: 2px;
  }

  .hero-badge-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .hero-badge-text strong,
  .hero-badge strong {
    display: block !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.2px;
    margin: 0;
    transform: none !important;
    white-space: normal;
  }

  .hero-badge-text strong span,
  .hero-badge strong span {
    display: inline !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0;
    transform: none !important;
  }

  .hero-badge-text strong span + span::before {
    content: " ";
  }

  .hero-badge-text > span,
  .hero-badge-desc {
    display: block !important;
    color: rgba(255,255,255,.55) !important;
    font-size: 12.5px !important;
    font-weight: 500;
    line-height: 1.35 !important;
    margin-top: 0 !important;
  }

  /* ── SEÇÕES ────────────────────────────────────────────────── */
  .section {
    padding: 100px 0;
  }

  .section-head {
    max-width: 740px;
    margin-bottom: 48px;
  }

  .section-title {
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -1.4px;
  }

  .section-lead {
    margin-top: 14px;
    font-size: 17px;
  }

  #servicos {
    display: block;
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .service-card {
    padding: 30px;
    border-radius: 20px;
  }

  /* ── PROJETOS ──────────────────────────────────────────────── */
  #projetos {
    display: block;
    margin-top: 0;
    padding: 100px 0;
    position: static;
    z-index: auto;
  }

  #projetos .container {
    width: 100%;
    max-width: 1200px;
    padding: 0 32px;
    margin: 0 auto;
    transform: none;
  }

  #projetos .section-head {
    margin-bottom: 48px;
  }

  #projetos .eyebrow {
    display: inline-flex;
    font-size: 12px;
    color: #fff;
    padding: 8px 15px;
    border: 1px solid var(--border-orange);
    background: rgba(5,5,5,.45);
    box-shadow: 0 0 24px rgba(255,122,0,.10);
  }

  #projetos .eyebrow::before {
    display: inline;
  }

  #projetos .eyebrow::after {
    content: none;
  }

  #projetos .section-title,
  #projetos .section-lead {
    display: block;
  }

  .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .proj-card.featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 28px;
    padding: 24px;
    border-radius: 22px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
      rgba(15,15,15,.95);
    border: 1px solid rgba(255,122,0,.55);
    box-shadow:
      0 20px 60px rgba(0,0,0,.50),
      0 0 36px rgba(255,122,0,.12);
  }

  .proj-card.featured .proj-media {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    width: 100%;
  }

  .proj-card.featured .proj-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
    transform: none;
  }

  .proj-card.featured .proj-body {
    padding: 8px 10px 8px 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .proj-card.featured .proj-name {
    font-size: 26px;
    line-height: 1.12;
    margin-bottom: 10px;
  }

  .proj-card.featured .proj-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .proj-card.featured .proj-problem {
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(255,122,0,.12), rgba(255,122,0,.04));
    border: 1px solid rgba(255,122,0,.32);
  }

  .proj-card.featured .proj-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    width: auto;
    max-width: none;
  }

  .proj-card.featured .proj-tags span {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 11px;
    height: auto;
    min-height: auto;
    min-width: auto;
    white-space: nowrap;
  }

  .proj-card.featured .proj-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
    grid-template-columns: none;
  }

  .proj-card.featured .proj-actions .btn {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 12px;
    overflow: visible;
  }

  .proj-featured-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .proj-tech-under {
    display: flex;
    gap: 10px;
    margin-top: 0;
  }

  .tech-pill {
    height: 34px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 11px;
  }

  .proj-card:not(.featured) {
    height: auto;
    min-height: auto;
    aspect-ratio: auto;
    border-radius: 20px;
    overflow: hidden;
  }

  .proj-card:not(.featured) .proj-media {
    height: auto;
    min-height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }

  .proj-card:not(.featured) .proj-body {
    height: auto;
    padding: 20px;
  }

  .proj-card:not(.featured) .proj-name {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .proj-card:not(.featured) .proj-desc {
    font-size: 14px;
    line-height: 1.55;
    display: block;
    -webkit-line-clamp: unset;
  }

  .proj-card:not(.featured) .proj-problem {
    display: block;
  }

  .proj-card:not(.featured) .proj-tags {
    display: flex;
  }

  .proj-card:not(.featured) .proj-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
  }

  /* ── PROCESSO ──────────────────────────────────────────────── */
  .process-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }

  /* ── SOBRE / DEPOIMENTOS ───────────────────────────────────── */
  .about-content {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .testimonial-card {
    padding: 28px;
    border-radius: 20px;
  }

  /* ── CONTATO ───────────────────────────────────────────────── */
  .contact {
    margin: 0;
    padding: 90px 0;
    border-radius: 0;
    border: none;
  }

  .contact-title {
    font-size: clamp(32px, 5vw, 52px);
  }

  .contact .btn {
    height: auto;
    min-height: 56px;
    font-size: 16px;
    width: auto;
  }

  /* ── FOOTER ────────────────────────────────────────────────── */
  .footer-inner {
    flex-direction: row;
    text-align: left;
  }

  /* ── FLUTUANTES ────────────────────────────────────────────── */
  .whatsapp-float {
    width: 60px;
    height: 60px;
    right: 28px;
    bottom: 28px;
  }

  .orcamento-float {
    left: 28px;
    bottom: 28px;
    height: 58px;
    padding: 0 30px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 800;
    gap: 10px;
  }

  .orcamento-float svg {
    width: 20px;
    height: 20px;
  }

  /* ── MENU MOBILE — OCULTO ──────────────────────────────────── */
  .mob-menu {
    display: none !important;
  }
}

/* ── DESKTOP GRANDE (1280px+) ───────────────────────────────── */
@media (min-width: 1280px) {
  .container {
    max-width: 1240px;
  }

  .hero-inner {
    gap: 72px;
  }

  .hero-photo {
    max-width: 540px !important;
  }

  .hero-title {
    font-size: 64px !important;
  }

  .hero-badges {
    max-width: 720px !important;
    gap: 16px !important;
  }

  .hero-badge-text strong,
  .hero-badge strong,
  .hero-badge-text strong span,
  .hero-badge strong span {
    font-size: 15px !important;
  }

  .hero-badge-text > span,
  .hero-badge-desc {
    font-size: 13px !important;
  }

  .proj-card.featured .proj-name {
    font-size: 30px;
  }
}

/* ============================================================
   MARQUEE — FRASE IA ANIMADA
   ============================================================ */

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ai-budget-section {
  padding: 0;
  background:
    linear-gradient(90deg, rgba(255,122,0,.06), transparent 20%, transparent 80%, rgba(255,122,0,.06)),
    #050505;
  border-top: 1px solid rgba(255,122,0,.18);
  border-bottom: 1px solid rgba(255,122,0,.18);
  overflow: hidden;
}

.ai-marquee {
  width: 100%;
  overflow: hidden;
  padding: 26px 0;
}

.ai-marquee-track {
  display: inline-flex;
  gap: 100px;
  white-space: nowrap;
  animation: marqueeScroll 22s linear infinite;
  will-change: transform;
}

.ai-marquee-track > span {
  display: inline-block;
  padding-right: 100px;
  color: rgba(255,255,255,.78);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1;
  text-transform: none;
}

.ai-marquee-track strong {
  color: var(--orange);
  font-weight: 900;
  text-shadow: 0 0 28px rgba(255,122,0,.30);
}

@media (max-width: 720px) {
  .ai-marquee {
    padding: 20px 0;
  }

  .ai-marquee-track > span {
    font-size: 15px;
    font-weight: 800;
    padding-right: 70px;
    color: rgba(255,255,255,.74);
  }

  .ai-marquee-track {
    gap: 70px;
    animation-duration: 16s;
  }
}

/* ============================================================
   BOTÕES DAY LANCHES — CORREÇÃO FINAL
   ============================================================ */

@media (max-width: 720px) {
  .proj-card.featured .proj-actions {
    display: grid !important;
    grid-template-columns: .8fr 1.2fr !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .proj-card.featured .proj-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .proj-card.featured .proj-actions .btn:first-child {
    background: linear-gradient(180deg, #ff9a3d 0%, #ff7a00 45%, #ff5a00 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(255,122,0,.25) !important;
  }

  .proj-card.featured .proj-actions .btn:last-child {
    background:
      linear-gradient(135deg, rgba(255,122,0,.10), rgba(255,122,0,.02)),
      rgba(8,8,8,.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255,122,0,.60) !important;
    box-shadow: 0 0 12px rgba(255,122,0,.08) !important;
    text-transform: none !important;
  }
}

@media (max-width: 390px) {
  .proj-card.featured .proj-actions .btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 8.2px !important;
    padding: 0 5px !important;
  }
}

@media (min-width: 721px) {
  .proj-card.featured .proj-actions .btn:last-child {
    min-height: 44px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(255,122,0,.10), rgba(255,122,0,.02)),
      rgba(8,8,8,.92);
    color: #fff;
    border: 1.5px solid rgba(255,122,0,.60);
    box-shadow:
      0 0 18px rgba(255,122,0,.10),
      0 6px 16px rgba(0,0,0,.22);
    white-space: nowrap;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }

  .proj-card.featured .proj-actions .btn:last-child:hover {
    border-color: var(--orange);
    background:
      linear-gradient(135deg, rgba(255,122,0,.16), rgba(255,122,0,.04)),
      rgba(8,8,8,.95);
    box-shadow:
      0 0 26px rgba(255,122,0,.20),
      0 8px 22px rgba(0,0,0,.28);
  }
}

/* ============================================================
   CORREÇÃO DEFINITIVA — BOTÕES FEATURED CARD (Ver projeto / Orçamento)
   ============================================================ */

@media (min-width: 721px) {
  .proj-card.featured .proj-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: auto;
  }

  .proj-card.featured .proj-actions .btn {
    min-height: 44px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 12px;
    white-space: nowrap;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
  }

  .proj-card.featured .proj-actions .btn:first-child {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    border: none;
    box-shadow: 0 12px 28px rgba(255,106,0,.35);
  }

  .proj-card.featured .proj-actions .btn:first-child:hover {
    box-shadow: 0 16px 40px rgba(255,106,0,.48);
  }
}

@media (max-width: 720px) {
  .proj-card.featured .proj-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  .proj-card.featured .proj-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    line-height: 1 !important;
    letter-spacing: -.2px !important;
  }

  .proj-card.featured .proj-actions .btn:first-child {
    flex: 1.15 1 0 !important;
    background: linear-gradient(180deg, #ff9a3d 0%, #ff7a00 45%, #ff5a00 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(255,122,0,.28) !important;
  }

  .proj-card.featured .proj-actions .btn:last-child {
    flex: 1 1 0 !important;
    background: rgba(10,10,10,.92) !important;
    color: #fff !important;
    border: 1px solid rgba(255,122,0,.55) !important;
    box-shadow: none !important;
  }

  .proj-card.featured .proj-actions .btn .btn-arrow {
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-left: 1px !important;
  }
}

@media (max-width: 390px) {
  .proj-card.featured .proj-actions .btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 9px !important;
    padding: 0 5px !important;
    letter-spacing: -.3px !important;
  }

  .proj-card.featured .proj-actions .btn .btn-arrow {
    font-size: 9px !important;
  }
}