/* SWOVEX - ESTILO DE CATÁLOGO (Diseño Restaurado - Sin bordes blancos) */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

/* Fondo plomo para que las tarjetas resalten */
body { background: #6a6c6e; color: #1e293b; min-height: 100vh; }

/* --- HEADER (TAL CUAL LO TENÍAS) --- */
.cat-header { 
    position: sticky; top: 0; z-index: 1000; 
    background: linear-gradient(90deg, #003366 0%, #00BFFF 100%); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}
.cat-top { max-width: 600px; margin: 0 auto; padding: 6px 16px; }

.cat-search-container { 
    display: flex; align-items: center; justify-content: center; gap: 15px; height: 40px; 
}

.cat-nav-btn { background: none; border: none; cursor: pointer; color: #00f2ff; font-size: 1.4rem; }

/* --- BUSCADOR --- */
.cat-search-wrapper { 
    flex: 1; 
    display: flex; align-items: center; gap: 10px; padding: 0 15px; 
    height: 36px; background: rgba(255, 255, 255, 0.88); 
    border-radius: 20px; border: 1px solid #fff;
    box-shadow: inset 0 0 12px rgba(0, 242, 255, 0.35);
}
.cat-search-wrapper input { width: 100%; border: none; outline: none; background: transparent; font-weight: 600; }

/* --- GRID --- */
.cat-main { max-width: 600px; margin: 0 auto; padding: 20px 16px; }
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }

/* --- TARJETA DE PRODUCTO --- */
.card-wrapper { display: flex; flex-direction: column; gap: 15px; }

.card-producto {
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Borde eliminado para quitar la línea blanca */
    border: none; 
    border-radius: 20px;
    overflow: hidden; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.card-img {
    width: 100%;
    display: block;
    aspect-ratio: 16/9; 
    object-fit: cover;
}

/* --- BOTÓN LIBRE --- */
.btn-ver-afuera {
    width: 100%;
    background: #023b69;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(30, 144, 255, 0.3);
    transition: all 0.2s;
}

.btn-ver-afuera:hover { background: #067bae; transform: translateY(-2px); }

.hidden { display: none !important; }