/* Portada "con orden y sentido" (Sergio, 24/10): frase que explica la entrada, etiqueta con el resultado
   de cada cliente y objetos colocados como un marco alrededor de la palabra */
.dg-sentido{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);z-index:7;text-align:center;pointer-events:none;width:min(34vw,560px);transition:opacity .3s}
.ds-q{margin:0 0 10px;font:600 12px/1.2 "Inter Tight",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ds-t{margin:0;font:600 clamp(16px,1.35vw,22px)/1.3 "Inter Tight",Arial,sans-serif;color:#fff;letter-spacing:-.01em}
body.bajando .dg-sentido{opacity:0}
.obj-tag{padding:9px 18px 9px 9px}
.obj-tag b{font-size:15px}
.obj-tag span{font-size:14px;color:#fff;font-weight:600}
.obj-tag i{font-style:normal;font-size:10px;color:rgba(255,255,255,.55);margin-top:2px}
.obj{cursor:pointer}
.en-movil{display:none}
/* el aviso de IA va en el pie, en pequeño (Sergio, 24/10) */
.dg-ia{display:none!important}
.foot-ia{margin:28px 0 0 44px;max-width:calc(100% - 88px);font-size:11px;line-height:1.4;color:rgba(255,255,255,.5)}
@media (max-width:820px){
  .en-movil{display:inline}
  .en-pc{display:none}
  .obj[src*="bolso"],.obj[src*="loewe"],.obj[src*="bote"],.obj[src*="brunch"],.obj[src*="muela"]{display:none!important}
  .obj[src*="monster"]{left:-4%!important;top:9%!important}
  .dg-sentido{width:86vw;bottom:auto;top:20svh}
  .ds-q{font-size:10px;letter-spacing:.1em}
  .ds-t{font-size:16px}
  .foot-ia{margin-left:16px;max-width:calc(100% - 32px)}
}
/* Móvil: el carrusel se gira con el dedo de lado, y cada tarjeta parece un móvil (marco oscuro y la isla de arriba) */
@media (max-width:820px){
  .ring-stage{touch-action:pan-y}
  .ring .card{border-radius:20px;overflow:hidden;box-shadow:0 0 0 5px #1c1c1e,0 0 0 6px rgba(255,255,255,.2),0 18px 40px rgba(0,0,0,.6)}
  .ring .card::after{content:"";position:absolute;top:7px;left:50%;width:32%;height:9px;transform:translateX(-50%);background:#000;border-radius:9px;z-index:2;pointer-events:none}
}
/* Móvil con pantalla baja (barras del navegador): los móviles del carrusel encogen para que "Ver todos los clientes" no los pise */
/* Móvil (sobre todo iPhone: Safari no pinta bien vídeos dentro de un anillo 3D): el carrusel pasa a ser una tira
   de móviles que se desliza con el dedo, con la cifra arriba y "Ver todos los clientes" debajo, sin pisarse */
@media (max-width:820px){
  .ring:not(.muro):not([data-gl="si"]) .ring-stick{display:flex;flex-direction:column;justify-content:center}
  .ring:not(.muro):not([data-gl="si"]) .ring-stage{position:relative;display:flex;flex-direction:column;height:auto;flex:0 0 auto;perspective:none}
  .ring:not(.muro):not([data-gl="si"]) .ring-center{order:-1;position:static;transform:none;margin:0 0 16px;padding:0 16px;text-align:center}
  .ring:not(.muro):not([data-gl="si"]) .ring-floor{display:none}
  .ring:not(.muro):not([data-gl="si"]) .ring-rot{--cardw:min(44vw,calc(36svh * 9 / 16));transform:none!important;transform-style:flat;width:auto;height:auto;display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:8px calc(50vw - var(--cardw) / 2) 12px;scrollbar-width:none;touch-action:pan-x pan-y}
  .ring:not(.muro):not([data-gl="si"]) .ring-rot::-webkit-scrollbar{display:none}
  .ring:not(.muro):not([data-gl="si"]) .card{position:relative;inset:auto;flex:0 0 var(--cardw);height:calc(var(--cardw) * 16 / 9);transform:none!important;filter:none!important;scroll-snap-align:center;-webkit-box-reflect:none}
  .ring:not(.muro):not([data-gl="si"]) .card video{width:100%;height:100%;object-fit:cover;display:block}
  .ring:not(.muro) .ring-mas{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;transform:none!important;margin:16px auto 0!important;align-self:center}
}
/* Móvil con el anillo WebGL (como en el ordenador): cifra arriba, el anillo en un hueco fijo y el botón debajo */
@media (max-width:820px){
  .ring[data-gl="si"]:not(.muro) .ring-stick{display:flex;flex-direction:column;justify-content:center}
  .ring[data-gl="si"]:not(.muro) .ring-stage{position:relative;display:flex;flex-direction:column;height:auto;flex:0 0 auto}
  .ring[data-gl="si"]:not(.muro) .ring-center{order:-1;position:static;transform:none;margin:0 0 4px;padding:0 16px;text-align:center}
  .ring[data-gl="si"]:not(.muro) .ring-floor{display:none}
  .ring[data-gl="si"] .ring-gl{position:relative;inset:auto;width:100%;height:min(46svh,110vw);touch-action:pan-y}
}
/* El carrusel ya no retiene el scroll: se pasa bajando normal mientras los móviles giran un poco;
   quien quiera, se para y lo gira con el dedo o arrastrando con el ratón (Sergio, 24/10) */
.ring{height:125vh}
.ring-gl{cursor:grab}
.ring-gl:active{cursor:grabbing}
/* Móvil: "Pausar movimiento" va debajo de "Ver todos los clientes", en su propia línea, sin pisarse */
@media (max-width:820px){
  .ring:not(.muro) .ring-mas{order:8}
  .ring:not(.muro) .ring-pausa{position:static!important;order:9;align-self:center;margin:12px auto 0!important;left:auto!important;bottom:auto!important}
}