:root{
  --bg: #07090F;
  --panel: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --faint: rgba(255,255,255,0.55);
  --black: #050506;

  /* ZIPAR accent (micro-cores) */
  --zip-blue: #3F66FF;
  --zip-blue-2: #2E49FF;
  --zip-soft: rgba(63,102,255,0.18);
  --zip-soft-2: rgba(46,73,255,0.14);

  --radius: 18px;
  --radius-lg: 26px;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow-soft: 0 12px 40px rgba(0,0,0,.35);

  --max: 1160px;
  --pad: 24px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 600px at 20% -10%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(900px 600px at 115% 20%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(700px 450px at 60% 10%, var(--zip-soft), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.4;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
.container{
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 1;
}

/* background: noise + glow + grid */
.bg-noise{
  position: fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity: .08;
  pointer-events:none;
  mix-blend-mode: overlay;
  z-index: 0;
}
.bg-glow{
  position: fixed;
  width: 920px; height: 920px;
  left: -260px; top: 110px;
  background: radial-gradient(circle, var(--zip-soft), transparent 62%);
  filter: blur(10px);
  pointer-events:none;
  z-index: 0;
}
.bg-grid{
  position: fixed; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: .05;
  pointer-events:none;
  z-index: 0;
}

/* header */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,9,15,0.55);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header__inner{
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand{
  display:flex;
  align-items:center;
}
.brand__logo{
  height: 60px;
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.35));
}

.nav{
  display: none;
  gap: 18px;
  color: var(--muted);
  font-weight: 600;
}
.nav a{
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover{
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.header__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.menu-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.menu-btn span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 20px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.menu-btn span:nth-child(2){ margin-top: 6px; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ transform: translateY(-4px) rotate(-45deg); }

.mobile-nav{
  display:none;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav.open{ display:block; }
.mobile-nav__inner{
  padding: 14px var(--pad) 18px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-nav__inner a{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
}
.mobile-nav__inner a:hover{ color: var(--text); }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 700;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  user-select: none;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
  color: var(--black);
  border-color: rgba(255,255,255,0.22);
  position: relative;
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(220px 60px at 30% 10%, var(--zip-soft), transparent 60%);
  opacity: .65;
  pointer-events:none;
}
.btn--primary:hover{ background: rgba(255,255,255,0.98); }

.btn--ghost{
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.btn--ghost:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

.btn--full{ width: 100%; }

/* hero */
.hero{
  padding: 54px 0 10px;
}
.hero__grid{
  display:grid;
  gap: 18px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-weight: 700;
}
.pill .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--zip-blue), var(--zip-blue-2));
  box-shadow: 0 0 0 6px var(--zip-soft), 0 0 22px var(--zip-soft-2);
}

.hero__title{
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 16px 0 12px;
}
.accent{
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  text-decoration-color: var(--zip-soft);
}
.hero__subtitle{
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 20px;
}
.hero__cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.stats{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.stat{
  flex: 1 1 180px;
  padding: 14px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.stat__value{
  font-weight: 900;
  letter-spacing: -0.02em;
}

.stat__label{
  margin-top: 6px;
  color: var(--faint);
  font-size: 13px;
}

.gradient-text{
  background: linear-gradient(
    135deg,
    #1f2f6d 0%,
    var(--zip-blue-2) 45%,
    var(--zip-blue) 70%,
    #2b3fa8 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  

  
}


/* hero card */
.hero__card{ min-height: 320px; }
.glass{
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.glass__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.glass__dots{ display:flex; gap: 8px; }
.glass__dots span{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.03);
}
.glass__dots span:nth-child(1){
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.30), rgba(255,255,255,0.08));
}
.glass__dots span:nth-child(2){
  background: radial-gradient(circle at 30% 30%, var(--zip-blue), rgba(255,255,255,0.08));
  box-shadow: 0 0 18px var(--zip-soft);
}
.glass__dots span:nth-child(3){
  background: radial-gradient(circle at 30% 30%, var(--zip-blue-2), rgba(255,255,255,0.08));
  box-shadow: 0 0 18px var(--zip-soft-2);
}
.glass__title{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.glass__body{ padding: 18px 16px 20px; }



.mini-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mini{
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  text-align:center;
  color: rgba(255,255,255,0.84);
  font-weight: 800;
}
.hint{
  margin-top: 14px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

.marquee{
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  position: relative;
}

.marquee__track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee var(--marquee-duration) linear infinite;
}


/* Cada grupo nunca pode encolher */
.marquee__group{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Texto */
.marquee__group span{
  color: rgba(255,255,255,0.82);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Bolinhas */
.marquee__group i{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--zip-blue);
  box-shadow: 0 0 10px rgba(63,102,255,0.3);
  flex-shrink: 0;
}

/* Fades premium */
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 120px;
  pointer-events:none;
  z-index: 2;
}
.marquee::before{
  left:0;
  background: linear-gradient(to right, #07090f, transparent);
}
.marquee::after{
  right:0;
  background: linear-gradient(to left, #07090f, transparent);
}

@keyframes marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-distance)),0,0); }
}

.panel-method{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.panel-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}

.panel-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.panel-list li{
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
}

.panel-list li::before{
  content:"";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--zip-blue), var(--zip-blue-2));
  box-shadow: 0 0 10px var(--zip-soft);
}


/* sections */
.section{ padding: 72px 0; }
.section__head{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.section__head h2{
  margin:0;
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.02em;
}
.section__head p{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

/* cards */
.cards{
  display:grid;
  gap: 12px;
}
.card{
  padding: 18px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-soft);
}

.card h3{ 
  margin: 0 0 8px; 
  letter-spacing: -0.01em; }

.card p{ 
  margin:0 0 14px; 
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.card ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.78);
}
.card li{ margin: 6px 0; 
font-size: 15px;
}

/* bullets com gradiente (igual ao premium) */
.card ul{
  list-style: none;          /* tira a bolinha padrão */
  padding-left: 0;           /* remove recuo padrão */
  margin: 0;
}

.card li{
  position: relative;
  padding-left: 18px;        /* espaço pra bolinha */
  margin: 6px 0;
}

.card li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;               /* centraliza na linha */
  width: 7px;
  height: 7px;
  border-radius: 999px;

  background: linear-gradient(
    135deg,
    #1f2f6d 0%,
    var(--zip-blue-2) 45%,
    var(--zip-blue) 70%,
    #2b3fa8 100%
  );

  box-shadow: 0 0 10px rgba(63,102,255,0.18); /* bem sutil */
  transform: translateY(-50%);
}


.work{
  position: relative;
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}
.work::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 180px at 30% 0%, rgba(255,255,255,0.10), transparent 60%);
  opacity: .85;
  pointer-events:none;
}
.work::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 160px at 80% 10%, var(--zip-soft), transparent 60%);
  opacity: .55;
  pointer-events:none;
}
.work__tag{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.work__title{
  margin-top: 14px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.work__meta{
  margin-top: 8px;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  font-size: 13px;
}
.note{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
}
.note em{ color: rgba(255,255,255,0.90); }

/* steps */
.steps{ display:grid; gap: 12px; }
.step{
  padding: 18px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.step__n{
  width: 44px; height: 44px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 900;
  position: relative;
}
.step__n::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  background: radial-gradient(160px 60px at 30% 10%, var(--zip-soft), transparent 60%);
  opacity:.55;
  pointer-events:none;
}
.step h3{ margin: 12px 0 8px; }
.step p{ margin: 0; color: var(--muted); }

/* pricing */
.pricing{ display:grid; gap: 12px; }
.price{
  padding: 20px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  position: relative;
  overflow:hidden;
}
.price--featured{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.16);
}
.price--featured::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 200px at 20% 0%, var(--zip-soft), transparent 60%);
  opacity:.6;
  pointer-events:none;
}
.badge{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.90);
  color: var(--black);
  font-weight: 900;
  font-size: 12px;
}
.price h3{ margin: 0 0 8px; }
.price__desc{ margin: 0 0 16px; color: var(--muted); }
.price__value{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.price__value span{
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.60);
  margin-left: 6px;
}
.price ul{
  margin: 0 0 14px;
  padding-left: 18px;
  color: rgba(255,255,255,0.78);
}
.price li{ margin: 6px 0; }

/* faq */
.faq{ display:grid; gap: 10px; }
.faq__item{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 14px 16px;
}
.faq__item summary{
  cursor:pointer;
  font-weight: 900;
  color: rgba(255,255,255,0.90);
}
.faq__item p{
  margin: 10px 0 0;
  color: var(--muted);
}

/* CTA */
.section--cta{ padding: 84px 0; }
.cta{
  display:grid;
  gap: 14px;
  padding: 22px;
  border-radius: calc(var(--radius-lg) + 6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(900px 260px at 20% 0%, var(--zip-soft), transparent 60%);
  opacity:.55;
  pointer-events:none;
}
.cta h2{
  margin:0 0 8px;
  font-size: clamp(24px, 3.1vw, 36px);
  letter-spacing: -0.02em;
}
.cta p{ margin:0; color: var(--muted); max-width: 60ch; }
.cta__mini{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  font-size: 13px;
}
.cta__info{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.info-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.78);
  font-weight: 800;
  font-size: 12px;
}
.info-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--zip-blue), var(--zip-blue-2));
  box-shadow: 0 0 0 6px var(--zip-soft);
}

.form{
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  position: relative;
}
.form label{ display:block; margin-bottom: 12px; }
.form span{
  display:block;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
}
.form input, .form select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  outline: none;
}
/* Diz ao navegador que o formulário usa esquema escuro */
.form input,
.form select,
.form textarea{
  color-scheme: dark;
}

/* Corrige o fundo branco do dropdown (options) */
.form select option{
  background: #0b0f18;
  color: rgba(255,255,255,0.92);
}

/* Quando uma opção está selecionada */
.form select option:checked{
  background: #111a2a;
}

/* Corrige autofill branco do Chrome/Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,0.92);
  -webkit-box-shadow: 0 0 0px 1000px rgba(12,14,20,0.85) inset;
  box-shadow: 0 0 0px 1000px rgba(12,14,20,0.85) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.form input::placeholder{ color: rgba(255,255,255,0.45); }
.form input:focus, .form select:focus{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
}
.form__hint{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

/* footer */
.footer{
  padding: 44px 0 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__inner{
  display:flex;
  flex-direction: column;
  gap: 18px;
}
.footer__logo{
  height: 40px;
  width:auto;
}
.footer__left p{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.65);
  max-width: 60ch;
}
.footer__right{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.70);
  font-weight: 800;
}
.footer__right a{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.footer__right a:hover{ background: rgba(255,255,255,0.06); }
.footer__copy{
  margin-top: 16px;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
}

/* reveal animation */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* responsive */
@media (min-width: 900px){
  .nav{ display:flex; }
  .menu-btn{ display:none; }
  .mobile-nav{ display:none !important; }

  .hero__card{
    margin-left: 140px;
  }    

  .hero__grid{
    grid-template-columns: 1.1fr .9fr;
    align-items: stretch;
    gap: 18px;
  }
  .cards{ grid-template-columns: repeat(3, 1fr); }
  .steps{ grid-template-columns: repeat(4, 1fr); }
  .pricing{
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .cta{
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
    gap: 18px;
  }
  .footer__inner{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

/* Painel - separação estratégica */
.panel-section {
  margin-bottom: 26px; /* aumenta o respiro */
}

.panel-section h4 {
  margin-bottom: 14px;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
}

.panel-section ul {
  margin-bottom: 18px;
}
/* Frase institucional do painel */
.panel-authority {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);

  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.02em;
}
.ig-embed{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  padding: 12px;
  overflow: hidden;
}
/* ===== Instagram (premium card) ===== */
.title-grad{
  background: linear-gradient(90deg, var(--zip-blue), rgba(255,255,255,0.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ig-card{
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: calc(var(--radius-lg) + 10px);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ig-left{
  display: flex;
  gap: 14px;
  align-items: center;
}

.ig-avatar{
  width: 64px; height: 64px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: radial-gradient(160px 60px at 30% 10%, var(--zip-soft), transparent 60%);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ig-avatar img{ width: 100%; height: 100%; object-fit: cover; }

.ig-user{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.ig-verify{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--zip-blue), var(--zip-blue-2));
  box-shadow: 0 0 0 6px var(--zip-soft);
}

.ig-name{
  margin-top: 4px;
  color: rgba(255,255,255,0.70);
  font-weight: 700;
  font-size: 13px;
}

.ig-stats{
  margin-top: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ig-stats div{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ig-stats b{
  font-weight: 900;
  color: rgba(255,255,255,0.92);
}
.ig-stats span{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.62);
}

.ig-right{
  display: grid;
  gap: 14px;
}

.ig-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 16px;
}

.ig-thumb{
  border-radius: 18px;
  overflow: hidden;
  
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  transform: translateZ(0);
}
.ig-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.02);
}
.ig-thumb:hover{
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.ig-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ig-hint{
  margin-top: 12px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

@media (min-width: 900px){
  .ig-card{
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
  }
  .ig-thumb img{ height: 98px; }
}

/* ===== IG Modal / Lightbox ===== */
.ig-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.ig-modal.is-open{ display: block; }

.ig-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
}

.ig-modal__dialog{
  position: relative;
  width: min(920px, calc(100% - 28px));
  margin: 60px auto;
  border-radius: calc(var(--radius-lg) + 10px);
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ig-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}

.ig-modal__content{
  padding: 18px;
  display: grid;
  place-items: center;
}

.ig-modal__content img{
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.2);
}

.ig-modal__actions{
  display: flex;
  gap: 10px;
  padding: 0 18px 18px;
  flex-wrap: wrap;
}

/* ===== Instagram vertical / legível ===== */
.ig-card.ig-vertical{
  grid-template-columns: 1fr;
}

.ig-posts{
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  align-items: start;
}

.ig-post{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 4 / 5; /* formato mais “post/feed” */
}

.ig-post img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* em telas grandes: posts maiores */
@media (min-width: 900px){
  .ig-card.ig-vertical{
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
  }

  .ig-posts{
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 16px;
  }
}
/* ===== FIX IG: posts + ações sem sobrepor ===== */
.ig-card.ig-vertical .ig-right{
  display: grid;
  grid-template-rows: auto auto; /* posts em cima, botoes embaixo */
  gap: 14px;
  align-content: start;
}

.ig-card.ig-vertical .ig-actions{
  justify-content: flex-start;
}

/* posts em grid fixo e alinhado */
.ig-card.ig-vertical .ig-posts{
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 16px;
  align-items: start;
}

/* cards dos posts com tamanho consistente */
.ig-card.ig-vertical .ig-post{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 4 / 5;
}

/* imagem do post ocupa tudo */
.ig-card.ig-vertical .ig-post img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
}

/* ===== FADE da troca ===== */
.ig-card.ig-vertical .ig-post img{
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  opacity: 1;
}
.ig-card.ig-vertical .ig-post.is-fading img{
  opacity: 0;
  transform: scale(0.995);
}

/* telas grandes: aumenta um pouco */
@media (min-width: 900px){
  .ig-card.ig-vertical .ig-posts{
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
  }
}
/* === FIX: botão "Abrir Instagram" clicável (sem sobreposição) === */
.ig-card.ig-vertical .ig-right{
  display: grid;
  grid-template-rows: auto auto; /* posts / ações */
  gap: 14px;
  align-content: start;
}

/* garante que posts não invadam a área dos botões */
.ig-card.ig-vertical .ig-posts{
  position: relative;
  z-index: 1;
}

/* garante que botões ficam por cima e clicáveis */
.ig-card.ig-vertical .ig-actions{
  position: relative;
  z-index: 5;
}

/* só pra garantir: os anchors dos posts não “estouram” fora */
.ig-card.ig-vertical .ig-post{
  display: block;
  position: relative;
  z-index: 1;
}
/* ===== Instagram vertical / legível (4 posts + actions embaixo) ===== */
.ig-card.ig-vertical{
  grid-template-columns: 1fr;
}

.ig-right{
  display: grid;
  grid-template-rows: auto auto; /* posts e depois ações */
  gap: 16px;
}

.ig-posts{
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 14px;
  align-items: start;
}

@media (min-width: 900px){
  .ig-card.ig-vertical{
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
  }

  .ig-posts{
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 16px;
  }
}

/* post em formato feed */
.ig-post{
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 4 / 5;
  position: relative;
  transform: translateZ(0);
  transition: opacity .26s var(--ease), transform .26s var(--ease), filter .26s var(--ease), border-color .26s var(--ease);
}

.ig-post img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.02);
}

/* hover premium */
.ig-post:hover{
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* fade da troca */
.ig-post.is-fading{
  opacity: .12;
  filter: blur(2px) saturate(.95);
  transform: scale(.985);
}

/* actions sempre abaixo, centralizado */
.ig-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}