/* Orbitalia Reviews v1.20.0 — adaptado de AGENCIARSE Reviews */ .orb-reviews{font-family:inherit;margin:24px 0;--orb-gap:16px;--orb-card-pad:18px;--orb-head-gap:40px;--orb-lines:5;--orb-card-bg:#fff;--orb-card-fg:#1d1d1d;--orb-muted:#6b6b6b;--orb-accent:#1a73e8;--orb-accent-hover:#155ec2} /* El color de acento de Ajustes se inyecta inline como --orb-accent; el hover se deriva de él para no tener que configurar dos colores. Los navegadores sin color-mix ignoran esta línea y se quedan con el #155ec2 de arriba. */ .orb-reviews{--orb-accent-hover:color-mix(in srgb, var(--orb-accent) 82%, #000)} .orb-dark{--orb-card-bg:#1e1e1e;--orb-card-fg:#f5f5f5;--orb-muted:#a5a5a5} /* Flechas: paleta por estilo. Los colores de Ajustes llegan inline en el contenedor (--orb-nav-bg…), y lo inline gana a estas clases sin !important. */ .orb-reviews{--orb-nav-size:40px;--orb-nav-icon:50%;--orb-nav-bg:var(--orb-card-bg);--orb-nav-fg:var(--orb-card-fg);--orb-nav-bg-h:var(--orb-accent);--orb-nav-fg-h:#fff;--orb-nav-border:0;--orb-nav-shadow:0 2px 10px rgba(0,0,0,.22)} .orb-nav-outline{--orb-nav-bg:transparent;--orb-nav-border:1.5px solid var(--orb-nav-fg);--orb-nav-shadow:none} .orb-nav-bare{--orb-nav-icon:82%;--orb-nav-bg:transparent;--orb-nav-bg-h:transparent;--orb-nav-fg-h:var(--orb-accent);--orb-nav-shadow:none} /* cabecera */ /* Hueco entre el resumen de Google y las tarjetas (ajuste `head_gap`). Eran 18 px cableados hasta 1.12.0; desde 1.13.0 el defecto son 40 px. */ .orb-head{display:flex;align-items:center;gap:16px;margin-bottom:var(--orb-head-gap);flex-wrap:wrap} .orb-g{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.18);flex:none} .orb-g svg{width:26px;height:26px} .orb-score{font-size:22px;font-weight:800;color:var(--orb-card-fg);display:flex;align-items:center;gap:8px} .orb-stars{color:#FBBC04;letter-spacing:1.5px;font-size:18px;line-height:1} .orb-count,.orb-count a{color:var(--orb-muted);font-size:13px} .orb-count a{text-decoration:underline} .orb-write{margin-left:auto} /* Alineación del resumen (ajuste `head_align` / atributo align). Sin clase = izquierda, el flujo natural del flex. El `margin-left:auto` del botón «Escribir reseña» lo empuja al extremo derecho, lo que rompería el centrado: al alinear se anula y el botón viaja con el grupo. */ .orb-head-center .orb-head{justify-content:center} .orb-head-right .orb-head{justify-content:flex-end} .orb-head-center .orb-write,.orb-head-right .orb-write{margin-left:0} .orb-write a{display:inline-block;background:var(--orb-accent);color:#fff!important;border-radius:8px;padding:6px 14px;font-size:12.5px;font-weight:700;text-decoration:none;transition:background .2s} .orb-write a:hover{background:var(--orb-accent-hover)} /* carrusel — flechas en gutter exterior, no sobre las tarjetas */ .orb-track-wrap{position:relative;padding:0 calc(var(--orb-nav-size) + 14px)} /* El carril recorta: es un `overflow-x:auto`, así que la sombra de la tarjeta (blur 10 px → unos 5 px por fuera del borde) se corta si no hay padding donde pintarla. Los 2 px de antes no llegaban y en la primera tarjeta se veía el corte a plomo por la izquierda, más visible cuanto mayores son `card_pad` y `gap`, que empujan la tarjeta contra el borde del carril. El scroll-padding es la otra mitad del arreglo. El snapport de scroll-snap es la caja de padding, no la de contenido: con padding-left el navegador da la tarjeta por desalineada y salta a scrollLeft = padding-left, comiéndose otra vez el hueco (medido en producción: scrollLeft valía exactamente 2). Igualando el scroll-padding, el snapport empieza donde empieza la tarjeta y el hueco se mantiene en reposo. */ .orb-cards{display:flex;gap:var(--orb-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 10px 14px;scroll-padding-inline:10px;-ms-overflow-style:none;scrollbar-width:none} .orb-cards::-webkit-scrollbar{display:none} .orb-grid .orb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));overflow:visible} /* El padding va en variable (--orb-card-pad, ajuste `card_pad`) y el hueco entre tarjetas también (--orb-gap, ajuste `gap`). Ojo con el box-sizing: aquí NO se fuerza a propósito. Las tarjetas de 280 px llevan años heredando el que ponga el theme —casi todos declaran `*{box-sizing:border-box}`— y forzarlo ahora estrecharía la tarjeta 2×padding en los sitios que hoy van en content-box. En el modo de columnas sí se fuerza, porque allí el padding TIENE que caber dentro de la fracción o la enésima tarjeta se sale. */ .orb-card{min-width:280px;max-width:280px;scroll-snap-align:start;background:var(--orb-card-bg);color:var(--orb-card-fg);border-radius:14px;padding:var(--orb-card-pad);box-shadow:0 2px 10px rgba(0,0,0,.10);display:flex;flex-direction:column} .orb-grid .orb-card{min-width:0;max-width:none} /* Nº de tarjetas visibles en escritorio (ajuste `cards` / atributo cards="3"). Sin la opción las tarjetas miden 280 px fijos, y por eso un negocio con pocas reseñas las veía todas a la vez: sin desbordamiento no hay nada que desplazar y el carrusel no se movía. Con `cards` el ancho pasa a ser una fracción del contenedor, así que la tarjeta n+1 queda siempre fuera y hay scroll real. box-sizing:border-box es obligatorio aquí: el padding de 18 px de la tarjeta tiene que caber DENTRO de la fracción; con content-box las n tarjetas sumarían n×36 px de más y no cabrían. El max(220px, …) es el suelo: en un contenedor estrecho (una sidebar, una columna de builder) tres tarjetas de 150 px serían ilegibles. Al llegar al suelo dejan de encoger y simplemente desbordan — que sigue siendo un carrusel. Solo de 641 px hacia arriba: en móvil la tarjeta mantiene sus 280 px y se pasa deslizando, que es lo que ya hacía. */ @media(min-width:641px){ .orb-cols .orb-cards>.orb-card{ flex:0 0 max(220px, calc((100% - (var(--orb-cols) - 1) * var(--orb-gap)) / var(--orb-cols))); min-width:0;max-width:none;box-sizing:border-box } } /* Bucle infinito (ajuste `loop`). El pool se pinta dos veces y el JS rebasa el scroll una vuelta al entrar en la copia, así que nunca se llega a un final. Los clones nacen OCULTOS y solo los enciende el JS, al confirmar que el pool desborda el contenedor. Es el orden correcto de los dos: si el defecto fuera «visibles», un contenedor ancho —o un navegador con el JS caído— enseñaría cada reseña dos veces seguidas, que es peor que no tener bucle. display:flex y no `initial`: la tarjeta es una columna flex (ver .orb-card). */ .orb-clone{display:none} .orb-loop-on .orb-clone{display:flex} .orb-card-top{display:flex;align-items:center;gap:10px;margin-bottom:10px} .orb-avatar{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover} .orb-card-top strong{font-size:14px;line-height:1.2;display:block} .orb-card-top small{color:var(--orb-muted);font-size:11.5px} .orb-card .orb-stars{font-size:15px;margin-bottom:6px} /* Dos recortes distintos, no confundirlos: - `excerpt` corta CARACTERES en PHP y deja puntos suspensivos en el HTML. - `lines` (aquí) recorta LÍNEAS en pantalla. El texto sigue entero en el HTML —Google lo lee completo—, solo que no cabe a la vista. Hasta 1.15.0 este clamp eran 5 líneas cableadas, así que poner excerpt="0" dejaba la reseña completa en el HTML y aun así se veía cortada. */ .orb-card p{font-size:13.5px;line-height:1.55;margin:0;color:var(--orb-card-fg);overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--orb-lines);-webkit-box-orient:vertical} /* lines="0" = sin límite. Se anula el -webkit-box entero y no solo el clamp: dejar el display legacy puesto con line-clamp:none afecta al layout interno del párrafo sin necesidad. */ .orb-noclamp .orb-card p{display:block;overflow:visible;-webkit-line-clamp:none} .orb-card-g{margin-top:auto;padding-top:10px;display:flex;justify-content:flex-end} .orb-card-g svg{width:18px;height:18px;opacity:.9} /* Flechas. Van con !important en casi todo a propósito: cualquier theme pinta los