/* Tarjetas de categoría de la home (ver class-home-categories.php).
   Las clases rc-cats / rc-cats__card las pone home-categories.js. */

/* ---------- Toda la tarjeta clicable ---------- */
/* Ojo: aquí NO expandimos el enlace con un ::after. Se probó y obliga a poner
   en static los envoltorios del widget para que el pseudo-elemento se ancle a
   la tarjeta; al hacerlo, el título cae por debajo de la capa oscura que
   Elementor pinta sobre la imagen de fondo y el texto se apaga. El clic lo
   gestiona home-categories.js, que no toca la maquetación del tema. */
.rc-cats__card { cursor: pointer; transition: transform .18s ease; }
.rc-cats__card:hover { transform: translateY(-2px); }

/* El foco de teclado lo pinta la tarjeta, no el texto: el área clicable es la
   tarjeta, y el recuadro tiene que decir eso. */
.rc-cats__card:focus-within {
    outline: 3px solid #fff;
    outline-offset: -3px;
}
.rc-cats__card .elementor-heading-title a:focus { outline: none; }

/* ---------- Móvil: carrusel de una tarjeta por pantalla ---------- */
/* Seis tarjetas de 400 px apiladas eran seis pantallas de scroll. En su lugar,
   una fila deslizable con scroll-snap: sin librerías ni JS de carrusel.
   El 86 % de ancho deja asomar la siguiente, que es lo que le dice al usuario
   que aquello se desliza. */
@media (max-width: 767px) {
    /* Las filas originales quedan vacías al mover las tarjetas al carrusel:
       si no se ocultan, dejan su hueco y sus separaciones. */
    .rc-cats__row--empty { display: none !important; }

    /* El envoltorio, a ancho completo de PANTALLA, no de su contenedor. El
       contenedor de Elementor que lo aloja tiene márgenes laterales propios (en
       producción, 272 px de 375 en un móvil) y ceñirse a él dejaba las tarjetas
       estrechas. margin-left al 50 % lo coloca en el centro del padre y
       translateX(-50%) le devuelve media anchura: el "full-bleed" clásico, que
       funciona sin importar el padding de los ancestros — que es justo lo que no
       podíamos dar por sabido, visto que local y producción no coincidían. */
    .rc-cats-shell {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        align-self: stretch !important;
        flex: 0 0 auto !important;
        box-sizing: border-box;
    }

    .rc-cats {
        /* El track es hijo de un contenedor flex de Elementor. Sin esto toma el
           ancho de su CONTENIDO (min-width:auto de los ítems flex, y el padre lo
           centra en vez de estirarlo): salían tarjetas de 1090 px en una pantalla
           de 390. Con min-width:0 + width:100% se ciñe a la pantalla y el
           desbordamiento se va al scroll horizontal, que es lo que queremos. */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: stretch !important;
        flex: 0 0 auto !important;
        box-sizing: border-box;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        gap: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .rc-cats::-webkit-scrollbar { display: none; }

    /* Las copias del bucle infinito son tarjetas a todos los efectos. */
    .rc-cats__card,
    .rc-cats__clone {
        flex: 0 0 86% !important;
        width: 86% !important;
        max-width: 86% !important;
        scroll-snap-align: center;
        min-height: 320px !important;
    }
    /* Elementor fija el alto con min-height en su propia hoja; el !important de
       arriba es para ganarle sin subir la especificidad a base de data-id. */

    /* El título, siempre a todo el ancho de su tarjeta.
       En producción, el de "Gastronomía" tiene un ancho fijo de 247.807px puesto
       solo en el breakpoint móvil: alguien arrastró el widget en el editor de
       Elementor sin querer (de ahí el número con decimales). Al ser más estrecho
       que el hueco y alinearse al principio, su texto quedaba 27px a la izquierda
       del centro mientras los otros cinco salían centrados.
       Se corrige desde aquí y no en la página porque el contenido de Elementor no
       se toca; si algún día se arregla en el editor, esta regla no estorba. Y de
       paso cubre el mismo despiste en cualquier otra tarjeta. */
    .rc-cats__card .elementor-widget-heading {
        width: 100% !important;
        max-width: 100% !important;
        --container-widget-width: 100% !important;
    }
}

/* ---------- Flechas del carrusel (solo móvil) ---------- */
.rc-cats-shell { position: relative; }
.rc-cats-arrow { display: none; }

@media (max-width: 767px) {
    .rc-cats-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        width: 52px;
        height: 64px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 72px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        /* Sin fondo, el glifo blanco se pierde sobre las zonas claras de la foto.
           Dos sombras: una pegada al trazo que le da contorno, y otra difusa que
           oscurece un poco la imagen detrás. Resalta sin dibujar un círculo. */
        text-shadow:
            0 0 2px rgba(0, 0, 0, .9),
            0 2px 14px rgba(0, 0, 0, .7);
    }
    .rc-cats-arrow--prev { left: 0; }
    .rc-cats-arrow--next { right: 0; }
    /* Velo muy tenue bajo cada flecha, para que no dependa solo de la sombra
       cuando la foto es clara. No es un botón: no tiene borde ni forma. */
    .rc-cats-arrow::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }
    .rc-cats-arrow--prev::before {
        background: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,0));
    }
    .rc-cats-arrow--next::before {
        background: linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,0));
    }
    .rc-cats-arrow:active { opacity: .7; }
    .rc-cats-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}

/* En escritorio el contenedor del carrusel se queda vacío (las tarjetas vuelven
   a sus filas) y no debe ocupar nada. */
@media (min-width: 768px) {
    .rc-cats:empty { display: none; }
    .rc-cats-shell:has(.rc-cats:empty) { display: none; }
}

/* Sin animación para quien la haya desactivado en el sistema. */
@media (prefers-reduced-motion: reduce) {
    .rc-cats__card { transition: none; }
    .rc-cats__card:hover { transform: none; }
}