/* ===========================
   GALERÍA DE PRODUCTO — COMPACTA
   =========================== */

.product-gallery{
  width: min(380px, 100%);
  margin-inline: auto;
  text-align: center;
  box-sizing: border-box;
}

/* Imagen principal */
.product-gallery .main-image{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  border-radius: 10px;
  /* background: #f7f7f7; */
  cursor: none;
  touch-action: none;
  transition: none !important;
}
.product-gallery .main-image img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  transition: none !important;
}

/* Lupa (zoom) */
.zoom-lens{
  position: absolute;
  z-index: 5;
  width: 220px;               /* tamaño visible por defecto */
  height: 220px;
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.9) inset;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  left: 0; top: 0;
  transform: translate(-50%, -50%) translate3d(0,0,0);
  will-change: transform, background-position, background-size;
  transition: none !important;
  animation: none !important;
  backface-visibility: hidden;
  contain: layout paint style;
  display: none;
}

/* Miniaturas */
.product-gallery .thumbs{
  margin-top: 6px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  box-sizing: border-box;
}
.product-gallery .thumb{
  width: clamp(60px, calc((100% - 24px) / 4), 96px);
  aspect-ratio: 1 / 1;
  height: auto;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  transition: border-color .15s ease, transform .1s ease;
}
.product-gallery .thumb:hover{ transform: translateY(-1px); }
.product-gallery .thumb.is-active{ border-color: #e20074; border-width: 2px; }
.product-gallery .thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Texto de referencia bajo la imagen principal */
.product-ref{
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  color: #666;
  letter-spacing: .3px;
}

/* ====== Layout general (tema) ====== */
.blog-post-content{ gap: 16px; }
@media (min-width: 992px){ .blog-post-content{ gap: 20px; } }
.blog-image{ margin-right: 0 !important; margin-bottom: 8px !important; }
.blog-text{  margin-left: 0 !important;  padding-left: 0 !important; }
.col-12.col-lg-6.blog-image,
.col-12.col-lg-5.blog-text-p-0,
.col-lg-6, .col-lg-5{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ====== Responsivo ====== */
@media (max-width: 640px){
  .product-gallery{ width: min(320px, 100%); }
  .zoom-lens{ width: 130px; height: 130px; }
}

/* ===================================================
   LAYOUT DESKTOP: texto centrado + CTAs en grid
   =================================================== */
@media (min-width: 992px){

  /* Diales de ajuste */
  :root{
    --text-offset: 24px;          /* baja/sube el bloque de texto (positivo = más abajo) */
    --fichas-col-width: 360px;    /* ancho columna IZQ (fichas) dentro del grid */
    --contact-max: 300px;         /* tamaño máximo del icono de CONTACTA */
  }

  /* Centrado vertical de ambas columnas */
  .blog-post-content{
    display: flex;
    align-items: center;
  }

  /* Columna de texto con offset fino */
  .blog-text{
    display: flex;
    flex-direction: column;
    transform: translateY(var(--text-offset));
  }

  /* CTAs en grid: fichas izq, contacto dcha */
  #product-ctas{
    display: grid;
    grid-template-columns: var(--fichas-col-width) 1fr;
    column-gap: 24px;
    row-gap: 14px;
    align-items: center;
    margin-top: 14px;
  }

  /* Posiciones de cada bloque (robusto aunque se inserten nodos) */
  #product-ctas .mtpbtn:nth-last-child(3){ grid-column:1; grid-row:1; margin:0; } /* Ficha técnica */
  #product-ctas .mtpbtn:nth-last-child(2){ grid-column:1; grid-row:2; margin:0; } /* Ficha seguridad */
  #product-ctas .mtpbtn:last-child{
    grid-column:2; grid-row:2;
    margin:0;
    display:flex; justify-content:flex-end; align-items:center; /* Contacta a la derecha */
  }

  /* Fichas un poco más pequeñas para dar aire a Contacta */
  #product-ctas .mtpbtn:nth-last-child(3) img,
  #product-ctas .mtpbtn:nth-last-child(2) img{
    max-width: 55%;
    height: auto;
    display: block;
  }

  /* Tamaño del icono de Contacta */
  #product-ctas .mtpbtn:last-child img{
    max-width: var(--contact-max);
    width: 100%;
    height: auto;
  }

  /* ========= HOVER robusto para “Contacta con nosotros” ========= */
  #product-ctas .mtpbtn:last-child img{
    display: inline-block;     /* necesario para transform sin problemas */
    cursor: pointer;
    transition: transform .22s ease, filter .22s ease, opacity .22s ease !important;
    transform-origin: center right;
    will-change: transform, filter, opacity;
  }
  /* hover directo sobre la imagen */
  #product-ctas .mtpbtn:last-child img:hover{
    transform: translateY(-3px) scale(1.06) !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)) !important;
    opacity: .98 !important;
  }
  /* hover sobre el contenedor por si hay padding */
  #product-ctas .mtpbtn:last-child:hover img{
    transform: translateY(-3px) scale(1.06) !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)) !important;
    opacity: .98 !important;
  }
  /* feedback al hacer click */
  #product-ctas .mtpbtn:last-child:active img{
    transform: translateY(-1px) scale(1.03) !important;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.16)) !important;
  }   */
}