.hero-dnp{

    position:relative;

    overflow:hidden;

    padding:140px 0 90px;

    background:
    linear-gradient(135deg,#08192e 0%,#10345b 55%,#1c6ea4 100%);

}

.hero-dnp:before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    right:-180px;
    top:-180px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}

.hero-dnp:after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    left:-120px;
    bottom:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

}

.hero-align{

    display:flex;

    align-items:center;

    min-height:620px;

}

.hero-badge{

    display:inline-block;

    background:rgba(255,255,255,.12);

    color:#fff;

    padding:10px 10px;

    border-radius:40px;

   

    font-size:14px;

    backdrop-filter:blur(8px);

}

.hero-title{

    color:#fff;

    font-size:54px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-subtitle{

    color:#d9e7f3;

    font-size:22px;

    line-height:1.8;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    margin-bottom:45px;

    flex-wrap:wrap;

}

.hero-btn{

    background:#00A6E8;

    border:none;

    border-radius:50px;

    padding:16px 35px;

    font-weight:600;

    transition:.3s;

}

.hero-btn:hover{

    background:#0088c0;

    transform:translateY(-3px);

}

.hero-btn-outline{

    border-radius:50px;

    padding:16px 35px;

    font-weight:600;

}

/* Contenedor padre de las estadísticas */
.hero-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Fuerza a que se mantengan estrictamente en la misma fila */
  justify-content: space-between; /* Distribuye el espacio equitativamente */
  align-items: center;
  margin-top: 35px;
  gap: 10px; /* Separación mínima para que no se peguen en móviles */
  width: 100%;
}

/* Cada uno de los 4 elementos individuales */
.hero-stats > div {
  flex: 1; /* Hace que todos midan exactamente lo mismo */
  text-align: center;
  min-width: 0; /* Evita que el texto largo rompa el contenedor flex */
  border-right: 1px solid rgba(255, 255, 255, 0.15); /* Línea divisoria sutil */
}

/* Elimina la línea divisoria en el último elemento */
.hero-stats > div:last-child {
  border-right: none;
}

/* Estilo para los números/marcas (Móvil primero) */
.hero-stats strong {
  display: block;
  font-size: 16px; /* Tamaño adaptado para pantallas pequeñas */
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

/* Estilo para las etiquetas inferiores (Móvil primero) */
.hero-stats span {
  display: block;
  font-size: 10px; /* Tamaño adaptado para pantallas pequeñas */
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* --- Ajustes para pantallas medianas y grandes (Tablets / Desktop) --- */
@media (min-width: 768px) {
  .hero-stats {
    gap: 20px;
    margin-top: 45px;
  }
  
  .hero-stats strong {
    font-size: 26px; /* Crece el tamaño en pantallas más grandes */
  }
  
  .hero-stats span {
    font-size: 13px;
    letter-spacing: 1px;
  }
}

.hero-image{

    max-width:95%;

    animation:float 6s ease-in-out infinite;

    filter:drop-shadow(0 30px 50px rgba(0,0,0,.35));

}

 

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0px);
    }

}

@media(max-width:991px){

.hero-align{

display:block;

text-align:center;

min-height:auto;

}

.hero-title{

font-size:38px;

}

.hero-subtitle{

font-size:18px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

margin-bottom:50px;

}



}