/* Encabezado */
header {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Contenido del encabezado */
.header-content {
  text-align: center;
  margin-top: 0;
}

/* TÍTULO EN UNA SOLA LÍNEA con tamaño responsivo */
  .header-content h1 {
    white-space: nowrap;
    font-family: 'Georgia', serif;
    text-transform: uppercase;
    font-weight: bold;

    /* Gradiente de fuego: amarillo arriba, naranja en el medio, rojo abajo */
    background: linear-gradient(to bottom, #ffff00 0%, #ffa500 50%, #ff0000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    margin-top: 0rem;      /* añade un poco de espacio encima */
    margin-bottom: 0rem;  /* “sube” el h1 medio rem */
    font-size: clamp(2rem, calc(100vw / 9), 3rem);
}
/* Subtítulo */
.header-content p {
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(254, 253, 253, 0.8);
  margin: 0 0 20px 0;
}






/* Pie de Página */
.footer {
  text-align: center;
  padding: 1rem 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  margin-top: auto;
  transition: background-color 0.3s ease;
}

.footer:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.footer a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer a:hover {
  color: #f39c12;
}

/*------------------------------------------------------------------------------------------------
ESTILOS PARA LOS BOTONES FLOTANTES (COPIAR ESTE FRAGMENTO EN LOS DEMÁS CSS)
------------------------------------------------------------------------------------------------*/

.brand-name {
  position: absolute !important;   /* lo saca del flujo visual */
  width: 1px !important;           /* tamaño mínimo */
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;         /* elimina márgenes */
  overflow: hidden !important;     /* oculta cualquier contenido sobrante */
  clip: rect(1px, 1px, 1px, 1px) !important; /* recorta todo el elemento */
  white-space: nowrap !important;  /* evita saltos de línea */
  border: 0 !important;
}

/* Estilo base para el logo en escritorio */
.brand-logo {
  width: 240px;      /* ajusta este valor al tamaño “ideal” en desktop */
  height: auto;      /* mantiene la proporción original */
}

/* Si quieres forzar un máximo de altura */
.brand-logo {
  max-height: 120px;  /* para que no sea excesivamente alto */
}





/* Aseguramos que el header permita posicionar hijos de forma absoluta */
header {
  position: relative;
}





  
 .bienvenida-dracollectors {
    display: none;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #1a1a1a, #2c2c2c);
    color: #ffd700;
    padding: 1rem 2rem;
    border: 2px solid #d4af37;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    font-size: 1.1rem;
    font-weight: bold;
    z-index: 9999;
    animation: bienvenidaFadeIn 0.6s ease-out !important;
  }
  
    @keyframes bienvenidaFadeIn {
    0% { opacity: 0; transform: translate(-50%, -20px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
  }
  
  
  
/* =================================================================================== */
/* CONTENEDOR PRINCIPAL */
.cart-page {
  max-width: 1000px;
  margin: 6rem auto;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #FFD700;
  border-radius: 8px;
  padding: 2rem;
  color: #FFD700;
  padding-top: 1rem;
}

.cart-page  h1 {
  margin: 0.5rem 0 1rem;    /* margin top 0.5rem, bottom 1rem */
  text-align: center;       /* centrado horizontal */
  font-size: 3rem;          /* mantienes tu tamaño */
  line-height: 1.2;

  /* Degradado de color en el texto */
  background: linear-gradient(
    to bottom,
    #e53935,   /* rojo vivo */
    #fb8c00,   /* naranja */
    #fdd835    /* amarillo */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;       /* para navegadores que lo soporten */
  color: transparent;          /* fallback */
}

/* =================================================================================== */
/* GRID DE TARJETAS: siempre 3 columnas, gap compacto */
.cart-page .cart-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* =================================================================================== */
/* TARJETA INDIVIDUAL: LAYOUT HORIZONTAL, padding reducido */
.cart-page .cart-card {
  position: relative;    /* para el botón eliminar */
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #FFD700;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: transform 0.2s ease;
    padding: 0px 8px 2.5rem;  /* por ejemplo, baja el top de 8px a 4px, y ajusta el bottom */
  position: relative;
}
.cart-page .cart-card:hover {
  transform: translateY(-2px);
}

/* =================================================================================== */
/* IMAGEN: bloque fijo, deformándose para rellenar */
.cart-page .cart-card img {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  object-fit: fill;
  border-radius: 4px;
}

/* =================================================================================== */
/* CUERPO DE LA TARJETA (texto) */
.cart-page .cart-card .card-body {
  padding-left: 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-page .cart-card .card-title {
  font-size: 1.05rem;
  color: #FFD700;
  margin-bottom: 0.3rem;
  font-weight: bold;
}

.cart-page .cart-card .card-info {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* =================================================================================== */
/* CONTROL DE CANTIDAD: integrado, inline-flex */
.quantity-container {
  display: inline-flex;
  align-items: center;
  border: 1px solid #FFD700;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  height: 30px;
  margin: 0.4rem 0;
}

.quantity-container .qty-btn {
  width: 30px;
  height: 100%;
  background: transparent;
  border: none;
  color: #FFD700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.quantity-container .qty-btn:hover {
  background: #FFD700;
  color: #000;
}

.quantity-container .quantity-input {
  width: 40px;
  border: none;
  background: transparent;
  text-align: center;
  color: #FFD700;
  font-size: 0.9rem;
}

.quantity-container .quantity-input:focus {
  outline: none;
}

/* =================================================================================== */
/* SUBTOTAL: espacio antes del botón eliminar */
.cart-page .cart-card .card-subtotal {
  font-weight: bold;
  color: #28a745;
  margin-bottom: 1.8rem;
}

/* =================================================================================== */
/* BOTÓN ELIMINAR */
.cart-page .cart-card .btn-delete {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid #FFD700;
  color: #FFD700;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cart-page .cart-card .btn-delete:hover {
  background: #FFD700;
  color: #000;
  transform: scale(1.1);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
}

/* =================================================================================== */
/* LOW STOCK (opcional) */
.cart-page .cart-card .low-stock {
  display: inline-block;
  background: #E74C3C;
  color: #FFD700;
  border: 1px solid #FFD700;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  margin-top: 0.5rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.cart-page .cart-card .low-stock:hover {
  background: #C0392B;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

/* =================================================================================== */
/* TOTALES */
.cart-totals {
  background: rgba(0, 0, 0, 0.6);
  padding: 1.5rem;
  border: 1px solid #FFD700;
  border-radius: 6px;
  margin-bottom: 2rem;
}
.cart-totals p {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #FFD700;
}
.cart-totals .shipping-note {
  font-style: italic;
  color: #ccc;
  margin-top: 1rem;
}

/* =================================================================================== */
/* BOTONES DE ACCIÓN – VERSIÓN MÁS COMPACTA Y FONDO OSCURO TRANSPARENTE */

/* Contenedor de botones: centrado y con hueco reducido */
.cart-actions {
  display: flex;               
  justify-content: center;     /* centra los botones */
  gap: 0.5rem;                 /* menos espacio entre ellos */
}

/* Estilo base compartido, ahora más pequeño y compacto */
.cart-actions .btn-secondary,
.cart-actions .btn-primary {
  flex: none;                   /* no ocupan todo el ancho */
  width: auto;                  /* se adaptan al contenido */
  padding: 0.6rem 0.9rem;       /* más pequeñito: 0.4 arriba/abajo, 0.6 lados */
  font-size: 1.1rem;           /* tamaño de texto reducido */
  font-weight: bold;            
  text-align: center;           
  border-radius: 15px;          /* esquinas menos redondeadas */
  transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  text-decoration: none;        /* sin subrayado */
}

/* Botón secundario: fondo negro semitransparente más oscuro */
.btn-secondary {
  background: rgba(0, 0, 0, 0.7); /* 70% opaco */
  color: #FFD700;                 
  border: 3px solid #FFD700;      /* borde dorado, fino */
}
.btn-secondary:hover {
  background: #FFD700;  /* fondo amarillo en hover */
  color: #000;          /* texto negro para contraste */
  border-color: #fff;   /* borde blanco */
}

/* Botón primario: fondo negro semitransparente más oscuro */
.btn-primary {
  background: rgba(0, 0, 0, 0.7); /* 70% opaco */
  color: #28a745;                 
  border: 3px solid #28a745;      /* borde verde, fino */
}
.btn-primary:hover {
  background: #28a745;  /* fondo verde en hover */
  color: #fff;          /* texto blanco */
  border-color: #fff;   /* borde blanco */
}


/* fuerza que cada span de .card-info ocupe línea completa */
.cart-page .cart-card .card-info span {
  display: block;
  margin-top: 0.3rem; /* opcional, separa un poco del control */
}

.cart-card p.available {
  background: #28a745;
  color: #fff;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 4px;
  display: inline-block;
  margin: 0.5rem 0;
}

/* =================================================================================== */
/* PIE DE TARJETA: disponibilidad + papelera en la misma línea */
/* 1) Aseguramos espacio extra abajo en la tarjeta para el footer */
.cart-page .cart-card {
  padding-bottom: 3.5rem; /* ajusta si quieres más o menos espacio */
  position: relative;     /* ya lo tenías, pero es importante */
}

/* 2) Anclamos el footer de la tarjeta en la parte inferior */
.cart-page .cart-card .card-footer {
  position: absolute;
  bottom: 10px;   /* coincide con el botón eliminar */
  left: 8px;      /* algo de margen a la izquierda */
  right: 8px;     /* algo de margen a la derecha */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 3) Nos aseguramos de que el mensaje ocupe lo que toca */
.cart-page .cart-card .card-footer .availability {
  margin: 0 10px 0 0;
    flex: 1;           /* deja que ocupe todo el espacio posible */
  font-size: 1rem;    /* ajústalo al tamaño que quieras */
  text-align: center;   /* centra el texto */
  font-weight: bold;
}

/* 4) Restauramos el botón basurero al flujo del footer */
.cart-page .cart-card .card-footer .btn-delete {
  position: static;
  margin: 0;
}
/* Reducimos el espacio interior inferior */
.cart-page .cart-card {
  padding-bottom: 1.5rem; /* antes 3.5rem */
}

/* Subimos el footer */
.cart-page .cart-card .card-footer {
  bottom: 10px; /* antes 10px */
}

/* Opcional: si quieres equilibrar, juega también con el padding-left/right */
.cart-page .cart-card .card-footer {
  left: 10px;  /* antes 8px */
  right: 10px; /* antes 8px */
}

/* Elimina el margen por defecto del h3 para que “pegue” más arriba */
.cart-page .cart-card .card-title {
  margin-top: 0;
}

/* (Opcional) si quieres un poquito de espacio entre la imagen y el título: */
.cart-page .cart-card .card-body {
  padding-top: 15px;  /* ajusta según necesites */
}

/* Quitar subrayado de los enlaces-botón */
.cart-actions .btn-secondary,
.cart-actions .btn-primary {
  text-decoration: none;
}

/* Asegurarnos también al pasar el ratón o al hacer foco */
.cart-actions .btn-secondary:hover,
.cart-actions .btn-primary:hover,
.cart-actions .btn-secondary:focus,
.cart-actions .btn-primary:focus {
  text-decoration: none;
  outline: none; /* opcional: quita el outline al hacer foco */
}

/* =================================================================================== */
/* CART TOTALS: dos columnas (totales + mensaje) */
.cart-totals {
  display: flex;
  flex-wrap: wrap;        /* en móvil se apilan */
  gap: 1rem;              /* espacio entre columnas */
  background: rgba(0, 0, 0, 0.6);
  padding: 1.5rem;
  border: 1px solid #FFD700;
  border-radius: 6px;
  margin-bottom: 2rem;
}

/* Izquierda: datos habituales */
.cart-totals .totals-left {
  flex: 1 1 300px;        /* crece, pero mínimo 300px */
}

/* Derecha: mensaje */
.cart-totals .totals-right {
  flex: 1 1 200px;        /* crece, pero mínimo 200px */
  display: flex;
  align-items: center;    /* centra verticalmente el texto */
  justify-content: center;/* centra horizontalmente */
}

/* Estilo para tu frase destacada */
.cart-totals .highlight-msg {
  color: #FFD700;
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  padding: 0.5rem;
  border: 1px dashed rgba(255, 215, 0, 0.5);
  border-radius: 4px;
}




@media (max-width: 600px) {
    body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-image: url('assets/images/fondo_mi_cuenta_4.webp'); /* Fondo de la sección */
  background-size: 100% 100%; /* Fuerza que ocupe todo el ancho y alto */
  background-attachment: scroll !important;   /* se mueve con el scroll */
  background-repeat: no-repeat !important;    /* evita repeticiones grises */
  background-position: center top !important; /* centrar en la parte superior */
  color: #fff; /* Texto en blanco para mejor contraste */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}
  /* Reducimos el gap entre totales y mensaje en móvil */
  .cart-totals {
    gap: 0.5rem;          /* antes 1rem */
  }
  /* Pegamos el bloque derecho a los totales */
  .cart-totals .totals-right {
    margin-top: 0;        /* elimina el espacio superior */
    padding-top: 0;       /* en caso de tener padding */
    align-items: flex-start; /* opcional: alinea el mensaje con el inicio */
  }
  
  .cart-page {

  margin: 3rem auto;

}
}



/* ============================================= */
/* 3) Aseguro que los .btn-secondary y .btn-primary NUNCA se subrayen */
.cart-actions .btn-secondary,
.cart-actions .btn-primary {
  text-decoration: none !important;
}

/* Y también sus estados hover/focus */
.cart-actions .btn-secondary:hover,
.cart-actions .btn-primary:hover,
.cart-actions .btn-secondary:focus,
.cart-actions .btn-primary:focus {
  text-decoration: none !important;
  outline: none;
}

/* ============================================= */
/* 1) Desactivo el pseudo-elemento animado */
.highlight-msg::before {
  display: none !important;
  content: none !important;
}

/* 2) Borde dashed estático más grueso y con separación */
.highlight-msg {
  border: 3px dashed rgba(255, 215, 0, 0.7) !important; /* 3px de grosor */
  padding: 0.75rem !important;   /* espacio interno para separar texto del borde */
  margin: 0.5rem 0 !important;   /* márgenes superior e inferior */
  /* si quieres controlar margen lateral, usa margin: 0.5rem auto; */
}

/* ============================================= */
/* 3) Refuerzo para móvil */
@media (max-width: 600px) {
  .highlight-msg {
    display: block !important;    /* asegurar que se vea */
    padding: 0.5rem !important;   /* menos padding en móvil si lo prefieres */
    border-width: 2px !important; /* un poco más fino en móvil */
  }
  
  .cart-actions .btn-secondary,
  .cart-actions .btn-primary {
    text-decoration: none !important;
  }
}
/* Mobile: 1 tarjeta por fila manteniendo el diseño horizontal */
@media (max-width: 600px) {
  .cart-cards {
    display: grid;
    grid-template-columns: 1fr !important; /* una columna */
    gap: 0.75rem;                           /* mismo gap que en desktop */
  }

  .cart-card {
    width: 100%;        /* ocupa todo el ancho de la columna */
    flex-direction: row;/* mantiene imagen + cuerpo en fila */
  }

  .cart-page {
    padding: 1rem;      /* un poco menos de padding para ganar espacio */
  }
}


@media (max-width: 600px) {
  /* Le damos márgenes laterales iguales a .cart-cards */
  .cart-cards {
    margin-left: 0rem !important;
    margin-right: 1rem !important;
    /* Quitamos cualquier padding previo */
    padding: 0 !important;
  }
}

@media (max-width: 600px) {
  .cart-page {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    /* Si quieres, reduce también el padding interno */
 
  }
}
@media (max-width: 600px) {
  .cart-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;              /* separación entre botones */
    margin-left: 0.1rem;      /* espacio izquierdo */
    margin-right: 0.75rem;    /* espacio derecho */
    box-sizing: border-box;
  }

  .cart-actions .btn-secondary,
  .cart-actions .btn-primary {
    flex: none;               /* no estiran al 50% */
    width: auto;              /* se adaptan al contenido */
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    white-space: nowrap;
    text-decoration: none !important;
  }

  .cart-actions .btn-secondary {
    z-index: 1;               /* por debajo */
  }

  .cart-actions .btn-primary {
    z-index: 2;               /* por encima */
  }
}

@media (max-width: 600px) {
  .cart-page > h1 {
    font-size: 2.5rem;  /* en móvil más pequeño que los 3rem de escritorio */
    margin-top: 0.5rem; /* opcional: afina el espaciado si hace falta */
    margin-bottom: 0.75rem;
    line-height: 1.2;
  }
}
/* ============================================= */
/* Desactivar cualquier scroll-snap en toda la página */
html, body, .cart-page {
  scroll-snap-type: none !important;
  overscroll-behavior-y: auto !important;
}

/* En caso de que alguna sección tuviera snap en los hijos */
* {
  scroll-snap-align: none !important;
}

@media (max-width: 600px) {
  h1 span {
    display: block;
    font-size: 2.2rem;
    padding: 0 1rem;          /* espaciado lateral para que no toque los bordes */
    word-break: break-word;  /* permite que corte bien si el texto es muy largo */
    text-align: center;
  }
}

@media (max-width: 600px) {
  .brand-logo {
    margin-top: 0rem;   /* ajusta aquí la distancia desde arriba */
    margin-bottom: 0rem;  /* ajusta aquí la distancia hacia abajo */
  }
}


  
  
    /* Responsive: reducimos el logo en móvil */
@media (max-width: 768px) {
  .brand-logo {
    width: 200px;     /* más pequeño en móviles */
    max-height: 100px;
    
    
  }
  .header-brand {
    margin-top: 50px;   /* baja todo el logo + texto 20px */
  }
}

/* Si el logo está demasiado pegado, añade un margen */
.header-brand .brand-logo {
  margin-right: 8px; /* separación entre logo y texto (aunque el texto esté oculto) */
}


@media (max-width: 600px) {
  .header-content {
    text-align: center;
    margin-bottom: 1rem;
  }

  .header-content h1 {
    margin: 0 0 0.5rem 0; /* menos espacio inferior */
    font-size: 2rem;      /* ajusta el tamaño si lo ves grande en móvil */
  }

  .header-content p {
    margin: 0;
    font-weight: 500;    /* negrita para el subtítulo */
    font-size: 1.2rem;    /* opcional, ajusta el tamaño si lo ves pequeño */
  }
}
/* Enlaces en la tarjeta de carrito sin subrayado y siempre amarillos */
.cart-card .card-title a {
  text-decoration: none !important;
  color: #FFD700 !important;
}

/* Mantén el mismo color al hacer hover */
.cart-card .card-title a:hover {
  color: #FFD700 !important;
  text-decoration: none !important;
}
/* precio unitario: label en blanco, valor en naranja */
.cart-page .cart-card .card-info span:first-of-type {
  color: #FFA500;
}
.cart-page .cart-card .card-info span + span {
  color: #FFA500;
  font-weight: bold;
}
/* Franja “¡Solo quedan X unidades!” en una sola línea y tamaño reducido */
.cart-page .cart-card .low-stock {
  white-space: nowrap;    /* evita el salto de línea */
  font-size: 0.9rem !important;     /* un pelín más pequeño */
  padding: 0.3rem 0.6rem;  /* ajusta el padding si lo ves muy alto */
  font-weight: bold !important;
}



  /* ============================
   Fondo “fijo” + footer pegado
   ============================ */

/* 1) html/body llenan la ventana, permiten pull-to-refresh */
html,
body {
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;            /* deja que la página siga scrollando */
  overscroll-behavior-y: auto !important; /* permite pull-to-refresh en iOS/Android */
}

/* 2) Fondo fijo en su propio elemento */
.fixed-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-image: url('assets/images/fondo_mi_cuenta_4.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important; /* no interfiere con el scroll */
  z-index: -1 !important;
  background-color: #eb632d !important;
}

/* 2b) En móvil cambia la imagen */
@media (max-width: 768px) {
  .fixed-bg {
    background-image: url('assets/images/fondo_mi_cuenta_movil.webp') !important;
  }
}

/* 3) Empuja el footer al fondo */
.page-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* 4) Mantén el footer siempre abajo */
.footer {
  margin-top: auto !important;
}
/* ─────────────────────────────────────────────
   Desactivar auto-enlaces telefónicos en iOS
   ───────────────────────────────────────────── */
a[x-apple-data-detectors],
a[href^="tel:"] {
  color: inherit !important;         /* mantiene el color original */
  text-decoration: none !important;  /* quita cualquier subrayado */
  pointer-events: none !important;   /* desactiva el clic */
  cursor: default !important;        /* cursor normal */
}


/* Pago seguro (carrito) */
.cart-payments-inline{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 20px;
  font-weight:600;
}
.cart-payments-inline .label{
  color:#FFD700; /* naranja dracollectors */
}
.cart-payments-inline img{
  height:30px;
  width:auto;
  display:inline-block;
}

@media (max-width:640px){
  .cart-payments-inline{
    flex-wrap:wrap;
    gap:8px 10px;
  }
  .cart-payments-inline img{
    height:22px;
  }
}