/* Opiniones (customer reviews) v3 — página completa.
   Consume tokens.css + base.css + components.css.
   Fuente visual: Opiniones.dc.html:192-303 (comportamiento en su dc-script, 426-596).

   Cuatro notas de traducción del template a CSS:

   1. Los dos únicos ternarios de ancho que tocan esta página son `mob = w < 760` (padding del
      hero, línea 586) y `desk = w >= 1000` (las dos columnas de la tarjeta destacada, línea 587).
      La base es el caso móvil y hay una media query para cada uno. Los demás valores del
      dc-script (dispNav, dispBurger…) son del chrome, que ya resuelve components.css.
   2. Los estados que el template calcula en JS —chip activo, tarjeta destacada visible solo en
      «Todos», parrilla filtrada, aviso de vacío— son aquí clases y el atributo [hidden], que
      mueve modules/opfilter.js. Cada elemento con display propio necesita su regla [hidden],
      porque un `display:grid` gana a la hoja del navegador.
   3. Las estrellas del template son cinco fijas; nuestras reseñas traen puntuación real (las hay
      de 4), así que las que faltan se pintan apagadas con .op-stars-off.
   4. El punto «en directo» del hero (opLive) es un keyframe de esta página: solo existe aquí,
      así que vive en este fichero y no en base.css. Los opTickA/opTickB del template, que
      pulsaban el número al subir, se fueron con el contador (2026-08-21: la cifra es real y se
      queda quieta). */

/* ---------- keyframes de página (helmet del template: Opiniones.dc.html:47-49) ---------- */
@keyframes opLive{0%{box-shadow:0 0 0 0 rgba(46,139,87,.4)}70%{box-shadow:0 0 0 7px rgba(46,139,87,0)}100%{box-shadow:0 0 0 0 rgba(46,139,87,0)}}

/* ---------- 1 · hero y cifras (Opiniones.dc.html:192-217) ---------- */
.op-hero{background:#f7faf8;background-image:radial-gradient(700px 420px at 12% -60px,rgba(127,214,163,.35),rgba(127,214,163,0) 65%),radial-gradient(760px 460px at 88% -80px,rgba(46,139,87,.22),rgba(46,139,87,0) 65%),radial-gradient(1100px 520px at 50% -120px,#e7f0e9,rgba(231,240,233,0) 60%);background-repeat:no-repeat}
/* .container ya pone el padding lateral; aquí se le añade el vertical del template */
.op-hero__inner{padding:36px clamp(18px,4vw,28px) 40px;display:flex;flex-direction:column;gap:34px;align-items:center;text-align:center}
.op-hero__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.op-hero__title{margin:0;font-size:clamp(30px,4.8vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.02em;max-width:780px;text-wrap:balance}
.op-hero__grad{background:linear-gradient(92deg,#1e5c3a,#2e8b57 55%,#7fd6a3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.06em}
.op-hero__lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-body);max-width:600px;text-wrap:pretty}

.op-stats{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);padding:16px 24px;box-shadow:0 2px 10px rgba(23,36,28,.06)}
.op-stat{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.op-stat:first-child{gap:5px}
.op-stats__sep{width:1px;align-self:stretch;background:var(--c-divider)}
.op-stat__score-row{display:flex;align-items:center;gap:9px}
.op-stat__score{font-size:26px;font-weight:800;color:var(--c-ink);line-height:1}
.op-stat__stars{display:flex;gap:1px;color:#f0b429;font-size:17px;letter-spacing:1px;line-height:1}
.op-stat__value{font-size:20px;font-weight:700;color:var(--c-ink);line-height:1.1;display:inline-flex;align-items:center;gap:7px}
.op-stat__label{font-size:12.5px;color:var(--c-muted)}
/* punto verde que late junto al contador (Opiniones.dc.html:207) */
.op-live{width:7px;height:7px;border-radius:50%;background:var(--c-brand);animation:opLive 2.2s ease-out infinite}
/* estrellas que la puntuación real no alcanza */
.op-stars-off{color:var(--c-border-input)}

/* ---------- 2 · en vídeo, sin guion (Opiniones.dc.html:219-287) ---------- */
.op-videos{background:var(--c-white)}
/* sin cabecera de sección ni rótulo de conteo (cambios ronda 2) */
.op-videos__inner{padding:clamp(64px,9vw,110px) clamp(18px,4vw,28px);display:flex;flex-direction:column;gap:34px}

/* una sola barra con scroll horizontal (cambios ronda 2), sin barra visible */
.op-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.op-chips::-webkit-scrollbar{display:none}
.op-chip{flex:none;white-space:nowrap}
/* el hover del template solo toca el borde; el chip elegido se pinta en verde oscuro */
.op-chip{padding:9px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;background:var(--c-white);color:var(--c-body);border:1px solid var(--c-border-input);transition:all .15s}
.op-chip:hover{border-color:var(--c-brand)}
.op-chip.is-active{background:var(--c-green-ink);color:var(--c-white);border-color:var(--c-green-ink)}

/* sin tarjeta destacada (cambios ronda 2): todas iguales en la parrilla, como el legacy */
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
/* tablet: 3 columnas (cambios ronda 2) — el auto-fill de 340px solo daba 2 a 768px */
@media (min-width:760px) and (max-width:1024px){
  .op-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .op-grid .rc__body{padding:16px 16px 18px}
  .op-grid .rc__meta{flex-wrap:wrap}
  .op-grid .rc__tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* móvil: vídeos de 2 en 2 (cambios ronda 2). El cuerpo compartido .rc__* (components.css)
   está pensado para tarjetas de 340px: a dos columnas de ~165px se compacta aquí, scoped. */
@media (max-width:759px){
  /* La barra de cifras del hero rompía en varias filas y los separadores verticales
     quedaban como líneas sueltas (iPhone, 2026-08-19): en columna y sin separadores. */
  .op-stats{flex-direction:column;gap:14px;padding:18px 24px;align-self:stretch}
  .op-stats__sep{display:none}
  .op-stat,.op-stat:first-child{align-items:center;text-align:center}
  .op-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .op-grid .rc__body{padding:14px 14px 16px;gap:12px}
  /* estrellas y chip ya no caben en fila: apilados y el chip con ellipsis */
  .op-grid .rc__meta{flex-direction:column;align-items:flex-start;gap:8px}
  .op-grid .rc__stars{font-size:12px}
  .op-grid .rc__tag{font-size:10.5px;padding:3px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .op-grid .rc__quote{font-size:12.5px;line-height:1.55}
  .op-grid .rc__author{gap:9px;padding-top:12px}
  .op-grid .rc__avatar{width:28px;height:28px;font-size:10.5px}
  .op-grid .rc__name{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .op-grid .rc__role{font-size:10.5px}
  .op-grid .op-card__play{width:36px;height:36px;right:8px;bottom:8px}
  .op-grid .op-card__play i{font-size:14px}
}
.op-card{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);overflow:hidden;box-shadow:0 1px 3px rgba(23,36,28,.05);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.op-card[hidden]{display:none}
.op-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,36,28,.1)}
/* cuadrada 1:1 en todas las tarjetas de reseña (petición 2026-08-19; antes 3:4 del 2026-08-17) */
.op-card__media{position:relative;aspect-ratio:3/3;overflow:hidden;background:var(--c-page)}
.op-card__ph{position:absolute;inset:0}
.op-card__photo{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.op-card__play{position:absolute;right:12px;bottom:12px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:var(--c-green-text);box-shadow:0 5px 16px rgba(46,139,87,.28);pointer-events:none;transition:transform .15s;z-index:1}
/* La media entera es el trigger del lightbox: el hover anima el chip como el play del hero. */
.op-card__media.setroi-video-popup:hover .op-card__play{transform:scale(1.08)}
/* Velo inferior (30% de alto) para que el chip de play no se pierda sobre fotos claras. */
.op-card__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
.op-card__play i{font-size:18px;line-height:1}
/* con vídeo, la imagen entera es el trigger (cambios ronda 2) */
.op-card__media.setroi-video-popup{cursor:pointer}
/* mismo badge que las tarjetas de opinión de la Home y de Marca blanca */
/* El cuerpo de la tarjeta es el general del sitio: .rc__* en components.css
   (views/v3/blocks/review-card-body.php). */

.op-empty{padding:44px 0;text-align:center;font-size:14px;color:var(--c-muted)}
.op-empty[hidden]{display:none}

/* ---------- 3 · cierre oscuro (Opiniones.dc.html:289-303) ---------- */
/* sin padding inferior: la foto del equipo se apoya en el borde y el footer sigue con el mismo verde */
.op-cta{background:var(--c-green-ink)}
.op-cta__inner{padding:clamp(64px,9vw,110px) clamp(18px,4vw,28px) 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.op-cta__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-dark-check)}
.op-cta__title{margin:0;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--c-white);max-width:640px;text-wrap:balance}
.op-cta__lead{margin:0;font-size:16px;line-height:1.55;color:#d9e5dc;max-width:520px;text-wrap:pretty}
.op-cta__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
/* botón propio, no .btn-cta: el del template es más grande y solo se levanta (sin cambiar sombra) */
.op-cta__btn{display:inline-flex;align-items:center;gap:7px;background:var(--g-cta);color:var(--c-white);border-radius:var(--r-sub);padding:14px 26px;font-size:15px;font-weight:600;box-shadow:0 5px 16px rgba(46,139,87,.3);transition:transform .15s}
.op-cta__btn:hover{transform:translateY(-1px);color:var(--c-white)}
.op-cta__btn i{font-size:12px;line-height:1}
.op-cta__btn--ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);box-shadow:none;transition:background .15s}
.op-cta__btn--ghost:hover{background:rgba(255,255,255,.16);transform:none}
.op-cta__visual{position:relative;width:min(640px,100%);height:clamp(240px,28vw,340px);display:flex;align-items:flex-end;justify-content:center;margin-top:clamp(18px,3vw,30px)}
.op-cta__glow{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:88%;height:74%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,rgba(95,201,142,.14),rgba(95,201,142,.03) 70%,transparent);pointer-events:none}
.op-cta__img{position:relative;max-width:100%;max-height:100%;object-fit:contain;object-position:bottom;display:block;margin-bottom:-1px;filter:drop-shadow(0 24px 40px rgba(0,0,0,.4))}

/* ---------- responsive ----------
   >=760: el hero deja de aplicar el caso `mob` del template (Opiniones.dc.html:586). */
@media (min-width:760px){
  .op-hero__inner{padding:clamp(54px,8vw,90px) clamp(18px,4vw,28px) clamp(40px,6vw,64px)}
}
/* El template para el latido del punto cuando se pide no ver movimiento (Opiniones.dc.html:50). */
@media (prefers-reduced-motion:reduce){
  .op-live{animation:none!important}
}

/* ---------- Recomendado por (Opiniones.dc.html:219-240) ----------
   Tarjeta suelta entre la parrilla y el cierre oscuro. Sin padding inferior: el cierre ya trae
   el suyo. Dos literales fuera de tokens.css, como el hero de la Home: #eef3ef es el fondo del
   hueco del vídeo mientras carga el póster y #c9d8ce la rayita del pie; ninguno de los dos
   existe en el catálogo y no vale la pena abrirlo por dos usos. */
.op-rec{background:var(--c-white);padding:clamp(56px,8vw,96px) 0 0}
.op-rec__card{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(26px,4vw,52px);align-items:center;padding:clamp(24px,3.5vw,44px);border:1px solid var(--c-border-card);border-radius:24px;background:var(--c-white);box-shadow:0 2px 10px rgba(23,36,28,.05)}
.op-rec__media{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#eef3ef;box-shadow:0 10px 30px rgba(23,49,31,.12)}
.op-rec__media.setroi-video-popup{cursor:pointer}
.op-rec__img{width:100%;height:100%;object-fit:cover;display:block}
.op-rec__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;color:var(--c-green-text);box-shadow:0 8px 24px rgba(23,49,31,.22);pointer-events:none;transition:transform .18s}
.op-rec__media.setroi-video-popup:hover .op-rec__play{transform:translate(-50%,-50%) scale(1.08)}
.op-rec__play i{font-size:24px;line-height:1;margin-left:3px}
.op-rec__body{display:flex;flex-direction:column;gap:14px;padding:clamp(4px,1vw,10px) 0}
.op-rec__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.op-rec__title{margin:0;font-family:var(--font-heading);font-size:clamp(22px,3vw,27px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--c-ink);text-wrap:balance}
.op-rec__badge{font-size:.72em;line-height:1;color:var(--c-brand);vertical-align:-.06em}
.op-rec__quote{margin:0;font-size:16px;line-height:1.55;color:var(--c-body);max-width:460px;text-wrap:pretty}
.op-rec__credit{margin:4px 0 0;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--c-muted)}
.op-rec__rule{height:1px;width:34px;flex:none;background:#c9d8ce}
.op-rec__crest{width:26px;height:auto;flex:none;display:block}

@media (prefers-reduced-motion:reduce){
  .op-rec__play,.op-rec__media.setroi-video-popup:hover .op-rec__play{transition:none}
}