@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root {
    --amarillo: #FFED00;
    --amarillo-hover: #f0d800;
    --azul: #002147;
    --gris-fondo: #f5f5f5;
    --gris-texto: #666666;
    --whatsapp: #25D366;
    --sombra-suave: 0 2px 8px rgba(0,0,0,0.06);
    --sombra-fuerte: 0 5px 15px rgba(0,0,0,0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--gris-fondo);
    color: #333;
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
}

header {
    background-color: white;
    padding: 10px 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-img { height: 40px; }

nav { display: flex; gap: 15px; align-items: center; }
nav a {
    color: var(--azul);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    padding: 8px 15px;
    border-radius: 5px;
    transition: all 0.3s;
}
nav a:hover { background-color: var(--gris-fondo); }
nav a.btn-destacado { background-color: var(--azul); color: white; }
nav a.btn-destacado:hover { background-color: #001a34; }

/* HERO */
.hero {
    background-color: var(--azul);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 5%;
    color: white;
    overflow: hidden;
}
.hero-content { max-width: 50%; z-index: 2; }
.hero h2 { font-size: 2.2em; font-weight: 800; line-height: 1.1; margin-bottom: 15px; }
.hero h2 span { color: var(--amarillo); }
.hero p { font-size: 1em; opacity: 0.9; margin-bottom: 25px; max-width: 500px; }
.hero-btn {
    display: inline-block;
    background-color: var(--amarillo);
    color: var(--azul);
    padding: 12px 25px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 30px;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(255, 237, 0, 0.3);
}
.hero-btn:hover { background-color: white; transform: translateY(-3px); }
.hero-img {
    max-width: 45%;
    z-index: 1;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* SECCIONES BASE */
.section-box { padding: 30px 5%; background-color: white; }
.section-box.gray { background-color: var(--gris-fondo); }
.section-title { color: var(--azul); font-size: 1.4em; font-weight: 700; margin-bottom: 15px; text-align: center; }

/* CATEGORÍAS Y MARCAS */
.categories-grid, .brands-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.category-item {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none; color: var(--azul); transition: transform 0.3s; width: 80px;
}
.category-item:hover { transform: translateY(-3px); }
.category-circle {
    width: 65px; height: 65px; border-radius: 50%;
    background-color: var(--gris-fondo); display: flex; align-items: center;
    justify-content: center; margin-bottom: 5px; border: 2px solid transparent;
    transition: border-color 0.3s; overflow: hidden;
}
.category-item:hover .category-circle { border-color: var(--amarillo); }
.category-circle img { width: 60%; height: 60%; object-fit: contain; }
.category-name { font-weight: 600; font-size: 0.7em; text-align: center; line-height: 1.2; }

.brand-logo { height: 30px; opacity: 0.5; filter: grayscale(100%); transition: all 0.3s; }
.brand-logo:hover { opacity: 1; filter: grayscale(0%); }

/* PRODUCTOS */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
}
.product-card {
    background: white; border-radius: 12px; box-shadow: var(--sombra-suave);
    overflow: hidden; transition: all 0.3s; border: 1px solid #eee;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-fuerte); border-color: var(--amarillo); }
.product-img-container { height: 160px; width: 100%; background-color: #f9f9f9; padding: 10px; cursor: pointer; position: relative; }
.product-img-container img { width: 100%; height: 100%; object-fit: contain; }
.product-info { padding: 10px; text-align: center; }
.product-name { font-weight: 600; color: var(--azul); font-size: 0.85em; margin-bottom: 8px; height: 35px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.btn-detalles {
    display: block; width: 100%; background-color: var(--azul); color: white;
    text-align: center; padding: 8px; text-decoration: none; font-weight: 700;
    border-radius: 20px; transition: all 0.3s; border: none; cursor: pointer; font-size: 0.8em;
}
.btn-detalles:hover { background-color: var(--amarillo); color: var(--azul); }

/* FILTROS DE BÚSQUEDA */
.filter-bar { margin-bottom: 20px; }
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-box { display: flex; align-items: center; flex: 1; min-width: 200px; background: white; border: 2px solid #e0e0e0; border-radius: 30px; padding: 0 15px; transition: border-color 0.3s; }
.search-box:focus-within { border-color: var(--azul); }
.search-box i { color: #999; margin-right: 10px; }
.search-box input { border: none; outline: none; padding: 10px 0; flex: 1; font-family: 'Poppins', sans-serif; font-size: 0.95em; background: transparent; }
.filter-select { padding: 10px 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 0.85em; background: white; cursor: pointer; min-width: 140px; }
.filter-select:focus { border-color: var(--azul); outline: none; }
.active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.filter-tag { background: var(--azul); color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.8em; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.filter-remove { color: white; text-decoration: none; font-size: 1.1em; font-weight: bold; line-height: 1; }
.filter-remove:hover { color: var(--amarillo); }
.filter-clear { color: var(--azul); text-decoration: none; font-size: 0.85em; font-weight: 600; margin-left: 5px; }
.filter-clear:hover { text-decoration: underline; }
.cat-active .category-circle { border-color: var(--amarillo) !important; }

/* MODAL */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 2000; display: none;
    align-items: flex-end; justify-content: center;
}
.modal-active { display: flex; }
.modal-content {
    background: white; border-radius: 20px 20px 0 0; max-width: 100%; width: 100%;
    display: flex; flex-direction: column; position: relative; max-height: 90vh;
}

.modal-close {
    position: absolute; top: 10px; right: 15px;
    font-size: 1.5em;
    color: var(--azul);
    background-color: rgba(255, 255, 255, 0.85);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer; z-index: 10; font-weight: bold; text-decoration: none;
    transition: all 0.3s;
}
.modal-close:hover {
    background-color: var(--amarillo);
    color: var(--azul);
}

.modal-gallery { background-color: var(--gris-fondo); padding: 15px; text-align: center; }
.main-modal-img { max-height: 250px; object-fit: contain; margin-bottom: 10px; }
.thumbnail-list { display: flex; gap: 10px; justify-content: center; }
.thumbnail-img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.thumbnail-img:hover, .thumbnail-img.active { border-color: var(--amarillo); }

.modal-details { padding: 15px; overflow-y: auto; flex-grow: 1; }
.modal-details h2 { color: var(--azul); margin-bottom: 5px; font-size: 1.2em; }
.modal-meta { color: var(--gris-texto); margin-bottom: 10px; font-size: 0.8em; }
.modal-meta span { display: inline-block; margin-right: 8px; font-weight: 600; color: #555; background: #eee; padding: 2px 8px; border-radius: 8px; }
.modal-price { color: #28a745; font-size: 1.8em; font-weight: 800; margin: 10px 0; }
.modal-store { background: var(--azul); color: white; padding: 8px 12px; border-radius: 8px; margin-bottom: 15px; font-size: 0.85em; }

.modal-buttons { display: flex; flex-direction: column; gap: 8px; padding-bottom: 15px; }
.btn-modal-wa {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; text-decoration: none; border-radius: 25px; font-weight: 700;
    font-size: 0.95em; transition: all 0.3s; width: 100%;
}
.btn-buy { background-color: var(--amarillo); color: var(--azul); }
.btn-buy:hover { background-color: white; border: 2px solid var(--azul); }
.btn-delivery { background-color: var(--whatsapp); color: white; }
.btn-delivery:hover { background-color: #1da851; }

/* BARRA INFERIOR APP */
.app-bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%; background: white;
    display: none; justify-content: space-around; align-items: center;
    padding: 5px 0;
    padding-bottom: calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #e0e0e0;
    z-index: 1500;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-decoration: none; color: #999999; font-size: 10px; font-weight: 500;
    padding: 2px 0; transition: color 0.2s;
}
.nav-item i { font-size: 20px; margin-bottom: 1px; transition: transform 0.2s; }
.nav-item.active { color: var(--azul); font-weight: 600; }
.nav-item.active i { transform: scale(1.1); }

/* FOOTER */
footer { background-color: var(--azul); color: white; padding: 40px 5% 20px 5%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.footer-col h4 { color: var(--amarillo); margin-bottom: 20px; }
.footer-col p, .footer-col a { color: rgba(255,255,255,0.7); text-decoration: none; display: block; margin-bottom: 10px; font-size: 0.9em; }
.footer-bottom { grid-column: 1 / -1; text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); font-size: 0.8em; }
.footer-bottom a { color: var(--amarillo); text-decoration: none; font-weight: 700; }
.footer-bottom a:hover { text-decoration: underline; }

/* FORMULARIOS */
.form-box { background: white; padding: 20px; border-radius: 15px; max-width: 600px; margin: 20px auto; box-shadow: var(--sombra-fuerte); }
.form-box h2 { color: var(--azul); margin-top: 0; font-size: 1.5em; }
.form-box input, .form-box textarea, .form-box select { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ccc; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 1em; }
.btn-primary { background-color: var(--azul); color: white; padding: 15px; border: none; border-radius: 30px; cursor: pointer; font-weight: bold; width: 100%; font-family: 'Poppins', sans-serif; font-size: 1em; }
.msg { padding: 10px; margin: 10px 0; border-radius: 5px; }
.success { background-color: #d4edda; color: #155724; }
.error { background-color: #f8d7da; color: #721c24; }

/* PRODUCTOS DESTACADOS */
.featured-section { margin-bottom: 20px; }
.featured-section .section-title { color: #b8860b; }
.featured-card { min-width: 200px; max-width: 200px; background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(184,134,11,0.15); border: 2px solid #FFD700; overflow: hidden; scroll-snap-align: start; transition: transform 0.3s; flex-shrink: 0; }
.featured-card:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(184,134,11,0.25); }
.featured-badge { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; padding: 4px 10px; font-size: 0.7em; font-weight: 800; display: inline-block; text-align: center; width: 100%; }
.featured-card .product-img-container { height: 140px; }
.featured-card .product-info { padding: 8px; text-align: center; }
.featured-card .product-name { font-size: 0.8em; height: 28px; }
.featured-card .btn-detalles { font-size: 0.75em; padding: 6px; }

.badge-nuevo { position: absolute; top: 8px; right: 8px; background: #dc3545; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.65em; font-weight: 800; z-index: 5; letter-spacing: 0.5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.btn-fav, .btn-share { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8em; background: rgba(255,255,255,0.9); box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: all 0.2s; backdrop-filter: blur(5px); }
.btn-fav:hover, .btn-share:hover { transform: scale(1.1); }
.btn-fav.active { color: #dc3545; }
.btn-fav:not(.active) { color: #999; }
.price-range { display: flex; gap: 8px; align-items: center; }
.price-range input { width: 80px; padding: 10px 8px; border: 2px solid #e0e0e0; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 0.85em; text-align: center; }
.price-range input:focus { border-color: var(--azul); outline: none; }
.price-range span { color: #999; font-size: 0.85em; font-weight: 600; }
.price-bs { color: #888; font-size: 0.7em; font-weight: 400; display: block; margin-top: 2px; }

/* PRODUCT DETAIL */
.product-detail-layout { display: flex; gap: 30px; max-width: 1100px; margin: 30px auto; padding: 0 4%; }
.product-gallery { flex: 0 0 55%; }
.product-gallery .main-image { width: 100%; max-height: 400px; object-fit: contain; border-radius: 12px; background: #f9f9f9; cursor: zoom-in; }
.product-gallery .thumb-strip { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 5px; }
.product-gallery .thumb-strip img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; }
.product-gallery .thumb-strip img:hover, .product-gallery .thumb-strip img.active { border-color: var(--amarillo); }
.product-info-detail { flex: 1; }
.product-info-detail h1 { color: var(--azul); font-size: 1.5em; margin-bottom: 10px; line-height: 1.3; }
.product-badges { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.product-badges .badge { padding: 4px 12px; border-radius: 20px; font-size: 0.75em; font-weight: 700; }
.badge-category { background: #e3f2fd; color: #0d47a1; }
.badge-brand { background: #f3e5f5; color: #6a1b9a; }
.badge-nuevo-detail { background: #dc3545; color: white; }
.badge-destacado { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; }
.product-price-detail { margin: 15px 0; }
.product-price-detail .price-usd { color: #28a745; font-size: 2em; font-weight: 800; }
.product-price-detail .price-bs { color: #888; font-size: 1em; margin-top: 4px; }
.product-stock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 0.85em; font-weight: 600; margin-bottom: 15px; }
.stock-available { background: #eafff0; color: #155724; }
.stock-out { background: #f8d7da; color: #721c24; }
.product-compat { background: #f0f4ff; padding: 10px 15px; border-radius: 8px; margin-bottom: 15px; font-size: 0.9em; border-left: 4px solid var(--azul); }
.product-description { color: #555; font-size: 0.95em; line-height: 1.6; margin-bottom: 20px; }
.vendor-card { display: flex; align-items: center; gap: 12px; background: #f9f9f9; padding: 12px; border-radius: 10px; margin-bottom: 20px; }
.vendor-card .vendor-logo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--amarillo); }
.vendor-card .vendor-logo-placeholder { width: 50px; height: 50px; border-radius: 50%; background: var(--azul); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.3em; font-weight: 800; }
.vendor-card .vendor-info h4 { margin: 0; color: var(--azul); font-size: 0.95em; }
.vendor-card .vendor-info p { margin: 2px 0 0 0; color: #888; font-size: 0.8em; }
.vendor-card .vendor-info a { color: var(--azul); font-size: 0.8em; }
.product-action-buttons { display: flex; flex-direction: column; gap: 8px; }
.btn-fav-detail { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 25px; border: 2px solid #dc3545; color: #dc3545; background: white; font-weight: 700; font-size: 0.9em; cursor: pointer; transition: all 0.2s; font-family: 'Poppins', sans-serif; }
.btn-fav-detail:hover, .btn-fav-detail.active { background: #dc3545; color: white; }
.btn-share-wa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 25px; background: #128C7E; color: white; font-weight: 700; font-size: 0.9em; text-decoration: none; transition: all 0.2s; }
.btn-share-wa:hover { background: #075E54; }

.related-section { max-width: 1100px; margin: 30px auto; padding: 0 4%; }
.related-scroll { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.related-scroll::-webkit-scrollbar { display: none; }
.related-card { min-width: 160px; max-width: 160px; flex-shrink: 0; background: white; border-radius: 10px; box-shadow: var(--sombra-suave); overflow: hidden; border: 1px solid #eee; transition: transform 0.2s; }
.related-card:hover { transform: translateY(-3px); }
.related-card img { width: 100%; height: 120px; object-fit: contain; background: #f9f9f9; }
.related-card .related-info { padding: 8px; text-align: center; }
.related-card .related-name { font-size: 0.75em; font-weight: 600; color: var(--azul); height: 28px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.related-card .related-price { color: #28a745; font-weight: 800; font-size: 0.9em; margin-top: 4px; }

/* STATS CHART */
.stats-chart { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); margin-bottom: 20px; }
.stats-chart h4 { margin: 0 0 15px 0; color: #001a34; font-size: 1em; }
.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 0 10px; border-bottom: 2px solid #eee; }
.chart-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.chart-day-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.chart-bar { width: 14px; border-radius: 3px 3px 0 0; transition: height 0.3s; min-height: 2px; }
.chart-bar.views { background: #001a34; }
.chart-bar.clicks { background: #25D366; }
.chart-label { font-size: 0.65em; color: #999; margin-top: 5px; font-weight: 600; }
.chart-legend { display: flex; gap: 15px; margin-top: 10px; justify-content: center; }
.chart-legend span { display: flex; align-items: center; gap: 5px; font-size: 0.75em; color: #666; }
.chart-legend .dot { width: 10px; height: 10px; border-radius: 3px; }
.chart-legend .dot.views { background: #001a34; }
.chart-legend .dot.clicks { background: #25D366; }

/* ADMIN METRICS */
.admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 25px; }
.admin-metric { background: #001a34; color: white; padding: 20px; border-radius: 12px; display: flex; align-items: center; gap: 15px; }
.admin-metric .metric-icon { font-size: 1.5em; color: #FFED00; }
.admin-metric .metric-info h2 { margin: 0; font-size: 1.8em; }
.admin-metric .metric-info p { margin: 0; opacity: 0.7; font-size: 0.8em; }

.stock-badge { font-size: 0.7em; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-top: 3px; display: inline-block; }
.stock-ok { background: #eafff0; color: #155724; }
.stock-zero { background: #f8d7da; color: #721c24; }
.featured-badge-sm { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; padding: 2px 6px; border-radius: 4px; font-size: 0.65em; font-weight: 800; }

/* IMAGE ZOOM */
.zoom-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 3000; display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.zoom-overlay.active { display: flex; }
.zoom-overlay img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 8px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero { flex-direction: column; text-align: center; padding: 25px 4% 20px 4%; }
    .hero-content { max-width: 100%; }
    .hero h2 { font-size: 1.6em; margin-bottom: 10px; }
    .hero p { font-size: 0.85em; margin-bottom: 15px; }
    .hero-btn { padding: 10px 20px; font-size: 0.9em; }
    .hero-img { max-width: 65%; margin-top: 15px; }

    header nav { display: none; }
    .app-bottom-nav { display: flex; }

    .filter-row { flex-direction: column; }
    .search-box { min-width: 100%; }
    .filter-select { width: 100%; }

    .section-box { padding: 20px 4%; }
    .section-title { font-size: 1.1em; margin-bottom: 12px; text-align: left; }

    .categories-grid, .brands-grid {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px;
        scrollbar-width: none;
    }
    .categories-grid::-webkit-scrollbar, .brands-grid::-webkit-scrollbar {
        display: none;
    }

    .category-item { flex: 0 0 auto; width: 75px; }
    .category-circle { width: 58px; height: 58px; margin-bottom: 4px; }
    .category-name { font-size: 0.7em; }
    .brand-logo { flex: 0 0 auto; height: 35px; opacity: 0.7; filter: grayscale(100%); margin-right: 15px; }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card { border-radius: 10px; }
    .product-img-container { height: 130px; padding: 8px; }
    .product-info { padding: 8px; }
    .product-name { font-size: 0.8em; height: 32px; margin-bottom: 6px; }
    .btn-detalles { padding: 6px; font-size: 0.75em; border-radius: 15px; }

    .modal-content { max-height: 95vh; border-radius: 25px 25px 0 0; }
    .modal-gallery { padding: 15px 10px; }
    .main-modal-img { max-height: 220px; }
    .thumbnail-img { width: 45px; height: 45px; border-radius: 6px; }
    .modal-details { padding: 12px 15px; }
    .modal-details h2 { font-size: 1.1em; }
    .modal-meta { font-size: 0.75em; margin-bottom: 8px; }
    .modal-price { font-size: 1.5em; margin: 8px 0; }
    .modal-store { padding: 6px 10px; font-size: 0.8em; margin-bottom: 12px; }
    .modal-buttons { gap: 6px; padding-bottom: 10px; }
    .btn-modal-wa { padding: 10px; font-size: 0.9em; border-radius: 20px; }

    footer { padding: 30px 4% 15px; gap: 20px; }
    footer h4 { font-size: 1em; }
    footer p, footer a { font-size: 0.8em; margin-bottom: 5px; }

    .product-detail-layout { flex-direction: column; gap: 20px; padding: 0 4%; }
    .product-gallery { flex: none; }
    .product-gallery .main-image { max-height: 280px; }
    .product-info-detail h1 { font-size: 1.2em; }
    .product-price-detail .price-usd { font-size: 1.5em; }
    .product-action-buttons { gap: 6px; }
    .related-card { min-width: 140px; max-width: 140px; }
    .featured-card { min-width: 170px; max-width: 170px; }
    .featured-card .product-img-container { height: 120px; }
    .admin-metrics { grid-template-columns: repeat(2, 1fr); }
    .price-range { flex-direction: column; gap: 4px; }
    .price-range input { width: 100%; }
    .chart-bars { gap: 4px; height: 100px; }
    .chart-bar { width: 10px; }
}

@media (max-width: 380px) {
    .hero h2 { font-size: 1.4em; }
    .hero-btn { font-size: 0.85em; padding: 9px 18px; }
    .category-circle { width: 50px; height: 50px; }
    .category-item { width: 65px; }
    .products-grid { gap: 8px; }
    .product-img-container { height: 110px; }
    .product-name { font-size: 0.75em; height: 28px; }
    .btn-detalles { font-size: 0.7em; }
    .product-gallery .thumb-strip img { width: 45px; height: 45px; }
    .featured-card { min-width: 150px; max-width: 150px; }
    .admin-metrics { grid-template-columns: 1fr; }
}