* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      scroll-behavior: smooth;
    }
    
    /* MENÚ DESKTOP */
.menu {
  display: flex;
  list-style: none;
  gap: 20px;
}

.menu-icon {
  display: none; /* OCULTO EN DESKTOP */
}


    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #222;
      padding: 15px 20px;
      z-index: 1000;
    }

    nav ul {
      display: flex;
      list-style: none;
      gap: 20px;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    nav a:hover {
      text-decoration: underline;
    }

    section {
      padding: 100px 40px;
      scroll-margin-top: 80px;
      min-height: 100vh;
    }
    
    #inicio {
      background: url('TSW.png') no-repeat center center/cover;
      background-size: cover;    
      color: #000;
      padding: 100px 40px;
      scroll-margin-top: 80px;
      min-height: 100vh;
        /* 🔥 se adapta a cualquier pantalla */
      
}
    #quienes {
    padding: 60px 40px;
    
    }

  /* CONTENEDOR QUIÉNES SOMOS */
.qs-contenedor {
  display: flex;
  align-items: center;           /* 👈 centra de arriba hacia abajo */
  justify-content: space-between;
  gap: 40px;

  max-width: 1200px;             /* 👈 elimina el espacio blanco exagerado */
  margin: 0 auto;                /* centra el bloque en pantalla */
  padding: 80px 20px;
}

/* TEXTO */
.qs-texto {
  flex: 1;
}

/* IMAGEN */
.qs-imagen {
  flex: 1;
  display: flex;
  justify-content: flex-end;     /* 👈 imagen bien a la derecha */
}

.qs-imagen img {
  max-width: 90%;
  height: auto;
}



    #servicios {
    padding: 60px 40px;
    background-color: black;   /* ← Fondo negro */
    color: white;
}

.servicios-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px; /* Espacio entre imagen y texto */
}

.servicios-imagen {
    flex: 1; /* Ocupa la mitad izquierda */
}

.servicios-imagen img {
    width: 60%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    margin-left: 50px;
}

.servicios-texto h2,
.servicios-texto ul li {
    color: white;
}

.servicios-texto ul {
    padding-left: 20px; /* Para que los puntos no queden pegados al borde */
    line-height: 1.6;
}


   #contacto {
    background-color: white;
    display: flex;
    flex-direction: column;   /* Mantiene el contenido en columna */
    justify-content: center;  /* Centra verticalmente */     /* Centra horizontalmente */
    padding: 40px 20px; 
}

.contacto-contenedor {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.contacto-whatsapp {
    flex: 1;
}

.contacto-whatsapp h2 {
    margin-bottom: 20px; /* MÁS ESPACIO antes del botón */
}

.btn-whatsapp {
    display: inline-block;
    padding: 12px 20px;
    background-color: #25D366;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
}

.contacto-formulario {
    flex: 1;
}

.titulo-form {
    font-size: 24px;
    margin-bottom: 35px; /* Espacio entre título y formulario */
}

.contacto-formulario form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contacto-formulario input,
.contacto-formulario textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font-size: 16px;
}

.contacto-formulario button {
    padding: 12px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.contacto-formulario button:hover {
    background-color: #333;
}

.titulo {
      font-size: 32px;
      margin-bottom: 20px;
      color: white;
      margin-top: 150px;
    }
    .p {
      color: white;
    }


    .btn {
      display: inline-block;
      padding: 10px 20px;
      background: #222;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 20px;
    }

    .btn:hover {
      background: #444;
    }

    #footer {
    background-color: black;
    color: white;
    padding: 40px 20px;
}

.footer-contenedor {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-logo img {
    width: 120px;
    margin-bottom: 10px;
}

.footer-redes a,
.footer-links a {
    display: block;
    color: #f1f1f1;
    text-decoration: none;
    margin: 5px 0;
}

.footer-redes a:hover,
.footer-links a:hover {
    color: #25D366; /* Verde estilo WhatsApp */
}

.footer-horario p {
    margin: 5px 0;
}

.footer-derechos {
    text-align: center;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #444;
    font-size: 14px;
    color: #ccc;
}






@media (max-width: 768px) {

  /* Reducir tamaño general de secciones */
  section {
    padding: 60px 15px;
    min-height: auto;
  }

  /* Inicio (hero) mantiene altura completa */
  #inicio {
    min-height: 100vh;
    padding: 40px 15px;
    background-position: 85% center ; /* mueve la imagen a la izquierda */
    min-height: 70vh;               /* reduce altura en móvil */
  }

  /* Quiénes somos */
  #quienes {
    padding: 40px 15px;
  }

  /* Servicios */
  #servicios {
    padding: 40px 15px;
  }

  /* Contacto */
  #contacto {
    padding: 40px 15px;
  }

  /* Footer */
  #footer {
    padding: 30px 15px;
    
  }
  
  
  .footer-contenedor {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
  }
  
  /* ====== QUIÉNES SOMOS - MOBILE FIX ====== */

.qs-contenedor {
  flex-direction: column;
  text-align: center;
}

/* TEXTO ARRIBA */
.qs-texto {
  order: 1;
}

/* IMAGEN ABAJO */
.qs-imagen {
  order: 2;
  margin-top: 25px;
}

/* IMAGEN RESPONSIVE */
.qs-imagen img {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
  height: auto;
}

  
  /* ====== SERVICIOS - MOBILE FIX ====== */

.servicios-contenedor {
  flex-direction: column;     /* texto arriba, imagen abajo */
  text-align: center;
}

/* TEXTO ARRIBA */
.servicios-texto {
  order: 1;
}

/* IMAGEN ABAJO */
.servicios-imagen {
  order: 2;
  margin-top: 25px;
}

/* IMAGEN CORREGIDA */
.servicios-imagen img {
  width: 100%;        /* ocupa el ancho disponible */
  max-width: 300px;   /* controla proporción */
  margin: 0 auto;     /* centra */
  display: block;
  height: auto;
}

/* TEXTO MÁS COMPACTO EN MÓVIL */
.servicios-texto h2 {
  font-size: 22px;
}

.servicios-texto ul li {
  font-size: 15px;
  line-height: 1.5;
}
 
  nav {
    padding: 10px;
  }

  /* SECCIONES GENERALES */
  section {
    padding: 80px 20px;
  }
  
 
  .btn {
    margin-top: 200px; /* baja el botón */
  }

  /* TÍTULOS */
  .titulo {
    font-size: 26px;
    margin-top: 80px;
  }

/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  z-index: 1000;
}

.menu {
  display: flex;
  list-style: none;
  gap: 20px;
}

/* ICONO */
.menu-icon {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.menu-icon span {
  width: 25px;
  height: 3px;
  background: white;
}

  .menu-icon {
    display: flex;
  }

  .menu {
    position: fixed;
    top: 65px;
    left: 0;
    width: 100%;
    height: calc(100vh - 65px);
    background: #222;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
  }

  .menu.active {
    display: flex;
  }

  .menu li a {
    padding: 15px;
    font-size: 20px;
  }
  .contacto-contenedor {
  flex-direction: column;
  align-items: center;
}

.contacto-formulario {
  width: 100%;
  max-width: 100%;
}

  

}

@media (min-width: 1600px) {
  .qs-contenedor,
  .servicios-contenedor,
  .contacto-contenedor,
  .footer-contenedor {
    max-width: 1300px;
  }
}