/* ccm-videos — feed vertical comprable.
   El desplazamiento y el anclaje los hace el navegador: nada de secuestrar
   el scroll con JavaScript.

   Tipografia: se hereda la del tema (el mismo criterio que la cabecera de la
   tienda). Este fichero no declara font-family ni carga fuentes propias. */

.ccmv-feed {
    --ccmv-alto: 100dvh;
    --ccmv-radio: 14px;
    --ccmv-seguro: env(safe-area-inset-bottom, 0px);

    height: var(--ccmv-alto);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: #000;
    margin: 0;
    padding: 0;
}

.ccmv-slide {
    position: relative;
    height: var(--ccmv-alto);
    /* El ancho de la columna del video (9:16): toda la pantalla en el movil,
       una columna centrada en PC. La tarjeta, la barra y las acciones se
       alinean con ella; en el movil la formula da 12px a cada lado, como antes. */
    --ccmv-ancho: min(100%, calc(var(--ccmv-alto) * 9 / 16));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Hueco reservado: el video nunca empuja el contenido (CLS 0). */
.ccmv-slide__media {
    position: relative;
    width: 100%;
    max-width: calc(var(--ccmv-alto) * 9 / 16);
    aspect-ratio: 9 / 16;
    background: #111;
    overflow: hidden;
}

.ccmv-slide__video,
.ccmv-slide__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ccmv-slide__poster {
    opacity: 1;
    transition: opacity .2s linear;
    z-index: 1;
}

.ccmv-slide.is-reproduciendo .ccmv-slide__poster {
    opacity: 0;
    pointer-events: none;
}

/* Modo pasivo (ahorro de datos, red lenta, movimiento reducido): no se
   reproduce solo. El poster se queda y se ofrece un triangulo de "reproducir". */
.ccmv-slide.is-pasivo .ccmv-slide__media { cursor: pointer; }
.ccmv-slide.is-pasivo .ccmv-slide__media::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    border-style: solid;
    border-width: 22px 0 22px 36px;
    border-color: transparent transparent transparent #fff;
    transform: translate(-40%, -50%);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
    z-index: 2;
    pointer-events: none;
}

/* Tocar el video lo pausa y lo reanuda (ccmv-feed.js). Un <button> real,
   transparente, que cubre el video: por encima del poster (z 1) y por
   debajo de la tarjeta y las acciones (z 3), que siguen recibiendo sus
   toques. Clase repetida y fondo defendido en :hover/:focus: el reset del
   tema pinta [type="button"] de #c36. */
.ccmv-slide__toque.ccmv-slide__toque {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ccmv-slide__toque.ccmv-slide__toque:hover,
.ccmv-slide__toque.ccmv-slide__toque:focus {
    background: transparent;
}

.ccmv-slide__toque.ccmv-slide__toque:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* El icono de "reproducir" del centro: solo en pausa. */
.ccmv-slide__toque-icono {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.ccmv-slide__toque-icono::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 0 16px 26px;
    border-color: transparent transparent transparent #fff;
    transform: translate(-38%, -50%);
}

.ccmv-slide.is-pausado .ccmv-slide__toque-icono {
    opacity: 1;
}

/* Columna de acciones. El hueco de la barra movil (--ccmts-barra-offset) lo
   PUBLICA ccm-tienda-sections; aqui solo se LEE, con respaldo 0px para
   cuando esa barra no existe (escritorio, u otra pagina). Prohibido copiar
   su numero (56px) a mano. */
.ccmv-slide__acciones {
    position: absolute;
    right: calc(50% - var(--ccmv-ancho) / 2 + 12px);
    /* 124px: por encima de la zona tactil de la barra (92 + 28). */
    bottom: calc(124px + var(--ccmv-seguro) + var( --ccmts-barra-offset, 0px ));
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

/* LA CLASE VA REPETIDA A PROPOSITO, y no es un descuido de copiar y pegar.
   Medido en dev el 22-sep-2026: el reset del tema (hello-elementor
   reset.css) trae la regla

       [type="button"], [type="submit"], button { border: 1px solid #c36;
       border-radius: 3px; background-color: transparent; padding: .5rem 1rem }

   Nuestros botones se imprimen con type="button", asi que casan por
   [type="button"], que pesa (0,1,0): EXACTAMENTE lo mismo que una clase.
   Con el empate manda el orden de carga, y el CSS del tema se encola
   despues del nuestro, asi que ganaba el tema: los botones salian
   cuadrados, con borde rosa y sin fondo. Se comprobo aislando la causa:
   el mismo <button> SIN atributo type recibe bien nuestros estilos.

   Repetir la clase sube a (0,2,0) y gana sin !important y sin depender
   del orden de encolado ni del tema que haya puesto. Mismo remedio que en
   body.ccmv-feed-activo, y por la misma razon. Vale para los tres botones
   propios; el boton de comprar NO se toca, que ese lo viste la tienda. */
.ccmv-slide__accion.ccmv-slide__accion {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    cursor: pointer;
    padding: 0;
    /* El reset del tema pone transition: .3s a todos los botones. Aqui
       sobra: el icono de sonido cambia de dibujo al pulsarlo y no debe
       ir con fundido. */
    transition: none;
}

/* El reset del tema tambien repinta el boton al enfocarlo o al pasar por
   encima: [type="button"]:focus, [type="button"]:hover { background: #c36 }.
   Eso pesa (0,2,0), lo mismo que la clase repetida, asi que volvia a ganar
   por orden de carga: tras tocar el boton de sonido se quedaba rojo. Con
   la pseudo-clase el selector sube a (0,3,0) y manda el nuestro: en CSS
   las pseudo-clases cuentan en la MISMA columna que las clases y que los
   selectores de atributo, no en la de los elementos.
   El realce es el mismo negro, un poco menos transparente: estos mandos
   estan encima del video y no deben gritar. */
.ccmv-slide__accion.ccmv-slide__accion:hover,
.ccmv-slide__accion.ccmv-slide__accion:focus {
    background: rgba(0, 0, 0, .6);
    color: #fff;
}

.ccmv-slide__accion.ccmv-slide__accion:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ccmv-slide__cifra {
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
}

/* Los iconos. Van como mascara y no como imagen de fondo para que tomen el
   color del boton (background-color: currentColor): asi el mismo dibujo
   sirve en blanco sobre el video y heredaria cualquier otro color sin
   tocar el SVG. Van incrustados en el propio CSS, sin peticion aparte:
   son cuatro decimas de kilobyte y el feed no puede permitirse una ida y
   vuelta mas antes de pintar el primer fotograma.

   El ancho y el alto son obligatorios: el marcado imprime <span> vacios y
   sin tamano explicito miden 0 y el boton sale sin nada dentro. */
.ccmv-slide__icono.ccmv-slide__icono {
    width: 24px;
    height: 24px;
    display: block;
    background-color: currentColor;
    /* Longhands a proposito, NO el atajo "mask: center/contain no-repeat".
       El atajo reinicia mask-image a none, asi que bastaria mover esta
       regla debajo de las variantes para apagar los tres iconos sin que
       fallara nada. Con longhands el orden dentro del fichero deja de
       importar. */
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}

.ccmv-slide__icono--comentario.ccmv-slide__icono--comentario {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 2.5 1.4 4.7 3.6 6.2L5 21l4.1-2.2c.9.2 1.9.3 2.9.3 5.5 0 10-3.6 10-8s-4.5-8-10-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 2.5 1.4 4.7 3.6 6.2L5 21l4.1-2.2c.9.2 1.9.3 2.9.3 5.5 0 10-3.6 10-8s-4.5-8-10-8z'/%3E%3C/svg%3E");
}

/* Sin sonido: altavoz tachado. Es el estado de partida del feed. */
.ccmv-slide__icono--sonido.ccmv-slide__icono--sonido {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16.1 9.5l1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1 2.1 2.1-1.4 1.4-2.1-2.1-2.1 2.1-1.4-1.4 2.1-2.1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16.1 9.5l1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1 2.1 2.1-1.4 1.4-2.1-2.1-2.1 2.1-1.4-1.4 2.1-2.1z'/%3E%3C/svg%3E");
}

/* Con sonido: altavoz con ondas. Lo decide aria-pressed, que es lo que ya
   alterna el JS para los lectores de pantalla: un estado, no dos. */
[aria-pressed="true"] .ccmv-slide__icono--sonido.ccmv-slide__icono--sonido {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M15.5 8.2a5 5 0 0 1 0 7.6l1.3 1.5a7 7 0 0 0 0-10.6L15.5 8.2z'/%3E%3Cpath d='M14 10.4a2.5 2.5 0 0 1 0 3.2l1.3 1.5a4.5 4.5 0 0 0 0-6.2L14 10.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M15.5 8.2a5 5 0 0 1 0 7.6l1.3 1.5a7 7 0 0 0 0-10.6L15.5 8.2z'/%3E%3Cpath d='M14 10.4a2.5 2.5 0 0 1 0 3.2l1.3 1.5a4.5 4.5 0 0 0 0-6.2L14 10.4z'/%3E%3C/svg%3E");
}

/* El corazon que inyecta ccm-account hereda el tamano de la columna. */
.ccmv-slide__fav {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tarjeta horizontal de producto: blanca SOLIDA, sin backdrop-filter. El
   desenfoque sobre un video en movimiento es caro en moviles modestos, y la
   premisa de este feed es la fluidez; el texto tambien se lee mejor sobre
   blanco solido que sobre video desenfocado. Mismo respaldo de la barra
   movil que la columna de acciones. */
.ccmv-producto {
    position: absolute;
    left: calc(50% - var(--ccmv-ancho) / 2 + 12px);
    right: calc(50% - var(--ccmv-ancho) / 2 + 12px);
    bottom: calc(16px + var(--ccmv-seguro) + var( --ccmts-barra-offset, 0px ));
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--ccmv-radio);
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

.ccmv-producto__enlace {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.ccmv-producto__foto img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    display: block;
}

.ccmv-producto__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ccmv-producto__nombre {
    color: #1a1a1a;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sin fuente propia para el precio: peso fuerte + numeros tabulares, para
   que "$ 1.170.000" no baile al cambiar de cifra. */
/* Con descuento, WooCommerce pinta <del> (antes) y <ins> (ahora). En una
   fila que, si no cabe, baja SIN hueco (el dueño, 28-sep: "los precios se
   ven muy separados"); el tachado mas pequeño y gris, y la oferta sin el
   subrayado que el navegador pone a <ins> (la regla de WooCommerce que lo
   quita solo vale dentro de sus paginas). Los .screen-reader-text son
   absolutos: no ocupan sitio en la fila. */
.ccmv-producto__precio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 0px;
    line-height: 1.15;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ccmv-producto__precio del {
    color: #8a8a8a;
    font-size: 12px;
    font-weight: 500;
}

.ccmv-producto__precio ins {
    text-decoration: none;
}

/* Boton de anadir (opcion B, 24-sep-2026): pastilla roja con icono de
   carrito y "Añadir". Clase repetida: [type="button"] del reset del tema
   pesa (0,1,0), igual que una clase, y ganaba por orden de carga (en dev
   salia transparente con borde #c36). WooCommerce no lo viste aqui: no hay
   .woocommerce por encima. Mismo rojo y mismo oscuro que la tarjeta del
   catalogo (--ccmg-atc-accent, #191818 al anadir). */
.ccmv-producto__cta.ccmv-producto__cta {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #e60000;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease;
}

/* El reset repinta #c36 en [type="button"]:hover y :focus. */
.ccmv-producto__cta.ccmv-producto__cta:hover,
.ccmv-producto__cta.ccmv-producto__cta:focus {
    background: #b40000;
    color: #fff;
}

.ccmv-producto__cta.ccmv-producto__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Estados que marca WooCommerce (add-to-cart.js): .loading al pulsar,
   .added al terminar. Van DESPUES de :hover/:focus porque empatan con
   ellos en especificidad. */
.ccmv-producto__cta.ccmv-producto__cta.loading,
.ccmv-producto__cta.ccmv-producto__cta.added {
    background: #191818;
    color: #fff;
}

/* Un segundo toque mientras anade meteria el producto dos veces. */
.ccmv-producto__cta.ccmv-producto__cta.loading {
    pointer-events: none;
    cursor: progress;
}

.ccmv-producto__cta-ic {
    display: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.ccmv-producto__cta .ccmv-producto__cta-ic--carrito {
    display: block;
}

.ccmv-producto__cta.loading .ccmv-producto__cta-ic--carrito,
.ccmv-producto__cta.added .ccmv-producto__cta-ic--carrito {
    display: none;
}

.ccmv-producto__cta.loading .ccmv-producto__cta-ic--cargando,
.ccmv-producto__cta.added .ccmv-producto__cta-ic--listo {
    display: block;
}

.ccmv-producto__cta-ic--cargando {
    animation: ccmv-giro .8s linear infinite;
}

@keyframes ccmv-giro {
    to { transform: rotate(360deg); }
}

/* Los tres textos en la misma celda: el boton mide siempre lo que el mas
   largo ("Añadiendo") y no empuja al nombre al cambiar de estado. */
.ccmv-producto__cta-textos {
    display: grid;
}

.ccmv-producto__cta-t {
    grid-area: 1 / 1;
    visibility: hidden;
}

.ccmv-producto__cta .ccmv-producto__cta-t--reposo,
.ccmv-producto__cta.loading .ccmv-producto__cta-t--cargando,
.ccmv-producto__cta.added .ccmv-producto__cta-t--listo {
    visibility: visible;
}

.ccmv-producto__cta.loading .ccmv-producto__cta-t--reposo,
.ccmv-producto__cta.added .ccmv-producto__cta-t--reposo {
    visibility: hidden;
}

/* WooCommerce mete un "Ver carrito" junto al boton al terminar; en la
   tarjeta no cabe y el cajon del carrito ya se abre. */
.ccmv-producto > .added_to_cart {
    display: none;
}

.ccmv-feed__vacio {
    color: #fff;
    text-align: center;
    padding: 40px 16px;
}

/* Barra propia de la pagina (el "marco"): 46px arriba, sobre un degradado
   que se disuelve hacia el video, no un bloque solido. El logo de CCM
   a la izquierda y una salida a la tienda a la derecha, para que el
   visitante nunca quede atrapado en el feed. Flota SOBRE los videos
   (position: fixed): no empuja nada, cero CLS. */
.ccmv-marco {
    --ccmv-marco-alto: 46px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: calc(var(--ccmv-marco-alto) + env(safe-area-inset-top, 0px));
    padding: 0 14px;
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    color: #fff;
    /* El degradado no bloquea toques sobre el video; el enlace si. */
    pointer-events: none;
}

/* El logo de CCM (26-sep): blanco con la M roja, lleva al inicio. El
   degradado no recibe toques; el logo si. 30px de alto: ~72px de ancho. */
.ccmv-marco__logo {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #fff;
}

.ccmv-marco__logo svg {
    display: block;
    height: 30px;
    width: auto;
}

.ccmv-marco__logo:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ccmv-marco__salida {
    pointer-events: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ccmv-marco__salida:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* La barra para mover el video con el dedo (26-sep, pedida por el dueño).
   Entre la tarjeta del producto (abajo) y la columna de acciones, con el
   mismo ancho que la tarjeta. La linea es fina; la zona tactil, de 28px.
   touch-action:none: el dedo sobre la barra mueve el video, no el feed. El
   relleno se pinta con transform desde el JS (no obliga a recolocar nada). */
.ccmv-slide__barra {
    position: absolute;
    left: calc(50% - var(--ccmv-ancho) / 2 + 12px);
    right: calc(50% - var(--ccmv-ancho) / 2 + 12px);
    bottom: calc(92px + var(--ccmv-seguro) + var( --ccmts-barra-offset, 0px ));
    height: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    touch-action: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ccmv-slide__barra-pista {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .35);
    overflow: hidden;
    transition: height .15s ease;
}

.ccmv-slide__barra-relleno {
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}

.ccmv-slide__barra.is-arrastrando .ccmv-slide__barra-pista,
.ccmv-slide__barra:focus-visible .ccmv-slide__barra-pista {
    height: 8px;
}

.ccmv-slide__barra:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* El tiempo, solo mientras se arrastra: "0:12 / 0:30" encima de la barra. */
.ccmv-slide__barra-tiempo {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.ccmv-slide__barra.is-arrastrando .ccmv-slide__barra-tiempo {
    opacity: 1;
}

/* La tienda le pone padding-bottom al body para el hueco de su barra movil
   en paginas normales (que fluyen). Este feed es de alto fijo: ese relleno
   sumaria un segundo desplazamiento. Se anula SOLO aqui, con clase propia;
   ni un byte de ccm-tienda-sections se toca.

   La clase va repetida a proposito: ccm-tienda-sections anula este mismo
   padding con body:has( .ccmts-barra ), que tiene la misma especificidad.
   Con un empate ganaria la hoja que se cargue mas tarde, y eso no lo
   controla nadie. Repetir la clase gana sin recurrir a !important. */
body.ccmv-feed-activo.ccmv-feed-activo {
    margin: 0;
    padding-bottom: 0;
    overflow: hidden;
    background: #000;
}

/* En pantallas anchas la columna del video se centra y no se estira. */
@media (min-width: 1025px) {
    .ccmv-slide__media {
        border-radius: var(--ccmv-radio);
    }
    /* En PC las acciones van FUERA del video, a su derecha, como TikTok. */
    .ccmv-slide__acciones {
        right: auto;
        left: calc(50% + var(--ccmv-ancho) / 2 + 16px);
    }
}

/* El globo de WhatsApp de otro plugin (#wa) tapaba la tarjeta del producto.
   Fuera solo en el feed: WhatsApp sigue en la barra movil y en el menu. Con
   el id gana por especificidad; sin !important. */
body.ccmv-feed-activo #wa {
    display: none;
}

/* Las ventanas emergentes de Elementor (plantillas 17699 y 17789) tampoco
   (el dueño, 28-sep): encima de un feed a pantalla completa estorban, y con
   CCMV_RECURSOS_MINIMOS su CSS y su JS ya no se cargan aqui. */
body.ccmv-feed-activo .elementor-location-popup {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ccmv-slide__poster {
        transition: none;
    }
    .ccmv-feed {
        scroll-behavior: auto;
    }
    .ccmv-producto__cta-ic--cargando {
        animation: none;
    }
    .ccmv-slide__toque-icono {
        transition: none;
    }
    .ccmv-slide__barra-pista,
    .ccmv-slide__barra-tiempo {
        transition: none;
    }
}

/* Panel de comentarios */
.ccmv-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    max-height: 70dvh;
    overflow-y: auto;
    padding: 16px 16px calc(16px + var(--ccmv-seguro, 0px));
    border-radius: 16px 16px 0 0;
    background: #fff;
    display: none;
}

.ccmv-panel.is-abierto { display: block; }

/* Clase repetida por lo mismo que .ccmv-slide__accion: se imprimen con
   type="button" y type="submit", y el reset del tema los viste con esa
   misma especificidad. Ver el comentario largo de la columna de acciones. */
.ccmv-panel__cerrar.ccmv-panel__cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    color: inherit;
}

/* Misma razon que en la columna de acciones: sin esto, la X del panel se
   pone rosa con fondo al enfocarla. */
.ccmv-panel__cerrar.ccmv-panel__cerrar:hover,
.ccmv-panel__cerrar.ccmv-panel__cerrar:focus {
    background: transparent;
    color: inherit;
}

.ccmv-panel__lista { list-style: none; margin: 0 0 12px; padding: 0; }
.ccmv-panel__item { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.ccmv-panel__form { display: flex; gap: 8px; align-items: flex-end; }
.ccmv-panel__campo { flex: 1 1 auto; min-height: 44px; resize: vertical; }
.ccmv-panel__enviar.ccmv-panel__enviar { min-height: 44px; padding: 0 16px; cursor: pointer; }
.ccmv-panel__aviso { color: #a00; font-size: 13px; }