/* ===== Confianza: garantía, estrellas, reseñas verificadas, fotos de clientes y ventas =====
   Funciona con los dos temas de la tienda (body.tema-oscuro / body.tema-claro). */
body.tema-oscuro {
  --cf-bg: rgba(11,26,61,.65); --cf-line: var(--line); --cf-text: var(--texto); --cf-muted: var(--suave);
  --cf-title: var(--hielo); --cf-accent: var(--cielo);
  --cf-g-bg: var(--grad); --cf-g-fg: #021028;
  --cf-verif-bg: rgba(59,227,176,.12); --cf-verif-fg: var(--ok);
}
body.tema-claro {
  --cf-bg: #fff; --cf-line: var(--line); --cf-text: var(--ink); --cf-muted: var(--muted);
  --cf-title: var(--ink); --cf-accent: var(--brand);
  --cf-g-bg: var(--brand); --cf-g-fg: #fff;
  --cf-verif-bg: #e6f5ee; --cf-verif-fg: #17714a;
}
.tienda { --cf-star: #f5a623; }

/* Estrellas */
.estrellas { display: inline-flex; gap: 1px; color: var(--cf-star); font-size: .95em; line-height: 1; vertical-align: middle; }
.estrellas.est-lg { font-size: 1.35rem; }

/* Garantía en la barra superior */
.topnote-g { margin-left: .75rem; font-weight: 700; color: #fff; }
.topnote-g i { color: var(--cielo, #7fd0ff); }

/* Franja grande de la portada */
.cf-barra { padding: 1.4rem 0; border-bottom: 1px solid var(--cf-line); }
.cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.cf-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--cf-line); border-radius: var(--radius, 14px);
  background: var(--cf-bg); color: var(--cf-text); text-decoration: none; }
a.cf-item:hover { border-color: var(--cf-accent); color: var(--cf-text); }
.cf-ico { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 1.6rem;
  background: color-mix(in srgb, var(--cf-accent) 16%, transparent); color: var(--cf-accent); }
.cf-ico-est { color: var(--cf-star); background: rgba(245,166,35,.15); }
.cf-big { font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; color: var(--cf-title); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cf-sub { color: var(--cf-muted); font-size: .9rem; }
.cf-sub a { color: inherit; text-decoration: underline; }
/* La garantía va destacada: fondo de color y texto grande */
.cf-garantia { background: var(--cf-g-bg); border-color: transparent; color: var(--cf-g-fg); }
.cf-garantia .cf-ico { background: rgba(255,255,255,.22); color: var(--cf-g-fg); }
.cf-garantia .cf-big { color: var(--cf-g-fg); font-size: 1.7rem; }
.cf-garantia .cf-sub, .cf-garantia .cf-sub a { color: var(--cf-g-fg); opacity: .9; }

/* Línea corta en tarjetas */
.cf-mini { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; font-size: .85rem; color: var(--cf-muted); margin-top: .15rem; }
.cf-mini .estrellas { font-size: .8rem; }
.cf-mini b { color: var(--cf-title); font-weight: 700; }
.cf-mini-g { color: var(--cf-verif-fg); font-weight: 700; }

/* Encabezado de producto: estrellas + vendidos */
.cf-prod-linea { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-bottom: .75rem; color: var(--cf-muted); }
.cf-prod-linea a { color: inherit; text-decoration: none; }
.cf-prod-linea a:hover { text-decoration: underline; }
.cf-prod-linea b { color: var(--cf-title); }

/* Sello de garantía en el producto */
.cf-sello { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; margin: 0 0 1.1rem; border-radius: var(--radius, 14px);
  background: var(--cf-g-bg); color: var(--cf-g-fg); }
.cf-sello i { font-size: 2.2rem; line-height: 1; }
.cf-sello strong { display: block; font-family: var(--font-display, inherit); font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.cf-sello span { font-size: .92rem; opacity: .92; }

/* Sección de reseñas */
.cf-resumen { display: flex; align-items: center; gap: .8rem; }
.cf-nota { font-family: var(--font-display, inherit); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--cf-title); }
.cf-tira { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.cf-tira-t { color: var(--cf-muted); font-size: .9rem; margin-right: .3rem; }
.cf-tira-f, .cf-foto { padding: 0; border: 1px solid var(--cf-line); background: #fff; overflow: hidden; cursor: zoom-in; }
.cf-tira-f { width: 72px; height: 72px; border-radius: 12px; }
.cf-tira-f img, .cf-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-tira-f:hover, .cf-foto:hover { border-color: var(--cf-accent); }
.cf-revs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.cf-rev { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem 1.2rem; border: 1px solid var(--cf-line); border-radius: var(--radius, 14px);
  background: var(--cf-bg); color: var(--cf-text); }
.cf-rev-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cf-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 700;
  background: color-mix(in srgb, var(--cf-accent) 18%, transparent); color: var(--cf-accent); }
.cf-quien { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.cf-quien strong { color: var(--cf-title); }
.cf-quien small { color: var(--cf-muted); }
.cf-texto { margin: 0; flex: 1; line-height: 1.55; }
.cf-foto { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; }
.cf-compro { font-size: .85rem; color: var(--cf-accent); text-decoration: none; }
.cf-compro:hover { text-decoration: underline; }
.cf-rev-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--cf-line); font-size: .82rem; }
.cf-verif { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; background: var(--cf-verif-bg); color: var(--cf-verif-fg); font-weight: 700; }
.cf-fuente { color: var(--cf-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
a.cf-fuente:hover { color: var(--cf-accent); }
.cf-nota-pie { margin: 1rem 0 0; color: var(--cf-muted); font-size: .85rem; }
.cf-lightbox-img { max-width: 100%; max-height: 75vh; border-radius: 12px; }

@media (max-width: 575px) {
  .cf-garantia .cf-big { font-size: 1.4rem; }
  .cf-sello strong { font-size: 1.3rem; }
  .cf-revs { grid-template-columns: 1fr; }
}