/*---RESET__*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif; /* Define la fuente por defecto */
    background-color: var(--colorLightGray);
}

.body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*-----VARIABLES------*/
:root{
    --colorDarkBlue: #004475;
    --colorOrange: #fa5909;
    --colorLightBlue: #0095e6;
    --colorLightGray: #f8f8f8;
    --colorDarkGray: #e1e1e1;
    --widthMax: 100vw;
}

/*  __    __   _______      ___       _______   _______ .______      
   |  |  |  | |   ____|    /   \     |       \ |   ____||   _  \     
   |  |__|  | |  |__      /  ^  \    |  .--.  ||  |__   |  |_)  |    
   |   __   | |   __|    /  /_\  \   |  |  |  ||   __|  |      /     
   |  |  |  | |  |____  /  _____  \  |  '--'  ||  |____ |  |\  \----.
   |__|  |__| |_______|/__/     \__\ |_______/ |_______|| _| `._____|
*/                                                                   
.header_index{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.header_index nav{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    width: 96vw;
}

/* LOGO */
.header_index nav a{
    margin-left: 1vw;
}
.logo{
    width: 120px;
    margin: 10px;
}

/* MENU CELULAR */
.menu-toggle{
    display: none;
}
.lista-menu-toggle{
    display: none;
}

/* MENU PC */
.div_header_index{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 1vw;
}
.div_header_index a{
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--colorDarkBlue);
    text-decoration: none;
    background-color: transparent;
}
.div_header_index a:hover {
  transform: translateY(-3px);
  /*box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);*/
  transition: 0.3s;
  color: var(--colorOrange);
  opacity: 1;
}

/*     _______.____    __    ____  __  .______    _______ .______      
      /       |\   \  /  \  /   / |  | |   _  \  |   ____||   _  \     
     |   (----` \   \/    \/   /  |  | |  |_)  | |  |__   |  |_)  |    
      \   \      \            /   |  | |   ___/  |   __|  |      /     
  .----)   |      \    /\    /    |  | |  |      |  |____ |  |\  \----.
  |_______/        \__/  \__/     |__| | _|      |_______|| _| `._____|
*/                                                                     
.swiper {
  width: var(--widthMax);     /* ancho del slider */
  height: 40vh;    /* alto del slider */
  overflow: hidden;
}

/* IMAGENES */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 clave */

    mask-image: linear-gradient(to top, var(--colorLightGray), black 30%, black 90%, var(--colorLightGray)),
        linear-gradient(to bottom, transparent, black 30%, black 90%, transparent);
    mask-composite: intersect;
}
.swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.5);
}

/*TEXTO SWIPER*/
.swiper-texto {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-10%, -50%);
    z-index: 10; /* Lo mueve delante del swiper */
    text-align: left;
    
    background-color: transparent;
    color: var(--colorOrange);
    font-size: 36px;
    font-weight: 800;
}
/* EXPERTOS EN */
.leyenda-swiper-1{
    background-color: transparent;
    color: var(--colorOrange);
    font-size: 36px;
    font-weight: 800;
}
/* SISTEMAS DE POTENCIA Y AUTOMATIZACION */
.leyenda-swiper-2{
    background-color: transparent;
    color: var(--colorDarkBlue);
    font-size: 36px;
    font-weight: 800;
}

/* .______     ______    _______  ____    ____ 
   |   _  \   /  __  \  |       \ \   \  /   / 
   |  |_)  | |  |  |  | |  .--.  | \   \/   /  
   |   _  <  |  |  |  | |  |  |  |  \_    _/   
   |  |_)  | |  `--'  | |  '--'  |    |  |     
   |______/   \______/  |_______/     |__|     
*/
/* CONTIENE: SOBRE NOSOTROS, CARDS SERVICIOS, NUESTRA EXPERIENCIA, CARDS EXPERIENCIA*/
.principal{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*height: 40vh;*/
    width: var(--widthMax);
    padding-top: 30px;
    padding-bottom: 30px;
}

/* SOBRE NOSOTROS Y NUESTRA EXPRIENCIA*/
.sub1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80vw;
    padding-top: 20px;
    padding-bottom: 20px;
}
.sub1 h1{
    color: var(--colorDarkBlue);
    background: transparent;
    font-size: 34px;
    font-weight: 800;
    text-align: center;
}
.sub1 p{
    color: var(--colorDarkBlue);
    background: transparent;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

/* CARDS SERVICIOS Y CARDS EXPERIENCIA*/
.sub2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 30px;
    width: 80vw;
}

/* CARDS SERVICIOS */
.cardServicio {
  width: 25vw;
  min-height: 27vh;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.cardServicio h1{
    color: var(--colorDarkBlue);
    background: transparent;
    font-size: 26px;
    font-weight: 800;
}
.cardServicio p{
    color: var(--colorDarkBlue);
    background: transparent;
    font-size: 18px;
    font-weight: 400;
}
.card-icono {
  width: 120px;
  height: 120px;
  margin: 0 auto 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
}
.card-icono img {
  width: 80px;
  height: auto;
  background: transparent;
}
.cardServicio:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}

/* CARD EXPERIENCIA */
.index-experiencia {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  background-color: transparent;
}
.cardExperiencia {
  width: 18vw;
  margin: 10px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.cardExperiencia h1{
    color: var(--colorDarkBlue);
    background: transparent;
    font-size: 40px;
    font-weight: 800;
    text-align: center;
}
.cardExperiencia p{
    color: var(--colorDarkBlue);
    background: transparent;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}
.cardExperiencia:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}

/* BOTON: CONOCE LA EXPERIENCIA DE NUESTRO EQUIPO */
.boton-nosotros{
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px 20px;
  background: var(--colorOrange);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}
.boton-nosotros:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

/*   _______   ______     ______   .___________. _______ .______      
    |   ____| /  __  \   /  __  \  |           ||   ____||   _  \     
    |  |__   |  |  |  | |  |  |  | `---|  |----`|  |__   |  |_)  |    
    |   __|  |  |  |  | |  |  |  |     |  |     |   __|  |      /     
    |  |     |  `--'  | |  `--'  |     |  |     |  |____ |  |\  \----.
    |__|      \______/   \______/      |__|     |_______|| _| `._____|
*/
.footer_index{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--widthMax);
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: var(--colorDarkBlue);
}

/* COMENZA TU PROYECTO CON NOSOTROS */
.footer_index h1{
  background: transparent;
  color: white;
  text-align: center;
  font-size: 34px;
  font-weight: 800;
}

/* CONTACTANOS */
.footer_index p{
  background: transparent;
  color: white;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  padding: 5px;
}

/* FORMULARIO + MAIL Y TELEFONO */
.footer_horiz{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 80vw;
  background-color: transparent;
}

/* MAIL Y TELEFONO */
.footer_info{
  background-color: transparent;
}

/* LINEA */
.footer_index hr{
  width: 80vw;
  margin: 5px;
}

/*   _______   ______   .______      .___  ___. 
    |   ____| /  __  \  |   _  \     |   \/   | 
    |  |__   |  |  |  | |  |_)  |    |  \  /  | 
    |   __|  |  |  |  | |      /     |  |\/|  | 
    |  |     |  `--'  | |  |\  \----.|  |  |  | 
    |__|      \______/  | _| `._____||__|  |__| 
*/
/* FORMULARIO DE CONTACTO */
.contact-form {
  display: flex;
  flex-direction: row;
  background: transparent;
  margin: 20px;
  padding: 20px;
  border-radius: 20px;
}

/* CAMPOS DE TEXTO DEL FORMULARIO */
.contact-form input {
  width: 15vw;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 14px;
  box-sizing: border-box;
}

/* BOTON DEL FORMULARIO*/
.contact-form button {
  width: 10vw;
  margin: 10px;
  padding: 10px;
  border: none;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 20px;
  font-weight: 400;
  background-color: var(--colorOrange);
  color: white;
}
.contact-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

/*____    __    ____  __    __       ___      .___________.     _______.     ___      .______   .______   
  \   \  /  \  /   / |  |  |  |     /   \     |           |    /       |    /   \     |   _  \  |   _  \  
   \   \/    \/   /  |  |__|  |    /  ^  \    `---|  |----`   |   (----`   /  ^  \    |  |_)  | |  |_)  | 
    \            /   |   __   |   /  /_\  \       |  |         \   \      /  /_\  \   |   ___/  |   ___/  
     \    /\    /    |  |  |  |  /  _____  \      |  |     .----)   |    /  _____  \  |  |      |  |      
      \__/  \__/     |__|  |__| /__/     \__\     |__|     |_______/    /__/     \__\ | _|      | _|      
*/
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 55px;
  height: 55px;
  background: #64B161;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.whatsapp-btn img {
  width: 30px;
  background-color: transparent;
}
.whatsapp-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}













/*.__   __.   ______        _______.  ______   .___________..______        ______        _______.
  |  \ |  |  /  __  \      /       | /  __  \  |           ||   _  \      /  __  \      /       |
  |   \|  | |  |  |  |    |   (----`|  |  |  | `---|  |----`|  |_)  |    |  |  |  |    |   (----`
  |  . `  | |  |  |  |     \   \    |  |  |  |     |  |     |      /     |  |  |  |     \   \    
  |  |\   | |  `--'  | .----)   |   |  `--'  |     |  |     |  |\  \----.|  `--'  | .----)   |   
  |__| \__|  \______/  |_______/     \______/      |__|     | _| `._____| \______/  |_______/    
*/
.nosotros {
  width: 100vw;
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.nosotros .titulo{
  width: 60vw;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
  text-align: center;
}

.intro {
  width: 60vw;
  font-size: 18px;
  color: #444;
  margin-bottom: 20px;
}

/* GRID */
.grid-nosotros {
  display: grid;
  width: 60vw;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* CARD */
.card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  text-align: center;

  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: 0.3s;
}
.card:hover {
  transform: translateY(-5px);
}

/* ICONOS */
.icon {
  font-size: 35px;
  margin-bottom: 10px;
  background-color: transparent;
}

/* TITULO CARD */
.card h3 {
  margin-bottom: 10px;
  background-color: transparent;
}

/* TEXTO */
.card p {
  font-size: 15px;
  color: #555;
  background-color: transparent;
}

/* BLOQUE FINAL */
.bloque-final {
  width: 60vw;
  margin: 30px;
  font-size: 18px;
  font-weight: 500;
}














/*______   ______   .__   __. .___________.     ___        ______ .___________.  ______   
 /      | /  __  \  |  \ |  | |           |    /   \      /      ||           | /  __  \  
|  ,----'|  |  |  | |   \|  | `---|  |----`   /  ^  \    |  ,----'`---|  |----`|  |  |  | 
|  |     |  |  |  | |  . `  |     |  |       /  /_\  \   |  |         |  |     |  |  |  | 
|  `----.|  `--'  | |  |\   |     |  |      /  _____  \  |  `----.    |  |     |  `--'  | 
 \______| \______/  |__| \__|     |__|     /__/     \__\  \______|    |__|      \______/  
*/                                                                                          
.contacto {
  width: 100vw;
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contacto .titulo{
  width: 60vw;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
  text-align: center;
}

/* FORMULARIO DE CONTACTO */
.contacto-contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  margin: 20px;
  /*padding: 20px;*/
  border-radius: 20px;
}
/* NOMBRE Y CORREO ELECTRONICO */
.contacto-contact-form input {
  width: 40vw;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 14px;
  box-sizing: border-box;
}
/* MENSAJE */
.contacto-contact-form textarea {
  width: 40vw;
  min-height: 20vh;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 14px;
  box-sizing: border-box;
}
/* BOTON DEL FORMULARIO*/
.contacto-contact-form button {
  width: 20vw;
  margin: 10px;
  padding: 10px;
  border: none;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 20px;
  font-weight: 400;
  background-color: var(--colorOrange);
  color: white;
}
.contacto-contact-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

.contacto-intro{
  /*width: 60vw;*/
  font-size: 18px;
  color: #444;
  /*margin-bottom: 20px;*/
}

.contacto-wpp{
  /*width: 60vw;*/
  font-size: 18px;
  color: #444;
  /*margin-bottom: 20px;*/
}

.contacto-horizontal{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.contacto-whatsapp-btn {
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  margin: 30px;
  background: #64B161;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.contacto-whatsapp-btn img {
  width: 40px;
  background-color: transparent;
}
.contacto-whatsapp-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}














/*   _______. _______ .______      ____    ____  __    ______  __    ______        _______.
    /       ||   ____||   _  \     \   \  /   / |  |  /      ||  |  /  __  \      /       |
   |   (----`|  |__   |  |_)  |     \   \/   /  |  | |  ,----'|  | |  |  |  |    |   (----`
    \   \    |   __|  |      /       \      /   |  | |  |     |  | |  |  |  |     \   \    
.----)   |   |  |____ |  |\  \----.   \    /    |  | |  `----.|  | |  `--'  | .----)   |   
|_______/    |_______|| _| `._____|    \__/     |__|  \______||__|  \______/  |_______/    
*/                                                                                           
.servicios {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  margin: auto;
  text-align: left;
}

.servicios .titulo {
  width: 60vw;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
  text-align: center;
}

.bloque {
  width: 60vw;
  background: white;
  padding: 25px;
  margin-bottom: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.bloque h2 {
  margin-bottom: 15px;
  color: #111;
  background-color: transparent;
}

.bloque h3 {
  margin-top: 15px;
  margin-bottom: 10px;
  color: #00aaff;
  background-color: transparent;
}

.bloque ul {
  padding-left: 20px;
  background-color: transparent;
}

.bloque li {
  margin-bottom: 6px;
  background-color: transparent;
}

.extra {
  margin-top: 15px;
  font-style: italic;
  color: #444;
}

.servicios p{
  background-color: transparent;
}













 /* _______ ___   ___ .______    _______ .______       __   _______ .__   __.   ______  __       ___      
    |   ____|\  \ /  / |   _  \  |   ____||   _  \     |  | |   ____||  \ |  |  /      ||  |     /   \     
    |  |__    \  V  /  |  |_)  | |  |__   |  |_)  |    |  | |  |__   |   \|  | |  ,----'|  |    /  ^  \    
    |   __|    >   <   |   ___/  |   __|  |      /     |  | |   __|  |  . `  | |  |     |  |   /  /_\  \   
    |  |____  /  .  \  |  |      |  |____ |  |\  \----.|  | |  |____ |  |\   | |  `----.|  |  /  _____  \  
    |_______|/__/ \__\ | _|      |_______|| _| `._____||__| |_______||__| \__|  \______||__| /__/     \__\ 
*/                                                                                                       
.experiencia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 65vh;
  /*padding: 20px;*/
}

.experiencia .titulo{
  width: 60vw;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
  text-align: center;
}

.experiencia h2 {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  /*margin-bottom: 20px;*/
  padding: 20px;
}

.experiencia-intro {
  text-align: center;
  width: 60vw;
  /*margin-bottom: 40px;*/
}

/* ===== GRID ===== */
.experiencia-grid {
  display: grid;
  width: 60vw;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 30px;
}

/* ===== CARD ===== */
.card {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #ddd;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  border-color: #00c3ff;
}

.card h3 {
  color: #00c3ff;
  margin-bottom: 10px;
}

.card p {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* ===== FOOTER ===== */
footer {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}










/*  ______       __    __   _______ .______      ____    ____ 
   /  __  \     |  |  |  | |   ____||   _  \     \   \  /   / 
  |  |  |  |    |  |  |  | |  |__   |  |_)  |     \   \/   /  
  |  |  |  |    |  |  |  | |   __|  |      /       \_    _/   
  |  `--'  '--. |  `--'  | |  |____ |  |\  \----.    |  |     
   \_____\_____\ \______/  |_______|| _| `._____|    |__|     
*/
                                                            
@media (max-width: 768px) {
  .sub1{
      width: 80vw;
      padding-top: 5px;
      padding-bottom: 5px;
  }
  .sub2{
      flex-direction: column;
  }
  .cardServicio {
    width: 80vw;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .cardExperiencia {
    width: 38vw;
  }
  .footer_horiz{
    flex-direction: column;
  }
  .contact-form {
    flex-direction: column;
    margin: 5px;
    padding: 10px;
  }
  .contact-form input {
    width: 80vw;
  }
  .contact-form button {
    width: 80vw;
  }
  .header_index{
    height: auto;
  }
  /* MENU CELULAR */
  .div_header_index{
    display: none;
  }
  .menu-toggle{
    display: block;
    margin-right: 3vw;
    font-size: 32px;
    font-weight: 800;
    border: none;
    background: transparent;
    color: var(--colorDarkBlue);
    cursor: pointer;
  }
  .lista-menu-toggle{
    display: none;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    margin-bottom: 20px;
  }
  /* MENU PC */
  .lista-menu-toggle.active{
    display: flex;
  }
  .lista-menu-toggle a{
    font-size: 20px;
    font-weight: 400;
    color: var(--colorDarkBlue);
    text-decoration: none;
    margin: 5px;
  }



  /* NOSOTROS */
  .nosotros .titulo{
    width: 80vw;
  }
  .intro {
    width: 80vw;
  }
  .grid-nosotros {
    width: 80vw;
    grid-template-columns: 1fr;
  }
  /* BLOQUE FINAL */
  .bloque-final {
    width: 80vw;
  }



  /* SERVICIOS */
  .bloque {
    width: 80vw;
  }


  /* EXPERIENCIA */
  .experiencia .titulo{
    width: 80vw;
  }
  .experiencia-intro {
    width: 80vw;
  }
  .experiencia-grid {
    width: 80vw;
    grid-template-columns: 1fr;
  }



  /* CONTACTO */
  .contacto-contact-form input {
  width: 80vw;
  }
  .contacto-contact-form textarea {
    width: 80vw;
  }
  .contacto-contact-form button {
    width: 40vw;
  }
  .contacto-horizontal{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .contacto-wpp{
    width: 80vw;
  }
}