:root {
  --primary: rgb(235, 53, 102) !important;
  --secondary: rgb(244, 114, 100);
  --terciary: rgb(251, 184, 43);
  --lightbody: rgb(255, 245, 158);
  --lightbodyOp: rgba(255, 245, 158, 0.5);
  --backbody: rgb(255, 172, 50);
  --success: #28a745;
  --undergray: #6c757d;
  --white: #fff;
}

/* Linea divisora
------------------------- */

.featurette-divider {
  margin: 4rem 0;
}

/* ------------------------- */

* {
  font-family: 'Nunito', sans-serif;
}

body {
  width: 100%;
  color: rgb(var(--bs-tertiary-color-rgb));
}

/* ------------------------------------------ ESTILOS PERSONALIZADOS (index) ----------------------------------------------------- */

.encabezado-titulo {
  font-family: 'Dancing Script', serif;
  /*font-family: 'Comfortaa', sans-serif;*/
}

h1,
h2,
h3 {
  font-family: 'Comfortaa', sans-serif;
}

#encabezado {
  background: linear-gradient(8deg, var(--primary), var(--lightbody));
  box-shadow: 0 0 15px #000;
  position: relative;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.85);
  /* Sombra interna en la parte superior */
}

#encabezado .encabezado-marca {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  /* El valor puede variar según tus necesidades en pantalla md */
  text-decoration: none;
}

#encabezado .encabezado-marca img {
  height: 3rem;
  margin: 0 1rem;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}

#encabezado .encabezado-marca .encabezado-titulo {
  color: var(--white);
  font-weight: 1000 !important;
  font-size: calc(1.5rem + .6vw) !important;
}

.navegador {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  /* ----------- */
  margin-right: 1rem !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  /* ----------- */
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  /* ----------- */
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
}

.navegador .navegador-item .navegador-link {
  color: var(--primary) !important;
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  text-decoration: none;
  background: 0 0;
  border: 0;
  border-radius: var(--bs-nav-pills-border-radius);
  transition: 0.3s ease;
}

.navegador .navegador-item .active {
  color: var(--white) !important;
  background-color: var(--primary) !important;
}

.navegador .navegador-item .active:hover {
  background-color: var(--white) !important;
  color: var(--primary) !important;
}

.navegador .navegador-item .no-activo:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.navegador .boton-navegador-carrito {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  padding: var(--bs-nav-link-padding-y) 12px;
  margin: 0 10px;
}

.navegador .boton-navegador-carrito:hover {
  background-color: var(--white);
  color: var(--primary);
  transition: 0.3s;
}

.navegador .carrito-contador {
  display: none;
  position: absolute;
  /* right: 0; */
  margin-top: -45px;
  margin-left: 17.5px;
  background-color: red;
  color: #fff;
  padding: 5px;
  width: 30px;
  height: 30px;
  font-size: 0.85em;
  border-radius: 100%;
  text-align: center;
}

.footer-italina {
  background-color: var(--white);
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 1.5rem 2.5rem 1.5rem;
  margin-top: 1.5rem;
}

.footer-info #btn-modal-login {
  margin-right: 15px;
  padding: 5px 15px;
  border-radius: 10px;
  border-style: none;
  background-color: var(--primary);
  color: var(--white);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.footer-info #btn-modal-login:hover {
  background-color: var(--terciary);
}

.footer-info .info-creador {
  margin: 0 !important;
  align-self: center;
}

.footer-navegador {
  display: flex;
  align-items: center;
  padding-left: 0;
  list-style: none;
  /* ----------- */
  margin-right: 1rem !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  /* ----------- */
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--undergray);
  /* ----------- */
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: var(--primary) !important;
  --bs-nav-pills-link-active-bg: var(--white) !important;
}

.footer-navegador .navegador-item .navegador-link {
  color: var(--undergray) !important;
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  text-decoration: none;
  background: 0 0;
  border: 0;
  border-radius: var(--bs-nav-pills-border-radius);
}

.footer-navegador .navegador-item .navegador-link.active {
  color: var(--primary) !important;
}

.footer-logo {
  height: 3rem !important;
  margin-right: 1rem;
  margin-left: 1rem;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
}

/* ---------------------------------- Modal Login ---------------------------------- */

#modal-login {
  width: 30%;
  border-radius: 25px;
  border-style: none;
}

#modal-login #btn-cerrar-login {
  border-style: none;
  float: right;
  border-radius: 5px;
}

#modal-login #btn-cerrar-login:hover {
  filter: brightness(0.8);
}

#modal-login .modal-title {
  margin-bottom: 15px;
}

#modal-login .modal-content {
  padding: 0 50px 0 50px;
  text-align: center;
}

#modal-login .modal-content input {
  width: 100%;
  margin-bottom: 5px;
  text-align: center;
}

#modal-login .modal-content .btn-login {
  margin: 10px 0 15px 0;
  padding: 5px 20px;
  border-radius: 15px;
  border-style: none;
  background-color: var(--success);
  color: var(--white);
  transition: 0.5s;
}

#modal-login .modal-content .btn-login:hover {
  background-color: #6bd183;
}

#modal-login::backdrop {
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.55);
}

/* RESPONSIVE CSS
-------------------------------------------------- */

/* Pantallas pequeñas (móviles): Consultas para pantallas con un ancho menor a 576 píxeles. */
@media (max-width: 575px) {

  /* header */

  #encabezado {
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  #encabezado .encabezado-marca {
    margin-left: -1.5rem !important;
  }

  #encabezado .encabezado-marca img {
    height: 3rem !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
  }

  #encabezado .navegador {
    /* margin-right: 0 !important; */
    margin: 0 0.5rem !important;
  }

  /* footer */

  .footer-crezcosiendo {
    gap: 1.25rem !important;
  }

  .footer-navegador {
    margin-left: 3rem !important;
    margin-right: 0rem !important;
  }

  .footer-logo {
    height: 3rem !important;
    margin-right: 0rem !important;
  }

  /* ---------------------------------- Modal Login ---------------------------------- */

  #modal-login {
    width: 100% !important;
    border-radius: 25px !important;
  }

  #modal-login .modal-content {
    padding: 0 30px 0 30px !important;
  }

}

/* Tabletas y pantallas medianas: Consultas para pantallas con un ancho entre 576 y 991 píxeles. */
@media (min-width: 576px) and (max-width: 991px) {

  /* header */

  #encabezado {
    justify-content: center !important;
    gap: 1rem !important;
  }

  #encabezado .encabezado-marca {
    margin-left: -1.5rem !important;
  }

  #encabezado .encabezado-marca img {
    height: 3rem !important;
    margin-left: 2rem !important;
    margin-right: 0.5rem !important;
  }

  #encabezado .navegador {
    margin-right: 0 !important;
  }

  /* footer */

  .footer-navegador {
    margin-right: 0 !important;
  }

  .footer-navegador .footer-logo {
    height: 3rem !important;
    margin-right: 0rem !important;
  }

  /* ---------------------------------- Modal Login ---------------------------------- */

  #modal-login {
    width: 50% !important;
    border-radius: 25px !important;
  }

}

/* Pantallas grandes (escritorio): Consultas para pantallas con un ancho igual o superior a 992 píxeles. */
@media (min-width: 992px) {}

/* -------------- Responsive bootstrap --------------- */

@media (min-width: 40em) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

}