/* bloques/opiniones — carrusel horizontal de opiniones (modo scroll de _base/base.js) */

.bl-opiniones {
    --bl-op-ancho: min(360px, 78vw);
    --bl-op-hueco: 8px;
    /* La pista ocupa todo el ancho de la pantalla para que asome la tarjeta
       siguiente, pero la primera se alinea con el contenido: es la misma
       sangría que deja .bl-contenedor (veridika.css: --ancho y --margen). */
    --bl-op-lateral: max(var(--margen, 20px), calc((100% - var(--ancho, 1360px)) / 2));
}

/* Pista con scroll nativo y ajuste por tarjeta; la barra de scroll se oculta
   porque la sustituyen las flechas y la barra de progreso. */
.bl-op-pista {
    display: flex; gap: var(--bl-op-hueco);
    margin: 0; padding: 0 var(--bl-op-lateral); list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--bl-op-lateral);
    scrollbar-width: none;
}
.bl-op-pista::-webkit-scrollbar { display: none; }
.bl-op-pista:focus-visible { outline-offset: -2px; }

.bl-op-item {
    flex: 0 0 var(--bl-op-ancho); scroll-snap-align: start;
    display: flex; flex-direction: column;
    background: var(--vk-crema-2, #efe9e1); color: var(--vk-texto, #262524);
}
.bl-tema-oscuro .bl-op-item { background: var(--vk-oscuro-2, #2f2e2c); color: #fff; }

/* Foto vertical o, sin foto, panel del mismo tamaño con las iniciales */
.bl-op-foto { position: relative; aspect-ratio: 36 / 43; overflow: hidden; background: var(--vk-oscuro-3, #3b3a37); }
.bl-op-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-op-iniciales {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: clamp(76px, 8vw, 116px); line-height: 1; letter-spacing: -.03em;
    color: rgba(255, 255, 255, .9);
}
.bl-op-item.es-destacada .bl-op-foto.sin-foto { background: var(--vk-amarillo, #dfbe2d); }
.bl-op-item.es-destacada .bl-op-iniciales { color: var(--vk-oscuro, #262524); }

/* Cuerpo: autor y logo, filete, estrellas, titular y reseña */
.bl-op-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 18px 20px 24px; }
.bl-op-autor {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 16px; border-bottom: 1px solid var(--vk-linea, rgba(38, 37, 36, .14));
}
.bl-tema-oscuro .bl-op-autor { border-color: rgba(255, 255, 255, .16); }
.bl-op-quien { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl-op-nombre { font-weight: 500; font-size: 17px; line-height: 1.25; }
.bl-op-cargo { font-size: 14.5px; line-height: 1.35; color: var(--vk-texto-2, #5f5c58); }
.bl-tema-oscuro .bl-op-cargo { color: rgba(255, 255, 255, .7); }
.bl-op-logo { flex: none; width: auto; height: auto; max-width: 92px; max-height: 30px; object-fit: contain; }

.bl-op-estrellas { display: flex; gap: 3px; margin: 2px 0 0; color: rgba(38, 37, 36, .2); }
.bl-op-estrellas svg { display: block; width: 15px; height: 15px; fill: currentColor; }
.bl-op-estrellas .es-llena { color: var(--vk-oscuro, #262524); }
.bl-tema-oscuro .bl-op-estrellas { color: rgba(255, 255, 255, .24); }
.bl-tema-oscuro .bl-op-estrellas .es-llena { color: var(--vk-amarillo, #dfbe2d); }

.bl-op-titular { margin: 0; font-weight: 500; font-size: clamp(20px, 1.6vw, 22px); line-height: 1.25; letter-spacing: -.01em; }
.bl-op-cita { margin: 0; font-size: 15px; line-height: 1.6; color: var(--vk-texto-2, #5f5c58); }
.bl-op-cita p { margin: 0; }
.bl-tema-oscuro .bl-op-cita { color: rgba(255, 255, 255, .72); }

/* Flechas a la derecha de la cabecera (la columna lateral alinea a la izquierda) */
.bl-op-flechas { align-self: flex-end; }

/* Bajo el carrusel: barra de progreso y enlace */
.bl-op-pie { display: flex; align-items: center; gap: 20px 40px; margin-top: clamp(28px, 3vw, 40px); }
.bl-op-controles { flex: 1; }
.bl-op-enlace { flex: none; margin-left: auto; }
.bl-op-enlace:only-child { margin-left: 0; }

/* Sin JS las flechas y la barra no harían nada (la pista se desplaza igual con
   el dedo o el ratón): se muestran cuando el motor arranca. */
.bl-op-carrusel[data-bl-carrusel]:not(.bl-car-listo) :is(.bl-op-flechas, .bl-op-controles) { visibility: hidden; }

/* Si todas las tarjetas caben, el motor desactiva las dos flechas: entonces
   sobran las flechas y la barra (y el pie entero si no hay enlace). */
.bl-op-carrusel:has([data-bl-prev]:disabled):has([data-bl-next]:disabled) :is(.bl-op-flechas, .bl-op-controles),
.bl-op-carrusel:has([data-bl-prev]:disabled):has([data-bl-next]:disabled) .bl-op-pie:not(:has(.bl-op-enlace)) { display: none; }

@media (max-width: 640px) {
    .bl-op-pie { flex-direction: column; align-items: stretch; }
    .bl-op-enlace { margin-left: 0; align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-op-pista { scroll-behavior: auto; }
}