*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== VIDEO DE FONDO ===== */
.video-fondo {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: blur(5px) brightness(0.6);
  pointer-events: none;
}

/* ===== SECCIÓN NOSOTROS ===== */
.about{
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh 2vw;
}

.main{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width: 90%;
  max-width: 1290px;
  margin: 0 auto;
}

.about .main img{
  width: 400px;
  max-width: 90%;
  height: auto;
  padding: 0 10px;
  border-radius: 50%;
}

.all-text{
  width: 600px;
  max-width: 90%;
  padding: 0 10px;
  text-align: center;
}

.all-text h4{
  font-size: clamp(16px, 2vw, 25px);
  color: #bbb7b7;
  letter-spacing: 1px;
  font-weight: 400;
  margin-bottom: 10px;
}

.all-text h1{
  font-size: clamp(30px, 4vw, 50px);
  color: #fffefeb0;
  font-weight: 700;
  margin-bottom: 20px;
}

.all-text p{
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 35px;
}

/* ===== BOTONES ===== */
.btn button{
  padding: 1vh 2vw;
  font-size: clamp(14px,1vw,16px);
  font-weight: bold;
  color: #fff;
  border: none;
  outline: none;
  background: rgba(0,0,0,0.32);
  box-shadow: 0px 16px 32px rgba(0,0,0,0.06);
  margin-right: 1vw;
  cursor: pointer;
  transition: 0.3s;
}

.btn button:hover{
  background-color: rgba(152,6,6,0.53);
}

.btn .btn2{ background: rgba(0,0,0,0.32); }
.btn .btn3{ background: rgba(0,0,0,0.32); }

/* ===== MEDIA QUERIES ===== */
@media(max-width: 1250px){
  .about{
    flex-direction: column;
    padding: 8vh 3vw;
  }
  .all-text{
    margin-top: 4vh;
  }
}

@media(max-width: 650px){
  .about .main img{
    width: 50vw;
    margin-bottom: 35px;
  }
  .all-text h1{
    font-size: clamp(24px,6vw,40px);
    margin-bottom: 2.5vh;
  }
  .imagen-flotante{
    width: 50%;
    margin: 4vh auto;
  }
}

/* ===== BARRA DE NAVEGACIÓN PC ===== */
.desktop-nav {
  background: rgba(255, 255, 255, 0.849);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 2vw;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.desktop-nav .container{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* logo más a la izquierda */
  gap: 3vw; /* espacio entre logo y menú */
  width: 100%;
}

.desktop-nav .logo{
  height: 50px;
  width: auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .3s;
}

.desktop-nav .logo:hover{ transform: scale(1.05); }

.desktop-nav .navbar-nav{
  display: flex;
  gap: 2vw;
  align-items: center;
}

.nav-anim{
  font-weight: 500;
  position: relative;
  color: #000;
  text-decoration: none;
}

.nav-anim::after{
  content:"";
  position: absolute;
  width: 0;
  height: 2px;
  background: #ff9800;
  bottom: -5px;
  left: 0;
  transition: .3s;
}

.nav-anim:hover::after,
.nav-anim.active::after{ width: 100%; }

.nav-btn{
  background: linear-gradient(135deg,#ff9800,#ff5722);
  color: white;
  padding: 0.5vh 1.5vw;
  border-radius: 20px;
  text-decoration: none;
  font-size: 1rem;
}

/* ===== BARRA DE NAVEGACIÓN MÓVIL ===== */
.mobile-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.5vh 0;
  z-index: 999;
  padding-left: 0;
  padding-right: 20px; /* solo margen derecho si quieres */
}

.mobile-nav a{
  color: #aaa;
  text-align: center;
  font-size: 0.75rem;
  text-decoration: none;
  position: relative;
  transition: transform .2s, color .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-nav i{ font-size: 1.3rem; display: block; margin-bottom: 3px; }

.mobile-nav a.active,
.mobile-nav a:hover{ color: #ff9800; }

.mobile-nav a:active{ transform: scale(0.9); }

.mobile-nav a.active::before{
  content:"";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: #ff9800;
  border-radius: 10px;
}

.mobile-nav .logo{
  height: 40px;
  width: auto;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 10px; /* logo más a la izquierda en móvil */
}

.mobile-nav .logo-link{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}