/* ===================================================================
   Noperti - Suavizado visual global (estilo mas moderno y elegante)
   Aditivo: no modifica ni elimina reglas existentes, solo agrega.
   Para revertir: quitar el <link> a este archivo en header.php,
   o vaciar este archivo.
   =================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Transiciones suaves generales para elementos interactivos */
a,
.btn,
.card,
.nav-link,
input,
select,
textarea,
img {
    transition: all 0.25s ease;
}

/* Botones: esquinas mas suaves y sombra sutil al pasar el mouse */
.btn {
    border-radius: 10px;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary:hover,
.btn-danger:hover,
.btn-outline-primary:hover,
.btn-outline-danger:hover {
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.25);
}

/* Tarjetas (cards) de producto y de contenido: esquinas suaves + sombra elegante */
.card,
.bg-white.shadow-xs {
    border-radius: 14px;
    overflow: hidden;
}

.shadow-xs {
    box-shadow: 0 2px 10px -4px rgba(20, 20, 40, 0.10) !important;
}

.shadow-3d-hover:hover {
    box-shadow: 0 14px 28px -10px rgba(20, 20, 40, 0.18) !important;
    transform: translateY(-3px);
}

/* Imagenes: bordes ligeramente redondeados donde corresponda */
.rounded,
.rounded-top,
figure img,
.img-fluid {
    border-radius: 12px;
}

.rounded-top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Inputs y selects: mas suaves y con foco elegante */
.form-control,
.form-select {
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(216, 31, 63, 0.12);
    border-color: rgba(216, 31, 63, 0.4);
}

/* Badges (por ejemplo "Destacado") */
.badge {
    border-radius: 999px;
    letter-spacing: 0.02em;
}

/* Banners del carrusel principal: transicion suave de imagen */
.swiper-slide {
    transition: opacity 0.4s ease;
}

/* Enlaces del menu: subrayado suave al pasar el mouse en vez de brusco */
.nav-link {
    position: relative;
}

/* Scrollbar mas fina y elegante (navegadores compatibles) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28);
}


/* ===================================================================
   Rojo corporativo actualizado (tono exacto indicado por el cliente)
   Se sobreescribe la variable de Bootstrap --bs-danger para que
   se propague automaticamente a botones, badges, bordes y textos
   rojos en todo el sitio.
   =================================================================== */
:root {
    --bs-danger: #D71A28 !important;
    --bs-danger-rgb: 215, 26, 40 !important;
}

/* Botones tipo filtro (categorias): esquinas rectas, borde fino,
   y relleno solido del rojo nuevo al pasar el mouse o estar activos */
.btn-outline-danger {
    border-radius: 2px;
    border-width: 1px;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger.active,
.btn-outline-danger:active {
    background-color: #D71A28 !important;
    border-color: #D71A28 !important;
    color: #fff !important;
}

.btn-danger {
    background-color: #D71A28 !important;
    border-color: #D71A28 !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #B8121F !important;
    border-color: #B8121F !important;
}

.text-danger {
    color: #D71A28 !important;
}

.bg-danger {
    background-color: #D71A28 !important;
}

.border-danger {
    border-color: #D71A28 !important;
}