/* ========================
   styles.css (ordenado de arriba hacia abajo)
   ======================== */

/***** 1. RESETEO BÁSICO *****/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0 !important;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  font-size: 14px;
  color: #333;
}

/***** 2. BARRA DE INFORMACIÓN SUPERIOR *****/

/* Estilos para el área de usuario y menú */




/***** 4. SLIDER PRINCIPAL *****/
.slider-y {
  position: relative;
  width: 100%;
  height: 399px;
  overflow: hidden;
  background: #eee;
  margin-bottom: 40px;
}

.slider-y .slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
}

.slider-y .slide.active {
  /* This class would be managed by JS for non-flexbox slider */
  opacity: 1;
  z-index: 1;
}

.slider-y .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* llena el slide */
  object-position: center;
  /* centra la imagen */
  display: block;
}


.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: .7;
  transition: background .3s, opacity .3s;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-btn:hover {
  background: rgba(0, 0, 0, .7);
  opacity: 1;
}

.slider-btn.prev {
  left: 15px;
}

.slider-btn.next {
  right: 15px;
}

.slider-dinamico {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

/***** 5. CONTENEDOR PRINCIPAL DE SECCIONES (grupos alfa) *****/
#contenedorBotones {
  max-width: 1200px;
  margin: auto;
  padding: 2rem;
  flex-direction: column;
  gap: 40px;
}

/***** 6. SECTION E (cada grupo alfa) *****/
.section-e {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .07);
  margin-bottom: 50px;
}

.bloque-promocional {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: 16px;
  align-items: center;
}

.bloque-promocional::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .88)0%, rgba(255, 255, 255, .72)35%, rgba(255, 255, 255, .35)65%, rgba(255, 255, 255, 0)100%);
  z-index: 1;
}

.bloque-imagen {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bloque-imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloque-texto {
  position: relative;
  z-index: 2;
  max-width: 48%;
  padding: 48px 32px;
}

.bloque-titulo {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 700;
  margin: 0 0 24px;
  line-height: 1.2;
  color: #111;
}

.bloque-descripcion {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #333;
  margin: 0 0 32px;
}

.boton-personalizar {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 14px 32px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s;
}

.boton-personalizar:hover {
  background: #333;
}

/***** 7. FILA DE CARDS X (cabecera) *****/
.cards-row {
  position: relative;
  margin: -180px auto 40px;
  z-index: 2;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Default for PC */
  gap: 28px;
  padding: 0 40px;
  justify-content: center;
}

.cards-row .card-placeholder {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  /* User specific override */
}

.cards-row,
.cards-row * {
  overflow: visible;
  /* User specific style */
}

.card-placeholder {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-placeholder img {
  width: 100%;
  height: 100%;
  /* Fill the card height */
  object-fit: cover;
  /* Cover ensures the image fills, might crop */
  border-radius: 8px;
}



/***** 8. CARRUSEL DE CARDS DINÁMICAS *****/
.bloque-con-cards {
  position: relative;
  margin-top: 10px;
  padding: 0 40px;
  /* Provides space for buttons if they are outside the scrollable area */
  overflow: hidden;
  /* Hides the scroll buttons if they are meant to be 'inside' this padding */
}

.cards-dinamicas {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  /* Padding for items inside the scrollable area */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cards-dinamicas::-webkit-scrollbar {
  display: none;
}

.btn-scroll {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s;
}

.btn-scroll:hover {
  background: #000;
}

.btn-scroll.left {
  left: 5px;
  /* Position relative to .bloque-con-cards */
}

.btn-scroll.right {
  right: 5px;
  /* Position relative to .bloque-con-cards */
}

/***** 9. CARD-A (imagen + texto vertical) *****/
.card-a {
  display: flex;
  min-width: 240px;
  height: 360px;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(250, 248, 248, 0.1);
  background: white;
  padding: 0;
  flex-shrink: 0;
  /* Important for flex carousels */
}

.card-contenido {
  /* Assuming this is for card-a */
  display: flex;
  /* gap: 8px; /* This might be for horizontal stacking, if vertical, align/justify used */
  flex-direction: column;
  /* If text is below/above image */
  height: 100%;
  width: 100%;
  align-items: center;
  /* Center items horizontally */
  justify-content: center;
  /* Center items vertically or space them */
  padding: 8px;
  /* Add some padding inside the card */
}

.card-contenido img {
  /* Assuming this is for card-a */
  /* height: 100%; */
  /* This might stretch if text is also present */
  max-height: 180px;
  /* Or a percentage like 60% */
  width: auto;
  max-width: 100%;
  /* Ensure image is not wider than card */
  object-fit: contain;
  /* flex-shrink: 0; /* Not needed if parent is managing layout */
  margin-bottom: 8px;
  /* If text is below */
}


/***** 10. NOTIFICACIONES *****/
.notificacion {
  position: fixed;
  bottom: -100px;
  /* Start off-screen */
  right: 20px;
  background: #1a4a8d;
  color: #fff;
  padding: 15px 25px;
  border-radius: 8px;
  transition: bottom .5s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.notificacion.mostrar {
  bottom: 20px;
  /* Bring on-screen */
}

.notificacion-texto::before {
  content: "✓";
  margin-right: 10px;
}

/* Card Banner Type */
.card-banner {
  display: flex;
  height: 360px;
  border: none;
  /* Corrected from two padding-lefts */
  margin-left: 12px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(70, 69, 69, 0.199);
  background: transparent;
  flex-shrink: 0;
  flex-grow: 0;
  /* min-width: 200px; /* Can be uncommented if a specific min-width is needed */
}

.card-banner .card-texto {
  /* This seems to be a duplicate or alternative to card-etiqueta */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(14px, 2.3vw, 38px);
  /* Corrected 23vw to 2.3vw, assuming typo */
  font-weight: bold;
  color: #333;
  background: transparent;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 100%;
  flex-shrink: 0;
}

.card-banner .card-imagen {
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.card-banner .card-imagen img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.card-banner .card-etiqueta {
  /* This is the vertical text label */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(14px, 2vw, 24px);
  font-weight: bold;
  color: #333;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 100%;
  background: transparent;
  flex-shrink: 0;
  width: auto;
}



/* ... (your existing CSS) ... */

/***** 8. CARRUSEL DE CARDS DINÁMICAS (ALPHA GROUP) *****/
/* ... (existing .bloque-con-cards, .cards-dinamicas, .btn-scroll, etc.) ... */


/* ========================
   NEW: BLOQUE TIPO B STYLES
   ======================== */
.bloque-tipo-b {
  background-color: #fff;
  /* Fondo blanco */
  padding: 1.5rem;
  /* Espaciado interno para el título y el carrusel */
  margin-bottom: 40px;
  border-radius: 12px;
  /* Bordes redondeados, similar a .collection-card-c */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  /* Sombra sutil, similar a .card-b */
  /* Asegúrate de que no haya un padding lateral extra si el padding general ya lo cubre */
}

.bloque-tipo-b h2.bloque-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin-left: 0;
  /* Ajustado, el padding del bloque padre maneja el espaciado */
  margin-right: 0;
  /* Ajustado */
  margin-bottom: 20px;
  /* Mantiene el espacio debajo del título */
  color: #333;
}

.carousel-container-b {
  position: relative;
  /* If buttons are inside this container, padding is needed for content visibility */
  /* e.g. padding: 0 40px; if buttons are part of the container's background */
}

.carousel-scroll-b {
  display: flex;
  gap: 16px;
  /* Space between cards */
  overflow-x: auto;
  scroll-behavior: smooth;
  /* El padding lateral aquí es para que las tarjetas iniciales/finales no se peguen
     a los bordes del área de scroll si los botones están fuera de esta.
     Con el padding en .bloque-tipo-b, podrías reducir o ajustar este. */
  padding: 10px 0;
  /* Mantenemos un padding vertical para el área de scroll */
  margin: 0 auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.carousel-scroll-b::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* --- Añade este código a tu archivo de estilos --- */

/* --- CÓDIGO CSS CORREGIDO --- */

/* Esta clase ocultará el título y AMBOS tipos de contenedores de precio */
.card-b.hide-info .card-b-title,
.card-b.hide-info .dynamic-prices-container,
/* Oculta el contenedor de precios dinámicos */
.card-b.hide-info .card-b-price {
  /* Oculta el párrafo de precio simple */
  display: none;
}

/* Opcional: Mantenemos las mejoras visuales */
.card-b.hide-info {
  height: 100%;
}

.card-b.hide-info img {
  height: 100%;
  object-fit: cover;
}

.card-b {
  flex: 0 0 auto;
  /* Don't shrink, don't grow, basis is auto/width */
  width: 220px;
  /* Card width - adjust as per your design and 2-6 cards visibility */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}

.card-b:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.card-b img {
  width: 100%;
  height: 180px;
  /* Adjust as needed */
  object-fit: cover;
  /* Or 'contain' if you don't want cropping */
  background-color: #f5f5f5;
  /* Placeholder bg for images */
}

.card-b-title {
  font-size: 1rem;
  /* 14px-16px approx */
  font-weight: 600;
  color: #222;
  padding: 12px 12px 4px 12px;
  margin: 0;
  line-height: 1.3;
  height: 2.6em;
  /* Approx 2 lines, adjust based on font & line-height */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.card-b-price {
  font-size: 1.1rem;
  /* 16px-18px approx */
  font-weight: bold;
  color: #000;
  padding: 4px 12px;
  margin: 0;
}



.btn-scroll-b {
  position: absolute;
  top: calc(50% + 10px);
  /* Align with middle of scrollArea approximately, considering title height */
  transform: translateY(-50%);
  width: 44px;
  /* Slightly larger for better click area */
  height: 44px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-scroll-b:hover {
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-scroll-b.prev-b {
  left: 10px;
  /* Position relative to .bloque-tipo-b or .carousel-container-b if it has padding */
}

.btn-scroll-b.next-b {
  right: 10px;
}

/* ... (estilos existentes para Bloque B) ... */

/* ========================
   NEW: BLOQUE TIPO C STYLES
   ======================== */
.bloque-tipo-c {
  background-color: #fff;
  /* Fondo blanco */
  padding: 1.5rem;
  /* Espaciado interno general, igual que Bloque B */
  margin-bottom: 40px;
  border-radius: 12px;
  /* Bordes redondeados, igual que Bloque B */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  /* Sombra sutil, igual que Bloque B */
  position: relative;
  /* Ya estaba para los botones, se mantiene */
}

.bloque-c-main-title {
  font-size: 2rem;
  /* Similar a "TOP DESCUENTOS" */
  font-weight: 700;
  color: #333;
  margin-bottom: 25px;
  text-align: left;
  /* O center si prefieres */
  padding-left: 1rem;
  /* Alineado con el padding de .bloque-tipo-c */
}

.collection-cards-container-c {
  display: flex;
  gap: 24px;
  /* Espacio entre tarjetas de colección */
  overflow-x: auto;
  /* Si quieres que las tarjetas de colección sean desplazables horizontalmente */
  padding: 10px 0;
  /* Padding para el scroll si es necesario */
  /* Si no es scrollable, puedes usar flex-wrap: wrap; y justificar */
  /* justify-content: space-between; */
}

/* Para que el scroll en .collection-cards-container-c se vea bien si se activa */
.collection-cards-container-c::-webkit-scrollbar {
  height: 8px;
}

.collection-cards-container-c::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}


.collection-card-c {
  flex: 0 0 360px;
  /* Ancho fijo para cada tarjeta de colección, ajusta según diseño */
  /* Para 3 tarjetas como en la imagen, sería (100% / 3) - gap. Ejemplo: flex-basis: calc(33.333% - 16px); */
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  /* Para que el border-radius afecte a las imágenes internas */
  display: flex;
  flex-direction: column;
}

.collection-c-title {
  font-size: 1.3rem;
  /* Ej: "DEPORTES Y FITNESS" */
  font-weight: 600;
  color: #111;
  padding: 16px 16px 12px 16px;
  margin: 0;
  background-color: #f9f9f9;
  /* Un fondo ligero para el título de la colección */
  border-bottom: 1px solid #eee;
}

.collection-c-large-image {
  width: 100%;
  height: 240px;
  /* Altura para la imagen grande, ajustar */
  background-color: #e9e9e9;
  /* Placeholder mientras carga la imagen */
}

.collection-c-large-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Para que la imagen cubra el área */
}

.collection-c-thumbnails-section {
  padding: 12px;
  background-color: #f9f9f9;
  /* Fondo para la sección de miniaturas */
  position: relative;
  /* Para los botones de scroll */
  min-height: 100px;
  /* Altura mínima para la fila de miniaturas */
}

.collection-c-thumbnails-scroll {
  display: flex;
  gap: 8px;
  /* Espacio entre miniaturas */
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 0;
  /* Padding interno para las miniaturas */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE */
}

.collection-c-thumbnails-scroll::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.collection-c-thumbnail {
  flex: 0 0 80px;
  /* Ancho de cada miniatura */
  height: 80px;
  /* Altura de cada miniatura */
  border-radius: 6px;
  overflow: hidden;
  background-color: #e0e0e0;
  cursor: pointer;
  /* Si las miniaturas fueran interactivas */
}

.collection-c-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-scroll-c-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  font-size: 16px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.btn-scroll-c-thumb:hover {
  background-color: #fff;
}

.btn-scroll-c-thumb.prev-c-thumb {
  left: 15px;
  /* Ajusta si el padding de .collection-c-thumbnails-section cambia */
}

.btn-scroll-c-thumb.next-c-thumb {
  right: 15px;
}

/* New styles for Bloque C main scroll buttons */
.btn-scroll-collections-c {
  position: absolute;
  top: 50%;
  /* Adjust if it should align with cards, not whole block */
  transform: translateY(-50%);
  width: 44px;
  /* Or your preferred size */
  height: 44px;
  /* Or your preferred size */
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  color: #333;
  font-size: 24px;
  /* Larger for main navigation */
  cursor: pointer;
  z-index: 10;
  /* Ensure they are above the cards */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-scroll-collections-c:hover {
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Ajuste para los botones de scroll del contenedor de colecciones */
.btn-scroll-collections-c.prev-collections {
  left: 10px;
  /* Ajustado para estar dentro del padding del bloque C */
  /* (1.5rem de padding en el bloque padre es aprox 24px, 10px queda bien adentro) */
}

.btn-scroll-collections-c.next-collections {
  right: 10px;
  /* Ajustado para estar dentro del padding del bloque C */
}

/* Ensure scrollbar for the container is hidden (already in your CSS but good to confirm) */
.collection-cards-container-c {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  /* El padding aquí podría ser 0 si el padding del .bloque-tipo-c es suficiente,
     o un padding vertical pequeño si se desea. */
  padding: 10px 0;
  /* Mantenemos padding vertical para el área de scroll */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.collection-cards-container-c::-webkit-scrollbar {
  display: none;
}

/* Responsive para Bloque C */
@media (max-width: 1200px) {
  .collection-card-c {
    flex-basis: calc(50% - 12px);
    /* 2 tarjetas por fila en tablets */
  }
}


/* Añade estos nuevos estilos al final de tu archivo styles (4).css o en una sección apropiada */

/* ========================
   BLOQUE TIPO D STYLES
   ======================== */
.bloque-tipo-d {
  width: 100%;
  /* Ocupa el ancho disponible del contenedor padre */
  /* Opción 1: Usar una relación de aspecto para un rectángulo horizontal consistente */
  aspect-ratio: 21 / 9;
  /* Ejemplo común de rectángulo horizontal (ajusta 16/9 a tu gusto, ej. 2/1, 3/2) */
  /* Opción 2: O usar una altura fija si prefieres (descomenta y comenta aspect-ratio) */
  /* height: 250px; */
  /* Ejemplo de altura fija, ajusta según necesites */

  margin-bottom: 40px;
  /* Espacio similar a otros bloques */
  overflow: hidden;
  /* MUY IMPORTANTE: para recortar la imagen que se desborde (efecto centerCrop) */
  position: relative;
  /* Por si en el futuro necesitas posicionar elementos hijos absolutamente */
  border-radius: 12px;
  /* Opcional: para redondear las esquinas del bloque/imagen */

  /* Estilos opcionales para fondo blanco y sombra, como los otros bloques */
  background-color: #fff;
  /* Si quieres fondo blanco detrás de la imagen (útil si la imagen no carga) */
  /* padding: 0; */
  /* Si tiene fondo, podrías querer padding, pero para centerCrop directo sobre la imagen, no es necesario */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  /* Sombra similar a otros bloques */
}

.bloque-tipo-d .bloque-d-imagen {
  display: block;
  width: 100%;
  /* La imagen intenta ocupar el 100% del ancho de .bloque-tipo-d */
  height: 100%;
  /* La imagen intenta ocupar el 100% del alto de .bloque-tipo-d */
  object-fit: cover;
  /* Escala la imagen para mantener su relación de aspecto mientras llena las dimensiones del elemento.
                          El objeto se recortará para ajustarse si es necesario. (Este es el efecto centerCrop) */
  object-position: center;
  /* Asegura que la imagen esté centrada antes de cualquier recorte. (Suele ser el default para cover) */
  border-radius: 12px;
  /* Si el contenedor .bloque-tipo-d tiene border-radius y quieres que la imagen también lo tenga visiblemente.
                            Si .bloque-tipo-d tiene overflow:hidden y border-radius, este en la imagen puede no ser necesario. */
}

/* Media queries para ajustar el tamaño o aspecto en diferentes pantallas si es necesario */



.payment-methods {
  font-size: 18px;
  margin: 5px 0;
}


/* =======================================================
   NUEVO: ESTILOS PARA BOTONES DE SCROLL DEL BLOQUE C
   ======================================================= */

.btn-scroll-collections-c {
  position: absolute;
  top: 55%;
  /* Ligeramente más abajo para centrarse con las tarjetas */
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-scroll-collections-c:hover {
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-scroll-collections-c.prev-collections {
  left: 10px;
  /* Posición del botón izquierdo */
}

.btn-scroll-collections-c.next-collections {
  right: 10px;
  /* Posición del botón derecho */
}



@media (max-width: 768px) {
  .breadcrumbs li {
    font-size: 0.8em;
  }

  .breadcrumbs li+li::before {
    margin: 0 5px;
  }

  .product-title {
    font-size: 1.6em;
  }

  .current-price {
    font-size: 1.5em;
  }

  .tabs-navigation {
    flex-direction: column;
  }

  .tab-link {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
  }

  .tab-link.active {
    border-bottom-color: var(--primary-color);
    /* Mantener borde inferior para activa */
    border-left: 3px solid var(--primary-color);
    /* Borde izquierdo para activa en móvil */
    border-bottom: 1px solid var(--border-color);
    /* Quitar borde inferior al apilar */
  }

  .tabs-content .tab-pane {
    padding: 20px;
  }

  .related-products-section .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }

  .related-product-card img {
    height: 120px;
  }
}


/* Ajuste responsivo para la galería y sus thumbnails */
@media (max-width: 768px) {
  .product-main-layout {
    flex-direction: column;
    /* Apila la galería y la info en móviles */
  }

  .product-gallery-column,
  .product-info-column {
    flex-basis: auto;
    /* Quita la base flexible */
    width: 100%;
  }

  #productThumbnails .thumbnail-img {
    width: 70px;
    height: 70px;
  }

  .additional-views-container {
    margin-top: 15px;
  }
}



/* Aplicar todos los estilos móviles dentro de una sola Media Query */
@media (max-width: 768px) {



  /* ================== LAYOUT PRINCIPAL DEL PRODUCTO ================== */

  .product-detail-page-container {
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .product-main-layout {
    gap: 0;
    padding: 0 15px;
  }

  .product-info-column {
    padding-top: 15px;
  }

  .product-title {
    font-size: 1.5em;
  }

  .current-price {
    font-size: 1.8em;
  }

  .product-price-container {
    background-color: #fffae6;
    border: 1px solid #ffde8a;
    border-radius: 8px;
    padding: 12px;
    margin-top: 15px;
  }

  /* ================== BARRA DE ACCIONES FIJA ================== */

  .product-actions-wrapper {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 10px 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .product-actions {
    flex-grow: 1;
    display: flex;
    gap: 10px;
  }

  .quantity-control {
    flex-shrink: 0;
  }

  .add-to-cart-button {
    flex-grow: 1;
    padding: 12px 10px;
  }

  .wishlist-button {
    font-size: 1.4em;
    padding: 8px 12px;
  }

  .wishlist-button i {
    margin-right: 0;
  }

  .wishlist-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ================== GRID DE PRODUCTOS RELACIONADOS ================== */

  .related-products-section .section-title {
    font-size: 1.3em;
    text-align: left;
    padding-left: 15px;
  }

  #relatedFamilyProductsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 15px;
  }

  #relatedFamilyProductsGrid .related-product-card {
    padding: 8px;
    text-align: left;
  }

  #relatedFamilyProductsGrid .related-product-card img {
    height: 140px;
    width: 100%;
    object-fit: cover;
  }

  #relatedFamilyProductsGrid .related-product-card h3 {
    font-size: 0.85em;
    min-height: 2.5em;
    margin: 8px 0;
  }

  #relatedFamilyProductsGrid .related-product-card .price {
    font-size: 1em;
    margin-bottom: 10px;
  }

  #relatedFamilyProductsGrid .product-actions-related {
    padding: 8px;
    gap: 8px;
  }

  #relatedFamilyProductsGrid .quantity-selector {
    max-width: 100px;
  }

  #relatedFamilyProductsGrid .quantity-selector .qty-btn {
    padding: 4px 10px;
    font-size: 16px;
  }

  #relatedFamilyProductsGrid .quantity-selector .qty-input {
    font-size: 14px;
  }

  #relatedFamilyProductsGrid .btn {
    padding: 8px;
    font-size: 0.8em;
    font-weight: 500;
  }



  /* =================================================================== */
  /* == CÓDIGO A AÑADIR DENTRO DE @media (max-width: 768px) EN styles.css == */
  /* =================================================================== */

  /* Ajuste de altura para el slider principal en vista móvil */
  .slider-y {
    height: 220px;
    /* Altura reducida para móviles, puedes ajustarla si lo necesitas */
    margin-bottom: 20px;
    /* Menos espacio debajo del slider */
  }

  /* Ajuste para la fila de tarjetas, que ahora serán círculos */
  .cards-row {
    width: auto;
    height: auto;
    grid-template-columns: repeat(4, 1fr);
    /* Mantenemos las 4 columnas en una fila */
    padding: 0 15px;
    /* Menos padding lateral en móvil */
    gap: 15px;
    /* Espacio reducido entre los círculos */
    margin-top: -80px;
    /* Ajustamos el margen negativo para que se superponga correctamente al slider más corto */
    margin-bottom: 30px;
  }

  /* Transformación de las tarjetas a círculos */
  .card-placeholder {
    width: auto;
    height: auto;
    /*border-radius: 50%;*/
    /* ¡La clave para hacer el contenedor circular! */
    /*aspect-ratio: 1 / 1;*/
    /* Asegura que sea un cuadrado para un círculo perfecto */
    border: 3px solid white;
    /* Opcional: un borde blanco para destacar sobre el slider */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    /* Sombra un poco más notoria */
  }

  /* La imagen dentro de la tarjeta también debe ser circular */
  .card-placeholder img {
    border-radius: 50%;
    /* Asegura que la imagen llene el círculo a la perfección */
  }

  .card-a {
    min-width: 0;
  }

  /*************BLOQUES**************/
  .section-e {
    /* Sombra más sutil en móvil */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  }

  .bloque-promocional {
    /* Quita la altura mínima fija */
    aspect-ratio: unset;
    margin-left: 9px;
    margin-right: 9px;
    margin-top: 9px;
    /* Quita la relación de aspecto para un layout flexible */
  }

  .bloque-promocional::before {
    /* Ajusta el gradiente para que funcione mejor en un layout vertical */
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0) 100%);
  }

  .bloque-texto {
    position: relative;
    /* El texto ahora forma parte del flujo normal */
    width: 100%;
    max-width: 100%;
    padding: 20px 20px 15px 20px;
    /* Padding más compacto */
    text-align: center;
    /* Centra el texto */
  }

  .bloque-titulo {
    font-size: clamp(1.5rem, 6vw, 2rem);
    /* Tamaño de fuente adaptable */
    margin-bottom: 12px;
  }

  .bloque-descripcion {
    font-size: 0.95rem;
    /* Descripción ligeramente más pequeña */
    margin-bottom: 20px;
  }

  .boton-personalizar {
    padding: 12px 28px;
    /* Botón un poco más pequeño */
    font-size: 0.9em;
  }


  .bloque-con-cards {
    padding: 0;
    /* Eliminamos el padding lateral para que el carrusel llegue a los bordes */
  }

  .card-banner {
    height: 260px;
    /* Tarjetas del carrusel un poco más bajas */
  }

  /* --- Bloque B (Carrusel de Productos / .bloque-tipo-b) --- */

  .bloque-tipo-b {
    padding: 1rem 0;
    margin-bottom: 20px;
    border-radius: 0;
    /* Eliminamos las esquinas redondeadas */
  }

  .bloque-tipo-b h2.bloque-title {
    font-size: 1.4rem;
    /* Título más pequeño */
    margin-bottom: 15px;
  }

  .carousel-scroll-b {
    gap: 12px;
    /* Espacio entre tarjetas ligeramente reducido */
  }

  .card-b {
    width: 170px;
    /* Tarjetas más angostas para ver más en pantalla */
  }

  .card-b-title {
    font-size: 0.9rem;
  }

  .card-b-price {
    font-size: 1rem;
  }



  .btn-scroll-b {
    /* Hacemos los botones de scroll más pequeños y sutiles */
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* --- Bloque C (Colecciones / .bloque-tipo-c) --- */

  .bloque-tipo-c {
    padding: 1rem 0;
    margin-bottom: 20px;
    border-radius: 0;
    /* Eliminamos las esquinas redondeadas */
  }

  .bloque-c-main-title {
    font-size: 1.5rem;
  }

  .collection-cards-container-c {
    gap: 16px;
    /* Reducimos el espacio entre las tarjetas de colección */
  }

  .collection-card-c {
    /* Cada tarjeta de colección ocupará el 85% del ancho de la pantalla,
     lo que permite ver un trozo de la siguiente y motiva el scroll. */
    flex: 0 0 85vw;
  }

  .collection-c-title {
    font-size: 1.1rem;
    padding: 12px;
  }

  .collection-c-large-image {
    height: 180px;
    /* Altura de la imagen principal reducida */
  }

  .collection-c-thumbnail {
    flex: 0 0 70px;
    height: 70px;
  }

  .btn-scroll-collections-c {
    /* En móvil, el scroll con el dedo es más natural,
     por lo que ocultamos los botones de flecha grandes. */
    display: none;
  }

  /* --- Bloque D (Imagen ancha / .bloque-tipo-d) --- */

  .bloque-tipo-d {
    aspect-ratio: 16 / 9;
    margin-bottom: 20px;
    margin-left: 15px;
    /* Margen lateral sugerido */
    margin-right: 15px;
    /* Margen lateral sugerido */
    width: auto;
    /* Para que el navegador calcule el ancho restando los márgenes */
  }


  /* 5. Compactamos el formulario y los botones */
  .form-group {
    margin-bottom: 12px;
  }



  .separator {
    margin: 15px 0;
    /* Menos margen para el separador "o" */
  }


  .signup-link,
  .forgot-password-link {
    font-size: 0.85em;
    margin-top: 12px;
  }

  .slider-y .slider-btn,
  /* Botones del slider principal de la cabecera */
  .bloque-con-cards .btn-scroll,
  /* Botones del carrusel del Bloque A */
  .bloque-tipo-b .btn-scroll-b,
  /* Botones del carrusel del Bloque B */
  .bloque-tipo-c .btn-scroll-collections-c,
  /* Botones principales del Bloque C */
  .bloque-tipo-c .btn-scroll-c-thumb,
  /* Botones de thumbnails del Bloque C */
  .family-inline-wrapper .scroll-btn,
  .btn-scroll-collections-c {
    display: none;
  }

  #contenedorBotones {
    gap: 9px;
    padding: 0;
    /* Eliminamos el padding lateral para que los bloques ocupen todo el ancho */
  }


  /* ================================================= */
  /* == NUEVAS REGLAS PARA AJUSTAR PADDINGS INTERNOS == */
  /* ================================================= */

  /* Añade padding lateral al contenido del Bloque B */
  .bloque-tipo-b h2.bloque-title,
  .bloque-tipo-b .carousel-scroll-b {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Añade padding lateral al contenido del Bloque C */
  .bloque-tipo-c .bloque-c-main-title,
  .bloque-tipo-c .collection-cards-container-c {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* AÑADIR ESTA NUEVA REGLA */
  .section-e {
    border-radius: 0;
    /* Eliminamos las esquinas redondeadas del Bloque A */
  }

  /* AÑADIR ESTA NUEVA REGLA PARA CAMBIAR LA FUENTE DEL TEXTO VERTICAL */
  .card-banner .card-texto,
  .card-banner .card-etiqueta {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    /* Usamos un grosor "bold" para buena legibilidad */
  }
}









/* Contenedor principal del popup (modal) */


/* Botón para cerrar el modal */





/* =================================================================
   ESTILOS PARA PRECIOS DINÁMICOS EN TARJETAS DE PRODUCTO (BLOQUE B)
   ================================================================= */

/* Contenedor principal para los 3 niveles de precio */
.card-b .dynamic-prices-container {
  display: flex;
  gap: 5px;
  /* Espacio reducido entre los tiers */
  padding: 8px;
  margin-top: auto;
  /* Empuja los precios al fondo de la tarjeta */
}

/* Estilo para cada uno de los 3 tiers (Base, Medio, Premium) */
.card-b .price-tier {
  flex: 1;
  /* Ocupan el mismo espacio */
  padding: 6px 4px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-align: center;
  background-color: #f9f9f9;
  transition: all 0.2s ease-in-out;
}

/* Estilo para el valor del precio (ej: $20.00) */
.card-b .tier-price {
  font-size: 0.9em;
  font-weight: 700;
  color: #333;
  display: block;
}

/* Estilo para la etiqueta (ej: PRECIO BASE) */
.card-b .tier-label {
  font-size: 0.6em;
  font-weight: 600;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

/* --- ¡LA MAGIA VISUAL! Estilo para el tier ACTIVO --- */
.card-b .price-tier.tier-activo {
  background-color: #e0f2f1;
  /* Fondo verde claro, como en tu ejemplo */
  border-color: #00796b;
  /* Borde verde más oscuro */
  transform: scale(1.05);
  /* Ligeramente más grande para destacar */
  box-shadow: 0 2px 8px rgba(0, 121, 107, 0.2);
  position: relative;
}

/* Checkmark para el tier activo, como en la imagen */
.card-b .price-tier.tier-activo::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #00796b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.card-b .tier-activo .tier-price {
  color: #004d40;
  /* Texto de precio más oscuro */
}

.card-b .tier-activo .tier-label {
  color: #004d40;
  /* Texto de etiqueta más oscuro */
}












/* EN TU ARCHIVO CSS (por ejemplo, global.css o estilos.css) */

.dynamic-prices-container {
  display: flex;
  /* Habilita Flexbox */
  flex-direction: column;
  /* Organiza los elementos en una columna */
  gap: 8px;
  /* Espacio entre cada precio (ajusta si es necesario) */
  width: 100%;
  /* Opcional: Para que ocupe todo el ancho disponible */
  /* justify-content: center; */
  /* Opcional: Centra los items si el ancho es menor a 100% */
  /* align-items: center; */
  /* Opcional: Alinea los items horizontalmente si no son 100% anchos */
}

.price-tier {
  /* Asegúrate de que cada 'price-tier' pueda ocupar su propio ancho */
  width: 100%;
  padding: 10px 15px;
  /* Ajusta el padding según tu diseño */
  border: 1px solid var(--border-color, #ccc);
  border-radius: var(--border-radius, 8px);
  display: flex;
  /* Para organizar el precio y la etiqueta dentro de cada tier */
  justify-content: space-between;
  /* Para que precio a la izq y label a la der */
  align-items: center;
  background-color: var(--card-bg-color, #fff);
  /* Ajusta según tu fondo */
  box-shadow: var(--shadow-small, 0 1px 3px rgba(0, 0, 0, 0.1));
  /* Sombra sutil */
  position: relative;
  /* Necesario para la marca de verificación */
}

/* Estilo para el tier activo (verde con check) */
.price-tier.tier-activo {
  border-color: var(--success-color, #28a745);
  /* Borde verde */
  background-color: var(--success-light-color, #e6ffe6);
  /* Fondo ligeramente verde */
  color: var(--success-color, #28a745);
  /* Texto verde */
  font-weight: bold;
}

/* Ocultar el checkmark por defecto */
.price-tier.tier-activo::after {
  content: '✔';
  /* Símbolo de check */
  position: absolute;
  right: 10px;
  /* Ajusta la posición a la derecha */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  /* Tamaño del check */
  color: var(--success-color, #28a745);
}

/* Estilos para el precio y la etiqueta dentro del tier */
.price-tier .tier-price {
  font-size: 1.1em;
  font-weight: bold;
}

.price-tier .tier-label {
  font-size: 0.72em;
  color: var(--text-color-light, #666);
}

.price-tier.tier-activo .tier-label {
  color: var(--success-color, #28a745);
  /* Asegurar que el label sea verde en activo */
}