/* Voces de la comunidad.
   Estilos compartidos por:
     · `/opiniones` (página propia, rediseño CD del PR#21).
     · Secciones inline reutilizadas en Home, Categoría y Ficha pública.

   Estructura de este archivo:
     1. Tokens locales (paleta terracota extendida).
     2. Cabeceras genéricas de sección (`.voces-eyebrow`, `.voces-title`,
        `.voces-block-head`) usadas por Home/Categoría/Ficha para inyectar
        cartas de consulta en su propio layout.
     3. Componentes: `.voces-query` (carta de consulta), `.voces-more`,
        `.voces-invite`, `.voces-review`, `.voces-testi`, `.voces-final`.
     4. Overrides específicos para la página propia (`.voces-page …`):
        hero cálido, pestañas, cabeceras de sección con rating a la
        derecha, grid 2×2 de consultas y 3 de testimonios.

   Los tokens `--clay-soft`, `--clay-sunken`, `--clay-700` se definen local
   en `.voces-page` cuando aplican y en `:where(...)` para el resto de
   contextos, sin polucionar `:root`. */

.voces-page,
:where(.voces-section, .voces-queries, .voces-query, .voces-review, .voces-rating, .voces-testi, .voces-final) {
  --clay-soft: #faede2;
  --clay-sunken: #f3e2d6;
  --clay-700: #a05a3d;
}

/* ============================================================
   1. Cabeceras genéricas
   ============================================================ */
.voces-eyebrow {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--clay-500);
  margin: 0 0 8px;
}
.voces-eyebrow--light { color: #f2c9b7; }

.voces-title {
  font-family: var(--font-display);
  color: var(--green-800);
  font-size: 1.55rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.15;
}
.voces-title--light { color: #fff; }

.voces-block-head { margin-bottom: 24px; }
.voces-block-head.center { text-align: center; }

/* Variante split (título + aside con rating) usada en el bloque B. */
.voces-block-head--split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: end;
}
@media (max-width: 640px) { .voces-block-head--split { grid-template-columns: 1fr; } }
.voces-block-head__note { margin: 4px 0 0; color: var(--ink-500); font-size: .9rem; }

/* ============================================================
   Sección — usada por Home (dark), Categoría (sunken) e inline
   ============================================================ */
.voces-section {
  margin: 48px 0;
  padding: 32px 24px;
  border-radius: 20px;
  background: var(--sand-50);
  border: 1px solid var(--sand-200);
}
.voces-section--sunken { background: var(--sand-100); }
/* Variante oscura para Home: verde bosque a ancho completo. */
.voces-section--dark {
  background: var(--green-800);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 56px 24px;
  margin: 0;
}
.voces-section__inner { max-width: 900px; margin: 0 auto; }
.voces-section__cta { margin-top: 22px; text-align: center; }

.voces-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--green-700);
  font-weight: 700;
  text-decoration: none;
}
.voces-link:hover { text-decoration: underline; }

/* ============================================================
   2. Cartas de consulta (Bloque A + usos inline)
   ============================================================ */
.voces-queries { display: flex; flex-direction: column; gap: 20px; }
.voces-queries--tight { gap: 16px; }

.voces-query {
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(29, 34, 31, .03);
}
.voces-query--dark {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}
.voces-query--dark .voces-query__author,
.voces-query--dark .voces-query__text { color: #fff; }

.voces-query__q { display: flex; gap: 12px; }

.voces-avatar {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sand-100);
  color: var(--green-800);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.voces-avatar img { width: 100%; height: 100%; object-fit: cover; }
.voces-avatar--anon { background: var(--sand-200); color: var(--ink-500); }

.voces-query__meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.voces-query__author { font-weight: 700; color: var(--ink-900); }
.voces-query__anon-tag {
  font-size: .72rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sand-100);
  color: var(--ink-500);
  font-weight: 600;
}
.voces-query__text { margin: 0; color: var(--ink-700); }

.voces-query__reply {
  display: flex; gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--clay-soft);
  border-left: 3px solid var(--clay-500);
  border-radius: 10px;
}
.voces-query__reply-author {
  display: block;
  font-weight: 700;
  color: var(--clay-700);
  font-size: .95rem;
}
.voces-query__reply-text {
  margin: 4px 0 0;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-900);
  line-height: 1.4;
}

.voces-query__ref {
  margin-top: 12px;
  padding-left: 52px;
  font-size: .85rem;
  color: var(--ink-500);
}
.voces-query__ref-link { color: var(--green-700); font-weight: 600; text-decoration: none; }
.voces-query__ref-link:hover { text-decoration: underline; }

/* ============================================================
   Botón «Ver más» + estado vacío
   ============================================================ */
.voces-more {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.voces-more:hover { border-color: var(--clay-500); background: var(--clay-soft); }
.voces-more__count { font-weight: 500; color: var(--ink-500); }
.voces-more-wrap { text-align: center; margin-top: 28px; }

.voces-invite {
  text-align: center;
  padding: 32px 24px;
  color: var(--ink-500);
}
.voces-invite__hand {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--clay-500);
  margin: 0 0 6px;
}
.voces-invite p { margin: 6px auto 14px; max-width: 520px; }

/* ============================================================
   Rating agregado (bloque B)
   ============================================================ */
.voces-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--sand-200);
  font-size: .9rem;
  color: var(--ink-700);
  white-space: nowrap;
}
.voces-rating__stars { color: var(--clay-500); letter-spacing: .05em; }
.voces-rating__score { font-weight: 700; color: var(--ink-900); }
.voces-rating__count { color: var(--ink-500); font-size: .85rem; }

/* ============================================================
   Reseñas (Bloque B)
   ============================================================ */
.voces-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.voces-review {
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.voces-review__head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.voces-review__head .voces-avatar { width: 40px; height: 40px; flex-basis: 40px; font-size: 1rem; }
.voces-review__author { font-weight: 700; color: var(--ink-900); font-size: 1rem; }
.voces-review__source {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-500);
  font-size: .85rem;
  margin-top: 2px;
}
.voces-stars { color: var(--clay-500); letter-spacing: .05em; }
.voces-review__google { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-500); }
.voces-review__msg { margin: 0; color: var(--ink-700); font-size: .95rem; line-height: 1.55; }
.voces-review__context {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--sand-200);
  color: var(--ink-500);
  font-size: .82rem;
  font-style: italic;
}

/* ============================================================
   Testimonios (Bloque C)
   ============================================================ */
.voces-testis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.voces-testi {
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.voces-testi__author-row {
  padding: 14px 16px;
  display: flex; gap: 10px; align-items: center;
  border-top: 1px solid var(--sand-200);
}
.voces-testi__author-name { font-weight: 700; color: var(--ink-900); font-size: .9rem; }
.voces-testi__author-sub {
  font-size: .72rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-top: 2px;
}

.voces-testi--text {
  padding: 22px 24px;
  background: #fff;
}
.voces-testi--text .voces-testi__author-row { border-top: 0; padding: 0; }
.voces-testi__quote {
  margin: 0 0 20px;
  color: var(--ink-900);
  font-size: .95rem;
  line-height: 1.6;
  position: relative;
}
.voces-testi--text .voces-testi__quote::before {
  content: "\201C";
  position: absolute;
  top: -10px; right: -6px;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--clay-500);
  line-height: 1;
}

.voces-testi--photo .voces-testi__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sand-100);
}
.voces-testi--photo .voces-testi__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voces-testi__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.voces-testi--photo .voces-testi__author-row { border-top: 0; padding: 0; }
.voces-testi__msg { margin: 0; color: var(--ink-700); font-size: .93rem; line-height: 1.55; }

.voces-testi--video .voces-testi__media {
  position: relative;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--sand-200), var(--clay-sunken));
  overflow: hidden;
}
.voces-testi--video .voces-testi__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .9;
}
.voces-testi__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  text-decoration: none;
  transition: transform .15s;
}
.voces-testi__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.voces-testi__vtag {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(29, 34, 31, .68);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
}
.voces-testi__vshort {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 2;
  margin: 0;
  padding: 8px 12px;
  background: rgba(29, 34, 31, .68);
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1.3;
}
.voces-testi--video .voces-testi__author-row { border-top: 0; }

/* ============================================================
   CTA final — fondo verde bosque
   ============================================================ */
.voces-final {
  background: var(--green-800);
  color: #fff;
  padding: 56px 20px;
  text-align: center;
  border-radius: 20px;
  max-width: 1040px;
  margin: 0 auto 60px;
}
.voces-final__quote {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: color-mix(in srgb, #fff 88%, var(--green-100));
  margin: 0 0 24px;
}
.voces-final__ctas {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.voces-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s;
}
.voces-btn--primary { background: var(--green-600); color: #fff; }
.voces-btn--primary:hover { background: var(--green-700); }
.voces-btn--white { background: #fff; color: var(--green-800); }
.voces-btn--white:hover { background: var(--sand-100); }
.voces-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
}
.voces-btn--ghost:hover { background: rgba(255, 255, 255, .08); }

/* ============================================================
   4. Overrides específicos para la página propia
      (`/opiniones`, `.voces-page`).
      El objetivo es NO tocar cómo se ven las secciones inline en
      Home/Categoría/Ficha, que reutilizan los componentes de arriba.
   ============================================================ */
.voces-page { padding: 0; }

/* HERO cálido con selector de pestañas. */
.voces-hero {
  padding: 56px 20px 40px;
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% -10%, var(--clay-soft) 0%, transparent 65%),
    linear-gradient(180deg, var(--sand-50), var(--sand-100));
}
.voces-hero__inner { max-width: 820px; margin: 0 auto; }
.voces-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.1;
  text-wrap: balance;
  font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
  margin: 10px auto 0;
}
.voces-hero__lede {
  color: var(--ink-500);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 14px auto 0;
  max-width: 560px;
}
.voces-tabs {
  display: inline-flex;
  gap: 6px;
  background: #fff;
  padding: 6px;
  border-radius: 999px;
  margin-top: 26px;
  box-shadow: 0 1px 4px rgba(29, 34, 31, .06);
  border: 1px solid var(--sand-200);
}
.voces-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-700);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.voces-tab:hover { background: var(--clay-soft); color: var(--clay-700); }

/* Wrap y secciones planas (no cards) para la página propia. */
.voces-page .voces-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.voces-page .voces-section {
  margin: 0;
  padding: 56px 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.voces-page .voces-section--sunken { background: var(--clay-soft); }

/* Cabecera de sección con título + subtítulo + aside opcional (rating). */
.voces-section__head {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.voces-section__head-text { max-width: 640px; }
.voces-section__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  font-size: clamp(1.6rem, 2vw + 1rem, 2.1rem);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 8px;
}
.voces-section__note {
  color: var(--ink-500);
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
}

/* Grid 2 col para consultas, 3 col para testimonios en la página propia. */
.voces-page .voces-queries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 760px) {
  .voces-page .voces-queries { grid-template-columns: 1fr; }
}
.voces-page .voces-reviews { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .voces-page .voces-reviews { grid-template-columns: 1fr; } }
.voces-page .voces-testis { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .voces-page .voces-testis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .voces-page .voces-testis { grid-template-columns: 1fr; } }