/* ============================================================
   IMAM — Instagram ao Vivo CSS v5.0
   ============================================================ */
:root {
  --ig-1: #07192e;
  --ig-2: #0a2847;
  --ig-3: #0d4a8a;
  --ig-acc: #3b9eff;
  --ig-acc2: #a78bfa;
  --ig-text: rgba(255,255,255,.95);
  --ig-muted: rgba(255,255,255,.60);
  --ig-card-bg: rgba(255,255,255,.08);
  --ig-card-ho: rgba(255,255,255,.14);
  --ig-border: rgba(255,255,255,.11);
  --ig-r: 20px;
  --ig-shadow: 0 20px 60px rgba(4,14,28,.35);
}

.ima-ig-shell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ig-1) 0%, #0b3060 45%, #0e5fa8 100%);
  color: var(--ig-text);
  padding: 4rem 0 5rem;
}
/* Orbes de fundo */
.ima-ig-shell::before {
  content:""; position:absolute;
  width:600px; height:600px; border-radius:50%;
  top:-150px; right:-120px;
  background: radial-gradient(circle, rgba(59,158,255,.12) 0%, transparent 70%);
  pointer-events:none;
}
.ima-ig-shell::after {
  content:""; position:absolute;
  width:500px; height:500px; border-radius:50%;
  bottom:-120px; left:-80px;
  background: radial-gradient(circle, rgba(167,139,250,.10) 0%, transparent 70%);
  pointer-events:none;
}

.ima-ig-wrap {
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto; padding:0 1.5rem;
}

/* ── Badges ── */
.ima-ig-badges-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.ima-ig-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .85rem; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.03em;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  color:var(--ig-text);
}
.ima-ig-badge--live  { background:rgba(46,200,113,.16); border-color:rgba(46,200,113,.30); }
.ima-ig-badge--auto  { background:rgba(167,139,250,.16); border-color:rgba(167,139,250,.28); }
.ima-ig-badge--ev    { background:rgba(251,191,36,.16);  border-color:rgba(251,191,36,.30); }

/* Dot pulsante */
.ima-ig-dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#2ec871; flex-shrink:0;
}
.ima-ig-dot--green  { background:#2ec871; }
.ima-ig-dot--amber  { background:#f5a623; }
.ima-ig-dot--pulse  { animation: igPulse 2s infinite; }
@keyframes igPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(46,200,113,.5); }
  50%      { box-shadow:0 0 0 6px rgba(46,200,113,0); }
}

/* ── Painel base ── */
.ima-ig-panel {
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  background:var(--ig-card-bg);
  border:1px solid var(--ig-border);
  border-radius:var(--ig-r);
  box-shadow:var(--ig-shadow);
}

/* ── Hero ── */
.ima-ig-hero {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:2rem; padding:2.2rem; margin-bottom:1.2rem;
  align-items:center;
}
.ima-ig-title {
  font-size:clamp(1.8rem,3.2vw,2.8rem);
  font-weight:900; line-height:1.1;
  letter-spacing:-.025em; margin:.5rem 0 1rem;
}
.ima-ig-copy {
  color:var(--ig-muted); font-size:1.05rem;
  line-height:1.72; max-width:54ch; margin:0;
}
.ima-ig-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }

/* ── Botões ── */
.ima-ig-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  border-radius:999px; padding:.8rem 1.4rem;
  font-size:.9rem; font-weight:700; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer; border:none;
}
.ima-ig-btn:hover { transform:translateY(-2px); }
.ima-ig-btn--primary {
  color:#051525;
  background:linear-gradient(120deg,#93c5fd 0%,#c4b5fd 50%,#f0abfc 100%);
  box-shadow:0 4px 18px rgba(147,197,253,.3);
}
.ima-ig-btn--primary:hover { box-shadow:0 8px 28px rgba(147,197,253,.45); }
.ima-ig-btn--secondary {
  color:#fff; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
}
.ima-ig-btn--secondary:hover { background:rgba(255,255,255,.18); }

/* ── Card de perfil ── */
.ima-ig-profile-card {
  background:rgba(4,18,42,.35);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px; padding:1.4rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.ima-ig-profile-top { display:flex; align-items:center; gap:1rem; }
.ima-ig-avatar-ring {
  width:64px; height:64px; border-radius:18px; padding:2.5px; flex-shrink:0;
  background:linear-gradient(135deg,#f472b6,#a78bfa,#38bdf8);
}
.ima-ig-avatar { width:100%; height:100%; border-radius:15px; object-fit:cover; display:block; background:rgba(255,255,255,.08); }
.ima-ig-handle { font-size:.95rem; font-weight:800; display:block; line-height:1.3; }
.ima-ig-sub, .ima-ig-status, .ima-ig-bio { font-size:.8rem; color:var(--ig-muted); margin:0; line-height:1.5; }
.ima-ig-status { display:inline-flex; align-items:center; gap:.35rem; margin-top:.2rem; }
.ima-ig-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.ima-ig-stat {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.7rem .5rem; text-align:center;
}
.ima-ig-stat strong { display:block; font-size:1.1rem; font-weight:800; }
.ima-ig-stat span   { display:block; font-size:.7rem; color:var(--ig-muted); margin-top:.1rem; }
.ima-ig-bio { font-size:.8rem; color:var(--ig-muted); line-height:1.55; }
.ima-ig-bio strong { color:rgba(255,255,255,.85); }

/* ── Evento ── */
.ima-ig-event {
  backdrop-filter:blur(20px);
  background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.22);
  border-radius:var(--ig-r); padding:1.8rem; margin-bottom:1.2rem;
}
.ima-ig-event-inner {
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);
  gap:1.5rem; align-items:center;
}
.ima-ig-event-text h3 { font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:800; margin:.5rem 0 .7rem; line-height:1.2; }
.ima-ig-event-text p  { color:var(--ig-muted); line-height:1.7; margin:0 0 1rem; }
.ima-ig-event-img { border-radius:14px; overflow:hidden; min-height:180px; background:rgba(255,255,255,.06); }
.ima-ig-event-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Grid ── */
.ima-ig-grid {
  display:grid; gap:.9rem;
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.ima-ig-card--f { grid-column:span 7; }
.ima-ig-card--m { grid-column:span 5; }
.ima-ig-card--s { grid-column:span 4; }

/* ── Cards ── */
.ima-ig-card {
  position:relative; overflow:hidden; border-radius:18px;
  border:1px solid var(--ig-border); background:var(--ig-card-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--ig-shadow);
  transition:transform .25s cubic-bezier(.25,.8,.25,1),
             border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.ima-ig-card:hover {
  transform:translateY(-4px) scale(1.008);
  background:var(--ig-card-ho); border-color:rgba(255,255,255,.24);
  box-shadow:0 28px 70px rgba(4,14,28,.5);
}
.ima-ig-card-a { display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }

/* Imagem */
.ima-ig-card-img { position:relative; overflow:hidden; background:rgba(255,255,255,.06); aspect-ratio:4/3; flex-shrink:0; }
.ima-ig-card--f .ima-ig-card-img { aspect-ratio:16/10; }
.ima-ig-card-img img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.ima-ig-card:hover .ima-ig-card-img img { transform:scale(1.06); }
.ima-ig-card-img--empty::after,
.ima-ig-card-img-placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.ima-ig-card-img--empty::after { content:"📸"; font-size:2rem; opacity:.2; }

/* Hover overlay */
.ima-ig-card-hover {
  position:absolute; inset:0;
  background:rgba(5,18,45,.65); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.88rem;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.ima-ig-card:hover .ima-ig-card-hover { opacity:1; }

/* Pills */
.ima-ig-card-pills { position:absolute; top:.75rem; left:.75rem; display:flex; flex-wrap:wrap; gap:.35rem; z-index:2; }
.ima-ig-pill {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.25rem .65rem; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
  backdrop-filter:blur(10px);
  background:rgba(5,18,45,.75); border:1px solid rgba(255,255,255,.13); color:#fff;
}
.ima-ig-pill--new { background:rgba(46,200,113,.8); color:#02200e; border-color:transparent; }
.ima-ig-pill--ev  { background:rgba(251,191,36,.82); color:#1c0e00; border-color:transparent; }

/* Conteúdo */
.ima-ig-card-body { padding:.9rem 1rem 1rem; flex:1; display:flex; flex-direction:column; }
.ima-ig-card-title { font-size:1rem; font-weight:800; line-height:1.3; margin:0 0 .45rem; }
.ima-ig-card-desc  { font-size:.88rem; color:var(--ig-muted); line-height:1.6; margin:0; flex:1; }
.ima-ig-card-foot  {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-top:.8rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.09);
  font-size:.78rem; color:var(--ig-muted);
}
.ima-ig-card-cta { font-weight:700; color:rgba(147,197,253,.9); }

/* ── Skeleton ── */
.ima-ig-skel {
  min-height:220px; border-radius:16px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 100%);
  background-size:220% 100%; animation:igShim 1.8s ease infinite;
}
@keyframes igShim { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ── Fallback ── */
.ima-ig-fallback, .ima-ig-empty {
  grid-column:span 12; text-align:center; padding:2.5rem 1.5rem;
  color:var(--ig-muted);
}
.ima-ig-fallback p, .ima-ig-empty p { margin:0 0 1rem; line-height:1.7; }
.ima-ig-empty a { color:rgba(147,197,253,.9); font-weight:700; }

/* ── Nota de rodapé ── */
.ima-ig-footer-note {
  margin-top:1.4rem; padding:.9rem 1.2rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; font-size:.85rem; color:var(--ig-muted); text-align:center;
}
.ima-ig-footer-note p { margin:0; }

/* ── Responsivo ── */
@media(max-width:1024px){
  .ima-ig-hero { grid-template-columns:1fr; }
  .ima-ig-event-inner { grid-template-columns:1fr; }
  .ima-ig-card--f, .ima-ig-card--m { grid-column:span 6; }
  .ima-ig-card--s { grid-column:span 6; }
}
@media(max-width:700px){
  .ima-ig-shell { padding:2.5rem 0 3.5rem; }
  .ima-ig-hero { padding:1.3rem; gap:1.2rem; }
  .ima-ig-title { font-size:1.75rem; }
  .ima-ig-card--f, .ima-ig-card--m, .ima-ig-card--s { grid-column:span 12; }
}
