/* ===================================================================
   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: #D9002C !important;
    --bs-danger-rgb: 217, 0, 44 !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: #D9002C !important;
    border-color: #D9002C !important;
    color: #fff !important;
}

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

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

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

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

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


/* ===================================================================
   Cobertura adicional: rojos escritos directamente en estilos en
   linea (style="...") o SVG a lo largo de distintas paginas del
   sitio, detectados manualmente. Se unifican al mismo rojo exacto
   #D9002C indicado por el cliente (logo corporativo).
   =================================================================== */

/* Boton "Anadir al carrito" (pagina de producto y variantes) */
/* Iconos SVG con stroke/fill rojo clasico de Bootstrap */
[stroke="#dc3545" i] {
    stroke: #D9002C !important;
}
[fill="#dc3545" i] {
    fill: #D9002C !important;
}

/* Textos con color rojo puro escrito directo (style="color: red;") */
[style*="color: red" i],
[style*="color:red" i] {
    color: #D9002C !important;
}


/* Eliminar azules del tema: negro/gris neutro + rojo corporativo en toda la web */
a { color: #2c2c2e; }
a:hover, a:focus { color: #D9002C; }
.text-gray-500 { color: #8a8a90; }
.text-gray-600 { color: #6b6b70; }
.text-gray-700 { color: #4a4a4f; }
.text-gray-800 { color: #2c2c2e; }
.text-gray-900 { color: #1a1a1c; }


/* Metodo de pago (checkout) */
.payment-method-list { display:flex; flex-direction:column; gap:10px; }
.payment-method-option { display:flex; align-items:center; gap:12px; border:1.5px solid #e3e3e8; border-radius:14px; padding:14px 16px; cursor:pointer; transition:border-color .15s, background .15s; position:relative; }
.payment-method-option:hover { border-color:#D9002C; background:#fff8f9; }
.payment-method-radio { position:absolute; opacity:0; pointer-events:none; }
.payment-method-icon { flex-shrink:0; width:26px; height:26px; color:#4a4a4f; display:flex; align-items:center; justify-content:center; }
.payment-method-label { font-weight:600; font-size:.92rem; color:#2c2c2e; flex-grow:1; }
.payment-method-badge { font-size:.68rem; background:#f4f4f6; color:#6b6b70; border-radius:999px; padding:3px 10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-right:8px; }
.payment-method-check { flex-shrink:0; width:20px; height:20px; border:2px solid #d0d0d6; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s; }
.payment-method-check svg { opacity:0; width:11px; height:11px; transition:opacity .15s; }
.payment-method-option.is-selected { border-color:#D9002C; background:#fff5f6; }
.payment-method-option.is-selected .payment-method-check { border-color:#D9002C; background:#D9002C; }
.payment-method-option.is-selected .payment-method-check svg { opacity:1; }
.payment-method-option.is-selected .payment-method-label { color:#D9002C; }
.payment-method-option.is-selected .payment-method-icon { color:#D9002C; }
.payment-method-disabled { opacity:.55; cursor:not-allowed; }
.payment-method-disabled:hover { border-color:#e3e3e8; background:transparent; }

.bank-btn-grid { display:flex; flex-wrap:wrap; gap:8px; }
.bank-btn { border:1.5px solid #e3e3e8; background:#fff; color:#2c2c2e; font-weight:600; font-size:.85rem; padding:7px 16px 7px 7px; border-radius:999px; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:8px; }
.bank-btn:hover { border-color:var(--bank-color, #D9002C); color:var(--bank-color, #D9002C); }
.bank-btn.active { background:var(--bank-color, #D9002C); border-color:var(--bank-color, #D9002C); color:#fff; }
.bank-btn.active .bank-btn-icon { background:#fff; color:var(--bank-color, #D9002C); }
.bank-btn-icon { width:24px; height:24px; border-radius:50%; background:var(--bank-color, #D9002C); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; flex-shrink:0; transition:all .15s; }

.bank-detail-card { border:1.5px solid color-mix(in srgb, var(--bank-color, #D9002C) 30%, #fff); background:color-mix(in srgb, var(--bank-color, #D9002C) 4%, #fff); border-radius:14px; padding:16px 18px; margin-top:10px; }
.bank-detail-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed #f0d5da; font-size:.88rem; }
.bank-detail-row:last-of-type { border-bottom:none; }
.bank-detail-row span { color:#6b6b70; }
.bank-detail-row strong { color:#2c2c2e; text-align:right; }
.bank-detail-note { margin-top:8px; font-size:.8rem; color:#6b6b70; }