/* ============================================================
   MODULO «FEED DE INSTAGRAM» · franja de una fila
   Lee los tokens del sitio que lo usa. En disenoverde.cl:
   --verde, --verde-oscuro, --acento, --fondo y --radio-hoja.
   Para otro cliente basta con mapear estas variables al comienzo.

   La fila es un carril con scroll horizontal propio: se desliza con
   el dedo, el trackpad o los puntos. Con JavaScript, ademas, el
   scroll de la pagina la empuja apenas (al bajar avanza, al subir
   retrocede), sin detener la pagina.
   ============================================================ */
.ig{
  --ig-tinta:  var(--verde-oscuro, #0f2a0d);
  --ig-marca:  var(--verde, #30662D);
  --ig-acento: var(--acento, #52a84c);
  --ig-papel:  var(--fondo, #f4f7e6);
  --ig-forma:  var(--radio-hoja, 0 18px 0 18px);
  --ig-lado:   max(20px, calc((100vw - var(--max, 1120px)) / 2));
  --ig-tam:    clamp(170px, 19vw, 250px);
  background: var(--ig-papel);
  padding: clamp(36px, 5vw, 60px) 0;
  overflow: hidden;
}
.ig-caja{ padding: 0 var(--ig-lado); margin-bottom: 20px; }

/* Puntos tipo slider: el punto es chico, el area para tocarlo no. */
.ig-puntos{ display:flex; justify-content:center; gap:2px; margin-top:16px; padding:0 var(--ig-lado); }
.ig-puntos[hidden]{ display:none; }
.ig-punto{ width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.ig-punto::before{
  content:""; width:7px; height:7px; border-radius:99px; background:var(--ig-marca); opacity:.28;
  transition: width .7s cubic-bezier(.37,0,.63,1), opacity .7s cubic-bezier(.37,0,.63,1);
}
.ig-punto:hover::before{ opacity:.55; }
.ig-punto[aria-current="true"]::before{ width:20px; opacity:1; }
.ig-punto:focus-visible{ outline:2px solid var(--ig-acento); outline-offset:-2px; border-radius:99px; }
.ig-caja h2{ margin:0; color:var(--ig-tinta); font-size:clamp(1.25rem, 2.2vw, 1.65rem); line-height:1.1; }

.ig-ventana{ overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.ig-ventana::-webkit-scrollbar{ display:none; }
.ig-fila{
  list-style:none; margin:0; padding:0 var(--ig-lado);
  display:flex; gap:14px; width:max-content;
}

.ig-item{ flex:none; width:var(--ig-tam); }
.ig-item a{ position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:var(--ig-forma); background:#e6eadb; color:#fff; text-decoration:none; }
.ig-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.6s cubic-bezier(.25,.1,.25,1); }
.ig-tipo{ position:absolute; top:9px; right:11px; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.ig-velo{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:14px;
  background:linear-gradient(to top, color-mix(in srgb, var(--ig-tinta) 88%, transparent) 0%, color-mix(in srgb, var(--ig-tinta) 30%, transparent) 55%, transparent 100%);
  opacity:0; transition: opacity .9s cubic-bezier(.37,0,.63,1);
}
.ig-texto{ font-size:.86rem; line-height:1.3; font-weight:600; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.ig-velo time{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.ig-item a:hover img, .ig-item a:focus-visible img{ transform:scale(1.05); }
.ig-item a:hover .ig-velo, .ig-item a:focus-visible .ig-velo{ opacity:1; }
.ig-item a:focus-visible{ outline:3px solid var(--ig-acento); outline-offset:-3px; }

@media (max-width: 560px){
  .ig{ --ig-tam: 150px; }
  .ig-fila{ gap:10px; }
  /* En el telefono no hay hover: la fecha queda siempre a la vista. */
  .ig-velo{ opacity:1; padding:10px; background:linear-gradient(to top, color-mix(in srgb, var(--ig-tinta) 75%, transparent), transparent 45%); }
  .ig-texto{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .ig-item img, .ig-velo{ transition:none; } }