/* ================= Fondo con overlay ================= */
.carouselFondo2 {
   background-image: url('/images/fondo-informacion-seguros.webp');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
   height: 600px;
}

.overlay2 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(59, 85, 202, 0.3);

   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   padding-left: 70px;
}

.overlay2 h2 {
   color: white;
   font-size: 87px;
   font-weight: bold;
   margin: 0 0 20px 0;
   line-height: 1.1;
}

.overlay2 p {
   color: white;
   font-size: 20px;
   margin: 0 0 20px 0;
   max-width: 600px;
}

.enlace2 {
   text-decoration: none;
   color: white;
   background-color: #244289;
   padding: 12px 28px;
   border-radius: 10px;
   font-weight: 600;
   font-size: 1.1rem;
   transition: all 0.3s ease;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.enlace2:hover {
   background-color: white;
   color: #244289;
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ================= Cards ================= */
.info-div {
   user-select: none;
   /* Evita seleccionar texto */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   display: flex;
   align-items: center;
   gap: 20px;
   background: #fff;
   border-radius: 12px;
   padding: 20px;
   box-shadow: 0 8px 25px rgba(101, 101, 101, 0.6);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   margin: 20px 0;
}

.info-div:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.info-div img {
   width: 250px;
   height: 200px;
   border-radius: 8px;
   object-fit: cover;
}

.info-text h3 {
   margin-top: 0;
   color: #244289;
   font-weight: 680;
}

.info-text ul {
   list-style-type: none;
   padding-left: 20px;
   margin-bottom: 15px;
}

.info-text ul li:before {
   content: "\2022";
   color: black;
   display: inline-block;
   width: 1em;
   margin-left: -1em;
}

.enlace-leer {
   text-decoration: none;
   color: white;
   background-color: #244289;
   padding: 5px 10px;
   border: 1px solid transparent;
   border-radius: 6px;
   transition: all 0.3s ease;
}

.enlace-leer:hover {
   color: black;
   background-color: white;
   border: 1px solid #244289;
   text-decoration: none;
}

/* ================= Texto centrado ================= */
.texto-centrado {
   margin-top: 70px;
   font-size: 25px;
   color: #30519E;
   margin-bottom: 140px;
}

/* ================= Botón Subir ================= */
#btnSubir {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 1000;
   background: #13509F;
   color: white;
   border: none;
   padding: 12px 20px;
   border-radius: 50%;
   cursor: pointer;
   font-size: 18px;
   opacity: 0;
   pointer-events: none;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   transition: none;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

#btnSubir.show {
   opacity: 1;
   pointer-events: auto;
   animation: popIn 0.5s ease-out, bounceUp 2s infinite ease-in-out 0.5s;
}

#btnSubir.hide {
   animation: popOut 0.4s ease-in forwards;
}

@keyframes popIn {
   0% {
      transform: scale(0);
      opacity: 0;
   }

   60% {
      transform: scale(1.2);
      opacity: 1;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

@keyframes popOut {
   0% {
      transform: scale(1);
      opacity: 1;
   }

   100% {
      transform: scale(0);
      opacity: 0;
   }
}

@keyframes bounceUp {

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

   30% {
      transform: scale(1.05) translateY(-8px);
   }

   60% {
      transform: scale(1) translateY(0);
   }
}

#btnSubir:hover {
   background: #0a3470;
   transform: scale(1.15);
}

/* ================= Ver más ================= */
.ver-mas-container {
   display: flex;
   justify-content: center;
   margin: 30px 0;
}

#ver-mas-btn {
   background: linear-gradient(135deg, rgb(11, 60, 238), #3b82f6);
   border: none;
   border-radius: 12px;
   padding: 12px 28px;
   font-size: 1.1rem;
   font-weight: 600;
   color: #fff;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
   cursor: pointer;
}

#ver-mas-btn:hover {
   transform: translateY(-3px);
   background: linear-gradient(135deg, #3b82f6, #2563eb);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

#ver-mas-btn:active {
   transform: translateY(1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ================= Responsivo ================= */
@media screen and (max-width: 1024px) {
   .overlay2 h2 {
      font-size: 72px;
      /* antes 65px */
   }

   .overlay2 p {
      font-size: 20px;
   }
}

@media screen and (max-width: 768px) {
   .overlay2 {
      align-items: center;
      padding-left: 0;
      text-align: center;
   }

   .overlay2 h2 {
      font-size: 55px;
      /* antes 45px */
      line-height: 1.2;
   }

   .overlay2 p {
      font-size: 18px;
      /* antes 16px */
      max-width: 90%;
   }

   .info-div {
      flex-direction: column;
      align-items: center;
   }

   .info-div img {
      width: 100%;
      max-width: 400px;
      margin-bottom: 15px;
   }

   .info-text h3 {
      font-size: 20px;
      text-align: center;
   }

   .info-text ul {
      text-align: left;
      font-size: 14px;
   }

   .enlace-leer {
      display: block;
      margin: 15px auto 0;
      text-align: center;
   }

   .texto-centrado {
      font-size: 18px;
      /* antes 16px */
   }
}

@media screen and (max-width: 480px) {
   .overlay2 h2 {
      font-size: 42px;
      /* antes 32px */
      line-height: 1.2;
   }

   .overlay2 p {
      font-size: 16px;
      /* antes 14px */
   }

   .enlace2 {
      padding: 10px 22px;
      font-size: 1rem;
   }
}