/* =========================================================================
   DECLARACIÓN DE FUENTES CORPORATIVAS
   ========================================================================= */

@font-face {
    font-family: 'Google Sans Text';
    src: url('fonts/GoogleSansText-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Google Sans Text';
    src: url('fonts/GoogleSansText-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Google Sans Text';
    src: url('fonts/GoogleSansText-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* =========================================================================
   ESTILOS GLOBALES Y MARGEN INFERIOR PARA MENÚ MÓVIL
   ========================================================================= */

body, input, textarea, select, button, h1, h2, h3, h4, h5, h6, p, span, a, li, div { 
    font-family: 'Google Sans Text', sans-serif !important; 
}

body {
    background-color: #F2F4F7; 
    color: #3D3D3D;
    padding-bottom: 60px; /* Margen indispensable para que la barra móvil no tape el contenido */
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0px;
    }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================================================
   HERO BANNER DESKTOP
   ========================================================================= */

.desktop-hero-container {
    position: relative;
    background-color: #1a1528;
    background-image: linear-gradient(180deg, rgba(26,21,40,0.1) 0%, rgba(26,21,40,0.95) 85%, #1a1528 100%), url('images/banner_desktop.jpg');
    background-size: cover;
    background-position: center;
    min-height: 420px;
}

/* =========================================================================
   TARJETAS DE PRODUCTO
   ========================================================================= */

.product-card-container {
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 24px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card-container:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f8f9fa;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: hidden;
}

/* Cintilla / Listón Dinámico en esquina inferior izquierda de la imagen */
.tag-mas-vendido-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 8px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* =========================================================================
   AJUSTES ESTILO MERCADO LIBRE (TEXTOS, PRECIOS Y ETIQUETAS)
   ========================================================================= */

/* 1. Nombre del producto sin negrita */
.product-card-container h4, 
#detailNombre {
    font-weight: 400 !important;
    font-size: 13px !important;
    color: #202329 !important;
}

/* 2. Precio sin negrita y en negro puro */
.product-card-container .text-nd-blue,
#detailPrecio {
    color: #000000 !important;
    font-weight: 400 !important;
}

/* 3. Etiquetas con recuadro Descuento / Promoción */
.product-card-container span.inline-block {
    font-weight: 400 !important;
    color: #3483FA !important;
    font-size: 10.33px !important;
    background-color: #EFF6FF !important;
    border-radius: 0.25rem !important;
    padding: 0.125rem 0.5rem !important;
}

/* Texto superior "Sin cambios de precio reciente" */
.product-card-container p.text-\[9px\].text-gray-400,
.product-card-container p.text-gray-400 {
    font-weight: 400 !important;
    font-size: 10.33px !important;
}

/* 4. "Envío o Recolección Estándar" / "Envío Gratis" */
.product-card-container p.text-green-600 {
    font-weight: 400 !important;
    font-size: 11.66px !important;
}