CSS
/* =========================================
   1. VARIABLES GLOBALES (COLORES)
   ========================================= */
:root {
    --orange: #fd5a01;
    --blue: #102A43;
    --grey: #F2F6F9;
    --black: #1F2933;
}

/* =========================================
   2. ESTILOS GLOBALES Y TIPOGRAFÍA
   ========================================= */
* { 
    font-family: 'Jost', sans-serif !important;
    text-align: left !important; 
}

/* Títulos (H1 a H6) */
h1, h2, h3, h4, h5, h6 {
    color: var(--blue) !important; 
    margin-top: 0 !important; 
    line-height: 1.2 !important; 
}

/* Grosores específicos para niveles de título agrupados */
h1, h2 { font-weight: 700 !important; padding-bottom: 0px !important;}
h3, h4 { font-weight: 600 !important; }
h5, h6 { font-weight: 500 !important; }

/* Párrafos de texto (P) */
p { 
    color: var(--black) !important; 
    line-height: 1.6 !important; 
    margin-bottom: 20px !important; 
    font-weight: 400 !important; 
}

.pb-3, .py-3 {
    padding-bottom: 0px !important;
}

/* =========================================
   3. BARRA DE NAVEGACIÓN (NAVBAR)
   ========================================= */

/* Forzar barra sólida con color hexadecimal directo para evitar fallos de variables */
nav.navbar, 
nav.navbar.sticky-top, 
nav.navbar.sticky-header, 
.navbar.fixed-top, 
header {
    background-color: #F2F6F9 !important;
    background: #F2F6F9 !important; 
    background-image: none !important; 
    opacity: 1 !important;
    z-index: 9999 !important; 
}

/* Color del texto del menú a azul */
.navbar-nav .nav-link,
.navbar-nav .nav-link span {
    color: var(--blue) !important; 
    font-weight: 700 !important; 
    text-transform: uppercase;
}

/* Líneas decorativas debajo/sobre los enlaces del menú */
.navbar-nav .nav-link::before { 
    background-color: var(--orange) !important; 
}
.navbar-nav .nav-link::after { 
    background-color: white !important; 
}

/* =========================================
   4. CAJAS DE PRODUCTOS (PRODUCT BOX)
   ========================================= */
/* Contenedor principal del producto */
.product-box {
    height: 450px !important; 
    overflow: hidden !important; 
    margin-bottom: 20px !important; 
}

.card-body {
    text-align: left !important;
}

.product-box .card .card-title {
    color: var(--blue) !important;
}

/* Truncar descripción larga a 4 líneas con puntos suspensivos */
.product-box p {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Miniaturas: Forzar formato cuadrado 1:1 (Técnica de padding-bottom) */
.product-box .card .thumbnail {
    position: relative !important;
    width: 100% !important;
    height: 0 !important; 
    padding-bottom: 100% !important; 
    overflow: hidden !important;
}

/* Imagen dentro de la miniatura cuadrada */
.product-box .card .thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important; 
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
}

/* Posición del contenedor del botón (View Details) sobre la imagen */
.product-box .card.hover-box-shadow .card-footer {
    top: auto !important;
    bottom: 15% !important; /* Ubicado en la parte inferior de la foto */
}

/* =========================================
   5. BOTONES Y UTILIDADES
   ========================================= */
/* Estilos generales para botones */
.btn {
    background-color: var(--orange) !important;
    border: 1px solid #ffffff !important; 
    border-radius: 5px !important;
}

/* Estilo específico para el botón naranja dentro de la caja de producto */
.product-box .card.hover-box-shadow .card-footer .btn {
    border: 2px solid #ffffff !important; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3) !important; 
}

/* Ocultar botón "skip" nativo de la plantilla para limpiar la cabecera */
a.btn.btn.btn-secondary.font-weight-bold.skip-link {
    display: none !important;
}