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

:root{
  --bg:#0b0b0b;
  --bg2:#111111;
  --surface:#151515;
  --surface-2:#1a1a1a;
  --border:#212121;
  --border-soft:rgba(255,255,255,.08);
  --gold:#daa520;
  --silver: #c0c0c0;
  --silver-border: #a9a9a9;
  --silver-highlight: #e0e0e0;
  --text:#f5f5f5;
  --muted:#c9c9c9;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --max:1200px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background: var(--bg); /* Fundo preto fixo */
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

::selection{
  background:rgba(218,165,32,.22);
  color:#fff;
}

.container{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
}

.sitebar,
.adminbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(11,11,11,.84);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--silver-border); /* Borda em prata */
}

.bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.02em;
}

.brand img{
  width:24px;
  height:24px;
}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--silver-border); /* Borda em prata */
  border-radius:14px;
  background:rgba(255,255,255,.03);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.nav-toggle span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:#fff;
  transition:transform .2s ease, opacity .2s ease;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  font-weight:600;
  letter-spacing:.01em;
}

.nav-links a{
  color:#fff;
  opacity:.84;
  font-size:.95rem;
  transition:opacity .2s ease, color .2s ease;
}

.nav-links a:hover{
  opacity:1;
  color:#fff;
}

.login-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.login-link:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
  transform:translateY(-1px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border:none;
  border-radius:999px;
  background:var(--gold);
  color:#111;
  font-weight:800;
  transition:transform .2s ease, filter .2s ease;
}

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

.btn.ghost{
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold);
}

.btn.small{
  padding:8px 12px;
  font-size:12px;
}

.btn.danger{
  background:#ff6262;
  color:#fff;
}

.muted{
  color:var(--muted);
}

/* HERO */
.intro-tight{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,4vw,54px);
  align-items:center;
  min-height:82vh;
  padding:clamp(48px,8vh,90px) 0 64px;
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
}

.intro-left{
  max-width:560px;
}

/* Variáveis para fácil customização */
:root{
  --pill-bg-top: #ffffff;
  --pill-bg-bottom: #f3f3f3;
  --pill-text: #0b0b0b;
  --pill-accent-1: #ffae42;
  --pill-accent-2: #e15a00;
  --pill-border: rgba(0,0,0,0.06);
  --pill-shadow: 0 10px 30px rgba(0,0,0,0.45);
  --pill-radius: 999px;
}

/* Pill base */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-radius: var(--pill-radius);
  background: linear-gradient(180deg, var(--pill-bg-top), var(--pill-bg-bottom));
  color: var(--pill-text);
  box-shadow: var(--pill-shadow);
  border: 1px solid var(--pill-border);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  cursor: pointer;
  position: relative;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

/* subtle glossy highlight */
.pill::before{
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 6%;
  height: 44%;
  border-radius: calc(var(--pill-radius) - 6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.08));
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* dot (badge) */
.pill .dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pill-accent-1), var(--pill-accent-2));
  box-shadow: 0 8px 20px rgba(225,90,0,0.14), inset 0 -2px 4px rgba(0,0,0,0.12);
  position: relative;
  flex: 0 0 auto;
}

/* delicate halo ring around the dot */
.pill .dot::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(225,90,0,0.06);
  pointer-events: none;
  opacity: 0.95;
}

/* hover / focus / active */
.pill:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  filter: saturate(1.06);
}
.pill:active{ transform: translateY(-1px) scale(0.995); }
.pill:focus{ outline: none; }

/* accessible focus ring */
.pill:focus-visible{
  box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 0 4px rgba(255,175,60,0.12);
  border-color: rgba(225,90,0,0.22);
}

/* text styling */
.pill .pill-text{
  display: inline-block;
  line-height: 1;
  font-size: 14px;
  letter-spacing: .12em;
}

/* Dark / ghost variant (se usar sobre fundo escuro) */
.pill.pill--dark{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.04);
  --pill-shadow: 0 14px 40px rgba(0,0,0,0.7);
}
.pill.pill--dark .dot::after{ box-shadow: 0 0 0 6px rgba(255,255,255,0.02); }

/* Small / compact variant */
.pill.pill--sm { padding: 8px 14px; gap:8px; }
.pill.pill--sm .dot{ width:10px; height:10px; }

.intro-left h1{
  margin:22px 0 0;
  font-size:clamp(3rem,8vw,6.2rem);
  line-height:.9;
  letter-spacing:-.05em;
  font-weight:900;
  /* Efeito metálico prata com textura */
  background: linear-gradient(135deg, 
    #c0c0c0 0%, 
    #a9a9a9 15%, 
    #e0e0e0 30%, 
    #c0c0c0 50%, 
    #a9a9a9 65%, 
    #e0e0e0 80%, 
    #c0c0c0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 10px rgba(192, 192, 192, 0.3);
  position: relative;
  /* Adicionando leve textura */
  filter: drop-shadow(0 0 1px rgba(192, 192, 192, 0.5));
}

.intro-text{
  margin:18px 0 0;
  max-width:460px;
  color:var(--muted);
  font-size:clamp(1rem,1.5vw,1.1rem);
  line-height:1.7;
}

.intro-mosaic{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.intro-mosaic video{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  background:#121212;
  border:1px solid var(--silver-border); /* Borda em prata */
  box-shadow:var(--shadow);
  transition:transform .25s ease, border-color .25s ease;
}

.intro-mosaic video:hover{
  transform:translateY(-2px);
  border-color:var(--silver); /* Borda em prata ao passar o mouse */
}

/* SOBRE */
.sobre-split{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(280px,420px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  padding:20px 0 clamp(70px,10vh,120px);
}

.sobre-label,
.portfolio-label,
.contato-label{
  font-weight:900;
  color:rgba(255,255,255,.08);
  user-select:none;
  pointer-events:none;
  line-height:.9;
  letter-spacing:-.05em;
}

.sobre-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:clamp(64px,16vw,180px);
}

.sobre-photo{
  position:relative;
}

.sobre-photo img{
  width:100%;
  height:min(520px, 66vh);
  object-fit:cover;
  object-position:center 12%;
  border-radius:24px;
  filter:grayscale(100%) contrast(1.02);
  transition:filter .35s ease, transform .35s ease;
  box-shadow:var(--shadow);
}

.sobre-photo:hover img{
  filter:grayscale(0%);
  transform:scale(1.01);
}

.fade-left,
.fade-bottom{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:24px;
}

.fade-left{
  background:linear-gradient(90deg, rgba(11,11,11,.92), transparent 30%);
}

.fade-bottom{
  background:linear-gradient(0deg, rgba(11,11,11,.86), transparent 28%);
}

.sobre-copy{
  max-width:780px;
}

.sobre-copy h2{
  margin:0 0 18px;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:900;
}

.sobre-copy p{
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,1.55vw,1.15rem);
  line-height:1.8;
}

/* PORTFOLIO */
.portfolio-split{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px,6vw,100px);
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  padding:40px 0 130px;
}

.portfolio-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:clamp(64px,16vw,210px);
}

.portfolio-content{
  display:flex;
  flex-direction:column;
  gap:56px;
  width:100%;
}

.site-section{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.site-head h2{
  margin:0 0 8px;
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  line-height:1.15;
  letter-spacing:-.03em;
}

.site-head p{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.7;
  max-width:780px;
}

.mosaic{
  display:grid;
  gap:14px;
}

.mosaic .tile{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--silver-border); /* Borda em prata */
  background:#0e0e0e;
  transform:translateZ(0);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.site .tile:hover{
  transform:translateY(-2px);
  border-color:var(--silver); /* Borda em prata ao passar o mouse */
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}

.site .tile::after{
  content:"ver detalhes";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62));
  opacity:0;
  color:#fff;
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  pointer-events:none;
  transition:opacity .22s ease;
}

.site .tile:hover::after{
  opacity:1;
}

.portfolio-content .mosaic .tile img,
.portfolio-content .mosaic .tile video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.admin .mosaic .tile img,
.admin .mosaic .tile video{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:8px;
  background:var(--bg2);
}

/* layouts */
.mosaic.grid-3{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

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

.mosaic.grid-4{
  grid-template-columns:repeat(4,1fr);
}

.mosaic.mosaic-columns{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

.mosaic.row-gallery{
  grid-auto-flow:column;
  grid-auto-columns:360px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}

.mosaic.mosaic-hero{
  grid-template-columns:2fr 1fr;
  grid-auto-rows:220px;
}

.portfolio-content .mosaic.grid-2x2 .tile{
  height:320px;
}

.mosaic.grid-3 .tile,
.mosaic.grid-4 .tile,
.mosaic.mosaic-columns .tile,
.mosaic.row-gallery .tile,
.mosaic.mosaic-hero .tile{
  min-height:220px;
}

.mosaic.carousel{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--radius);
}

.carousel-track{
  display:flex;
  gap:14px;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.mosaic.carousel .tile{
  flex:0 0 320px;
  height:400px;
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--silver-border); /* Borda em prata */
  background:rgba(11,11,11,.8);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  line-height:1;
  backdrop-filter:blur(10px);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.carousel-btn:hover{
  background:var(--silver); /* Fundo em prata ao passar o mouse */
  border-color:var(--silver); /* Borda em prata ao passar o mouse */
  color:#111;
  transform:translateY(-50%) scale(1.03);
}

.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}

.carousel-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}

.carousel-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:none;
  background:#333;
  padding:0;
  transition:transform .2s ease, background .2s ease;
}

.carousel-dot.active{
  background:var(--silver); /* Ponto ativo em prata */
  transform:scale(1.2);
}

/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.lightbox-content{
  width:min(1100px, 100%);
  max-height:90vh;
  overflow:auto;
  display:grid;
  grid-template-columns:minmax(260px, 62%) 1fr;
  gap:24px;
  padding:24px;
  border-radius:22px;
  background:linear-gradient(180deg, #171717, #101010);
  border:1px solid var(--silver-border); /* Borda em prata */
  box-shadow:var(--shadow);
}

#lightbox-img{
  width:100%;
  max-height:72vh;
  object-fit:contain;
  border-radius:16px;
  background:#090909;
}

.lightbox-info{
  align-self:center;
}

.lightbox-info h3{
  margin:0 0 10px;
  font-size:clamp(1.3rem,2vw,2rem);
  line-height:1.1;
}

.lightbox-info p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size:1rem;
}

.lightbox-close{
  position:fixed;
  top:16px;
  right:16px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:30px;
  line-height:1;
  display:grid;
  place-items:center;
  backdrop-filter:blur(10px);
}

/* CONTATO - Estilo minimalista como no vídeo */
.contato-split{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px,6vw,100px);
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  padding:30px 0 130px;
  border-top:1px solid var(--silver-border); /* Borda em prata */
}

.contato-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:clamp(64px,16vw,210px);
}

.contato-copy{
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contato-copy h2{
  margin:0;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:900;
}

.contato-copy > p{
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,1.55vw,1.15rem);
  line-height:1.8;
}

.contato-links{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:8px;
}

/* Botões minimalistas como no vídeo */
.contato-btn{
  width:fit-content;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:16px 28px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.01em;
  transition:all .3s ease;
  border:1px solid var(--silver-border); /* Borda em prata */
  background: transparent;
  color: var(--silver); /* Texto em prata */
}

.contato-btn:hover{
  background: rgba(192, 192, 192, 0.1); /* Fundo sutil ao passar o mouse */
  transform:translateY(-2px);
  box-shadow: 0 5px 15px rgba(192, 192, 192, 0.1);
  border-color: var(--silver); /* Borda mais visível ao passar o mouse */
}

.contato-btn.whats{
  color: #25d366;
  border-color: rgba(37, 211, 102, 0.3);
}

.contato-btn.whats:hover{
  background: rgba(37, 211, 102, 0.1);
  border-color: #25d366;
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.2);
}

.contato-btn.insta{
  color: #e1306c;
  border-color: rgba(225, 48, 108, 0.3);
}

.contato-btn.insta:hover{
  background: rgba(225, 48, 108, 0.1);
  border-color: #e1306c;
  box-shadow: 0 5px 15px rgba(225, 48, 108, 0.2);
}

.contato-btn.linkedin{
  color: #0077b5;
  border-color: rgba(0, 119, 181, 0.3);
}

.contato-btn.linkedin:hover{
  background: rgba(0, 119, 181, 0.1);
  border-color: #0077b5;
  box-shadow: 0 5px 15px rgba(0, 119, 181, 0.2);
}

.contato-info{
  margin-top:6px;
  color:#cfcfcf;
  line-height:1.7;
}



/* ADMIN */
.admin{
  padding:30px 0 60px;
}

.card{
  background:linear-gradient(180deg, var(--bg2), #101010);
  border:1px solid var(--silver-border); /* Borda em prata */
  border-radius:20px;
  padding:20px;
  margin-bottom:20px;
  box-shadow:var(--shadow);
}

.alert{
  background:rgba(218,165,32,.12);
  color:#ffd980;
  padding:12px 14px;
  border:1px solid rgba(218,165,32,.2);
  border-radius:12px;
  margin:10px 0;
}

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

.form-grid .layout-picker,
.form-grid > .btn{
  grid-column:1 / -1;
}

.form-grid input,
.form-grid select,
.sec-head input,
.sec-head select,
.login-form input,
.add-item input,
.add-item select,
.add-item textarea,
#editModal input,
#editModal textarea,
.modal-content input,
.modal-content textarea{
  width:100%;
  padding:12px 13px;
  border-radius:12px;
  border:1px solid var(--silver-border); /* Borda em prata */
  background:#0d0d0d;
  color:#fff;
  outline:none;
}

.form-grid input:focus,
.form-grid select:focus,
.sec-head input:focus,
.sec-head select:focus,
.login-form input:focus,
.add-item input:focus,
.add-item select:focus,
.add-item textarea:focus,
#editModal input:focus,
#editModal textarea:focus,
.modal-content input:focus,
.modal-content textarea:focus{
  border-color:var(--silver); /* Borda em prata ao focar */
  box-shadow:0 0 0 3px rgba(192, 192, 192,.12);
}

.add-item{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.add-item .row3{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:14px;
}

.add-item label,
.sec-head label,
.login-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:#ddd;
}

.sec-head .row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}

.layout-opts.small{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0;
}

.layout-opts.small label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  background:#111;
  border:1px solid var(--silver-border); /* Borda em prata */
  cursor:pointer;
}

.layout-opts.small input[type=radio]{
  accent-color:var(--silver); /* Cor do radio button em prata */
}

.layout-picker{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:12px;
  margin-top:14px;
}

.layout-choice{
  cursor:pointer;
  background:#111;
  border:2px solid var(--silver-border); /* Borda em prata */
  border-radius:16px;
  padding:14px 10px 12px;
  text-align:center;
  transition:transform .2s ease, border-color .2s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  user-select:none;
}

.layout-choice:hover{
  transform:translateY(-2px);
  border-color:var(--silver); /* Borda em prata ao passar o mouse */
}

.layout-choice input[type="radio"]{
  display:none;
}

.layout-choice:has(input:checked){
  border-color:var(--silver); /* Borda em prata quando selecionado */
}

.layout-choice span{
  font-size:12px;
  font-weight:600;
  color:#ddd;
}

.layout-preview{
  width:80px;
  height:54px;
  border-radius:10px;
  border:1px solid var(--silver-border); /* Borda em prata */
  overflow:hidden;
  display:grid;
  gap:3px;
  padding:4px;
  background:#0b0b0b;
}

.layout-preview .b{
  background:#2f2f2f;
  border-radius:3px;
}

.lp-grid3{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}
.lp-grid2x2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.lp-grid4{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr}
.lp-hero{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.lp-hero .b:first-child{grid-row:1 / 3}
.lp-columns{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr}
.lp-row{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr;gap:2px}
.lp-row .b{border-radius:2px}
.lp-carousel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:4px 6px;
}
.lp-carousel .b-side{
  width:10px;
  height:36px;
  background:#2e2e2e;
  border-radius:3px;
  opacity:.5;
}
.lp-carousel .b-main{
  flex:1;
  height:42px;
  background:#3e3e3e;
  border-radius:5px;
}
.lp-carousel .arrow{
  font-size:13px;
  color:#666;
  line-height:1;
  font-weight:700;
}

.layout-opts .demo{
  display:inline-block;
  width:36px;
  height:24px;
  border:1px solid var(--silver-border); /* Borda em prata */
  border-radius:6px;
  margin-right:6px;
  vertical-align:middle;
}

.demo.grid-3{background:linear-gradient(90deg,#444 49%,transparent 50%),linear-gradient(#444 49%,transparent 50%)}
.demo.grid-4{background:linear-gradient(90deg,#444 24%,transparent 25%,#444 49%,transparent 50%,#444 74%,transparent 75%),linear-gradient(#444 49%,transparent 50%)}
.demo.mosaic-hero{background:linear-gradient(90deg,#444 66%,transparent 67%),linear-gradient(#444 49%,transparent 50%)}
.demo.mosaic-columns{background:linear-gradient(90deg,#444 32%,transparent 33%,#444 65%,transparent 66%)}
.demo.row-gallery{background:linear-gradient(#444 49%,transparent 50%)}
.demo.carousel{background:linear-gradient(90deg,#222 15%,#555 15% 85%,#222 85%)}

.sections-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.section-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--silver-border); /* Borda em prata */
  border-radius:16px;
  padding:14px;
  background:#101010;
}

.s-title{
  font-weight:800;
}

.s-meta,
.s-desc{
  font-size:13px;
  color:#a8a8a8;
}

.s-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.edit-form{
  display:none;
  background:var(--bg2);
  padding:12px;
  border-radius:12px;
  margin-top:8px;
  border:1px solid var(--silver-border); /* Borda em prata */
}

.edit-form.show{
  display:block;
}

.edit-form input,
.edit-form textarea{
  width:100%;
  margin-top:6px;
  background:#141414;
  border:1px solid var(--silver-border); /* Borda em prata */
  border-radius:10px;
  padding:10px 12px;
  color:#fff;
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);
  z-index:99999;
  place-items:center;
  padding:20px;
}

.modal-content{
  width:min(560px, 100%);
  background:linear-gradient(180deg, #171717, #101010);
  border:1px solid var(--silver-border); /* Borda em prata */
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow);
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:8px;
}

.login-bg{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(218,165,32,.12), transparent 30%),
    #000;
}

.login-card{
  width:min(420px, 100%);
  background:linear-gradient(180deg, var(--bg2), #0f0f0f);
  border:1px solid var(--silver-border); /* Borda em prata */
  border-radius:20px;
  padding:26px;
  text-align:center;
  box-shadow:var(--shadow);
}

.logo-login{
  height:40px;
  margin:0 auto 12px;
}

.login-form{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.login-foot{
  margin-top:10px;
  font-size:12px;
  color:#8e8e8e;
}

.admin .mosaic-preview .tile{
  height:180px;
}

.mosaic-preview.grid-4 .tile{height:150px}
.mosaic-preview.grid-3 .tile{height:180px}
.mosaic-preview.grid-2x2 .tile{height:200px}

.tile-actions{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:6px;
}

.tile-draggable{
  cursor:grab;
}

.tile-draggable.dragging{
  opacity:.6;
}

.tile .cap{
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(0,0,0,.5);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

.admin .card{
  margin-bottom:20px;
}

.admin .adminbar{
  position:sticky;
  top:0;
}

.admin .form-grid,
.admin .sec-head .row2,
.admin .add-item .row3{
  align-items:start;
}

.admin .sitebar{
  position:sticky;
  top:0;
}

.admin .btn{
  box-shadow:none;
}

.admin .alert a{
  color:inherit;
  text-decoration:underline;
}

[data-aos]{
  will-change:transform, opacity;
}



@media (max-width: 1100px){
  .sobre-split{
    grid-template-columns:auto minmax(280px,360px) 1fr;
  }

  .portfolio-split,
  .contato-split{
    gap:40px;
  }

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

@media (max-width: 900px){
  .nav-toggle{
    display:inline-flex;
  }

  .nav-links{
    position:absolute;
    top:100%;
    left:16px;
    right:16px;
    margin-top:10px;
    padding:16px;
    border-radius:18px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    background:rgba(14,14,14,.98);
    border:1px solid var(--silver-border); /* Borda em prata */
    box-shadow:var(--shadow);
  }

  .nav-links.is-open{
    display:flex;
  }

  .nav-links a{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
  }

  .bar__inner{
    position:relative;
  }

  .intro-tight{
    grid-template-columns:1fr;
    min-height:auto;
    padding:48px 0 44px;
  }

  .intro-left{
    text-align:center;
    margin:0 auto;
  }

  .intro-left h1{
    font-size:clamp(2.8rem,14vw,5rem);
  }

  .intro-text{
    margin-left:auto;
    margin-right:auto;
  }

  .intro-mosaic{
    max-width:520px;
    margin:0 auto;
  }

  .sobre-split{
    grid-template-columns:1fr;
    gap:22px;
    padding:16px 0 82px;
  }

  .sobre-label,
  .portfolio-label,
  .contato-label{
    writing-mode:horizontal-tb;
    transform:none;
    text-align:center;
    font-size:clamp(2.5rem,12vw,5rem);
  }

  .portfolio-split,
  .contato-split{
    grid-template-columns:1fr;
    padding:10px 0 90px;
  }

  .portfolio-label,
  .contato-label{
    margin-bottom:-8px;
  }

  .portfolio-content{
    gap:42px;
  }

  .mosaic.grid-3,
  .mosaic.mosaic-columns{
    grid-template-columns:1fr;
  }

  .mosaic.grid-2x2{
    grid-template-columns:1fr;
  }

  .lightbox-content{
    grid-template-columns:1fr;
    gap:18px;
    padding:18px;
  }

  .lightbox{
    padding:14px;
  }

  .carousel-btn{
    width:42px;
    height:42px;
  }

  .mosaic.carousel .tile{
    flex:0 0 82vw;
    height:300px;
  }

  .form-grid,
  .sec-head .row2,
  .add-item .row3{
    grid-template-columns:1fr;
  }

  .section-item{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .container{
    width:min(var(--max), calc(100% - 20px));
  }

  .sitebar .container,
  .adminbar .container{
    width:min(var(--max), calc(100% - 20px));
  }

  .bar__inner{
    padding:12px 0;
  }

  .brand strong{
    font-size:.98rem;
  }

  .intro-mosaic{
    grid-template-columns:1fr;
  }

  .sobre-photo img{
    height:min(420px, 68vh);
    border-radius:20px;
  }

  .portfolio-content{
    gap:34px;
  }

  .contato-btn{
    width:100%;
    justify-content:center;
    padding:14px 18px;
    font-size:.98rem;
  }

 
  .mosaic.carousel .tile{
    flex-basis:88vw;
  }

  .login-card{
    padding:20px;
  }

  .modal-content{
    padding:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Seção de Contato - layout igual ao vídeo/imagem ---------- */

.contato-section{
  position:relative;
  min-height:72vh;
  background: var(--bg); /* fundo preto fixo */
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:0;
  align-items:flex-start;
  padding:28px 0 120px;
  border-top:1px solid var(--silver-border);
}

/* label vertical grande (lado esquerdo) */
.contato-section .side-label{
  font-weight:900;
  color: rgba(255,255,255,0.04);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(72px, 12vw, 200px);
  letter-spacing: -0.05em;
  padding-left: 18px;
  user-select:none;
  pointer-events:none;
  align-self: start;
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

/* área principal da coluna direita */
.contato-inner{
  padding: 4px 0 0 42px; /* afasta do label */
  display:flex;
  flex-direction:column;
  gap:26px;
  align-items:flex-start;
  justify-content:flex-start;
}

/* TITULO: prata metálico com textura e animação de brilho */
.contato-title{
  margin:0;
  font-size: clamp(44px, 6.8vw, 92px);
  line-height:0.95;
  font-weight:900;
  letter-spacing:-0.02em;
  position:relative;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  /* gradiente prata para o texto */
  background-image: linear-gradient(90deg,
    #e9e9e9 0%, #cfcfcf 25%, #f3f3f3 40%, #bfbfbf 60%, #ececec 80%, #c8c8c8 100%);
  background-size: 220% 100%;
  animation: shine 2.6s linear infinite;
  /* textura sutil via pseudo-element */
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

/* textura leve por cima do texto usando pseudo */
.contato-title::after{
  content: "";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 6px);
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* animação de brilho que passa sobre o gradiente */
@keyframes shine {
  0% { background-position: -120% 0; }
  50% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Botões pílula empilhados (igual ao vídeo) */
.contato-buttons{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:8px;
  align-items:flex-start;
}

/* base do botão pílula */
.pill-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  border-radius:999px;
  background:transparent;
  border:2px solid rgba(255,255,255,0.06);
  min-width:170px;
  font-weight:800;
  letter-spacing:0.01em;
  color:var(--muted);
  transition: all .28s cubic-bezier(.2,.9,.2,1);
  position:relative;
  overflow:visible;
  text-decoration:none;
}

/* pill text style (keeps consistent vertical alignment) */
.pill-text{ display:inline-block; transform:translateZ(0); }

/* In/Out animations ao carregar (staggered) */
.pill-btn{ opacity:0; transform: translateY(10px); }
.pill-btn[data-ani="1"]{ animation: pillIn .45s cubic-bezier(.2,.9,.2,1) .35s forwards; }
.pill-btn[data-ani="2"]{ animation: pillIn .45s cubic-bezier(.2,.9,.2,1) .55s forwards; }
.pill-btn[data-ani="3"]{ animation: pillIn .45s cubic-bezier(.2,.9,.2,1) .75s forwards; }

@keyframes pillIn {
  to { opacity:1; transform: translateY(0); }
}

/* cores e bordas específicas por rede (borda prata + cor do texto) */
.pill-whats{
  border-color: rgba(37,211,102,0.15);
  color: #25d366;
}
.pill-insta{
  border-color: rgba(225,48,108,0.12);
  color: #e1306c;
}
.pill-linkedin{
  border-color: rgba(0,119,181,0.12);
  color: #0077b5;
}

/* hover: pequeno preenchimento com a cor + glow */
.pill-whats:hover{
  background: rgba(37,211,102,0.08);
  box-shadow: 0 8px 30px rgba(37,211,102,0.09);
  transform: translateY(-6px);
}
.pill-insta:hover{
  background: rgba(225,48,108,0.08);
  box-shadow: 0 8px 30px rgba(225,48,108,0.09);
  transform: translateY(-6px);
}
.pill-linkedin:hover{
  background: rgba(0,119,181,0.08);
  box-shadow: 0 8px 30px rgba(0,119,181,0.09);
  transform: translateY(-6px);
}

/* small silver border accent on focus for accessibility */
.pill-btn:focus{
  outline:none;
  box-shadow: 0 0 0 6px rgba(192,192,192,0.06);
  border-color: var(--silver);
}

/* adaptativo / centraliza no mobile */
@media (max-width:900px){
  .contato-section{
    grid-template-columns: 1fr;
    padding:36px 0 80px;
  }

  .contato-section .side-label{ display:none; }
  .contato-inner{ padding:0 16px; align-items:center; text-align:center; }
  .contato-buttons{ align-items:center; }
  .pill-btn{ min-width:220px; }
}
/* ----- Icon + tooltip (pílula) styles ----- */

.icon-list{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:8px;
}

/* botão circular com ícone */
.icon-btn{
  --silver-border: rgba(192,192,192,0.12);
  --size: 56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size);
  height:var(--size);
  border-radius:999px;
  border:2px solid var(--silver-border);
  background:transparent;
  color:var(--muted);
  position:relative;
  text-decoration:none;
  transition: transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease, border-color .25s ease;
  padding:0;
  isolation:isolate;
}

/* icon SVG color controlled by currentColor */
.icon-btn svg{ display:block; color:currentColor; }

/* small text near icon (optional) */
.icon-label{ display:none; }

/* Tooltip/pill that appears above (hidden by default) */
.pill-tooltip{
  position:absolute;
  left: calc(100% + 12px); /* appears right side for desktop-like tooltip */
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  white-space:nowrap;
  font-size:.95rem;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.2,1), background .22s ease, box-shadow .22s ease;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
}

/* small arrow */
.pill-tooltip::before{
  content:'';
  position:absolute;
  left:-8px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  background:inherit;
  border-radius:2px;
  transform-origin:center;
  rotate:45deg;
  border-left:1px solid rgba(255,255,255,0.02);
  border-top:1px solid rgba(255,255,255,0.02);
}

/* on hover / focus show the pill */
.icon-btn:hover .pill-tooltip,
.icon-btn:focus .pill-tooltip,
.icon-btn.is-open .pill-tooltip{
  opacity:1;
  transform: translateY(-50%) translateX(0);
  pointer-events:auto;
}

/* service-specific colors (label text and tooltip accent) */
.icon-btn[data-service="whats"]{ color:#25d366; border-color: rgba(37,211,102,0.14); }
.icon-btn[data-service="whats"] .pill-tooltip{ background: rgba(37,211,102,0.08); color:#06150b; border-color: rgba(37,211,102,0.16); box-shadow: 0 10px 30px rgba(37,211,102,0.08); }

.icon-btn[data-service="insta"]{ color:#e1306c; border-color: rgba(225,48,108,0.12); }
.icon-btn[data-service="insta"] .pill-tooltip{ background: linear-gradient(90deg, rgba(225,48,108,0.08), rgba(252,176,69,0.06)); color:#fff; border-color: rgba(225,48,108,0.18); box-shadow: 0 10px 30px rgba(225,48,108,0.06); }

.icon-btn[data-service="linkedin"]{ color:#0077b5; border-color: rgba(0,119,181,0.12); }
.icon-btn[data-service="linkedin"] .pill-tooltip{ background: rgba(0,119,181,0.06); color:#061526; border-color: rgba(0,119,181,0.14); box-shadow: 0 10px 30px rgba(0,119,181,0.06); }

/* small scale/hover */
.icon-btn:hover{ transform: translateY(-6px) scale(1.02); }

/* accessibility focus ring */
.icon-btn:focus{ outline:none; box-shadow: 0 0 0 6px rgba(255,255,255,0.03); }

/* Staggered intro (optional): set via JS with data-ani attr */
.icon-btn{ opacity:0; transform: translateY(8px); }
.icon-btn[data-ani="1"]{ animation: iconIn .36s cubic-bezier(.2,.9,.2,1) .28s forwards; }
.icon-btn[data-ani="2"]{ animation: iconIn .36s cubic-bezier(.2,.9,.2,1) .44s forwards; }
.icon-btn[data-ani="3"]{ animation: iconIn .36s cubic-bezier(.2,.9,.2,1) .6s forwards; }
@keyframes iconIn { to { opacity:1; transform: translateY(0); } }

/* Mobile: pill appears above the icon and centered */
@media (max-width:900px){
  .contato-inner{ align-items:center; text-align:center; padding:0 16px; }
  .icon-list{ gap:14px; align-items:center; }
  .icon-btn{ width:64px; height:64px; }
  .pill-tooltip{
    left:50%;
    top:auto;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(6px);
  }
  .pill-tooltip::before{ left:50%; bottom:-6px; top:auto; transform: translateX(-50%) rotate(45deg); }
}
/* Corrige delay definido por seletor quebrado */
[data-aos-delay="2900"] { transition-delay: 2900ms !important; animation-delay: 2900ms !important; }

/* Fallback definitivo para os ícones - visíveis mesmo que AOS falhe */
.icon-btn { opacity:1 !important; transform:none !important; transition: transform .25s ease, opacity .25s ease !important; }

/* ------------------ Contato - versão preenchida e minimal ------------------ */
:root{
  --bg: #0b0b0b;
  --silver: #c7c7c7;
  --silver-border: rgba(199,199,199,0.12);
  --muted: rgba(255,255,255,0.7);
  --text: #e9e9e9;
}

/* seção */
.contato-section{
  position:relative;
  min-height:74vh;
  background: var(--bg);
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:0;
  align-items:flex-start;
  padding:28px 0 120px;
  border-top:1px solid var(--silver-border);
  color:var(--text);
}

/* label vertical */
.side-label{
  font-weight:900;
  color: rgba(255,255,255,0.04);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(72px, 12vw, 200px);
  letter-spacing: -0.05em;
  padding-left: 18px;
  user-select:none;
  pointer-events:none;
  align-self: start;
  height:100%;
  display:flex;
  align-items:flex-start;
}

/* inner content */
.contato-inner{
  padding: 4px 0 0 42px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}

/* title metalizado */
.contato-title{
  margin:0;
  font-size: clamp(44px, 6.8vw, 92px);
  line-height:0.95;
  font-weight:900;
  letter-spacing:-0.02em;
  position:relative;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  background-image: linear-gradient(90deg,
    #e9e9e9 0%, #cfcfcf 25%, #f3f3f3 40%, #bfbfbf 60%, #ececec 80%, #c8c8c8 100%);
  background-size: 220% 100%;
  animation: shine 2.6s linear infinite;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.contato-title::after{
  content: "";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 6px);
  mix-blend-mode: overlay;
  pointer-events:none;
}
@keyframes shine {
  0% { background-position: -120% 0; }
  50% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* --- PREMIUM CONTACT SECTION --- */
.premium-contact {
  background: #0b0b0b;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.contact-side-text {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 140px;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  letter-spacing: -5px;
  pointer-events: none;
  white-space: nowrap;
}

.contact-container {
  max-width: 1100px;
  position: relative;
  z-index: 2;
}

.contact-header {
  margin-bottom: 50px;
}

.premium-title {
  font-size: clamp(40px, 8vw, 85px);
  font-weight: 900;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(135deg, #fff 0%, #888 50%, #fff 100%);
  background-size: 200% auto;
  animation: shine 4s linear infinite;
  margin-bottom: 10px;
}

.premium-subtitle {
  color: #888;
  font-size: 18px;
  max-width: 500px;
}

.contact-content {
  display: flex;
  gap: 60px;
  align-items: center;
}

/* Social Column */
.social-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.social-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(255,255,255,0.02);
}

.social-circle svg { width: 22px; transition: transform 0.3s; }

.social-circle:hover {
  transform: scale(1.15) translateY(-5px);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.social-circle.wa:hover { color: #25D366; box-shadow: 0 0 20px rgba(37, 211, 102, 0.2); }
.social-circle.ig:hover { color: #E1306C; box-shadow: 0 0 20px rgba(225, 48, 108, 0.2); }
.social-circle.ln:hover { color: #0077B5; box-shadow: 0 0 20px rgba(0, 119, 181, 0.2); }

/* Info Card */
.info-card {
  flex: 1;
  background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 40px;
  backdrop-filter: blur(10px);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.info-item .label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.info-item .value {
  color: #ddd;
  font-size: 15px;
  font-weight: 500;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #25D366;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 10px #25D366;
  animation: pulse 2s infinite;
}


/* Buttons */
.btn-premium {
  background: #fff;
  color: #000;
  padding: 16px 35px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
  letter-spacing: 1px;
}

.btn-premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255,255,255,0.2);
}

.btn-ghost {
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 16px 35px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: #fff;
}

@keyframes shine { to { background-position: 200% center; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* Mobile */
@media (max-width: 768px) {
  .contact-side-text { display: none; }
  .contact-content { flex-direction: column; gap: 40px; }
  .social-column { flex-direction: row; justify-content: center; width: 100%; }
  .card-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .card-footer { flex-direction: column; }
  .contact-header { text-align: center; }
  .premium-subtitle { margin: 0 auto; }
}
.back-top {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(20,19,24,0.92);
  color: var(--steel-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(127,179,211,0.18);
  z-index: 998;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: all 0.25s ease;
}

.back-top:hover {
  transform: translateY(-3px);
  background: rgba(28,27,34,1);
  color: white;
}
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--steel-lo), var(--steel));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(78,122,155,0.35);
  z-index: 999;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: pulse-glow 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 40px rgba(78,122,155,0.45);
}

.whatsapp-float svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
/* --- FOOTER EXCLUSIVO QODEMY --- */
.footer-viana-exclusivo {
    background-color: #0b0b0b !important; /* fundo preto fixo */
    padding: 40px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

.footer-viana-content {
    color: #666 !important;
    font-size: 14px !important;
    font-family: sans-serif !important;
}

.link-qodemy-purple {
    color: #9d4edd !important; /* Roxo vibrante */
    text-decoration: none !important;
    font-weight: 800 !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    position: relative !important;
}

.link-qodemy-purple:hover {
    color: #c77dff !important; /* Roxo mais claro no hover */
    transform: translateY(-2px) !important;
    text-shadow: 0 0 10px rgba(157, 78, 221, 0.5) !important;
}

/* Linha embaixo do Qodemy no hover */
.link-qodemy-purple::after {
    content: '' !important;
    position: absolute !important;
    width: 0;
    height: 2px !important;
    bottom: -2px !important;
    left: 0 !important;
    background-color: #9d4edd !important;
    transition: width 0.3s ease !important;
}

.link-qodemy-purple:hover::after {
    width: 100% !important;
}
/* ======== BLOCO DE ESTILOS DE CONTATO (colar no final do assets/style.css) ======== */

/* Namespaced para evitar colidir com o restante: prefiro .ct- */
.ct-wrap { --ct-max:1100px; margin:0 auto; box-sizing:border-box; }

/* base section */
.contato-section {
  width: min(var(--max,1200px), calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0 110px;
  background: #0b0b0b; /* fundo preto fixo */
  color: #e6e6e6;
  box-sizing: border-box;
}

/* centraliza e limita conteúdo */
.contato-inner { max-width: var(--ct-max); margin: 0 auto; padding: 0 18px; text-align: center; }

/* titulo grande metalizado */
.contato-title {
  font-weight: 900;
  font-size: clamp(28px, 6.6vw, 56px);
  margin: 6px 0 6px;
  color: transparent;
  background: linear-gradient(90deg,#eee,#bbb 50%, #fff);
  -webkit-background-clip: text; background-clip: text;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

/* subtítulo */
.contato-subtitle { color: rgba(255,255,255,0.62); margin: 0 0 28px; font-size: 1rem; max-width: 820px; margin-left:auto;margin-right:auto; }

/* frame que contém ícones + card; centralizado */
.contato-frame.centered {
  display:flex;
  gap: 34px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ícones em coluna (desktop) ou linha (mobile) */
.icon-list { display:flex; flex-direction:column; gap: 18px; align-items:center; }

/* circular icon */
.icon-btn {
  --size:56px;
  width:var(--size);
  height:var(--size);
  border-radius: 12px; /* cards usam cantos arredondados; deixa parecido */
  display:inline-grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  color: #e6e6e6;
  text-decoration:none;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease, border-color .28s ease;
  position: relative;
  overflow: visible;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* SVG usa currentColor */
.icon-btn svg { width: 22px; height:22px; display:block; color: currentColor; }

/* tooltip pill (posicionado à direita desktop) */
.pill-tooltip {
  position:absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight:800;
  font-size: .95rem;
  background: rgba(255,255,255,0.03);
  color: #f6f6f6;
  border: 1px solid rgba(255,255,255,0.03);
  opacity: 0; pointer-events:none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.9,.2,1);
  white-space:nowrap;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* mostrar tooltip em hover/focus ou quando .is-open (touch) */
.icon-btn:hover .pill-tooltip,
.icon-btn:focus .pill-tooltip,
.icon-btn.is-open .pill-tooltip {
  opacity:1;
  transform: translateY(-50%) translateX(0);
  pointer-events:auto;
}

/* service accents: muda cor do ícone e tooltip */
.icon-btn[data-service="whats"] { color: #25D366; border-color: rgba(37,211,102,0.12); }
.icon-btn[data-service="whats"] .pill-tooltip { background: rgba(37,211,102,0.06); color: #04130a; }

.icon-btn[data-service="insta"] { color: #E1306C; border-color: rgba(225,48,108,0.10); }
.icon-btn[data-service="insta"] .pill-tooltip { background: linear-gradient(90deg, rgba(225,48,108,0.06), rgba(252,176,69,0.04)); color:#fff; }

.icon-btn[data-service="linkedin"] { color: #0077B5; border-color: rgba(0,119,181,0.10); }
.icon-btn[data-service="linkedin"] .pill-tooltip { background: rgba(0,119,181,0.05); color:#061526; }

/* hover effect - eleva e brilho sutil */
.icon-btn:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }

/* info card (estilo similar aos cards do site) */
.info-card.contato-info {
  min-width: 300px;
  max-width: 520px;
  border-radius: 12px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  color: #e6e6e6;
  text-align:left;
}

/* grid simples dentro do card */
.card-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 10px; }
.info-item .label { font-size: 10px; color: rgba(255,255,255,0.35); font-weight:800; letter-spacing:1px; }
.info-item .value { font-weight:700; color:#f0f0f0; font-size:14px; }

/* CTA buttons no card */
.card-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-premium { background:#fff;color:#000;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:800;box-shadow:0 8px 30px rgba(255,255,255,0.06); }
.btn-ghost { border:1px solid rgba(255,255,255,0.06); color:#ddd; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:800; }

/* responsivo */
@media (max-width:900px) {
  .contato-frame.centered { flex-direction: column; align-items:center; gap:20px; padding: 0 6px; }
  .icon-list { flex-direction:row; gap:14px; }
  .pill-tooltip { left: 50%; top: auto; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(6px); }
  .card-grid { grid-template-columns: 1fr; text-align:left; }
  .info-card.contato-info { text-align:center; padding:18px; }
  .contato-title { font-size: clamp(22px, 8vw, 38px); }
}
/* ======= RESTAURAÇÃO E ALINHAMENTO DA SESSÃO DE CONTATO ======= */
/* Cole este bloco ao FINAL do assets/style.css */

/* garante que a seção possa posicionar a label */
#contato,
section#contato,
.contato-section {
  position: relative !important;
  overflow: visible !important;
  /* se sua seção usa grid, esta regra não altera layout existente */
}

/* LABEL VERTICAL grande (lado esquerdo) */
.contact-side-text {
  position: absolute;
  left: 12px;               /* ajusta a distância da borda esquerda */
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-weight: 900;
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.9;
  color: rgba(255,255,255,0.035); /* tênue e por trás */
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.03em;
  white-space: nowrap;
  z-index: 0; /* fica atrás do conteúdo principal */
  text-transform: uppercase;
}

/* garante que o conteúdo principal fique acima da label */
.contato-inner,
#contato .contato-inner {
  position: relative;
  z-index: 2;
}

/* Força centralização do frame de ícones + card na coluna principal */
.contato-frame.centered,
#contato .contato-frame.centered {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Quando a página usa grid com duas colunas, alinha o conteúdo para a segunda coluna.
   Isso tenta preservar o layout original sem remover regras existentes. */
@supports (display: grid) {
  /* se existir .contato-section como grid, tenta esta abordagem */
  .contato-section[style*="grid"], .contato-section {
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    align-items: start !important;
    gap: 28px !important;
  }
  /* coloca a label na primeira coluna e o conteúdo na segunda */
  .contact-side-text {
    grid-column: 1 / 2;
    position: absolute; /* mantemos absolute para não quebrar o fluxo */
    left: 8px;
  }
  .contato-inner { grid-column: 2 / -1; }
}

/* Ajustes finos: garante que ícones fiquem empilhados verticalmente e centralizados */
.icon-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Força estilos do card para não ocupar 100% largura na esquerda */
.info-card.contato-info,
.info-card {
  max-width: 520px !important;
  margin-left: 0 !important;
}

/* Responsivo: em telas pequenas label desaparece para não atrapalhar */
@media (max-width: 900px) {
  .contact-side-text { display: none; }
  .contato-frame.centered { gap: 18px; padding: 0 12px; }
  .icon-list { flex-direction: row; gap: 14px; }
  .pill-tooltip { left: 50% !important; transform: translateX(-50%) translateY(6px) !important; top: auto; bottom: calc(100% + 12px) !important; }
}

/* ALINHAMENTO PRECISO COM A SEÇÃO DE TRABALHOS */

/* ===== Ajustes rápidos: aumentar card e consertar ícones ===== */

.contato-section {
  /* mantém a grid 2-colunas e espaço para o texto vertical */
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 28px;
  align-items: start;
  padding-top: 60px;
  background: #0b0b0b;
}

/* label vertical mantém-se atrás */
.contact-side-text { 
  grid-column: 1 / 2;
  position: relative;
  left: 8px;
  top: 0;
  transform: rotate(-90deg);
  transform-origin: left center;
  font-size: clamp(80px, 10vw, 140px);
  color: rgba(255,255,255,0.035);
  z-index: 0;
}

/* conteúdo principal na 2ª coluna */
.contato-inner { grid-column: 2 / -1; position: relative; z-index: 2; }

/* Aumentar título levemente */
.contato-title {
  font-size: clamp(36px, 6.5vw, 72px);
  margin-bottom: 10px;
}

/* AUMENTAR E REFORÇAR O CARD */
.info-card.contato-info {
  min-width: 560px;        /* maior para destacar */
  max-width: 680px;
  padding: 36px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 30px 60px rgba(0,0,0,0.65), 0 6px 18px rgba(0,0,0,0.6) inset;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  margin-top: 6px;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;
}

/* leve elevação ao hover */
.info-card.contato-info:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 90px rgba(0,0,0,0.72);
}

/* garante que o frame esteja à esquerda da coluna (alinhamento com cards) */
.contato-frame.centered {
  display:flex;
  gap: 34px;
  justify-content: flex-start; /* deixa o card próximo da coluna principal */
  align-items: flex-start;
  flex-wrap: nowrap;
}

/* ===== ICONS: aumentar, arredondar e consertar quebras ===== */
.icon-list {
  display:flex;
  flex-direction:column;
  gap: 20px;
  align-items: center;
  margin-top: 12px;
}

/* tamanho maior e formato semelhante aos cards */
.icon-btn {
  --size: 72px;
  width: var(--size);
  height: var(--size);
  border-radius: 14px; /* cantos arredondados como os cards */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.04);
  color: #e6e6e6;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  transition: transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease, border-color .25s ease;
  overflow: visible; /* evita que o SVG seja cortado */
  position: relative;
}

/* SVG maior */
.icon-btn svg { width: 28px; height: 28px; color: currentColor; display:block; }

/* tooltip pill maior e mais legível */
.pill-tooltip {
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .2s cubic-bezier(.2,.9,.2,1);
  white-space: nowrap;
  z-index: 5;
}

/* exibir tooltip */
.icon-btn:hover .pill-tooltip,
.icon-btn.is-open .pill-tooltip,
.icon-btn:focus .pill-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* service colors (mantém o visual que você pediu) */
.icon-btn[data-service="whats"] { color: #25D366; border-color: rgba(37,211,102,0.12); }
.icon-btn[data-service="insta"]  { color: #E1306C; border-color: rgba(225,48,108,0.10); }
.icon-btn[data-service="linkedin"] { color: #0077B5; border-color: rgba(0,119,181,0.10); }

/* Hover mais pronunciado nos ícones */
.icon-btn:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 28px 60px rgba(0,0,0,0.7); }

/* FORÇA VISIBILIDADE (fallback caso AOS/JS quebre) */
.icon-btn,
.pill-btn,
.pill-tooltip,
.info-card.contato-info {
  opacity: 1 !important;
  transform: none !important;
  transition: all .18s ease !important;
}

/* Mobile: ajusta larguras e empilha */
@media (max-width: 900px) {
  .contato-section { grid-template-columns: 1fr !important; padding-top: 40px; }
  .contact-side-text { display: none; }
  .contato-inner { grid-column: 1 / -1; padding-left: 18px; padding-right: 18px; text-align: center; }
  .info-card.contato-info { min-width: auto; max-width: 100%; padding: 22px; border-radius: 12px; }
  .contato-frame.centered { flex-direction: column; gap: 18px; align-items: center; }
  .icon-list { flex-direction: row; gap: 12px; }
  .pill-tooltip { left: 50% !important; top: auto; bottom: calc(100% + 10px) !important; transform: translateX(-50%) translateY(6px) !important; }
}
/* ======= Correções: evitar sobreposição, shape dos ícones e tooltip somente no hover ======= */

/* garante que frame e lista de ícones não se sobreponham ao card */
.contato-frame.centered {
  display: flex !important;
  gap: 40px;                 /* mais espaço entre ícones e card */
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}

/* Lista de ícones: vertical, com gap suficiente e sem overflow negativo */
.icon-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;      /* evita sobreposição entre ícones */
  align-items: center !important;
  margin-top: 8px;
  margin-right: 4px;         /* distância extra do card */
  z-index: 3;                /* ícones acima do background, mas abaixo do overlay se houver */
}

/* Forma dos ícones — parecidos com cards do site */
.icon-btn {
  --size: 72px;
  width: var(--size);
  height: var(--size);
  border-radius: 14px;       /* cantos arredondados */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  color: #e6e6e6;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  overflow: hidden;          /* evita que qualquer elemento interno "vaze" */
  position: relative;
  transition: transform .26s cubic-bezier(.2,.9,.2,1), box-shadow .26s ease, border-color .26s ease;
  z-index: 4;                /* ícones ficam acima do card (se quiser que card cubra, reduzir) */
}

/* aumenta SVG internamente para não ficar pequeno */
.icon-btn svg { width:28px; height:28px; display:block; color:currentColor; }

/* Tooltip: escondida por padrão (não fixa) */
.pill-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight:800;
  font-size: .95rem;
  background: rgba(255,255,255,0.03);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.03);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.9,.2,1), visibility .18s;
  white-space: nowrap;
  z-index: 6;
}

/* Mostrar tooltip apenas no hover / focus / when .is-open (touch) */
.icon-btn:hover .pill-tooltip,
.icon-btn:focus .pill-tooltip,
.icon-btn.is-open .pill-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* evita que alguma regra global force tooltip sempre visível */
/* (se houver regras antigas com !important, procure e remova-as) */
.pill-tooltip[style] { /* limpador leve caso algo injete style inline */
  opacity: unset;
  visibility: unset;
}

/* evita que tooltips ou ícones sejam forçados por fallback global */
/* NÃO usar !important aqui — preferimos especificidade */
.icon-btn,
.pill-tooltip,
.info-card.contato-info {
  transition: all .22s ease;
}

/* Forçar o card atrás dos ícones — se preferir o inverso, reduza z-index dos ícones */
.info-card.contato-info {
  z-index: 2;
  position: relative;
}

/* se algum elemento estava empilhando ícones entre si (overflow negativo), reseta margens negativas */
.icon-list * { margin: 0; }

/* Mobile: tooltips aparecem acima dos ícones e sem overflow */
@media (max-width: 900px) {
  .icon-list { flex-direction: row; gap: 14px; margin-right: 0; }
  .pill-tooltip {
    left: 50%;
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
  }
  .contato-frame.centered { gap: 20px; justify-content: center; }
}

/* ESTRUTURA GERAL DA SEÇÃO */
.contato-nova-estrutura {
    background: #0b0b0b;
    padding: 100px 0;
    display: flex; /* Flexbox para alinhar texto lateral e conteúdo */
    align-items: flex-start;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* TEXTO VERTICAL "CONTATO" LÁ NA ESQUERDA */
.contato-label-lateral {  
    writing-mode: vertical-rl;  
    transform: rotate(180deg);  
    /* Diminuímos o tamanho máximo para caber no espaço da seção */  
    font-size: clamp(64px, 12vw, 140px);   
    font-weight: 900;  
    color: rgba(255, 255, 255, 0.07);  
    pointer-events: none;  
    position: absolute;  
    /* Alinhado com a margem esquerda padrão */  
    left: 360px;   
    /* Mudamos de 50% para um valor fixo no topo da seção para não descer até o footer */  
    top: -59px;   
    line-height: 1;  
    z-index: 1;  
}
/* CONTEÚDO CENTRALIZADO */
.contato-conteudo-principal {
    max-width: 1000px;
    width: 90%;
    position: relative;
    z-index: 2;
    margin-left: 386px; /* Recuo para não bater no texto lateral */
}

.contato-titulo-grande {
    font-size: clamp(40px, 7vw, 75px);
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -2px;
}

.contato-descricao {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* GRID FLEXÍVEL (ÍCONES + CARD) */
.contato-grid-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* COLUNA DE ÍCONES (ESQUERDA) */
.contato-icones-coluna {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contato-item-btn {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

.contato-item-btn svg {
    width: 25px;
    height: 25px;
}

/* HOVER DOS ÍCONES */
.contato-item-btn:hover {  
  background: rgba(255,255,255,0.05);  
  border-color: rgba(255,255,255,0.2);  
  color: #fff;  
  transform: translateY(-5px);  
  z-index: 90;             /* eleva ainda mais quando em hover */  
}

/* TOOLTIP (NOME) QUE SÓ APARECE NO HOVER */
.contato-tooltip {
    position: absolute;
    left: 85px;
    background: #fff;
    color: #000;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.contato-item-btn:hover .contato-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* CARD DE INFORMAÇÕES (DIREITA) */
.contato-card-info {
    flex: 1;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

.card-grid-detalhes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.detalhe-item .label-mini {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 5px;
    font-weight: 700;
}

.detalhe-item .valor-texto {
    color: #fff;
    font-weight: 600;
}

/* BOTÕES NO CARD */
.btn-email-link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 25px;
    display: block;
}

.btn-email-link span {
    color: #fff;
    text-decoration: underline;
    margin-left: 5px;
}

.card-botoes-grupo {
    display: flex;
    gap: 15px;
}

.btn-primario {
    background: #fff;
    color: #000;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    flex: 1;
    text-align: center;
    transition: transform 0.3s;
}

.btn-secundario {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    flex: 1;
    text-align: center;
}

.btn-primario:hover { transform: translateY(-3px); background: #f0f0f0; }

/* RESPONSIVO */
@media (max-width: 850px) {
    .contato-label-lateral { display: none; }
    .contato-conteudo-principal { margin-left: 0; text-align: center; }
    .contato-grid-flex { flex-direction: column; align-items: center; }
    .contato-icones-coluna { flex-direction: row; }
    .contato-tooltip { display: none; } /* Esconde tooltips no mobile */
    .card-grid-detalhes { grid-template-columns: 1fr; }
    .card-botoes-grupo { flex-direction: column; }
}