/* ========================================
   PÁGINA DE MARCA (marca.php) -- reusa las tarjetas de tienda.css
   ======================================== */

.marca-page {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.marca-page .breadcrumbs { margin-bottom: 20px; font-size: 0.9rem; color: #888; display: flex; flex-wrap: wrap; gap: 8px; }
.marca-page .breadcrumbs a { color: #888; text-decoration: none; }
.marca-page .breadcrumbs a:hover { color: var(--dorado); }
.marca-page .breadcrumbs p { margin: 0; color: #0D0D0D; font-weight: 600; }

.marca-hero { margin-bottom: 28px; }
.marca-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.2; margin: 0 0 12px; color: #0D0D0D; }
.marca-hero p { margin: 0 0 10px; max-width: 820px; line-height: 1.6; color: #444; }
.marca-beneficios { list-style: none; padding: 0; margin: 14px 0 18px; display: flex; flex-direction: column; gap: 6px; color: #0D0D0D; font-size: 0.95rem; }
.marca-beneficios li::before { content: "\2713\00a0"; color: #15803d; font-weight: 800; }
.marca-cta {
    display: inline-block; padding: 11px 20px; border-radius: 6px; background: var(--dorado); color: #0D0D0D;
    font-weight: 700; text-decoration: none; font-size: 0.9rem; transition: var(--transition);
}
.marca-cta:hover { filter: brightness(0.95); transform: translateY(-1px); }

.marca-rubros { margin-bottom: 28px; }
.marca-rubros h2, .marca-page section > h2 { font-size: 1.15rem; margin: 0 0 12px; color: #0D0D0D; }
.marca-rubros ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.marca-rubros a {
    display: inline-block; padding: 7px 14px; border: 1px solid var(--border-color); border-radius: 20px;
    color: #0D0D0D; text-decoration: none; font-size: 0.85rem; background: #fff;
}
.marca-rubros a span { color: #767676; }
.marca-rubros a:hover { border-color: var(--acento); }

/* Las tarjetas son enlaces: sin subrayado ni color de link */
a.product-card { color: inherit; text-decoration: none; }

.marca-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0 8px; }
.marca-pager a, .marca-pager span {
    min-width: 38px; padding: 8px 12px; text-align: center; border: 1px solid var(--border-color); border-radius: 6px;
    background: #fff; color: #0D0D0D; text-decoration: none; font-size: 0.9rem;
}
.marca-pager a:hover { border-color: var(--acento); }
.marca-pager span { background: var(--dorado); border-color: var(--dorado); font-weight: 700; }

.marca-faq { margin-top: 40px; max-width: 820px; }
.marca-faq h2 { font-size: 1.15rem; margin: 0 0 12px; }
.marca-faq h3 { font-size: 0.98rem; margin: 18px 0 4px; color: #0D0D0D; }
.marca-faq p { margin: 0; line-height: 1.6; color: #444; }

@media (max-width: 600px) {
    .marca-page { padding: 0 12px; margin-top: 16px; }
}