/**********************************************************/
/************************* XEERPA *************************/
/**********************************************************/

@font-face {
  font-family: "PepsiOwners";
  src: url("../fonts/PepsiOwners-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.roboto-flex{
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.btn-facebook {
  background-color: #3b579d;
}

.btn-google {
  background: linear-gradient(90deg,
      rgba(191, 193, 197, 1) 0%,
      rgba(137, 138, 142, 1) 100%);
}

.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  box-sizing: border-box;
  color: #1f1f1f;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  height: 40px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
  white-space: nowrap;
  max-width: 400px;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper,
.btn-tiktok,
.btn-facebook {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.w-400{
  max-width: 400px !important;
}

.btn-tiktok,
.btn-facebook {
  padding: 10px 14px;
  max-width: 400px;
}

.gsi-material-button .gsi-material-button-contents,
.btn-tiktok-text,
.btn-facebook-text {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: "PepsiOwners", "Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity 0.218s;
  transition: opacity 0.218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

.btn-tiktok {
  background-color: #000;
}

.fw-extra-bold {
  font-weight: 800 !important;
}

/** RECOMEDADOR **/
.x_button {
  width: 75%;
}

/**********************************************************/
/************************** MENÚ **************************/
/**********************************************************/

.navbar-brand img {
  width: 180px;
}

nav .logo {
  width: 60px;
}

/**********************************************************/
/************************* CUSTOM *************************/
/**********************************************************/

html,
body {
  overscroll-behavior: none;
}

body {
  font-family: "PepsiOwners", "Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-justify {
  text-align: justify !important;
}

.bg-azul {
  background-color: #0B24F5 !important;
}

.text-azul {
  color: #0B24F5 !important;
}

.borde-azul {
  border: 2px solid #0B24F5 !important;
}

.boton-blanco {
  background-color: #fff !important;
  color: #0B24F5 !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.boton-blanco:hover {
  background-color: #0B24F5 !important;
  color: #fff !important;
}

.boton-azul {
  background-color: #0B24F5 !important;
  color: #fff !important;
  transition: background-color 0.3s ease !important;
}

.boton-azul:hover {
  background-color: #fff !important;
  color: #0B24F5 !important;
}

/**********************************************************/
/************************* INICIO *************************/
/**********************************************************/

.linea-pulso {
  height: 15vh !important;
}
.bg-inicio {
  background-image: url("../img/banner.jpg");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;

  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
}


@media (max-width: 767.98px) {
  .linea-pulso {
    height: 5vh !important;
  }
  .bg-inicio {
    margin-top: 90px !important;
    height: 47vh !important;
  }
}


/**********************************************************/
/****************** REGISTRO Y LOGIN **********************/
/**********************************************************/

.bg-registro {
  background-image: url(../img/bgbotellasgrandes.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select {
  background-color: #fff !important;
  color: #000 !important; 
  border: none !important;
}

input::placeholder{
  color: rgba(0, 0, 0, 0.5) !important; 
}

.form-check{
  text-align: left !important;
}

label{
  text-align: left !important;
}

/**********************************************************/
/********************* FACTURAS ***************************/
/**********************************************************/

.bg-facturas {
  background-image: url(../img/bgbotellas.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/**********************************************************/
/********************* LOST PASSWORD **********************/
/**********************************************************/

.login-action-lostpassword,
.login-action-checkemail,
.login-action-login,
.login-action-rp {
  background-color: #000 !important;
  background-image: url(../img/bgbotellasgrandes.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.login {
  font-family: "PepsiOwners", "Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

#login {
  padding-top: 64px;
}

.login h1 a {
  background-image: url(../img/logo.png) !important;
  width: 200px !important;
  padding: 0 !important;
  margin: 0 auto;
  background-size: contain;
}

.login-action-lostpassword .login .message,
.login .notice,
.login .success {
  border-left: 4px solid #0B24F5 !important;
}

.login #backtoblog a,
.login #nav a {
  text-decoration: none;
  color: #fff !important;
}

.wp-core-ui .button-primary,
.wp-core-ui .button {
  background-color: #0B24F5 !important;
  color: #fff !important;
  border: 0 !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  border-radius: 0.5rem !important;
  padding: 0.6rem 1rem !important;
  font-family: "PepsiOwners", "Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  text-align: center !important;
  font-weight: bold !important;
  margin-top: 5px !important;
  width: 100% !important;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button:hover {
  background-color: #fff !important;
  color: #0B24F5 !important;
}

.wp-pwd .button {
  width: auto !important;
  border: 0 !important;
  background: none !important;
}

.login label {
  color: #fff !important;
}

.login form {
  margin: 24px 0;
  padding: 26px 24px;
  font-weight: 400;
  overflow: hidden;
  background-color: rgba(11, 36, 245, 0.92);
  border-radius: 0.75rem;
  border: none !important; 
  box-shadow: none !important;
  color: white !important;
}

.login form .input, .login input[type="password"], .login input[type="text"] {
  font-size: 18px;
  border-radius: 0.5rem !important;
  padding: 0.55rem 0.75rem;
}

.login .message, .login .notice{
  background-color: #000000c9 !important;
  color: #fff !important;
}

.language-switcher {
  display: none !important;
}

.mt-neg {
  margin-top: -16px;
}

.padding-verificar{
  padding: 150px 0px;
}

@media (min-width:1690px ) {
  .bg-inicio {
    height: 150vh !important;
  }
}