@font-face{
  font-family:"FonteTitulos";
  src:url("fonts/fonte-titulos.otf") format("opentype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FonteTextos";
  src:url("fonts/fonte-texto.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
h1,h2,h3{ font-family:"FonteTitulos", Arial, sans-serif; }
button{ font-family:inherit; }
:root{
  --preto:#0D0D0D;
  --preto-sec:#1A1A1A;
  --branco:#F5F5F5;
  --cinza:#B3B3B3;
  --brand:#ff2a00;
  --brand-hover:#e42500;
  --header-h:70px;
  --container-w:1200px;
  --radius:14px;
}

body{
  padding-top: var(--header-h);
  font-family:"FonteTextos", Arial, sans-serif;
  background: var(--preto);
  color: var(--branco);
  line-height:1.6;
}
body.no-scroll{ overflow:hidden; touch-action:none; }

.header{
  position:fixed; top:0; left:0;
  width:100%; height:var(--header-h);
  background:var(--preto-sec);
  display:flex; align-items:center;
  z-index:1200;
}
.header-container{
  width:90%; max-width:var(--container-w);
  margin:0 auto;
  display:flex; align-items:center;
  height:100%;
  position:relative;
}
.logo{ height:55px; }

.menu-btn:focus,
.menu-btn:focus-visible{
  outline: none;
}

.menu-btn::-moz-focus-inner{
  border: 0;
}

.menu-btn{
  position:absolute; right:15px; top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  background:none; border:none;
  color:var(--branco);
  font-size:28px;
  cursor:pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  opacity: 1;
}
.menu-btn:active{ transform:translateY(-50%) scale(.92); }

.sidebar{
  position:fixed;
  top:var(--header-h);
  left:0;
  width:260px;
  height:calc(100% - var(--header-h));
  background:var(--preto-sec);
  padding:40px 20px;
  display:flex; flex-direction:column;
  gap:20px;
  transform:translateX(-100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  z-index:1100;
}
.sidebar a{ color:var(--branco); text-decoration:none; font-size:18px; }
.sidebar a:hover{ color:var(--brand); }
.sidebar.active{ transform:translateX(0); }

.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:1050;
}
.overlay.active{ opacity:1; pointer-events:all; }

.banner{ width:90%; max-width:var(--container-w); margin:12px auto 0; }
.banner img{ width:100%; display:block; border-radius:var(--radius); }

.div-texto-principal{ width:90%; max-width:900px; margin:40px auto 10px; }
.texto-principal{ font-size:clamp(28px,4vw,36px); line-height:1.2; white-space:pre-line; }
.sub-texto-principal{ font-size:16px; color:var(--cinza); margin-top:12px; }

#typing-text::after{
  content:"|";
  margin-left:5px;
  animation: blink 1s infinite;
}
@keyframes blink{ 50%{ opacity:0; } }


.ig-btn__icon img{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
}

.ig-btn{
  margin-top:14px;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brand);
  color:#1f1b1b;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  transition:transform .2s ease, background .2s ease;
}
.ig-btn:hover{ background:var(--brand-hover); transform:translateY(-1px); }

.destaques{ width:90%; max-width:900px; margin:18px auto 0; }
.destaques-grid{
  display:grid;
  grid-template-columns:1.25fr .85fr;
  grid-template-rows:auto auto;
  gap:14px;
}
.media-slot{ position:relative; overflow:hidden; border-radius:18px; }
.media-slot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.media-slot--big{ grid-column:1; grid-row:1 / span 2; aspect-ratio:1/1; }
.media-slot--small{ grid-column:2; grid-row:1; aspect-ratio:1/1; }
.media-slot--rect{ grid-column:2; grid-row:2; aspect-ratio:4/3; }

.portfolio{ width:90%; max-width:900px; margin:34px auto 0; }
.section-title{ font-size:32px; line-height:1.1; }
.section-subtitle{ margin-top:8px; color:var(--cinza); font-size:14px; }

.portfolio-group{ margin-top:26px; }
.group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.group-title{ font-size:26px; }
.pager-controls{ display:flex; gap:10px; }
.pager-controls--top{ display:none; } 

.pager-btn{
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--branco);
  font-size:22px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pager-btn:hover{ border-color: rgba(255,255,255,.22); }
.pager-btn:active{ transform:scale(.96); }
.pager-btn.is-hidden{ display:none; }

.portfolio-card,
.portfolio-card img,
.card-badge{
  user-select: none;
  -webkit-user-select: none;
}

.portfolio-card--click{
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.portfolio-card--click:focus,
.portfolio-card--click:focus-visible{
  outline: none;
  box-shadow: none;
}

.portfolio-grid{
  position:relative;
  padding: 0 56px;
}

.portfolio-grid .page{
  padding: 0 8px;            
}

.pager-btn--side{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:999;               

  width:44px;
  height:44px;
  border-radius:999px;

  display:grid;
  place-items:center;

  padding:0;
  line-height:1;
  cursor:pointer;

  background: rgba(13,13,13,.78);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);

  pointer-events:auto;         
}

.portfolio-card{
  position: relative;
  z-index: 1;
}


.pager-btn--side::after{
  content:"";
  position:absolute;
  inset:-10px;                 
}

.portfolio-card{
  position: relative;
  z-index: 1;
}


.pager-btn--side{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:40px;
  height:40px;
  background: rgba(13,13,13,.78);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.portfolio-grid .pager-prev.pager-btn--side{ left:0; }
.portfolio-grid .pager-next.pager-btn--side{ right:0; }


.page{
  display:none;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
.page.active{ display:grid; }


.portfolio-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  aspect-ratio: 3 / 4.2;
  background: transparent;
}
.portfolio-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.portfolio-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.14) 100%);
  pointer-events:none;
}
.portfolio-card--click{
  border:none;
  padding:0;
  cursor:pointer;
  text-align:left;
}
.portfolio-card--click:active{ transform:scale(.99); }

.card-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(13,13,13,.75);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--branco);
  font-size:12px;
  font-weight:600;
  backdrop-filter: blur(8px);
}


@media (max-width: 520px){
  .portfolio-grid{ padding: 0 36px; }
  .page{ gap:10px; }
  .portfolio-card{ border-radius:16px; }
  .pager-btn--side{ width:36px; height:36px; font-size:20px; }
}

/* ===== MODAL ===== */
.project-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:2000;
}
.project-modal.active{ display:block; }
.project-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.72);
}
.project-modal__panel{
  position:relative;
  width:min(980px, 92vw);
  height:min(86vh, 860px);
  margin: calc(var(--header-h) + 14px) auto 0;
  border-radius:18px;
  overflow:hidden;
  background: var(--preto-sec);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
}
.project-modal__top{
  padding:10px;
  display:flex;
  justify-content:flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 100%);
}
.project-modal__close{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(13,13,13,.7);
  color: var(--branco);
  font-size:20px;
  cursor:pointer;
}
.project-modal__content{
  flex:1;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.project-modal__image{
  width:100%;
  height:auto;
  display:block;
}

/* faixa final */
.bottom-strip{
  margin-top:40px;
  background:var(--brand);
  color:#fff;
  padding:22px 0;
}
.bottom-strip p{
  width:90%;
  max-width:900px;
  margin:0 auto;
  font-family:"FonteTitulos", Arial, sans-serif;
  font-size:20px;
  line-height:1.2;
}

/* whatsapp */
.whatsapp-float{
  position:fixed;
  bottom:17px;
  right:20px;
  background:var(--brand);
  width:55px;
  height:55px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  transition:.3s;
  z-index:1000;
}
.whatsapp-float:hover{ background:var(--brand-hover); transform:scale(1.08); }
.whatsapp-float img{ width:28px; display:block; }


/* ===== conteúdo do modal contato ===== */
.contact-box{
  width: min(520px, 100%);
  margin: 40px auto 0;
  padding: 0 20px;
}

.contact-title{
  font-size: 26px;
  line-height: 1.1;
}

.contact-subtitle{
  margin-top: 10px;
  color: var(--cinza);
  font-size: 14px;
}

.contact-whats{
  display:block;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  text-align:center;
  text-decoration:none;
  font-weight: 800;
  background: var(--brand);
  color:#fff;
}

.contact-ig{
  display:block;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration:none;
  text-align:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.contact-btn{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  width: 100%;
  padding: 14px 18px;
  margin-bottom: 15px;

  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;

  transition: 0.3s ease;
}

.contact-btn img{
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* WhatsApp */
.contact-btn.whatsapp{
  background: #25D366;
  color: white;
}

.contact-btn.whatsapp:hover{
  background: #1ebe5b;
}

.contact-btn.instagram{
  background: linear-gradient(
    45deg,
    #f58529,
    #dd2a7b,
    #8134af,
    #515bd4
  );
  color: #fff;
  border: none;
}

.contact-btn.instagram:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 4000;
}

.project-modal{
  z-index: 3000; 
}

.project-modal__panel{
  margin: var(--header-h) auto 0;
  height: calc(100vh - var(--header-h));
  max-height: calc(100vh - var(--header-h));
  width: min(1040px, 94vw);
}

/* =========================

   RESPONSIVIDADE SÓ TABLET / PC
========================= */

#portfolio, #identidade-visual, #contato{
  scroll-margin-top: calc(var(--header-h) + 12px);
}
@media (max-width: 768px){
  .sidebar{
    width:100%;
    padding-top:60px;
    align-items:center;
    text-align:center;
  }
  .sidebar a{ font-size:22px; }
  .project-modal__panel{
    width:94vw;
    height:88vh;
    margin: calc(var(--header-h) + 10px) auto 0;
  }
  .header-container{ width:92%; }
  .banner{ width:92%; }
  .div-texto-principal{ width:92%; max-width:980px; }
  .destaques{ width:92%; max-width:980px; }
  .portfolio{ width:92%; max-width:980px; }
  
  .destaques-grid{ gap:16px; }
  .page{ gap:16px; }
  
  .sidebar{ width:300px; }
}


/* PC */
@media (min-width: 1024px){
  :root{
    --radius:16px;
  }
  
  .header-container{ width:88%; }
  .banner{ width:88%; }
  .div-texto-principal{ width:88%; max-width:1100px; }
  .destaques{ width:88%; max-width:1100px; }
  .portfolio{ width:88%; max-width:1100px; }
  
  .texto-principal{ font-size: clamp(34px, 3.1vw, 46px); }
  .sub-texto-principal{ font-size:16px; max-width:70ch; }
  
  .portfolio-grid{ padding: 0 52px; }
  .pager-btn--side{ width:44px; height:44px; }
  
  .project-modal__panel{
    width:min(1040px, 90vw);
    height:min(88vh, 900px);
  }
  
  .banner{
    width: 88%;
    max-width: 1100px;
    margin: 18px auto 0;
  }
  .banner img{
    height: 260px;
    object-fit: cover;
      border-radius: 18px;
    }
  
    .div-texto-principal{
      margin: 28px auto 16px;
      max-width: 1100px;
    }
    .portfolio-card{
      aspect-ratio: 1 / 1;  
      border-radius: 14px;
    }
    
    .page{
      gap: 10px;
    }
  }
  
  @media (min-width: 1360px){
    .header-container{ max-width:1280px; }
    .banner,
    .div-texto-principal,
    .destaques,
    .portfolio{ max-width:1180px; }
  }

.menu-btn img{
  width:24px;
  height:24px;

}