.vry-sc-wrap {
    --vry-sc-active-visible: var(--vry-sc-visible-desktop, 4);
    margin: 32px auto;
    max-width: 1200px;
    padding: 0 16px;
}
@media (max-width: 1024px) {
    .vry-sc-wrap { --vry-sc-active-visible: var(--vry-sc-visible-tablet, 3); }
}
@media (max-width: 640px) {
    .vry-sc-wrap { --vry-sc-active-visible: var(--vry-sc-visible-mobile, 2); }
}

.vry-sc-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px;
    text-align: center;
}

.vry-sc-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vry-sc-viewport {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.vry-sc-track {
    display: flex;
    transition: transform .45s ease;
    will-change: transform;
}

.vry-sc-slide {
    flex: 0 0 calc(100% / var(--vry-sc-active-visible));
    box-sizing: border-box;
    padding: 0 8px;
}

.vry-sc-card {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px;
    position: relative;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
}
.vry-sc-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.vry-sc-img {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #f7f7f7;
}
.vry-sc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vry-sc-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vry-sc-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--vry-sc-price, #16a34a);
    margin-top: auto;
}
.vry-sc-price del { color: #9ca3af; font-weight: 400; margin-right: 6px; }
.vry-sc-price ins { text-decoration: none; }

.vry-sc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    z-index: 2;
}
.vry-sc-badge-new { background: var(--vry-sc-badge-new-bg, #dbeafe); color: var(--vry-sc-badge-new-text, #1e40af); }
.vry-sc-badge-popular { background: var(--vry-sc-badge-popular-bg, #fef3c7); color: var(--vry-sc-badge-popular-text, #92400e); }

.vry-sc-arrow {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: var(--vry-sc-btn-bg, #fff);
    color: var(--vry-sc-btn-icon, #111827);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.vry-sc-arrow:hover { transform: scale(1.06); filter: brightness(.95); }
.vry-sc-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.vry-sc-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}
.vry-sc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    border: none;
    padding: 0;
}
.vry-sc-dot.is-active { background: var(--vry-sc-dot-active, #16a34a); width: 18px; border-radius: 4px; transition: width .2s ease; }

.vry-sc-title { color: var(--vry-sc-title-color, #111827); }

@media (max-width: 480px) {
    .vry-sc-arrow { width: 32px; height: 32px; }
    .vry-sc-title { font-size: 18px; }
}

/* ================= CATEGORÍAS ANIMADAS ================= */
.vry-sc-cats-wrap { margin: 40px auto; max-width: 1200px; padding: 0 16px; }

.vry-sc-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.vry-sc-cat-tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transition: opacity var(--vry-sc-reveal-duration, .6s) ease, transform var(--vry-sc-reveal-duration, .6s) ease;
    transition-delay: var(--vry-sc-reveal-delay, 0ms);
    /* Antialiasing: forzar su propia capa de composición evita el efecto
       "dientes de sierra" que Chrome/Firefox producen en bordes redondeados
       cuando el contenido de adentro tiene transform (el zoom de la foto). */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
}

/* Efectos de aparición — el admin elige uno en "Fondo y animación". */
.vry-sc-cats-reveal-fade-up .vry-sc-cat-tile { opacity: 0; transform: translateY(24px) translateZ(0); }
.vry-sc-cats-reveal-fade-up .vry-sc-cat-tile.is-visible { opacity: 1; transform: translateY(0) translateZ(0); }
.vry-sc-cats-reveal-fade-in .vry-sc-cat-tile { opacity: 0; }
.vry-sc-cats-reveal-fade-in .vry-sc-cat-tile.is-visible { opacity: 1; }
.vry-sc-cats-reveal-zoom-in .vry-sc-cat-tile { opacity: 0; transform: scale(.9) translateZ(0); }
.vry-sc-cats-reveal-zoom-in .vry-sc-cat-tile.is-visible { opacity: 1; transform: scale(1) translateZ(0); }

.vry-sc-cat-img {
    position: absolute;
    inset: -1px; /* 1px de sobrante para que el zoom nunca deje ver el borde del fondo */
    overflow: hidden;
}
.vry-sc-cat-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--vry-sc-cat-hover-duration, .45s) var(--vry-sc-cat-hover-easing, cubic-bezier(.22,1,.36,1));
    transform: translateZ(0);
    backface-visibility: hidden;
}
.vry-sc-cat-tile:hover .vry-sc-cat-img img { transform: scale(var(--vry-sc-hover-zoom, 1.12)) translateZ(0); }

.vry-sc-cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
    transition: background var(--vry-sc-cat-hover-duration, .45s) ease;
}
.vry-sc-cat-tile:hover .vry-sc-cat-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.82) 100%);
}

.vry-sc-cat-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 18px 16px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .2px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.vry-sc-cat-label small { font-size: 12px; font-weight: 500; opacity: .85; text-transform: none; }

/* Dónde sale el texto — el admin elige en "Fondo y animación". */
.vry-sc-text-center .vry-sc-cat-label { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; align-items: center; }
.vry-sc-text-center .vry-sc-cat-overlay { background: rgba(0,0,0,.28); }
.vry-sc-text-center .vry-sc-cat-tile:hover .vry-sc-cat-overlay { background: rgba(0,0,0,.4); }
.vry-sc-text-top .vry-sc-cat-label { top: 0; bottom: auto; }
.vry-sc-text-top .vry-sc-cat-overlay { background: linear-gradient(0deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%); }

.vry-sc-cat-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--vry-sc-cat-hover-duration, .45s) ease, opacity var(--vry-sc-cat-hover-duration, .45s) ease, margin-top var(--vry-sc-cat-hover-duration, .45s) ease;
}
.vry-sc-cat-tile:hover .vry-sc-cat-cta { max-height: 20px; opacity: 1; }
.vry-sc-cat-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform var(--vry-sc-cat-hover-duration, .45s) ease; }
.vry-sc-cat-tile:hover .vry-sc-cat-cta svg { transform: translateX(3px); }

/* Estilo alterno: tarjeta que se levanta en vez de zoom de foto.
   Transición propia (más específica que la de arriba) para que el hover
   tenga SU propia velocidad, sin heredar el retraso en cascada de la
   animación de aparición. */
.vry-sc-cats-style-lift .vry-sc-cat-tile:hover {
    transition: transform var(--vry-sc-cat-hover-duration, .45s) var(--vry-sc-cat-hover-easing, cubic-bezier(.22,1,.36,1)), box-shadow var(--vry-sc-cat-hover-duration, .45s) ease;
    transform: translateY(-6px) scale(1.01) translateZ(0);
    box-shadow: 0 16px 30px rgba(0,0,0,.18);
}
.vry-sc-cats-style-lift .vry-sc-cat-tile:hover .vry-sc-cat-img img { transform: translateZ(0); } /* sin zoom de foto en este estilo */

@media (max-width: 640px) {
    .vry-sc-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .vry-sc-cat-label { font-size: 15px; padding: 12px; }
    .vry-sc-cat-cta { display: none; }
}

/* ================= FONDOS ================= */
.vry-sc-wrap, .vry-sc-cats-wrap { border-radius: 20px; }
@media (min-width: 769px) {
    .vry-sc-bg-solid { background: var(--vry-sc-bg-color1); padding: 32px 20px; }
    .vry-sc-bg-gradient { background: linear-gradient(135deg, var(--vry-sc-bg-color1), var(--vry-sc-bg-color2)); padding: 32px 20px; }
    .vry-sc-bg-shapes { position: relative; overflow: hidden; padding: 32px 20px; }
    .vry-sc-bg-shapes::before,
    .vry-sc-bg-shapes::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: .4;
        z-index: 0;
        pointer-events: none;
    }
    .vry-sc-bg-shapes::before { width: 280px; height: 280px; background: var(--vry-sc-bg-color1); top: -90px; left: -60px; }
    .vry-sc-bg-shapes::after { width: 240px; height: 240px; background: var(--vry-sc-bg-color2); bottom: -70px; right: -50px; }
    .vry-sc-bg-shapes > * { position: relative; z-index: 1; }
}
@media (max-width: 768px) {
    .vry-sc-bg-mobile-transparent { background: none !important; padding: 0 !important; }
    .vry-sc-bg-mobile-solid { background: var(--vry-sc-bg-color1) !important; padding: 20px 14px !important; }
    .vry-sc-bg-mobile-gradient { background: linear-gradient(135deg, var(--vry-sc-bg-color1), var(--vry-sc-bg-color2)) !important; padding: 20px 14px !important; }
    .vry-sc-bg-mobile-shapes { position: relative; overflow: hidden; padding: 20px 14px !important; }
    .vry-sc-bg-mobile-shapes::before,
    .vry-sc-bg-mobile-shapes::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(40px);
        opacity: .4;
        z-index: 0;
        pointer-events: none;
    }
    .vry-sc-bg-mobile-shapes::before { width: 160px; height: 160px; background: var(--vry-sc-bg-color1); top: -50px; left: -40px; }
    .vry-sc-bg-mobile-shapes::after { width: 140px; height: 140px; background: var(--vry-sc-bg-color2); bottom: -40px; right: -30px; }
    .vry-sc-bg-mobile-shapes > * { position: relative; z-index: 1; }
}

/* ==================================================================
   MARCOS DE TARJETA (frame styles)
   ================================================================== */
.vry-sc-card { border-radius: var(--vry-sc-frame-radius, 12px); }
.vry-sc-img { border-radius: calc(var(--vry-sc-frame-radius, 12px) - 4px); }

/* Sombra suave (por defecto) */
.vry-sc-frame-shadow { border: 1px solid #f0f0f0; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.vry-sc-frame-shadow:hover { box-shadow: 0 10px 24px rgba(0,0,0,.10); }

/* Borde de color sólido */
.vry-sc-frame-outline { border: 2px solid var(--vry-sc-frame-color, #e5e7eb); box-shadow: none; }
.vry-sc-frame-outline:hover { border-color: var(--vry-sc-price, #16a34a); }

/* Borde degradado */
.vry-sc-frame-gradient {
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--vry-sc-price, #16a34a), var(--vry-sc-frame-color, #e5e7eb)) border-box;
}

/* Estilo "polaroid": foto cuadrada con borde blanco grueso abajo */
.vry-sc-frame-polaroid {
    border: none;
    border-radius: 4px;
    padding: 10px 10px 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    transform: rotate(-1deg);
}
.vry-sc-frame-polaroid:hover { transform: rotate(0deg) translateY(-2px); }
.vry-sc-frame-polaroid .vry-sc-img { border-radius: 2px; }

/* Sin marco: solo la imagen y el texto, sin fondo ni sombra */
.vry-sc-frame-flat { border: none; box-shadow: none; background: transparent; padding: 6px; }
.vry-sc-frame-flat:hover { box-shadow: none; transform: translateY(-2px); }

/* ---- Marco "boceto" — trazo tipo marcador, dibujado a mano ----
   Técnica: una máscara SVG (solo el trazo, sin relleno) recorta un color
   sólido — así el marco usa el mismo color configurado arriba, sin
   necesitar una imagen distinta por cada color. Se dibuja un poco más
   grande que la tarjeta, como si alguien la hubiera "encerrado" con un
   plumón sin ser muy prolijo. */
.vry-sc-frame-sketch {
    border: none;
    box-shadow: none;
    background: #fff;
    overflow: visible;
}
.vry-sc-frame-sketch::after {
    content: "";
    position: absolute;
    inset: -10px;
    background-color: var(--vry-sc-frame-color, #16a34a);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M14,16 C50,10 95,17 130,12 C155,9 178,14 189,19 C193,42 190,66 186,85 C150,92 105,87 65,90 C40,92 16,87 11,80 C8,55 10,32 14,16 Z' fill='none' stroke='white' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M14,16 C50,10 95,17 130,12 C155,9 178,14 189,19 C193,42 190,66 186,85 C150,92 105,87 65,90 C40,92 16,87 11,80 C8,55 10,32 14,16 Z' fill='none' stroke='white' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    transition: transform .25s ease, opacity .25s ease;
}
.vry-sc-frame-sketch:hover::after { transform: scale(1.015) rotate(-0.3deg); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .vry-sc-frame-sketch:hover::after { transform: none; } }

/* ---- Marco "cinta washi" — dos tiritas de cinta de color en las esquinas,
   estilo scrapbook/cuaderno. Sin SVG, liviano. ---- */
.vry-sc-frame-tape { border: 1px solid #f0f0f0; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: visible; }
.vry-sc-frame-tape:hover { box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.vry-sc-frame-tape::before, .vry-sc-frame-tape::after {
    content: "";
    position: absolute;
    width: 46px;
    height: 18px;
    background: var(--vry-sc-frame-color, #16a34a);
    opacity: .88;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    z-index: 2;
    transition: transform .2s ease;
}
.vry-sc-frame-tape::before { top: -9px; left: 12px; transform: rotate(-8deg); }
.vry-sc-frame-tape::after { bottom: -9px; right: 12px; transform: rotate(-8deg); }
.vry-sc-frame-tape:hover::before { transform: rotate(-4deg) translateY(-1px); }
.vry-sc-frame-tape:hover::after { transform: rotate(-4deg) translateY(1px); }