body{ margin: 0;
    font-family: sans-serif;
  
    }

.Contenedor {
    display: grid;
    grid-template-columns: repeat(5, 20% 20% 20% 20% 20%);
    grid-template-rows: auto;
    grid-template-areas:
      "header header header header header"
      "portada portada portada portada portada"
     
      "staff staff staff staff staff"
      "beneficios beneficios beneficios beneficios beneficios"
      "testimonio testimonio testimonio testimonio testimonio"
      "proceso proceso proceso proceso proceso"
      "footer footer footer footer footer"
   
      
      ;
      
  }
  
  .header {
    grid-area: header;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
     position: fixed;        /* 👈 Fija la barra arriba */
  top: 0;
  left: 0;
  width: 95%;            /* Asegura que ocupe todo el ancho */
  z-index: 1000;          /* Que quede por encima del resto */
  }
  
  .logo {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  nav {
    display: flex;
    gap: 1rem;
  }
  
  nav a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-weight: 700;
    padding: 10px;
    border-radius: 5px;
  }

  nav a:hover {
    background-color: #e73a0a;
    color: white;
  }
  
  .menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
  }
  
  .menu-toggle span {
    height: 3px;
    background: white;
    margin: 4px 0;
    width: 25px;
    border-radius: 2px;
  }
  
  .nav-links {
    display: flex;
    gap: 1.5rem;
  }

  .Contenedor .portada {
    grid-area: portada;
    background-image: url('img/16.png'); /* Cambiá por tu imagen */
    background-size: cover;
    background-position: center;
    height: 100vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
  }
  
  .Contenedor .contenido-portada {
    background: rgba(0, 0, 0, 0.5); /* oscurece para mejorar la lectura */
    padding: 2rem;
    border-radius: 12px;
    width: 100%;
    height:30vh;
    margin-top: 200px;
  }
  
  .Contenedor .contenido-portada h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .Contenedor .contenido-portada p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }
  
  .Contenedor .boton {
    display: inline-block;
    background: #00b894;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.3s;
  }
  
  .Contenedor .boton:hover {
    background: #019875;
  }


 


/*STAFF*/

.staff {
    grid-area: staff;
    padding: 3rem 1rem;
    background-color: #f4f4f4;
    color: #333;
  }
  
  .staff-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .staff-texto {
    flex: 1 1 400px;
  }
  
  .staff-texto h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .staff-texto p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  .staff-imagen {
    flex: 1 1 300px;
    text-align: center;
  }
  
  .staff-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }


/*Beneficios*/
.beneficios { grid-area: beneficios;
  padding: 60px 20px;
  background: linear-gradient(to right, #f3f4f6, #e5e7eb);
  text-align: center;
}

.beneficios h2 {
  font-size: 2.5rem;
  color: #1f2937;
  margin-bottom: 10px;
}

.beneficios p {
  font-size: 1.1rem;
  color: #4b5563;
  margin-bottom: 40px;
}

.beneficios-contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.beneficio {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 30px 25px;
  width: 300px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  border-top: 6px solid #3b82f6;
}

.beneficio:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.beneficio:nth-child(2) {
  border-top-color: #8b5cf6;
}
.beneficio:nth-child(3) {
  border-top-color: #f59e0b;
}

.beneficio h3 {
  font-size: 1.4rem;
  color: #111827;
  margin-bottom: 15px;
}

.beneficio ul {
  list-style: none;
  padding-left: 0;
  text-align: left;
}

.beneficio ul li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.beneficio ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}

/*Testimonios*/

.testimonios {grid-area: testimonio;
  padding: 60px 20px;
  background-color: #f9fafb;
  text-align: center;
}

.testimonios h2 {
  font-size: 2.5rem;
  color: #1f2937;
  margin-bottom: 10px;
}

.testimonios p {
  font-size: 1.1rem;
  color: #4b5563;
  margin-bottom: 40px;
}

.testimonios-contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.testimonio {
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 30px;
  max-width: 300px;
  text-align: left;
  transition: transform 0.3s ease;
}

.testimonio:hover {
  transform: translateY(-10px);
}

.testimonio img {
  width: 280px;
  height: 200px;
  border-radius: 5%;
  object-fit: cover;
  margin-bottom: 15px;
}

.testimonio h3 {
  font-size: 1.1rem;
  color: #111827;
  margin-bottom: 10px;
}

.testimonio p {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.5;
}



/* proceso*/

.proceso {
    grid-area: proceso;
    padding: 3rem 1rem;
    background-color: #ffffff;
    color: #333;
  }
  
  .proceso-contenido {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .proceso-imagen {
    flex: 1 1 400px;
    text-align: center;
  }
  
  .proceso-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .proceso-texto {
    flex: 1 1 500px;
  }
  
  .proceso-texto h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .proceso-texto ul {
    list-style-type: disc;
    padding-left: 1.5rem;
  }
  
  .proceso-texto li {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
  }


/*botones proceso*/
.botones-proceso {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.boton {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.boton.chat {
  background-color: #10b981;
  color: white;
}

.boton.chat:hover {
  background-color: #059669;
  transform: translateY(-2px);
}

.boton.ver-mas {
  background-color: #3b82f6;
  color: white;
}

.boton.ver-mas:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
}

.main-footer {
  grid-area: footer; /* ← Definimos el área del grid */
  background-color: #222;
  color: #fff;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  border-top: 5px solid rgb(255, 81, 0);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.footer-section h4 {
  margin-bottom: 10px;
  color: rgb(255, 81, 0);
}

.footer-section a {
  color: #ccc;
  text-decoration: none;
  display: inline-block;
  margin: 5px 0;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: #fff;
}

.whatsapp-btn,
.call-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
}

.whatsapp-btn {
  background-color: #25D366;
  color: white;
}

.call-btn {
  background-color: #0a74da;
  color: white;
}

.footer-bottom {
  text-align: center;
  font-size: 14px;
  color: #aaa;
  border-top: 1px solid #444;
  padding-top: 15px;
}




  /* Responsive */
  @media (max-width: 768px) {
    
    
    .nav-links {
      display: none;
      flex-direction: column;
      background-color: #ffffff;
      position: absolute;
      top: 70px;
      right: 0;
      width: 60%;
      text-align: center;
      padding:2;
    }
  
    .nav-links.active {
      display: flex;
    }
  
    .menu-toggle {
      display: flex;
    }
  
    nav {
      flex-direction: column;
      align-items: flex-end;
    }



    .Contenedor .contenido-portada {
        background: rgba(0, 0, 0, 0.5); /* oscurece para mejorar la lectura */
        padding: 2rem;
        border-radius: 12px;
        width: 90%;
        height:30vh;
        margin-top: 200px;
        
      }

      
    .Contenedor .contenido-portada h1 {
        font-size: 25px;
 
  }
  .header {
    grid-area: header;
    background-color: #c0c0c0;
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
     position: fixed;        /* 👈 Fija la barra arriba */
  top: 0;
  left: 0;
  width: 90%;            /* Asegura que ocupe todo el ancho */
  z-index: 1000;          /* Que quede por encima del resto */
  }




}