/* ------ FONTS IMPORTS ------- */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ------ STYLE ------- */

/* Estilos generales para el documento HTML */
html{
    scroll-behavior: smooth;
    font-size: 16px;
  }
  
  body{
    font-family: 'Barlow', sans-serif;
    overflow-x: hidden !important;

    background-color: white;
}

/* Margenes para el contenido de la página */
.content{
  margin-top: var(--height-header);
  margin-left: var(--width-sidebar);
}

/* Centrado de elementos */
.center-elements{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Justificado de texto */
.texto-justificado{
  text-align: justify;
}
  
/* ------ VARIABLES ------- */

  :root {
    --height-header: 4rem;
    --width-sidebar: 200px;
  }

/* -------- titles --------- */

/* Establece el tamaño de fuente del encabezado en 0.875 rem (14 píxeles) */
.header-text{
  font-size: 0.875rem; /* 14 px*/
  font-weight: 600;
}

/* Estilos titulos */
/* (Para todos los titulso siguiejntes se les aplica un tamaño de fuente adaptable utilizando la función clamp()*/
/* que asegura que el tamaño de fuente se mantenga entre los valores dados, dependiendo del tamaño de la ventana gráfica (viewport width)) */

.titulo1-bold{
  font-size: clamp(4rem, calc(4rem + ((1vw - 0.48rem) * 0.5556)), 4.4rem);
  font-weight: 600;
}

.titulo2-bold{
  font-size: clamp(3rem, calc(3rem + ((1vw - 0.48rem) * 0.5556)), 3.4rem);
  font-weight: 600;
}

.titulo3-bold{
  font-size: clamp(2.5rem, calc(2.5rem + ((1vw - 0.48rem) * 0.5556)), 2.9rem);
  font-weight: 600;
}

.titulo4-bold{
  font-size: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 0.5556)), 2.4rem);
  font-weight: 600;
}

.titulo5-bold{
  font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.5556)), 1.9rem);
  font-weight: 600;
}

.titulo6-bold{
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.5556)), 1.4rem);
  font-weight: 600;
}

.titulo7-bold{
  font-size: clamp(0.5rem, calc(0.5rem + ((1vw - 0.48rem) * 0.5556)), 0.9rem);
  font-weight: 600;
}


.titulo1-medium{
  font-size: clamp(4rem, calc(4rem + ((1vw - 0.48rem) * 0.5556)), 4.4rem);
  font-weight: 500;
}

.titulo2-medium{
  font-size: clamp(3rem, calc(3rem + ((1vw - 0.48rem) * 0.5556)), 3.4rem);
  font-weight: 500;
}

.titulo3-medium{
  font-size: clamp(2.5rem, calc(2.5rem + ((1vw - 0.48rem) * 0.5556)), 2.9rem);
  font-weight: 500;
}

.titulo4-medium{
  font-size: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 0.5556)), 2.4rem);
  font-weight: 500;
}

.titulo5-medium{
  font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.5556)), 1.9rem);
  font-weight: 500;
}

.titulo6-medium{
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.5556)), 1.4rem);
  font-weight: 500;
}

.titulo7-medium{
  font-size: clamp(0.5rem, calc(0.5rem + ((1vw - 0.48rem) * 0.5556)), 0.9rem);
  font-weight: 500;
}


.titulo1{
  font-size: clamp(4rem, calc(4rem + ((1vw - 0.48rem) * 0.5556)), 4.4rem);
  
}

.titulo2{
  font-size: clamp(3rem, calc(3rem + ((1vw - 0.48rem) * 0.5556)), 3.4rem);
  
}

.titulo3{
  font-size: clamp(2.5rem, calc(2.5rem + ((1vw - 0.48rem) * 0.5556)), 2.9rem);
  
}

.titulo4{
  font-size: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 0.5556)), 2.4rem);
}

.titulo5{
  font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.5556)), 1.9rem);
}

.titulo6{
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.5556)), 1.4rem);
}

.titulo7{
  font-size: clamp(0.5rem, calc(0.5rem + ((1vw - 0.48rem) * 0.5556)), 0.9rem);
}




  /* -------- botones --------- */

  /* Configuracion boton principal */
  .main_button{
    background-color: #DF2112 !important;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    text-decoration: none !important;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Cambia el color de fondo del botón principal al pasar el mouse sobre él */
  .main_button:hover{
    background-color: #b71a0e !important;
    border-radius: 5px;
    color: white;
    font-weight: 600;
  }
  
  /* Configuracion botón secundario */
  .secondary_button{
    background-color: #afafaf !important;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    text-decoration: none !important;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Cambia el color de fondo del botón secundario al pasar el mouse sobre él */
  .secondary_button:hover{
    background-color: #a0a0a0 !important;
    border-radius: 5px;
    color: white;
    font-weight: 600;
  }

  /* Configuración del botón principal */
  .main_button_blanco{
    background-color: white !important;
    border-radius: 5px;
    color: #DF2112;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    text-decoration: none !important;
    border: 1px solid #cccccc; /* Borde delgado gris */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Cambia el color de fondo del botón principal al pasar el mouse sobre él */
  .main_button_blanco:hover{
    background-color: white !important;
    border-radius: 5px;
    color: #b71a0e;
    font-weight: 600;
    border: 1px solid #b71a0e; /* Cambia el borde a un tono más oscuro de rojo */
  }