/* MONKY · Cerámico móvil R3 · exclusivamente hasta 600 px.
   Reutiliza aria-expanded del interactivo R7; no modifica su JavaScript. */
@media (max-width: 600px) {
  /* En celular el color depende de la selección, no de un hover emulado. */
  .ceramic-explorer .ceramic-explorer__point .ceramic-explorer__icon-normal {
    opacity: 1;
  }
  .ceramic-explorer .ceramic-explorer__point .ceramic-explorer__icon-hover {
    opacity: 0;
    animation: none;
  }
  .ceramic-explorer .ceramic-explorer__point[aria-expanded="true"] .ceramic-explorer__icon-normal {
    opacity: 0;
  }
  .ceramic-explorer .ceramic-explorer__point[aria-expanded="true"] .ceramic-explorer__icon-hover {
    opacity: 1;
  }

  /* Un anillo tenue invita a tocar; el punto y su área táctil no cambian. */
  .ceramic-explorer .ceramic-explorer__point::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--icon-size) * .84);
    height: calc(var(--icon-size) * .84);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    pointer-events: none;
    opacity: .25;
    transform: translate(-50%, -50%);
    animation: ceramic-mobile-point-halo 3s ease-in-out infinite;
  }
  .ceramic-explorer .ceramic-explorer__point:nth-child(2n)::after {
    animation-delay: -.7s;
  }
  .ceramic-explorer .ceramic-explorer__point:nth-child(3n)::after {
    animation-delay: -1.4s;
  }
  .ceramic-explorer .ceramic-explorer__point[aria-expanded="true"]::after {
    opacity: 0;
    animation: none;
  }

  /* Trazo rojo interior: no altera el tamaño, texto o posición del enlace. */
  .ceramic-explorer .ceramic-explorer__row::after {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid #ed0806;
    border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(237, 8, 6, .12);
    pointer-events: none;
    opacity: .5;
    animation: ceramic-mobile-product-halo 3.2s ease-in-out infinite;
  }
  @keyframes ceramic-mobile-point-halo {
    0%, 100% { opacity: .16; transform: translate(-50%, -50%) scale(.96); }
    50% { opacity: .48; transform: translate(-50%, -50%) scale(1.2); }
  }
  @keyframes ceramic-mobile-product-halo {
    0%, 100% { opacity: .28; }
    50% { opacity: .76; }
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .ceramic-explorer .ceramic-explorer__point::after,
  .ceramic-explorer .ceramic-explorer__row::after {
    animation: none;
  }
}

/* R2: encuadre 16:9 en celular, aproximadamente un 26 % más cercano.
   Foto y coordenadas viven en el mismo lienzo: los puntos siguen sus piezas. */
@media (max-width: 600px) {
  .ceramic-explorer .ceramic-explorer__stage {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .ceramic-explorer .ceramic-explorer__scene {
    inset: 0 auto 0 50%;
    width: 125.76419214%;
    transform: translateX(-50%);
  }
}

/* R3: comparador de Cerámico más alto y cercano, con ambas fotos
   recortadas exactamente igual. La barra conserva su recorrido completo. */
@media (max-width: 600px) {
  .ceramic-photo-comparison .comparison-stage {
    aspect-ratio: 16 / 9;
  }
  .ceramic-photo-comparison .comparison-after,
  .ceramic-photo-comparison .comparison-before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .ceramic-photo-comparison .comparison-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}