/* ==========================================================================
   Tienda: catálogo, personalizador, carrito y checkout.
   Va aparte de app.css (que comparte con el panel) para poder tocarlo sin
   arrastrar los estilos del panel.
   ========================================================================== */

/* ===== Migas y avisos ===== */
.breadcrumb { font-size: .88rem; color: var(--muted); margin-bottom: 10px; }
.site-notice {
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    color: #fff;
    text-align: center;
    padding: 9px 20px;
    font-size: .92rem;
    font-weight: 600;
}
.site-notice a { color: #fff; text-decoration: underline; }

/* ===== Familias de producto ===== */
.family-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}
.family-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--card);
    color: var(--ink);
    font-weight: 600;
    font-size: .94rem;
}
.family-chip:hover { text-decoration: none; border-color: var(--brand); }
.family-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ===== Tarjeta de producto ===== */
.product-card .product-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: .8rem;
    color: var(--muted);
    flex-wrap: wrap;
}
.product-card .price-from { font-size: .78rem; color: var(--muted); font-weight: 600; }
.tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: #f3f4f6;
    color: var(--muted);
}
.tag-featured { background: #fef3c7; color: #92400e; }
.tag-soldout { background: #fee2e2; color: #991b1b; }
.tag-volume { background: #ede9fe; color: #5b21b6; }

/* ===== Tabla de precios por volumen ===== */
.tier-panel { margin-top: 22px; }
.tier-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tier-table th, .tier-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: .92rem; }
.tier-table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tier-save { color: var(--success); font-weight: 700; }

/* ===== Líneas de precio con descuento ===== */
.price-line.discount-line { color: var(--success); font-weight: 600; }

/* ===== Aviso de producción y envío ===== */
.delivery-note {
    margin-top: 20px;
    padding: 16px 18px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: var(--radius);
    font-size: .9rem;
}
.delivery-note p { margin-bottom: 4px; }
.delivery-note p:last-child { margin-bottom: 0; }

/* ===== Carrito ===== */
.cart-bottom {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 26px;
    align-items: start;
    margin-top: 26px;
}
@media (max-width: 860px) { .cart-bottom { grid-template-columns: 1fr; } }
.cart-tools { display: grid; gap: 18px; }
.cart-bottom .cart-summary { margin: 0; max-width: none; }
.coupon-form { display: flex; gap: 8px; align-items: center; }
.coupon-form .form-control { flex: 1; }
.row-unavailable { background: #fef2f2; }

/* ===== Opciones de envío ===== */
.shipping-options { display: grid; gap: 10px; }
.shipping-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: #fff;
    transition: border-color .12s ease, background .12s ease;
}
.shipping-option:hover { border-color: #c4b5fd; }
.shipping-option.selected { border-color: var(--brand); background: #f5f3ff; }
.shipping-option input { margin: 0; }
.shipping-option .so-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.shipping-option .so-price { font-weight: 800; color: var(--brand-dark); white-space: nowrap; }

/* ===== Facturación plegable ===== */
.billing-details {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    background: #fafafa;
}
.billing-details summary { cursor: pointer; font-weight: 600; font-size: .94rem; }

/* ===== Página de empresas ===== */
.business-hero {
    background: linear-gradient(135deg, #1f2937 0%, #4c1d95 100%);
    color: #fff;
    padding: 70px 0 60px;
    text-align: center;
}
.business-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 14px; }
.business-hero p { color: #d1d5db; max-width: 640px; margin: 0 auto 26px; font-size: 1.1rem; }
.business-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin: 40px 0; }
.volume-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.volume-table th, .volume-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.volume-table th { background: #f9fafb; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.volume-table tbody tr:hover { background: #faf5ff; }

/* ===== Talleres ===== */
.workshop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.workshop-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.workshop-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.workshop-card address { font-style: normal; color: var(--muted); font-size: .92rem; line-height: 1.7; }

/* ===== Seguimiento del pedido ===== */
.timeline { list-style: none; margin: 24px 0; padding: 0; }
.timeline li {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
    padding-left: 8px;
}
.timeline li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 26px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline .tl-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
    z-index: 1;
}
.timeline li.done .tl-dot { background: var(--success); color: #fff; }
.timeline li.current .tl-dot { background: var(--brand); color: #fff; }
.timeline .tl-body { flex: 1; text-align: left; }
.timeline .tl-body strong { display: block; }
.timeline .tl-body span { font-size: .88rem; color: var(--muted); }

/* ===== Pedidos de grupo: retiros, colegios, parroquias ===== */
.group-hero {
    background: linear-gradient(140deg, #312e81 0%, #7c3aed 55%, #a855f7 100%);
    color: #fff;
    padding: 68px 0 58px;
    text-align: center;
}
.group-hero h1 { font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.15; margin-bottom: 14px; }
.group-hero p { color: #e9d5ff; max-width: 660px; margin: 0 auto 26px; font-size: 1.08rem; }
.group-kicker {
    display: inline-block;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    padding: 5px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.group-hero-single { padding: 46px 0 44px; }
.program-icon-big { font-size: 3rem; display: block; margin-bottom: 10px; }
.breadcrumb-light { color: #ddd6fe; }
.breadcrumb-light a { color: #fff; text-decoration: underline; }

.section-title { text-align: center; font-size: 1.9rem; margin-bottom: 10px; }
.section-sub { text-align: center; color: var(--muted); max-width: 700px; margin: 0 auto 28px; }

.program-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.program-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 22px;
    color: var(--ink);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.program-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
    border-color: #c4b5fd;
    box-shadow: 0 12px 28px rgba(124, 58, 237, .14);
}
.program-card h3 { font-size: 1.1rem; color: var(--brand-dark); }
.program-icon { font-size: 2.1rem; }
.program-tagline { color: var(--muted); font-size: .93rem; flex: 1; }
.program-meta { font-size: .8rem; color: var(--brand); font-weight: 700; }

.faq { border-bottom: 1px solid var(--border); padding: 10px 0; }
.faq:last-child { border-bottom: none; }
.faq summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.faq p { margin-top: 8px; color: var(--muted); }

.plain-list { list-style: none; }
.plain-list li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: none; }

.group-callout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    background: linear-gradient(120deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
    border-radius: var(--radius);
    padding: 34px 36px;
}
.group-callout h2 { margin: 12px 0 10px; font-size: 1.6rem; }
.group-callout p { color: var(--muted); max-width: 560px; margin-bottom: 20px; }
.group-callout-icons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 2.6rem; }
@media (max-width: 720px) {
    .group-callout { grid-template-columns: 1fr; padding: 28px 24px; }
    .group-callout-icons { display: none; }
}