/* ---------------------------
 Basic IG card styles
----------------------------*/
.ig-card, .web-card {
  width: 280px;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
  background: #fff;
  text-align: center;
  margin: 12px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  display:inline-block;
  vertical-align: top !important;
  float: none !important;
  clear: none !important;
  box-sizing: border-box;
}

.ig-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.16); }
.ig-card.touch-activated { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.16); }

.ig-card-img, .web-card-img {
  width:100%;
  display:block;
  overflow:hidden;
  background: #f5f5f8;
}

.ig-card-img img, .web-card-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-width: 100% !important;
}

.ig-card h3, .web-card h3 { padding: 12px; margin:0; font-size:16px; color:#333; }

.ig-placeholder, .web-placeholder {
  height:180px; display:flex; align-items:center; justify-content:center; background:#f5f5f8; color:#6b21a8; font-weight:600;
}

/* ---------------------------
 Modal overlay
----------------------------*/
#ig-popup, .ig-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: env(safe-area-inset-top, 14px) 12px env(safe-area-inset-bottom, 14px);
  box-sizing: border-box;
}

/* Hide helper (inline style might set display:none) */
.ig-popup[style*="display:none"], #ig-popup[style*="display:none"] { display:none; }

/* popup content: permitir scroll interno y comportamiento nativo móvil */
.ig-popup-content {
  background: #fff;
  border-radius: 16px;
  width: 80vw;
  height: 80vh;
  max-width: 1100px;
  max-height: 90vh;
  min-width: 300px;
  min-height: 240px;
  overflow-y: auto;                        /* important: scrolling */
  -webkit-overflow-scrolling: touch;       /* smooth native scrolling iOS */
  touch-action: pan-y;                     /* permitir scroll vertical */
  padding: 16px 16px 72px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  position: relative;
  transition: width .18s ease, height .18s ease, opacity .12s ease;
  box-sizing: border-box;
  padding-top: calc(env(safe-area-inset-top, 12px) + 56px); /* espacio extra para el botón cerrar */
  max-height: calc(100vh - 28px); /* fallback para navegadores que no usan js */
}

/* asegurar que el body del popup no quede pegado al top */
.ig-popup-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-top: 8px;
  box-sizing: border-box;
}

/* Instagram embed sizing */
.ig-popup-body blockquote.instagram-media,
.ig-popup-body .instagram-media {
  display: block !important;
  margin: 8px auto !important;
  width: auto !important;
  max-width: 900px !important;
  box-sizing: border-box;
}

.ig-popup-body iframe[src*="instagram.com"],
.ig-popup-body blockquote.instagram-media iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 420px !important;
  box-sizing: border-box;
  position: relative !important; /* evitar overlays absolutos */
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .ig-popup-content {
    width: 95vw;
    height: 95vh;
    border-radius: 12px;
    padding: 12px 12px calc(env(safe-area-inset-bottom, 12px) + 72px) !important;
    padding-top: calc(env(safe-area-inset-top, 10px) + 56px) !important;
  }
  .ig-popup { padding: env(safe-area-inset-top, 8px) 8px env(safe-area-inset-bottom, 8px); }
}

/* Small tablets and phablets */
@media (min-width: 601px) and (max-width: 900px) {
  .ig-popup-content {
    width: 85vw;
    height: 80vh;
  }
}

/* Tablet breakpoint (target) */
@media (min-width: 768px) and (max-width: 1024px) {
  .ig-cards-wrapper, .ig-cards, .ig-cards-row, .ig-cards-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ig-card, .web-card {
    display: block !important;
    flex: 0 1 calc(50% - 24px) !important;
    width: calc(50% - 24px) !important;
    max-width: calc(50% - 24px) !important;
    min-width: 220px !important;
    margin: 12px 12px !important;
    box-sizing: border-box !important;
  }

  .ig-popup-content {
    width: 82vw !important;
    max-width: 980px !important;
    height: 78vh !important;
    max-height: 88vh !important;
    padding: 14px 14px 84px !important;
    padding-top: calc(env(safe-area-inset-top, 12px) + 56px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ig-popup-body iframe { min-height: 380px !important; position: relative !important; }
}

/* Botón "Open in a new Tab" centrado en bottom */
.ig-open-new {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 100003;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 16px;
  min-width: 160px;
  max-width: 90%;
  height: auto;
  white-space: nowrap;
  box-sizing: border-box;
  background: #6b21a8;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 22px rgba(107,33,168,0.18);
  transition: transform .12s ease, opacity .12s ease;
}
.ig-open-new[aria-hidden="true"] { display: none !important; }
.ig-open-new:hover { transform: translateX(-50%) translateY(-2px); opacity: .98; }

/* Spinner */
.ig-spinner {
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.9);
  z-index: 20;
  border-radius: inherit;
  transition: opacity .18s ease, visibility .18s;
}
.ig-spinner[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.ig-spinner[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.ig-spinner-inner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 5px solid rgba(0,0,0,0.12);
  border-top-color: rgba(107,33,168,1);
  animation: ig-spin 0.9s linear infinite;
}
@keyframes ig-spin { to { transform: rotate(360deg); } }

/* web-card */
:root {
  --spin-duration: 3.0s;
  --spin-ease: cubic-bezier(.2,.9,.34,1);
  --spin-overshoot-deg: 20deg;
  --lift-distance: -10px;
}
.web-card { width: 100%; max-width:320px; box-sizing:border-box; flex:0 0 auto; display:inline-block; }
.web-card-inner { position:relative; width:100%; border-radius:16px; overflow:hidden; background:#fff; transition: box-shadow .25s ease; will-change:transform; min-height:220px; display:flex; flex-direction:column; }
.web-card-img { width:100%; flex:1 1 auto; display:flex; align-items:center; justify-content:center; background:#f5f5f8; }
.web-card-img img { width:100%; height:auto; max-height:100%; display:block; object-fit:contain; object-position:center; padding:8px; box-sizing:border-box; }
.web-card-inner h3 { padding:12px; margin:0; font-size:16px; color:#333; background:#fff; text-align:center; }

@keyframes spinInertia {
  0% { transform: rotateY(0deg) translateY(0); }
  65% { transform: rotateY(360deg) translateY(0); }
  80% { transform: rotateY(calc(360deg + var(--spin-overshoot-deg))) translateY(calc(var(--lift-distance) * 0.4)); }
  100% { transform: rotateY(360deg) translateY(var(--lift-distance)); }
}

/* Hover en dispositivos con cursor */
@media (hover: hover) and (pointer: fine) {
  .web-card:hover .web-card-inner,
  .web-card:focus .web-card-inner,
  .web-card:active .web-card-inner {
    animation: spinInertia var(--spin-duration) var(--spin-ease) both;
    box-shadow: 0 18px 36px rgba(0,0,0,.16);
  }
  .ig-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.16); }
}

/* Desactivar hover en táctil para evitar estados pegados */
@media (hover: none) and (pointer: coarse) {
  .web-card:hover .web-card-inner, .ig-card:hover { transform: none; box-shadow: 0 10px 30px rgba(0,0,0,.12); animation: none; }
}

/* Clase touch-activated para web-card */
.web-card.touch-activated .web-card-inner {
  animation: spinInertia 1.6s cubic-bezier(.2,.9,.34,1) both;
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}

/* Responsive small screens */
@media (max-width:1024px){
  .web-card { width:calc(50% - 24px);} 
  .web-card-inner { min-height:260px; } 
}
@media (max-width:600px){
  .web-card { width:calc(100% - 24px); margin:12px auto; } 
  .web-card-inner { min-height:200px; } 
  :root { --spin-duration:1.6s; } 
}

/* Botón cerrar (solo visible en tablet/mobile según CSS) */
.ig-close { display:none; position:absolute; top: calc(env(safe-area-inset-top, 8px) + 8px); right:12px; z-index:100005; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:999px; width:36px; height:36px; font-size:22px; line-height:36px; cursor:pointer; padding:0; pointer-events:auto; -webkit-tap-highlight-color: rgba(0,0,0,0.12); }
@media (max-width:900px) {
  .ig-close { display:block; }
  .ig-close:hover { background: rgba(0,0,0,.8); }
}

/* Protecciones extra */
.ig-card * , .web-card * { box-sizing: border-box !important; }
.ig-cards-wrapper, .ig-cards, .ig-cards-container { overflow: visible !important; }

/* Asegurar iframes no se posicionen absolute en top */
.ig-popup-body iframe[style], .ig-popup-body .instagram-media[style] {
  position: relative !important;
  top: auto !important;
  margin-top: 6px !important;
}