/* ===== Moonvival Social Fan Carousel (scoped) =====
   Nota: todo va bajo .mv-social para no colisionar con Bootstrap ni el tema
*/
.mv-social{
  --mv-bg: #0b0f1a;
  --mv-card: #111726;
  --mv-card-2: #0d1322;
  --mv-text: #e6e9f2;
  --mv-muted: #9aa3b2;
  --mv-accent: #6ee7ff;
  --mv-accent-2: #a78bfa;
  --mv-spread: 12;     /* º separación entre cartas */
  --mv-gap: 64px;      /* distancia horizontal */
  --mv-lift: 28px;     /* elevación de la activa */
  --mv-scale: 0.92;    /* escala no-activas */
  --mv-radius: 18px;
  --mv-shadow: 0 15px 50px rgba(0,0,0,.45);
  color: var(--mv-text);
}

.mv-social *{ box-sizing: border-box; }
.mv-social .mv-wrap{ width: min(1100px, 100%); margin: 0 auto; padding: 28px 18px; }

.mv-social .mv-head{
  display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 16px;
}
.mv-social .mv-title{ font-size: clamp(18px, 3vw, 28px); font-weight: 700; letter-spacing:.3px; }
.mv-social .mv-controls{ display:flex; align-items:center; gap:8px; }
.mv-social .mv-btn{
  appearance:none; border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg,#1b2340,#141a2e);
  color: var(--mv-text); padding:10px 14px; border-radius:12px; cursor:pointer; display:inline-flex; gap:8px; align-items:center;
  transition: transform .12s ease, border-color .25s ease, background .25s ease; user-select:none;
}
.mv-social .mv-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }

.mv-social .mv-fan{ position: relative; height: 560px; width: 100%; perspective: 1400px; isolation:isolate; }
.mv-social .mv-cards{ list-style:none; padding:0; margin:0; position:absolute; inset:0; display:grid; place-items:center; }

.mv-social .mv-card{
  position:absolute; width: clamp(260px, 30vw, 360px); height: 500px;
  background: linear-gradient(180deg, var(--mv-card), var(--mv-card-2));
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--mv-radius);
  box-shadow: var(--mv-shadow);
  overflow: hidden; will-change: transform; transform-origin: 50% 78%;
  transition: transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease, z-index 0s linear .15s, border-color .35s ease;
  filter: saturate(.9) brightness(.98);
}
.mv-social .mv-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%, transparent 65%, rgba(255,255,255,.04));
  pointer-events:none;
}
.mv-social .mv-card.is-active{ border-color: rgba(110,231,255,.35); filter: saturate(1.05) brightness(1.02); }

.mv-social .mv-media{ height:56%; position:relative; overflow:hidden; }
.mv-social .mv-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.mv-social .mv-badge{
  position:absolute; inset:auto 12px 12px auto; background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  color:#fff; padding:6px 10px; font-size:12px; border-radius:999px; border:1px solid rgba(255,255,255,.15);
}
.mv-social .mv-soc-ico{
  position:absolute; top:10px; left:10px; width:26px; height:26px; display:grid; place-items:center;
  border-radius:8px; background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18);
}
.mv-social .mv-soc-ico svg{ width:16px; height:16px; }

.mv-social .mv-content{ padding: 14px 16px 16px; display:grid; gap:10px; height:44%; }
.mv-social .mv-user{ display:flex; align-items:center; gap:10px; }
.mv-social .mv-avatar{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); object-fit:cover; }
.mv-social .mv-who{ display:grid; line-height:1.15; }
.mv-social .mv-who b{ font-weight:700; letter-spacing:.2px; }
.mv-social .mv-who span{ color: var(--mv-muted); font-size: 13px; }
.mv-social .mv-net{
  margin-left:auto; width:24px; height:24px; display:grid; place-items:center; border-radius:7px;
  background:#0f162c; border:1px solid rgba(255,255,255,.12); opacity:.95;
}
.mv-social .mv-net svg{ width:14px; height:14px; }

.mv-social .mv-bio{ color:#d6dbeb; font-size:14px; opacity:.95; }
.mv-social .mv-metrics{ display:flex; gap:18px; }
.mv-social .mv-kpi{ display:grid; font-size:13px; }
.mv-social .mv-kpi b{ font-weight:700; }
.mv-social .mv-kpi span{ color:var(--mv-muted); }

.mv-social .mv-actions{ margin-top:auto; display:flex; gap:10px; }
.mv-social .mv-chip{
  border:1px solid rgba(255,255,255,.12); background:#0f162c; padding:8px 10px; border-radius:12px;
  font-size:13px; display:inline-flex; gap:8px; align-items:center; cursor:pointer; transition:border-color .3s, transform .12s;
}
.mv-social .mv-chip:hover{ border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
.mv-social .mv-chip svg{ width:16px; height:16px; opacity:.9; }

.mv-social .mv-dots{ position:absolute; left:50%; bottom:-2px; translate:-50% 0; display:flex; gap:8px; }
.mv-social .mv-dot{ width:6px; height:6px; border-radius:50%; background:#31406b; opacity:.9; }
.mv-social .mv-dot.is-active{ background: linear-gradient(90deg, var(--mv-accent), var(--mv-accent-2)); width:26px; border-radius: 999px; }

.mv-social dialog.mv-details{ border:none; padding:0; background: transparent; }
.mv-social .mv-details::backdrop{ background: rgba(2,6,23,.6); backdrop-filter: blur(2px); }
.mv-social .mv-details-card{
  width:min(980px, 92vw); max-height: 82vh; overflow:auto; background: linear-gradient(180deg, #0c1226, #0b1022);
  border:1px solid rgba(255,255,255,.12); border-radius: 16px; box-shadow: var(--mv-shadow); padding: 18px; color: var(--mv-text);
}

/* Estados */
.mv-social .is-loading{ opacity:.6; }
.mv-social .has-error{ outline:1px dashed rgba(251,113,133,.7); }

/* Responsive */
@media (max-width: 720px){
  .mv-social{ --mv-gap: 54px; --mv-spread: 10; }
  .mv-social .mv-fan{ height: 520px; }
  .mv-social .mv-card{ height: 480px; }
}
/* --- Ajustes de título y espaciado para el carrusel social --- */
#mv-social .mv-title{
  color: #fff !important;               /* título en blanco */
  opacity: 1;                           /* por si algún tema lo baja */
}

#mv-social .mv-head{
  margin: 0 0 8px;                      /* menos espacio bajo el título */
}

#mv-social .mv-wrap{
  padding-top: 8px;                     /* recorta el espacio arriba */
}

/* En pantallas grandes, aún un poco menos */
@media (min-width: 992px){
  #mv-social .mv-wrap{ padding-top: 4px; }
}
/* --- Compresión del espacio encima del carrusel --- */
#mv-social{ 
  margin-top: 0 !important;        /* evita margen de sección */
  padding-top: 0 !important;        /* limpia padding del contenedor */
}
#mv-social .mv-wrap{ 
  padding-top: 0 !important;        /* elimina relleno extra arriba */
}
#mv-social .mv-head{
  margin-top: 0 !important;
  margin-bottom: 6px !important;    /* deja un respiro mínimo */
}
#mv-social .mv-title{
  margin: 0 !important;             /* los h2 traen margen por defecto */
  color: #fff !important;           /* título en blanco */
  opacity: 1 !important;
}

/* Si aún persiste por culpa de la sección de arriba, tira un poco del carrusel */
@media (min-width: 992px){
  #mv-social{ margin-top: -28px !important; }  /* ajusta -10 a -40 según necesites */
}
/* --- Botón +info visible encima de la foto --- */
/* --- Botón +info visible encima de la foto --- */
#mv-social .mv-media{ position:relative; }
/* --- Botón + info más ALTO (manteniendo el texto) --- */
#mv-social .mv-info{
  position:absolute;
  top:4px; left:10px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;          /* alto + cómodo */
  min-height:40px;            /* altura clara */
  font-size:13px; font-weight:600;
  white-space:nowrap;         /* no se parte el “+ info” */
  line-height:1;              /* evita recortes verticales */
  color:#fff;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;         /* acorde al nuevo alto */
  backdrop-filter: blur(4px);
  cursor:pointer; user-select:none;
  z-index:2;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
#mv-social .mv-info:hover{
  transform: translateY(-1px);
  background:rgba(0,0,0,.65);
  border-color:rgba(255,255,255,.28);
}

/* En móvil, un pelín menos alto */
@media (max-width: 480px){
  #mv-social .mv-info{ padding:10px 14px; min-height:36px; font-size:12px; }
}
/* --- Botón + info encima de la foto y más alto --- */
#mv-social .mv-media{ position:relative; }
#mv-social .mv-info{
  position:absolute; top:4px; left:10px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;          /* alto cómodo */
  min-height:40px;            /* altura clara */
  font-size:13px; font-weight:600;
  white-space:nowrap; line-height:1;
  color:#fff;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  backdrop-filter: blur(4px);
  cursor:pointer; user-select:none;
  z-index:2;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
#mv-social .mv-info:hover{
  transform: translateY(-1px);
  background:rgba(0,0,0,.65);
  border-color:rgba(255,255,255,.28);
}

/* Icono de red a la derecha para no chocar con + info */
#mv-social .mv-soc-ico{ left:auto; right:10px; }