/*
 * storage/css/blog.css — el cuerpo del blog (ultrawash.cl/blog)
 * ============================================================
 * El menú, el pie y los colores salen de style.css, que es la hoja de la
 * tienda. Acá va solo lo propio del blog: el hero, las tarjetas de artículo,
 * el texto del artículo y la galería.
 *
 * Dos reglas al escribir esto:
 *
 * 1. Ningún color a mano. Todo sale de las variables de la tienda
 *    (--theme-bg, --theme-surface, --theme-card, --theme-text,
 *    --theme-border, --uw-green, --uw-acento-rgb, --uw-muted), que cambian solas con el
 *    tema que elija el cliente y con el tema de la campaña que esté al aire.
 *    Si ves un #fff acá, es un error.
 * 2. Sin Bootstrap. El blog cargaba 230 KB de Bootstrap para usar veinte
 *    clases, y esas clases peleaban con la hoja de la tienda. Están todas
 *    reescritas abajo, en "utilidades", y solo dentro de .blog-cuerpo.
 * ============================================================
 */

/* ── Utilidades (lo que se usaba de Bootstrap, nada más) ───────────── */

.blog-cuerpo .container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 16px; }
.blog-cuerpo .row { display: flex; flex-wrap: wrap; margin-inline: -12px; }
.blog-cuerpo .row > [class*="col-"] { padding-inline: 12px; width: 100%; }
.blog-cuerpo .g-4 { row-gap: 24px; }
.blog-cuerpo .g-3 { row-gap: 16px; }

@media (min-width: 768px) {
    .blog-cuerpo .col-md-6 { width: 50%; }
    .blog-cuerpo .col-md-4 { width: 33.3333%; }
    .blog-cuerpo .p-md-5 { padding: 3rem; }
}
@media (min-width: 992px) {
    .blog-cuerpo .col-lg-4 { width: 33.3333%; }
    .blog-cuerpo .col-lg-6 { width: 50%; }
    .blog-cuerpo .col-lg-8 { width: 66.6666%; }
    .blog-cuerpo .col-lg-3 { width: 25%; }
    .blog-cuerpo .col-lg-10 { width: 83.3333%; }
    .blog-cuerpo .p-lg-5 { padding: 3rem; }
}
@media (min-width: 1200px) {
    .blog-cuerpo .col-xl-9 { width: 75%; }
}

.blog-cuerpo .d-flex { display: flex; }
.blog-cuerpo .d-block { display: block; }
.blog-cuerpo .d-none { display: none; }
.blog-cuerpo .flex-column { flex-direction: column; }
.blog-cuerpo .flex-wrap { flex-wrap: wrap; }
.blog-cuerpo .align-items-center { align-items: center; }
.blog-cuerpo .align-items-start { align-items: flex-start; }
.blog-cuerpo .justify-content-center { justify-content: center; }
.blog-cuerpo .justify-content-between { justify-content: space-between; }
.blog-cuerpo .text-center { text-align: center; }
.blog-cuerpo .text-muted { color: var(--uw-muted, #64748b); }
.blog-cuerpo .text-dark { color: var(--theme-text); }
.blog-cuerpo .text-primary { color: var(--uw-green, #2ec6cc); }
.blog-cuerpo .text-decoration-none { text-decoration: none; }
.blog-cuerpo .fw-bold { font-weight: 700; }
.blog-cuerpo .fw-semibold { font-weight: 600; }
.blog-cuerpo .fw-normal { font-weight: 400; }
.blog-cuerpo .h-100 { height: 100%; }
.blog-cuerpo .w-100 { width: 100%; }
.blog-cuerpo .border-0 { border: 0; }
.blog-cuerpo .border-top { border-top: 1px solid var(--theme-border); }
.blog-cuerpo .rounded { border-radius: 12px; }
.blog-cuerpo .lead { font-size: 1.12rem; line-height: 1.7; }

.blog-cuerpo .mb-0 { margin-bottom: 0; }
.blog-cuerpo .mb-2 { margin-bottom: .5rem; }
.blog-cuerpo .mb-3 { margin-bottom: 1rem; }
.blog-cuerpo .mb-4 { margin-bottom: 1.5rem; }
.blog-cuerpo .mb-5 { margin-bottom: 3rem; }
.blog-cuerpo .mt-2 { margin-top: .5rem; }
.blog-cuerpo .mt-3 { margin-top: 1rem; }
.blog-cuerpo .mt-4 { margin-top: 1.5rem; }
.blog-cuerpo .mt-5 { margin-top: 3rem; }
.blog-cuerpo .mt-auto { margin-top: auto; }
.blog-cuerpo .ms-2 { margin-left: .5rem; }
.blog-cuerpo .me-2 { margin-right: .5rem; }
.blog-cuerpo .py-3 { padding-block: 1rem; }
.blog-cuerpo .py-4 { padding-block: 1.5rem; }
.blog-cuerpo .py-5 { padding-block: 3rem; }
.blog-cuerpo .px-4 { padding-inline: 1.5rem; }
.blog-cuerpo .p-3 { padding: 1rem; }
.blog-cuerpo .p-4 { padding: 1.5rem; }
.blog-cuerpo .p-5 { padding: 3rem; }
.blog-cuerpo .mb-1 { margin-bottom: .25rem; }
.blog-cuerpo .my-5 { margin-block: 3rem; }
.blog-cuerpo .mx-auto { margin-inline: auto; }
.blog-cuerpo .gap-3 { gap: 1rem; }
.blog-cuerpo .g-0 { row-gap: 0; }
.blog-cuerpo .d-inline-block { display: inline-block; }
.blog-cuerpo .overflow-hidden { overflow: hidden; }
.blog-cuerpo .img-fluid { max-width: 100%; height: auto; }
.blog-cuerpo .rounded-pill { border-radius: 999px; }
.blog-cuerpo .rounded-4 { border-radius: 16px; }
.blog-cuerpo .small { font-size: .875rem; }
.blog-cuerpo .fs-5 { font-size: 1.15rem; }
.blog-cuerpo .display-4 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; }
.blog-cuerpo .border { border: 1px solid var(--theme-border); }

/* bg-white venía de Bootstrap y dejaba manchas blancas en modo oscuro. */
.blog-cuerpo .bg-white { background: var(--theme-surface); }

/* Migas de pan */
.blog-cuerpo .breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0;
                           font-size: .9rem; color: var(--uw-muted, #64748b); }
.blog-cuerpo .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: .5rem; opacity: .5; }
.blog-cuerpo .breadcrumb-item.active { color: var(--theme-text); font-weight: 600; }

/* Avisos (los usa el listado cuando no hay artículos) */
.blog-cuerpo .alert { border: 1px solid var(--theme-border); border-radius: 12px; padding: 1rem 1.2rem; background: var(--theme-surface); }
.blog-cuerpo .alert-warning { border-left: 3px solid #f59e0b; }

/* ── Base ──────────────────────────────────────────────────────────── */

.blog-cuerpo {
    background: var(--theme-bg);
    color: var(--theme-text);
    font-family: var(--uw-font-body, system-ui, sans-serif);
}
.blog-cuerpo h1, .blog-cuerpo h2, .blog-cuerpo h3, .blog-cuerpo h4 {
    font-family: var(--uw-font-display, 'Poppins', sans-serif);
    color: var(--theme-text);
    line-height: 1.25;
}
.blog-cuerpo a { color: var(--uw-green, #2ec6cc); }

/* La barra de lectura de arriba */
#reading-progress {
    position: fixed; inset: 0 auto auto 0; width: 0; height: 3px; z-index: 99999;
    background: var(--uw-green, #2ec6cc);
    box-shadow: 0 0 14px rgba(var(--uw-acento-rgb, 46,198,204), .5);
    transition: width .08s linear;
}

/* ── Hero del listado ──────────────────────────────────────────────── */

.blog-hero {
    padding: 4.5rem 0 3rem;
    background: var(--theme-surface);
    border-bottom: 1px solid var(--theme-border);
    text-align: center;
}
.blog-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 1rem;
}
.blog-hero p { color: var(--uw-muted, #64748b); max-width: 640px; margin-inline: auto; font-size: 1.08rem; }

.blog-hero-acciones { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* ── Botones ───────────────────────────────────────────────────────── */

.blog-cuerpo .btn,
.blog-cuerpo .btn-productos,
.blog-cuerpo .btn-ultra {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1.5px solid transparent; border-radius: 999px;
    padding: .7rem 1.5rem; font-weight: 600; font-size: .98rem;
    text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.blog-cuerpo .btn-productos, .blog-cuerpo .btn-ultra, .blog-cuerpo .btn-primary {
    background: var(--uw-green, #2ec6cc); color: #fff;
}
.blog-cuerpo .btn-productos:hover, .blog-cuerpo .btn-ultra:hover, .blog-cuerpo .btn-primary:hover {
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--uw-acento-rgb, 46,198,204), .28);
}
.blog-cuerpo .btn-outline-primary {
    background: transparent; color: var(--uw-green, #2ec6cc); border-color: var(--theme-border);
}
.blog-cuerpo .btn-outline-primary:hover { border-color: var(--uw-green, #2ec6cc); transform: translateY(-2px); }
.blog-cuerpo .btn-lg { padding: .85rem 1.9rem; font-size: 1.05rem; }

/* ── Tarjetas de artículo (mismo trato que las de producto) ────────── */

.blog-cuerpo .card,
.blog-cuerpo .article-card {
    display: flex; flex-direction: column;
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.blog-cuerpo .article-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--uw-acento-rgb, 46,198,204), .45);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}
.blog-cuerpo .card-img-top { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--theme-surface); display: block; }
.blog-cuerpo .card-body { padding: 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
/* Las tarjetas sí llevan sombra: sin ella el listado se ve plano y vacío.
   Suave, para que no pelee con el borde. */
.blog-cuerpo .card { box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.blog-cuerpo .card-body h5 { font-size: 1.08rem; margin: 0; }
.blog-cuerpo .card h5 { font-family: var(--uw-font-display, 'Poppins', sans-serif); font-size: 1.05rem; margin: 0 0 .4rem; }
.blog-cuerpo .card p { margin: 0; color: var(--uw-muted, #64748b); font-size: .95rem; line-height: 1.55; }
.blog-cuerpo .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.blog-cuerpo .shadow { box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }

.article-category, .article-category-small {
    display: inline-block; align-self: flex-start;
    background: rgba(var(--uw-acento-rgb, 46,198,204), .12);
    color: var(--uw-green, #2ec6cc);
    border-radius: 999px; padding: .2rem .75rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ── Categorías y paginación ───────────────────────────────────────── */

.blog-categorias { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.blog-categorias a {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1.5px solid var(--theme-border); border-radius: 999px;
    padding: .45rem 1rem; font-size: .93rem; font-weight: 600;
    color: var(--theme-text); text-decoration: none; background: var(--theme-surface);
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.blog-categorias a span {
    font-size: .78rem; font-weight: 700; opacity: .75;
    background: rgba(var(--uw-acento-rgb, 46,198,204), .14); border-radius: 999px; padding: .05rem .45rem;
}
.blog-categorias a:hover { border-color: var(--uw-green, #2ec6cc); color: var(--uw-green, #2ec6cc); }
.blog-categorias a.activa { background: var(--uw-green, #2ec6cc); border-color: var(--uw-green, #2ec6cc); color: #fff; }
.blog-categorias a.activa span { background: rgba(255, 255, 255, .22); opacity: 1; }

.blog-paginas { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 2.5rem; }
.blog-paginas a {
    min-width: 42px; text-align: center;
    border: 1.5px solid var(--theme-border); border-radius: 10px;
    padding: .5rem .8rem; font-size: .95rem; font-weight: 600;
    color: var(--theme-text); text-decoration: none; background: var(--theme-surface);
    transition: border-color .18s ease, color .18s ease;
}
.blog-paginas a:hover { border-color: var(--uw-green, #2ec6cc); color: var(--uw-green, #2ec6cc); }
.blog-paginas a.activa { background: var(--uw-green, #2ec6cc); border-color: var(--uw-green, #2ec6cc); color: #fff; }
.blog-paginas a.salto { min-width: 0; }
.blog-paginas .puntos { color: var(--uw-muted, #94a3b8); padding: 0 .2rem; }

@media (max-width: 600px) {
    .blog-paginas a.salto { width: 100%; }
}

/* ── El artículo ───────────────────────────────────────────────────── */

.post-hero { padding: 3rem 0 1.5rem; background: var(--theme-surface); border-bottom: 1px solid var(--theme-border); }
.post-contenido { font-size: 1.07rem; line-height: 1.75; color: var(--theme-text); }
.post-contenido h2 { font-size: 1.6rem; margin: 2.2rem 0 .9rem; }
.post-contenido h3 { font-size: 1.28rem; margin: 1.8rem 0 .7rem; }
.post-contenido p { margin-bottom: 1.15rem; }
.post-contenido ul, .post-contenido ol { margin: 0 0 1.2rem 1.3rem; }
.post-contenido li { margin-bottom: .45rem; }
.post-contenido img { max-width: 100%; height: auto; border-radius: 14px; }
.post-contenido a { color: var(--uw-green, #2ec6cc); text-decoration: underline; text-underline-offset: 3px; }
.post-contenido blockquote {
    margin: 1.6rem 0; padding: 1rem 1.3rem;
    border-left: 3px solid var(--uw-green, #2ec6cc);
    background: var(--theme-surface); border-radius: 0 12px 12px 0;
    color: var(--uw-muted, #64748b); font-style: italic;
}
/* Cierre para los artículos de negocio (lo pone post.php, no OmniPress) */
.post-contenido .post-negocio {
    margin: 2rem 0 0; padding: 1.1rem 1.35rem;
    border: 1px solid var(--theme-border); border-left: 3px solid var(--uw-green, #2ec6cc);
    background: var(--theme-surface); border-radius: 0 12px 12px 0;
}
.post-contenido .post-negocio p { margin: 0; }
.post-contenido table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.post-contenido th, .post-contenido td { border: 1px solid var(--theme-border); padding: .6rem .8rem; text-align: left; }
.post-contenido th { background: var(--theme-surface); font-weight: 700; }
.post-contenido .table-responsive { overflow-x: auto; }

/* El video que se pega arriba del artículo (OmniPress) */
.uw-video { margin: 0 0 1.6rem; }
.uw-video video { width: 100%; border-radius: 14px; display: block; background: #000; }

/* ── Galería: se desliza, sin JavaScript ───────────────────────────── */

.post-galeria {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .6rem; margin: 1.5rem 0; scrollbar-width: thin;
}
.post-galeria figure { margin: 0; flex: 0 0 min(100%, 640px); scroll-snap-align: center; }
/* Con una sola foto no hay nada que deslizar: ocupa todo el ancho. */
.post-galeria.una figure { flex-basis: 100%; }
.post-galeria.una img { max-height: 520px; object-fit: cover; }
.post-galeria img { width: 100%; border-radius: 14px; display: block; }
.post-galeria figcaption { font-size: .85rem; color: var(--uw-muted, #64748b); margin-top: .5rem; text-align: center; }

/* ── Adaptado al teléfono ──────────────────────────────────────────── */

@media (max-width: 600px) {
    .blog-hero { padding: 3rem 0 2rem; }
    .blog-cuerpo .py-5 { padding-block: 2rem; }
    .post-contenido { font-size: 1.02rem; }
}