.borde-salzillo {
  width: 98%;
  max-width: 1600px;
  margin-inline: auto;
  margin-block: 20px;
  position: relative;
}

/** INDEX **/
.header .container {
  max-width: 100%;
  margin-left: 0px;
}

.botones-header {
  margin-block: auto;
  width: 100px;
  height: auto;
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.botones-header svg {
  height: 25px;
  width: auto;
  object-fit: cover;
  margin-top: 10px;
}

.header.active .botones-header .cls-1 {
  fill: #00419d;
}

.hero-index {
  border-radius: 20px;
  background-color: #001c3c;
  width: 100%;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.imagen-hero {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.imagen-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adornos-imagen {
  position: absolute;
  left: 88%;
  top: 85%;
}
.adornos-imagen img {
  width: 60px;
}

.contenido-hero {
  color: #eeecec;
  width: 65%;
  margin-inline: auto;
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.contenido-hero h3 {
  font-size: 6.5rem;
}

.contenido-hero img {
  width: 85%;
  margin-top: -10px;
  margin-inline: auto;
}

.contenido-hero p {
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 600;
  margin-inline: auto;
}

.impulsar-seccion {
  background-color: #00419d;
  margin-block: 30px;
  width: 100%;
  height: 450px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-impulsar img {
  width: 300px;
  margin-inline: auto;
}

.impulsar-contenido {
  width: 60%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
}

.impulsar-contenido p {
  color: #eeecec;
  font-size: 4.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  margin-block: 20px;
}

.boton-impulsar a {
  width: 150px;
  font-size: 1.8rem;
  font-weight: 600;
  margin-inline: auto;
  color: #eeecec;
  text-align: center;
  border: 1px solid #eeecec;
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
}

.boton-impulsar a:hover {
  background-color: #ffffff;
  color: #00419d;
}

.impulsar-contenido img {
  width: 100px;
}

#espejo {
  transform: rotate(180deg);
}

.empleados-seccion {
  background-color: #eeecec;
  width: 100%;
  height: 350px;
  margin-top: 30px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards-empleado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.empleado-card {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 180px;
  border-radius: 20px;
  background-color: #ffffff;
}

.empleado-card img {
  margin-left: 10px;
  width: 120px;
  height: 150px;
  object-fit: cover;
}

.contenido-card {
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contenido-card p {
  text-align: justify;
  font-size: 1.1rem;
  line-height: 1.2;
}

.contenido-card p b {
  font-size: 1.8rem;
  color: #00419d;
}

.estrellas {
  display: flex;
  flex-direction: row;
  color: #cfcfcf;
}

.estrellas p {
  font-size: 2rem;
}

.estrella-a {
  color: #0257bc;
}

.merch-index {
  width: 95%;
  margin-inline: auto;
}

.titulo-merch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  color: #4e4e4e;
  font-size: 3.2rem;
}

.titulo-merch svg {
  width: 180px;
  fill: #00419d;
}

.titulo-merch .cls-1 {
  fill: #00419d;
}

.header .cls-1 {
  fill: #ffffff;
}

.boton-merch-index a {
  color: #00419d;
  width: 200px;
  font-size: 1.2rem;
  text-align: center;
  padding-block: 8px;
  font-weight: 600;
  margin-inline: auto;
  border-radius: 20px;
  border: 1px solid #00419d;
  margin-bottom: 20px;
  transition: all 0.5s ease-in-out;
}

.boton-merch-index a:hover {
  background-color: #00419d;
  color: #ffffff;
}

.btn-prev svg,
.btn-next svg {
  width: 20px;
  transition: all 0.3s ease-in-out;
}

.btn-prev svg {
  transform: rotate(180deg);
}

.btn-prev .cls-1 {
  fill: #4e4e4e;
}

.btn-next .cls-1 {
  fill: #4e4e4e;
}

.btn-prev svg:hover {
  cursor: pointer;
  transform: rotate(180deg) scale(1.2);
}

.btn-prev svg:hover .cls-1 {
  fill: #5c5c5c;
}

.btn-next svg:hover {
  cursor: pointer;
  transform: scale(1.2);
}

.btn-next svg:hover .cls-1 {
  fill: #5c5c5c;
}

.slider-container {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  align-items: center;
  margin-block: 20px;
}

.slider-wrapper {
  height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: calc(280px * 3 + 100px * 2);
}

.slider-merch {
  display: flex;
  flex-direction: row;
  gap: 100px;
  will-change: transform;
}

.slide-merch {
  flex-shrink: 0;
  position: relative;
  width: 280px;
  height: 340px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  transition: all 0.6s ease-in-out;
  padding-block: 20px;
}

.slide-merch:hover {
  transform: translateY(-10px);
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.logo svg {
  margin-bottom: -10px;
}

.slide-merch img {
  margin-inline: auto;
  width: 250px;
  height: 250px;
  border-radius: 20px;
  margin-bottom: 10px;
  object-fit: cover;
  margin-top: 30px;
}

.slide-merch h4 {
  margin-left: 10px;
  color: #00419d;
  font-size: 1.5rem;
}

.slide-merch p {
  margin-left: 10px;
  color: #4e4e4e;
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.best-seller {
  position: absolute;
  top: -10%;
  left: 72%;
}

.best-seller img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.imagen-video-online {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.imagen-video-online img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reproductor {
  position: absolute;
  left: 82%;
  top: 80%;
}

.reproductor img {
  width: 60px;
  height: 60px;
}

.liderazgo-online {
  border-radius: 20px;
  background-color: #00419d;
  width: 50%;
  height: 100%;
  position: relative;
}

.don-salzillo {
  left: 65%;
  top: 30%;
  position: absolute;
}

.don-salzillo img {
  width: 200px;
}

.contenido-liderazgo {
  width: 100%;
  height: 100%;
  padding-left: 10%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contenido-liderazgo h3 {
  font-size: 4.5rem;
}

.contenido-liderazgo p {
  width: 300px;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.2;
}

.contenido-liderazgo img {
  width: 180px;
}

.contenido-liderazgo a {
  margin-top: 60px;
  width: 120px;
  font-weight: 600;
  text-align: center;
  border: 1px solid #ffffff;
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
}

.contenido-liderazgo a:hover {
  background-color: #ffffff;
  color: #00419d;
}

.slide-container-online {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 1400px;
  margin: 0 auto;
}

.btn-next-on,
.btn-prev-on {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s;
}

.btn-next-on:hover,
.btn-prev-on:hover {
  opacity: 0.7;
}

.btn-prev-on img,
.btn-next-on img {
  width: 20px;
  height: auto;
  object-fit: cover;
}

.btn-next-on {
  left: 95%;
  top: 45%;
}

.btn-prev-on {
  transform: rotate(180deg);
  top: 45%;
  left: 3.5%;
  z-index: 5;
}

.slider-wrapper-online {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.slider-online {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.slide-online {
  margin-block: 50px;
  min-width: 100%;
  flex-shrink: 0;
  height: 480px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 0 2.5%;
  box-sizing: border-box;
}

/** CURSOS **/
.container-cursos {
  width: 100%;
  background-color: #001c3c;
  border-radius: 20px;
  min-height: 400px;
  text-align: center;
  color: #ffffff;
}

.container-cursos h1 {
  padding-top: 120px;
}

.contenedor-cursos {
  padding-block: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.card-curso {
  width: 530px;
  height: 450px;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
  transition: all 0.3s ease-in-out;
}

.card-curso:hover {
  transform: scale(1.03);
}

.imagen-curso {
  position: relative;
}

.card-curso img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.icono-play {
  position: absolute;
  left: 86%;
  top: 75%;
}

.icono-play img {
  width: 50px;
  height: 50px;
}

.contenido-curso {
  width: 90%;
  margin-inline: auto;
  color: #00419d;
}

.contenido-curso h3 {
  font-size: 2.5rem;
  margin-top: 10px;
  line-height: 1.2;
  margin-bottom: 15px;
}

.contenido-curso p {
  color: #3f3f3f;
  margin-top: -10px;
}

.linea-curso {
  width: 100%;
  border-bottom: 1px solid #3f3f3f;
  margin-top: 5px;
  margin-bottom: 15px;
}

.datos-curso {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.datos-curso p {
  color: #5c5c5c;
  margin-top: 0px;
  font-weight: 700;
}

.datos-curso p b {
  color: #00419d;
  font-weight: 500;
  font-size: 1.6rem;
}

.paginacion img {
  width: 5px;
}

.paginacion {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.paginacion p {
  border: 1px solid #ffffff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 1.4rem;
}

.paginacion p.activa {
  transform: scale(1.2);
}

.paginacion p:hover {
  cursor: pointer;
}

.btn-paginacion-prev {
  transform: rotate(180deg);
}

.numero {
  display: flex;
  align-items: center;
  gap: 10px;
}

.num-pagina {
  cursor: pointer;
  user-select: none;
}

.num-pagina.puntos {
  pointer-events: none;
  cursor: default;
}

/** PRODUCTOS **/
.contenedor-productos {
  width: 65%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 80px;
}

.tabla-productos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
}

.card-producto {
  width: 320px;
  height: 360px;
  background-color: #ffffff;
  border-radius: 20px;
  margin-inline: auto;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  margin-bottom: 80px;
  cursor: pointer;
}

.card-producto:hover {
  transform: translateY(-10px);
  cursor: pointer;
}

.producto-sal-imagen {
  width: 100%;
  height: 80%;
  position: relative;
}

.producto-sal-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto-sal-contenido {
  display: flex;
  flex-direction: row;
  height: 20%;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-inline: auto;
}

.container-contenido-sal {
  text-align: left;
}
.container-contenido-sal p {
  color: #3f3f3f;
  height: 20px;
  font-size: 1.2rem;
}

.container-contenido-sal p b {
  text-align: left;
  color: #0257bc;
  font-weight: 700;
}

.container-contenido-sal span {
  color: #3f3f3f;
  font-size: 1.2rem;
  font-weight: 600;
}

.precio-contenido-sal a {
  width: 80px;
  border: 1px solid #0257bc;
  border-radius: 20px;
  color: #0257bc;
}

.precio-contenido-sal p {
  font-size: 1rem;
  font-weight: 400;
  margin-block: -2px;
}

.precio-contenido-sal p b {
  margin-right: 2px;
  font-weight: 400;
  font-size: 1.6rem;
}

.best-seller-producto {
  position: absolute;
  top: 5%;
  left: 75%;
}

.best-seller-producto img {
  width: 60px;
  height: 60px;
}

/** ABOUT US **/
.fondo-claro .header {
  border-bottom: 1px solid #0257bc;
  color: #00419d;
}

.fondo-claro .botones-header .cls-1 {
  fill: #00419d;
}

.fondo-claro .nav-open-btn {
  color: #00419d;
}

.fondo-claro .navbar-link {
  color: #00419d;
}

.fondo-claro .logo .cls-1 {
  fill: #00419d;
}

.hero-about {
  border-radius: 20px;
  background-color: #eeecec;
  width: 100%;
  height: 600px;
}

.contenido-hero-about {
  color: #00419d;
}

.texto-about {
  height: 80%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}

.texto-about h2 {
  color: #00419d;
  font-size: 6.8rem;
}

.texto-about svg {
  width: 400px;
  margin-top: -10px;
}

.texto-about p {
  margin-top: 10px;
  font-size: 1.7rem;
  font-weight: 600;
  color: #00419d;
}

.salzillo-hero-about {
  height: 92%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: end;
}

.salzillo-hero-about img {
  width: 370px;
  height: auto;
  object-fit: cover;
}

.container-hero-about .cls-1 {
  fill: #00419d;
}

.container-hero-about {
  width: 90%;
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.acerca-de {
  width: 100%;
  height: 600px;
  background-color: #001c3c;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-acerca {
  width: 80%;
  max-width: 850px;
  height: 400px;
  border: 1px solid #ffffff;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.texto-acerca {
  width: 60%;
  height: 100%;
  background-color: #ffffff;
}

.imagen-acerca {
  width: 40%;
  display: flex;
}

.imagen-acerca img {
  width: 80%;
  margin: auto;
  border-radius: 10px;
}

.texto-acerca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.titulo-acerca {
  display: flex;
  flex-direction: row;
  gap: 5px;
  color: #3f3f3f;
  font-size: 1.9rem;
}

.titulo-acerca .cls-1 {
  fill: #00419d;
}

.titulo-acerca svg {
  width: 110px;
}

.puntos-acerca img {
  width: 50px;
  margin-top: 30px;
}

.descripcion-acerca {
  width: 80%;
  text-align: center;
  margin-block: 20px;
  font-weight: 700;
  color: #3f3f3f;
  font-size: 2.1rem;
  line-height: 1.2;
}

.descripcion-acerca p b {
  color: #00419d;
  font-weight: 700;
}

/** CURSOS **/
.hero-contacto {
  border-radius: 20px;
  background-color: #eeecec;
  width: 100%;
  height: 850px;
  margin-bottom: 20px;
}

.imagen-titulo-contacto {
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagen-titulo-contacto svg {
  width: 350px;
  margin-top: 50px;
}

.imagen-titulo-contacto .cls-1 {
  fill: #00419d;
}

.seccion-formulario {
  width: 75%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.texto-form {
  width: 410px;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.container-form {
  position: relative;
}

.cara-salzillo {
  position: absolute;
  left: 85%;
  top: 82%;
}

.cara-salzillo img {
  width: 80px;
}

.formulario-contacto {
  background-color: #ffffff;
  width: 390px;
  height: 380px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.texto-form h2 {
  font-size: 4.5rem;
  color: #00419d;
}

.subtitulo-linea {
  border-bottom: 1px solid #00419d;
  width: 100%;
  max-width: 350px;
  margin-top: -5px;
  margin-bottom: 15px;
}

.texto-form p {
  width: 85%;
  max-width: 300px;
  font-weight: 700;
  font-size: 1.8rem;
  margin-block: 6px;
  line-height: 1.2;
}

.texto-form p b {
  font-weight: 700;
  color: #00419d;
}

.formulario-contacto textarea {
  width: 100%;
  height: 120px;
  border-radius: 20px;
  padding-inline: 10px;
  padding-block: 10px;
  font-family: "Poppins", sans-serif;
}

.formulario-contacto label {
  color: #00419d;
  font-size: 1rem;
  margin-left: 10px;
}

.formulario-contacto input {
  border: 1px solid #5c5c5c;
  height: 35px;
  border-radius: 8px;
  font-size: 1.3rem;
  padding-left: 10px;
}

.redes-sociales-contacto {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.version-contacto svg {
  width: 150px;
  margin-bottom: 10px;
}

.redes-sociales-contacto svg {
  height: 35px;
}

.redes-sociales-contacto .cls-1 {
  fill: #00419d;
}

.imagen-contacto img {
  width: 60%;
}
/** LOGIN **/
.hero-login {
  border-radius: 20px;
  background-color: #001c3c;
  width: 100%;
  height: 90vh;
  min-height: 1000px;
  margin-bottom: 20px;
  position: relative;
}

.salzillo-login {
  position: absolute;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.salzillo-login img {
  margin-top: -50px;
  width: 150px;
}

.imagen-titulo-login .cls-1 {
  fill: #ffffff;
}

.imagen-titulo-login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagen-titulo-login svg {
  width: 350px;
  margin-top: 50px;
}

.container-form-l {
  margin-top: 100px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.container-form-login {
  background-color: #ffffff;
  width: 480px;
  height: 340px;
  min-height: 340px;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}

.container-form-login h3 {
  color: #00419d;
  text-align: center;
  font-size: 3rem;
  line-height: 1.2;
}

.container-form-login form {
  width: 230px;
}

.registrarse-titulo {
  display: flex;
  flex-direction: row;
  gap: 2px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: -5px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.registrarse-titulo a {
  text-decoration: underline;
  color: #0257bc;
}

.container-form-login label {
  font-size: 1.1rem;
  color: #0257bc;
}

.container-form-login input {
  font-size: 1.2rem;
  border: 1px solid #00419d;
  height: 30px;
  padding-left: 10px;
  border-radius: 5px;
}

.olvide-contra {
  display: flex;
  flex-direction: column;
  color: #0257bc;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  margin-top: 15px;
}

.linea-olvide {
  border-bottom: 1px solid #0257bc;
  width: 80px;
  margin-top: -3px;
}

.boton-login {
  margin-inline: auto;
  background-color: #00419d;
  border-radius: 10px;
  color: #ffffff;
  font-size: 1.2rem;
  padding: 5px 10px;
}

/** CARRITO **/
.contenido-carrito {
  background-color: #001c3c;
  border-radius: 20px;
  width: 100%;
  height: auto;
  padding-bottom: 100px;
}

.header-espacio {
  width: 100%;
  height: 65px;
}

.contenedor-carrito {
  background-color: #ffffff;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  width: 100%;
  height: auto;
  padding-block: 100px;
  overflow: hidden;
}

.buscador-carrito {
  width: 95%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.buscador-carrito input {
  background-color: #eeecec;
  width: 600px;
  padding-left: 10px;
  padding-block: 5px;
  border-radius: 10px;
}

.buscador-carrito input::placeholder {
  font-weight: 600;
  color: #3f3f3f;
}

.buscador-carrito img {
  width: 25px;
}

.secciones-carrito {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1%;
  margin-top: 50px;
}

.articulos-carrito {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.datos-carrito {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.resumen-pedido {
  background-color: #eeecec;
  border-radius: 20px;
  padding-block: 20px;
  padding-inline: 20px;
}

.precio-carrito {
  margin-block: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: 600;
}

.precio-carrito span {
  color: #00419d;
  font-weight: 500;
  font-size: 1.4rem;
}

.resumen-pedido a {
  margin-inline: auto;
  width: 200px;
  text-align: center;
  background-color: #00419d;
  border-radius: 20px;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.3rem;
  padding-block: 3px;
  transition: all 0.4s ease-in-out;
}

.resumen-pedido a:hover {
  background-color: #0257bc;
  transform: scale(0.95);
}

.resumen-pedido h3 {
  color: #00419d;
  font-weight: 600;
  font-size: 1.6rem;
}

.metodos-de-pago {
  background-color: #eeecec;
  border-radius: 20px;
  padding-block: 20px;
  padding-inline: 20px;
}

.metodos-de-pago p {
  color: #00419d;
  font-weight: 600;
  margin-bottom: 10px;
}

.metodos-de-pago img {
  width: 70%;
  height: auto;
  margin-inline: auto;
}

.seccion-camion {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 5%;
  margin-top: 100px;
}

.imagen-camion {
  width: 500px;
}

.imagen-camion img {
  height: 350px;
  margin-left: -150px;
}

.texto-camion {
  width: 600px;
  display: flex;
  flex-direction: column;
  color: #00419d;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-top: -200px;
}

.texto-camion p {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 10px;
}

.no-maneja p {
  font-size: 2.7rem;
  font-weight: 600;
}

.no-maneja p b {
  font-weight: 700;
}

.contenido-carrito .paginacion {
  color: #ffffff;
  text-align: center;
  margin-top: 30px;
}

.total-articulos {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 60px;
  margin-top: 50px;
}

.total-articulos input {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}

.total-articulos p {
  font-weight: 700;
  font-size: 1.8rem;
  color: #001c3c;
}

.mi-carrito-check {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mi-carrito-check input {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}

.mi-carrito-check p {
  font-weight: 700;
  font-size: 1.8rem;
  color: #001c3c;
}

.articulos-carrito-total {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.articulo-carrito {
  width: 100%;
  padding-block: 20px;
  background-color: #eeecec;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  padding-inline: 20px;
}

.tamaños-ropa {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.tamaños-ropa svg {
  width: 10px;
}

.tamaños-ropa a {
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
  border: 1px solid #001c3c;
  padding-inline: 10px;
  border-radius: 20px;
  gap: 5px;
  font-size: 1.4rem;
}

.tamaños-ropa p {
  transition: transform 0.15s ease;
}

.tamaños-ropa svg path {
  transition: fill 0.2s ease;
}

.tamaños-ropa svg path:hover {
  fill: #003d7a;
}

.imagen-articulo-carrito img {
  width: 180px;
  height: 180px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 20px;
}

.eliminar-carrito a {
  display: flex;
  flex-direction: row;
  margin-top: auto;
  height: auto;
  margin-bottom: 0px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 1.6rem;
  color: #00419d;
  font-weight: 600;
}

.eliminar-carrito img {
  width: 15px;
  height: 15px;
  margin-top: -4px;
}

.imagen-articulo-carrito {
  width: 20%;
  min-width: 200px;
}

.datos-articulo-carrito {
  width: 60%;
  height: 100%;
  padding-left: 10px;
}

.eliminar-carrito {
  width: 13%;
  height: 90%;
  display: flex;
}

.precios-carrito {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.datos-articulo-carrito span {
  margin-top: -10px;
  margin-bottom: 10px;
  color: green;
}

.datos-articulo-carrito h3 {
  color: #00419d;
  font-size: 2.5rem;
}

.precio-actual p {
  font-weight: 600;
  font-size: 1.6rem;
}

.precio-anterior p {
  color: #969595;
  text-decoration: line-through;
  font-weight: 600;
}

.proceder-pago {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.proceder-pago a {
  width: 200px;
  display: flex;
  flex-direction: column;
  color: #00419d;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.proceder-pago a:hover {
  transform: scale(1.1);
}

.proceder-pago p {
  font-weight: 600;
}

.linea-proceder-pago {
  width: 60%;
  margin-inline: auto;
  border-bottom: 1px solid #00419d;
}
/** FOOTER **/
.footer-salzillo {
  margin-top: 20px;
  width: 100%;
  height: 300px;
  background-color: #00419d;
  border-radius: 20px;
}

.logo-footer {
  padding-top: 120px;
}

.logo-footer img {
  width: 350px;
  margin-inline: auto;
}

.links-footer {
  width: 200px;
  font-weight: 600;
  font-size: 1.2rem;
}

.redes-sociales-footer {
  width: 200px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: end;
  align-items: center;
}

.powered-by {
  width: 200px;
  font-size: 1.2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.redes-sociales-footer img {
  width: auto;
  height: 20px;
  object-fit: cover;
}

.contenido-footer {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
  margin-inline: auto;
  align-self: center;
  padding-block: auto;
}

/** SEGUIMIENTO CURSOS **/
.seguimiento-container {
  background-color: #eeecec;
  width: 100%;
  height: auto;
  border-radius: 20px;
  padding-block: 100px;
}

.titulo-cursos-seguidos {
  margin-top: 80px;
  margin-bottom: 30px;
  width: 90%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.titulo-cursos-seguidos h3 {
  font-weight: 400;
  font-size: 3rem;
}

.titulo-cursos-seguidos .cls-1 {
  fill: #00419d;
}

.titulo-cursos-seguidos svg {
  width: 150px;
}

.contenedor-cursos-activos {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.card-curso-activo {
  width: 95%;
  height: 400px;
  margin-left: 2.5%;
  background-color: #ffffff;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.preview-curso {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.preview-curso img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 100%;
  max-width: 450px;
  min-height: 275px;
  height: 50%;
  object-fit: cover;
}

.texto-curso-activo {
  width: 85%;
  max-width: 450px;
}

.texto-curso-activo h3 {
  color: #00419d;
}

.texto-curso-activo p {
  font-size: 1.2rem;
  margin-top: -10px;
}

.linea-curso-activo {
  width: 100%;
  border-bottom: 1px solid #3f3f3f;
  margin-bottom: 20px;
}

.duracion-curso-activo {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.duracion-curso-activo p {
  color: #00419d;
  font-weight: 500;
  font-size: 1.3rem;
  margin-left: 0%;
}

.duracion-curso-activo p b {
  color: #3f3f3f;
}

.avance-curso {
  width: 60%;
}

.titulo-avance {
  margin-bottom: 40px;
}

.titulo-avance h3 {
  color: #00419d;
  font-size: 3rem;
  margin-bottom: -5px;
  line-height: 1.2;
}

.titulo-avance p {
  font-size: 1.8rem;
}

.boton-avance {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin-top: 80px;
}

.boton-avance p {
  font-size: 1.1rem;
  font-weight: 500;
}

.boton-avance img {
  width: 40px;
}

.boton-avance a {
  background-color: #00419d;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 5px 20px;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.boton-avance a:hover {
  transform: translateY(-10px);
}

.boton-avance a p {
  font-size: 1.4rem;
}

.barra-progreso-avance {
  margin-bottom: 10px;
}

.progress {
  position: relative;
  width: 90%;
  height: 2px;
  background: rgba(0, 65, 157, 0.08);
  border-radius: 999px;
  overflow: visible;
  transition: height 180ms ease;
}

.progress::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc((attr(data-value number) / 5) * 100%);
  background: #00419d;
  border-radius: inherit;
  transition: width 260ms ease;
}

.progress::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((attr(data-value number) / 5) * 100%);
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #001c3c;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.progress:hover {
  height: 8px;
}

.progress:hover::after {
  opacity: 1;
}
.progress[data-value="0"]::after {
  opacity: 0 !important;
}

.mas-cursos {
  width: 90%;
  margin-inline: auto;
  margin-block: 50px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
}

.mas-cursos a {
  transition: all 0.3s ease-in-out;
}

.mas-cursos a:hover {
  color: #003d7a;
}

.division-mas {
  border-left: 1px solid #3f3f3f;
  height: 20px;
}

.cursos-interesar {
  width: 95%;
  margin-inline: auto;
}

.cursos-interesar h3 {
  font-size: 3rem;
  font-weight: 400;
}

.contenedor-cursos-interesar {
  width: 90%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  gap: 100px;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.card-curso-interes {
  width: 400px;
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #ffffff;
}
.curso-interes-imagen {
  width: 100%;
  height: 225px;
  position: relative;
}

.card-curso-interes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reproducir-interes {
  position: absolute;
  left: 85%;
  top: 75%;
}

.reproducir-interes img {
  width: 45px;
  height: 45px;
}

.curso-interes-informacion {
  width: 95%;
  margin-inline: auto;
}

.curso-interes-informacion h3 {
  font-size: 1.8rem;
  color: #00419d;
  font-weight: 600;
  margin-bottom: -10px;
}

.curso-interes-informacion p {
  font-size: 1.2rem;
}

.duracion-interes {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: 600;
  color: #00419d;
}

.linea-interes {
  border-bottom: 1px solid #3f3f3f;
  width: 100%;
  margin-bottom: 15px;
}

.duracion-interes p b {
  font-weight: 600;
  color: #3f3f3f;
}

.boton-comprar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
}

.boton-comprar a {
  text-align: center;
  background-color: #00419d;
  color: #ffffff;
  font-size: 1.5rem;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

.boton-comprar a:hover {
  transform: translateY(-10px);
}

/** CONTENIDO CURSOS **/
.contenido-curso-fondo {
  width: 100%;
  background-color: #eeecec;
  height: auto;
  padding-block: 150px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contenido-curso-fondo h1 {
  color: #00419d;
  font-weight: 700;
}

.contenido-del-curso {
  margin-top: 100px;
  width: 80%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  gap: 10%;
}

.capitulos {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.resumen-curso {
  width: 30%;
}

.capitulo {
  width: 95%;
  max-width: 500px;
}

.capitulo img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.capitulo video {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.titulo-curso {
  width: 95%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 10px;
}

.titulo-curso p {
  font-size: 1.8rem;
  line-height: 1.2;
}

.titulo-curso p b {
  font-size: 1.8rem;
}

.duracion-unidad p {
  color: #969595;
  font-weight: 500;
  font-size: 2rem;
}

.likes-favoritos {
  width: 95%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.num-likes {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 5px;
}

.datos-imagen img {
  border-radius: 0px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: all 0.3s ease-in-out;
}

.datos-imagen img:hover {
  transform: scale(1.2);
}

.num-likes p {
  margin-top: 5px;
}

.descripcion-unidad {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: justify;
  line-height: 1.4;
}

.progress-contenido {
  margin-top: -10px;
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  height: 10px;
  background: rgb(165, 165, 165);
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  transition: height 180ms ease;
}

.progress-contenido::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc((attr(data-value number) / 5) * 100%);
  background: #9d0000;
  border-bottom-left-radius: 20px;
  transition: width 260ms ease;
}

.progress-contenido::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((attr(data-value number) / 5) * 100%);
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #9d0000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.progress-contenido:hover {
  height: 15px;
}

.progress-contenido:hover::after {
  opacity: 1;
}
.progress-contenido[data-value="0"]::after {
  opacity: 0 !important;
}

.resumen-curso h2 {
  color: #3f3f3f;
  font-weight: 600;
  font-size: 2rem;
  margin-top: 20px;
}

.unidades-titulo {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

.unidades-titulo p {
  margin-top: 0px;
  color: #00419d;
  font-size: 1.4rem;
  font-weight: 600;
}
.punto-unidades {
  width: 15px;
  height: 15px;
  background-color: #ffffff;
  border: 1px solid #0257bc;
  border-radius: 50%;
}

.unidades-curso {
  width: 80%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.unidad-curso a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.unidad-curso p {
  margin-top: 0px;
  font-size: 1.2rem;
  font-weight: 600;
  transition: all 0.6s ease-in-out;
}

.unidad-curso h4 {
  color: #ffffff;
  text-align: center;
  background-color: #00419d;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding-top: 2px;
  font-weight: 400;
}

.unidad-curso a p:hover {
  color: #00419d;
}
/** MEDIA **/
@media (min-width: 300px) and (max-width: 399px) {
  /** CURSOS **/
  .card-curso {
    width: 90%;
  }

  .card-curso img {
    height: 250px;
  }

  .icono-play img {
    width: 40px;
    height: 40px;
  }

  .icono-play {
    top: 75%;
    left: 80%;
  }

  /** INDEX **/
  .hero-index {
    display: flex;
    flex-direction: column-reverse;
    height: 800px;
  }

  .contenido-hero {
    width: 80%;
    height: 60%;
    justify-content: center;
  }

  .contenido-hero h3 {
    font-size: 4rem;
    line-height: 1.2;
  }

  .contenido-hero img {
    margin-top: 0px;
  }

  .contenido-hero p {
    text-align: center;
  }

  .adornos-imagen img {
    width: 40px;
  }

  .impulsar-seccion {
    gap: 10px;
  }

  .impulsar-contenido {
    width: 90%;
    gap: 10px;
  }

  .logo-impulsar img {
    width: 240px;
  }

  .impulsar-contenido p {
    font-size: 2.2rem;
  }

  .impulsar-contenido img {
    width: 20px;
  }

  .titulo-merch {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
  }

  .titulo-merch p {
    margin-top: -10px;
  }

  .empleados-seccion {
    height: auto;
    padding-block: 50px;
    margin-top: 30px;
  }
  .cards-empleado {
    display: flex;
    flex-direction: column;
  }

  .empleado-card {
    width: 95%;
  }

  .contenido-card p {
    font-size: 1rem;
  }

  .contenido-card p b {
    font-size: 1.5rem;
  }

  .slider-container {
    gap: 20px;
  }

  .slider-wrapper {
    width: 280px;
    height: 380px;
    overflow: hidden;
  }

  .slider-merch {
    gap: 20px;
  }

  .slide-merch {
    width: 240px;
    height: 300px;
  }

  .slide-merch img {
    width: 200px;
    height: 200px;
    margin-top: 10px;
  }

  .slide-merch h4 {
    font-size: 1.2rem;
  }

  .slide-merch p {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  .best-seller img {
    width: 50px;
    height: 50px;
  }

  .slider-wrapper-online {
    flex-direction: column;
    height: 600px;
    gap: 20px;
    padding: 0;
    min-width: 90%;
    max-width: 90%;
    margin: 0 5%;
  }

  .slider-online {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    gap: 20px;
  }

  .slide-online {
    flex-direction: column;
    height: 600px;
    gap: 20px;
    padding: 0;
    min-width: calc(90% - 20px);
    max-width: calc(90% - 20px);
    margin: 0 auto;
  }

  .imagen-video-online {
    width: 100%;
    height: 300px;
  }

  .liderazgo-online {
    width: 100%;
    height: 300px;
  }

  .reproductor {
    top: 70%;
    left: 75%;
  }

  .btn-next-on,
  .btn-prev-on {
    top: 50%;
    transform: translateY(-50%);
  }

  .btn-next-on {
    right: 5%;
    left: auto;
  }
  .btn-prev-on {
    left: 5%;
    transform: translateY(-50%) rotate(180deg);
  }

  .contenido-liderazgo h3 {
    font-size: 3rem;
  }

  .contenido-liderazgo img {
    width: 150px;
  }

  .contenido-liderazgo p {
    width: 180px;
    font-size: 1.6rem;
  }

  .don-salzillo {
    top: 35%;
    left: 70%;
  }

  .don-salzillo img {
    width: 100px;
  }

  /** PRODUCTOS **/
  .tabla-productos {
    display: flex;
    flex-direction: column;
  }

  .contenedor-productos {
    width: 95%;
  }

  .card-producto {
    width: 280px;
    height: 320px;
  }

  .container-contenido-sal p {
    font-size: 0.8rem;
  }

  /** ABOUT US **/
  .hero-about {
    height: 600px;
  }
  .container-hero-about {
    display: flex;
    flex-direction: column;
  }

  .salzillo-hero-about img {
    width: 70%;
  }

  .texto-about {
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }

  .texto-about h2 {
    font-size: 4rem;
  }

  .texto-about svg {
    width: 300px;
  }

  .texto-about p {
    text-align: center;
  }

  .card-acerca {
    display: flex;
    flex-direction: column;
    height: 500px;
  }

  .texto-acerca,
  .imagen-acerca {
    width: 100%;
  }

  .texto-acerca {
    height: 60%;
  }

  .imagen-acerca {
    height: 40%;
  }

  .descripcion-acerca {
    width: 90%;
    font-size: 1.8rem;
  }

  .puntos-acerca img {
    width: 30px;
  }

  .imagen-acerca img {
    width: 50%;
  }

  .titulo-acerca svg {
    width: 90px;
  }

  .titulo-acerca {
    font-size: 1.5rem;
  }

  /** CONTACTO **/
  .hero-contacto {
    height: 1100px;
  }

  .seccion-formulario {
    display: flex;
    flex-direction: column;
    width: 95%;
    margin-top: -100px;
  }

  .texto-form {
    width: 90%;
  }

  .texto-form h2 {
    line-height: 1.2;
    font-size: 3.5rem;
    margin-bottom: 10px;
  }

  .container-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .formulario-contacto {
    width: 95%;
  }

  .container-form form {
    width: 80%;
  }

  .cara-salzillo {
    left: 75%;
  }

  .imagen-titulo-contacto svg {
    width: 80%;
  }

  /** LOGIN **/

  .formulario-login {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container-form-login {
    width: 90%;
  }

  .container-form-login form {
    width: 90%;
  }

  .imagen-titulo-login svg {
    width: 80%;
  }

  /** SEGUIMIENTO CURSOS **/
  .card-curso-activo {
    display: flex;
    flex-direction: column;
    padding-inline: 0px;
    overflow: hidden;
    height: auto;
    gap: 20px;
  }

  .preview-curso {
    width: 100%;
  }

  .preview-curso img {
    height: 230px;
    min-height: 200px;
  }

  .avance-curso {
    width: 100%;
  }

  .titulo-avance {
    display: none;
  }

  .avance-curso {
    width: 85%;
    margin-inline: auto;
  }

  .boton-avance {
    margin-top: 20px;
    margin-bottom: 50px;
  }

  .avance-curso p {
    line-height: 1.2;
  }

  .boton-avance a {
    padding-block: 10px;
  }

  .texto-curso-activo h3 {
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .titulo-cursos-seguidos h3 {
    line-height: 1.2;
    font-size: 2rem;
  }

  .titulo-cursos-seguidos svg {
    width: 120px;
  }

  .cursos-interesar h3 {
    line-height: 1.2;
    font-size: 2rem;
  }

  .contenedor-cursos-interesar {
    display: flex;
    flex-direction: column;
  }

  .card-curso-interes {
    width: 95%;
    max-width: 400px;
  }

  .curso-interes-imagen {
    height: 180px;
  }

  .curso-interes-informacion h3 {
    margin-bottom: 10px;
    line-height: 1.2;
  }

  /** CONTENIDO DEL CURSO **/
  .contenido-del-curso {
    display: flex;
    flex-direction: column-reverse;
    width: 95%;
    margin-top: 50px;
  }

  .resumen-curso {
    width: 100%;
    margin-bottom: 50px;
  }

  .capitulos {
    width: 100%;
  }

  .capitulos img {
    height: 250px;
  }

  .capitulo {
    max-width: 500px;
  }

  .likes-favoritos {
    height: 50px;
  }

  .titulo-curso {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
  }

  /** CARRITO **/
  .secciones-carrito {
    display: flex;
    flex-direction: column-reverse;
    width: 95%;
    margin-inline: auto;
  }

  .datos-carrito {
    width: 100%;
  }

  .articulos-carrito {
    width: 100%;
  }

  .articulo-carrito {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .imagen-articulo-carrito {
    width: 90%;
  }

  .imagen-articulo-carrito img {
    width: 100%;
    height: auto;
  }

  .datos-articulo-carrito {
    width: 90%;
  }

  .precios-carrito {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }

  .precio-actual p {
    font-size: 2rem;
  }

  .eliminar-carrito {
    width: 90%;
    justify-content: center;
  }

  .seccion-camion {
    display: flex;
    flex-direction: column;
  }

  .texto-camion {
    margin-top: 0px;
    width: 90%;
  }

  .texto-camion p {
    font-size: 3rem;
  }

  .no-maneja p {
    font-size: 2rem;
  }

  .imagen-camion {
    width: 90%;
  }

  .imagen-camion img {
    margin-top: 50px;
    height: 250px;
    margin-left: -30px;
  }

  .buscador-carrito input {
    width: 90%;
    padding-inline: 20px;
  }
  /** FOOTER **/
  .logo-footer img {
    width: 60%;
  }

  .contenido-footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 20px;
  }

  .logo-footer {
    padding-top: 50px;
  }

  .links-footer {
    margin-inline: auto;
  }

  .powered-by {
    margin-inline: auto;
  }

  .redes-sociales-footer {
    margin-inline: auto;
    justify-content: center;
  }
}

@media (min-width: 400px) and (max-width: 767px) {
  /** CURSOS **/
  .card-curso {
    width: 90%;
  }

  .card-curso img {
    height: 250px;
  }

  .icono-play img {
    width: 40px;
    height: 40px;
  }

  .icono-play {
    top: 75%;
    left: 80%;
  }

  /** INDEX **/
  .hero-index {
    display: flex;
    flex-direction: column-reverse;
    height: 800px;
  }

  .contenido-hero {
    width: 80%;
    height: 60%;
    justify-content: center;
  }

  .contenido-hero h3 {
    font-size: 4rem;
    line-height: 1.2;
  }

  .contenido-hero img {
    margin-top: 0px;
  }

  .contenido-hero p {
    text-align: center;
  }

  .adornos-imagen img {
    width: 40px;
  }

  .impulsar-seccion {
    gap: 10px;
  }

  .impulsar-contenido {
    width: 90%;
    gap: 10px;
  }

  .logo-impulsar img {
    width: 240px;
  }

  .impulsar-contenido p {
    font-size: 2.2rem;
  }

  .impulsar-contenido img {
    width: 20px;
  }

  .titulo-merch {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
  }

  .titulo-merch p {
    margin-top: -10px;
  }

  .empleados-seccion {
    height: auto;
    padding-block: 50px;
    margin-top: 30px;
  }
  .cards-empleado {
    display: flex;
    flex-direction: column;
  }

  .empleado-card {
    width: 95%;
  }

  .contenido-card p {
    font-size: 1rem;
  }

  .contenido-card p b {
    font-size: 1.5rem;
  }

  .slider-container {
    gap: 20px;
  }

  .slider-wrapper {
    width: 280px;
    height: 380px;
    overflow: hidden;
  }

  .slider-merch {
    gap: 20px;
  }

  .slide-merch {
    width: 240px;
    height: 300px;
  }

  .slide-merch img {
    width: 200px;
    height: 200px;
    margin-top: 10px;
  }

  .slide-merch h4 {
    font-size: 1.2rem;
  }

  .slide-merch p {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  .best-seller img {
    width: 50px;
    height: 50px;
  }

  .slider-wrapper-online {
    flex-direction: column;
    height: 600px;
    gap: 20px;
    padding: 0;
    min-width: 90%;
    max-width: 90%;
    margin: 0 5%;
  }

  .slider-online {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    gap: 20px;
  }

  .slide-online {
    flex-direction: column;
    height: 600px;
    gap: 20px;
    padding: 0;
    min-width: calc(90% - 20px);
    max-width: calc(90% - 20px);
    margin: 0 auto;
  }

  .imagen-video-online {
    width: 100%;
    height: 300px;
  }

  .liderazgo-online {
    width: 100%;
    height: 300px;
  }

  .reproductor {
    top: 70%;
    left: 80%;
  }

  .btn-next-on,
  .btn-prev-on {
    top: 50%;
    transform: translateY(-50%);
  }

  .btn-next-on {
    right: 5%;
    left: auto;
  }
  .btn-prev-on {
    left: 5%;
    transform: translateY(-50%) rotate(180deg);
  }

  .contenido-liderazgo h3 {
    font-size: 3rem;
  }

  .contenido-liderazgo img {
    width: 150px;
  }

  .contenido-liderazgo p {
    width: 250px;
    font-size: 2rem;
  }

  .don-salzillo {
    top: 35%;
    left: 70%;
  }

  .don-salzillo img {
    width: 100px;
  }

  /** PRODUCTOS **/
  .tabla-productos {
    display: flex;
    flex-direction: column;
  }

  .contenedor-productos {
    width: 95%;
  }

  /** ABOUT US **/
  .hero-about {
    height: 600px;
  }
  .container-hero-about {
    display: flex;
    flex-direction: column;
  }

  .salzillo-hero-about img {
    width: 70%;
  }

  .texto-about {
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }

  .texto-about h2 {
    font-size: 4rem;
  }

  .texto-about svg {
    width: 300px;
  }

  .texto-about p {
    text-align: center;
  }

  .card-acerca {
    display: flex;
    flex-direction: column;
    height: 500px;
  }

  .texto-acerca,
  .imagen-acerca {
    width: 100%;
  }

  .texto-acerca {
    height: 60%;
  }

  .imagen-acerca {
    height: 40%;
  }

  .descripcion-acerca {
    width: 90%;
    font-size: 1.8rem;
  }

  .puntos-acerca img {
    width: 30px;
  }

  .imagen-acerca img {
    width: 50%;
  }

  /** CONTACTO **/
  .hero-contacto {
    height: 1100px;
  }

  .seccion-formulario {
    display: flex;
    flex-direction: column;
    width: 95%;
    margin-top: -100px;
  }

  .texto-form {
    width: 90%;
  }

  .texto-form h2 {
    line-height: 1.2;
    font-size: 3.5rem;
    margin-bottom: 10px;
  }

  .container-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .formulario-contacto {
    width: 95%;
  }

  .container-form form {
    width: 80%;
  }

  .cara-salzillo {
    left: 75%;
  }

  .imagen-titulo-contacto svg {
    width: 80%;
  }

  .imagen-acerca img {
    max-width: 120px;
  }

  /** LOGIN **/

  .formulario-login {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container-form-login {
    width: 90%;
    max-width: 400px;
  }

  .container-form-login form {
    width: 70%;
  }

  .imagen-titulo-login svg {
    width: 80%;
  }

  /** SEGUIMIENTO CURSOS **/
  .card-curso-activo {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    padding-inline: 0px;
    overflow: hidden;
    height: auto;
    gap: 20px;
    margin-inline: auto;
  }

  .preview-curso {
    width: 100%;
  }

  .preview-curso img {
    height: 230px;
    min-height: 200px;
  }

  .avance-curso {
    width: 100%;
  }

  .titulo-avance {
    display: none;
  }

  .avance-curso {
    width: 85%;
    margin-inline: auto;
  }

  .boton-avance {
    margin-top: 20px;
    margin-bottom: 50px;
  }

  .avance-curso p {
    line-height: 1.2;
  }

  .boton-avance a {
    padding-block: 10px;
  }

  .texto-curso-activo h3 {
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .titulo-cursos-seguidos h3 {
    line-height: 1.2;
    font-size: 2rem;
  }

  .titulo-cursos-seguidos svg {
    width: 120px;
  }

  .cursos-interesar h3 {
    line-height: 1.2;
    font-size: 2rem;
  }

  .contenedor-cursos-interesar {
    display: flex;
    flex-direction: column;
  }

  .card-curso-interes {
    width: 95%;
    max-width: 400px;
  }

  .curso-interes-imagen {
    height: 180px;
  }

  .curso-interes-informacion h3 {
    margin-bottom: 10px;
    line-height: 1.2;
  }

  /** CONTENIDO DEL CURSO **/
  .contenido-del-curso {
    display: flex;
    flex-direction: column-reverse;
    width: 95%;
    margin-top: 50px;
  }

  .resumen-curso {
    width: 100%;
    margin-bottom: 50px;
    max-width: 400px;
    margin-inline: auto;
  }

  .capitulos {
    width: 100%;
  }

  .capitulos img {
    height: 250px;
  }

  .capitulo {
    max-width: 375px;
  }

  .likes-favoritos {
    height: 50px;
  }

  .titulo-curso {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
  }

  /** CARRITO **/
  .secciones-carrito {
    display: flex;
    flex-direction: column-reverse;
    width: 95%;
    margin-inline: auto;
  }

  .datos-carrito {
    width: 100%;
  }

  .articulos-carrito {
    width: 100%;
  }

  .articulo-carrito {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .imagen-articulo-carrito {
    width: 90%;
  }

  .imagen-articulo-carrito img {
    width: 100%;
    height: auto;
  }

  .datos-articulo-carrito {
    width: 90%;
  }

  .precios-carrito {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }

  .precio-actual p {
    font-size: 2rem;
  }

  .eliminar-carrito {
    width: 90%;
    justify-content: center;
  }

  .seccion-camion {
    display: flex;
    flex-direction: column;
  }

  .texto-camion {
    margin-top: 0px;
    width: 90%;
  }

  .texto-camion p {
    font-size: 3rem;
  }

  .no-maneja p {
    font-size: 2rem;
  }

  .imagen-camion {
    width: 90%;
  }

  .imagen-camion img {
    margin-top: 50px;
    height: 250px;
    margin-left: 10px;
  }

  .buscador-carrito input {
    width: 90%;
    padding-inline: 20px;
  }

  /** FOOTER **/
  .logo-footer img {
    width: 60%;
  }

  .contenido-footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 20px;
  }

  .logo-footer {
    padding-top: 50px;
  }

  .links-footer {
    margin-inline: auto;
  }

  .powered-by {
    margin-inline: auto;
  }

  .redes-sociales-footer {
    margin-inline: auto;
    justify-content: center;
  }
}

@media (min-width: 767px) and (max-width: 1199px) {
  .contenido-hero h3 {
    line-height: 1.2;
    font-size: 3.8rem;
  }

  .contenido-hero img {
    margin-top: 0px;
  }

  .contenido-hero p {
    text-align: center;
  }

  .impulsar-contenido {
    width: 80%;
  }

  .impulsar-contenido p {
    font-size: 3.5rem;
  }

  .impulsar-contenido img {
    width: 50px;
  }

  .cards-empleado {
    display: flex;
    flex-direction: column;
  }

  .empleados-seccion {
    height: auto;
    padding-block: 50px;
  }

  .slider-online {
    gap: 30px;
  }

  .slide-online {
    height: 500px;
    min-width: calc(85% - 30px);
    max-width: calc(85% - 30px);
    margin: 0 auto;
    padding: 0;
  }

  .contenido-liderazgo {
    padding-left: 8%;
  }

  .contenido-liderazgo h3 {
    font-size: 3.5rem;
  }

  .contenido-liderazgo img {
    width: 160px;
  }

  .contenido-liderazgo p {
    width: 300px;
    font-size: 2rem;
  }

  .contenido-liderazgo a {
    margin-top: 40px;
  }

  .don-salzillo {
    top: 50%;
    left: 68%;
  }

  .don-salzillo img {
    width: 120px;
  }

  .reproductor {
    left: 85%;
    top: 75%;
  }

  .btn-next-on,
  .btn-prev-on {
    top: 50%;
  }

  .btn-next-on {
    right: 5%;
    left: auto;
    transform: translateY(-50%);
  }

  .btn-prev-on {
    left: 5%;
    transform: translateY(-50%) rotate(180deg);
  }

  /** PRODUCTOS **/
  .contenedor-productos {
    width: 90%;
  }

  /** CONTACTO **/
  .seccion-formulario {
    width: 90%;
  }

  .texto-form {
    width: 350px;
  }

  .texto-form h2 {
    line-height: 1.2;
    font-size: 4rem;
  }

  .subtitulo-linea {
    width: 80%;
  }

  .formulario-contacto {
    width: 350px;
  }

  /** ABOUT US **/
  .texto-about h2 {
    line-height: 1.2;
    font-size: 6rem;
    margin-bottom: 10px;
  }

  /** SEGUIMIENTO CURSOS **/
  .card-curso-activo {
    padding-inline: 0px;
  }

  .preview-curso {
    width: 50%;
  }

  .avance-curso {
    width: 45%;
  }

  .boton-avance {
    margin-top: 40px;
  }

  .contenedor-cursos-interesar {
    display: flex;
    flex-direction: column;
  }

  /** CONTENIDO CURSO **/
  .contenido-del-curso {
    width: 95%;
    gap: 20px;
  }

  .capitulos {
    width: 65%;
  }

  .capitulo {
    max-width: 450px;
  }

  .capitulo img {
    height: 300px;
  }

  .capitulo video {
    height: 300px;
  }

  .likes-favoritos {
    height: 20px;
  }

  /** CARRITO **/
  .imagen-camion {
    width: 350px;
  }

  .imagen-camion img {
    height: 250px;
    margin-left: -100px;
  }

  .texto-camion {
    width: 400px;
    margin-top: 0px;
  }

  .texto-camion p {
    font-size: 3rem;
  }

  .no-maneja p {
    font-size: 2.5rem;
  }
}

@media (min-width: 1199px) {
  .header .container {
    margin-inline: auto;
    max-width: 1600px;
    display: flex;
    justify-content: flex-start;
  }

  .header.active .container {
    width: 100%;
  }

  .botones-header {
    margin-left: auto;
    margin-right: 0px;
  }
}

@media (max-width: 1200px) {
  .botones-header {
    gap: 5px;
    width: auto;
  }

  .botones-header svg {
    height: 20px;
    width: 20px;
  }

  .nav-open-btn {
    margin-left: auto;
  }

  .navbar-link {
    color: #001c3c;
  }

  .navbar-top .logo .cls-1 {
    fill: #001c3c;
  }
}