z/* ======================== RESET GLOBAL ======================== */
        *, *::before, *::after {
          box-sizing: border-box;
        }
        
        html, body {
          max-width: 100%;
          overflow-x: hidden;
        }
        
        body {
          width: 100vw;
        }
/* ======================== GENERAL ======================== */
        @font-face {
          font-family: 'Gothic';
          src: url('/assets/fonts/GOTHIC.TTF') format('truetype');
        }
        body {
          font-family: 'Century Gothic';
          color: #F4F2A5;
          margin: 0;
          padding: 0;
          overflow-x: hidden;
          width: 100vw;
}/* ======================== CONTENEDOR SUPERIOR ======================== */    
        .top-bar {
            background-color: #F4F2A5;
            color: #000;
            text-align: center;
            padding: 8px 0;
            font-size: 1rem;
            font-weight: bold;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 998;
            font-family: 'Gothic';
        }
/* ======================== CONTENEDOR INFERIOR ======================== */     
    .contenedor-secundario {
        margin-top: 36px;
        display: grid; /* antes flex */
        grid-template-columns: 1fr auto 1fr; /* izq | logo | der */
        align-items: center;
        padding: 10px 20px;
        background-color: #000;
        position: relative;
    }
    
    .columna {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .logo {
        grid-column: 2; /* celda central del grid */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .logo img {
        max-height: 50px; /* Ajusta el tamaño del logo */
    }
    
    .logo a:hover img {
        transform: scale(1.1);
        transition: transform 0.3s ease-in-out;
    }
    
    .columna-rastreo {
        grid-column: 3; /* lado derecho */
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 40px;
    }
    
    /* Enlace de rastreo */
    .rastrea-envio {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px; 
        height: 100%; 
        font-family: 'Gothic';
        font-size: 16px;
        font-weight: bold;
        color: #F4F2A5;           /* dorado GAIA */
        text-decoration: none;   /* sin subrayado */
    }
    
    .rastrea-envio:hover {
        transform: scale(1.1);
        transition: transform 0.3s ease-in-out;
        color: #ffffff;          /* cambio suave en hover */
    }
    
    .rastrea-envio img {
        max-height: 20px;
    }
    
    .cart-btn {
        position: relative;
        font-size: 24px;
        color: #F4F2A5;
        background: none;
        border: none;
        cursor: pointer;
    }
    
    .cart-notification {
        position: absolute;
        top: -8px;
        right: -8px;
        background-color: red;
        color: white;
        font-size: 11px;
        font-weight: bold;
        border-radius: 50%;
        padding: 2px 6px;
        line-height: 1;
        min-width: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        animation: pulse 0.3s ease;
        border: 1px solid #F4F2A5; /* opcional: borde dorado GAIA */
    }
    
    /* Animación de pulso */
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.25); }
        100% { transform: scale(1); }
    }