@charset "UTF-8";
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
  background-color: #E8BA00;
  overflow-x: hidden;
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

body {
  font-family: "Asap", sans-serif;
  background-image: url(../img/bg_Ramomania.jpg);
  height: 100%;
  background-repeat: repeat-y;
  background-size: auto;
  background-color: #E8BA00 !important;
  overflow-x: hidden;
}


h1 {
  font-family: "Asap", sans-serif;
}
h1.text-blanco {
  color: #fff;
  text-shadow: 5px 0 #162989, -5px 0 #162989, 0 5px #162989, 0 -5px #162989, 4px 4px #162989, -4px -4px #162989, 4px -4px #162989, -4px 4px #162989;
}

h2 {
  font-family: "Asap", sans-serif;
  font-style: italic;
  font-weight: 700 !important;
  color: #FA0026;
  font-size: 3em !important;
  text-shadow: rgb(255, 255, 255) 10px 0px 0px, rgb(255, 255, 255) 9.95004px 0.998334px 0px, rgb(255, 255, 255) 9.80067px 1.98669px 0px, rgb(255, 255, 255) 9.55336px 2.9552px 0px, rgb(255, 255, 255) 9.21061px 3.89418px 0px, rgb(255, 255, 255) 8.77583px 4.79426px 0px, rgb(255, 255, 255) 8.25336px 5.64642px 0px, rgb(255, 255, 255) 7.64842px 6.44218px 0px, rgb(255, 255, 255) 6.96707px 7.17356px 0px, rgb(255, 255, 255) 6.2161px 7.83327px 0px, rgb(255, 255, 255) 5.40302px 8.41471px 0px, rgb(255, 255, 255) 4.53596px 8.91207px 0px, rgb(255, 255, 255) 3.62358px 9.32039px 0px, rgb(255, 255, 255) 2.67499px 9.63558px 0px, rgb(255, 255, 255) 1.69967px 9.8545px 0px, rgb(255, 255, 255) 0.707372px 9.97495px 0px, rgb(255, 255, 255) -0.291995px 9.99574px 0px, rgb(255, 255, 255) -1.28844px 9.91665px 0px, rgb(255, 255, 255) -2.27202px 9.73848px 0px, rgb(255, 255, 255) -3.2329px 9.463px 0px, rgb(255, 255, 255) -4.16147px 9.09297px 0px, rgb(255, 255, 255) -5.04846px 8.63209px 0px, rgb(255, 255, 255) -5.88501px 8.08496px 0px, rgb(255, 255, 255) -6.66276px 7.45705px 0px, rgb(255, 255, 255) -7.37394px 6.75463px 0px, rgb(255, 255, 255) -8.01144px 5.98472px 0px, rgb(255, 255, 255) -8.56889px 5.15501px 0px, rgb(255, 255, 255) -9.04072px 4.2738px 0px, rgb(255, 255, 255) -9.42222px 3.34988px 0px, rgb(255, 255, 255) -9.70958px 2.39249px 0px, rgb(255, 255, 255) -9.89993px 1.4112px 0px, rgb(255, 255, 255) -9.99135px 0.415807px 0px, rgb(255, 255, 255) -9.98295px -0.583741px 0px, rgb(255, 255, 255) -9.8748px -1.57746px 0px, rgb(255, 255, 255) -9.66798px -2.55541px 0px, rgb(255, 255, 255) -9.36457px -3.50783px 0px, rgb(255, 255, 255) -8.96758px -4.4252px 0px, rgb(255, 255, 255) -8.481px -5.29836px 0px, rgb(255, 255, 255) -7.90968px -6.11858px 0px, rgb(255, 255, 255) -7.25932px -6.87766px 0px, rgb(255, 255, 255) -6.53644px -7.56803px 0px, rgb(255, 255, 255) -5.74824px -8.18277px 0px, rgb(255, 255, 255) -4.90261px -8.71576px 0px, rgb(255, 255, 255) -4.00799px -9.16166px 0px, rgb(255, 255, 255) -3.07333px -9.51602px 0px, rgb(255, 255, 255) -2.10796px -9.7753px 0px, rgb(255, 255, 255) -1.12153px -9.93691px 0px, rgb(255, 255, 255) -0.123887px -9.99923px 0px, rgb(255, 255, 255) 0.87499px -9.96165px 0px, rgb(255, 255, 255) 1.86512px -9.82453px 0px, rgb(255, 255, 255) 2.83662px -9.58924px 0px, rgb(255, 255, 255) 3.77978px -9.25815px 0px, rgb(255, 255, 255) 4.68517px -8.83455px 0px, rgb(255, 255, 255) 5.54374px -8.32267px 0px, rgb(255, 255, 255) 6.34693px -7.72764px 0px, rgb(255, 255, 255) 7.0867px -7.0554px 0px, rgb(255, 255, 255) 7.75566px -6.31267px 0px, rgb(255, 255, 255) 8.34713px -5.50686px 0px, rgb(255, 255, 255) 8.8552px -4.64602px 0px, rgb(255, 255, 255) 9.27478px -3.73877px 0px, rgb(255, 255, 255) 9.6017px -2.79415px 0px, rgb(255, 255, 255) 9.83268px -1.82162px 0px, rgb(255, 255, 255) 9.96542px -0.830894px 0px, 0px 10px 15px rgba(0, 0, 0, 0.6);
}
h2.text-blanco {
  color: #fff;
  text-shadow: 5px 0 #162989, -5px 0 #162989, 0 5px #162989, 0 -5px #162989, 4px 4px #162989, -4px -4px #162989, 4px -4px #162989, -4px 4px #162989;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-width: 1px !important;
}

.text-blue {
  color: #0B315E !important;
}

.terminos h2 {
  color: #162989;
  text-shadow: none;
}

.home .btn-primary {
  border-radius: 20px;
  background-color: #FE0000;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
  color: #fff;
  border: none;
  font-family: "Asap", sans-serif;
  font-size: 2em;
  padding: 3px 40px;
  font-weight: 700;
}
.home .btn-primary:hover {
  background-color: #fff;
  color: #FE0000;
}

.home .btn-secondary {
  border-radius: 20px;
  background-color: transparent;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
  color: #FE0000;
  border: 2px solid #FE0000;
  font-family: "Asap", sans-serif;
  font-size: 1.8em;
  padding: 3px 40px;
}
.home .btn-secondary:hover {
  background-color: #FE0000;
  border: 2px solid #FE0000;
}

.text-red {
  color: #FE0000;
  font-family: "Asap", sans-serif;
  text-shadow: 5px 0 #fff, -5px 0 #fff, 0 5px #fff, 0 -5px #fff, 4px 4px #fff, -4px -4px #fff, 4px -4px #fff, -4px 4px #fff;
}

.text-red-sencillo {
  color: #FE0000;
  font-family: "Asap", sans-serif;
}

header {
  top: 15px;
  z-index: 50;
  position: fixed;
  width: 96%;
  max-width: 1200px;
  left: 50%;
  transform: translateX(-50%);
}
header .navbar-toggler {
  background-color: #FEF864;
  border-radius: 2px;
  position: fixed;
  left: 5px;
  top: 5px;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  width: 50px;
  height: 49px;
  background-repeat: no-repeat;
  background-size: 63%;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.4006 23L0 4.59935L4.59935 0L23 18.4006L41.4007 0L46 4.59935L27.5993 23L46 41.4007L41.4007 46L23 27.5993L4.59935 46L0 41.4007L18.4006 23Z' fill='162989'/%3E%3C/svg%3E%0A");
  z-index: 99;
}
header .navbar-toggler.collapsed {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='38' viewBox='0 0 48 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.799988 22.0667H47.2V15.9333H0.799988V22.0667ZM0.799988 37.4H47.2V31.2667H0.799988V37.4ZM0.799988 0.600006V6.73334H47.2V0.600006H0.799988Z' fill='162989'/%3E%3C/svg%3E%0A");
}
header .navbar-toggler:focus {
  box-shadow: none;
}
header .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.4006 23L0 4.59935L4.59935 0L23 18.4006L41.4007 0L46 4.59935L27.5993 23L46 41.4007L41.4007 46L23 27.5993L4.59935 46L0 41.4007L18.4006 23Z' fill='162989'/%3E%3C/svg%3E%0A");
}
header .navbar-collapse li {
  list-style: none;
}
header .navbar-cuenta {
  position: relative;
}
header .navbar-cuenta:after {
  content: "";
  position: relative;
  width: 15.3px;
  height: 9.9px;
  background-image: url('data:image/svg+xml,<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.426138 0.5698C1.03488 -0.141562 2.07119 -0.193987 2.7408 0.452706L7.64668 5.19064L12.5525 0.452706C13.2222 -0.193987 14.2585 -0.141562 14.8672 0.5698C15.476 1.28116 15.4266 2.38208 14.757 3.02878L7.64668 9.8957L0.536361 3.02878C-0.133254 2.38208 -0.182602 1.28116 0.426138 0.5698Z" fill="%230880FF"/></svg>');
  display: block;
  float: right;
  top: 12px;
  left: -15px;
}
header #navbarSupportedContent {
  background-color: #FA0026;
  border-radius: 20px;
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.25);
  color: #fff;
  position: absolute;
  padding: 20px;
  text-align: right;
  top: 53px;
  right: 170px;
  gap: 14px;
  max-width: 142.52px;
}
header #navbarSupportedContent.show {
  display: grid;
}
header #navbarSupportedContent a {
  color: #fff;
  font-style: italic;
  font-weight: 700;
  font-family: "Asap", sans-serif;
  text-decoration: none;
  font-size: 1.2em;
}
header .btn-outline-light:hover {
  color: #D61225 !important;
}
header .nav-menu,
header .btn-sesion {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
  float: left;
}
header .nav-menu,
header .btn-sesion {
  width: calc(100% - 200px);
  margin-left: 29px;
  padding: 10px 0;
  font-family: "Asap", sans-serif;
}
header .nav-menu .navbar-toggler,
header .btn-sesion .navbar-toggler {
  display: none;
}
header .nav-menu .menu ul,
header .btn-sesion .menu ul {
  padding: 0;
  margin: 0 !important;
}
header .nav-menu .menu ul li a,
header .btn-sesion .menu ul li a {
  color: #0880FF;
  font-size: 1.3em;
  text-decoration: none;
  padding: 5px 20px;
  font-style: italic;
  font-weight: 700;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.27);
  text-wrap: nowrap;
  cursor: pointer;
}
header .nav-menu .menu ul li a:hover, header .nav-menu .menu ul li a.active,
header .btn-sesion .menu ul li a:hover,
header .btn-sesion .menu ul li a.active {
  color: #FA0026;
}
header .btn-sesion {
  width: calc(13% - 10px);
}
header .btn-sesion button {
  border: none;
  background-color: transparent;
  color: #162989;
  font-size: 1.1em;
  text-decoration: none;
  padding: 5px 20px;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
header .btn-sesion button:after {
  width: 19px;
  height: 12px;
  display: block;
  position: absolute;
  right: 20px;
  top: 21px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='17' viewBox='0 0 21 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.491 13.1371L10.5 14.0544L11.509 13.1371L18.018 7.21983C19.244 6.10531 19.3344 4.20796 18.2198 2.98199C17.1053 1.75602 15.208 1.66567 13.982 2.78019L10.5 5.94563L7.01803 2.78019C5.79206 1.66567 3.89471 1.75602 2.78019 2.98199C1.66567 4.20797 1.75602 6.10531 2.98199 7.21983L9.491 13.1371Z' fill='%23162989' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
}
header .btn-sesion button:not(.collapsed):after {
  transform: rotate(180deg);
}
header .btn-sesion .navbar-collapse {
  text-align: right;
  width: 100%;
}
header .btn-sesion .navbar-collapse a {
  color: #162989;
  font-size: 1em;
  text-decoration: none;
  padding: 15px 20px;
  display: block;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
  text-align: right;
}

.home-infografia {
  position: relative;
  display: flow-root;
}
.home-infografia img {
  position: relative;
  -o-object-fit: contain;
     object-fit: contain;
}
.home-infografia > img:nth-child(1) {
  width: 54%;
  left: 5%;
  z-index: 2;
  margin-top: 20px;
}
.home-infografia > img:nth-child(2) {
  width: 55%;
  margin-top: -9px;
  right: 0;
  position: absolute;
}
.home-infografia img.foto-premios {
  width: 55%;
  margin-top: -2%;
  right: 0;
}
.home-infografia > div {
  width: 80%;
  margin: 0 auto;
  display: flex;
}
.home-infografia > div img {
  width: 33.3%;
}
.home-infografia p {
  float: left;
  background-color: #FE0000;
  border-radius: 0 20px 20px 0;
  padding: 10px 15px;
  color: #fff;
  font-family: "Asap", sans-serif;
  font-size: 1.6em;
}

.menu-brand {
  position: absolute;
  max-width: 120px;
  top: -3px;
  left: -15px;
}
.menu-brand img {
  width: 100%;
}

.btn-flot-registrarme {
  position: fixed;
  right: 0;
  top: 180px;
  background-color: #0880FF;
  border-radius: 15px 15px 0 0;
  box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.42);
  -webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.42);
  -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.42);
  transform: rotate(-90deg) translateY(171%);
  padding: 0 2%;
  z-index: 4;
}
.btn-flot-registrarme a {
  color: #078BC2;
  font-size: 2.2em !important;
  margin-top: 5px;
  text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px, 0px 10px 15px rgba(0, 0, 0, 0.6);
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

#registroFlotante {
  background-color: #fff;
  border-radius: 18px;
  width: 90%;
  max-width: 349px;
  position: fixed;
  right: 40px;
  top: 100px;
  z-index: 20;
  box-shadow: 1px 4px 8px 0px rgba(0, 0, 0, 0.31);
  -webkit-box-shadow: 1px 4px 8px 0px rgba(0, 0, 0, 0.31);
  -moz-box-shadow: 1px 4px 8px 0px rgba(0, 0, 0, 0.31);
  max-height: calc(100vh - 123px);
  overflow: auto;
}
#registroFlotante:before {
  position: absolute;
  content: "";
  z-index: -2;
  display: block;
  width: calc(100% - 6px);
  height: -webkit-fill-available;
  left: 3px;
  top: 3px;
  background-color: #0880FF;
  border-radius: 15px;
  box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.42);
  -webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.42);
  -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.42);
}
#registroFlotante h2 {
  color: #078BC2;
  font-size: 2.2em !important;
  margin-top: 5px;
  text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px, 0px 10px 15px rgba(0, 0, 0, 0.6);
}
#registroFlotante.collapsing {
  height: inherit !important;
  width: 0;
  overflow: hidden;
}
#registroFlotante .btn-cerrar {
  font-weight: 700;
  font-family: "Asap", sans-serif;
  font-size: 3em;
  color: #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 12px;
  top: -13px;
  text-decoration: none;
  cursor: pointer;
}

.btn-flot-wp {
  position: fixed;
  bottom: 32px;
  left: 20px;
  padding: 12px 15px;
  background: #019A6E;
  border-radius: 50px;
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.25);
  z-index: 100;
  transition: all 0.5s ease-out;
  font-size: 0;
}
.btn-flot-wp a {
  font-family: "gilroybold";
  color: #fff;
  text-decoration: none;
  display: block;
}
.btn-flot-wp a:hover {
  color: #fff;
}
.btn-flot-wp:hover {
  font-size: 1em;
  color: #fff;
}
.btn-flot-wp:before {
  background-image: url(../img/registrar_mis_empaques.webp);
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: -60px;
  width: 127px;
  height: 61px;
}

footer {
  background-color: #fff;
  color: #0B315E;
  z-index: 3;
  position: relative;
  font-weight: 700;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-size: 1em;
}
footer a {
  color: #0B315E !important;
}

.productos {
  width: 94%;
  max-width: 1000px;
  float: right;
  margin: 50px 0 80px;
}
.productos h2 {
  background-color: #FA0026;
  color: #fff;
  font-style: italic;
  font-family: "Asap", sans-serif;
  padding: 5px 20px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: -15px;
  float: right;
  margin-right: 8%;
  z-index: 2;
  position: relative;
  text-shadow: none;
}
.productos div {
  background-color: #fff;
  border-radius: 15px 0 0 15px;
  display: inline-table;
  float: right;
  padding: 27px 8% 20px 5%;
  display: inline-table;
}
.productos div img {
  margin: 0 10px;
}

.productos-interna {
  background-color: #fff;
  padding: 0 10px 20px;
  border-radius: 0 20px 20px;
}
.productos-interna h2 {
  background-color: #FA0026;
  color: #fff;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-size: 1em !important;
  padding: 5px 20px;
  border-radius: 10px;
  display: inline-block;
  float: left;
  margin-right: 8%;
  z-index: 2;
  position: relative;
  text-shadow: none;
}
.productos-interna div {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-around;
}
.productos-interna img {
  -o-object-fit: contain;
     object-fit: contain;
}

#premios {
  margin-bottom: 5%;
}
#premios img {
  margin-right: -10px;
  max-width: 90%;
  margin-bottom: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}
#premios img + img + img {
  padding: 0 20px;
}

#mecanica {
  position: relative;
  display: grid;
}
#mecanica .paso-rombo {
  background-image: url(../img/rombo-ramo-blanco.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 50%;
  padding: 3% 5% 1% 5%;
  float: left;
}
#mecanica .paso-rombo h3 {
  color: #fff;
  background-color: #0880FF;
  padding: 2px 16px 2px 30px;
  border-radius: 5px;
  font-weight: 700;
  font-style: italic;
  font-family: "Asap", sans-serif;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 2.9em;
  margin: 0 auto 30px;
  position: relative;
}
#mecanica .paso-rombo h3:before {
  position: absolute;
  content: attr(numero);
  font-weight: 700 !important;
  color: #FA0026;
  font-size: 2.3em !important;
  left: -21%;
  top: -54%;
  text-shadow: rgb(255, 255, 255) 10px 0px 0px, rgb(255, 255, 255) 9.95004px 0.998334px 0px, rgb(255, 255, 255) 9.80067px 1.98669px 0px, rgb(255, 255, 255) 9.55336px 2.9552px 0px, rgb(255, 255, 255) 9.21061px 3.89418px 0px, rgb(255, 255, 255) 8.77583px 4.79426px 0px, rgb(255, 255, 255) 8.25336px 5.64642px 0px, rgb(255, 255, 255) 7.64842px 6.44218px 0px, rgb(255, 255, 255) 6.96707px 7.17356px 0px, rgb(255, 255, 255) 6.2161px 7.83327px 0px, rgb(255, 255, 255) 5.40302px 8.41471px 0px, rgb(255, 255, 255) 4.53596px 8.91207px 0px, rgb(255, 255, 255) 3.62358px 9.32039px 0px, rgb(255, 255, 255) 2.67499px 9.63558px 0px, rgb(255, 255, 255) 1.69967px 9.8545px 0px, rgb(255, 255, 255) 0.707372px 9.97495px 0px, rgb(255, 255, 255) -0.291995px 9.99574px 0px, rgb(255, 255, 255) -1.28844px 9.91665px 0px, rgb(255, 255, 255) -2.27202px 9.73848px 0px, rgb(255, 255, 255) -3.2329px 9.463px 0px, rgb(255, 255, 255) -4.16147px 9.09297px 0px, rgb(255, 255, 255) -5.04846px 8.63209px 0px, rgb(255, 255, 255) -5.88501px 8.08496px 0px, rgb(255, 255, 255) -6.66276px 7.45705px 0px, rgb(255, 255, 255) -7.37394px 6.75463px 0px, rgb(255, 255, 255) -8.01144px 5.98472px 0px, rgb(255, 255, 255) -8.56889px 5.15501px 0px, rgb(255, 255, 255) -9.04072px 4.2738px 0px, rgb(255, 255, 255) -9.42222px 3.34988px 0px, rgb(255, 255, 255) -9.70958px 2.39249px 0px, rgb(255, 255, 255) -9.89993px 1.4112px 0px, rgb(255, 255, 255) -9.99135px 0.415807px 0px, rgb(255, 255, 255) -9.98295px -0.583741px 0px, rgb(255, 255, 255) -9.8748px -1.57746px 0px, rgb(255, 255, 255) -9.66798px -2.55541px 0px, rgb(255, 255, 255) -9.36457px -3.50783px 0px, rgb(255, 255, 255) -8.96758px -4.4252px 0px, rgb(255, 255, 255) -8.481px -5.29836px 0px, rgb(255, 255, 255) -7.90968px -6.11858px 0px, rgb(255, 255, 255) -7.25932px -6.87766px 0px, rgb(255, 255, 255) -6.53644px -7.56803px 0px, rgb(255, 255, 255) -5.74824px -8.18277px 0px, rgb(255, 255, 255) -4.90261px -8.71576px 0px, rgb(255, 255, 255) -4.00799px -9.16166px 0px, rgb(255, 255, 255) -3.07333px -9.51602px 0px, rgb(255, 255, 255) -2.10796px -9.7753px 0px, rgb(255, 255, 255) -1.12153px -9.93691px 0px, rgb(255, 255, 255) -0.123887px -9.99923px 0px, rgb(255, 255, 255) 0.87499px -9.96165px 0px, rgb(255, 255, 255) 1.86512px -9.82453px 0px, rgb(255, 255, 255) 2.83662px -9.58924px 0px, rgb(255, 255, 255) 3.77978px -9.25815px 0px, rgb(255, 255, 255) 4.68517px -8.83455px 0px, rgb(255, 255, 255) 5.54374px -8.32267px 0px, rgb(255, 255, 255) 6.34693px -7.72764px 0px, rgb(255, 255, 255) 7.0867px -7.0554px 0px, rgb(255, 255, 255) 7.75566px -6.31267px 0px, rgb(255, 255, 255) 8.34713px -5.50686px 0px, rgb(255, 255, 255) 8.8552px -4.64602px 0px, rgb(255, 255, 255) 9.27478px -3.73877px 0px, rgb(255, 255, 255) 9.6017px -2.79415px 0px, rgb(255, 255, 255) 9.83268px -1.82162px 0px, rgb(255, 255, 255) 9.96542px -0.830894px 0px, 0px 10px 15px rgba(0, 0, 0, 0.6);
}
#mecanica .paso-rombo img {
  width: 85%;
}
#mecanica .paso-rombo p {
  color: #0B315E;
  font-size: 1.5em;
  font-weight: 700;
  font-style: italic;
  font-family: "Asap", sans-serif;
  padding: 6% 18% 8%;
  line-height: 1.1em;
}
#mecanica .paso-rombo:nth-child(1) {
  margin-left: -2%;
}
#mecanica .paso-rombo:nth-child(2) {
  position: absolute;
  transform: translate3d(50%, 55%, 0);
}
#mecanica .paso-rombo:nth-child(3) {
  margin-left: 4%;
  margin-right: -3%;
}
#mecanica .paso-rombo:nth-child(3) img {
  margin-top: -4%;
  width: 80%;
}
#mecanica .paso-rombo:nth-child(3) p {
  padding: 2% 16% 7%;
}

.mas-puntos {
  background-image: url(../img/rombo-ramo-blanco.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 90%;
  padding: 10% 2%;
  margin: 19% auto 5%;
  text-align: center;
}
.mas-puntos h3 {
  color: #0880FF;
  padding: 2px 16px 2px 30px;
  font-weight: 700;
  font-style: italic;
  font-family: "Asap", sans-serif;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 2.9em;
  position: relative;
  text-align: center;
  margin: 0 auto;
}
.mas-puntos p {
  color: #0B315E;
  font-size: 1.5em;
  font-weight: 700;
  font-style: italic;
  font-family: "Asap", sans-serif;
  padding: 2% 1%;
  line-height: 1.1em;
  margin: 0;
}
.mas-puntos img {
  -o-object-fit: contain;
     object-fit: contain;
}

#ranking ol,
#ranking ul {
  width: 94%;
  max-width: 610px;
  margin: 0 auto 100px;
}
#ranking ol li,
#ranking ul li {
  background-color: #0B315E;
  list-style-position: inside;
  margin-bottom: 3px;
  text-align: left;
  border-radius: 20px;
  padding: 2px 3%;
}
#ranking ol li::marker,
#ranking ul li::marker {
  color: #fff;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-size: 1.1em;
  font-weight: 700;
}
#ranking ol li p,
#ranking ul li p {
  color: #fff;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  display: inline-flex;
  margin-bottom: 0;
  width: 70%;
  padding-left: 1%;
}
#ranking ol li p + p,
#ranking ul li p + p {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.7em;
  text-align: right;
}
#ranking ol li p + p + p,
#ranking ul li p + p + p {
  width: 10%;
  font-size: 1em;
}

#reporte ul {
  width: 98%;
  max-width: 410px;
  margin: 0 auto 100px;
  padding: 0;
}
#reporte ul li {
  background-color: #0B315E;
  list-style: none;
  margin-bottom: 3px;
  text-align: left;
  border-radius: 20px;
  padding: 2px 3%;
  color: #fff;
  font-family: "Asap", sans-serif;
  font-style: italic;
}
#reporte ul li::marker {
  color: #fff;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-size: 1.1em;
  font-weight: 700;
}
#reporte ul li p {
  color: #fff;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  display: inline-flex;
  margin-bottom: 0;
  padding-left: 1%;
}
#reporte ul li p + p {
  width: -moz-fit-content;
  width: fit-content;
  text-align: right;
  width: 30%;
}
#reporte ul li p + p + p {
  font-size: 1.7em;
  width: 15%;
}
#reporte ul li p + p + p + p {
  font-size: 1em;
}

#countdown-container {
  position: absolute;
  right: 0;
  top: 0;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-size: 1.1em;
  font-weight: 700;
}
#countdown-container p {
  font-size: 0.85em;
  font-weight: 500;
  color: #0880FF;
  background-color: #FBD000;
  border-radius: 10px;
  margin-bottom: 0;
  z-index: 2;
  position: relative;
  padding: 0 5px;
}
#countdown-container > div {
  margin-top: -10px;
  background-color: #FA0026;
  border-radius: 0 0 20px 20px;
  color: #fff;
  padding: 13px 5px 5px;
  justify-content: space-evenly;
}
#countdown-container > div div span {
  font-size: 1.5em;
  display: block;
  line-height: 0.95em;
}
#countdown-container > div div span + span {
  font-size: 0.7em;
  font-weight: 300;
}

.form-principal div div {
  position: relative;
}
.form-principal label {
  position: absolute;
  left: 22px;
  font-size: 0.8em;
  color: #0B315E;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-weight: 600;
  text-align: left;
  text-wrap: nowrap;
  position: absolute;
  top: -10px;
  left: 15px;
  margin-bottom: 0;
  text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97998px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.5136px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;
}
.form-principal label a {
  color: #162989;
}
.form-principal input,
.form-principal select {
  border-radius: 5px;
  padding-top: 7px;
  max-height: 48px;
  font-style: italic;
  font-family: "Asap", sans-serif;
  font-weight: 600;
}
.form-principal input[type=checkbox] + label {
  font-size: 0.9em;
  position: relative;
  text-wrap: wrap;
  text-shadow: none;
  color: #fff;
  font-weight: 400;
}
.form-principal input[type=checkbox] + label a {
  color: #fff;
}
.form-principal .invalid-feedback {
  margin-top: -2px;
  color: #fc1d00;
}
.form-principal .invalid-feedback strong {
  font-weight: 500 !important;
  margin-left: 15px;
}
.form-principal .btn-registrarme {
  background-color: #0B315E;
  color: #fff;
  padding: 0px 40px;
  border-radius: 10px;
}
.form-principal a {
  font-style: italic;
  font-family: "Asap", sans-serif !important;
}

.steeps {
  padding-top: 30px;
}
.steeps h3 {
  color: #fff;
  background-color: #0880FF;
  padding: 2px 10px 2px 10px;
  font-weight: 700;
  font-style: italic;
  font-family: "Asap", sans-serif;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 2em;
  position: relative;
  text-align: left;
  border-radius: 10px;
}
.steeps p {
  color: #0B315E;
  font-size: 1.2em;
  font-weight: 700;
  font-style: italic;
  font-family: "Asap", sans-serif;
  line-height: 1.1em;
}

.foto {
  position: relative;
}
.foto img {
  width: 236px;
  height: 234px;
  border-radius: 20px;
  border: 2px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: #fff;
}
.foto::before {
  position: absolute;
  background-color: #D61225;
  color: #fff;
  font-family: "boldenvanregular";
  font-size: 1em;
  z-index: 3;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  padding: 2px 15px;
  text-align: center;
  border-radius: 13px;
  pointer-events: none;
}
.foto input[type=file] {
  width: 100%;
  height: 100%;
  min-height: 234px;
  position: absolute;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.foto-producto img {
  background-image: url(../img/ramo-brand.svg);
}
.foto-producto:before {
  content: "Cargar foto de factura";
}

.foto-lote img {
  background-image: url(../img/bg-lote.webp);
}
.foto-lote:before {
  content: "Cargar foto de lote";
}

.img-premios img {
  -o-object-fit: contain;
     object-fit: contain;
}

.pesos {
  position: relative;
}
.pesos:before {
  position: absolute;
  content: "";
  background-image: url(../img/signos_de_pesos.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 60px;
  width: 60px;
  display: block;
  right: 68%;
}
.pesos:after {
  position: absolute;
  content: "";
  background-image: url(../img/signos_de_pesos.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 60px;
  width: 60px;
  transform: rotate(-20deg);
  display: block;
  left: 68%;
  top: 0;
}

.codigos {
  flex-wrap: wrap;
}
.codigos li {
  list-style: none;
  margin: 0 5px;
  position: relative;
  margin-bottom: 20px;
}
.codigos li img {
  -o-object-fit: cover;
     object-fit: cover;
}
.codigos li p {
  background-color: #162989;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3px;
  padding: 10px 20px 2px 20px;
  border-radius: 20px;
}
.codigos li p:before {
  position: absolute;
  content: "Código";
  font-size: 0.6em;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.accordion .accordion-item {
  background-color: transparent;
  text-align: center;
}
.accordion .accordion-item:last-child .accordion-button {
  border-bottom: 2px solid #fff;
}
.accordion .accordion-button,
.accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  border-top: 2px solid #fff;
  color: #0B315E;
  font-style: italic;
  font-weight: 700;
  font-family: "Asap", sans-serif;
  font-size: 20px;
  letter-spacing: 0.02em;
}
.accordion .accordion-body {
  color: #0B315E;
  font-style: italic;
  font-weight: 600;
  font-family: "Asap", sans-serif;
}

.popup-content {
  background-color: #0880FF !important;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 1400px) {
  body {
    background-size: 100%;
  }
  #mecanica {
    max-width: 1600px;
    margin: 0 auto;
  }
  .mas-puntos {
    max-width: 1600px;
  }
}
@media only screen and (min-width: 990px) {
  .nav-menu .navbar-collapse.collapse:not(.show) {
    display: flex;
    flex-basis: auto;
  }
}
@media only screen and (max-width: 990px) {
  .nav-menu .navbar-collapse.collapse:not(.show) {
    display: flex;
    flex-basis: auto;
  }
  header .nav-menu .menu ul li a,
  header .btn-sesion .menu ul li a {
    font-size: 1em;
  }
}
@media only screen and (max-width: 768px) {
  .nav-menu .navbar-collapse.collapse:not(.show) {
    display: none;
  }
  .nav-menu .navbar-toggler {
    display: block;
  }
  .menu-brand {
    left: 36%;
    transform: translateX(-50%);
    max-width: 100px;
  }
  .navbar-toggler {
    display: block !important;
  }
  header .btn-sesion {
    width: auto;
    position: relative;
    float: right;
    padding-right: 10px;
    margin-right: 0;
  }
  header .btn-sesion button {
    font-size: 0.7em;
  }
  header .btn-sesion button:after {
    width: 13px;
    height: 12px;
    right: 11px;
    top: 19px;
  }
  header .btn-sesion .navbar-collapse {
    position: absolute;
    background-color: #FEF864;
    border-radius: 20px;
    box-shadow: 0px 3px 6px 0px rgb(0, 0, 0);
    width: -moz-fit-content;
    width: fit-content;
    right: 0%;
    top: 52px;
    left: inherit;
  }
  header .nav-menu {
    width: 96%;
    padding: 0;
    margin-top: 54px;
    margin-left: 7px;
  }
  header .navbar-collapse {
    width: 96%;
    left: 2%;
    top: 0;
    position: relative;
  }
  header .navbar-collapse ul {
    flex-direction: column;
  }
  header .navbar-collapse ul li {
    margin: 10px 0;
  }
  #countdown-container {
    right: -5%;
    top: -24%;
    transform: scale(0.8);
  }
  .home-infografia > img:nth-child(1) {
    width: 81%;
    height: -moz-fit-content;
    height: fit-content;
  }
  .home-infografia > img:nth-child(2) {
    width: 94%;
    margin-top: 53px;
    height: -moz-fit-content;
    height: fit-content;
  }
  .home-infografia img.foto-premios {
    width: 100%;
  }
  .home-infografia > div {
    width: 84%;
    margin-left: 0%;
    margin-top: 4%;
  }
  .home-infografia > div img {
    width: 49%;
    margin-right: -10%;
    height: -moz-fit-content;
    height: fit-content;
  }
  .home-infografia > div img + img {
    margin-top: 19%;
  }
  .home-infografia > div img + img + img {
    margin-top: 37%;
  }
  .home-infografia p {
    float: left;
    background-color: #FE0000;
    border-radius: 0 20px 20px 0;
    padding: 10px 15px;
    color: #fff;
    font-family: "Asap", sans-serif;
    font-size: 1.6em;
  }
  .productos h2 {
    font-size: 1.4em !important;
  }
  .productos div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  #mecanica .paso-rombo {
    width: 100%;
    margin-left: 0 !important;
    background-size: cover;
    transform: none !important;
    position: relative !important;
    margin-bottom: 10px;
    padding: 3% 10% 1% 10%;
  }
  #mecanica .paso-rombo h3 {
    font-size: 2.3em;
  }
  #mecanica .paso-rombo h3:before {
    font-size: 2em !important;
    left: -14%;
    top: -39%;
  }
  #mecanica .paso-rombo p {
    font-size: 1.1em;
    padding: 2% 18% 14%;
    max-width: 450px;
    margin: 0 auto 1rem;
  }
  #mecanica .paso-rombo img {
    width: 86% !important;
  }
  .mas-puntos {
    padding: 20% 2% 7%;
    background-size: cover;
    width: 100%;
  }
  .mas-puntos h3 {
    font-size: 2.1em;
  }
  .mas-puntos p {
    font-size: 1.2em;
  }
  #ranking ol {
    width: 100%;
    padding-left: 0;
  }
  #ranking ol li p {
    width: 53%;
    vertical-align: middle;
  }
  .empaques-registro img {
    width: 50% !important;
  }
  .empaques-registro p {
    width: 50% !important;
  }
  .pesos:after {
    left: inherit;
    right: 2%;
  }
  .pesos:before {
    right: inherit;
    left: 2%;
  }
  .btn-flot-registrarme {
    transform: rotate(-90deg) translateY(143%);
  }
  .btn-flot-registrarme a {
    font-size: 1.8em !important;
  }
  #registroFlotante {
    right: 7%;
  }
  #registroFlotante::before {
    height: 115%;
  }
  .steeps > div {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}
@media only screen and (max-height: 600px) {
  #registroFlotante:before {
    height: 639px;
  }
}
@media print, (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  /*
  * Don't show links that are fragment identifiers,
  * or use the `javascript:` pseudo protocol
  */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
  * Printing Tables:
  * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
  */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
    text-shadow: none;
  }
  h2,
  h3 {
    page-break-after: avoid;
    text-shadow: none;
  }
}/*# sourceMappingURL=main.css.map */