* {box-sizing: border-box; font-family: "all-round-gothic"; }

header, footer {width: 100%;}

body , main{ width: 100%; padding: 30px; font-weight: 500; margin: 0; }

@media (max-width: 768px) { body {padding: 8px;}}


/* EMPIEZA EL HEADER MAS EL RESPONSIVE */

.logo-container {
  flex-shrink: 1;
  max-width: 30%;
  display: flex;
  align-items: center;
}

.logo {
  width: 100%;
  max-width: 300px;
  height: auto;
}

nav, .menu { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%;
  flex-wrap: wrap; /* Permite que se acomode todo si no hay espacio */
  gap: 10px;
  padding: 0 20px;
}

.nav-links, .nav-links-erp { 
  margin: 0; 
  display: flex; 
  gap: clamp(10px, 2vw, 40px); 
  list-style: none; 
  flex-wrap: wrap; 
  align-items: center;
}

.nav-links {
  padding: 10px clamp(20px, 4vw, 50px);
  border-radius: 30px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.341), 
              inset 8px 5px 20px 2px rgba(255,255,255,0.52); 
}

.nav-links a { 
  color: #353535; 
  font-size: clamp(14px, 1.2vw, 20px); 
  font-weight: 500; 
  text-decoration: none; 
}

.button--helpdesk, .button--loginerp, .login-button {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fafafa;
  text-decoration: none;
  font-size: clamp(14px, 1.2vw, 20px);
  border-radius: 30px;
  padding: 0.6em 1.5em;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.341), 
              inset 8px 5px 20px 2px rgba(255,255,255,0.092);
  transition: all 0.3s ease;
}

.button--helpdesk { 
  background-color: #0010C2; 
  cursor: pointer;
}
.button--loginerp, .login-button {
    background-color: #FF6427;
    cursor: pointer;
}

.hamburguer { 
  display: none; 
  flex-direction: column; 
  cursor: pointer; 
}
.bar { 
  width: 25px; 
  height: 3px;
  margin: 3px;
  background-color: #0010C2; 
  transition: 0.3s; 
}

.nav-links a:hover{
  
  color: #FF6427;
}

.button--helpdesk:hover{
background-color: #3041ff;
}
.cta--button:hover, .button--loginerp:hover, .login-button:hover{
 background-color: #ff8859;  
}

/* RESPONSIVE */
@media (max-width: 980px) {
  nav { 
    justify-content: space-between; 
    position: relative; 
  }

  .menu { 
    margin: 0; 
  }

  .logo {
    min-width: 180px;
  }

  .nav-links, .nav-links-erp { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    flex-direction: column; 
    text-align: center; 
    background-color: white; 
    z-index: 1000; 
  }

  .nav-links.show { 
    display: flex; 
    margin: 0; 
    padding-top: 20px; 
    gap: 0; 
    border-radius: 30px 30px 0 0;
    box-shadow: -1px -1px 5px 0px rgba(0, 0, 0, 0.307); 
  }

  .nav-links-erp.show { 
    display: flex; 
    top: calc(100% + 150px); 
    box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.307);
    padding: 20px 0; 
    gap: 10px; 
    border-radius: 0 0 30px 30px;
  }

  .nav-links li, .nav-links-erp li { 
    margin: 3px 0; 
  }

  .nav-links li {
    padding: 8px 0; 
  }

  .nav-links a {
    font-size: 18px; /* ← Fijo y legible en móviles */
  }

  .hamburguer { 
    display: flex; 
  }

  .button--helpdesk, .button--loginerp { 
    width: 100%;
    margin: 10px auto;
    padding: 12px 20px;
    font-size: 18px; /* ← También fijo y legible */
  }
}

/* ACABA EL HEADER MAS EL RESPONSIVE */

/* EMPIEZA EL DIV INTRO */

.introbox{
  display: flex;
  flex-direction: column;
  background: url('/assets/imagenes/Tourdig/backgroundtour.jpg') no-repeat center center / cover;
  padding: 20px;
  border-radius: 30px;
  box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.307);
  margin-bottom: 40px;
}
.shadow{
  padding: 100px;
  border-radius: 30px;
  background-color: #c14b1c3d;
  padding: 20px;
}
.titletour{
  font-size: 70px;
  font-weight: 500;
  margin: 0;
  color: #fafafa;
}
.subtitletour{
  font-size: 35px;
  font-weight: 500;
  color: #fafafa;
  margin: 20px 0;
}
.paragraphtour{
  font-size: 20px;
  color: #fafafa;
  width: 80%;
  margin: 0;
}

@media (max-width: 850px){
.introbox{
  text-align: center;
   margin-bottom: 10px;
  
}
.shadow{
  padding: 20px;
}
.titletour{
  font-size: 32px;
  font-weight: 600;
}
.subtitletour{
  font-size: 20px;
  font-weight: 600;
}
.paragraphtour{
  font-size: 16px;
  width: 100%;
}
}

/* ACABA EL DIV INTRO */

.boxcontabilidad, .boxfinanzas, .boxventas, .boxcompras{
    padding: 40px;
    margin-top: 30px;
    border-radius: 30px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.341), 
              inset 8px 5px 20px 2px rgba(255,255,255,0.52);
    display: flex; flex-direction: column; align-items: center; text-align: center;
     
}
.boxcontabilidad{background: url('/assets/imagenes/Contabilidad/contabilidad.png') no-repeat center center / cover ;}
.boxfinanzas{background: url('/assets/imagenes/Tesoreria/tesoreria.jpg') no-repeat center center / cover ;}
.boxventas{background: url('/assets/imagenes/Ventas/ventas.jpg') no-repeat center center / cover ;}
.boxcompras{background: url('/assets/imagenes/Compras/Compras.jpg') no-repeat center center / cover ;}

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

.carousel{
    max-width: 1600px;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.341), 
              inset 8px 5px 20px 2px rgba(255,255,255,0.52);
    background-color: #fafafaaf;
    display: flex; align-items: center;
}

.title-white{
  color: #fafafa !important;
}

.subtitle-white{
   color: #fafafa !important;
}
.title{
   font-size: 50px;
   color: #000B81;
   margin-bottom: 25px;
   
}
.subtitle{
    display: flex;
    align-content: center;
    font-size: 22px;
    width: 70%;
    margin-bottom: 25px;
}

.information{
font-size: 20px;
}
.carousel-control-prev-icon, .carousel-control-next-icon{
   background-color: #000B81;
   border-radius: 100%;
   padding: 10px;
}

/* EMPIEZA EL FOOTER */

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 30px;
  border-radius: 30px;
  margin-top: 30px;
  background-color:#FF6427;
  color: #fafafa;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.341), inset 8px 5px 20px 2px rgba(255, 255, 255, 0.52);
}
.information{
  display: flex;
  flex-direction: column;
  text-align: center;
}
.contact{
  text-align: center;
}

.footerbutton, .footerbuttonhover{
   all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 20px;
  
  
}

.footerbuttonhover:hover{
  font-weight: 600;
}

.socialmediaicons{
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 10px;
  gap: 20px;
}
.redesicon{
cursor: pointer;
width: 25px;
transition: width 0.2s ease;
}
.redesicon:hover{
  width: 30px;
}

.logofooter{
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 16px;
  max-width: 300px;
}
.footer-title{
  margin: 0;
  padding: 20px 0;
  font-size: 25px;
}
.footerbutton{
  font-size: 20px;
}

@media (max-width: 850px){
  footer{
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .footer-title{font-size: 20px}
  .footerbutton{font-size: 18px;}
}