body {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.5em;
    letter-spacing: .5px;
}

/* También puedes aplicar otras fuentes a elementos específicos, si lo necesitas */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
}

p, li, span, div, button {
    font-family: 'Oswald', sans-serif;
}

@layer base {
    .no-tailwindcss-base, .no-tailwindcss-base * , .no-tailwindcss-base > * {
        font-size: revert;
        font-weight: revert;
        margin: revert;
        display: revert;
        vertical-align: revert;
        max-width: revert;
        height: revert;
        border-width: revert;
        border-style: revert;
        border-color: revert;
        outline: revert;
        list-style: revert;
        padding: revert;
    }
}

/* Fuente Roboto para descripciones de productos */
.description-roboto,
.description-roboto *,
.description-roboto p,
.description-roboto li,
.description-roboto span,
.description-roboto div {
    font-family: 'Roboto', sans-serif !important;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

/* Estilos de listas para descripciones */
.description-roboto ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin: 0.5rem 0 !important;
}

.description-roboto ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin: 0.5rem 0 !important;
}

.description-roboto li {
    display: list-item !important;
    margin: 0.25rem 0 !important;
}

/* Efecto 3D de tarjeta para categorías y marcas */
.card-3d-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Efecto hover y touch para desktop y mobile - rotación 3D */
a.card-link:hover .card-3d-container,
a.card-link:active .card-3d-container,
a.card-link:focus .card-3d-container {
    transform: rotateY(180deg) !important;
}

/* Overlay rojo que aparece en hover y touch - MÁS ESPECÍFICO */
a.card-link:hover .card-red-overlay,
a.card-link:active .card-red-overlay,
a.card-link:focus .card-red-overlay {
    opacity: 0.6 !important;
}

/* Efecto de escala sutil en la imagen antes de rotar */
a.card-link:hover .card-image,
a.card-link:active .card-image,
a.card-link:focus .card-image {
    transform: scale(1.08) !important;
}

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}

/* Transición suave para la imagen */
.card-image {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    will-change: transform;
}

/* Estilos para el slider de marcas - Marquesina continua */
.brands-swiper {
    padding: 40px 0;
    overflow: hidden;
    width: 100%;
    background: transparent;
}

.brands-swiper .swiper-wrapper {
    display: flex;
    align-items: center;
    transition-timing-function: linear !important;
    will-change: transform;
}

/* Asegurar movimiento continuo infinito */
.brands-swiper.swiper {
    overflow: hidden;
}

.brands-swiper .swiper-slide {
    width: auto !important;
}

.brands-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto;
    padding: 20px;
}

.brands-swiper .swiper-slide .brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 20px;
    transition: transform 0.3s ease;
}

.brands-swiper .swiper-slide .brand-image {
    max-height: 80px;
    width: auto;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.brands-swiper .swiper-slide .brand-link:hover .brand-image {
    transform: scale(1.15);
    filter: grayscale(0%);
    opacity: 1;
}

/* Responsive */
@media (min-width: 640px) {
    .brands-swiper .swiper-slide .brand-image {
        max-height: 100px;
    }
}

@media (min-width: 1024px) {
    .brands-swiper .swiper-slide .brand-image {
        max-height: 120px;
    }
}

.brands-swiper .swiper-button-next,
.brands-swiper .swiper-button-prev {
    color: #dc2626;
    background: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.brands-swiper .swiper-button-next:after,
.brands-swiper .swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
}

.brands-swiper .swiper-button-next:hover,
.brands-swiper .swiper-button-prev:hover {
    background: #dc2626;
    color: white;
}

.brands-swiper .swiper-pagination-bullet {
    background: #dc2626;
    opacity: 0.5;
}

.brands-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #dc2626;
}

/* Asegurar que el overlay sea visible */
.card-red-overlay {
    z-index: 10 !important;
    pointer-events: none !important;
}