@charset "UTF-8";
@font-face {
  font-family: "jersey15";
  src: url("../fonts/jersey15-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sufrimeda";
  src: url("../fonts/sufrimeda.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  color: inherit;
  outline: none !important;
}

p,
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

img {
  width: 100%;
  height: auto;
}

html {
  font-size: 62.5%;
  line-height: 1.4;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  color: #0c0c0c;
  font-family: "jersey15", sans-serif;
  font-size: 1.4rem;
}
@media (min-width: 768px) {
  body {
    font-size: 2.2rem;
  }
}

.header {
  position: fixed;
  inset: 0 0 auto 0; /* height: 130px; <- QUITAR: ahora el alto total es anuncio + 130px */
  display: grid;
  grid-template-columns: 1fr auto; /* izq: logo | der: carrito */
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  z-index: 1100; /* ===== Anuncio arriba a 100% ===== */
}
.header .anuncio {
  grid-column: 1/-1;
  grid-row: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0.35rem 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 100; /* SIN fondo extra ni cambios de tipografía */
}
.header .logo {
  grid-column: 1;
  grid-row: 2;
  justify-self: start; /* pegado a la izquierda */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding-left: 0;
}
.header .logo img {
  height: 100px;
  display: block;
}
.header .carrito {
  grid-column: 2;
  grid-row: 2;
  justify-self: end; /* pegado a la derecha */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  padding-right: max(env(safe-area-inset-right), 0px);
}
.header .carrito__count {
  position: absolute;
  top: 16px;
  right: 40px;
  min-width: 20px;
  height: 20px;
  color: #f0ead8;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 0.25rem;
}
.header .carrito img {
  width: 85px;
  height: 100px;
  display: block;
}

.contenedor {
  width: 100%;
  flex: 1;
}

.modal {
  z-index: 1250;
  padding-left: 0;
}

.modal-open {
  height: 100vh;
}

.modal-header {
  padding: 0.5rem;
  border-bottom: none;
  background-color: none;
}

.modal-dialog {
  width: 100%;
  max-width: 120vh;
  height: 80vh;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .modal-dialog {
    width: 100%;
    max-width: 40vh;
    margin: 10rem auto;
    height: 100%;
  }
}

.suscripcion_modal {
  padding: 0;
  background-repeat: no-repeat;
  height: 84vh;
  background-size: auto 100%;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .suscripcion_modal {
    background-size: 40vh auto;
    height: 60vh;
  }
}
.suscripcion_modal .form_susc {
  width: 21rem;
  margin: auto;
  margin-right: 3.5rem;
  padding-top: 17.6rem;
}
@media screen and (max-width: 768px) {
  .suscripcion_modal .form_susc {
    padding: 25rem 0 0 0;
  }
}
.suscripcion_modal .form_susc .texto {
  text-align: center;
  font-size: 1rem;
  text-transform: uppercase;
}
.suscripcion_modal .form_susc .form-btn {
  width: 21rem;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.7607843137);
  border: 1px solid #ffffff;
  color: #0c0c0c;
  text-align: center;
  margin-bottom: 25px;
  border-bottom: 1px solid #cccccc;
}
.suscripcion_modal .form_susc .btn-danger {
  background: #28442e;
  border: none;
  margin-top: 1.5rem;
  padding: 0.3rem 2rem;
  height: 2.7rem;
}
.suscripcion_modal .xmail,
.suscripcion_modal .gracias,
.suscripcion_modal .repetido {
  color: #d50202;
  margin-top: 1rem;
  font-size: 1.1rem;
}

.col-sm-10,
.col-sm-2 {
  width: 100%;
  margin-bottom: 1rem;
}

.alert-danger {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #cccccc;
  width: 40rem;
}

.col-sm-10 {
  padding: 0 1rem 1rem 1rem;
}

.btn-success {
  color: #ffffff;
  background-color: #b01116;
  border-color: #b01116;
}

.vacio {
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
}
.vacio .btn_vacio {
  background-color: #737373;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
}
.vacio .btn_vacio:hover {
  background-color: #0c0c0c;
  color: #ffffff;
}

/* carrusel horizontal full-viewport */
.banner {
  position: relative;
  display: flex;
  gap: 0;
  height: 100vh;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.banner::-webkit-scrollbar {
  display: none;
}
.banner img {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  scroll-snap-align: center;
  display: block;
}

.banner.mob,
.banner.desk {
  height: 100vh;
}
.banner.mob .slick-list, .banner.mob .slick-track, .banner.mob .slick-slide,
.banner.desk .slick-list,
.banner.desk .slick-track,
.banner.desk .slick-slide {
  height: 100vh;
}
.banner.mob img, .banner.mob video,
.banner.desk img,
.banner.desk video {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover; /* recorte elegante para full-viewport */
}

.cta {
  width: 100%;
  position: fixed;
  top: 75vh;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: inherit;
  z-index: 1000;
}
.cta h1 {
  font-family: "Sufrimeda", serif;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-weight: 400;
  font-size: 36px;
  pointer-events: none;
}
.cta img {
  width: 220px;
  height: auto;
  display: block;
  margin-inline: auto;
  pointer-events: none;
}

.menu {
  position: fixed;
  bottom: 0rem;
  width: 100%;
  height: 70px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(12, 12, 12, 0.168627451);
  z-index: 1000;
  cursor: pointer;
  border: none;
}
.menu img {
  width: 60px;
  height: 60px;
  display: block;
}

/* Evita scroll del body cuando el overlay está abierto */
.no-scroll {
  overflow: hidden;
}

/* Overlay: blanco translúcido con blur, centrado */
.menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.menu__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.menu__overlay {
  /* Contenido centrado */
}
.menu__overlay .menu__nav {
  width: 100%;
}
.menu__overlay .menu__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center; /* centra el contenedor */
}
.menu__overlay .menu__item {
  text-align: center;
}
.menu__overlay {
  /* centra el texto de cada item */
  /* Enlaces principales y toggles (mismo look&feel) */
}
.menu__overlay .menu__item a,
.menu__overlay .menu__item.has-sub > a {
  color: #0c0c0c;
  font-family: "Sufrimeda", serif;
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
}
.menu__overlay {
  /* Caret para items con submenú */
}
.menu__overlay .menu__item.has-sub > a {
  position: relative;
  display: inline-block; /* no ocupar todo el ancho */
  padding-right: 2rem; /* espacio para el caret */
}
.menu__overlay .menu__item.has-sub > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid #0c0c0c;
  border-bottom: 2px solid #0c0c0c;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.2s ease;
}
.menu__overlay .menu__item.has-sub.is-open > a::after {
  transform: translateY(-50%) rotate(-135deg);
}
.menu__overlay {
  /* Submenús centrados */
}
.menu__overlay .menu__item.has-sub .menu__sub {
  display: none; /* se muestra vía JS (slideToggle) */
  margin-top: 0.5rem;
  text-transform: none;
  text-align: center;
}
.menu__overlay .menu__item.has-sub .menu__sub li + li {
  margin-top: 0.5rem;
}
.menu__overlay .menu__item.has-sub .menu__sub a {
  font-size: 1.6rem;
  display: inline-block;
  padding: 0.2rem 1rem;
  border-radius: 0.5rem;
  font-family: "jersey15", sans-serif;
}
.menu__overlay {
  /* Botón cerrar: misma posición que el botón .menu */
}
.menu__overlay .menu__close {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 1002;
}
.menu__overlay .menu__close img {
  width: 60px;
  height: 60px;
  display: block;
}

.floating-wpp {
  z-index: 9999;
  position: fixed;
  bottom: 0.7rem;
  left: 1.5rem;
  font-size: 1.5rem;
  transition: bottom 0.2s;
}
.floating-wpp .floating-wpp-button {
  position: relative;
  border-radius: 50%;
  box-shadow: 1px 1px 4px rgba(60, 60, 60, 0.4);
  transition: box-shadow 0.2s;
  cursor: pointer;
  overflow: hidden;
}
.floating-wpp .floating-wpp-button img,
.floating-wpp .floating-wpp-button svg {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.floating-wpp:hover {
  bottom: 1.7rem;
}
.floating-wpp:hover .floating-wpp-button {
  box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.4);
}
.floating-wpp .floating-wpp-popup {
  border-radius: 6px;
  background: #fff;
  position: absolute;
  overflow: hidden;
  padding: 0;
  box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
  width: 0;
  height: 0;
  bottom: 0;
  opacity: 0;
  transform-origin: bottom;
  transition: bottom 0.1s ease-out, opacity 0.2s ease-out;
}
.floating-wpp .floating-wpp-popup.active {
  padding: 0 12px 12px;
  width: 280px;
  height: auto;
  bottom: 70px;
  right: 0px;
  opacity: 1;
}
.floating-wpp .floating-wpp-popup.active .floating-wpp-message {
  background: #fff;
  padding: 8px;
  border-radius: 0 5px 5px 5px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  opacity: 1;
  transition: opacity 0.2s;
}
.floating-wpp .floating-wpp-popup .floating-wpp-head {
  display: none;
  text-align: right;
  color: #fff;
  padding: 3px 5px 0 0;
  cursor: pointer;
}
.floating-wpp .floating-wpp-popup .floating-wpp-input-message {
  background: #fff;
  margin: -2px -19px -15px -17px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}
.floating-wpp .floating-wpp-popup .floating-wpp-input-message textarea {
  border: 1px solid #ccc;
  border-radius: 0.4rem;
  box-shadow: none;
  padding: 0.8rem;
  margin: 1rem 0;
  width: 100%;
  max-width: 100%;
  font: inherit;
  resize: none;
  font-size: 1.6rem;
}
.floating-wpp .floating-wpp-popup .floating-wpp-input-message textarea.scroll::-webkit-scrollbar {
  display: none;
}
.floating-wpp .floating-wpp-btn-send {
  margin-left: 1.2rem;
  font-size: 0;
  cursor: pointer;
}

/* ---------- Título ---------- */
.titulo_productos {
  color: #0c0c0c;
  text-align: center;
  text-transform: uppercase;
  font-size: 3rem;
  padding: 13rem 0 2rem;
  font-family: "Sufrimeda", serif;
}
.titulo_productos img {
  max-width: 33rem;
  width: 100%;
  display: block;
  margin-inline: auto;
}

.titulo_recomendado {
  color: #0c0c0c;
  text-align: center;
  text-transform: uppercase;
  font-size: 3rem;
  padding: 4rem 0 2rem;
  font-family: "Sufrimeda", serif;
}

/* ---------- Migas / retorno ---------- */
.retorno {
  width: 100%;
  max-width: 1200px;
  padding: 1rem 4rem;
  font-size: 2rem;
  margin: 1rem auto 0;
  margin-top: 14rem;
  text-align: center;
}
.retorno ul {
  margin: 0;
}
.retorno li {
  display: inline-block;
  padding: 0 0.5rem;
}
.retorno a {
  text-decoration: none;
  color: #0c0c0c;
}

/* ---------- Grid de productos ---------- */
.productos {
  width: 100%;
  max-width: 140rem;
  margin: 0 auto;
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  text-align: center;
  margin-bottom: 8rem;
}
.productos .producto {
  width: 24%;
  padding: 0.3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .productos .producto {
    width: 40%;
  }
}
.productos .producto .imagen {
  width: 100%;
  overflow: hidden;
}
.productos .producto .imagen .img_agotado {
  opacity: 0.5;
}
.productos .producto .imagen img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}
.productos .producto .imagen img:hover {
  transform: scale(1.03);
}
.productos .producto .nombre {
  padding: 0.5rem 0.5rem 0;
  text-align: center;
}
.productos .producto .nombre a {
  color: #0c0c0c;
  font-size: 1.2rem;
  text-decoration: none;
  font-family: "Sufrimeda", serif;
}
@media (min-width: 768px) {
  .productos .producto .nombre a {
    font-size: 2rem;
  }
}
.productos .producto .precio {
  padding: 0.5rem 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  font-family: "Sufrimeda", serif;
  justify-content: center;
}
.productos .producto .precio .normal {
  font-size: 1.2rem;
}
@media (min-width: 768px) {
  .productos .producto .precio .normal {
    font-size: 2rem;
  }
}
.productos .producto .precio .normal_of {
  font-size: 1.2rem;
  color: #e75353;
}
@media (min-width: 768px) {
  .productos .producto .precio .normal_of {
    font-size: 2rem;
  }
}
.productos .producto .precio .oferta {
  text-decoration: line-through;
  font-size: 1rem;
  margin-left: 1rem;
}
@media (min-width: 768px) {
  .productos .producto .precio .oferta {
    font-size: 1.6rem;
  }
}
.productos .producto .precio .onsale {
  color: #ffffff;
  font-size: 1.4rem;
  position: absolute;
  background: #e75353;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  top: 1rem;
  left: 1rem;
}
.productos .producto .precio a {
  color: #0c0c0c;
  text-transform: uppercase;
  font-size: 1.2rem;
  text-decoration: none;
}
.productos .producto .precio .agotado {
  background: #808080;
  border-radius: 1rem;
  font-size: 1.2rem;
  padding: 0.2rem;
  position: absolute;
  width: 89%;
  top: 11rem;
  color: #fff;
}
@media (min-width: 768px) {
  .productos .producto .precio .agotado {
    font-size: 1.8rem;
    top: 23rem;
  }
}
.productos .vacio {
  padding: 2rem;
  min-height: 30rem;
}
.productos .producto_duo {
  border: 1px solid #cccccc;
  border-radius: 0.5rem;
  padding: 0.5rem;
  width: 12%;
}
@media (max-width: 768px) {
  .productos .producto_duo {
    width: 30%;
  }
}
.productos .producto_duo .nombre {
  padding: 1rem;
  text-align: center;
}

/* ---------- Mensajes / botones duo ---------- */
.msj_duo {
  color: #e82e20;
  font-size: 1.4rem;
  padding: 1rem 0;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}

.btns_duo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
}
.btns_duo .limpiar_duo,
.btns_duo .aceptar_duo {
  padding: 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 1.4rem;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}
.btns_duo .limpiar_duo {
  background: #0c0c0c;
  color: #ffffff;
}
.btns_duo .limpiar_duo:hover {
  background: #b3b3b3;
  color: #0c0c0c;
}
.btns_duo .aceptar_duo {
  background: #d50202;
  color: #ffffff;
}
.btns_duo .aceptar_duo:hover {
  background: #b3b3b3;
  color: #0c0c0c;
}

.envio-gratis {
  background: #e9e9e9;
  border-radius: 0.75rem;
  padding: 1.5rem 1rem;
  margin: 1.5rem 0;
}
.envio-gratis__texto {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.envio-gratis__bar {
  position: relative;
  height: 10px;
  background: #ffffff;
  border-radius: 999px;
  overflow: visible;
}
.envio-gratis__fill {
  display: block;
  height: 100%;
  width: 0;
  background: #000000;
  transition: width 0.35s ease;
}
.envio-gratis__tick {
  position: absolute;
  right: 0;
  top: 50%;
  width: 2px;
  height: 16px;
  background: #999;
  transform: translateY(-50%);
}
.envio-gratis__icon {
  position: absolute;
  top: 0;
  transform: translate(-50%, -40%);
  width: 30px;
  height: 30px;
  background: url("../../assets/images/svg/iconos/camion.svg") no-repeat center/contain;
  pointer-events: none;
}

@media (min-width: 768px) {
  .envio-gratis {
    padding: 1rem;
  }
}
.producto-page {
  width: 100%;
  padding: 0 2rem;
  margin: 0 auto;
  margin-bottom: 10rem;
}
@media (min-width: 768px) {
  .producto-page {
    max-width: 100rem;
  }
}
.producto-page .product {
  width: 100%;
}
@media (min-width: 768px) {
  .producto-page .product {
    display: flex;
    gap: 2rem;
  }
}
.producto-page .product .images {
  width: 70%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .producto-page .product .images {
    width: 40%;
  }
}
.producto-page .product .images {
  /* Imagen principal */
}
.producto-page .product .images .js-slider-main {
  position: relative;
  width: 100%;
}
.producto-page .product .images .js-slider-main img {
  display: block;
  width: 100%;
  height: auto; /* respeta proporciones */
  -o-object-fit: contain;
     object-fit: contain; /* no recorta, ajusta */
  max-height: 80vh; /* evita que crezca demasiado */
  margin: 0 auto;
}
.producto-page .product .images {
  /* Contenedor de miniaturas */
}
.producto-page .product .images #thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.producto-page .product .images {
  /* Cada miniatura */
}
.producto-page .product .images #thumbs li {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}
.producto-page .product .images {
  /* Imagen dentro de la miniatura */
}
.producto-page .product .images #thumbs li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.producto-page .product .images {
  /* Miniatura activa */
}
.producto-page .product .images #thumbs li.is-active {
  border-color: #111827;
}
.producto-page .product .details {
  width: 100%;
}
.producto-page .product .details .nmbpro {
  font-weight: normal;
  font-family: "Sufrimeda", serif;
  margin-top: 2rem;
  font-size: 2rem;
}
.producto-page .product .details .precio {
  font-family: "Sufrimeda", serif;
  margin: 0 0 1rem;
  font-size: 1.8rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  line-height: 1.2;
}
.producto-page .product .details .precio .precio__regular {
  color: #6b7280; /* gris medio */
  text-decoration: line-through;
  margin-right: 0.5rem;
  font-weight: normal;
  font-size: 1.2rem;
}
.producto-page .product .details .precio .precio__oferta {
  color: #e82e20; /* rojo oferta */
  font-weight: normal;
}
.producto-page .product .details .precio .precio__actual {
  font-weight: normal;
}
.producto-page .product .details .precio .precio__agotado {
  color: #6b7280;
  font-weight: normal;
}
.producto-page .product .details .tallas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.producto-page .product .details .tallas span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4.2rem;
  height: 4.2rem;
  padding: 0 0.8rem;
  font-size: 1.8rem;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: #111;
}
.producto-page .product .details .tallas span > * {
  transform: translateY(3px);
}
.producto-page .product .details .tallas span.unsel {
  background-image: url("../images/svg/icons/unsel.svg");
  background-position: center calc(50% - 2px);
}
.producto-page .product .details .tallas span.sel {
  background-image: url("../images/svg/icons/sel.svg");
  background-position: center calc(50% - 2px);
}
.producto-page .product .details .tallas span.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  background-image: url("../images/svg/icons/unsel.svg");
  background-position: center calc(50% - 2px);
}
.producto-page .product .details .tallas span:hover:not(.disabled) {
  filter: brightness(1.05);
}
.producto-page .product .details .agregado[hidden] {
  display: none !important;
}
.producto-page .product .details .agregado {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
  padding: 2rem;
}
.producto-page .product .details .agregado .confirmado {
  background: #fff;
  border-radius: 10px;
  padding: 1.2rem 1.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-width: 420px;
  width: calc(100% - 2rem);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* TOAST */
}
.producto-page .product .details .agregado .confirmado .agregado_ok {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2rem;
}
.producto-page .product .details .agregado .confirmado a {
  border: 1px solid #0c0c0c;
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.5rem;
}
.producto-page .product .details .agregado.is-open .confirmado {
  opacity: 1;
  transform: translateY(0);
}
.producto-page .product .details .agregado .close {
  position: absolute;
  top: 12px;
  right: 12px;
  line-height: 1;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  cursor: pointer;
}
.producto-page .product .details .informacion {
  width: 100%;
  padding: 0 2rem;
}
.producto-page .product {
  /* Botón guía de tallas */
}
.producto-page .product .cont_btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.producto-page .product .cont_btn .btn-guia {
  padding: 0.4rem 0.6rem;
  border: none;
  background: none;
  font-family: "Sufrimeda", serif;
  cursor: pointer;
  font-size: 1.4rem;
  text-transform: uppercase;
  width: 15rem;
}
.producto-page .product .form_pedido {
  width: 100%;
}
.producto-page .product .form_pedido .configura {
  border: none;
}
.producto-page .product .form_pedido .configura .colores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 2rem 0;
  align-items: center;
  font-size: 2rem;
  /* Utilidad para ocultar texto accesible */
}
.producto-page .product .form_pedido .configura .colores .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.producto-page .product .form_pedido .configura .colores {
  /* Chip base */
}
.producto-page .product .form_pedido .configura .colores .color-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 4px;
  cursor: pointer;
  background: #fff;
}
.producto-page .product .form_pedido .configura .colores {
  /* Punto de color (cuando hay hex) */
}
.producto-page .product .form_pedido .configura .colores .color-chip__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  display: inline-block;
}
.producto-page .product .form_pedido .configura .colores {
  /* Variante sin hex: mostrar nombre en “pill” */
}
.producto-page .product .form_pedido .configura .colores .color-chip--text {
  padding: 0 10px;
  min-height: 32px;
  background: #f3f4f6;
  font-weight: 700;
  border-radius: 9999px;
  border-color: #e5e7eb;
}
.producto-page .product .form_pedido .configura .colores {
  /* Seleccionado */
}
.producto-page .product .form_pedido .configura .colores .color-chip.is-active {
  border-color: #111827;
}
.producto-page .product .form_pedido .configura .color {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.producto-page .product .form_pedido .configura .color .color__dot {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--sw, #ccc);
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.producto-page .product .form_pedido .configura .color .color__name {
  font-size: 1.3rem;
  line-height: 1;
}
.producto-page .product .form_pedido .configura .color.sel .color__dot {
  box-shadow: 0 0 0 2px #000 inset, 0 0 0 2px #000;
}
.producto-page .product .form_pedido .configura .only-dots .color__name {
  display: none;
}
.producto-page .product .form_pedido .configura {
  /* SCSS */
}
.producto-page .product .form_pedido .configura .guia-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  overflow: auto;
}
.producto-page .product .form_pedido .configura .guia-overlay.is-open {
  transform: translateX(0);
}
.producto-page .product .form_pedido .configura .guia-overlay > img {
  max-width: 100%;
  max-height: 100vh;
  height: auto;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.producto-page .product .form_pedido .configura .guia-overlay .guia-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 2.25rem;
  line-height: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.producto-page .product .form_pedido .configura {
  /* bloquea scroll del body cuando está abierto */
}
.producto-page .product .form_pedido .configura .has-guia-open {
  overflow: hidden;
}
.producto-page .product .agregar {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
}
.producto-page .product .agregar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Sufrimeda", serif;
  font-size: 2rem;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: #0c0c0c;
  -webkit-text-fill-color: currentColor;
  cursor: pointer;
}

.titulo {
  margin-top: 14rem;
  width: 100%;
  text-align: center;
  font-family: "Sufrimeda", serif;
  font-size: 2.2rem;
}

.sesion {
  padding: 2rem;
  margin-bottom: 10rem;
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
}
.sesion .cuadro {
  width: 100%;
}
.sesion .cuadro .prendas {
  width: 100%;
}
.sesion .cuadro .prendas .cabecera_prendas {
  width: 100%;
}
.sesion .cuadro .prendas .detalle {
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 0.5rem;
  display: flex;
  margin-bottom: 1rem;
  padding: 1rem;
  gap: 1rem;
}
.sesion .cuadro .prendas .detalle .imagen {
  width: 35%;
}
@media (min-width: 768px) {
  .sesion .cuadro .prendas .detalle .imagen {
    width: 15%;
  }
}
.sesion .cuadro .prendas .detalle .imagen img {
  border-radius: 0.5rem;
}
.sesion .cuadro .prendas .detalle .datos {
  width: 35%;
}
@media (min-width: 768px) {
  .sesion .cuadro .prendas .detalle .datos {
    width: 75%;
  }
}
.sesion .cuadro .prendas .detalle .subtotal_carrito {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .sesion .cuadro .prendas .detalle .subtotal_carrito {
    width: 10%;
  }
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .eliminar_carrito {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .eliminar_carrito input[type=submit] {
  background: url(../images/svg/trash.svg);
  border: 0;
  display: inline-block;
  height: 18px;
  width: 2rem;
  cursor: pointer;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .conf_prod {
  width: 100%;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .conf_prod .eliminar {
  display: flex;
  justify-content: flex-end;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .conf_prod .eliminar input {
  background: none;
  border: none;
  gap: 2rem;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .conf_prod .monto_subtotal {
  text-align: end;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .cantidad_carrito {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  align-items: center;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .cantidad_carrito .sube_baja {
  width: 100%;
  text-align: center;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .cantidad_carrito .sube_baja input {
  background: none;
  border: none;
  gap: 2rem;
  font-size: 2rem;
}
.sesion .cuadro .prendas .detalle .subtotal_carrito .cantidad_carrito .cant {
  font-size: 2rem;
}
.sesion .cuadro .pedido_compra {
  width: 100%;
}
.sesion .cuadro .pedido_compra .check {
  width: 100%;
  margin-top: 2rem;
}
.sesion .cuadro .pedido_compra .check .btn {
  background-color: #0c0c0c;
  color: #ffffff;
  border-radius: 0.5rem;
  text-transform: uppercase;
  font-size: 2rem;
  text-align: center;
  padding: 1rem;
}
.sesion .cuadro .pedido_compra .check .btn_white {
  margin-top: 1rem;
  background-color: #ffffff;
  color: #0c0c0c;
  border-radius: 0.5rem;
  border: 3px solid #0c0c0c;
  text-transform: uppercase;
  font-size: 2rem;
  text-align: center;
  padding: 1rem;
}
.sesion .cuadro .pedido_compra .check .btn2 {
  width: 100%;
  color: #ffffff;
  font-size: 1.8rem;
  background: #cccccc;
  padding: 1.6rem;
  text-decoration: line-through;
  text-align: center;
  margin: 4remx auto;
  border-radius: 0.3rem;
  text-transform: uppercase;
}
.sesion .vermas {
  display: flex;
  justify-content: flex-end;
  font-size: 3rem;
  margin-bottom: 7rem;
}

.checkout {
  width: 80%;
  margin: auto;
  padding: 2rem;
  text-align: center;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .checkout {
    padding: 3rem 0;
  }
}
.checkout .alerta {
  width: 100%;
  margin-bottom: 8rem;
}
.checkout .alerta input {
  width: 30%;
  padding: 0.4rem;
}
@media screen and (max-width: 768px) {
  .checkout .alerta input {
    width: 100%;
    text-align: center;
  }
}
.checkout .btn {
  width: 50%;
  color: #e6e6e6;
  font-size: 1.8rem;
  background: #0c0c0c;
  padding: 1rem;
  margin: 2rem auto;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .checkout .btn {
    width: 100%;
  }
}
.checkout .btn a {
  color: #ffffff;
  text-decoration: none;
}
.checkout input[type=submit] {
  font-family: "jersey15", sans-serif;
  background: #0c0c0c;
  border: 0 none;
  border-radius: 0.3rem;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.9rem;
  height: 46px;
  margin: 1.5rem auto;
  text-transform: uppercase;
  width: 50% !important;
}
@media screen and (max-width: 768px) {
  .checkout input[type=submit] {
    width: 100% !important;
    margin-top: 0;
  }
}

.titulo {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  text-transform: uppercase;
  font-size: 2.1rem;
  text-align: center;
}

.mensaje {
  text-align: center;
  font-size: 2rem;
  padding: 2rem;
}
@media screen and (max-width: 768px) {
  .mensaje {
    font-size: 1.5rem;
    padding: 1rem;
  }
}

.sesion {
  max-width: 125rem;
  margin: 2rem auto;
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 6rem;
  margin-bottom: 12rem;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .sesion {
    padding: 10px;
  }
}
.sesion .soycliente {
  width: 50%;
  border-right: 1px solid #cccccc;
}
@media screen and (max-width: 768px) {
  .sesion .soycliente {
    width: 100%;
    border-right: 0;
  }
}
.sesion .nuevocliente {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .sesion .nuevocliente {
    width: 100%;
  }
}
.sesion .titulo_form {
  font-size: 21px;
  margin: 1rem 0 0 0;
  padding: 0 0 0.5rem 0;
  font-weight: bold;
}
.sesion .mensaje {
  text-align: center;
  font-size: 1.5rem;
  padding: 0 0 1.1rem 0;
  line-height: 1.4rem;
}
.sesion .registro {
  margin: 0 auto;
  text-align: center;
  padding: 0 3rem;
  min-height: 28rem;
}
.sesion .registro .medio {
  width: 50%;
}
.sesion .registro a {
  color: #b01116;
  text-decoration: none;
}
.sesion .registro .datos {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.sesion .registro .datos input {
  padding: 0.6rem;
  font-size: 1.4rem;
  border: 1px solid #333333;
  width: 100%;
}
.sesion .registro input[type=submit] {
  background: #0c0c0c;
  border: 0 none;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.5rem;
  height: 3.8rem;
  text-transform: uppercase;
  width: 100%;
  border-radius: 0.5rem;
}
.sesion .registrarse {
  text-align: center;
  padding: 3rem;
}
.sesion .registrarse a {
  color: #4d4d4d;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.5rem;
}
.sesion .registrarse a:hover {
  text-decoration: underline;
}
.sesion .cuadro {
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro {
    flex-direction: column;
  }
}
.sesion .cuadro .prendas {
  width: 75%;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .prendas {
    width: 100%;
  }
}
.sesion .cuadro .prendas .tachado {
  text-decoration: line-through;
  color: #e82e20;
  font-size: 1rem;
}
.sesion .cuadro .prendas .cabecera_prendas {
  width: 100%;
  padding: 1rem;
  text-transform: uppercase;
  color: #333333;
  font-size: 1.5rem;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  display: flex;
  justify-content: space-around;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .prendas .cabecera_prendas {
    font-size: 1rem;
  }
}
.sesion .cuadro .prendas .cabecera_prendas .producto_detalle {
  width: 50%;
}
.sesion .cuadro .prendas .cabecera_prendas .cantidad {
  width: 30%;
  text-align: center;
}
.sesion .cuadro .prendas .cabecera_prendas .subtotal {
  width: 20%;
}
.sesion .cuadro .prendas .detalle {
  width: 100%;
  padding: 1rem;
  text-transform: uppercase;
  color: #333333;
  font-size: 1.5rem;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  display: flex;
  justify-content: space-around;
}
.sesion .cuadro .prendas .detalle .descripcion {
  width: 50%;
  display: flex;
}
.sesion .cuadro .prendas .detalle .descripcion .imagen {
  width: auto;
}
.sesion .cuadro .prendas .detalle .descripcion .imagen img {
  width: 100%;
  height: auto;
}
.sesion .cuadro .prendas .detalle .descripcion .datos {
  width: 70%;
  padding-left: 1.5rem;
  text-transform: none;
}
.sesion .cuadro .prendas .detalle .descripcion .datos .nombre {
  padding-bottom: 1rem;
  font-size: 1.7rem;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .prendas .detalle .descripcion .datos .nombre {
    font-size: 1.3rem;
  }
}
.sesion .cuadro .prendas .detalle .descripcion .datos .precio_uni {
  padding-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .prendas .detalle .descripcion .datos .precio_uni {
    font-size: 1.2rem;
  }
}
.sesion .cuadro .prendas .detalle .descripcion .datos .talla {
  padding-bottom: 1rem;
  font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .prendas .detalle .descripcion .datos .talla {
    font-size: 1.1rem;
  }
}
.sesion .cuadro .prendas .detalle .descripcion .datos .color {
  padding-bottom: 1rem;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .prendas .detalle .descripcion .datos .color {
    font-size: 1rem;
  }
}
.sesion .cuadro .prendas .detalle .cantidad {
  width: 30%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.sesion .cuadro .prendas .detalle .cantidad input {
  background: #cccccc;
  border: 0 none;
  border-radius: 21px;
  color: #333333;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.4rem;
  margin: 1px;
}
.sesion .cuadro .prendas .detalle .cantidad .sube_baja {
  width: auto;
}
.sesion .cuadro .prendas .detalle .cantidad .cant {
  width: 25px;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .prendas .detalle .cantidad .cant {
    width: 20px;
    font-size: 1.2rem;
  }
}
.sesion .cuadro .prendas .detalle .subtotal {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .prendas .detalle .subtotal {
    font-size: 1.6rem;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
  }
}
.sesion .cuadro .prendas .detalle .subtotal .eliminar input[type=submit] {
  background: url(../images/svg/trash.svg);
  border: 0;
  display: inline-block;
  height: 18px;
  width: 2rem;
  cursor: pointer;
}
.sesion .cuadro .prendas .supera {
  width: 100%;
}
.sesion .cuadro .prendas .supera p {
  font-size: 1rem;
  color: #d50202;
}
.sesion .cuadro .pedido_compra {
  width: 25%;
}
@media screen and (max-width: 768px) {
  .sesion .cuadro .pedido_compra {
    width: 100%;
  }
}
.sesion .cuadro .pedido_compra .sumario {
  width: 100%;
  padding: 1rem;
  text-transform: uppercase;
  color: #333333;
  font-size: 1.5rem;
  border-top: 1px solid #4d4d4d;
  border-bottom: 1px solid #4d4d4d;
}
.sesion .cuadro .pedido_compra .total {
  width: 99%;
  padding: 1rem;
}
.sesion .cuadro .pedido_compra .cantidad {
  font-size: 1.3rem;
  padding: 0 1rem;
}
.sesion .cuadro .pedido_compra .check {
  margin-top: 3rem;
}
.sesion .cuadro .pedido_compra .check .btn {
  font-size: 1.5rem;
  background: #0c0c0c;
  padding: 0.9rem;
  text-decoration: none;
  text-align: center;
  margin: 1rem auto;
  text-transform: uppercase;
  width: 100%;
}
.sesion .cuadro .pedido_compra .check .btn a {
  color: #ffffff;
  text-decoration: none;
}
.sesion .cuadro .pedido_compra .check .btn2 {
  width: 100%;
  color: #ffffff;
  font-size: 1.8rem;
  background: #cccccc;
  padding: 1.6rem;
  text-decoration: line-through;
  text-align: center;
  margin: 4remx auto;
  border-radius: 0.3rem;
  text-transform: uppercase;
}
.sesion .cuadro .pedido_compra .oferta {
  border: 1px solid #cccccc;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  margin-top: 1.2rem;
  font-size: 1.2rem;
}
.sesion .cuadro .pedido_compra .msj_prom {
  padding: 1rem;
  border: 1px solid #b3b3b3;
  border-radius: 0.5rem;
  text-align: center;
  font-size: 1.3rem;
  color: #808080;
  margin-top: 1.2rem;
}
.sesion .cuadro .pedido_compra .msj_prom p {
  margin-bottom: 0.5rem;
}
.sesion .cuadro .pedido_compra .msj_prom .bold {
  font-weight: bold;
  font-size: 1.8rem;
  color: #0c0c0c;
}
.sesion .logueado {
  width: 100%;
  margin: auto;
  display: flex;
}
@media screen and (max-width: 768px) {
  .sesion .logueado {
    flex-direction: column;
  }
}
.sesion .logueado .primaria {
  width: 80%;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria {
    width: 100%;
  }
}
.sesion .logueado .primaria .codigo {
  text-align: center;
  padding: 2rem;
}
.sesion .logueado .primaria .formulario {
  padding: 1rem;
}
.sesion .logueado .primaria .formulario .dato {
  padding: 0.6rem;
  display: flex;
}
.sesion .logueado .primaria .formulario .dato .detalle {
  width: 40%;
  text-align: right;
  padding: 0.2rem 1rem;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .formulario .dato .detalle {
    width: 30%;
    font-size: 1.1rem;
  }
}
.sesion .logueado .primaria .formulario .dato .variable {
  width: 60%;
}
.sesion .logueado .primaria .formulario .dato .variable input[type=text] {
  padding: 0 0.5rem;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .formulario .dato .variable input[type=text] {
    font-size: 1.1rem;
  }
}
.sesion .logueado .primaria .formulario .dato .variable input[type=number] {
  padding: 0 0 0 1rem;
  width: 150px;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .formulario .dato .variable input[type=number] {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .formulario .dato .variable input[type=date] {
    font-size: 1.1rem;
  }
}
.sesion .logueado .primaria .formulario .dato .variable textarea {
  resize: none;
  padding: 0.5rem;
  height: 8rem;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .formulario .dato .variable textarea {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .formulario .dato .variable select {
    font-size: 1.1rem;
  }
}
.sesion .logueado .primaria .formulario input[type=submit] {
  background: #333333;
  border: 0 none;
  color: #ffffff;
  cursor: pointer;
  display: block;
  line-height: 3.6rem;
  font-size: 1.5rem;
  height: 4.4rem;
  margin: 1rem auto;
  text-transform: uppercase;
  width: 70%;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .formulario input[type=submit] {
    width: 100%;
  }
}
.sesion .logueado .primaria .msj {
  padding: 2rem 4rem;
}
.sesion .logueado .primaria .msj .texto {
  text-align: center;
  padding: 2.7rem 0 0 0;
}
.sesion .logueado .primaria .msj .retorno_btn {
  width: 13.4rem;
  font-size: 1.4rem;
  background: #0c0c0c;
  padding: 0.5rem;
  text-decoration: none;
  text-align: center;
  margin: 4rem auto;
  border-radius: 0.3rem;
  text-transform: uppercase;
  color: #ffffff;
}
.sesion .logueado .primaria .mispedidos {
  padding: 0.5rem 1.5rem;
  display: flex;
  gap: 1rem;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .mispedidos {
    flex-direction: column;
    border: 1px solid #e6e6e6;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }
}
.sesion .logueado .primaria .mispedidos .linea {
  padding: 0.2rem;
  font-size: 1.3rem;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .mispedidos .linea {
    border-right: 0;
    text-align: center;
    padding: 0.5rem;
  }
}
.sesion .logueado .primaria .mispedidos .codigo {
  width: 20%;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .mispedidos .codigo {
    width: 100%;
    font-weight: bold;
  }
}
.sesion .logueado .primaria .mispedidos .desc {
  width: 40%;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .mispedidos .desc {
    width: 100%;
  }
}
.sesion .logueado .primaria .mispedidos .monto {
  width: 15%;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .mispedidos .monto {
    width: 100%;
  }
}
.sesion .logueado .primaria .mispedidos .fecha {
  width: 15%;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .mispedidos .fecha {
    width: 100%;
  }
}
.sesion .logueado .primaria .mispedidos .estado {
  width: 10%;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .primaria .mispedidos .estado {
    width: 100%;
  }
}
.sesion .logueado .secundaria {
  width: 20%;
  background-color: #f2f2f2;
  padding: 2rem 0;
  border: 1px solid #e6e6e6;
  border-radius: 0.7rem;
}
@media screen and (max-width: 768px) {
  .sesion .logueado .secundaria {
    width: 100%;
  }
}
.sesion .logueado .secundaria .titulo {
  text-align: center;
  font-size: 2rem;
  padding: 0 0 1.5rem 0;
}
.sesion .logueado .secundaria ul li {
  padding: 0.5rem 2rem;
  border-bottom: 1px solid #f2f2f2;
}
.sesion .logueado .secundaria ul li a {
  padding: 0.5rem;
  display: block;
  color: #333333;
  text-decoration: none;
}
.sesion .logueado .secundaria ul li.select {
  background-color: #cccccc;
  color: #ffffff;
}
.sesion .vacio {
  text-align: center;
  min-height: 30rem;
  padding: 2rem;
}
.sesion .vacio .btn_seguir {
  background-color: #0c0c0c;
  padding: 1rem;
  width: -moz-fit-content;
  width: fit-content;
  margin: 2rem auto;
  border-radius: 0.5rem;
}
.sesion .vacio .btn_seguir a {
  color: #ffffff;
  text-transform: uppercase;
}

.invitado {
  width: 100%;
  max-width: 40rem;
  min-height: 40rem;
  margin: 0 auto;
  text-align: center;
}
.invitado .mensaje {
  font-size: 2rem;
  padding: 2.5rem 0;
}
.invitado .button {
  font-size: 1.5rem;
  background: #0c0c0c;
  padding: 0.9rem;
  text-decoration: none;
  text-align: center;
  margin: 2.5rem auto;
  text-transform: uppercase;
  border-radius: 0.4rem;
}
.invitado .regreso {
  padding: 1.5rem 0;
}
.invitado a {
  font-size: 1.5rem;
  color: #ffffff;
}

.pedido {
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  margin-bottom: 12rem;
}
@media screen and (max-width: 768px) {
  .pedido {
    flex-direction: column;
  }
}
.pedido .proceso {
  width: 60%;
  padding: 1rem;
  border-right: 1px solid #333333;
}
@media screen and (max-width: 768px) {
  .pedido .proceso {
    width: 100%;
    border-right: none;
  }
}
.pedido .proceso .paso {
  width: 100%;
  padding: 0 0 2rem 0;
}
.pedido .proceso .paso .titulo_paso {
  color: #333333;
  background-color: #e6e6e6;
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
}
.pedido .proceso .paso .titulo_paso.activo {
  background: #b3b3b3;
}
.pedido .proceso .paso .titulo_paso .icono {
  width: 3rem;
}
.pedido .proceso .paso .titulo_paso .texto {
  color: #333333;
  font-size: 2rem;
  padding: 0 0 0 1.5rem;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .titulo_paso .texto {
    font-size: 1.8rem;
  }
}
.pedido .proceso .paso .datos {
  width: 100%;
  padding: 1rem 0.5rem 1rem 5rem;
  color: #333333;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .datos {
    padding: 1rem 0.5rem;
  }
}
.pedido .proceso .paso .datos .mail_cliente {
  font-size: 1.8rem;
  padding: 1rem 0;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .datos .mail_cliente {
    font-size: 1.8rem;
    text-align: center;
  }
}
.pedido .proceso .paso .datos .cambio {
  width: 100%;
  padding: 1rem 0;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .datos .cambio {
    text-align: center;
  }
}
.pedido .proceso .paso .datos .cambio a {
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
  color: #ffffff;
  background-color: #4d4d4d;
  border-radius: 0.5rem;
}
.pedido .proceso .paso .datos .linea {
  display: flex;
  padding: 0.5rem 0;
  align-items: center;
}
.pedido .proceso .paso .datos .linea .texto {
  width: 20%;
  font-size: 1.6rem;
  text-align: end;
  padding-right: 1rem;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .datos .linea .texto {
    width: 100%;
  }
}
.pedido .proceso .paso .datos .linea .item {
  font-size: 1.6rem;
  width: 80%;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .datos .linea .item {
    width: 100%;
    padding: 0.5rem 0;
  }
}
.pedido .proceso .paso .datos .linea .item .proceder_boton {
  text-decoration: none;
  padding: 0.6rem;
  font-size: 1.6rem;
  color: #ffffff;
  background-color: #4d4d4d;
  border-radius: 0.4rem;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .datos .linea .item .proceder_boton {
    margin: 0 auto;
  }
}
.pedido .proceso .paso .datos .linea .item .proceder_boton a {
  color: #ffffff;
  text-decoration: none;
}
.pedido .proceso .paso .datos .linea .double {
  width: 10%;
}
.pedido .proceso .paso .datos .linea .doubletres {
  width: 70%;
  padding: 1rem;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .datos .linea .doubletres {
    width: 90%;
  }
}
.pedido .proceso .paso .datos .linea .doubletres p {
  color: #b01116;
}
.pedido .proceso .paso .datos .linea .resalte {
  color: #b01116;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.pedido .proceso .paso .datos .linea input[type=text] {
  width: 80%;
}
.pedido .proceso .paso .datos .linea textarea {
  width: 80%;
  margin: 0;
  padding: 0;
  resize: none;
}
.pedido .proceso .paso .datos .linea .button_continua {
  text-decoration: none;
  padding: 2rem 2.2rem;
  width: 100%;
  font-size: 1.6rem;
  color: #ffffff;
  background-color: #4d4d4d;
  border-radius: 0.4rem;
  border: none;
}
.pedido .proceso .paso .datos .separador {
  border-bottom: 1px solid #e6e6e6;
  padding: 0 0 0.7rem 0;
  margin: 0 0 0.7rem 0;
}
.pedido .proceso .paso .datos .datos_tarjeta_elegida {
  border: 1px solid #e6e6e6;
  margin-bottom: 1rem;
  padding: 1rem 3rem 1.5rem;
  border-radius: 0.5rem;
}
.pedido .proceso .paso .datos .linea_tarjeta {
  border: 1px solid #e6e6e6;
  margin-bottom: 1rem;
  padding: 1rem 3rem 1.5rem;
  border-radius: 0.5rem;
}
.pedido .proceso .paso .datos .linea_tarjeta .todas {
  padding: 1rem;
  text-align: center;
}
.pedido .proceso .paso .datos .linea_tarjeta .tarjetas ul {
  display: flex;
  justify-content: center;
}
.pedido .proceso .paso .datos .linea_tarjeta .tarjetas ul li {
  padding: 0.5rem;
}
.pedido .proceso .paso .datos .check {
  border: 1px solid #e6e6e6;
  border-radius: 0.5rem;
  padding: 1rem;
}
.pedido .proceso .paso .datos .check .msj_trans {
  padding: 1rem;
  background: #f2f2f2;
  border-radius: 0.5rem;
  font-size: 1.3rem;
  line-height: 1.9rem;
}
.pedido .proceso .paso .datos .check .det {
  padding: 1rem;
  border-bottom: 1px solid #e6e6e6;
}
.pedido .proceso .paso .datos .check .det .tittar {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 1rem;
}
.pedido .proceso .paso .datos .check .det .dettar {
  padding: 0.5rem 0;
}
.pedido .proceso .paso .datos .check .det .detsis {
  font-weight: bold;
  padding: 1rem;
}
.pedido .proceso .paso .datos .check .det .qr {
  width: 100%;
}
.pedido .proceso .paso .datos .check .det .qr img {
  width: inherit;
  padding: 3rem;
}
.pedido .proceso .paso .datos .check .term {
  padding: 1rem;
}
.pedido .proceso .paso .datos .check .term .linea_term {
  padding: 1rem;
}
.pedido .proceso .paso .datos .check .pagotrns {
  padding: 1rem;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .datos .check .pagotrns {
    text-align: center;
  }
}
.pedido .proceso .paso .datos .check .pagotrns .btn_transferencia {
  background: #333333;
  color: #ffffff;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.pedido .proceso .paso .f_col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pedido .proceso .paso .cupon {
  padding: 0;
}
@media screen and (max-width: 768px) {
  .pedido .proceso .paso .cupon {
    text-align: center;
  }
}
.pedido .proceso .paso .cupon p {
  padding: 6px 0 1.2rem 0;
  font-size: 1.5rem;
}
.pedido .proceso .paso .cupon .cuponnota {
  text-transform: uppercase;
  width: 22rem;
  padding: 1rem;
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
}
.pedido .proceso .paso .cupon input::-moz-placeholder {
  color: #cccccc;
}
.pedido .proceso .paso .cupon input::placeholder {
  color: #cccccc;
}
.pedido .proceso .paso .cupon .button {
  height: 4rem;
  width: 22rem;
  border: 1px solid #0c0c0c;
  background-color: #0c0c0c;
  font-size: 1.6rem;
  color: #ffffff;
}
.pedido .orden {
  width: 40%;
  padding: 1rem 2rem;
}
@media screen and (max-width: 768px) {
  .pedido .orden {
    width: 100%;
  }
}
.pedido .orden .cuadro {
  width: 100%;
  border: 1px solid #cccccc;
  border-radius: 0.5rem;
  padding: 1rem;
}
.pedido .orden .cuadro .prendas {
  width: 100%;
}
.pedido .orden .cuadro .prendas .cabecera_prendas {
  font-size: 2rem;
  border-bottom: 1px solid #0c0c0c;
  padding: 1rem;
  font-weight: bold;
}
.pedido .orden .cuadro .prendas .detalle {
  padding: 2rem;
  border-bottom: 1px solid #cccccc;
  display: flex;
}
.pedido .orden .cuadro .prendas .detalle .imagen {
  width: 25%;
}
.pedido .orden .cuadro .prendas .detalle .imagen img {
  width: 100%;
  height: auto;
}
.pedido .orden .cuadro .prendas .detalle .datos {
  width: 70%;
  padding: 1rem;
}
.pedido .orden .cuadro .prendas .detalle .datos .nombre {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.pedido .orden .cuadro .prendas .detalle .datos .precio_uni {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.pedido .orden .cuadro .prendas .detalle .datos .precio_uni .tachado {
  text-decoration: line-through;
  color: #999999;
  font-size: 1.1rem;
  margin-right: 0.5rem;
}
.pedido .orden .cuadro .prendas .detalle .datos .color {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}
.pedido .orden .cuadro .prendas .detalle .datos .talla {
  font-size: 1.3rem;
}
.pedido .orden .cuadro .prendas .detalle .datos .subtotal {
  font-weight: bold;
  margin-top: 0.3rem;
}
.pedido .orden .cuadro .prendas .detalle .tachado {
  text-decoration: line-through;
  color: #999999;
  font-size: 1.1rem;
}
.pedido .orden .cuadro .pedido_resumen {
  padding: 1rem;
}
.pedido .orden .cuadro .pedido_resumen .envio {
  padding: 0.5rem 0.5rem;
  font-size: 1.3rem;
  color: #b01116;
  background: #f2f2f2;
  margin-bottom: 1rem;
}
.pedido .orden .cuadro .pedido_resumen .aclara {
  padding: 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
  color: #d50202;
}
.pedido .orden .cuadro .pedido_resumen .total {
  font-size: 1.5rem;
  font-weight: bold;
}
.pedido .orden .cuadro .oferta {
  border: 1px solid #cccccc;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  margin-top: 1.2rem;
  font-size: 1.2rem;
}
.pedido .orden .msj_prom {
  padding: 1rem;
  border: 1px solid #cccccc;
  border-radius: 0.5rem;
  text-align: center;
  font-size: 1.3rem;
  color: #737373;
  margin-top: 1.2rem;
}
.pedido .orden .msj_prom .bold {
  font-weight: bold;
  font-size: 1.8rem;
}
.pedido .orden .msj_prom p {
  padding: 1rem;
}
.pedido .orden .msj_prom .talla {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.pedido .orden .msj_prom .talla .label_talla {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.2rem;
}
.pedido .orden .msj_prom .btn_seleccion {
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
  color: #ffffff;
  background-color: #4d4d4d;
  border-radius: 0.5rem;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  .pedido .orden .msj_prom .btn_seleccion {
    margin: 0 auto;
  }
}
.pedido .orden .msj_prom .btn_seleccion a {
  color: #ffffff;
  text-decoration: none;
}
.pedido .mensaje_salida {
  width: 100%;
  padding: 1rem;
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 12rem;
}
.pedido .mensaje_salida .salida {
  padding: 1.5rem;
  background: #f2f2f2;
  border-radius: 0.5rem;
}
.pedido .mensaje_salida .regreso {
  margin-top: 3rem;
}
.pedido .mensaje_salida .regreso a {
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
  color: #ffffff;
  background-color: #4d4d4d;
  border-radius: 0.5rem;
}

.kr-popin-button {
  width: 100% !important;
}

/* Ocultar cualquier elemento */
.hide {
  display: none !important;
}

/* Mobile-first */
.desk {
  display: none !important;
}

.mob {
  display: block !important;
}

.mob--flex {
  display: flex !important;
}

/* A partir de md (>=768px) */
@media (min-width: 768px) {
  .desk {
    display: block !important;
  }
  .desk--flex {
    display: flex !important;
  }
  .mob,
  .mob--flex {
    display: none !important;
  }
}
[hidden] {
  display: none !important;
}/*# sourceMappingURL=styles.css.map */