/* =========================================================
   FARMAVITAE — Distribución (Compra al por mayor)
   Usa los mismos tokens de marca de estilos.css — no introduce
   paleta nueva.
   ========================================================= */

/* ---- Columna derecha del hero: ilustración de bultos apilados ---- */
.dist-hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    background: linear-gradient(175deg, color-mix(in srgb, var(--white) 95%, transparent) 0%, color-mix(in srgb, var(--white) 82%, transparent) 100%);
    backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
    border-radius: var(--r-lg);
    padding: var(--space-6) var(--space-5);
}

.dist-hero-ilustracion {
    width: 100%;
    max-width: 220px;
    height: auto;
    overflow: visible;
}

.dist-caja {
    transform-origin: center bottom;
    opacity: 0;
    animation: dist-aparecer .5s ease forwards, dist-flotar 3.2s ease-in-out 1.2s infinite;
}
.dist-caja-1 { animation-delay: .05s, 1.1s; }
.dist-caja-2 { animation-delay: .2s, 1.25s; }
.dist-caja-3 { animation-delay: .35s, 1.4s; }
.dist-caja-4 { animation-delay: .5s, 1.55s; }

@keyframes dist-aparecer {
    from { opacity: 0; transform: translateY(14px) scale(.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dist-flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .dist-caja { animation: none; opacity: 1; }
}

.dist-hero-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}
.dist-hero-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    padding: var(--space-3);
}
.dist-hero-stat-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dist-hero-stat-ico svg { width: 18px; height: 18px; }
.dist-hero-stat strong { display: block; font-size: var(--text-sm); color: var(--ink); }
.dist-hero-stat span { font-size: var(--text-xs); color: var(--ink-muted); }

@media (max-width: 860px) {
    .dist-hero-visual { margin-top: var(--space-5); }
}

/* ---- Optimización móvil ---- */
@media (max-width: 640px) {
    .dist-hero-visual { padding: var(--space-4); }
}

/* ---- Optimización móvil (ronda 2) ---- */
@media (max-width: 640px) {
    .dist-hero-visual { padding: var(--space-3); margin-top: var(--space-3); }
    .dist-hero-ilustracion { max-width: 150px; }
    .dist-hero-stat { padding: var(--space-2); gap: var(--space-2); }
    .dist-hero-stat-ico { width: 28px; height: 28px; }
    .dist-hero-stat-ico svg { width: 14px; height: 14px; }
    .dist-hero-stat strong { font-size: 12.5px; }
    .dist-hero-stat span { font-size: 10.5px; }

    /* Tarjetas de producto al por mayor: más compactas, tabla de
       precios y resumen con menos aire. */
    .tarjeta-mayorista-body { padding: var(--space-3); gap: 6px; }
    .tarjeta-mayorista-body h3 { font-size: var(--text-sm); }
    .tabla-precios-mayoristas { font-size: 11px; }
    .tabla-precios-mayoristas th,
    .tabla-precios-mayoristas td { padding: 4px 3px; }
    .tarjeta-mayorista-resumen { padding: 8px 10px; }
    .tarjeta-mayorista-resumen strong { font-size: var(--text-sm); }
}

/* ---- El texto del hero debe arrancar arriba, igual que en las demás
   páginas — antes se centraba verticalmente contra la ilustración de
   cajas (más alta), empujando el texto hacia abajo. ---- */
.hero-mercado { align-items: start; }
@media (max-width: 860px) {
    .hero-mercado { align-items: stretch; }
}
/* El título compacto y la ilustración quedan reemplazados por el
   banner oscuro nuevo en celular (ver hero-banner-oferta-movil en
   mercado.css) — va acá, no en mercado.css, porque este archivo
   carga después y por eso es el que de verdad manda en esta página. */
@media (max-width: 640px) {
    .titulo-movil-compacto,
    .dist-hero-visual { display: none; }
}

/* ============================================================================
   PARTE 3 — DISTRIBUCIÓN (SOLO CELULAR) — SISTEMA --fv-*
   ----------------------------------------------------------------------------
   Listado con tarjetas horizontales compactas (foto · marca · nombre ·
   disponibilidad · "Desde $X c/u" · badge de descuento máximo). La grilla
   de 8 escalas + resumen + condiciones viven en la vista de detalle (modal).
   ============================================================================ */
.dist-cotizacion { display: none; }
.dist-condiciones { display: none; }

@media (max-width: 640px) {
    body.cuerpo-mercado { background: #fff !important; }
    .mercado-main { padding: var(--fv-s-4, 16px); }
    #grid-distribucion { display: flex; flex-direction: column; gap: var(--fv-s-3, 12px); }

    /* La tarjeta compacta de mayoreo vive ahora en mercado.css (así se
       ve igual en Distribución y en la pestaña "Mayoreo" de la Tienda). */

    /* ---- Acceso a cotización para volúmenes > 24 ---- */
    .dist-cotizacion {
        display: flex;
        align-items: center;
        gap: var(--fv-s-3, 12px);
        margin: var(--fv-s-4, 16px) 0 0;
        padding: 12px 14px;
        border: 1px solid var(--fv-border, #E9EEF3);
        border-radius: var(--fv-r-lg, 14px);
        background: #fff;
        text-decoration: none;
    }
    .dist-cotizacion-ico {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: var(--fv-r-md, 12px);
        background: var(--fv-surface, #F2F5F9);
        color: var(--fv-blue, #0B57A4);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dist-cotizacion-ico svg { width: 20px; height: 20px; }
    .dist-cotizacion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .dist-cotizacion-texto strong { font-size: 13px; font-weight: 800; color: var(--fv-ink, #0B2545); }
    .dist-cotizacion-texto span { font-size: 11.5px; color: var(--fv-muted, #5A6B80); line-height: 1.3; }
    .dist-cotizacion-chevron { width: 18px; height: 18px; color: var(--fv-soft, #8494A8); flex-shrink: 0; }

    /* ---- Condiciones ---- */
    .dist-condiciones {
        display: block;
        margin: var(--fv-s-4, 16px) 0 0;
        padding: 14px;
        border: 1px solid var(--fv-border, #E9EEF3);
        border-radius: var(--fv-r-lg, 14px);
        background: #fff;
    }
    .dist-condiciones h2 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--fv-ink, #0B2545); }
    .dist-condiciones ul { margin: 0; padding-left: 16px; }
    .dist-condiciones li { font-size: 12px; line-height: 1.5; color: var(--fv-muted, #5A6B80); margin-bottom: 5px; }

    /* Banner oscuro de Distribución: sin sombra, mismo criterio que Marketplace */
    .hero-banner-distribucion-movil { box-shadow: none; margin: 0 0 var(--fv-s-5, 22px); }
    .hero-banner-distribucion-stats { display: flex; gap: 18px; margin-top: 4px; }
    .hero-banner-distribucion-stats strong { display: block; font-size: 15px; font-weight: 800; color: #fff; }
    .hero-banner-distribucion-stats span { display: block; font-size: 10px; font-weight: 600; color: #9DC4E8; }

    /* ---- "Explora por categoría": minimizada por defecto (ver script en
       distribucion.html) y con íconos chicos, en fila deslizable ---- */
    #seccion-categorias-distribucion { margin: 0 0 var(--fv-s-4, 16px); }
    #seccion-categorias-distribucion .mkt-colapsable summary {
        border: 1px solid var(--fv-border, #E9EEF3);
        box-shadow: none;
        background: #fff;
        padding: 12px 14px;
        border-radius: var(--fv-r-md, 12px);
    }
    #seccion-categorias-distribucion .mkt-colapsable summary h2 {
        font-size: 15px !important;
        font-weight: 800;
        color: var(--fv-ink, #0B2545);
    }
    #seccion-categorias-distribucion .fila-categorias-grid {
        gap: 12px;
        padding: var(--fv-s-3, 12px) 2px 2px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    }
    /* Copia exacta de #fila-categorias-inicio (inicio.css) — círculo de
       relleno sólido, sin anillo/borde, nombre debajo. Antes acá vivía un
       diseño aparte (círculos con anillo, tomados de mercado.css) que no
       coincidía con el de Inicio. */
    #seccion-categorias-distribucion .categoria-hero-item {
        flex: 0 0 auto;
        width: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        text-align: center;
    }
    #seccion-categorias-distribucion .categoria-hero-ico {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--fv-surface);
        color: var(--fv-blue);
        box-shadow: none;
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    #seccion-categorias-distribucion .categoria-hero-ico svg { width: 26px; height: 26px; }
    #seccion-categorias-distribucion .categoria-hero-item > span:not(.categoria-hero-ico):not(.categoria-hero-cantidad) {
        display: block;
        width: 100%;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--fv-body);
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #seccion-categorias-distribucion .categoria-hero-cantidad { display: none !important; }
    #seccion-categorias-distribucion .categoria-hero-item-activa .categoria-hero-ico {
        background: var(--fv-blue);
        color: #fff;
    }
}


/* =========================================================
   ESCRITORIO (min-width: 641px) — cotización a medida +
   "cómo funciona la compra al por mayor" (antes solo en celular).
   ========================================================= */
@media (min-width: 641px) {
    .dist-cotizacion,
    .dist-condiciones {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    .dist-cotizacion {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-top: 36px;
        padding: 20px 24px;
        border: 1px solid var(--fv-border, #E9EEF3);
        border-radius: var(--fv-r-lg, 14px);
        background: #fff;
        text-decoration: none;
        transition: border-color .18s ease, box-shadow .18s ease;
    }
    .dist-cotizacion:hover {
        border-color: color-mix(in srgb, var(--fv-blue) 45%, var(--fv-border));
        box-shadow: 0 12px 28px -20px rgba(10,30,60,.25);
    }
    .dist-cotizacion-ico {
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        border-radius: var(--fv-r-md, 12px);
        background: var(--fv-surface, #F2F5F9);
        color: var(--fv-blue, #0B57A4);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dist-cotizacion-ico svg { width: 24px; height: 24px; }
    .dist-cotizacion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .dist-cotizacion-texto strong { font-size: 15.5px; font-weight: 800; color: var(--fv-ink, #0B2545); }
    .dist-cotizacion-texto span { font-size: 13px; color: var(--fv-muted, #5A6B80); line-height: 1.4; }
    .dist-cotizacion-chevron { width: 20px; height: 20px; color: var(--fv-soft, #8494A8); flex-shrink: 0; }

    .dist-condiciones {
        display: block;
        margin-top: 16px;
        margin-bottom: 8px;
        padding: 26px 28px;
        border: 1px solid var(--fv-border, #E9EEF3);
        border-radius: var(--fv-r-lg, 14px);
        background: #fff;
    }
    .dist-condiciones h2 {
        margin: 0 0 12px;
        font-family: var(--fv-font);
        font-size: 17px;
        font-weight: 800;
        color: var(--fv-ink, #0B2545);
        letter-spacing: -.005em;
    }
    .dist-condiciones ul {
        margin: 0;
        padding-left: 20px;
        columns: 2;
        column-gap: 36px;
    }
    .dist-condiciones li {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--fv-body, #41566E);
        margin-bottom: 8px;
        break-inside: avoid;
    }
}

/* Entre 641 y 820px la lista a 2 columnas queda muy justa — vuelve a 1. */
@media (min-width: 641px) and (max-width: 820px) {
    .dist-condiciones ul { columns: 1; }
}