/* ── OPINIONES DE LAS PROFESIONALES SOBRE AGENDAXIC ──
   Se usa en tres sitios: la portada, la pagina de todas las opiniones y el
   apartado del panel donde ella pone la suya. Por eso lleva sus propios
   colores en vez de depender de las variables de cada pagina. */

.op-lista{
  display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.op-tarjeta{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 16px;
  padding: 20px 20px 18px;
  text-align: left;
}

.op-estrellas{
  color: #d4af37; font-size: 15px; letter-spacing: 3px; margin-bottom: 10px;
}

.op-texto{
  font-size: 14px; line-height: 1.6; color: #f0f0f0; margin: 0 0 14px;
}

.op-quien{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px; color: #f0f0f0;
}
.op-quien strong{ font-weight: 600; }
.op-gris{ color: #9a9186; }

.op-sello{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(76,175,125,.11); color: #4caf7d;
  border: 1px solid rgba(76,175,125,.3);
  cursor: help;
}

.op-web{
  font-size: 12px; color: #f2d36b; text-decoration: none;
  border-bottom: 1px solid rgba(212,175,55,.35);
}
.op-web:hover{ border-bottom-color: #f2d36b; }

.op-respuesta{
  margin-top: 13px; padding: 10px 14px;
  border-left: 2px solid rgba(212,175,55,.4);
  background: rgba(212,175,55,.05);
  border-radius: 0 10px 10px 0;
}
.op-r-de{
  font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  color: #d4af37; margin-bottom: 4px;
}
.op-respuesta p{ font-size: 12.5px; color: #9a9186; margin: 0; }

/* El boton que trae la siguiente tanda de opiniones (de cinco en cinco). */
.op-vermas{
  display: block; margin: 22px auto 0; padding: 9px 22px;
  background: transparent; cursor: pointer;
  color: #f2d36b; font-size: 14px; font-family: inherit;
  border: 1px solid rgba(212,175,55,.4); border-radius: 999px;
}
.op-vermas:hover{ border-color: rgba(212,175,55,.8); }
.op-vermas:disabled{ opacity: .5; cursor: wait; }

.op-legal{
  margin: 22px auto 0; max-width: 720px;
  font-size: 11.5px; line-height: 1.65; color: #7d766c; text-align: center;
}

.op-vacio{ font-size: 13px; color: #9a9186; text-align: center; padding: 20px 0; }

/* ── Lo que ve ella en su panel ── */

.op-elegir{ display: flex; gap: 4px; margin-bottom: 12px; }
.op-estrella{
  background: transparent; border: none; cursor: pointer; padding: 0 2px;
  font-size: 26px; line-height: 1; color: rgba(212,175,55,.28);
  font-family: inherit;
}
.op-estrella.puesta{ color: #d4af37; }
.op-estrella:focus-visible{ outline: 2px solid #d9b845; outline-offset: 2px; border-radius: 4px; }

.op-linea{
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0; font-size: 13.5px;
}
.op-linea input[type="checkbox"]{
  width: 18px; height: 18px; margin: 0; accent-color: #d4af37;
}

.op-botones{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.op-nota{
  margin-top: 10px; font-size: 11.5px; color: #9a9186; line-height: 1.5;
}

/* La pagina aparte de opiniones se retiro: ahora todo vive en la portada,
   cargando por tandas con el boton "Ver mas". */