/* Its Andromeda - styles.css (atualizado) */
:root{
  --bg:#050505;
  --text:#f7f7f7;
  --muted:#bdbdbd;
  --accent:#6306ce;
  --accent-2:#3c0791;
  --tag-fotografia:    #F59E0B;
  --tag-webdev:        #06B6D4;
  --tag-logos:         #8B5CF6;
  --tag-social-media:  #EC4899;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
.title {font-size: 3rem; color: var(--accent);}

/* Preloader */
#preloader{position:fixed;inset:0;background:#050505;display:grid;place-items:center;z-index:9999;}
.loader-icon {fill: var(--accent); margin: 0 auto;}

/* Nav (3 col grid; centralizada) */
header{position:fixed;top:0;z-index:1500;; width: 100%;}
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:16px 24px;transition:background .3s, border-bottom .3s;border-bottom:1px solid transparent;
}
.nav-left{justify-self:start}.nav-center{justify-self:center}.nav-right{justify-self:end}
.menu a {
    text-decoration: none;
    color: var(--text);
    padding: .5rem .75rem;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .25s ease, color .25s ease;
}
.menu a:hover {
    /* não usar 'background' p/ não zerar a image */
    color: var(--accent);
    background-size: 100% 2px;
    transition: background-size .25s ease, color .25s ease;
}
.brand svg {height:48px;width:auto;display:block; fill: var(--accent);transition: fill .25s ease;}
.brand:hover svg {fill: var(--text); transition: fill .25s ease;}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:28px;justify-content:center;align-items:center}

/* Botão hambúrguer (desktop: escondido) */
.hamburger{
  display:none;                 /* continua escondido no desktop */
  position:relative;
  width:44px; height:44px;
  padding:0; border:0; background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index:1500;                  /* fica acima do painel mobile */
}

/* 3 barras: centralizadas e com offsets verticais controlados */
.hamburger span{
  position:absolute;
  left:50%; top:50%;
  width:24px; height:2px; background:#fff; border-radius:2px;
  transform: translate(-50%,-50%);                 /* base: centro */
  transition: transform .25s ease, opacity .25s ease;
}

/* posição das barras no estado fechado */
.hamburger span:nth-child(1){ transform: translate(-50%,-50%) translateY(-6px); }
.hamburger span:nth-child(2){ transform: translate(-50%,-50%); }
.hamburger span:nth-child(3){ transform: translate(-50%,-50%) translateY( 6px); }

/* estado "X" (barras sobrepostas e giradas) */
.hamburger.active span:nth-child(1){ transform: translate(-50%,-50%) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translate(-50%,-50%) rotate(-45deg); }


/* --- MOBILE ONLY (não altera desktop) ------------------------------ */
@media (max-width: 900px){
  /* mostra o botão e o deixa acima do painel */
  .hamburger{ display:inline-block; align-items:center; justify-content:center; z-index:1500; }

  /* encosta o menu à direita (perto do botão) */
  .nav-center{ justify-self:end; }

  /* painel móvel com transição (sem mudar desktop) */
  .menu{
    position: fixed;
    left: 0; right: 0; top: 72px;            /* ajuste se teu header tiver outra altura */
    flex-direction: column; gap: 18px;
    padding: 20px 24px 28px;
    background: rgba(5,5,5,.92);
    backdrop-filter: saturate(160%) blur(8px);
    border-top: 1px solid #121212;
    z-index:1500;

    /* escondido por padrão (animação suave) */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
  }
  .menu.show{
    height: 100vh;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: transform .25s ease, opacity .25s ease, visibility 0s;
  }


  .menu a{ width:100%; } /* toque confortável */
}

.nav.scrolled{
  background: rgba(5,5,5,.9);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom-color: #121212;
}

/* Sections */
.section{padding:48px 24px}
.container{max-width:1120px;margin:0 auto}
.hero{position:relative;min-height:100vh;display:grid;place-items:center;padding-top:120px}
.hero-bg{position:absolute;inset:0;background:url('/assets/bg-low.jpg') top/cover no-repeat;z-index:0}
.hero-content{position:relative;z-index:2;text-align:center}
.tipo{width: 50vw; margin: 0 auto; max-width: 1120px; width: 50vw;}
.subtitle{max-width:800px;margin:16px auto 28px;color:var(--muted);font-size:1.5rem}
.ticker{display:flex;gap:12px;justify-content:center;align-items:center;font-size:1.1rem; margin-top: 2rem;}
.ticker #ticker-text{font-weight:700;position:relative}
.ticker #ticker-text::after{content:''; display:inline-block; width:2px; height:1.1em; background:#f7f7f7; margin-left:3px; vertical-align:sub; animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.gradient{background:linear-gradient(90deg,var(--accent),#9b67ff);-webkit-background-clip:text;background-clip:text;color:transparent}

.cta-row{display:flex;gap:12px;justify-content:center;margin-top:20px}
.btn{appearance:none;border:1px solid #2a2a2a;padding:12px 18px;border-radius:999px;text-decoration:none;color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,background .3s,border .3s}
.btn:hover{transform:translateY(-1px); transition:transform .15s,background .3s,border .3s}
.btn-primary{background:var(--accent);border-color:var(--accent)}
.btn-ghost{background:transparent; border-color: var(--text);}
.hero-stats{display:flex;gap:28px;justify-content:center;margin-top:28px;opacity:.9}
.stat{display:grid;place-items:center}
.stat .num{font-size:1.4rem;font-weight:700}
.stat .label{font-size:.8rem;color:var(--muted)}

#sobre p {font-size: 1.5rem;}

/* Grid */
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.title{font-weight:800;letter-spacing:-.01em;margin:0 0 8px;font-size:clamp(26px,4vw,42px)}
.center{text-align:center}
.bullets{margin:16px 0 0 0;padding-left:18px;color:#e7e7e7}
.image-card img{width:100%;height:auto;border-radius:18px}


/* ===== Viewport com peeks e degradês ===== */
#servicos .svc-viewport{
  position: relative;
  overflow: hidden;
  --gap: 22;                 /* número puro (px) */
  --peek: 60;                /* número puro (px) desktop */
  padding-inline: calc(var(--peek) * 1px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;       /* evita scroll-x do navegador durante drag */
}
#servicos .svc-viewport::before,
#servicos .svc-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:72px; pointer-events:none; z-index:2;
  background: linear-gradient(to right, #050505, #05050500);
}
#servicos .svc-viewport::before{ left:0; }
#servicos .svc-viewport::after{ right:0; transform: scaleX(-1); }

#servicos .svc-track{
  display: flex;
  gap: calc(var(--gap) * 1px);
  will-change: transform;
  transform: translate3d(0,0,0);
  padding-block: 12px;
}

/* cards */
#servicos .svc-card{
  box-sizing: border-box;    /* trava cálculo */
  flex: 0 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 16px;
  overflow: visible;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
#servicos .svc-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
}

/* largura interna da ilustração (moldura) */
#servicos .svc-card{ --img-w: 90%; }         /* ajuste 85–95% se quiser */

/* a figura vira um bloco centralizado menor que o card */
#servicos .card-illustration{
  width: var(--img-w);
  aspect-ratio: 1/1;                            /* você já usa 200px */
  margin: 12px auto;                          /* centraliza e cria “borda” */
  border-radius: 14px;
  overflow: hidden;
}

/* cobre o quadrado sem distorcer */
#servicos .card-illustration img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* mobile peeks menores e 1 card */
@media (max-width: 768px){
  #servicos .svc-viewport{ --gap: 16; --peek: 24; }
  #servicos .svc-card{ --img-w: 92%; }
}



/* ===== Masonry Pinterest-like para o PORTFÓLIO ===== */
#portfolio-grid.masonry{
  /* número de colunas responsivo */
  columns: 2;
  column-gap: 18px;
}

@media (min-width: 980px){
  #portfolio-grid.masonry{ columns: 3; }
}
/* cada item não quebra entre colunas */
#portfolio-grid.masonry > figure{
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 18px;
  position: relative;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;                 /* importante pro zoom não vazar */
  background: transparent;

  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
#portfolio-grid.masonry > figure img{
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* (opcional) título/legenda abaixo da imagem */
#portfolio-grid.masonry > figure figcaption{
  margin-top: 8px;
  font-size: .9rem;
  opacity: .85;
}

/* ===== Overrides para impedir conflitos ===== */
/* Se você tiver algo global como .image-card img, .grid img, etc, neutralize aqui */
#portfolio-grid.masonry img{
  aspect-ratio: auto !important;
  object-fit: contain !important;  /* ou remove; o importante é não forçar corte */
}
/* Se houver grid antigo aplicado no #portfolio-grid, desabilite: */
#portfolio-grid{
  display: block !important;
}

/* Hover/focus: zoom na imagem + subidinha do card */
#portfolio-grid.masonry > figure:hover,
#portfolio-grid.masonry > figure:focus-within{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
}
#portfolio-grid.masonry > figure:hover img,
#portfolio-grid.masonry > figure:focus-within img{
  transform: scale(1.06);
}

/* Acessibilidade: reduz animação se o usuário preferir */
@media (prefers-reduced-motion: reduce){
  #portfolio-grid.masonry > figure,
  #portfolio-grid.masonry > figure img{
    transition: none;
  }
}

.link{color:#bdbdbd;text-decoration:underline dotted}
.muted{color:#bdbdbd}

/* shimmer placeholders */
.ph{background:#121212;height:220px;border-radius:14px;border:1px solid #1b1b1b;position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.08),rgba(255,255,255,0));transform:translateX(-100%);animation:sh 1.6s infinite}
@keyframes sh{to{transform:translateX(100%)}}

/* Contato */
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
input, textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a2a2a;background:#0b0b0b;color:#fff}
input:focus, textarea:focus{outline:2px solid var(--accent)}
/* Social pill buttons */
.social{list-style:none;padding:0;margin:14px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.sbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid #2a2a2a;text-decoration:none;color:var(--text);fill:var(--text); background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));transition:transform .15s, border .2s,fill .25s ease;}
.sbtn svg{width:18px;height:18px;opacity:.92}
.sbtn:hover{fill: var(--accent); border-color:#3a3a3a;transform:translateY(-1px);transition:transform .15s, border .2s,fill .25s ease;}
.btn-contato {justify-content: center; margin-top: 1rem;}
/* Map */
.map-wrap{margin-top:16px;border:1px solid #1a1a1a;border-radius:12px;overflow:hidden;}
.leaflet-interactive {stroke: var(--accent); fill: var(--accent);}
#map{width:100%;height:320px}

/* Footer */
.footer{padding:36px 24px;border-top:1px solid #141414}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.footer .icon{color:#bdbdbd;text-decoration:none;margin-left:12px}
.footer-social a {fill: var(--text);transition: fill .25s ease;}
.footer-social a:hover {fill: var(--accent);  transition: fill .25s ease;}

/* back to top */
#backToTop{position:fixed;right:18px;bottom:18px;border:none;border-radius:999px;padding:12px 14px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;z-index:10}
#backToTop.show{opacity:1;transform:translateY(0)}

.lb[hidden]{ display:none !important; }
.lb{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:saturate(120%) blur(2px);
}
.lb.open{ display:flex !important; }
.lb-box{
  position:relative; background:#0c0c0f; border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:14px; max-width:95vw; max-height:95vh;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.lb-media{ display:flex; align-items:center; justify-content:center; }
.lb-media img{ display:block; max-width:90vw; max-height: calc(90vh - 96px); border-radius:12px; }

.lb-cap{
  margin-top:10px; color:#dcdcdc; font-size:.95rem; line-height:1.45;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); padding:10px 12px; border-radius:10px;
}

.lb-close{
  position:absolute; top:1.5rem; right:1.5rem; width: 36px; height: 36px;
  border-radius:25%; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.55); color:#fff; font-size:20px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
}
.lb-close:hover{ background:rgba(0,0,0,.7); }

.lb-pill{
  position:absolute; top:1.5rem; left:1.5rem; display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; color:#fff; font-weight:600; font-size:.8rem;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
}
.lb-pill .dot{
  width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--accent);
}

/* Responsive */
@media (max-width: 900px){
  .grid.two{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .hamburger{display:flex;justify-self:end}
  .menu{display:none}
  .menu.show{display:flex;position:fixed;inset:0;background:rgba(5,5,5,.98);z-index:30;flex-direction:column;gap:20px;justify-content:center;align-items:center;animation:fadeInMenu .2s ease both}
  @keyframes fadeInMenu{from{opacity:0} to{opacity:1}}
  .hero{min-height: 75vh}
  .tipo{width: 75vw;}
}
@media (max-width: 560px){
  .portfolio-grid{grid-template-columns:1fr}
}

/* Animations on view (lazy load effect) */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--d,0s), transform .5s var(--d,0s)}
.reveal.show{opacity:1;transform:none}

body.menu-open { overflow: hidden; }
body.menu-open .nav{
  background: rgba(5,5,5,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom-color: #121212;
}