/* =============================================================================
   Reseñas — bloque y tarjeta
   -----------------------------------------------------------------------------
   Implementa el spec del 8/9/2026: rejilla de 3 columnas en escritorio, tira
   con scroll horizontal en móvil, tarjeta con avatar de iniciales, estrellas,
   tiempo relativo y «Leer más».

   Sustituye a la marquesina de dos carriles del día anterior. El motivo, en una
   línea: una rejilla se lee y una marquesina se mira, y una reseña que no se lee
   no sirve de nada.

   🔴 HOJA APARTE, Y NO DENTRO DE styles.css. Por dos razones que siguen vivas:

     1. `contacto.php` y las 7 fichas de curso **no cargan** styles.css. Metiendo
        esto allí, el bloque saldría sin estilo en 8 de las páginas donde puede
        ir — el mismo fallo que tuvo la trampa de miel el día del corte.
     2. `.testimonials` YA existe en styles.css y **está en uso**: envuelve al
        widget de CommonNinja en index, contacto, oferta y promociones. Mientras
        el widget siga puesto, aquellas reglas no se pueden tocar.

   ⚠️ La tarjeta lleva sombra suave y el sistema dice 1px de borde y ninguna
      sombra. Es la única desviación que queda, y es del spec.

      El verde ajeno `#16a34a` que venía con el spec se retiró el 8/9/2026: el
      acento es `--litsea-primary` (#2fb7a4), el teal de marca y el mismo que
      usa el resto del sitio en botones y enlaces.

      ⚠️ Queda anotado que #2fb7a4 sobre blanco da 2,5:1, por debajo del 4,5:1
         de la WCAG para texto normal. Es decisión de Pablo del 8/9/2026 y es
         coherente con el resto del sitio, que ya lo usa así en todas partes.
         Se anota aquí para que no se «arregle» por descuido y para que quede
         claro que se sabía.

      📌 SIN CAMBIO DE COLOR AL PASAR POR ENCIMA, por la misma decisión. Los
         botones se quedan como están. Lo único que se conserva en `:hover` es
         el subrayado de «Leer más»: no es color, es la señal de que eso se
         puede pulsar, y sin fondo ni borde no le queda ninguna otra.
   ========================================================================== */

.testimonials {
  /* La paleta del spec, en un solo sitio. Tema claro único: no hay bloque
     `prefers-color-scheme` ni variables alternativas, también por el spec. */
  --op-fondo-pagina: #f7f7f8;
  --op-fondo-card:   #ffffff;
  --op-texto:        #1a1a1a;
  --op-texto-2:      #6b7280;
  --op-borde:        #e5e7eb;
  --op-estrella:     #f5a623;
  --op-acento:       var(--litsea-primary);

  padding: 4rem 0;
  background-color: var(--op-fondo-pagina);
}

/* --- Cabecera ------------------------------------------------------------- */

.testimonials__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.testimonials__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.testimonials__google {
  width: 74px;
  height: 24px;
  flex: 0 0 auto;
}

.testimonials__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--op-texto);
}

.testimonials__rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.testimonials__score {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--op-texto);
}

.testimonials__stars {
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--op-estrella);
}

.testimonials__count {
  font-size: 0.95rem;
  color: var(--op-texto-2);
}

.estrella--vacia { color: var(--op-borde); }

/* Texto sólo para lectores de pantalla.
   📌 Aquí y no `sr-only`: aquélla vive en tailwind.css, que 8 páginas no cargan. */
.lts-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.testimonials__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* 🔴 LOS BOTONES SE DEFINEN AQUÍ ENTEROS, sin apoyarse en las clases `.btn--*`
   del sitio: no existe una regla base `.btn`, y `.btn--primary` está pensada
   para el botón de un formulario (`width: 100%`, `background: transparent`),
   así que aplicada a un enlace sale un enlace subrayado. Visto en pantalla. */
.testimonials__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.15rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.testimonials__btn--principal {
  color: #ffffff;
  background-color: var(--op-acento);
  border-color: var(--op-acento);
}

.testimonials__btn--suave {
  color: var(--op-texto);
  background-color: var(--op-fondo-card);
  border-color: var(--op-borde);
}

.testimonials__btn--suave:hover { background-color: var(--op-fondo-pagina); }

.testimonials__btn:focus-visible {
  outline: 2px solid var(--op-acento);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .testimonials__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .testimonials__cta { margin-left: auto; }
  .testimonials__title { font-size: 1.5rem; }
}

/* --- El layout -----------------------------------------------------------
   Escritorio: rejilla de 3 columnas, 16 px de hueco, 1080 px centrada.
   Móvil (≤800 px): una sola fila con scroll horizontal y `scroll-snap`.

   📌 Es la MISMA rejilla en los dos casos: lo único que cambia es
      `grid-auto-flow`. Sin markup duplicado y sin detectar el dispositivo en
      el servidor, que envejece mal en cuanto aparece una tableta.
   ---------------------------------------------------------------------- */

/* --- Los dos carriles ------------------------------------------------------
   Sin `max-width` propio: el ancho lo pone `.container`, el mismo que el resto
   del sitio. El 1080px que había aquí dejaba el bloque más estrecho que todo
   lo demás y se notaba el escalón.
   ------------------------------------------------------------------------- */

.opiniones-carriles {
  display: grid;
  gap: 16px;
}

/* Los bordes se difuminan en vez de cortar en seco.
   -----------------------------------------------------------------------------
   Con `overflow: hidden` a secas, la tarjeta que entra y la que sale aparecen y
   desaparecen de golpe contra una línea recta, y el carril parece una ventana
   con marco. Con el degradado, entran y salen.

   📌 `mask-image` y no un `::before` con un degradado del color del fondo: un
      degradado opaco sólo funciona si acierta con el fondo exacto, y este bloque
      va a ir en páginas cuyo fondo no controla. La máscara recorta de verdad, se
      vea lo que se vea por detrás.

   ⚠️ `-webkit-mask-image` además de la propiedad estándar: Safari la sigue
      pidiendo con prefijo, y sin ella el difuminado no aparece — pero tampoco se
      rompe nada, que es justo lo que se quiere de una mejora visual. */
.op-carril {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right,
      transparent 0, #000 6%, #000 94%, transparent 100%);
}

.op-carril__pista {
  display: flex;
  width: max-content;

  /* 🔴 EL `-50%` DEL @keyframes DEPENDE DE QUE HAYA EXACTAMENTE DOS TANDAS.
     La pista mide dos tandas idénticas; desplazarla media pista es desplazarla
     una tanda justa, y ahí la segunda copia ocupa el sitio de la primera. Meter
     una tercera copia sin cambiar el `-50%` deja una costura visible cada
     vuelta, y es de las que cuesta ver porque sólo aparece un instante. */
  animation: op-desliza 70s linear infinite;
}

.op-carril--vuelta .op-carril__pista {
  animation-direction: reverse;      /* el de abajo, al revés */
}

.op-carril__tanda {
  display: flex;
  gap: 16px;
  padding-right: 16px;               /* el hueco de la costura, igual que el resto */
}

@keyframes op-desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Se para al pasar por encima y al entrar el foco por teclado: una tarjeta en
   movimiento no se puede leer, y un botón en movimiento no se puede pulsar.
   `--quieta` la pone el JavaScript mientras hay un texto desplegado. */
.op-carril:hover .op-carril__pista,
.op-carril:focus-within .op-carril__pista,
.op-carril--quieta .op-carril__pista {
  animation-play-state: paused;
}

.opiniones-carriles .op-card {
  flex: 0 0 min(320px, 78vw);
}

/* ⚠️ Sin animación para quien la ha desactivado en su sistema. No es un
   detalle: el movimiento automático y continuo puede provocar mareo, y con
   `prefers-reduced-motion` el sistema operativo ya lo ha dicho. Queda una tira
   que se recorre a mano, y el eco se esconde porque sin bucle sobra. */
@media (prefers-reduced-motion: reduce) {
  .op-carril {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .op-carril::-webkit-scrollbar { display: none; }

  .op-carril__pista { animation: none; width: auto; }
  .op-carril__tanda[aria-hidden="true"] { display: none; }
  .opiniones-carriles .op-card { scroll-snap-align: start; }
}

/* --- La tarjeta ----------------------------------------------------------- */

.op-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  min-height: 190px;                 /* alinea la rejilla aunque el texto varíe */
  background-color: var(--op-fondo-card);
  border: 1px solid var(--op-borde);
  border-radius: 14px;

  /* ⚠️ UNA sombra, la misma para todas. El CSS antiguo del sitio daba a cada
     tarjeta valores distintos, y puestas en rejilla se notaba que ninguna
     casaba con la de al lado. */
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.op-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.op-card__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  /* el fondo lo pone el PHP, derivado del nombre */
}

.op-card__quien { min-width: 0; }    /* sin esto el nombre no recorta */

.op-card__nombre {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--op-texto);

  /* Una sola línea. 📌 Depende del `min-width: 0` de arriba: un hijo de flex no
     baja de su ancho de contenido por defecto, y sin eso no recorta nada. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--op-texto-2);
}

.op-card__estrellas {
  color: var(--op-estrella);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.op-card__tiempo { color: var(--op-texto-2); }

.op-card__texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--op-texto);
  white-space: pre-line;             /* respeta los saltos que escribió la persona */
  overflow-wrap: anywhere;           /* una palabra kilométrica no rompe la tarjeta */
}

/* Recorte a 4 líneas. El botón lo quita poniendo `-webkit-line-clamp: unset`. */
.op-card__texto--corto {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.op-card__mas {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--op-acento);
  background: none;
  border: 0;
  cursor: pointer;
}

.op-card__mas:hover { text-decoration: underline; }

/* ⚠️ El foco TIENE que verse: este botón no tiene fondo ni borde, así que sin
   `outline` quien navega con teclado no sabe dónde está. */
.op-card__mas:focus-visible {
  outline: 2px solid var(--op-acento);
  outline-offset: 2px;
  border-radius: 3px;
}

.op-card__origen {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--op-borde);
  font-size: 12px;
  color: var(--op-texto-2);
}

/* =============================================================================
   La página /opiniones — el formulario
   ========================================================================== */

.opiniones-hero {
  padding: 6.5rem 0 2rem;            /* deja sitio a la barra fija */
  background-color: #ffffff;
}

.opiniones-hero__titulo {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  color: #1a1a1a;
}

.opiniones-hero__texto {
  margin: 0;
  max-width: 40rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--litsea-text-main);
}

.opiniones-form {
  padding: 1rem 0 4rem;
  background-color: #ffffff;
}

.opinion-form {
  max-width: 42rem;
  padding: 1.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background-color: #ffffff;
}

.form-nota {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--litsea-text-muted);
}

/* Texto y ya. Llevaba tarjeta verde con borde y Pablo la quitó el 8/9/2026:
   encima de un formulario, una caja de color se lee como un error antes de que
   nadie haya cometido ninguno. El color de marca hace el trabajo solo. */
.opinion-form__aviso {
  margin: 1.25rem 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--litsea-primary);
  background: none;
  border: 0;
}

.opinion-form__legal { margin-top: 0.9rem; text-align: center; }

.form-aviso--bien {
  color: var(--litsea-primary);
  background: none;
  border: 0;
}

.opinion-form__btn {
  display: block;
  width: 100%;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--litsea-primary);
  border: 1px solid var(--litsea-primary);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.opinion-form__btn:focus-visible {
  outline: 2px solid var(--litsea-primary);
  outline-offset: 2px;
}

/* --- Las estrellas del formulario ----------------------------------------
   🔴 SON RADIOS DE VERDAD, NO ESTRELLAS DE JAVASCRIPT.

   Así funciona sin JS, se recorre con Tab y flechas, y un lector de pantalla
   anuncia «3 estrellas» porque el texto está ahí. Una implementación con
   <span> y un manejador de clic no hace ninguna de las tres cosas.

   El pintado: los radios van del 5 al 1 en el HTML y se dibujan en
   `row-reverse`, así el selector `~` alcanza a los de menor valor, que en
   pantalla quedan a la IZQUIERDA — que es como se leen las estrellas.
   ---------------------------------------------------------------------- */

.valoracion { border: 0; padding: 0; margin: 0; }

.valoracion__estrellas {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
  margin-top: 0.35rem;
}

/* 🔴 `.valoracion .valoracion__radio` y no la clase suelta.
   `styles.css` tiene `.form-group input { width: 100% }`, que con dos
   componentes (0,1,1) gana a una clase (0,1,0). El radio se quedaba de 1905 px
   —posicionado en absoluto, y por tanto sin recortar— y **empujaba la página
   entera**, dejando barra horizontal en todo el sitio. Se buscó como un
   desbordamiento del carrusel y estaba en el formulario, cinco secciones más
   arriba. */
.valoracion .valoracion__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
}

/* ⚠️ `.valoracion__estrellas .valoracion__estrella` por lo mismo:
   `.form-group label { font-size: 0.875rem }` le ganaba y las estrellas salían
   de 14 px en vez de 30. Dos veces el mismo choque en el mismo formulario, así
   que aquí la regla es: si una clase de esta hoja convive con `.form-group`,
   necesita dos componentes. */
.valoracion__estrellas .valoracion__estrella {
  font-size: 1.9rem;
  line-height: 1;
  color: #e5e7eb;
  cursor: pointer;
  transition: color 0.15s ease;
  margin-bottom: 0;
}

.valoracion__estrellas .valoracion__radio:checked ~ .valoracion__estrella { color: #f5a623; }

.valoracion__estrellas:hover .valoracion__estrella { color: #e5e7eb; }
.valoracion__estrellas .valoracion__estrella:hover,
.valoracion__estrellas .valoracion__estrella:hover ~ .valoracion__estrella { color: #f5a623; }

.valoracion__estrellas .valoracion__radio:focus-visible + .valoracion__estrella {
  outline: 2px solid var(--litsea-primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}