/* =========================================================
   HOVER PANELS — imagen fija por ancho expandido calculado
   ========================================================= */

.ahp{
  --ahp-h:620px;             /* alto de cada tarjeta en desktop */
  --ahp-radius:24px;
  --ahp-gap:18px;            /* separación entre tarjetas */
  --ahp-accent:#3D55A5;      /* color del marco */
  --ahp-ovr:0.50;            /* overlay en reposo */
  --ahp-ovr-hover:0.25;      /* overlay en activo */
  --ahp-flex-dur:0.85s;      /* transición del tamaño */
  --ahp-flex-ease:cubic-bezier(.25,.8,.25,1);
  --ahp-copy-dur:0.35s;      /* transición del texto */
  --ahp-copy-ease:ease;

  /* NUEVO */
  --ahp-min:300px;           /* ancho de cada tarjeta colapsada */
  --ahp-img-w:auto;          /* ancho fijo de la imagen (lo pone el JS) */

  margin:0 auto;
}

/* Contenedor con marco */
.ahp__frame{
  border-radius:calc(var(--ahp-radius) + 10px);
  display:flex;
  gap:var(--ahp-gap);
  height:calc(var(--ahp-h) + 36px);
  align-items:stretch;
}

/* Tarjeta base (todas reparten ancho en reposo) */
.ahp__card{
  position:relative;
  flex:1 1 0%;
  height:var(--ahp-h);
  border-radius:var(--ahp-radius);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  outline:none;
  transition:
    flex-basis var(--ahp-flex-dur) var(--ahp-flex-ease),
    flex-grow var(--ahp-flex-dur) var(--ahp-flex-ease),
    filter var(--ahp-flex-dur) var(--ahp-flex-ease);
}

/* Cuando hay activa, contraemos hermanas al mínimo y ampliamos la activa */
.ahp__frame.has-active .ahp__card{
  flex:0 0 var(--ahp-min);
  filter:saturate(.8);
}
.ahp__frame.has-active .ahp__card.is-active{
  flex:1 1 40%;
  filter:none;
}

/* IMAGEN FIJA: alto constante y ANCHO FIJO calculado */
.ahp__media{ position:absolute; inset:0; overflow:hidden; }
.ahp__media img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--ahp-h) !important;
    width: var(--ahp-img-w) !important;
    max-width: none !important;
    transform: translate(-50%,-50%);
    display: block;
    pointer-events: none;
    object-fit: cover;
    image-rendering: auto;
    transition: filter .6s ease;
}
/* Anclajes opcionales por tarjeta */
.ahp__card[data-align="left"]  .ahp__media img{ left:0; transform:translateY(-50%); }
.ahp__card[data-align="right"] .ahp__media img{ left:auto; right:0; transform:translateY(-50%); }

/* Overlay */
.ahp__veil{
  position:absolute; inset:0;
  background:rgba(0,0,0,var(--ahp-ovr));
  transition: background var(--ahp-copy-dur) var(--ahp-copy-ease);
}

/* Etiqueta vertical (abajo→arriba) */
.ahp__label{
  /* position:absolute; top:0; bottom:0; right:-22px;
  display:flex; align-items:center; 
  justify-content:center;  */
  pointer-events:none;
  transform:rotate(-90deg);
  transform-origin:center;
  transition:opacity var(--ahp-copy-dur) var(--ahp-copy-ease);


  z-index: 3;
  transform-origin: 100% 100%;
  min-width: 32rem;
  padding: 1.5rem;
  position: absolute;
  bottom: 100%;
  right: 0%;
  overflow: hidden;
  transform: rotate(-90deg);
}
.ahp__label span{
  color:#fff; font-weight:100; letter-spacing:.2px; white-space:nowrap;
  font-size:24px; line-height:1;
}

/* Contenido interno (texto) */
.ahp__content{
  position:absolute; left:24px; bottom:24px; right:24px;
  color:#fff; opacity:0; transform:translateY(10px);
  transition:opacity var(--ahp-copy-dur) var(--ahp-copy-ease),
             transform var(--ahp-copy-dur) var(--ahp-copy-ease);
}
.ahp__title{ font-size:28px; font-weight:700; margin:0 0 8px; color: #fff; }
.ahp__desc{  font-size:20px; line-height:1.6; opacity:.9; margin:0; }

/* Secuencia (controlada por JS) */
.ahp__card.is-pre .ahp__content{ opacity:1; transform:translateY(0); }
.ahp__card.is-pre .ahp__veil{ background:rgba(0,0,0,var(--ahp-ovr-hover)); }
.ahp__card.is-pre .ahp__label,
.ahp__card.is-active .ahp__label{ opacity:0; }

/* Accesibilidad */
.ahp__card:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.6) inset; }

/* Responsive */
@media (max-width:1024px){
  .ahp__title{ font-size:24px }
  .ahp__desc { font-size:14px }
}
@media (max-width:768px){
  .ahp__frame{
    height:auto; display:grid; grid-template-columns:1fr; gap:12px; padding:12px;
  }
  .ahp__card{
    flex:1 1 auto; height:min(72vw, 420px);
  }
  .ahp__frame.has-active .ahp__card{ flex:1 1 auto; } /* en grid no contraemos */
  .ahp__media img{
    height:100%;
    width:var(--ahp-img-w);  /* el JS pondrá el ancho del contenedor */
    transform:translate(-50%,-50%);
  }
  .ahp__label{ right:auto; left:16px; transform:none; align-items:flex-end; justify-content:flex-start; }
  .ahp__label span{ font-size:16px; opacity:.85 }
}

/* ====== MÓVIL: imagen arriba, texto abajo ====== */
@media (max-width: 768px) {
  /* Altura de la imagen en móvil (ajústala si quieres) */
  .ahp { --ahp-mh: min(72vw, 420px); }

  /* El frame pasa a layout en columna (bloques apilados) */
  .ahp__frame{
    display: block;            /* sin flex */
    height: auto;
  }

  /* Cada tarjeta es un bloque con su propio espaciado */
  .ahp__card{
    display: flex;
    flex-direction: column;
    height: auto;              /* deja de ser fija */
    border-radius: var(--ahp-radius);
    overflow: hidden;
    margin: 0 0 12px 0;        /* separación entre bloques */
    filter: none !important;   /* sin desaturar en móvil */
  }
  .ahp__card:last-child{ margin-bottom: 0; }

  /* Imagen arriba, con altura fija de móvil */
  .ahp__media{
    position: relative;
    inset: auto;
    overflow: hidden;
    height: var(--ahp-mh);
  }
  /* Tu plantilla fuerza width/height con !important; en móvil lo sobreescribimos para llenar el ancho del bloque */
  .ahp__media img{
    position: absolute;
    top: 0; left: 0;
    height: 100% !important;
    width: 100% !important;       /* llenar ancho del bloque */
    max-width: none !important;
    transform: none !important;    /* sin translate */
    object-fit: cover;
  }

  /* Ocultamos overlay y etiqueta vertical en móvil */
  .ahp__veil{ display: none; }
  .ahp__label{ display: none; }

  /* Texto debajo de la imagen, con padding y visible siempre */
  .ahp__content{
    position: static;
    padding: 14px 14px 18px;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Títulos y párrafos algo más contenidos */
  .ahp__title{ font-size: 18px; line-height: 1.3; margin: 0 0 6px; color: #000; }
  .ahp__desc { font-size: 14px; line-height: 1.6; opacity: .95;  color: #000;}

  /* Desactiva el comportamiento de “expandir/contraer” visual en móvil */
  .ahp__frame.has-active .ahp__card{ flex: 1 1 auto; }
  .ahp__frame.has-active .ahp__card.is-active{ flex: 1 1 auto; }
}