/* ============================================================
   MallX — Sistema de diseño "Lujo nocturno"
   Tokens centralizados + estilos base. Vanilla CSS, sin frameworks.
   Para reajustar la marca, tocá solo las variables de :root.
   ============================================================ */

:root {
    /* --- Color --- */
    --bg:         #0B0B0B;
    --surface:    #141414;
    --surface-2:  #1C1C1C;
    --gold:       #D4AF37;
    --gold-soft:  #E8C766;
    --text:       #FFFFFF;
    --text-muted: #9A9A9A;
    --border:     rgba(212, 175, 55, .18);

    /* --- Tipografía --- */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

    /* --- Espaciado (escala generosa: el lujo es el vacío) --- */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 48px;
    --sp-5: 96px;

    /* --- Otros --- */
    --radius: 14px;
    --transition: 400ms cubic-bezier(.2, .7, .2, 1);
    --maxw: 1200px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Fade suave al cargar la página (sensación premium) */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in 500ms ease-out both; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Títulos --- */
h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 var(--sp-2);
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.4rem; }

a { color: var(--text); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-soft); }

p { color: var(--text-muted); }

/* --- Etiquetas / categorías en mayúsculas finas --- */
.label, .category {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 500;
    color: var(--gold);
}

/* --- Marca --- */
.brand-mark {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .02em;
}
.brand-mark.small { font-size: 1.1rem; }
.brand-x { color: var(--gold); }

/* Logo en imagen (los archivos son cuadrados 1024x1024) */
.brand-logo { display: block; width: auto; }
.brand-logo-main { height: 72px; }
.brand-logo-footer { height: 96px; margin: 0 auto var(--sp-1); }
.auth-logo .brand-logo-main { height: 130px; margin: 0 auto; }
@media (max-width: 560px) {
    .brand-logo-main { height: 56px; }
    .auth-logo .brand-logo-main { height: 100px; }
}

/* Badge del nav (cantidad de favoritos) */
.nav-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
}

/* Selector tipo de cuenta (comprador / negocio) en el registro */
.acct-toggle {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    margin: 0 0 var(--sp-3);
}
.acct-toggle a {
    flex: 1;
    text-align: center;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: .9rem;
    color: var(--text-muted);
}
.acct-toggle a.is-active { background: var(--gold); color: var(--bg); font-weight: 600; }

/* Botón de favorito (corazón) */
.fav-form { margin: 0; }
.fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(20,20,20,.6);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}
.fav-btn .heart { font-size: 1.4rem; line-height: 1; }
.fav-btn:hover { border-color: var(--gold); color: var(--gold-soft); }
.fav-btn.is-on { color: var(--gold); border-color: var(--gold); }

.ident-fav { margin-left: auto; }
.store-hero .ident { align-items: center; }
.pd-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }

/* Selector de idioma */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--sp-1);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
}
.lang-switch a {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding: 4px 9px;
    border-radius: 999px;
    line-height: 1;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a.is-active { background: var(--gold); color: var(--bg); }

/* --- Header --- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    max-width: var(--maxw);
    margin: 0 auto;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 11, 11, .72);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.site-nav { display: flex; gap: var(--sp-3); align-items: center; }
.site-nav a { font-size: .95rem; }

/* --- Botones --- */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--gold);
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn:hover {
    background: var(--gold);
    color: var(--bg);
    box-shadow: 0 10px 30px -10px rgba(212, 175, 55, .5);
}

/* --- Main / layout --- */
.site-main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--sp-4);
    min-height: 60vh;
}

/* --- Hero de bienvenida --- */
.hero { text-align: center; padding: var(--sp-5) 0; }
.hero .label { margin-bottom: var(--sp-3); }
.hero p { font-size: 1.15rem; max-width: 540px; margin: 0 auto var(--sp-4); }

/* --- Flash --- */
.flash {
    max-width: var(--maxw);
    margin: var(--sp-2) auto 0;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: .95rem;
}
.flash-success { border-color: rgba(120, 200, 120, .4); color: #bfe6bf; }
.flash-error   { border-color: rgba(220, 120, 120, .4); color: #f0bcbc; }
.flash-info    { border-color: var(--border); color: var(--text-muted); }

/* --- Footer --- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: var(--sp-4);
    text-align: center;
    color: var(--text-muted);
    max-width: var(--maxw);
    margin: var(--sp-5) auto 0;
}
.site-footer p { font-size: .85rem; margin-top: var(--sp-1); }
.site-footer .credit { font-size: .8rem; opacity: .85; }
.site-footer .credit a { color: var(--gold); }
.site-footer .credit a:hover { color: var(--gold-soft); }

/* --- Tarjeta de tienda ("local / vidriera") — se usará en el mall --- */
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-3);
}
.store-card {
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.store-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: 0 18px 50px -20px rgba(212, 175, 55, .35);
}
.store-card .banner { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.store-card .banner img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.store-card:hover .banner img { transform: scale(1.04); }
.store-card .body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.store-card h3 { margin: var(--sp-1) 0 6px; }

/* --- Fondo de login/registro: interior del mall (caminar adentro) --- */
.auth-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url('/img/luxury-atrium.png') center center / cover no-repeat;
    transform: scale(1.18);
    transform-origin: 60% 50%;
    /* avance lento hacia el interior, como caminando por el pasillo */
    animation: atrium-walk 38s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes atrium-walk {
    0%   { transform: scale(1.18) translate3d(0, 0, 0); }
    100% { transform: scale(1.30) translate3d(-3%, -1%, 0); }
}
.auth-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(11,11,11,.72) 0%, rgba(11,11,11,.62) 45%, rgba(11,11,11,.85) 100%),
        radial-gradient(90% 80% at 50% 45%, transparent 30%, rgba(11,11,11,.6) 100%);
}
body.auth-bg { background: transparent; }
body.auth-bg .site-header { background: rgba(11, 11, 11, .35); }
/* La tarjeta del formulario, más opaca y con desenfoque para destacar del fondo */
body.auth-bg .auth-wrap {
    background: rgba(20, 20, 20, .82);
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
@media (prefers-reduced-motion: reduce) {
    .auth-bg-layer { animation: none; transform: scale(1.18); }
}

/* --- Fondo interior del mall (mismas secciones públicas) --- */
.mall-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url('/img/luxury-atrium.png') center center / cover no-repeat;
    transform: scale(1.12);
}
.mall-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* Bien oscuro: el mall tiene mucho contenido y debe leerse perfecto */
    background:
        linear-gradient(to bottom, rgba(11,11,11,.88) 0%, rgba(11,11,11,.93) 100%);
}
body.mall-bg { background: transparent; }
body.mall-bg .site-header { background: rgba(11, 11, 11, .55); }

/* --- Formularios de autenticación (mobile-first, cómodos al tacto) --- */
.auth-wrap {
    max-width: 480px;
    margin: var(--sp-3) auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3);
}
.auth-logo {
    display: block;
    text-align: center;
    margin-bottom: var(--sp-1);
}
.auth-logo .brand-logo { height: 50px; width: auto; }
.auth-logo .brand-mark { font-size: 1.8rem; }
.auth-wrap h1 { font-size: clamp(1.5rem, 5vw, 1.95rem); text-align: center; margin-bottom: 4px; }
.auth-wrap .intro { text-align: center; margin-bottom: var(--sp-2); font-size: .9rem; }
/* Campos más compactos SOLO en auth (no toca formularios de admin/tienda) */
.auth-wrap .form-field { margin-bottom: var(--sp-1); }
.auth-wrap .form-field label { margin-bottom: 4px; }
.auth-wrap .form-field input,
.auth-wrap .form-field select { padding: 11px 14px; }

.form-field { margin-bottom: var(--sp-2); }
.form-field label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;            /* alto cómodo para el dedo */
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;               /* 16px evita el zoom automático en iOS */
    transition: border-color var(--transition);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--gold);
}
.form-field select { appearance: none; cursor: pointer; }
.form-field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.form-field .help { display: block; margin-top: 6px; font-size: .78rem; color: var(--text-muted); }
.form-field input[type="file"] { padding: 10px; font-size: .9rem; }
.form-field input[type="checkbox"] { width: auto; margin-right: 8px; vertical-align: middle; }

/* Dos columnas en pantallas anchas, apiladas en móvil */
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 560px) {
    .form-row { grid-template-columns: 1fr 1fr; }
}

/* Botón de ancho completo para formularios */
.btn-block { display: block; width: 100%; text-align: center; margin-top: var(--sp-2); }

/* Errores de validación */
.form-errors {
    border: 1px solid rgba(220, 120, 120, .4);
    background: rgba(220, 120, 120, .08);
    color: #f0bcbc;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: var(--sp-2);
    font-size: .9rem;
}
.form-errors ul { margin: 0; padding-left: 18px; }

/* Enlace alternativo bajo el formulario (ir a login / registro) */
.auth-alt {
    text-align: center;
    margin-top: var(--sp-3);
    font-size: .9rem;
    color: var(--text-muted);
}
.auth-alt a { color: var(--gold); }

/* --- Panel del dashboard / tienda --- */
.panel {
    max-width: 760px;
    margin: 0 auto;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.panel-head h1 { margin: 0; }

/* Botones secundarios y de tamaño chico */
.btn-sm { padding: 9px 18px; font-size: .85rem; }
.btn-danger { border-color: rgba(220, 120, 120, .6); color: #f0bcbc; }
.btn-danger:hover { background: #d87878; color: var(--bg); box-shadow: none; }
.btn-ghost { border-color: var(--border); color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); box-shadow: none; }

/* Accesos del dashboard */
.dash-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Saludo del dashboard: sobrio, no invasivo */
.dash-greeting .label { display: block; margin-bottom: 4px; }
.dash-greeting .dash-email {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    color: var(--text);
    margin: 0;
    word-break: break-word;
}

/* Reporte de conteos del admin — barra horizontal tipo panel de control */
.report-cards {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: var(--sp-3);
}
.report-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
    border-left: 1px solid var(--border);
}
.report-card:first-child { border-left: 0; }
.report-card .n { font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; color: var(--text); }
.report-card .n.badge-pending  { color: var(--gold-soft); border: 0; padding: 0; background: none; }
.report-card .n.badge-approved { color: #bfe6bf; border: 0; padding: 0; background: none; }
.report-card .n.badge-rejected { color: #f0bcbc; border: 0; padding: 0; background: none; }
.report-card .l { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 560px) {
    .report-card { padding: var(--sp-2) 6px; }
    .report-card .n { font-size: 1.6rem; }
    .report-card .l { font-size: .58rem; }
}

/* Selector de país desplegable (elegante, poco invasivo) */
.country-select-wrap {
    max-width: 360px;
    margin: var(--sp-3) auto 0;
    position: relative;
}
.country-select-wrap::after {
    content: '▾';
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    pointer-events: none;
    font-size: 1.1rem;
}
.country-select {
    width: 100%;
    appearance: none;
    background: rgba(20, 20, 20, .85);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    padding: 16px 48px 16px 24px;
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.country-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }
.country-select option { background: #141414; color: var(--text); }

/* Selector de país compacto en la barra del mall */
.mall-country-switch { position: relative; display: inline-block; }
.mall-country-switch::after {
    content: '▾'; position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%); color: var(--gold); pointer-events: none; font-size: .9rem;
}
.mall-country-switch select {
    appearance: none;
    background: rgba(20,20,20,.6);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: .9rem;
    padding: 9px 34px 9px 16px;
    cursor: pointer;
}
.mall-country-switch select:focus { outline: none; border-color: var(--gold); }

/* Filtros del admin */
.admin-filters .filter-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-1);
}
.admin-filters .filter-count { color: var(--text-muted); font-size: .85rem; margin-left: auto; }
.admin-filters input[type="search"], .admin-filters select {
    width: 100%; padding: 12px 14px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; color: var(--text);
    font-family: var(--font-sans); font-size: 16px;
}

/* Acciones del admin en línea (cada botón es un form) */
.product-item .actions { flex-wrap: wrap; }
.product-item .actions form { margin: 0; }

/* Etiqueta de estado */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.badge-pending  { border-color: rgba(232, 199, 102, .5); color: var(--gold-soft); }
.badge-approved { border-color: rgba(120, 200, 120, .5); color: #bfe6bf; }
.badge-rejected { border-color: rgba(220, 120, 120, .5); color: #f0bcbc; }
.badge-featured { border-color: var(--gold); color: var(--bg); background: var(--gold); }

/* Estrella de destacado sobre tarjetas del mall */
.store-card { position: relative; }
.featured-star {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    background: var(--gold);
    color: var(--bg);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 6px 18px -6px rgba(212,175,55,.7);
}
/* Marco dorado sutil para la tarjeta destacada */
.store-card.is-featured { border-color: rgba(212,175,55,.45); }

/* Cinta de destacado en producto público */
.product-card { position: relative; }
.product-card .feat-tag {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
    background: var(--gold);
    color: var(--bg);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
}

/* Miniaturas e imagen actual */
.thumb {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--surface-2);
    flex-shrink: 0;
}
.img-current {
    max-width: 160px;
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: var(--sp-1);
    display: block;
}

/* Tarjeta de formulario dentro del panel */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.card h2 { font-size: 1.5rem; }

/* Lista de productos */
.product-list { list-style: none; margin: 0; padding: 0; }
.product-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: var(--sp-2);
}
.product-item .info { flex: 1; min-width: 0; }
.product-item .info .name { display: block; color: var(--text); }
.product-item .price { color: var(--gold); font-weight: 500; }
.product-item .actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.product-item.is-hidden { opacity: .55; }
@media (max-width: 480px) {
    .product-item { flex-wrap: wrap; }
    .product-item .actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   MALL — vista pública
   ============================================================ */

/* ============================================================
   LANDING — la toma aérea del mall como FONDO de toda la página
   ============================================================ */

/* Capa de imagen a pantalla completa, fija detrás de todo el contenido.
   La cámara "se aleja" lentamente, como un dron que asciende y abre el plano. */
.landing-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url('/img/hero-bg.png') center center / cover no-repeat;
    transform: scale(1.35);
    transform-origin: center center;
    animation: aerial-recede 40s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes aerial-recede {
    /* arranca cerca (zoom in) y se va alejando con una leve deriva aérea */
    0%   { transform: scale(1.35) translate3d(0, 2%, 0); }
    100% { transform: scale(1.10) translate3d(0, -1.5%, 0); }
}

/* Velo oscuro encima de la imagen para que el contenido se lea bien */
.landing-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(11,11,11,.55) 0%, rgba(11,11,11,.78) 60%, rgba(11,11,11,.92) 100%),
        radial-gradient(120% 90% at 50% 20%, transparent 35%, rgba(11,11,11,.55) 100%);
}

/* En la landing el header y el body se vuelven transparentes para ver el fondo */
body.landing { background: transparent; }
body.landing .site-header {
    background: rgba(11, 11, 11, .35);
}

/* Bloque de bienvenida sobre el fondo */
.hero-content {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(48px, 12vh, 140px) var(--sp-3) var(--sp-4);
}
.hero-content .label { margin-bottom: var(--sp-3); }
.hero-content h1 { text-shadow: 0 2px 40px rgba(0, 0, 0, .7); }
.hero-content p {
    font-size: 1.15rem;
    max-width: 540px;
    margin: 0 auto var(--sp-4);
    color: #e6e6e6;
}
/* CTA principal grande + sub-enlace para comercios */
.btn-cta { font-size: 1.1rem; padding: 16px 44px; }
.cta-sub { font-size: .95rem; color: var(--text-muted); margin-top: var(--sp-2); }
.cta-sub a { color: var(--gold); font-weight: 500; }
.cta-sub a:hover { color: var(--gold-soft); }

@media (prefers-reduced-motion: reduce) {
    .landing-bg { animation: none; transform: scale(1.15); }
}

/* --- Selección de país (home) --- */
.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
    max-width: 760px;
    margin: var(--sp-4) auto 0;
}
.country-card {
    position: relative;
    overflow: hidden;
    display: block;
    text-align: center;
    padding: var(--sp-4) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.country-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: 0 18px 50px -20px rgba(212, 175, 55, .35);
    color: var(--text);
}
.country-card .cc-content { position: relative; z-index: 2; }
.country-card .name {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}

/* Bandera de fondo en transparencia (franjas de color de cada país).
   El "velo" se intensifica un poco al hover para dar vida. */
.country-card .flag-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .22;
    transition: opacity var(--transition);
}
.country-card:hover .flag-veil { opacity: .34; }

/* Venezuela: amarillo · azul · rojo */
.flag-ve .flag-veil {
    background: linear-gradient(to bottom,
        #FFCC00 0 33.33%, #00247D 33.33% 66.66%, #CF142B 66.66% 100%);
}
/* Alemania: negro · rojo · dorado */
.flag-de .flag-veil {
    background: linear-gradient(to bottom,
        #000 0 33.33%, #DD0000 33.33% 66.66%, #FFCE00 66.66% 100%);
}
/* Estados Unidos: franjas rojas/blancas + cantón azul */
.flag-us .flag-veil {
    background:
        linear-gradient(135deg, #3C3B6E 0 38%, transparent 38%),
        repeating-linear-gradient(to bottom,
            #B22234 0 14.28%, #fff 14.28% 28.57%);
}

/* --- Barra superior del mall (país actual + switch) --- */
.mall-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.mall-bar h1 { margin: 0; }

/* --- Buscador del mall --- */
.mall-search {
    display: flex;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}
.mall-search input[type="search"] {
    flex: 1;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
}
.mall-search input[type="search"]:focus { outline: none; border-color: var(--gold); }
.mall-search .btn { flex-shrink: 0; }

/* --- Chips de categoría --- */
.cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
}
.chip {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .85rem;
    transition: all var(--transition);
}
.chip:hover { border-color: var(--gold); color: var(--text); }
.chip.is-active { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* Filtro de categorías: botón que abre el modal */
.cat-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.cat-trigger { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cat-trigger-icon { font-size: 1.05em; line-height: 1; color: var(--gold); }
.cat-clear {
    font-size: .82rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cat-clear:hover { color: var(--gold); }

/* Modal de categorías: oculto por defecto, centrado al abrir */
.cat-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 8, .82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: var(--sp-3);
}
.cat-modal.open { display: flex; }
.cat-modal-card {
    position: relative;
    width: min(560px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
    box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .9);
}
.cat-modal.open .cat-modal-card { animation: catModalIn 280ms ease-out; }
@keyframes catModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.cat-modal-title {
    text-align: center;
    margin: 0 0 var(--sp-3);
    font-size: 1.4rem;
}
.cat-modal-close {
    position: absolute;
    top: 10px; right: 16px;
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition);
}
.cat-modal-close:hover { color: var(--gold); }
.cat-modal-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-1);
}
.cat-modal-grid .chip { font-size: .9rem; padding: 9px 18px; }
/* Bloquea el scroll de fondo mientras el modal está abierto */
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .cat-modal.open .cat-modal-card { animation: none; }
}

/* ---- Cintillo de categorías (marquee der->izq, pausa al hover) ---- */
.cintillo {
    display: flex;
    align-items: stretch;
    margin-bottom: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}
.cintillo-dir {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg);
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 2;
    transition: background var(--transition);
}
.cintillo-dir:hover { background: var(--gold-soft); }
.cintillo-dir-icon { font-size: 1.05em; line-height: 1; }
.cintillo-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* desvanecer en los bordes */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cintillo-track {
    display: flex;
    width: max-content;
    animation: cintillo-run 38s linear infinite;
}
.cintillo:hover .cintillo-track,
.cintillo-track:focus-within { animation-play-state: paused; }
.cintillo-set {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 8px var(--sp-1);
}
.cintillo .chip { white-space: nowrap; }
@keyframes cintillo-run {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .cintillo-track { animation: none; width: auto; }
    .cintillo-viewport { overflow-x: auto; }
    .cintillo-set + .cintillo-set { display: none; } /* sin duplicado si no hay loop */
}

/* ---- Modal-directorio: banner + niveles ---- */
.dir-card { width: min(640px, 100%); text-align: left; }
.dir-banner {
    display: block;
    width: 100%;
    aspect-ratio: 6 / 1;
    min-height: 72px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: var(--sp-3);
    background: var(--surface-2);
}
.dir-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-banner-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.dir-levels { display: flex; flex-direction: column; gap: var(--sp-3); }
.dir-level-name {
    display: block;
    font-family: var(--font-serif);
    color: var(--gold);
    font-size: 1.05rem;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin-bottom: var(--sp-2);
}
.dir-cats { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.dir-all { margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--border); }

/* Cabecera de resultados */
.search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.search-head p { margin: 0; }
.search-head strong { color: var(--gold); }

/* --- Pasillo: fila de tiendas con scroll horizontal (se "camina") --- */
.aisle { margin-bottom: var(--sp-4); }
.aisle-head { margin-bottom: var(--sp-2); }
.aisle-track {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding: var(--sp-1) var(--sp-1) var(--sp-2);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.aisle-track::-webkit-scrollbar { height: 6px; }
.aisle-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.aisle-track .store-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    display: block;
    color: var(--text);
}
@media (max-width: 560px) {
    /* En móvil cada local ocupa casi toda la pantalla: se swipea de a uno */
    .aisle-track .store-card { flex-basis: 78vw; }
}

/* Placeholder cuando la tienda no tiene banner/logo */
.banner-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--gold);
    background: linear-gradient(135deg, var(--surface-2), #0e0e0e);
}

/* --- Página de tienda pública --- */
.store-hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: var(--sp-3);
    background: var(--surface);
}
.store-hero .cover { aspect-ratio: 21 / 9; background: var(--surface-2); }
.store-hero .cover img { width: 100%; height: 100%; object-fit: cover; }
.store-hero .cover .banner-placeholder { font-size: 4rem; }
.store-hero .ident {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
}
.store-hero .logo {
    width: 72px; height: 72px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}
.store-hero h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }

/* Botones de contacto */
.contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 var(--sp-4);
}

/* --- Grid de productos (público) --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
}
@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
}
.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition);
}
.product-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.product-card .p-img { aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.product-card .p-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card .p-body { padding: var(--sp-2); }
.product-card .p-body h3 { font-size: 1.05rem; margin: 0 0 4px; }
.product-card .p-body .price { color: var(--gold); font-weight: 500; }
.product-card .p-body p { font-size: .85rem; margin: 6px 0 0; }

/* --- Detalle de producto --- */
.product-detail { max-width: 1000px; margin: 0 auto; }
.pd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}
@media (min-width: 760px) {
    .pd-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
}
.pd-image,
.pd-main {
    aspect-ratio: 1 / 1;
    background: var(--surface-2);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.pd-image img, .pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-main img[data-zoomable] { cursor: zoom-in; transition: transform var(--transition); }
.pd-main img[data-zoomable]:hover { transform: scale(1.03); }

/* Miniaturas de la galería */
.pd-thumbs { display: flex; gap: var(--sp-1); margin-top: var(--sp-1); }
.pd-thumb {
    width: 72px; height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--transition);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.is-active { border-color: var(--gold); }
.pd-thumb:hover { border-color: var(--gold-soft); }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 8, .92);
    padding: var(--sp-3);
    cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: var(--radius);
    box-shadow: 0 30px 90px -20px rgba(0,0,0,.9);
    border: 1px solid var(--border);
}
.lightbox-close {
    position: absolute;
    top: 18px; right: 24px;
    background: none;
    border: 0;
    color: var(--text);
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}
.lightbox-close:hover { color: var(--gold); opacity: 1; }
.pd-info h1 { margin: var(--sp-1) 0 var(--sp-2); }
.pd-price { color: var(--gold); font-size: 1.8rem; font-weight: 500; margin: 0 0 var(--sp-2); }
.pd-desc { color: var(--text-muted); margin-bottom: var(--sp-3); }
.pd-store { font-size: .9rem; color: var(--text-muted); margin-bottom: var(--sp-3); }
.pd-store a { color: var(--gold); }

/* Tarjeta de producto clickeable */
a.product-card { display: block; color: var(--text); }
a.product-card:hover { color: var(--text); }

/* --- Animación "descubrir": revelar al hacer scroll --- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal.visible { opacity: 1; transform: none; }

/* --- Respeto a quienes prefieren menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Carrito de compras
   ============================================================ */

/* Íconos del header (carrito, compartir) con tratamiento dorado/tenue */
.nav-cart,
.nav-share {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    transition: color var(--transition);
}
.nav-cart:hover,
.nav-share:hover { color: var(--gold); }
.nav-cart .nav-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    margin: 0;
}

/* Botón "Agregar al carrito" en la página de producto */
.add-to-cart {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}
.add-to-cart input[type="number"] { width: 76px; }
.pd-stock { font-size: .8rem; color: var(--text-muted); }
.pd-soldout {
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: var(--sp-2);
}

/* Página del carrito */
.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.cart-note {
    color: var(--text-muted);
    font-size: .9rem;
    border-left: 2px solid var(--border);
    padding-left: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.cart-empty { color: var(--text-muted); margin-bottom: var(--sp-2); }

.cart-store {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.cart-store-head { margin-bottom: var(--sp-2); }
.cart-store-head a {
    font-family: var(--font-serif, serif);
    font-size: 1.2rem;
    color: var(--text);
}
.cart-store-head a:hover { color: var(--gold); }

.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-item {
    display: grid;
    grid-template-columns: 64px 1fr auto auto auto;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
}
.ci-thumb {
    width: 64px; height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
}
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ci-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-name { color: var(--text); }
.ci-name:hover { color: var(--gold); }
.ci-unit { font-size: .85rem; color: var(--text-muted); }
.ci-stock { font-size: .75rem; color: var(--text-muted); }
.ci-qty { display: flex; align-items: center; gap: 6px; }
.ci-qty input[type="number"] { width: 64px; }
.ci-line { color: var(--gold); font-weight: 500; white-space: nowrap; }

.cart-store-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.cart-subtotal { color: var(--text-muted); }
.cart-subtotal strong { color: var(--text); }
.cart-order-btns { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.cart-order-btns form { margin: 0; }

.cart-total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
    font-size: 1.2rem;
}
.cart-total strong { color: var(--gold); font-size: 1.5rem; }

/* --- Responsive --- */
@media (max-width: 640px) {
    .site-header { padding: var(--sp-2) var(--sp-3); }
    .site-main { padding: var(--sp-3); }
    .site-nav { gap: var(--sp-2); }

    /* Carrito en móvil: el ítem pasa a 2 columnas (foto + datos) y los
       controles bajan a una segunda fila ocupando el ancho. */
    .cart-item {
        grid-template-columns: 56px 1fr;
        grid-auto-rows: auto;
    }
    .ci-thumb { width: 56px; height: 56px; }
    .ci-qty { grid-column: 1 / -1; justify-content: flex-start; }
    .ci-line { grid-column: 1 / -1; }
    .ci-remove { grid-column: 2; grid-row: 1; justify-self: end; }
    .cart-order-btns { width: 100%; }
    .cart-order-btns form, .cart-order-btns .btn { width: 100%; }
}