/* ===== Base banner ===== */
.model-c h2,
.model-d h2 {
  font-size: 40px;
  margin: 0 0 10px;
}

.model-c p,
.model-d p {
  font-size: 20px;
  margin: 0 0 20px;
}

.model-c {
  background-image: url("../img/banners/3c.jpg");
}

.model-d {
  background-image: url("../img/banners/2b.jpg");
  position: relative;
  color: #fff;
  transition: 0.25s all ease;
}

.version-2.banner.model-c {
  background-image: url("../img/banners/1b.jpg");
}

.version-2.banner.model-d {
  background-image: url("../img/banners/4b.jpg");
}

.banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 250px;
  /* width: 65%; */
  width: 100%;
  padding: 50px;
  margin: 30px auto;
  background-size: cover;
  background-repeat: no-repeat;
  color: #454545;
  border-radius: 20px;
}

.banner.model-d {
  color: white;
}

/* ===== Modelo C (estilos) ===== */
.model-c .banner-container {
  width: 100%;
  max-width: 70%;
  padding: 15px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.6);
  margin-left: auto;
  text-align: center;
}

/* Typewriter + cursor */
.txt-type {
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.12em solid rgba(230, 230, 230, 0.9);
  animation: caretBlink 0.9s steps(1) infinite;
}

@keyframes caretBlink {
  0%,
  49% {
    border-right-color: rgba(230, 230, 230, 0.7);
  }

  50%,
  100% {
    border-right-color: transparent;
  }
}

/* Botón genérico */
.cta-button {
  background-color: #53c157;
  color: #fff;
  font-size: 28px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
  --pulse-rgb: 255, 165, 0;
  /* default amarillo #FFA500 */
}

.cta-button:hover {
  filter: brightness(0.95);
  outline: 0;
  border-color: transparent;
  box-shadow: none;
}

/* Neon (Modelo C botón) */
@keyframes neonPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--pulse-rgb, 255, 165, 0), 0);
  }

  50% {
    transform: scale(1);
    box-shadow:
      0 0 35px rgba(var(--pulse-rgb, 255, 165, 0), 0.85),
      0 0 18px rgba(var(--pulse-rgb, 255, 165, 0), 0.55) inset;
  }
}

.btn-neon {
  border-radius: 25px;
}

.auto-neon {
  animation: neonPulse 1s ease-in-out;
  will-change: transform, box-shadow;
}

/* ===== Modelo D (overlay + estilos) ===== */
.model-d::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: 0.25s all ease;
  border-radius: 20px;
}

.model-d .content {
  position: relative;
  z-index: 1;
  transition: 0.25s all ease;
}

.model-d:hover::after {
  background: rgba(0, 0, 0, 0.65);
}

/* Hover específico para los dos banners D */
.banner.model-d:not(.version-2) .cta-button {
  background-color: #2d94d1;
  --pulse-rgb: 83, 193, 87;
  /* #53c157 */
}

.banner.model-d.version-2 .cta-button {
  background-color: #2d94d1;
  --pulse-rgb: 106, 13, 173;
  /* #6a0dad */
}

.banner.model-d:not(.version-2) .cta-button:hover {
  background-color: #53c157;
  /* verde */
}

.banner.model-d.version-2 .cta-button:hover {
  background-color: #6a0dad;
  /* morado */
}

/* Botón Sweep (Modelo D) */
.btn-sweep {
  background: linear-gradient(
    120deg,
    #2d94d1 0%,
    #2d94d1 50%,
    #e53935 50%,
    #e53935 100%
  );
  background-size: 220% 100%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-position 0.35s ease;
}

.btn-sweep:hover {
  background: #e53935;
  background-image: none;
  transform: scale(1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  animation-play-state: paused;
}

@keyframes sweepAuto {
  0% {
    background-position: 0% 0%;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  50% {
    background-position: 100% 0%;
    transform: scale(1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  }

  100% {
    background-position: 0% 0%;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

.auto-sweep {
  animation: sweepAuto 1s ease;
}

/* Gradiente deslizante (para h2 del Modelo C) */
.txt-gradient {
  background: linear-gradient(90deg, #2d94d1, #00c2ff, #0076ff, #2d94d1);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: slideGrad 6s linear infinite;
}

.model-c h2.txt-gradient {
  background: linear-gradient(90deg, #2d94d1, #ff3b3b, #ff9800, #2d94d1);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: slideGrad 6s linear infinite;
}

@keyframes slideGrad {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/* Aparición + micro-pop */
.txt-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.txt-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@keyframes textPop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  40% {
    transform: translateY(-6px);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.auto-reveal {
  animation: textPop 1s ease;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .banner.model-c {
    height: 300px;
    background-image: url("../img/banners/3a.jpg");
    background-position: center -70px;
    align-items: flex-end;
  }

  .banner.model-d {
    height: 240px;
    background-image: url("../img/banners/2a.jpg");
    background-position: center -50px;
    align-items: flex-end;
  }

  .version-2.banner.model-c {
    background-image: url("../img/banners/1.jpg");
    background-position: center -70px;
  }

  .version-2.banner.model-d {
    background-image: url("../img/banners/4.jpg");
    height: 240px;
    background-position: center 0;
  }

  .banner {
    width: 100%;
    padding: 30px;
  }

  .model-c .banner-container {
    max-width: 100%;
  }

  .banner.model-c .banner-container {
    background-color: rgba(255, 255, 255, 0.9);
  }

  .model-c h2,
  .model-d h2 {
    font-size: 22px;
  }

  .model-c p,
  .model-d p {
    font-size: 16px;
  }

  .cta-button {
    font-size: 14px;
  }
}