@import url(./banner.css);
@import url(./servicios.css);
@import url(./whatsapp.css);
@import url(./productos.css);
@import url(./nosotros.css);
@import url(./contactos.css);
@import url(./footer.css);
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}


@font-face {
  font-family: "FontFamilyLogo";
  src: url("../fonts/GOODTIME.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body{
    font-family:'poppins', sans-serif;
    /*background-color: #e2eaff;
    color: #101632dd;*/
}


section > h2{
  font-size: 2rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px; /* mejor proporción */
  background: #0A4D8C;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 1000;
}

/* LOGO */
header img {
  height: 80px;     /* solo altura */
  width: auto;      /* evita deformación */
  border-radius: 10px;
  object-fit: cover;
  padding: 5px 10px;
  background: white;
}

/* NAV */
nav {
  display: flex;
  align-items: center;
  gap: 30px; /* espacio moderno entre links */
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 0;   /* reduce altura */
  transition: 0.3s;
}

nav a{
  position:relative;
}

nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:2px;
  background:white;
  transition:0.3s;
}

nav a:hover::after{
  width:100%;
}

/* BOTÓN MENÚ */
.menu-btn {
  display: none;
}

@media (max-width: 1024px)
{

}


@media(max-width:768px){

  header {
    padding: 10px 20px; /* Menos espacio a los lados en móvil */
  }

  .menu-btn{
    display:block;
    font-size:28px;
    color:white;
    cursor:pointer;
  }

  nav{
    position:absolute;
    height: 100vh;
    top:80px;
    left:0;
    right:0;  

    background: linear-gradient(
      135deg,
    #0A4D8C,
    #1E73E8,
    #0A4D8C 
    );
    backdrop-filter: blur(10px);
    /*background:rgba(10,77,140,0.95);
    backdrop-filter: blur(8px);
    /*display:none;*/

    flex-direction:column;
    align-items:center;
    justify-content: flex-start;
    gap: 40px;
    padding-top: 60px;
    transform: translateY(-120%);
    transition: 0.4s ease;
    pointer-events: none;
  }
 nav.show{
    transform: translateY(0);
    pointer-events: auto;
  }
  nav a{
    /*font-size: 1.5rem;*/
    opacity: 0;
    transform: translateY(20px);
    transition:0.3s;
  }

nav.show a{
  opacity:1;
  transform: translateY(0);
}
nav.show a:nth-child(1) { transition-delay: 0.1s; }
  nav.show a:nth-child(2) { transition-delay: 0.2s; }
  nav.show a:nth-child(3) { transition-delay: 0.3s; }
  nav.show a:nth-child(4) { transition-delay: 0.4s; }
}



@media (max-width: 480px){

/*----------------*/
 header img {
  height: 50px;     /* solo altura */
 width: auto;    /* evita deformación */
max-width: 120px;
}

nav{
  top: 60px;
}
nav a{
  padding: 5px;
}
}