/* Feed de Instagram compartido (contacto y blog). Se adapta al fondo:
   en negro (blog) texto y boton blancos; en modo dia (contacto), negros.
   Cabecera: titulo a la izquierda, cuenta y seguir a la derecha.
   Debajo, carrusel infinito a sangre con flechas. */
.ig-cab{
  width:100%;padding:0 clamp(20px,3vw,48px);
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;text-align:left;
}
.ig-cab .chapter-title{margin:0;text-align:left;max-width:none}
.ig-cab .ft-sub{margin-left:0;margin-right:0;text-align:left}
.ig-cuenta-fila{display:flex;align-items:center;gap:1rem}
.ig-avatar-anillo{
  /* anillo de historia activa, como en Instagram */
  display:block;padding:2.5px;border-radius:50%;flex:none;
  background:linear-gradient(45deg,#feda75,#fa7e1e 30%,#d62976 58%,#962fbf 80%,#4f5bd5);
}
.ig-avatar{
  width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid #000;background:#000;
}
body.dia .ig-avatar{border-color:#fff}
.ig-cuenta{font-family:'Power Grotesk',var(--sans);font-weight:500;font-size:1.1rem;color:#fff}
body.dia .ig-cuenta{color:#000}
.ig-seguir{
  font-family:var(--mono);font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;
  color:#000;background:#fff;border-radius:99px;padding:11px 22px;
  transition:opacity 0.25s ease;
}
.ig-seguir:hover{opacity:0.82}
body.dia .ig-seguir{color:#fff;background:#000}

.ig-carrusel{
  --ig-gap:clamp(0.9rem,1.6vw,1.4rem);
  position:relative;width:100%;overflow:hidden;
  margin-top:clamp(2.2rem,4vh,3.2rem);
  padding:0 clamp(20px,3vw,48px);
  touch-action:pan-y;
}
.ig-pista{
  display:flex;gap:var(--ig-gap);
  transition:transform 0.7s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
}
.ig-pista.sin-anim{transition:none}
.ig-post{
  position:relative;flex:0 0 calc((100% - 3 * var(--ig-gap)) / 4);
  aspect-ratio:4/5;border-radius:18px;overflow:hidden;display:block;
  -webkit-user-drag:none;
}
.ig-post img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease;-webkit-user-drag:none;user-select:none}
.ig-post:hover img{transform:scale(1.05)}
.ig-post::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0.25),transparent 38%);
}
.ig-red{
  position:absolute;top:12px;left:12px;z-index:1;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,0.45);color:#f5f5f5;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ig-red svg{width:15px;height:15px}

.ig-flechas{
  display:flex;justify-content:flex-end;gap:0.6rem;
  width:100%;padding:0 clamp(20px,3vw,48px);
  margin-top:clamp(1.2rem,2.4vh,1.8rem);
}
.ig-flecha{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:none;cursor:pointer;
  border:1px solid rgba(255,255,255,0.35);color:#fff;
  transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease;
}
.ig-flecha:hover{background:#fff;color:#000;border-color:#fff}
body.dia .ig-flecha{border-color:rgba(0,0,0,0.3);color:#000}
body.dia .ig-flecha:hover{background:#000;color:#fff;border-color:#000}
.ig-flecha svg{width:16px;height:16px}

@media(max-width:900px){.ig-post{flex-basis:calc((100% - var(--ig-gap)) / 2)}}
@media(max-width:520px){.ig-post{flex-basis:68%}}
@media(prefers-reduced-motion:reduce){.ig-pista{transition:none}}