/* ====== Bloque Valoraciones Home (2 columnas, minimal) ====== */
.cj-hreviews{
    max-width: 1200px;
    margin: 45px auto 8px auto;
    padding: 0;
}
.cj-hreviews--2col .cj-hr-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 880px){
  .cj-hreviews--2col .cj-hr-grid{ grid-template-columns: 1fr; }
}

/* Columna izquierda */
.cj-hr-title{margin:0}
.cj-hr-title span{
  display:block; color:#002041; font-weight:900; letter-spacing:.6px;
  font-size: clamp(28px, 5.6vw, 48px); line-height:1.05; text-transform:uppercase;
}

/* Barra bajo el título */
.cj-hr-infobar{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 1rem;
    background: #e9ecf15c;
    border-radius: 7px;
}
.cj-hr-cta{
    color: #002041;
    border-radius: 10px;
    padding: 8px 16px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cj-hr-proof{display:flex; align-items:center; gap:10px}
.cj-hr-prooftext{font-size:14px; color:#4b5563}
.cj-hr-stars{display:inline-flex; gap:2px}
.cj-hr-stars .f{color:#ffb400}
.cj-hr-stars .e{color:#e5e7eb}
.cj-hr-stars span{font-size:18px}

/* Columna derecha (carrusel) */
.cj-hr-carousel{
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    width: 90%;
}
.cj-hr-track{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:stretch; will-change:transform; transition: transform .45s ease;
}
.cj-hr-slide{flex:0 0 100%; box-sizing:border-box; padding:0}

/* Card mínima */
.cj-hr-card{
  display:block; text-decoration:none; padding:18px;
  background:#fbfbfb; color:#002041; border-radius:14px;
}
.cj-hr-row{display:flex; gap:14px; align-items:center}
.cj-hr-thumb{
  width:64px; height:64px; border-radius:10px; object-fit:cover; display:block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}
.cj-hr-main{display:flex; flex-direction:column; gap:6px}

/* Estrellas (dentro de cada slide) */
.cj-hr-starsline{
    display: inline-flex;
    gap: 2px;
    line-height: 1;
    justify-content: center;
}
.cj-hr-starsline .f{color:#ffb400}
.cj-hr-starsline .e{color:#e5e7eb}
.cj-hr-starsline span{font-size:18px}

/* Texto y meta */
.cj-hr-text{
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #0f2d4c;
    font-weight: 600;
    padding-top: 5px;
}
.cj-hr-meta{display:flex; align-items:center; gap:6px; font-size:13px; color:#667084}
.cj-hr-author{font-weight:700; color:#002041}
.cj-hr-dot{opacity:.45}
.cj-hr-dim{color:#6b7280}
.cj-hr-prod{color:#002041; font-weight:600}

/* Responsive tweaks */
@media (max-width:680px){
  .cj-hr-thumb{width:54px; height:54px}
  .cj-hr-text{font-size:14px}
  .cj-hr-meta{font-size:12px}
}
/* ===== Fixes de fluidez / anti-recorte ===== */
.cj-hr-track { display:flex; will-change:transform; transition: transform .45s ease; }
.cj-hr-slide { flex:0 0 100%; min-width:0; box-sizing:border-box; }
.cj-hr-row   { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; min-width:0; }
.cj-hr-main  { min-width:0; }                     /* evita clipping del texto */
.cj-hr-text  { word-break:break-word; }           /* por si entran palabras largas */

/* Carrusel debe ocupar siempre su contenedor */
.cj-hr-carousel { width:100%; max-width:100%; overflow:hidden; border-radius:14px; }

/* ===== Responsive ===== */

/* Desktop (2 columnas) ya lo tienes; reforzamos el gap */
.cj-hreviews--2col .cj-hr-grid { gap: 3rem; }

/* Tablet y móvil: 1 columna, el carrusel va debajo del título */
@media (max-width: 880px){
  .cj-hreviews { margin: 32px auto 6px; padding: 0 12px; }
  .cj-hreviews--2col .cj-hr-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Título un poco más compacto */
  .cj-hr-title span { font-size: clamp(24px, 7vw, 30px); line-height: 1.08; }

  /* Card más ligera */
  .cj-hr-card      { padding: 14px; border-radius: 12px; }
  .cj-hr-row       { grid-template-columns: 56px 1fr; gap: 10px; }
  .cj-hr-thumb     { width:56px; height:56px; border-radius: 8px; }
  .cj-hr-starsline span { font-size: 16px; }
  .cj-hr-text      { font-size: 14.5px; margin: 4px 0 6px; }
  .cj-hr-meta      { font-size: 12px; gap: 4px 8px; }
}

/* XS extra compacto */
@media (max-width: 360px){
  .cj-hr-row   { grid-template-columns: 50px 1fr; gap: 8px; }
  .cj-hr-thumb { width:50px; height:50px; }
  .cj-hr-text  { font-size: 14px; }
}

/* Preferencia de usuario: sin animaciones fuertes */
@media (prefers-reduced-motion: reduce){
  .cj-hr-track { transition: none; }
}
/* ==== FIX overflow / grid seguro ==== */
.cj-hreviews { 
  max-width: 1200px;
  margin: 45px auto 8px;
  padding: 0 10px;
  overflow-x: hidden;                  /* cinturón de seguridad */
}
.cj-hreviews * { box-sizing: border-box; }

/* En desktop: 2 columnas elásticas + gap que no rompe */
.cj-hreviews--2col .cj-hr-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* no % + gap */
  gap: clamp(20px, 6vw, 48px);                        /* gap fluido */
  align-items: center;
}

/* Evita que el contenido empuje el ancho de su columna */
.cj-hr-left, 
.cj-hr-right { min-width: 0; }

/* El carrusel nunca más ancho que su contenedor */
.cj-hr-carousel{
  width: 100% !important;     /* anula el 90% anterior si quedara */
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
}

/* Track y slides no ensanchan el viewport */
.cj-hr-track{ 
  display:flex; 
  will-change:transform; 
  transition: transform .45s ease;
}
.cj-hr-slide{ 
  flex: 0 0 100%;
  min-width: 0;               /* clave anti-recorte */
  box-sizing: border-box; 
  padding: 0;
}
.cj-hr-row{ 
  display: grid; 
  grid-template-columns: auto 1fr; 
  gap: 12px; 
  align-items: start; 
  min-width: 0;
}
.cj-hr-main{ min-width: 0; }
.cj-hr-text{ word-break: break-word; }

/* Imágenes nunca desbordan */
.cj-hr-thumb{ width:64px; height:64px; max-width:100%; object-fit:cover; }

/* ====== Responsive ====== */
@media (max-width: 880px){
  .cj-hreviews{
    margin: 32px auto 6px;
    padding: 0 12px;
  }
  .cj-hreviews--2col .cj-hr-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cj-hr-title span{ 
    font-size: clamp(24px, 7vw, 30px); 
    line-height: 1.08; 
  }
  .cj-hr-card{ padding: 14px; border-radius: 12px; }
  .cj-hr-row{ grid-template-columns: 56px 1fr; gap:10px; }
  .cj-hr-thumb{ width:56px; height:56px; border-radius: 8px; }
  .cj-hr-starsline span{ font-size:16px; }
  .cj-hr-text{ font-size:14.5px; margin: 4px 0 6px; }
  .cj-hr-meta{ font-size:12px; gap: 4px 8px; }
}

@media (max-width: 360px){
  .cj-hr-row{ grid-template-columns: 50px 1fr; gap: 8px; }
  .cj-hr-thumb{ width:50px; height:50px; }
  .cj-hr-text{ font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  .cj-hr-track{ transition: none; }
}
/* === Reseña a ancho completo (anti-columna estrecha) === */

/* Asegura que el carrusel y la card ocupan todo el ancho disponible */
.cj-hr-right{ width:100%; min-width:0; }
.cj-hr-carousel{ width:100% !important; max-width:100%; }

/* La slide y la card no tienen tope de ancho */
.cj-hr-slide{ flex:0 0 100%; min-width:0; }
.cj-hr-card{ width:100%; max-width:none; }

/* Fila interna como FLEX para repartir bien el espacio */
.cj-hr-row{
  display:flex !important;         /* pisa el grid previo si quedó */
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

/* Miniatura con ancho fijo; el contenido crece */
.cj-hr-thumb{
  flex:0 0 64px; width:64px; height:64px;
  object-fit:cover; border-radius:10px;
}

/* Texto ocupa TODO el resto sin romper el layout */
.cj-hr-main{
  flex:1 1 auto;                   /* se estira */
  min-width:0;                     /* clave anti-‘columna de 20px’ */
}

/* El texto realmente rompe líneas de forma natural */
.cj-hr-text{
  white-space: normal;
  overflow-wrap: anywhere;         /* por si hay palabras largas */
  word-break: break-word;
}

/* Responsive móvil */
@media (max-width: 480px){
  .cj-hr-thumb{ flex-basis:52px; width:52px; height:52px; border-radius:8px; }
  .cj-hr-card{ padding:14px; border-radius:12px; }
  .cj-hr-text{ font-size:14.5px; }
}

/* Cinturón de seguridad global: nada debe sacar scroll lateral */
.cj-hreviews{ overflow-x:hidden; }