/* ==========================================================================
   Checkout de nutramerican.com
   Va después de mdb.min.css y lo sobrescribe. Los id y las celdas <td> del
   resumen los usa el motor (ecommerceNutra/index.js): ver index.html.

   Pesos: fuentes/Montserrat/stylesheet.css no tiene 800 y lo que lo pide se
   pinta en Black (900), que hacía el checkout muy denso. Aquí 600 pinta
   SemiBold y 700 ExtraBold: no se usa 800.
   ========================================================================== */

:root {
  --ck-fondo: #f5f7fb;
  --ck-card: #ffffff;
  --ck-borde: #e6eaf2;
  --ck-borde-campo: #d5dbe6;
  --ck-texto: #334155; /* el gris pizarra del resto del sitio; #0f172a pesaba demasiado */
  --ck-texto-2: #334155;
  --ck-suave: #64748b;
  /* Paleta de /productos: acción en negro (el del menú). El azul queda solo en el foco
     del teclado (--ck-foco); el rojo, para errores, quitar y descuentos. */
  --ck-accion: #121313;
  --ck-accion-hover: #2e3030;
  --ck-accion-suave: #f1f2f4;
  --ck-rojo: #f43f5e;
  --ck-rojo-oscuro: #e11d48;
  --ck-verde: #12b76a;
  --ck-verde-claro: #ecfdf3;
  --ck-verde-oscuro: #039855; /* 3,8:1 sobre blanco: borde y radio del medio de pago elegido */
  --ck-radio: 1.25rem;
  --ck-radio-campo: .9rem;
  --ck-sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --ck-foco: 0 0 0 3px rgba(26, 107, 255, .3);
}

/* ---------- Base ---------- */
/* MDB pone b/strong en `bolder`: dentro de un texto de 600 («Paga con <strong>Bold</strong>»,
   «Asesoría telefónica <strong>#590</strong>») subía a 900 y se pintaba en Black */
b,
strong {
  font-weight: 700;
}

body {
  background: var(--ck-fondo);
  color: var(--ck-texto);
}

body,
button,
input,
select,
textarea,
.form-control {
  font-family: 'Montserrat', sans-serif;
}

.checkout {
  min-height: 100vh;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.checkout :is(a, button, input[type=radio], input[type=checkbox]):focus-visible {
  outline: 3px solid rgba(26, 107, 255, .55);
  outline-offset: 2px;
}

.ck-contenedor {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .ck-contenedor {
    padding: 0 1.5rem;
  }
}

.ck-card {
  background: var(--ck-card);
  border: 1px solid var(--ck-borde);
  border-radius: var(--ck-radio);
  box-shadow: var(--ck-sombra);
  padding: 1.25rem;
}

/* ---------- Cabecera ---------- */
.ck-cabecera {
  background: #fff;
  border-bottom: 1px solid var(--ck-borde);
}

.ck-cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.ck-cabecera__logo {
  display: inline-flex;
  border-radius: .5rem;
}

.ck-cabecera__logo img {
  display: block;
  width: auto;
  height: 2.6rem;
}

.ck-seguro {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ck-suave);
  font-size: .9rem;
  font-weight: 600;
}

.ck-seguro i {
  color: #94a3b8;
}

.ck-seguro--centro {
  display: flex;
  justify-content: center;
  margin: .9rem 0 0;
}

@media (max-width: 380px) {
  .ck-cabecera .ck-seguro {
    font-size: .8rem;
  }

  .ck-cabecera__logo img {
    height: 1.9rem;
  }
}

/* ---------- Migas ---------- */
.ck-main {
  padding-top: 1.5rem;
}

.ck-migas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ck-suave);
}

.ck-migas li + li::before {
  content: "/";
  margin-right: .5rem;
  color: #a3adbd;
  font-weight: 400;
}

.ck-migas a {
  color: var(--ck-accion);
  font-weight: 600;
  text-decoration: none;
}

.ck-migas a:hover {
  text-decoration: underline;
}

/* ---------- Distribución ---------- */
/* minmax(0, …): con 1fr la columna crece hasta el ancho mínimo de su contenido y en móvil se sale */
.ck-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 992px) {
  .ck-rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem;
    align-items: start;
  }
}

/* clamp con rem + vw (solo vw no crece con el zoom del navegador); 375 → 1200 px */
.ck-seccion {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 1.2864rem + .4848vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ck-texto);
}

.ck-subseccion {
  margin: 1.75rem 0 .75rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ck-texto);
}

/* ---------- Tu pedido ---------- */
.ck-pedido__encabezado {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.ck-volver {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: .3rem;
  border-radius: 50%;
  color: var(--ck-texto-2);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color .15s;
}

.ck-volver:hover {
  background: #e8edf6;
  color: var(--ck-texto);
}

.ck-titulo {
  margin: 0;
  font-size: clamp(1.85rem, 1.6rem + 1.0667vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--ck-texto);
}

.ck-pedido__cantidad {
  margin: .35rem 0 0;
  color: var(--ck-suave);
  font-size: 1.05rem;
  font-weight: 500;
}

.ck-pedido__cantidad:empty {
  display: none;
}

.ck-pedido__lista {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.ck-pedido__cargando,
.ck-pedido__vacio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1rem;
  color: var(--ck-suave);
  font-weight: 600;
  text-align: center;
}

.ck-pedido__vacio p {
  width: 100%;
  margin: 0;
  color: var(--ck-texto);
  font-size: 1.1rem;
}

/* Card de producto: imagen a la izquierda; a la derecha nombre y precio, y debajo el selector */
.ck-item {
  position: relative;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  grid-template-areas:
    "media cuerpo"
    "media cantidad";
  column-gap: 1.1rem;
  row-gap: .75rem;
  align-items: center;
  padding: 1rem 1.1rem;
}

.ck-item__media {
  grid-area: media;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle closest-side at 50% 48%, #fff 0%, #fcfcfd 45%, #f0f2f4 80%, #e6e8ec 100%) #e6e8ec; /* el de las tarjetas */
}

.ck-item__media img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.ck-item__cuerpo {
  grid-area: cuerpo;
  align-self: end;
  min-width: 0;
  padding-right: 2.5rem;
}

/* En mayúsculas como en las tarjetas y el cajón: el nombre llega con la caja que se
   guardó («Prime W Collagen Stack» / «BIPRO OVERNIGHT OATS»). Ningún script lee
   este texto del DOM, así que es solo visual */
.ck-item__nombre {
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ck-texto);
  overflow-wrap: anywhere;
}

.ck-item__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .5rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ck-accion);
  font-variant-numeric: tabular-nums;
}

.ck-item__precio small {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ck-suave);
}

.ck-item__eliminar {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: #94a3b8;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.ck-item__eliminar:hover {
  background: #fff1f3;
  color: var(--ck-rojo-oscuro);
}

.ck-cantidad {
  grid-area: cantidad;
  justify-self: end;
  align-self: start;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ck-cantidad__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ck-borde);
  border-radius: .8rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  color: var(--ck-accion);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s, opacity .15s, transform .1s;
}

/* − y + iguales, blancos con icono negro (antes rosa y azul), como en el cajón del carrito */
.ck-cantidad__btn:hover:not(:disabled):not(.disabled) {
  border-color: var(--ck-accion);
}

.ck-cantidad__btn:focus-visible {
  outline: none;
  box-shadow: var(--ck-foco);
}

.ck-cantidad__btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* :disabled lo pone el - en 1; .disabled, el motor cuando un cupón fija los precios */
.ck-cantidad__btn:disabled,
.ck-cantidad__btn.disabled,
.ck-item__eliminar:disabled,
.ck-item__eliminar.disabled {
  opacity: .35;
  box-shadow: none;
  cursor: not-allowed;
}

.ck-cantidad__valor {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 .5rem;
  border: 1px solid var(--ck-borde);
  border-radius: .8rem;
  background: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ck-texto);
}

@media (max-width: 400px) {
  .ck-item {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    column-gap: .85rem;
  }

  .ck-item__media {
    width: 4.75rem;
    height: 4.75rem;
  }

  .ck-item__precio {
    font-size: 1.05rem;
  }
}

.ck-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.ck-subtotal__titulo {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ck-texto);
}

.ck-subtotal__nota {
  display: block;
  color: var(--ck-suave);
  font-size: .9rem;
}

.ck-subtotal__valor {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ck-texto);
}

/* ---------- Facturación y entrega ---------- */
.ck-facturacion {
  margin-top: 2.5rem;
}

.ck-registrado {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid #a6e9c8;
  border-radius: var(--ck-radio);
  background: var(--ck-verde-claro);
}

.ck-registrado__icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ck-verde);
  color: #fff;
  font-size: 1.1rem;
}

.ck-registrado__titulo {
  display: block;
  color: #067647;
  font-size: 1.1rem;
  font-weight: 700;
}

.ck-registrado__texto {
  display: block;
  color: #3b7a5a;
  font-size: .95rem;
}

.ck-formulario {
  display: grid;
  gap: 1rem;
}

/* Campo con etiqueta flotante: la etiqueta sube al enfocar o cuando hay texto */
.ck-campo {
  position: relative;
}

.ck-campo input,
.ck-campo textarea {
  display: block;
  width: 100%;
  height: 3.5rem;
  padding: 1.35rem 1rem .4rem;
  border: 1px solid var(--ck-borde-campo);
  border-radius: var(--ck-radio-campo);
  background: #fff;
  color: var(--ck-texto);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

.ck-campo textarea {
  height: auto;
  min-height: 7rem;
  padding-top: 1.6rem;
  resize: vertical;
}

.ck-campo input::placeholder,
.ck-campo textarea::placeholder {
  color: transparent;
}

.ck-campo input:hover,
.ck-campo textarea:hover {
  border-color: #b8c2d3;
}

.ck-campo input:focus,
.ck-campo textarea:focus {
  outline: none;
  border-color: var(--ck-accion);
  box-shadow: var(--ck-foco);
}

.ck-campo label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  overflow: hidden;
  color: var(--ck-suave);
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top .15s, font-size .15s, color .15s;
}

/* el área de comentarios es alta: su etiqueta puede ocupar dos líneas en móvil */
.ck-campo--area label {
  white-space: normal;
}

.ck-campo input:focus ~ label,
.ck-campo input:not(:placeholder-shown) ~ label,
.ck-campo textarea:focus ~ label,
.ck-campo textarea:not(:placeholder-shown) ~ label {
  top: .45rem;
  color: #475569;
  font-size: .75rem;
  font-weight: 600;
}

.ck-campo input:focus ~ label,
.ck-campo textarea:focus ~ label {
  color: var(--ck-accion);
}

/* sin flechas en los campos numéricos (documento y celular) */
.ck-campo input[type=number] {
  -moz-appearance: textfield;
}

.ck-campo input[type=number]::-webkit-inner-spin-button,
.ck-campo input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ck-campo__buscando {
  position: absolute;
  top: 1.1rem;
  right: .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--ck-suave);
  font-size: .8rem;
  font-weight: 600;
}

/* el motor muestra el error quitando .d-none al div .error del campo */
.ck-campo:has(> .error:not(.d-none)) :is(input, textarea),
.ck-campo-select:has(> .error:not(.d-none)) .form-control.select-input {
  border-color: var(--ck-rojo) !important;
}

.ck-formulario .error small {
  display: block;
  margin-top: .35rem;
  padding-left: .25rem;
  color: var(--ck-rojo-oscuro);
  font-size: .8rem;
  font-weight: 600;
}

/* Selects de MDB (tipo de documento, ciudad, localidad): se iguala su caja con la de los campos.
   MDB dibuja el borde con .form-notch encima del input; se oculta y el borde lo pone el input. */
.ck-campo-select .form-outline .form-control ~ .form-notch {
  display: none;
}

.ck-campo-select .form-outline .form-control.select-input {
  height: 3.5rem;
  padding: 0 2.25rem 0 1rem;
  border: 1px solid var(--ck-borde-campo) !important;
  border-radius: var(--ck-radio-campo);
  background: #fff;
  color: var(--ck-texto);
  font-size: .95rem;
  font-weight: 500;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.ck-campo-select .form-outline .form-control.select-input:hover {
  border-color: #b8c2d3 !important;
}

.ck-campo-select .form-outline .form-control.select-input:focus,
.ck-campo-select .form-outline .form-control.select-input.focused {
  border-color: var(--ck-accion) !important;
  box-shadow: var(--ck-foco);
}

.ck-campo-select .select-arrow {
  top: 50% !important;
  right: 1rem !important;
  transform: translateY(-50%);
  color: var(--ck-suave);
}

.select-dropdown-container .select-dropdown {
  border-radius: var(--ck-radio-campo);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}

.select-dropdown-container .select-option {
  font-family: 'Montserrat', sans-serif;
}

.ck-borrar-comentario {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: -.5rem;
  padding: .4rem .7rem;
  border: 0;
  border-radius: .6rem;
  background: transparent;
  color: var(--ck-suave);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.ck-borrar-comentario:hover {
  background: #f1f4f9;
  color: var(--ck-texto);
}

/* ---------- Resumen y cupón ---------- */
.ck-cupon__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  color: var(--ck-texto);
  font-weight: 600;
}

.ck-cupon__titulo i {
  color: var(--ck-accion);
}

.ck-cupon {
  display: flex;
  gap: .5rem;
}

.ck-cupon input {
  flex: 1;
  min-width: 0;
  height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--ck-borde-campo);
  border-radius: var(--ck-radio-campo);
  background: #fff;
  color: var(--ck-texto);
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}

.ck-cupon input:focus {
  outline: none;
  border-color: var(--ck-accion);
  box-shadow: var(--ck-foco);
}

.ck-boton-claro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.25rem;
  border: 1px solid var(--ck-accion);
  border-radius: var(--ck-radio-campo);
  background: var(--ck-accion-suave);
  color: var(--ck-accion);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.ck-boton-claro:hover {
  background: var(--ck-accion);
  color: #fff;
}

/* «Aplicar» del cupón, relleno en negro como «Pagar» */
.ck-cupon .ck-boton-claro {
  background: var(--ck-accion);
  color: #fff;
}

.ck-cupon .ck-boton-claro:hover {
  border-color: var(--ck-accion-hover);
  background: var(--ck-accion-hover);
}

#messagecupon {
  display: block;
  margin: .75rem 0 0;
  padding: .75rem 1rem;
  border-radius: var(--ck-radio-campo);
  font-size: .9rem;
  line-height: 1.45;
}

.ck-resumen__tabla {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;
}

.ck-resumen__tabla th,
.ck-resumen__tabla td {
  padding: .75rem 0;
  border-top: 1px solid #eef1f6;
  font-size: .95rem;
  vertical-align: middle;
}

.ck-resumen__tabla tr:first-child > * {
  border-top: 0;
}

.ck-resumen__tabla th {
  color: var(--ck-texto-2);
  font-weight: 600;
  text-align: left;
}

.ck-resumen__tabla td {
  padding-left: 1rem;
  color: var(--ck-texto);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* filas de producto que añade updateTable(): nombre a la izquierda */
.ck-resumen__tabla tr[data-row] td:first-child {
  padding-left: 0;
  font-weight: 600;
  text-align: left;
  white-space: normal;
}

.ck-resumen__tabla tr[data-row] td {
  color: var(--ck-texto-2);
  font-size: .875rem;
}

.ck-resumen__unidades {
  margin-left: .25rem;
  color: var(--ck-suave);
  white-space: nowrap;
}

.ck-resumen__descuento td {
  color: var(--ck-rojo-oscuro);
}

.ck-resumen__total th,
.ck-resumen__total td {
  padding-top: 1rem;
  border-top: 2px solid #e2e8f0;
  color: var(--ck-texto);
  font-size: 1.2rem;
  font-weight: 700;
}

#rowtiempoentrega th {
  color: var(--ck-suave);
  font-size: .85rem;
  font-weight: 500;
}

/* ---------- Medios de pago ---------- */
ul.wc_payment_methods {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wc_payment_methods .wc_payment_method {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ck-borde);
  border-radius: 1rem;
  background: #fff;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

/* El medio elegido, en verde: solo el borde y una sombra suave, sin fondo. El negro queda para
   lo que se pulsa. #12b76a se queda en 2,6:1 sobre blanco y un indicador de estado pide 3:1:
   por eso el borde y el radio van en --ck-verde-oscuro. */
.wc_payment_methods .wc_payment_method:has(> .input-radio:checked) {
  border-color: var(--ck-verde-oscuro);
  box-shadow: 0 4px 14px rgba(3, 152, 85, .14);
}

/* Toda la fila elige el medio: la etiqueta ocupa el ancho de la caja y el radio va encima, a su
   izquierda. Antes solo respondían el radio y el texto («Bold» era muy estrecho en el móvil). */
.wc_payment_methods .input-radio {
  position: absolute;
  z-index: 1;
  top: 1.05rem;
  left: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--ck-verde-oscuro);
  cursor: pointer;
}

.wc_payment_methods .input-radio + label {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem 1rem .75rem 2.75rem;
  color: var(--ck-texto);
  font-weight: 600;
  cursor: pointer;
}

.wc_payment_methods img {
  opacity: 1;
  transition: opacity 1s;
}

li.wc_payment_method.payment_method_addi > label[for=payment_method_addi] > img {
  width: 65px;
  height: 25px;
}

li.wc_payment_method.payment_method_addi > label[for=payment_method_addi] > img[alt="Paga a cuotas"] {
  max-height: 20px;
}

li.wc_payment_method.payment_method_sistecredito > label[for=payment_method_sistecredito] > img {
  width: auto;
  height: 18px;
  object-position: center;
}

.wc_payment_methods p {
  margin-bottom: 1rem;
}

/* El detalle de cada medio se abre con .show (js/index.js, toogleDisplay) */
.payment_box {
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
  max-height: 0;
}

.payment_box.show {
  visibility: visible;
  opacity: 1;
  max-height: 600px;
  margin: 0 1rem 1rem;
  transition: opacity 1s cubic-bezier(.25, .46, .45, .94), max-height .8s cubic-bezier(.25, .46, .45, .94);
}

.payment_box .addi_description_container.mb-4 {
  margin-bottom: 0 !important;
}

.addi_description_container {
  min-width: 0;
  border: 1px solid var(--ck-borde);
  border-radius: var(--ck-radio-campo);
  background: #fff;
}

.addi_description_container > div {
  padding: 1rem 1.1rem !important;
}

.flex-header {
  display: flex;
  flex-direction: column;
}

.flex-header .logo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mini-frame {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.mini-frame + .mini-frame {
  margin-top: .6rem;
}

.addi-co-description-detail {
  color: var(--ck-texto-2);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
}

.box-modal {
  padding: 20px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background-color: white;
  color: #585858;
}

.blue-beautiful {
  color: #09f;
}

/* ---------- Términos y botón de pago ---------- */
.ck-terminos {
  display: flex;
  align-items: flex-start;
  margin: 1.5rem 0 1.25rem;
  padding-left: 0;
  color: #475569;
  font-size: .9rem;
  line-height: 1.7; /* los enlaces van en dos líneas: que no queden pegados entre sí */
}

/* La casilla se toca en 44 × 44 px y se ve de 24 px, separada del texto, para no pulsar el
   enlace por error. Son los márgenes negativos los que mantienen el cuadro alineado con el
   borde y con la primera línea. Sigue siendo #terminos: el motor solo lee .checked. */
.ck-terminos .form-check-input[type=checkbox] {
  flex: none;
  float: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: -.55rem .25rem -.55rem -.625rem;
  border: 0;
  border-radius: .5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='5' fill='%23fff' stroke='%2394a3b8' stroke-width='2'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
  box-shadow: none;
  cursor: pointer;
}

.ck-terminos .form-check-input[type=checkbox]:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%23039855'/%3E%3Cpath d='M6.5 12.5l3.7 3.7 7.3-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}

/* la onda de foco y el visto de MDB van con estos pseudoelementos y quedarían descolocados */
.ck-terminos .form-check-input[type=checkbox]::before,
.ck-terminos .form-check-input[type=checkbox]::after {
  display: none;
}

.ck-terminos .form-check-label {
  cursor: pointer;
}

.ck-terminos a {
  color: var(--ck-accion);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.ck-pagar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  min-height: 3.75rem;
  padding: .9rem 1.5rem;
  border: 0;
  border-radius: 1rem;
  background: var(--ck-accion);
  box-shadow: 0 10px 24px rgba(18, 19, 19, .22);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s, transform .1s;
}

/* flecha con Font Awesome: el texto del botón lo cambia js/index.js con innerText */
.ck-pagar::after {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  font-weight: 900;
  transition: transform .15s;
}

.ck-pagar:hover {
  background: var(--ck-accion-hover);
}

.ck-pagar:hover::after {
  transform: translateX(3px);
}

.ck-pagar:active {
  transform: translateY(1px);
}

.checkout .ck-pagar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(26, 107, 255, .55);
}

#messagevalidatedata {
  margin-top: 1rem;
}

/* ---------- Botones de los modales (SweetAlert) ----------
   Todos del mismo ancho y con el redondeado de «Pagar»: apilados en el móvil y lado a lado desde
   576 px. */
.swal2-popup .swal2-actions {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: .6rem;
  width: 100%;
  padding: 0 1rem;
}

.swal2-popup .swal2-actions .swal2-styled {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: .7rem 1rem;
  border-radius: 1rem;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
}

.swal2-popup .swal2-actions .swal2-loader {
  align-self: center;
}

/* Negro como «Pagar» en vez del morado de SweetAlert. El :not(:has(style)) deja fuera al modal que
   trae sus propios colores en un <style>: la confirmación de dirección, con su verde y su rojo. */
.swal2-popup:not(:has(.swal2-html-container style)) .swal2-styled.swal2-confirm {
  background-color: var(--ck-accion);
}

.swal2-popup:not(:has(.swal2-html-container style)) .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:hover {
  background-color: var(--ck-accion-hover);
  background-image: none;
}

.swal2-popup:not(:has(.swal2-html-container style)) .swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(18, 19, 19, .3);
}

@media (min-width: 576px) {
  .swal2-popup .swal2-actions {
    flex-direction: row;
  }

  .swal2-popup .swal2-actions .swal2-styled {
    flex: 1 1 0;
    width: auto;
  }
}

/* ---------- Pie ---------- */
.ck-pie {
  margin-top: 4rem;
  padding: 2.5rem 0 1.5rem;
  border-top: 1px solid var(--ck-borde);
  background: #fff;
}

.ck-pie__sellos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.ck-pie__titulo {
  margin: 0;
  color: var(--ck-suave);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ck-pie__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2.5rem;
}

.ck-pie__logos img {
  display: block;
  width: auto;
  height: 3rem;
}

.ck-pie__ventajas {
  display: grid;
  gap: .9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ck-pie__ventajas {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ck-pie__ventajas li,
.ck-pie__ventajas a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--ck-texto-2);
  font-weight: 600;
  text-decoration: none;
}

.ck-pie__ventajas a:hover {
  color: var(--ck-accion);
}

.ck-pie__ventajas i {
  color: var(--ck-accion);
  font-size: 1.25rem;
}

.ck-pie__copy {
  margin: 2rem 0 0;
  color: #94a3b8;
  font-size: .8rem;
  text-align: center;
}

/* ---------- Mensajes del motor ---------- */
.error {
  color: #f00b57;
  font-weight: 400;
}

.days {
  display: block;
  padding: 1rem;
  border: 1px solid rgba(253, 102, 140, .21);
  border-radius: var(--ck-radio-campo);
  background: #ffe3e3;
  color: #dc3545;
  font-size: 100%;
  line-height: 1.5rem;
}

.alert-success {
  border: 1px solid #006e2c5e !important;
}

.alert-info {
  border: 1px solid #27738e52 !important;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/* ---------- Pantalla de carga y aviso de pago iniciado ---------- */
.background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  color: #0083da;
  font-size: 1.5rem;
  font-weight: 800;
  transition: opacity 1s ease;
}

.clip-path {
  opacity: 0;
}

.noscroll {
  overflow: hidden;
}

.rgba-black-strong {
  background: #0000007d;
  color: white;
}

.loader {
  position: relative;
  width: 1em;
  height: 1em;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 50%;
  color: #007ce2;
  font-size: 36px;
  text-indent: -9999em;
  transform: translateZ(0);
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@keyframes round {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ---------- Animaciones ---------- */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInRows {
  animation: fadeInRows .3s ease forwards;
}

@keyframes fadeInRows {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated,
  .fadeInRows,
  .ultimo-estado {
    animation: none;
  }
}

/* ---------- Promos (inactivas: camiseta, Radical Power, flete) ---------- */
/* La promo de flete va oculta dentro de un contenedor con márgenes que dejaba un hueco */
.ck-col-principal > .col-12:has(> .promocion-flete.d-none) {
  display: none;
}

.banner-img {
  border-radius: 4px;
  box-shadow: 1px 1px 5px rgb(53 53 53 / 38%);
}

.message-promo-tshirt {
  padding: .5rem;
  border: 1px solid #2979ffbf;
  border-radius: .25rem;
  background-color: #699ffb1a;
  color: #2979ff;
  font-size: 1.1rem;
  text-align: left;
}

@media (min-width: 766px) {
  .message-promo-tshirt {
    font-size: 1.5rem;
    text-align: center;
  }
}

.tablecard {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--ck-borde);
  border-radius: var(--ck-radio);
  background: #fff;
  box-shadow: var(--ck-sombra);
}

.tablecard .table {
  width: 100%;
  margin-bottom: 0;
  color: #212529;
}

.tablecard .table td,
.tablecard .table th {
  padding: 1.1rem 16px 1rem;
  font-size: .8rem;
  vertical-align: middle;
}

.media-cart {
  display: flex;
  align-items: center;
}

.name-item-custom-tshrit {
  color: #121212;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 157, 255, .7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
  }
}

.ultimo-estado {
  box-shadow: 0 0 0 0 #009dff;
  animation: 2000ms ease 0ms infinite normal none running pulse-blue;
}

.ultimo-estado:hover {
  animation-play-state: paused;
}