/* ==========================================================================
   Opiniones de clientes en la web pública (componentes x-opiniones.*).
   Datos: app/Support/Publico/Opiniones.php.
   Los colores van aquí con su valor: no dependen de las variables de cada
   página, que no existen en todas (demo, cómo funciona, FAQ, registro...) y
   en la home tienen otros valores. Todo cuelga de .op para ganar a los
   estilos genéricos de Bootstrap y de cada landing.
   ========================================================================== */

.op {
  --op-tinta: #0F172A;
  --op-texto: #1E293B;
  --op-suave: #475569;
  --op-linea: #E2E8F0;
  --op-ambar: #F59E0B;
  --op-ambar-tenue: rgba(245, 158, 11, 0.25);
  --op-ambar-oscuro: #A85408;
  --op-verde: #0A6847;
  --op-marino: #0F172A;
  --op-radio: 10px;
  --op-tarjeta-fondo: #FFFFFF;
  --op-tarjeta-borde: #E2E8F0;
  color: var(--op-texto);
  text-align: left;
}

/* Sección blanca: tarjeta crema. */
.op--blanco {
  --op-tarjeta-fondo: #FAF8F3;
  --op-tarjeta-borde: #ECE6D8;
}

/* Sección crema o gris (o tarjeta blanca alrededor): tarjeta blanca con borde. */
.op--crema {
  --op-tarjeta-fondo: #FFFFFF;
  --op-tarjeta-borde: #E2E8F0;
}

/* Sección marina. */
.op--marino {
  --op-tinta: #FFFFFF;
  --op-texto: #E2E8F0;
  --op-suave: #CBD5E1;
  --op-ambar-oscuro: #FBBF24;
  --op-verde: #6EE7B7;
  --op-tarjeta-fondo: rgba(255, 255, 255, 0.06);
  --op-tarjeta-borde: rgba(255, 255, 255, 0.16);
  color: var(--op-texto);
}

/* Landings de canto vivo. */
.op--recto {
  /* Con unidad: el avatar usa calc(var(--op-radio) * 5) y un 0 sin unidad no es una longitud válida. */
  --op-radio: 0px;
}

/* ---------- Rejilla ---------- */
.op .op-rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.op .op-item {
  margin: 0;
  padding: 0;
  display: flex;
  min-width: 0;
}

.op .op-item::before,
.op .op-item::marker {
  content: none;
}

/* ---------- Tarjeta ---------- */
.op .op-tarjeta {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--op-tarjeta-fondo);
  border: 1px solid var(--op-tarjeta-borde);
  border-radius: var(--op-radio);
  box-shadow: none;
  color: var(--op-texto);
}

.op .op-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.op .op-estrellas {
  display: inline-flex;
  gap: 2px;
  line-height: 0;
}

.op .op-estrella {
  width: 15px;
  height: 15px;
  fill: var(--op-ambar);
}

.op .op-estrella--vacia {
  fill: var(--op-ambar-tenue);
}

.op .op-verificado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--op-verde);
}

.op .op-verificado::before {
  content: "✓";
  font-weight: 700;
}

.op .op-cita {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  color: var(--op-tinta);
}

.op .op-cita p {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.op .op-cita p::before {
  content: "«";
  color: var(--op-ambar);
}

.op .op-cita p::after {
  content: "»";
  color: var(--op-ambar);
}

.op .op-autor {
  margin: auto 0 0;
  padding: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid var(--op-tarjeta-borde);
}

.op .op-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  /* Con radio 10px sale un círculo; en las landings de canto vivo (radio 0), un cuadrado. */
  border-radius: calc(var(--op-radio) * 5);
  background: var(--op-marino);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.op--marino .op-avatar {
  background: var(--op-ambar);
  color: var(--op-marino);
}

.op .op-quien {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.op .op-nombre {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--op-tinta);
}

.op .op-despacho {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--op-suave);
  overflow-wrap: anywhere;
}

.op .op-fuente {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--op-ambar-oscuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.op .op-fuente:hover {
  color: var(--op-tinta);
}

/* ---------- Casilla de Trustpilot dentro de la rejilla ---------- */
.op .op-sello {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: var(--op-marino);
  border: 1px solid var(--op-marino);
  border-radius: var(--op-radio);
  color: #FFFFFF;
}

.op--marino .op-sello {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.op .op-sello-marca {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #CBD5E1;
}

.op .op-sello-texto {
  margin: 0;
  padding: 0;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: #FFFFFF;
}

.op .op-sello-enlace {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #FBBF24;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.op .op-sello-enlace:hover {
  color: #FDE68A;
}

.op .op-alcance {
  margin: 16px 0 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--op-suave);
}

/* ---------- Cita suelta ---------- */
.op.op-sola {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* Separación de una cita suelta respecto a lo que tiene encima (registro, agradecimiento de la demo). */
.op.op-separada {
  margin-top: 2rem;
}

/* ---------- Franja de una línea: sustituye a la rejilla donde ninguna opinión habla del tema de la página ---------- */
/* Fondo y color propios: no depende de la sección vecina ni de reglas de página como «.ic-page *». */
.op-franja {
  padding: 28px 16px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #475569;
}

.op-franja .op-sello-linea {
  color: #475569;
}

/* ---------- Valoración en una línea (hereda color y tipografía de donde se pone) ---------- */
.op-sello-linea a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.op-sello-linea a:hover {
  color: inherit;
  opacity: 0.85;
}

/* ---------- Sección propia (páginas sin patrón de sección: integraciones) ---------- */
.op-seccion {
  padding: 80px 0;
  background: #FFFFFF;
}

.op-seccion .op-etiqueta {
  display: block;
  margin: 0 0 24px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A85408;
}

/* ---------- Foco y texto solo para lector de pantalla ---------- */
.op a:focus-visible,
.op-sello-linea a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

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

/* ---------- Escritorio ---------- */
@media (min-width: 720px) {
  .op .op-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .op .op-rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .op .op-tarjeta,
  .op .op-sello {
    padding: 24px;
  }

  .op .op-cita,
  .op .op-sello-texto {
    font-size: 1.1875rem;
  }
}

@media (max-width: 640px) {
  .op-seccion {
    padding: 56px 0;
  }
}