/* =======================================================================
   HERO full-screen con overlay + carrusel (Swiper)
   ======================================================================= */

.hero-section{
  width:100%;
  height:80vh;
  margin:0; padding:0; overflow:hidden;
  position:relative;
}

/* Swiper */
.hero-swiper{ width:100%; height:100%; }
.hero-slide{
  width:100%; height:100%;
  position:relative;
  background-size:cover;
  background-position: center 70%;
  transition: background-image .7s cubic-bezier(.7,.2,.3,1);
}

/* Capa de degradado superior */
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0, 11, 64, 0.80), rgba(129, 149, 248, 0.65));
  display:flex; align-items:center; justify-content:center;
  padding:2rem; z-index:2;
}

/* Contenido centrado */
.hero-content {
  max-width: 800px;
  width: 90%;
  text-align: center;
  color: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80%;

  position: relative;
  z-index: 3;

  transform: translateY(80px); /* desplaza todo el contenido hacia abajo */
}

/* Bloques de texto (si quieres transiciones extra entre textos) */
.hero-texts{
  opacity:1; pointer-events:all;
  transition: opacity .6s;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero-texts.is-hidden{ opacity:0; pointer-events:none; }

.hero-title{
  font-size:48px; line-height:50px;
  font-weight:700; color:#fefefe; margin:0 0 1rem;
}
.hero-subtitle{
  font-size:19.2px; line-height:23px;
  font-weight:700; margin:0.5rem 0 2rem;
}

.hero-button{
  display:inline-block;
  background:#7a4dff; color:#fefefe;
  padding:0.9rem 3rem; border-radius:12px; font-weight:700;
  text-decoration:none; font-size:25px;
  transition: background-color .3s ease, transform .15s ease;
  position:relative; z-index:3;
}
.hero-button:hover{ background:#7aa9ff; color:#fefefe; }
.hero-button:active{ transform: translateY(1px); }

/* Flechas personalizadas (usamos navegación de Swiper con tus estilos) */
.carrusel-prev, .carrusel-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#c9baff; border:none; cursor:pointer; z-index:5;
  border-radius:50%; box-shadow:0 2px 8px #202040;
  transition: background .2s, color .2s;
  color:#fff; font-size:2.5rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.carrusel-prev{ left:40px; padding:0rem 1.3rem 0.5rem 0.9rem; }
.carrusel-next{ right:40px; padding:0rem 1.3rem 0.5rem 0.9rem; }

.carrusel-prev:hover, .carrusel-next:hover,
.carrusel-prev:active, .carrusel-next:active{
  background:#7a4dff; color:#fff;
}
.carrusel-prev:focus, .carrusel-next:focus{
  background:#c9baff !important; color:#fff !important; outline:none;
}

/* Indicadores (usamos la paginación de Swiper, pero con tu estilo) */
.carrusel-indicators{
  position:absolute; left:0; right:0; bottom:40px; text-align:center; z-index:6;
}
.carrusel-indicators .swiper-pagination-bullet{
  width:16px; height:16px; margin:0 7px;
  background:#c9baff; opacity:1; border-radius:50%; transition: background .2s;
}
.carrusel-indicators .swiper-pagination-bullet:hover,
.carrusel-indicators .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background:#7a4dff;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 992px){
  .hero-title{ font-size:36px; line-height:42px; }
  .hero-subtitle{ font-size:16px; margin-bottom:2rem; }
  .hero-button{ font-size:20px; margin-top:10rem; padding:.8rem 2rem; }
  .carrusel-prev, .carrusel-next{ font-size:2rem; padding:.3rem 1rem; }
}

@media (max-width: 768px){
  .hero-section, .hero-swiper, .hero-slide{
    height:60vh; min-height:320px;
  }
  .hero-title{ font-size:25px; line-height:36px; margin-bottom:60px; }
  .hero-subtitle{ font-size:14px; }
  .hero-button{ font-size:1rem; padding:.7rem 1.5rem; margin-top:2rem !important; }
  .carrusel-prev{ left:12px; }
  .carrusel-next{ right:12px; }
  .carrusel-indicators{ bottom:20px; }
}

@media (min-width:1440px){
  .hero-title{ font-size:56px; }
  .hero-subtitle{ font-size:22px; }
  .hero-button{ font-size:28px; }
}

@media (min-width:1600px){
  .hero-title{ font-size:60px; line-height:70px; }
  .hero-subtitle{ font-size:24px; line-height:32px; }
  .hero-button{ font-size:30px; padding:1.2rem 3.5rem; margin-top:15rem; }
}