@charset "UTF-8";
.confeti-bg {
  position: relative;
}
.confeti-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 5rem);
  background-image: url("/images/confeti.gif");
  background-size: cover; /* Para ajustar la imagen al tamaño de la ventana del navegador */
  background-repeat: no-repeat;
  filter: opacity(25%);
  z-index: -1;
}

main .container.galeria .wrapper {
  flex-flow: column;
}
main .container.galeria .wrapper h2 {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  font-size: 3rem;
}
main .container.galeria .wrapper .fotos {
  border: solid 5px gray;
  height: 30rem;
  background-color: black;
  display: flex;
  flex-flow: row;
}
main .container.galeria .wrapper .fotos > * {
  width: 50%;
  height: 100%;
}
main .container.galeria .wrapper .fotos .descripcion {
  padding: 0.5rem;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  color: white;
}
main .container.galeria .wrapper .fotos .descripcion h3 {
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
}
main .container.galeria .wrapper .fotos .descripcion p {
  font-size: 1.5rem;
}
main .container.galeria2 .wrapper {
  flex-flow: column;
}
main .container.galeria2 .wrapper h2 {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  font-size: 3rem;
}
main .container.galeria2 .wrapper .fotos {
  border: solid 5px gray;
  height: 30rem;
  background-color: black;
  display: flex;
  flex-flow: row;
}
main .container.galeria2 .wrapper .fotos > * {
  width: 50%;
  height: 100%;
}
main .container.ofertas {
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  background: linear-gradient(196deg, rgba(255, 255, 255, 0) 40%, rgb(255, 179, 0) 40%, rgb(255, 179, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(170deg, rgba(255, 255, 255, 0) 50%, rgb(0, 86, 255) 50%, rgb(0, 86, 255) 60%, rgba(255, 255, 255, 0) 60%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
main .container.ofertas .wrapper {
  flex-flow: column;
}
main .container.ofertas .wrapper h2 {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  font-size: 3rem;
}
main .container.ofertas .wrapper .grid {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, max(15rem, 20%)), 1fr));
}
main .container.ofertas .wrapper .grid .oferta {
  height: 35rem;
  background-color: white;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-flow: column;
  border: solid 5px black;
}
main .container.ofertas .wrapper .grid .oferta h3 {
  background: black;
  color: white;
  padding: 0.5rem 0;
  font-size: 2.5rem;
  width: 100%;
  text-align: center;
}
main .container.ofertas .wrapper .grid .oferta > .imagen-producto {
  height: 10rem;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px gray;
}
main .container.ofertas .wrapper .grid .oferta > .imagen-producto img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
main .container.ofertas .wrapper .grid .oferta > p {
  padding: 0.5rem;
  font-size: 2rem;
}
main .container.ofertas .wrapper .grid .oferta .precio {
  border-top: solid 1px gray;
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: row;
  width: 100%;
  padding: 1rem 0.5rem 1rem 0.5rem;
}
main .container.ofertas .wrapper .grid .oferta .precio p {
  font-size: 2.5rem;
}
main .container.ofertas .wrapper .grid .oferta .precio button {
  color: white;
  background-color: black;
}
main .container.ofertas .wrapper .grid .oferta .precio button:hover {
  color: black;
  background-color: white;
  box-shadow: 0px 0px 1px 5px rgba(0, 0, 0, 0.75);
}
main .container.items .wrapper {
  flex-flow: column;
  /*
  & > svg {
      width: 100%;

      & text {
          font-size: 3rem;
          font-weight: 0;
          fill: black;
          stroke: black;
          stroke-linecap: butt;
          stroke-linejoin: round;
          stroke-width: 3;
          stroke-dasharray: 450;
          stroke-dashoffset: 0;
          animation: reveal 6s infinite linear both;
      }

      @keyframes reveal {
          0% {
            stroke-dashoffset: 0;
          }

          20% {
            stroke-dashoffset: 0;
          }

          50% {
            stroke-dashoffset: 450;
          }

          80% {
            stroke-dashoffset: 900;
          }

          90% {
            stroke-dashoffset: 900;
          }

          100% {
            stroke-dashoffset: 900;
          }
      }
  }
  */
}
main .container.items .wrapper > h2 {
  font-size: 2.5rem;
}
main .container.items .wrapper > h2 > span {
  position: relative;
  overflow: visible;
}
main .container.items .wrapper > h2 > span svg {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 80%;
  overflow: visible;
}
main .container.items .wrapper > h2 > span svg .stroke {
  stroke: #000;
  stroke-width: 0.3em;
  stroke-dasharray: 822;
  stroke-dashoffset: 822;
  animation: underlineAnimation 3s 1s linear forwards;
  animation-iteration-count: infinite;
}
@keyframes underlineAnimation {
  0% {
    stroke-dashoffset: 822;
  }
  25% {
    stroke-dashoffset: 822;
  }
  50% {
    stroke-dashoffset: 575;
  }
  75% {
    stroke-dashoffset: 575;
  }
  100% {
    stroke-dashoffset: 822;
  }
}
main .container.items .wrapper > .titulo {
  display: flex;
  flex-flow: row;
  height: 5.5rem !important;
  margin-top: 10rem !important;
}
main .container.items .wrapper > .titulo h2 {
  font-size: 2.5rem;
}
main .container.items .wrapper > .titulo > svg .st0 {
  animation: moveRightAndBack 4s linear infinite; /* Ajusta la duración de la animación según tus necesidades */
  transform: scale(0.5) translateX(88%) translateY(25%);
}
main .container.items .wrapper > .titulo > svg .st1 {
  animation: moveRightAndBack 4s linear infinite; /* Ajusta la duración de la animación según tus necesidades */
  transform: scale(0.5) translateX(112%) translateY(34%);
}
main .container.items .wrapper > .titulo > svg .st2 {
  animation: moveRightAndBack 4s linear infinite; /* Ajusta la duración de la animación según tus necesidades */
  transform: scale(0.5) translateX(100%) translateY(50%);
}
main .container.items .wrapper > .titulo > svg text {
  font-size: 2.5rem;
  background-color: black !important;
  fill: url(#gradient);
  animation: gradientAnimation 4s linear infinite;
  background: linear-gradient(to right, #FF0000, #00FF00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
main .container.items .wrapper h2 {
  width: 100%;
  text-align: center;
  padding: 1.5rem 0;
}
main .container.items .wrapper .items {
  width: 100%;
  display: flex;
  flex-flow: column;
  border: solid 3px black;
  width: 100%;
  padding: 1rem;
  background-color: white;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
}
main .container.items .wrapper .items .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
}
main .container.items .wrapper .items .item h3 {
  width: 50%;
  font-size: 2rem;
}
main .container.items .wrapper .items .item p {
  font-size: 2rem;
}
main .container.items .wrapper .items .item select, main .container.items .wrapper .items .item i {
  font-size: 1.5rem;
}
main .container.items .wrapper .items .item button {
  display: flex;
  align-items: center;
}
main .container.items .wrapper .total {
  width: 100%;
  display: flex;
  flex-flow: column;
  padding: 1rem;
  border-bottom: solid 3px black;
  border-left: solid 3px black;
  border-right: solid 3px black;
  background-color: white;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
}
main .container.items .wrapper .total > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row wrap;
  width: 100%;
}
main .container.items .wrapper .total > div p {
  font-size: 2.5rem;
}
main .container.items .wrapper .total > div h3 {
  font-size: 2.5rem;
}
main .container.items .wrapper .total > form {
  display: flex;
  justify-content: center;
  flex-flow: column;
  width: 100%;
}
main .container.items .wrapper .total > form label {
  width: 100%;
  margin-top: 1rem;
  font-size: 2rem;
}
main .container.items .wrapper .total > form input[type=date] {
  font-size: 2rem;
  margin: 1rem auto;
  margin-left: 0;
  margin-right: auto;
  max-width: 100%;
}
main .container.items .wrapper .total > form button {
  background-color: black;
  color: white;
  margin-left: auto;
  margin-right: auto;
}
main .container.items .wrapper .total > form button:hover {
  background-color: white;
  outline: solid 4px black;
  color: black;
}
main .container.formulario .wrapper {
  display: flex;
  flex-flow: column;
}
main .container.formulario .wrapper h2, main .container.formulario .wrapper form {
  width: 100%;
}
main .container.formulario .wrapper h2 {
  text-align: center;
  font-size: 2.5rem;
  padding: 1rem 0;
}
main .container.formulario .wrapper form {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}
main .container.formulario .wrapper form label {
  width: 100%;
  text-align: left;
  font-size: 2rem;
}
main .container.formulario .wrapper form input {
  height: 2.5rem;
  font-size: 2rem;
}
main .container.formulario .wrapper form button {
  margin: 0 auto;
  color: white;
  background-color: black;
}
main .container.formulario .wrapper form button:hover {
  color: black;
  background-color: white;
  box-shadow: 0px 0px 1px 5px rgba(0, 0, 0, 0.75);
}
main .container.admin-panel {
  margin-top: 7rem;
}
main .container.admin-panel .wrapper {
  display: flex;
  flex-flow: column;
}
main .container.admin-panel .wrapper > h1 {
  width: 100%;
  font-size: 3rem;
  text-align: center;
}
main .container.admin-panel .wrapper > .evento {
  display: flex;
  flex-flow: column;
  border: solid 2px black;
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
main .container.admin-panel .wrapper > .evento > .carro-evento {
  border-top: solid 2px black;
}
main .container.admin-panel .wrapper > .evento > .carro-evento > .carro-evento-item {
  font-size: 2rem;
  display: flex;
  justify-content: space-around;
  flex-flow: row;
}
main .container.admin-panel .wrapper > .evento > .carro-evento > .estado-evento {
  display: flex;
  flex-flow: column;
}
main .container.admin-panel .wrapper > .evento > .carro-evento > .estado-evento > div {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: row wrap;
}
main .container.admin-panel .wrapper > .evento > .carro-evento > .estado-evento > div > p {
  font-size: 2rem;
}
main .container.admin-panel .wrapper > .evento > .carro-evento > .estado-evento > div > input {
  outline: 3px solid black;
  width: 1.5rem;
  height: 1.5rem;
}
main .container.productos-admin-panel {
  margin-top: 7rem;
}
main .container.productos-admin-panel .wrapper {
  display: flex;
  flex-flow: column;
}
main .container.productos-admin-panel .wrapper > h1 {
  width: 100%;
  font-size: 3rem;
  text-align: center;
}
main .container.productos-admin-panel .wrapper > .registrar-nuevo, main .container.productos-admin-panel .wrapper > .producto-edicion {
  padding: 1rem;
  display: flex;
  flex-flow: column;
  width: 100%;
  border: solid 2px black;
  margin-top: 2rem;
}
main .container.productos-admin-panel .wrapper > .registrar-nuevo > h2, main .container.productos-admin-panel .wrapper > .producto-edicion > h2 {
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
}
main .container.productos-admin-panel .wrapper > .registrar-nuevo > form, main .container.productos-admin-panel .wrapper > .producto-edicion > form {
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
}
main .container.productos-admin-panel .wrapper > .registrar-nuevo > form > h3, main .container.productos-admin-panel .wrapper > .registrar-nuevo > form > input[type=text], main .container.productos-admin-panel .wrapper > .registrar-nuevo > form > input[type=file], main .container.productos-admin-panel .wrapper > .producto-edicion > form > h3, main .container.productos-admin-panel .wrapper > .producto-edicion > form > input[type=text], main .container.productos-admin-panel .wrapper > .producto-edicion > form > input[type=file] {
  width: 100%;
  height: 2rem;
}
main .container.productos-admin-panel .wrapper > .registrar-nuevo > form > input[type=text], main .container.productos-admin-panel .wrapper > .registrar-nuevo > form > input[type=file], main .container.productos-admin-panel .wrapper > .producto-edicion > form > input[type=text], main .container.productos-admin-panel .wrapper > .producto-edicion > form > input[type=file] {
  height: 2.5rem;
  font-size: 2rem;
}
main .container.productos-admin-panel .wrapper > .registrar-nuevo > form > h3, main .container.productos-admin-panel .wrapper > .producto-edicion > form > h3 {
  text-align: left;
  font-size: 2rem;
}
main .container.productos-admin-panel .wrapper > .registrar-nuevo > form > button, main .container.productos-admin-panel .wrapper > .producto-edicion > form > button {
  margin: 0 auto;
  background-color: black;
  color: white;
  transition: 0.5s;
}
main .container.productos-admin-panel .wrapper > .registrar-nuevo > form > button:hover, main .container.productos-admin-panel .wrapper > .producto-edicion > form > button:hover {
  background-color: white !important;
  color: black !important;
  outline: solid 5px black;
}
main .container.form-page .wrapper {
  margin-top: 3rem;
  border: solid 4px black;
  background-color: white;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-flow: column;
}
main .container.form-page .wrapper > h1 {
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  font-size: 2.25rem;
}
main .container.form-page .wrapper > form {
  display: flex;
  flex-flow: column;
  padding: 0 1rem;
  padding-bottom: 1rem;
}
main .container.form-page .wrapper > form > input, main .container.form-page .wrapper > form > h2 {
  font-size: 1.75rem;
}
main .container.form-page .wrapper > form > * + * {
  margin-top: 1rem !important;
}
main .container.form-page .wrapper > form > button {
  margin: 0 auto;
  background-color: black;
  color: white;
}
main .container.form-page .wrapper > form > button:hover {
  background-color: white;
  color: black;
  outline: solid 4px black;
}
main .container.form-page .wrapper > form > p {
  font-size: 1.5rem;
}
main .container.form-page .wrapper > form > p > a {
  font-size: 1.5rem;
  text-decoration: underline !important;
}
main .container.eventos-usuario .wrapper {
  margin-top: 2rem;
  display: flex;
  flex-flow: column;
}
main .container.eventos-usuario .wrapper h2 {
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
}
main .container.eventos-usuario .wrapper .eventos {
  background-color: white;
  border: solid 3px black;
  margin-top: 2rem;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
  padding: 1rem;
  width: 100%;
  display: flex;
  flex-flow: column;
}
main .container.eventos-usuario .wrapper .eventos .not-loggedin {
  width: 100%;
}
main .container.eventos-usuario .wrapper .eventos .not-loggedin h3 {
  width: 100%;
  text-align: center;
  font-size: 2rem;
}
main .container.eventos-usuario .wrapper .eventos .not-loggedin h3 a {
  text-decoration: underline;
  font-size: 2rem;
}
main .container.eventos-usuario .wrapper .eventos .evento {
  width: 100%;
  display: flex;
  flex-flow: column;
}
main .container.eventos-usuario .wrapper .eventos .evento h3 {
  width: 100%;
  font-size: 2.25rem;
  text-align: center;
}
main .container.eventos-usuario .wrapper .eventos .evento h4 {
  width: 100%;
  font-size: 2rem;
  text-align: left;
}
main .container.eventos-usuario .wrapper .eventos .evento .productos {
  margin: 1rem 0;
}
main .container.eventos-usuario .wrapper .eventos .evento .productos .producto {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-flow: row;
}
main .container.eventos-usuario .wrapper .eventos .evento .productos .producto p {
  font-size: 1.75rem;
}
main .container.eventos-usuario .wrapper .eventos .evento .total {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-flow: row;
}
main .container.eventos-usuario .wrapper .eventos .evento .total p {
  font-size: 1.75rem;
}
main .container.eventos-usuario .wrapper .eventos .evento + .evento {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: solid 3px black;
}

footer {
  margin-top: 3rem;
}
footer .container.footer-info {
  background-color: black;
}
footer .container.footer-info .wrapper {
  display: flex;
  justify-content: center;
  flex-flow: column;
  padding-bottom: 2rem;
}
footer .container.footer-info .wrapper h1 {
  color: white;
  font-size: 3rem;
  width: 100%;
  text-align: center;
  padding: 1.5rem 0;
}
footer .container.footer-info .wrapper .datos {
  width: 100%;
  display: flex;
  flex-flow: row;
  gap: 2rem;
  height: 25rem;
}
footer .container.footer-info .wrapper .datos .mapa {
  max-width: 45%;
  min-width: 45%;
  width: 45%;
  height: 100%;
}
footer .container.footer-info .wrapper .datos .mapa iframe {
  width: 100%;
  height: 100%;
}
footer .container.footer-info .wrapper .datos .datos-contacto {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  padding-top: 1rem;
  width: 55%;
  height: 100%;
}
footer .container.footer-info .wrapper .datos .datos-contacto h2 {
  color: white;
  font-size: 2.5rem;
  max-width: 100%;
}
footer .container.footer-info .wrapper .datos .datos-contacto h2 span {
  word-wrap: break-word;
}/*# sourceMappingURL=main.css.map */