/* =====================================================================
   Tienda pública — sistema de diseño
   Paleta de marca: naranja y blanco (igual que antes). Lo que cambió es
   la estructura (nav sin amontonarse, hero, tipografía, tarjetas), no el color.
   ===================================================================== */

:root {
    --color-primary-start: #FF7A30;
    --color-primary-end: #D9480F;
    --gradient-primary: linear-gradient(135deg, var(--color-primary-start) 0%, var(--color-primary-end) 100%);

    --tinta:       #2b2b3a;
    --tinta-suave: #6c757d;
    --borde:       #ece9f2;
    --fondo-suave: #f5f4fa;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--font-body);
    background: #ffffff;
    color: var(--tinta);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--tinta);
    letter-spacing: -0.01em;
}

a { color: var(--color-primary-end); }
a:hover { color: var(--color-primary-start); }

::selection { background: #FFE1CC; color: var(--tinta); }

/* ---------- Header ---------- */
.tienda-topbar {
    background: #fff;
    border-bottom: 1px solid var(--borde);
}

.tienda-brand {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tinta) !important;
    letter-spacing: -0.01em;
}
.tienda-brand:hover { color: var(--color-primary-end) !important; }
.tienda-brand i { color: var(--color-primary-end); }

.tienda-topbar .form-control {
    border-color: var(--borde);
    background: #fff;
}
.tienda-topbar .form-control:focus {
    border-color: var(--color-primary-start);
    box-shadow: 0 0 0 .2rem rgba(255,122,48,.15);
}
.tienda-topbar .btn-buscar {
    border: 1px solid var(--borde);
    border-left: none;
    background: #fff;
    color: var(--tinta-suave);
}

.tienda-icon-link {
    color: var(--tinta);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde);
    background: #fff;
    transition: border-color .15s ease, color .15s ease;
}
.tienda-icon-link:hover { border-color: var(--color-primary-end); color: var(--color-primary-end); }
.tienda-icon-link .badge { font-size: .65rem; }

.tienda-nav-strip {
    background: var(--gradient-primary);
    position: relative;
}
.tienda-nav-strip::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(90deg, rgba(217,72,15,0), rgba(217,72,15,.95));
    pointer-events: none;
}
.tienda-nav-strip .nav-scroll {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tienda-nav-strip .nav-scroll::-webkit-scrollbar { display: none; }
.tienda-nav-strip a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .86rem;
    white-space: nowrap;
    padding: .7rem .9rem;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.tienda-nav-strip a:hover,
.tienda-nav-strip a.activo {
    color: #fff;
    border-bottom-color: #fff;
}

/* ---------- Hero (portada) ---------- */
.tienda-hero {
    padding: 3.5rem 0 3rem;
    border-bottom: 1px solid var(--borde);
}
.tienda-hero .eyebrow {
    color: var(--color-primary-end);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .6rem;
}
.tienda-hero h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    font-weight: 600;
    max-width: 620px;
    margin-bottom: .9rem;
}
.tienda-hero p {
    color: var(--tinta-suave);
    max-width: 520px;
    font-size: 1.02rem;
    margin-bottom: 1.6rem;
}

/* ---------- Secciones ---------- */
.tienda-section-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
    color: var(--tinta);
}

/* ---------- Chips de categoría ---------- */
.chip-categoria {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--borde);
    background: #fff;
    color: var(--tinta);
    border-radius: 999px;
    padding: .45rem 1rem;
    font-size: .85rem;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.chip-categoria:hover { border-color: var(--color-primary-end); color: var(--color-primary-end); }
.chip-categoria .cuenta { color: var(--tinta-suave); }

/* ---------- Tarjeta de producto ---------- */
.producto-card {
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    height: 100%;
    box-shadow: 0 4px 14px rgba(38,20,84,.05);
    transition: border-color .15s ease, transform .15s ease;
}
.producto-card:hover { border-color: var(--color-primary-start); transform: translateY(-2px); }

.producto-card .img-wrap {
    aspect-ratio: 1 / 1;
    background: var(--fondo-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.producto-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }

.img-wrap .monograma {
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--color-primary-start);
    opacity: .55;
}

.producto-card .marca {
    font-size: .78rem;
    color: var(--tinta-suave);
    margin-bottom: .15rem;
}
.producto-card .nombre {
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: .3rem;
    line-height: 1.3;
}
.producto-card .precio {
    font-weight: 700;
    color: var(--color-primary-end);
}

.badge-agotado {
    position: absolute;
    top: 10px; left: 10px;
    background: #6c757d !important;
}

/* ---------- Botones ---------- */
.btn-gradient {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    border-radius: 8px;
}
.btn-gradient:hover { color: #fff; opacity: .92; }

/* ---------- Avatares de emprendedor ---------- */
.emprendedor-avatar {
    width: 64px; height: 64px; object-fit: cover; border-radius: 50%;
    border: 1px solid var(--borde);
}

/* ---------- Tarjetas genéricas (carrito, checkout, listados) ---------- */
main .bg-white.shadow-sm,
main .card {
    border: 1px solid var(--borde) !important;
}

/* ---------- Footer ---------- */
.tienda-footer {
    background: #201233;
}
.tienda-footer h6 {
    font-family: var(--font-body);
    font-size: .78rem;
    letter-spacing: .02em;
    color: var(--color-primary-start) !important;
}
.tienda-footer hr { border-color: rgba(255,255,255,.15); }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    z-index: 1050;
    transition: transform .15s ease;
}
.whatsapp-flotante:hover { color: #fff; transform: scale(1.06); }