* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #ffffff;
    line-height: 1.5;
    overflow-x: hidden;
}

.shape_blanca,
.shape_gris {
  /* width: 100vw; */
  min-width: 1400px;
  height: 600px;
  position: absolute;
  top: 0;
  z-index: 3;
  clip-path: polygon(
    0 0,
    75% 0,
    100% 75%,
    90% 100%,
    0 100%
  );
}

.shape_blanca { background: white; left: -35rem; }
.shape_gris { background: #828282; left: -33.5rem; }

.shape_blanca, .shape_gris {
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Responsive shapes */
@media (max-width: 992px) {
.shape_blanca,
.shape_gris {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 75%,
    100% 100%,
    0 100%
  );
}

.vector-overlay,
.vector-overlay-separator {
    transition: left 0.5s ease, opacity 0.5s ease;
}

}
@media (max-width: 998px) {
  .text-section h1, p {
    /* color: #ffffff !important; */
  }

  .text-section {
    padding: 50px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .shape_blanca, .shape_gris {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.text-section {
  z-index: 5;
}

.text-section h1 {
  font-size: 3.6rem;
  font-weight: bold;
  color: #5a48ff;
  padding: 0 30px 0 0;
}

.text-section p {
  font-size: 1.3rem;
  margin-top: 1rem;
  color: #333;
}

.text-section button {
  background: #6c63ff;
  border: none;
  color: white;
  padding: 0.90rem 1.6rem;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.text-section button:hover {
  background: #453faa;
}

.mockup-img {
  max-width: 90%;
  position: relative;
  z-index: 6;
}
.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.bg_img {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Fondo en un pseudo-elemento */
/* .bg_img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
  filter: blur(1px) brightness(0.9);
  transform: scale(1.05);
  z-index: 1;
} */

.bg_img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
  /* filter: blur(1px) brightness(0.9); */
  /* transform: scale(1.05); */
  z-index: 1;
  border-radius: 100% 0 0 100%;
}

/* Logo nítido encima del blur */
.bg_img .logo {
  position: absolute;
  top: 3rem;
  right: 1rem;
  width: 220px;
  height: auto;
  z-index: 2; /* Encima del fondo borroso */
}
.bg_img .img-fluid {
  position: absolute;
  bottom: 5rem;
  right: 5rem;
  width: 400px;
  height: auto;
  z-index: 2; /* Encima del fondo borroso */
}

.img-fluid {
    max-width: 100%;
    width: 400px;
    height: auto;
}

/* --- Fondo principal --- */
/* .hero-section2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rem 1rem;
  background: linear-gradient(135deg, #6c63ff, #8a7bff, #b1a9ff, #6c63ff);
  background-size: 300% 300%;
  animation: gradientShift 12s ease-in-out infinite;
  overflow: hidden;
  border-radius: 2rem;
} */

.hero-image-wrapper {
  position: relative;
  display: inline-block;
}

/* --- Shape difuminado detrás --- */
.blur-shape {
  position: absolute;
  width: 450px;
  height: 450px;
  bottom: 35px;
  right: 10px;
  background: #9f9afbcc;
  filter: blur(9px);
  border-radius: 50%;
  z-index: 0;
}

/* --- Imagen principal --- */
.main-img {
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 2;
}

/* --- Imagen encima --- */
.overlay-img {
  position: absolute;
  width: 400px;
  bottom: -30px;
  right: -40px;
  z-index: 3;
}

/* -------------------------------------------------
  📱 Responsive para pantallas pequeñas (móviles)
   ------------------------------------------------- */
@media (max-width: 600px) {

  .blur-shape {
    width: 250px;
    height: 250px;
  }

  .main-img {
    max-width: 300px;
  }

  .overlay-img {
    width: 220px;
    bottom: -20px;
    right: -15px;
  }
}

@media (max-width: 1100px) {

  .blur-shape {
    width: 250px;
    height: 250px;
  }

  .main-img {
    max-width: 300px;
  }

  .overlay-img {
    width: 220px;
    bottom: -20px;
    right: -15px;
  }
}


/* --- Shapes decorativas --- */
.hero-decorations .shape {
  position: absolute;
  /* border-radius: 50%; */
  /* opacity: 0.5; */
  z-index: 1;
  filter: blur(5px);
}

/* Shape 1 (arriba derecha) */
.shape-1 {
  /* width: 800px;
  height: 600px;
  background: rgba(108, 99, 255, 0.4);
  top: -70px;
  right: 20px; */
  width: 1100px;
  height: 700px;
  background: rgba(108, 99, 255, 0.4);
  top: -140px;
  right: -290px;
  animation: float1 6s ease-in-out infinite alternate;
}

@media (max-width: 450px) {
  .shape-1 {
    width: 550px;
    height: 550px;
    top: -80px;
    right: -30px;
  }
}

/* Shape 2 (abajo izquierda) */
.shape-2 {
  width: 520px;
  height: 820px;
  background: rgba(153, 143, 255, 0.4);
  bottom: -180px;
  left: 240px;
  animation: float2 7s ease-in-out infinite alternate;
}

/* Shape 3 (centro flotante) */
.shape-3 {
  width: 180px;
  height: 180px;
  background: rgba(153, 143, 255, 0.4);
  top: 40px;
  left: 450px;
  animation: float3 8s ease-in-out infinite alternate;
}

/* --- Animaciones --- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatImage {
  from { transform: translateY(0px) scale(1); }
  to { transform: translateY(-20px) scale(1.03); }
}

@keyframes float1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-20px, 30px) scale(1.1); }
}

@keyframes float2 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(25px, -20px) scale(1.05); }
}

@keyframes float3 {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(-15px, 10px) rotate(15deg); }
}

.main-text {
    text-align: left;
}

/* Capas vectoriales */
.vector-overlay,
.vector-overlay-separator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.vector-overlay {
    z-index: 3;
    left: -235px;
}
.vector-overlay-separator {
    z-index: 2;
    left: -200px;
}

/* Contenedor del contenido */
.content-wrapper {
    position: relative;
    z-index: 4;
    background: transparent;
    color: #222;
    padding: 0 2rem;
}

/* Sección siguiente */
.content-wrapper2 {
    position: relative;
    z-index: 5;
    background-color: white;
    top: -20px;
}

.content-wrapper h1 {
    font-weight: 700;
    line-height: 1.2;
}

.content-wrapper p {
    margin-top: 1rem;
    font-size: 1.1rem;
}

.btn-primary {
    background-color: #6246ea;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

/* Responsividad */
@media (max-width: 1080px) {
    .vector-overlay,
    .vector-overlay-separator {
        width: 100%;
        left: -1000px;
        opacity: 0.5;
        animation: slideIn 4s forwards;
    }

    .content-wrapper {
        text-align: center;
        padding: 2rem 1rem;
    }

    .content-wrapper h1 {
        font-size: 1.8rem;
    }
}
@media (max-width: 480px) {
    /* .bg_img {
        display: none;
    } */

    .main-text{
       text-align: center !important;
       align-items: center !important;
    }

    .hero-section {
        min-height: 200px;
    }
}

/* Footer */
footer {
    background-color: #393942;
    color: #fff;
    border: none;
    box-shadow: none;
}