/* === COMPONENTE CARDS HOVER === */
.content_card .col{
  padding: 0;
}
.cards-hover .card-hover{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  height: 360px;
}

.card-hover__media{
  width: 100%;
  height: 100%;
}

.card-hover__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-hover__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30px;
    color: #fff;
    background: #0f131ddb;
    transform: translateY(64%);
    transition: transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card-hover__overlay {
    transition: none;
  }
}

/* Hover */
.card-hover:hover .card-hover__overlay,
.card-hover:focus .card-hover__overlay{
  transform: translateY(0%);
}

.card-hover:focus .card-hover__overlay,
.card-hover:focus-visible .card-hover__overlay {
  transform: translateY(0);
}

.card-hover:hover .card-hover__overlay,
.card-hover:focus .card-hover__overlay{
  transform: translateY(20%);
}

/* Texto */
.card-hover__title{
  font-family: var(--font-primary);
  font-size: clamp(1.125rem, 1.0417rem + 0.1736vw, 1.25rem);
  font-weight: var(--fw-extrabold);
  line-height: 24px; 
  margin: 0;
}

.card-hover__desc{
  opacity: 0;
  transition: opacity .3s ease;
}

.card-hover__desc{
  padding-top: 15px;
  color: var(--color-blanco);
}

.card-hover:hover .card-hover__desc,
.card-hover:focus .card-hover__desc{
  opacity: 1;
}

/* Indicador de foco para navegación por teclado (Accesibilidad) */
.card-hover:focus-visible {
    outline: 3px solid #0056b3; /* Color contrastado, cámbialo según tu paleta */
    outline-offset: 4px;
    border-radius: 8px;
    transition: outline-offset 0.2s ease;
}

/* Aseguramos que el contenido sea visible para lectores de pantalla 
   incluso si hay efectos de hover */
.card-hover__overlay {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Si la tarjeta recibe foco, mostramos el overlay (igual que en hover) */
.card-hover:focus-visible .card-hover__overlay,
.card-hover:hover .card-hover__overlay {
    opacity: 1;
    transform: translateY(24%);
}

/* Optimización para evitar saltos de diseño (SEO - CLS) */
.card-hover__media img {
    display: block;
    max-width: 100%;
    /*height: auto;*/
    object-fit: cover;
    background-color: #f0f0f0; /* Placeholder mientras carga la imagen */
}