/* Contenedor principal */
.cards-slider{
  --brand:#f6a800;
  --brand-weak: rgba(246,168,0,.06);
  --card-radius:18px;
  max-width:560px; margin:0 auto;
}
.cards-slider .cards-swiper{ overflow:hidden; border-radius:var(--card-radius); }

/* Imagen (tu efecto de scale 0.5→1→0.5 lo maneja JS/Swiper) */
.card{ position:relative; width:100%; border-radius:var(--card-radius); overflow:hidden; margin:0; }
.card__img{
  display:block; width:100%; height:auto; object-fit:cover;
  transform: translate3d(0,0,0) scale(0.5);
  transform-origin:center; backface-visibility:hidden; will-change:transform;
  border: 1px solid #FFAD00;
  border-radius:var(--card-radius);
}

/* ===== Controles abajo (flecha – bullets – flecha) ===== */
.cards-controls{
  display:flex; align-items:center; justify-content:center;
  gap:28px; margin-top:41px; flex-wrap:nowrap;
}

/* Bullets */
.cards-controls .swiper-pagination{
  position:static; display:flex; align-items:center; gap:10px;
}
.cards-controls .swiper-pagination-bullet{
  width:10px; height:10px; border-radius:50%;
  border:1px solid var(--brand); background:transparent; opacity:1;
  transition:transform .2s ease, background .2s ease, opacity .2s ease;
  margin:0 !important;
}
.cards-controls .swiper-pagination-bullet-active{ background:var(--brand); }

/* Flechas personalizadas (layout estático abajo) */
.cards-controls .swiper-button-prev,
.cards-controls .swiper-button-next{
  position:static;               /* 👈 abajo, no sobre la imagen */
  width:56px; height:56px; border-radius:999px;
  border:2px solid var(--brand);
  background:var(--brand-weak); color:var(--brand);
  display:grid; place-items:center;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, opacity .2s ease;
  min-width: auto;
}
.cards-controls .swiper-button-prev::after,
.cards-controls .swiper-button-next::after{ display:none; } /* oculta icono default */

.cards-controls .swiper-button-prev:hover,
.cards-controls .swiper-button-next:hover{
  background: rgba(246,168,0,.12);
  transform: scale(1.04);
}

.cards-controls .swiper-button-prev:disabled,
.cards-controls .swiper-button-next:disabled{ opacity:.45; cursor:not-allowed; }

/* Focus accesible */
.cards-controls .swiper-button-prev:focus-visible,
.cards-controls .swiper-button-next:focus-visible{
  outline:3px solid rgba(246,168,0,.35); outline-offset:2px;
}

/* Responsive */
@media (max-width:480px){
  .cards-controls{ gap:20px; }
  .cards-controls .swiper-button-prev,
  .cards-controls .swiper-button-next{ width:48px; height:48px; }
}

.card__img{
  display:block; width:100%; height:auto; object-fit:cover;
  transform: translate3d(0,0,0);           /* estado por defecto */
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

.card__badge {
  position: absolute;
  z-index: 1;
  bottom: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF;
  padding: 4px 10px;
  border-radius: 10px;
}

.card__badge a {
   text-decoration: none;
}

/* Asegura stacking correcto */
.card{ position:relative; overflow:hidden; border-radius:var(--card-radius); }
.card__img{ display:block; width:100%; height:auto; object-fit:cover; transform:translate3d(0,0,0); }
.card__shadow{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Overlay con degradado */
.card__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(180deg, rgba(0, 52, 98, 0.56) 0%, rgba(18, 23, 32, 0.80) 100%);
  opacity:0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none;                  /* no bloquea clics de la imagen */
  display:flex; align-items:flex-end;   /* contenido pegado abajo */
  padding:30px;
  border-radius:inherit;
}

/* Contenido del overlay */
.card__overlay-inner{ 
  width:100%; 
  display: flex;
  justify-content: end;
}
.card__title{
  margin:0;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  text-align: right:
}

/* Mostrar overlay en hover o con teclado (accesible) */
.card:hover .card__overlay,
.card:focus-within .card__overlay{
  opacity:1;
  transform: translateY(0);
}
.card:hover .card__badge {
  opacity: 0;
}

/* (Opcional) en pantallas táctiles, muéstralo siempre un poco más sutil */
@media (hover: none){
  .card__overlay{ opacity:.85; transform:none; }
}