/* Ajustar logo de JA Purity IV */
.t4-logo img,
.logo img {
  max-width: 200px;   /* ancho máximo */
  height: auto;       /* mantiene proporción */
  display: block;
  margin: 0 auto;     /* lo centra si está dentro de contenedor */
}


/* Fondo blanco exclusivo para la celda de la imagen */
.ficha__row-mediaresumen .ficha__mediaBox {
  background: #ffffff;   /* blanco */
  border-right: 1px solid #e6ece8;
  padding: .85rem 1rem;
}

.ficha__cta--duo{
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem;
}
.ficha__cta-btn{
  font-weight:600; border-radius:8px; padding:.65rem 1rem;
}
.ficha__cta-btn--wa{ background:#25D366; color:#fff; }
.ficha__cta-btn--wa:hover{ filter:brightness(0.95); }
.ficha__cta-btn--tel{ background:#eef2f7; color:#1b1f23; border:1px solid #d8dee6; }
.ficha__cta-btn--tel:hover{ background:#e6ebf2; }

.acm-hero-item.has-bg {
  background-color: #8AC7B7 !important; /* tono claro tipo el resto del sitio */
/* versión fija (círculo de 280px) */
.hero-figure img.img-redonda{
  width:280px !important;
  height:280px !important;
  border-radius:50% !important;
  object-fit:cover;
  display:block;
  margin:0 auto; /* centrar */
}

/* opción responsive (círculo que se adapta hasta 320px) */
.hero-figure img.img-redonda{
  width:100% !important;
  max-width:320px;
  aspect-ratio:1 / 1;         /* hace el cuadrado perfecto */
  height:auto;                /* será 1:1 por el aspect-ratio */
  border-radius:50% !important;
  object-fit:cover;
}
/* Ocultar imágenes SOLO en el módulo con clase sample-class */
.sample-class .item-image,
.sample-class .article-intro-image,
.sample-class img {
  display: none !important;
}
/* Flujo multi-columna (tipo periódico) */
.mod-threecols.flowcols .magz-layout {
  column-count: 1;
  column-gap: 1.25rem;
}

/* >= md: 2 columnas */
@media (min-width: 768px) {
  .mod-threecols.flowcols .magz-layout { column-count: 2; }
}

/* >= xl: 3 columnas */
@media (min-width: 1200px) {
  .mod-threecols.flowcols .magz-layout { column-count: 3; }
}

/* Cada item se mantiene entero dentro de su columna */
.mod-threecols.flowcols .item.grid-item {
  display: inline-block; 
  width: 100%;
  break-inside: avoid;
  margin: 0 0 1rem 0 !important;
}
/* === Estilo específico para la grilla de Kits === */
/* === Estilo específico para la grilla de Kits === */

/* Contenedor del título dentro de la card */
.kits-grid .card h3 {
  background-color: rgba(128, 0, 32, 0.15) !important; /* burdeos más intenso */
  color: #4a0c1c !important; /* tono burdeo oscuro para contraste */
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  text-align: center !important;
}

/* Texto dentro de las cards */
.kits-grid .card p,
.kits-grid .card ul {
  color: #3a2d2d !important; /* gris oscuro cálido */
  font-size: 0.95rem !important;
}

/* Botones dentro de las cards */
.kits-grid .card .btn {
  margin-top: 0.5rem !important;
  border-radius: 8px !important;
}

/* === Estilos nuevos para las cards (aplico a .card en vez de solo .kit-card para que cubra todas) === */
.kits-grid .card {
  background-color: rgba(128, 0, 32, 0.07) !important; /* burdeo MUY tenue */
  border: 1px solid rgba(128, 0, 32, 0.15) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.kits-grid .card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.08) !important;
}

/* Si quieres mantener .kit-card solo para una, úsalo así, pero agrega la clase a las demás si es necesario */
.kits-grid .kit-card h3 {
  background-color: rgba(128, 0, 32, 0.2) !important; /* burdeo más intenso */
  color: #4a0c1c !important;
  padding: .5rem .75rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  margin-bottom: .75rem !important;
  text-align: center !important;
}
/* Estilos generales para todos los títulos (opcional, para base) */
.kits-grid .card .h5 {
  padding: 10px; /* Espacio interno */
  border-radius: 5px; /* Bordes redondeados */
  text-align: center; /* Centrado opcional */
}

/* Estilos únicos por kit */
.kit-dulces-suenos .h5 {
  background-color: #2c3e50; /* Azul noche para sueños */
  color: white;
}

.kit-calma-diurna .h5 {
  background-color: #f39c12; /* Amarillo cálido para día/calma */
  color: white;
}

.kit-lunar-femenino .h5 {
  background-color: #8e44ad; /* Morado lunar/femenino */
  color: white;
}

.kit-primavera-antialergico .h5 {
  background-color: #27ae60; /* Verde primavera */
  color: white;
}

.kit-fiestas-ano-nuevo .h5 {
  background-color: #e74c3c; /* Rojo festivo */
  color: white;
}

.kit-piel-radiante .h5 {
  background-color: #ff69b4; /* Rosa radiante/piel */
  color: white;
}
/* Hacer que card-body sea flex para alinear elementos verticalmente */
.kits-grid .card-body {
  display: flex;
  flex-direction: column; /* Columna vertical */
}

/* Empujar el div del botón/precio al fondo */
.kits-grid .card-body .d-flex {
  margin-top: auto; /* Esto lo empuja al final */
}