/* ================================================================
   BLOQUE: IMAGE GALLERY – GASEX V3 (Integrado a Sistema GX)
   ================================================================ */

   :root {
    --gx-gal-pad-x: 2rem;
    --gx-gal-gap: 12px;
    --gx-gal-radius: 8px;
  }
  
  /* ================================================================
     SECTION (Sistema Global)
     ================================================================ */
  
  .gx-section {
    padding: 50px 0;
    background: #fff;
    position: relative;
  }
  
  /* El wrapper gx-wrap ya es global, no lo redefinimos */
  
  
  /* ================================================================
     GRID DESKTOP (NO TOCAMOS ESTRUCTURA)
     ================================================================ */
  
  .gasex-image-gallery-grid {
    display: grid;
    gap: var(--gx-gal-gap);
    overflow: visible;
    grid-template-columns: 2fr 318px 318px;
    grid-template-rows:
      260px 80px 135px 330px 100px 400px 200px;
    grid-template-areas:
      "item1 item2 item3"
      "item1 item2 item3"
      "item1 item4 item3"
      "item5 item5 item5"
      "item5 item5 item5"
      "item6 item7 item7"
      "item6 item8 item8";
  }
  
  /* GRID AREAS */
  
  .item1 { grid-area: item1; }
  .item2 { grid-area: item2; }
  .item3 { grid-area: item3; }
  .item4 { grid-area: item4; }
  .item5 { grid-area: item5; }
  .item6 { grid-area: item6; }
  .item7 { grid-area: item7; }
  .item8 { grid-area: item8; }
  
  /* ================================================================
     TARJETAS
     ================================================================ */
  
  .gasex-gallery-item {
    position: relative;
    overflow: visible;
    border-radius: var(--gx-gal-radius);
    background: #f4f4f4;
  }
  
  /* Wrapper imagen */
  
  .gx-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
  }
  
  .gx-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* ================================================================
     BLOQUE TEXTO
     ================================================================ */
  
  .gasex-gallery-item.item4.text-block {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #003966;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    text-align: center;
    padding: 1rem;
  }
  
  /* ================================================================
     ETIQUETA
     ================================================================ */
  
  .gasex-gallery-item .label {
    position: absolute;
    bottom: 14%;
    left: 0;
    padding: 6px 18px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 0 4px 4px 0;
    z-index: 10;
  }
  
  /* ================================================================
     HOTSPOTS DESKTOP
     ================================================================ */
  
  .gx-hotspot-item {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 20;
  }
  
  .gx-p-trigger {
    width: 34px;
    height: 34px;
    background: #1C244B;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  
  .gx-p-icon {
    font-weight: 700;
    font-size: 18px;
  }
  .gx-hotspot-item:hover {
    z-index: 1000;
  }


  /* ================================================================
     TOOLTIP DESKTOP
     ================================================================ */
  
  @media (min-width: 769px) {
  
    .gx-desktop-tooltip {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      width: 280px;
      background: #fff;
      padding: 24px 22px;
      border-radius: 12px;
      box-shadow: 0 15px 35px rgba(0,0,0,0.2);
      opacity: 0;
      visibility: hidden;
      transition: all .3s ease;
      text-align: center;
      z-index: 999;
    }

    .gx-hotspot-item:hover .gx-desktop-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .gx-tooltip-title {
      font-weight: 800;
      color: #1C244B;
      margin-bottom: 10px;
      font-size: 1.1rem;
    }

    .gx-tooltip-desc {
      font-size: .9rem;
      color: #555;
      margin-bottom: 14px;
    }

    .gx-tooltip-price-original {
      font-size: .95rem;
      color: #6B7280;
      text-decoration: line-through;
      margin-bottom: 6px;
      font-weight: 600;
    }

    .gx-tooltip-price {
      font-size: 1.15rem;
      font-weight: 800;
      color: #E63946;
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .gx-tooltip-badge {
      background: #1C244B;
      color: #fff;
      padding: 10px 14px;
      border-radius: 10px;
      font-weight: 700;
      font-size: .9rem;
      display: inline-block;
      margin: 6px 0 18px;
      line-height: 1.4;
    }

    .gx-tooltip-btn {
      display: inline-block;
      background: #1C244B;
      color: #fff;
      padding: 8px 18px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      font-size: .8rem;
    }
  
    /* Ajustes laterales */
  
    .pos-left .gx-desktop-tooltip {
      left: 0;
      transform: translateX(15px) translateY(10px);
    }
  
    .pos-left:hover .gx-desktop-tooltip {
      transform: translateX(15px) translateY(0);
    }
  
    .pos-right .gx-desktop-tooltip {
      right: 0;
      left: auto;
      transform: translateX(-15px) translateY(10px);
    }
  
    .pos-right:hover .gx-desktop-tooltip {
      transform: translateX(-15px) translateY(0);
    }
  }
  
  /* ================================================================
     RESPONSIVE MOBILE
     ================================================================ */
  
  @media (max-width: 992px) {
  
    .gasex-image-gallery-grid {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
  
    .gasex-gallery-item {
      aspect-ratio: 16 / 9;
      height: auto;
    }
  
    .gasex-gallery-item.item4.text-block {
      aspect-ratio: auto;
      min-height: 160px;
      padding: 1.5rem;
      font-size: 1rem;
    }
  
    .gx-desktop-tooltip {
      display: none;
    }
  }
  

  /* ================================================================
   LAYOUT WIDTH MODES (Image Gallery)
   ================================================================ */

.gx-section.gallery-extended {
  padding-left: 4rem;
  padding-right: 4rem;
}

@media (max-width: 1200px) {
  .gx-section.gallery-extended {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 768px) {
  .gx-section.gallery-extended {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


.gasex-gallery-item {
  position: relative; /* ← esto es crítico */
  overflow: visible;
}


.gx-section.gallery-extended .gasex-image-gallery-grid {
  position: relative;
}


.gx-image-wrap{
  position:relative;
}

/* ===========================
   GASEX CAPTION (4 esquinas)
=========================== */

.gasex-gallery-caption{
  position:absolute;
  padding:10px 18px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:#1C244B;
  z-index:5;
  max-width:80%;
}

/* INFERIOR IZQUIERDA (default) */
.gasex-gallery-caption.pos-bottom-left{
  bottom:0;
  left:0;
  border-radius:0 6px 0 0;
}

/* INFERIOR DERECHA */
.gasex-gallery-caption.pos-bottom-right{
  bottom:0;
  right:0;
  border-radius:6px 0 0 0;
}

/* SUPERIOR IZQUIERDA */
.gasex-gallery-caption.pos-top-left{
  top:0;
  left:0;
  border-radius:0 0 6px 0;
}

/* SUPERIOR DERECHA */
.gasex-gallery-caption.pos-top-right{
  top:0;
  right:0;
  border-radius:0 0 0 6px;
}

/* Compatibilidad: si un item viejo no tiene posición → bottom-left */
.gasex-gallery-caption:not(.pos-top-left):not(.pos-top-right):not(.pos-bottom-left):not(.pos-bottom-right){
  bottom:0;
  left:0;
  border-radius:0 6px 0 0;
}

/* ======================================

   FIX LINK CAPTION 

====================================== */

.gasex-gallery-caption a {

  color: inherit;              

  text-decoration: none;      

  display: inline-block;

}

/* Hover más pro */

.gasex-gallery-caption a:hover {

  opacity: 0.85;

}

/* ================================================================
   MOBILE OVERLAY + BOTTOM SHEET
   ================================================================ */

.gx-mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:999;
}

.gx-mobile-overlay.is-active{
  opacity:1;
  pointer-events:auto;
}

.gx-bottom-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:-100%;
  background:#fff;
  border-radius:18px 18px 0 0;
  padding:24px;
  transition:bottom .35s ease;
  z-index:1000;
  max-width:640px;
  margin:auto;
}

.gx-bottom-sheet.is-active{
  bottom:0;
}

.gx-sheet-header{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  margin-bottom:18px;
}

.gx-sheet-pill{
  width:40px;
  height:4px;
  background:#ddd;
  border-radius:4px;
}

.gx-sheet-close{
  position:absolute;
  right:0;
  top:-4px;
  border:none;
  background:none;
  font-size:20px;
  cursor:pointer;
}

.gx-sheet-content{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.gx-sheet-title{
  font-size:1.5rem;
  font-weight:800;
  color:#1C244B;
  margin-bottom:10px;
}

.gx-sheet-desc{
  font-size:1rem;
  color:#555;
  line-height:1.6;
  margin-bottom:25px;
  max-width:420px;
}

.gx-sheet-btn{
  display:block;
  width:100%;
  text-align:center;
  background:#1C244B;
  color:#fff;
  padding:15px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  font-size:1.1rem;
}

/* ================================================================
   PRECIO / BADGE — MOBILE SHEET
   ================================================================ */

.gx-sheet-price-original,
.gx-tooltip-price-original{
  font-size:.95rem;
  color:#6B7280;
  text-decoration:line-through;
  margin-bottom:6px;
  font-weight:600;
}

.gx-sheet-price{
  font-size:1.3rem;
  font-weight:800;
  color:#E63946;
  margin-bottom:12px;
}

.gx-sheet-badge,
.gx-tooltip-badge{
  background:#1C244B;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  font-size:.9rem;
  display:inline-block;
  margin:6px 0 18px;
  line-height:1.4;
}

/* ================================================================
   MOBILE — trigger visual 28px, área táctil 44px (estándar HIG)
   ================================================================ */
@media (max-width: 768px) {
  .gx-p-trigger {
    width: 28px;
    height: 28px;
  }

  .gx-p-trigger::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  .gx-p-icon {
    font-size: 14px;
  }

  .gx-p-trigger:active {
    transform: scale(0.88);
    background: #16549D;
  }
}