header {
  height: 406px;
}

@media (min-width: 1200px) {
  header {
    height: 400px;
  }
}

.bg-image,
.bg-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.object-fit-cover {
  object-fit: cover;
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0.5;
  z-index: 1;
}

header .container {
  z-index: 2;
}

.text-miriam {
  color: #163495;
}

.text-taurus {
  color: #2E7D32;
}

.text-endangered {
  color: #CD2427;
}

.text-gold {
  color: #FFD700;
}

.text-small {
  font-size: 12px;
}

.bg-miriam {
  background-color: #163495 !important;
}


.bg-rich-white {
  background-color: #F3F2F8;
}

.bg-strong-white {
  background-color: #F9F9FC;
}

.card-essential,
.card-signature,
.card-gold {
  border-radius: 24px !important;
}

.card-signature {
  border: 2px solid #163495 !important;
}

.card-signature h5,
.card-gold h5 {
  border-radius: 18px 18px 0 0 !important;
}

.btn-plan-signature,
.btn-plan-essential,
.btn-plan-gold {
  width: 200px !important;
  border-color: #163495 !important;
}

.btn-plan-essential:hover {
  background-color: #163495 !important;
  color: #ffffff !important;
}

.btn-plan-signature:hover,
.btn-plan-gold:hover {
  background-color: #FFFFFF !important;
  color: #163495 !important;
}

.card-bg .card-body::before {
  content: "";
  position: absolute;
  border-radius: 0 0 24px 24px;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  filter: saturate(0.85) brightness(1.05);
  opacity: 0.55;
  z-index: 1;
}

.card-signature .card-body::before {
  background-image: url('https://drbaja.s3.us-east-2.amazonaws.com/img/background/endolift-facial.jpg');
}

.card-gold .card-body::before {
  background-image: url('https://drbaja.s3.us-east-2.amazonaws.com/img/background/facelift.jpg');
}

.card-bg .card-body::after {
  content: "";
  position: absolute;
  border-radius: 0 0 24px 24px;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.92) 35%,
    rgba(255,255,255,0.75) 60%,
    rgba(255,255,255,0.55) 80%,
    rgba(255,255,255,0.35) 100%
  );
  z-index: 2;
}

.card-bg .card-body > * {
  position: relative;
  z-index: 3;
}

.td-text,
.td-feature h3 {
 font-size: 14px;
}

.td-value {
  vertical-align: middle !important;
}

.gallery-item {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}




.cards-wrapper {
    min-height: 320px;
}

/* Base card */
.result-card {
    width: 240px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
    position: absolute;
    transition: all 0.4s ease;
}

.result-card img {
    width: 100%;
    display: block;
}

/* Positions */
.card-far-left {
    transform: translateX(-300px) rotate(-10deg) scale(0.9);
    opacity: 0.6;
}

.card-left {
    transform: translateX(-160px) rotate(-6deg) scale(0.95);
    opacity: 0.9;
    z-index: 2;
}

.card-center {
    z-index: 3;
}

.card-right {
    transform: translateX(160px) rotate(6deg) scale(0.95);
    opacity: 0.9;
    z-index: 2;
}

.card-far-right {
    transform: translateX(300px) rotate(10deg) scale(0.9);
    opacity: 0.6;
}

/* Only center card has effect */
.result-card.active {
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
    animation: floatCard 3.5s ease-in-out infinite;
}

@keyframes floatCard {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {

    .section-before-after {
        overflow-x: hidden; /* 🔑 evita scroll horizontal */
    }

    .cards-wrapper {
        min-height: 260px;
        position: relative;
    }

    /* Hide extreme cards */
    .card-far-left,
    .card-far-right {
        display: none;
    }

    /* Keep baraja layout */
    .result-card {
        position: absolute;
        opacity: 1;
        margin: 0;
        animation: none;
    }

    .card-left {
        transform: translateX(-120px) rotate(-6deg) scale(0.92);
        opacity: 0.75;
    }

    .card-center {
        transform: translateX(0) scale(1);
        z-index: 3;
    }

    .card-right {
        transform: translateX(120px) rotate(6deg) scale(0.92);
        opacity: 0.75;
    }

    /* Optional: reduce card size on mobile */
    .result-card {
        width: 200px;
    }
}








@media (max-width: 768px) {
  .gallery-item {
    height: 150px;
  }

  .td-feature {
    padding-left: 0px !important;
  }

  .plan-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    margin: 0 auto 12px;
    font-size: 14px;
  }

  .td-text {
    font-size: 10px;
  }
}

@media (max-width: 576px) {
  .card-bg .card-body::before {
    opacity: 0.35;
  }

  .card-bg .card-body::after {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.9) 60%,
      rgba(255,255,255,0.7) 100%
    );
  }
}