/* Estilos de la tienda (header único, catálogo y ficha). Se carga después del tema Porto. */

:root {
    --tienda-texto: #2e353e;
    --tienda-suave: #6c757d;
    --tienda-borde: #e7e7e7;
    --tienda-fondo: #f7f7f7;
    --tienda-ok: #1f8a4c;
    --tienda-aviso: #b26a00;
    --tienda-whatsapp: #25d366;
}

body { padding-top: 40px; }

/* Color de marca: rosado empolvado, usado con mesura sobre blanco y gris cálido */
:root {
    --tienda-marca: #f17c90; --tienda-marca-oscuro: #d9637a; --tienda-marca-texto: #c25369;
    --tienda-marca-suave: #fdf1f3; --tienda-marca-borde: #f4c6cf; --tienda-oscuro: #2e353e; --tienda-linea: #e9e3e4;
}

.btn-primary, .tienda-tarjeta-agregar.btn-primary {
    background: var(--tienda-marca) !important; border-color: var(--tienda-marca) !important; color: #fff !important;
    font-weight: 600; letter-spacing: .02em; border-radius: 999px;
    box-shadow: 0 1px 2px rgba(194, 83, 105, .18); transition: background .2s, box-shadow .2s;
}
.btn-primary:hover, .btn-primary:focus { background: var(--tienda-marca-oscuro) !important; border-color: var(--tienda-marca-oscuro) !important; box-shadow: 0 3px 10px rgba(194, 83, 105, .22); }
.btn-outline-dark { border: 1px solid var(--tienda-oscuro); color: var(--tienda-oscuro); font-weight: 500; border-radius: 999px; }
.btn-outline-dark:hover { background: var(--tienda-oscuro); color: #fff; }

/* Títulos de los filtros: pequeños, espaciados, gris cálido */
.tienda-filtros h5.heading-primary {
    color: #8a7f81 !important; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 26px 0 12px;
}

/* Chips de filtros: contorno fino; el activo, rosado suave */
.tienda-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tienda-chip {
    padding: 5px 13px; border-radius: 999px; border: 1px solid var(--tienda-linea); background: #fff;
    color: #4b4446 !important; font-size: 13px; font-weight: 500; line-height: 1.4; text-decoration: none !important;
    transition: border-color .2s, color .2s, background .2s;
}
.tienda-chip:hover { border-color: var(--tienda-marca-borde); color: var(--tienda-marca-texto) !important; }
.tienda-chip.activo { background: var(--tienda-marca-suave); border-color: var(--tienda-marca); color: var(--tienda-marca-texto) !important; }
#header.sticky { top: 40px !important; }

.tienda-barra-anuncios {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tienda-fondo); color: #000; font-size: 15px; text-align: center;
}
.tienda-barra-anuncios .word-rotator-items span { color: #000 !important; }

.tienda-whatsapp {
    position: fixed; right: 16px; bottom: 16px; z-index: 1000;
    display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 50px;
    background: var(--tienda-whatsapp); color: #fff !important; font-weight: 600; text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.tienda-whatsapp i { font-size: 22px; }

/* Buscador del header */
.tienda-buscador { gap: 6px; width: 100%; max-width: 420px; margin: 8px 0; }
.tienda-buscador .form-control { height: 38px; }
.tienda-buscador-movil { max-width: none; padding-bottom: 10px; }

/* Listado */
.tienda-listado, .tienda-ficha { padding-top: 30px; padding-bottom: 40px; }
.tienda-encabezado-listado { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.tienda-encabezado-listado h1 { font-size: 1.7em; margin: 0; color: var(--tienda-texto); }
.tienda-orden select { min-width: 170px; }

.tienda-filtros h5 { margin: 22px 0 10px; font-size: 1em; }
.tienda-filtros details > summary { list-style: none; }
.tienda-filtros details > summary::-webkit-details-marker { display: none; }
@media (min-width: 992px) { .tienda-filtros details > summary { display: none; } }
.tienda-lista-filtros, .tienda-lista-filtros ul { list-style: none; padding: 0; margin: 0; }
.tienda-lista-filtros ul { padding-left: 14px; margin: 4px 0 8px; }
.tienda-lista-filtros a { display: flex; justify-content: space-between; padding: 4px 0; color: var(--tienda-texto); }
.tienda-lista-filtros a.activo, .tienda-check.activo { font-weight: 700; color: var(--tienda-marca-oscuro); }
.tienda-conteo { color: var(--tienda-suave); font-size: .85em; font-weight: 400; }
.tienda-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.tienda-etiquetas .badge { padding: 6px 9px; font-weight: 600; }
.tienda-check { color: var(--tienda-texto); }

.tienda-vacio { text-align: center; padding: 50px 16px; }

/* Tarjeta de producto */
.tienda-grilla > div { margin-bottom: 24px; }
.tienda-tarjeta {
    display: flex; flex-direction: column; height: 100%;
    border: 1px solid var(--tienda-borde); border-radius: 8px; overflow: hidden;
    background: #fff; color: var(--tienda-texto) !important; text-decoration: none !important;
    transition: box-shadow .2s;
}
.tienda-tarjeta:hover { box-shadow: 0 6px 20px rgba(194, 83, 105, .10); border-color: var(--tienda-marca-borde); }
/* Foto en un cuadro 1:1 fijo: llena el cuadrado, recortada desde el centro si es vertical u horizontal */
.tienda-tarjeta-foto { position: relative; display: block; width: 100%; padding-top: 100%; background: #fff; border-bottom: 1px solid var(--tienda-borde); }
.tienda-tarjeta-foto img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.tienda-tarjeta-proximamente img { opacity: .6; }
.tienda-sello { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; color: #fff; }
.tienda-sello-proximamente { background: var(--tienda-aviso); }
.tienda-sello-ultima { background: #dc3545; }
.tienda-tarjeta-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 14px; flex: 1; }
.tienda-tarjeta-sku { font-size: 12px; color: var(--tienda-suave); letter-spacing: .03em; }
.tienda-tarjeta-nombre { font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tienda-tarjeta-material { font-size: 13px; color: var(--tienda-suave); }
/* Pie de la tarjeta: precios a la izquierda; cantidad y "Agregar" apilados a la derecha */
.tienda-tarjeta-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 4px 12px 12px; }
.tienda-tarjeta-precios { display: flex; flex-direction: column; min-width: 0; color: var(--tienda-texto) !important; text-decoration: none !important; }
.tienda-tarjeta-precio { font-size: 1.15em; font-weight: 700; white-space: nowrap; }
.tienda-precio-detal { font-size: 11.5px; color: var(--tienda-suave); white-space: nowrap; }

/* Acceso a Novedades, encima de las categorías: un chip como los demás */
.tienda-novedades { display: inline-block; margin-top: 4px; }
.tienda-novedades span { font-size: 11.5px; color: #8a7f81; white-space: nowrap; }
.tienda-precio-detal-ficha { margin: 0; font-size: 14px; }
.tienda-tarjeta-enlace { display: flex; flex-direction: column; flex: 1; color: var(--tienda-texto) !important; text-decoration: none !important; }
.tienda-tarjeta-compra { display: flex; flex-direction: column; gap: 6px; width: 108px; flex-shrink: 0; }
.tienda-tarjeta-cantidad { display: flex; height: 30px; border: 1px solid var(--tienda-linea); border-radius: 999px; overflow: hidden; background: #fff; }
.tienda-tarjeta-cantidad button { width: 30px; border: 0; background: #fff; color: #8a7f81; }
.tienda-tarjeta-cantidad input { flex: 1; min-width: 0; border: 0; text-align: center; font-size: 14px; -moz-appearance: textfield; }
.tienda-tarjeta-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tienda-tarjeta-agregar { height: 32px; padding: 0 8px; font-size: 14px; white-space: nowrap; }
.tienda-tarjeta-agregar.tienda-agregado { background: var(--tienda-ok) !important; border-color: var(--tienda-ok) !important; }
/* Celular angosto (dos tarjetas por fila): precios arriba, controles debajo a todo el ancho */
@media (max-width: 420px) { .tienda-tarjeta-pie { flex-direction: column; align-items: stretch; } .tienda-tarjeta-compra { width: auto; } }

/* Ficha */
.tienda-migas { font-size: 14px; color: var(--tienda-suave); margin-bottom: 18px; }
.tienda-migas a { color: var(--tienda-suave); }
.tienda-galeria img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; border-radius: 8px; background: #fff; border: 1px solid var(--tienda-borde); }
.tienda-resumen h1 { font-size: 1.8em; line-height: 1.25; margin: 4px 0 12px; color: var(--tienda-texto); }
.tienda-ficha-sku { color: var(--tienda-suave); font-size: 14px; letter-spacing: .03em; }
.tienda-ficha-precio { font-size: 2em; font-weight: 700; color: var(--tienda-texto); margin-bottom: 8px; }
.tienda-ficha-precio small { font-size: .45em; font-weight: 400; color: var(--tienda-suave); }
.tienda-stock { font-weight: 600; }
.tienda-stock-ok { color: var(--tienda-ok); }
.tienda-stock-pronto { color: var(--tienda-aviso); }
.tienda-ficha-datos { width: 100%; margin: 12px 0 20px; }
.tienda-ficha-datos th { width: 35%; padding: 6px 0; color: var(--tienda-suave); font-weight: 400; }
.tienda-ficha-datos td, .tienda-ficha-datos th { border-bottom: 1px solid var(--tienda-borde); padding: 6px 0; }
.tienda-pedido label { font-weight: 600; }
.tienda-cantidad { display: flex; max-width: 180px; margin-bottom: 14px; }
.tienda-cantidad input { text-align: center; border: 1px solid var(--tienda-borde); width: 70px; }
.tienda-boton-pedir { background: var(--tienda-whatsapp) !important; border-color: var(--tienda-whatsapp) !important; }
.tienda-confianza { list-style: none; padding: 0; margin: 22px 0 12px; }
.tienda-confianza li { padding: 4px 0; }
.tienda-confianza i { width: 24px; color: var(--tienda-suave); }
.tienda-medios-pago { max-width: 320px; }
.tienda-relacionados { margin-top: 50px; }
.tienda-relacionados h2 { font-size: 1.4em; margin-bottom: 20px; }

/* Ícono del carrito en el header */
.tienda-icono-carrito { position: relative; margin-left: 14px; font-size: 22px; color: var(--tienda-texto) !important; }
.tienda-contador-carrito {
    position: absolute; top: -6px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: #dc3545; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

/* Ficha: agregar al carrito */
.tienda-aviso-carrito { margin-top: 10px; padding: 10px 12px; border-radius: 6px; }
.tienda-aviso-carrito.ok { background: #e8f6ee; color: var(--tienda-ok); }
.tienda-aviso-carrito.error { background: #fdecea; color: #b02a37; }
.tienda-pedir-whatsapp { display: inline-block; margin-top: 12px; color: var(--tienda-ok) !important; }

/* Carrito y compra */
.tienda-carrito { padding-top: 30px; padding-bottom: 40px; }
.tienda-carrito h1 { font-size: 1.8em; margin-bottom: 20px; }
.tienda-carrito h2 { font-size: 1.2em; margin: 24px 0 12px; }
.tienda-lineas { list-style: none; padding: 0; margin: 0 0 20px; }
.tienda-linea { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tienda-borde); }
.tienda-linea-foto img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; background: #fff; border: 1px solid var(--tienda-borde); }
.tienda-linea-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tienda-linea-info a { color: var(--tienda-texto); }
.tienda-linea-cantidad { display: flex; align-items: center; gap: 6px; }
.tienda-linea-cantidad input { width: 70px; text-align: center; border: 1px solid var(--tienda-borde); padding: 4px; }
.tienda-linea-total { font-weight: 700; white-space: nowrap; }
.tienda-resumen-compra { background: var(--tienda-fondo); border-radius: 8px; padding: 20px; position: sticky; top: 120px; }
.tienda-resumen-compra h2 { margin-top: 0; }
.tienda-resumen-items { list-style: none; padding: 0; margin: 0 0 14px; max-height: 320px; overflow-y: auto; }
.tienda-resumen-items li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--tienda-borde); font-size: 14px; }
.tienda-total { font-size: 1.25em; font-weight: 700; }
.tienda-falta-envio { background: #fff; border-radius: 6px; padding: 8px 10px; }
.tienda-envio-logrado { color: var(--tienda-ok); font-weight: 600; }
.tienda-opcion { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--tienda-borde); border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
.tienda-opcion input { margin-top: 5px; }
.tienda-gracias { text-align: center; padding: 20px 0 30px; }
.tienda-gracias > i { font-size: 56px; color: var(--tienda-ok); }
.tienda-numero-pedido { font-size: 1.3em; }
.tienda-gracias .tienda-boton-pedir { color: #fff !important; }

/* Estado del pago en línea */
.tienda-estado-pago { display: inline-block; padding: 4px 12px; border-radius: 20px; font-weight: 700; background: var(--tienda-fondo); color: var(--tienda-texto); }
.tienda-pago-aprobado { background: #e8f6ee; color: var(--tienda-ok); }
.tienda-pago-rechazado, .tienda-pago-error { background: #fdecea; color: #b02a37; }
.tienda-pago-pendiente, .tienda-pago-por_verificar, .tienda-pago-iniciado { background: #fff4e0; color: var(--tienda-aviso); }

/* Cuenta: mis pedidos */
.tienda-pedido-cuenta { border: 1px solid var(--tienda-borde); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
.tienda-pedido-cuenta summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; cursor: pointer; }
.tienda-pedido-cuenta[open] summary { margin-bottom: 10px; }

/* Home */
.tienda-hero { background: linear-gradient(180deg, var(--tienda-marca-suave), #fff); padding: 56px 0 44px; text-align: center; }
.tienda-hero h1 { font-size: 2.4em; font-weight: 700; color: var(--tienda-texto); margin-bottom: 12px; }
.tienda-hero .lead { max-width: 640px; margin: 0 auto 22px; }
.tienda-hero-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.tienda-buscador-hero { display: flex; max-width: 560px; margin: 0 auto; }
.tienda-seccion { padding-top: 40px; }
.tienda-seccion h2 { font-size: 1.5em; color: var(--tienda-texto); }
.tienda-tarjeta-linea {
    display: flex; flex-direction: column; justify-content: center; min-height: 110px; padding: 18px; margin-bottom: 16px;
    border: 1px solid var(--tienda-borde); border-radius: 8px; color: var(--tienda-texto) !important; text-decoration: none !important;
}
.tienda-tarjeta-linea:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.tienda-tarjeta-linea strong { font-size: 1.1em; }
.tienda-tarjeta-linea span { color: var(--tienda-suave); font-size: 14px; }
.tienda-accesos { justify-content: center; }
.tienda-beneficios { background: var(--tienda-marca-suave); margin-top: 40px; padding: 40px 0 24px; text-align: center; }
.tienda-beneficios h2 { margin-bottom: 26px; }
.tienda-beneficios .col-6 { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.tienda-beneficios i { font-size: 28px; color: var(--tienda-marca); margin-bottom: 4px; }
.tienda-beneficios span { color: var(--tienda-suave); font-size: 14px; }
.tienda-cierre { padding-bottom: 40px; }
.tienda-cierre h3 { font-size: 1.15em; }

/* Páginas de contenido viejas (beneficios, FAQ, blog...) dentro del header único */
.tienda-contenido { padding-bottom: 30px; }

/* Móvil: botón de pedido fijo abajo para no perderlo al bajar */
@media (max-width: 767px) {
    .tienda-resumen h1 { font-size: 1.4em; }
    .tienda-pedido .tienda-boton-agregar { position: sticky; bottom: 12px; z-index: 5; }
    .tienda-resumen-compra { position: static; margin-top: 20px; }
    .tienda-hero { padding: 32px 0 28px; }
    .tienda-hero h1 { font-size: 1.7em; }
    .tienda-whatsapp span { display: none; }
    .tienda-whatsapp { padding: 12px; }
}

/* Home: portada de cada línea, mosaico con fotos reales de sus productos más nuevos */
.tienda-portada-linea {
    position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: 20px; border-radius: 14px; overflow: hidden;
    background: var(--tienda-marca-suave); text-decoration: none !important; box-shadow: 0 2px 10px rgba(46, 53, 62, .06);
    transition: box-shadow .3s, transform .3s;
}
.tienda-portada-linea:hover { box-shadow: 0 12px 30px rgba(194, 83, 105, .18); transform: translateY(-2px); }
.tienda-portada-mosaico { position: absolute; inset: 0; display: grid; gap: 2px; background: #fff; }
.tienda-mosaico-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tienda-mosaico-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tienda-mosaico-3 img:first-child { grid-row: span 2; }
.tienda-mosaico-2 { grid-template-columns: 1fr 1fr; }
.tienda-mosaico-1 { grid-template-columns: 1fr; }
.tienda-portada-mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tienda-portada-linea:hover .tienda-portada-mosaico img { transform: scale(1.05); }
.tienda-portada-texto {
    /* texto sobre la pieza */
    position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px; display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(46, 53, 62, 0) 0%, rgba(46, 53, 62, .35) 50%, rgba(46, 53, 62, .7) 100%); color: #fff;
}
.tienda-portada-texto strong { font-size: 1.15em; font-weight: 600; letter-spacing: .01em; line-height: 1.25; }
.tienda-portada-texto span { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.tienda-portada-texto span::after { content: ' →'; transition: margin .3s; }

/* Filtro de precio: barra con dos círculos */
.tienda-rango { margin: 4px 0 24px; }
.tienda-rango-barra { position: relative; height: 22px; }
.tienda-rango-barra::before, .tienda-rango-sel { content: ""; position: absolute; top: 10px; height: 2px; border-radius: 2px; }
.tienda-rango-barra::before { left: 0; right: 0; background: var(--tienda-linea); }
.tienda-rango-sel { background: var(--tienda-marca); }
.tienda-rango input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.tienda-rango input[type=range]::-webkit-slider-runnable-track { background: none; height: 22px; }
.tienda-rango input[type=range]::-moz-range-track { background: none; }
.tienda-rango input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #fff; border: 1.5px solid var(--tienda-marca); box-shadow: 0 1px 4px rgba(0,0,0,.12); cursor: pointer; }
.tienda-rango input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1.5px solid var(--tienda-marca); box-shadow: 0 1px 4px rgba(0,0,0,.12); cursor: pointer; }
.tienda-rango input[type=range]:focus { outline: none; }
.tienda-rango input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--tienda-marca-suave); }
.tienda-rango-valores { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: #6b6264; letter-spacing: .02em; }

/* Asesora virtual: burbuja y ventana de chat */
.tienda-agente-boton { border: 0; background: var(--tienda-marca); cursor: pointer; }
.tienda-agente-boton.abierto { background: var(--tienda-oscuro); }
.tienda-agente {
    position: fixed; right: 16px; bottom: 76px; z-index: 1001; width: 370px; max-width: calc(100vw - 32px);
    height: 560px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(46, 53, 62, .22); font-size: 14px;
}
.tienda-agente[hidden] { display: none; }
.tienda-agente-cabecera { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--tienda-marca-suave); border-bottom: 1px solid var(--tienda-marca-borde); }
.tienda-agente-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--tienda-marca); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; }
.tienda-agente-titulo { flex: 1; line-height: 1.2; }
.tienda-agente-titulo strong { display: block; color: var(--tienda-oscuro); font-size: 15px; }
.tienda-agente-titulo span { font-size: 12px; color: #7b7173; }
.tienda-agente-cerrar { border: 0; background: none; font-size: 26px; line-height: 1; color: #7b7173; cursor: pointer; padding: 0 4px; }
.tienda-agente-humano { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; font-size: 12.5px; font-weight: 600; color: #1d9e51 !important; background: #f2fbf5; border-bottom: 1px solid #dff3e6; text-decoration: none !important; }
.tienda-agente-humano:hover { background: #e6f7ec; }
.tienda-agente-ingreso { padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.tienda-agente-ingreso p { margin: 0; color: var(--tienda-oscuro); }
.tienda-agente-ingreso input { height: 44px; border: 1px solid var(--tienda-linea); border-radius: 10px; padding: 0 14px; font-size: 16px; letter-spacing: .04em; }
.tienda-agente-ingreso input:focus, .tienda-agente-escribir input:focus { outline: none; border-color: var(--tienda-marca); box-shadow: 0 0 0 3px var(--tienda-marca-suave); }
.tienda-agente-ingreso small { color: #8a8082; font-size: 11.5px; }
.tienda-agente-mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #fbf9f9; }
.tienda-agente-mensajes[hidden], .tienda-agente-escribir[hidden], .tienda-agente-ingreso[hidden] { display: none; }
.tienda-agente-msj { max-width: 88%; padding: 9px 13px; border-radius: 16px; line-height: 1.45; }
.tienda-agente-msj p { margin: 0 0 6px; } .tienda-agente-msj p:last-child { margin-bottom: 0; }
.tienda-agente-msj.agente { align-self: flex-start; background: #fff; border: 1px solid var(--tienda-linea); border-bottom-left-radius: 4px; color: var(--tienda-oscuro); }
.tienda-agente-msj.cliente { align-self: flex-end; background: var(--tienda-marca); color: #fff; border-bottom-right-radius: 4px; }
.tienda-agente-msj.escribiendo span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--tienda-marca-borde); animation: agente-punto 1s infinite; }
.tienda-agente-msj.escribiendo span:nth-child(2) { animation-delay: .15s; } .tienda-agente-msj.escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes agente-punto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.tienda-agente-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tienda-agente-accion { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 50px; border: 1px solid var(--tienda-marca); color: var(--tienda-marca-texto) !important; background: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none !important; transition: background .15s; }
.tienda-agente-accion:hover { background: var(--tienda-marca-suave); }
.tienda-agente-accion.whatsapp { border-color: #25d366; color: #1d9e51 !important; }
.tienda-agente-productos { display: flex; gap: 8px; overflow-x: auto; margin: 8px -4px 2px; padding: 0 4px 4px; scroll-snap-type: x mandatory; }
.tienda-agente-producto { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--tienda-linea); border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none !important; color: var(--tienda-oscuro) !important; font-size: 12px; line-height: 1.3; }
.tienda-agente-producto img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #f6f3f3; }
.tienda-agente-producto .sku { padding: 6px 8px 0; color: #9a9092; font-size: 10.5px; letter-spacing: .05em; }
.tienda-agente-producto .nombre { padding: 2px 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tienda-agente-producto .precio { padding: 2px 8px; font-weight: 700; color: var(--tienda-marca-texto); }
.tienda-agente-producto .precio del { font-weight: 400; color: #aaa; font-size: 11px; }
.tienda-agente-producto .ver { margin: 6px 8px 8px; padding: 4px; text-align: center; border-radius: 50px; background: var(--tienda-marca-suave); color: var(--tienda-marca-texto); font-weight: 600; font-size: 11.5px; }
.tienda-agente-escribir { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--tienda-linea); background: #fff; }
.tienda-agente-escribir input { flex: 1; height: 42px; border: 1px solid var(--tienda-linea); border-radius: 50px; padding: 0 16px; font-size: 16px; }
.tienda-agente-escribir button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--tienda-marca); color: #fff; cursor: pointer; }
@media (max-width: 575px) {
    .tienda-agente { right: 0; bottom: 0; width: 100vw; max-width: none; height: 100%; max-height: none; border-radius: 0; }
    .tienda-agente-boton.abierto { display: none; }
}

/* Asesora: botón verde junto a enviar y confirmación antes de ir a WhatsApp */
.tienda-agente { position: fixed; z-index: 100000; }
.tienda-agente-boton { z-index: 99999; }
.tienda-agente-wa { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--tienda-whatsapp); color: #fff !important; display: grid; place-items: center; font-size: 21px; text-decoration: none !important; }
.tienda-agente-wa:hover { background: #1ebe5a; }
.tienda-agente-ir-asesor { align-self: center; font-size: 13px; font-weight: 600; color: #1d9e51 !important; }
.tienda-agente-confirmar { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; background: rgba(46, 53, 62, .45); }
.tienda-agente-confirmar[hidden] { display: none; }
.tienda-agente-confirmar-caja { width: 100%; max-width: 290px; padding: 24px 20px 18px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.tienda-agente-confirmar-caja > i { font-size: 38px; color: var(--tienda-whatsapp); }
.tienda-agente-confirmar-caja p { margin: 10px 0 18px; color: var(--tienda-oscuro); font-size: 15px; line-height: 1.4; }
.tienda-agente-continuar { display: block; padding: 10px; border-radius: 50px; background: var(--tienda-whatsapp); color: #fff !important; font-weight: 700; text-decoration: none !important; }
.tienda-agente-continuar:hover { background: #1ebe5a; }
.tienda-agente-volver { display: block; width: 100%; margin-top: 8px; padding: 9px; border: 1px solid var(--tienda-marca); border-radius: 50px; background: #fff; color: var(--tienda-marca-texto); font-weight: 600; cursor: pointer; }
.tienda-agente-volver:hover { background: var(--tienda-marca-suave); }

/* Totales del carrito: descuento, envío y metas */
.tienda-totales p { margin-bottom: 6px; }
.tienda-totales[hidden] { display: none; }
.tienda-descuento, .tienda-gratis { color: #1d9e51; }
.tienda-aviso-meta { font-size: 13px; padding: 7px 10px; border-radius: 8px; background: var(--tienda-marca-suave); color: var(--tienda-marca-texto); }
.tienda-aviso-meta i { margin-right: 4px; }

/* Foto de Valery (asesora virtual) */
img.tienda-agente-avatar { width: 40px; height: 40px; padding: 0; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--tienda-marca-borde); }
.tienda-agente-boton { padding: 6px 18px 6px 6px; }
.tienda-agente-boton img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }

/* Valery en el menú principal */
.tienda-menu-valery img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-right: 4px; vertical-align: -6px; box-shadow: 0 0 0 1px var(--tienda-marca-borde); }

/* Pop up de la bolsa (ícono del carrito) */
.tienda-bolsa-fondo { position: fixed; inset: 0; z-index: 100001; background: rgba(46, 53, 62, .25); }
.tienda-bolsa {
    position: fixed; top: 70px; right: 16px; z-index: 100002; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 90px); overflow-y: auto;
    background: #fff; border-radius: 10px; border-top: 3px solid var(--tienda-marca); box-shadow: 0 12px 40px rgba(46, 53, 62, .22); padding: 22px 24px 20px;
}
.tienda-bolsa[hidden], .tienda-bolsa-fondo[hidden] { display: none; }
.tienda-bolsa h3 { font-size: 17px; font-weight: 400; margin: 0 0 8px; color: var(--tienda-oscuro); letter-spacing: 0; text-transform: none; }
.tienda-bolsa-cerrar { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 24px; line-height: 1; color: #9a9092; cursor: pointer; }
.tienda-bolsa-items { list-style: none; margin: 0; padding: 0; }
.tienda-bolsa-items li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tienda-linea); font-size: 13px; line-height: 1.3; }
.tienda-bolsa-items img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: #f6f3f3; }
.tienda-bolsa-items .nombre { flex: 1; min-width: 0; }
.tienda-bolsa-items .nombre a { color: var(--tienda-oscuro); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tienda-bolsa-items small { display: block; color: #8a8082; margin-top: 2px; }
.tienda-bolsa-items strong { white-space: nowrap; color: var(--tienda-oscuro); }
.tienda-bolsa-vacia, .tienda-bolsa-mas { color: var(--tienda-oscuro); font-size: 16px !important; border-bottom: 0 !important; }
.tienda-bolsa-mas { font-size: 13px !important; color: #8a8082 !important; justify-content: center; }
.tienda-bolsa-total { text-align: center; font-size: 20px; color: var(--tienda-oscuro); margin: 10px 0 14px; padding-bottom: 16px; border-bottom: 1px solid var(--tienda-linea); }
.tienda-bolsa-total span { display: block; font-size: 12.5px; color: #8a8082; }
.tienda-bolsa-total strong { font-weight: 700; }
.tienda-bolsa-pagar, .tienda-bolsa-seguir { display: block; width: 205px; max-width: 100%; margin: 0 auto 12px; padding: 10px 14px; border: 0; border-radius: 4px; text-align: center; font-size: 15px; text-decoration: none !important; cursor: pointer; }
.tienda-bolsa-pagar { background: var(--tienda-marca); color: #fff !important; }
.tienda-bolsa-pagar:hover { background: var(--tienda-marca-oscuro); }
.tienda-bolsa-pagar.inactivo { opacity: .55; cursor: default; }
.tienda-bolsa-pagar i { font-size: 11px; margin-left: 6px; }
.tienda-bolsa-seguir { background: #4a4848; color: #fff; }
.tienda-bolsa-seguir:hover { background: #333; }
.tienda-bolsa-ver { display: block; text-align: center; font-size: 12.5px; color: #8a8082 !important; }
@media (max-width: 575px) { .tienda-bolsa { top: 60px; right: 12px; max-width: calc(100vw - 24px); } }

/* Botón amarillo "Confirmar Pagar" del checkout: el más visible de la página */
.tienda-boton-confirmar {
    display: block; width: 100%; padding: 13px 16px; border: 1px solid #c99a0e; border-radius: 6px; cursor: pointer;
    background: linear-gradient(180deg, #f8dc4d 0%, #ecbd1d 100%); color: #1c1c1c; font-size: 19px; font-weight: 500;
    box-shadow: 0 2px 6px rgba(201, 154, 14, .35); transition: filter .15s, transform .1s;
}
.tienda-boton-confirmar:hover { filter: brightness(1.04); }
.tienda-boton-confirmar:active { transform: translateY(1px); }
.tienda-boton-confirmar i { font-size: 14px; margin-left: 8px; }

/* Bolsa: botones arriba (pagar, seguir, cerrar) y unidades + total en una fila */
.tienda-bolsa { padding-top: 16px; }
.tienda-bolsa-acciones { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--tienda-linea); }
.tienda-bolsa-acciones .tienda-bolsa-pagar, .tienda-bolsa-acciones .tienda-bolsa-seguir { flex: 1; width: auto; margin: 0; padding: 9px 8px; font-size: 14px; white-space: nowrap; }
.tienda-bolsa-acciones .tienda-bolsa-cerrar { position: static; flex: none; padding: 0 2px 0 4px; }
.tienda-bolsa-total { display: flex; justify-content: space-between; align-items: baseline; text-align: left; font-size: 18px; margin: 12px 0 10px; padding-bottom: 12px; }
.tienda-bolsa-total span:first-child { display: inline; font-size: 14px; }
.tienda-bolsa-total span:last-child { display: inline; font-size: 18px; color: var(--tienda-oscuro); }

/* Bolsa, versión refinada: misma estética de los filtros (píldoras finas, rosado suave, rótulos en versalitas) */
.tienda-bolsa { width: 380px; padding: 18px 20px 18px; border-top: 0; border-radius: 16px; border: 1px solid var(--tienda-linea); box-shadow: 0 18px 50px rgba(46, 53, 62, .16); }
.tienda-bolsa-acciones { gap: 8px; padding-bottom: 16px; margin-bottom: 14px; }
.tienda-bolsa-acciones .tienda-bolsa-pagar, .tienda-bolsa-acciones .tienda-bolsa-seguir {
    padding: 10px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.tienda-bolsa-acciones .tienda-bolsa-pagar { background: var(--tienda-marca); border: 1px solid var(--tienda-marca); box-shadow: 0 4px 12px rgba(241, 124, 144, .28); }
.tienda-bolsa-acciones .tienda-bolsa-pagar:hover { background: var(--tienda-marca-oscuro); border-color: var(--tienda-marca-oscuro); }
.tienda-bolsa-acciones .tienda-bolsa-seguir { background: #fff; color: #4b4446; border: 1px solid #d8d0d2; }
.tienda-bolsa-acciones .tienda-bolsa-seguir:hover { border-color: var(--tienda-marca-borde); color: var(--tienda-marca-texto); }
.tienda-bolsa-acciones .tienda-bolsa-cerrar { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--tienda-linea); font-size: 18px; color: #8a7f81; display: grid; place-items: center; transition: border-color .2s, color .2s; }
.tienda-bolsa-acciones .tienda-bolsa-cerrar:hover { border-color: var(--tienda-marca-borde); color: var(--tienda-marca-texto); }
.tienda-bolsa h3 { color: #8a7f81; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 4px; }
.tienda-bolsa-items li { gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3eeef; }
.tienda-bolsa-items img { width: 52px; height: 52px; border-radius: 12px; border: 1px solid #f0e9ea; }
.tienda-bolsa-items .nombre a { font-size: 13.5px; font-weight: 500; color: #3a3335 !important; }
.tienda-bolsa-items small { font-size: 11.5px; color: #9a9092; letter-spacing: .02em; }
.tienda-bolsa-items strong { font-size: 13.5px; font-weight: 600; color: #3a3335; }
.tienda-bolsa-mas { padding: 12px 0 4px !important; }
.tienda-bolsa-items li.tienda-bolsa-mas { display: flex; justify-content: center; font-size: 12px !important; color: var(--tienda-marca-texto) !important; }
.tienda-bolsa-total { margin: 6px 0 14px; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--tienda-marca-suave); align-items: center; }
.tienda-bolsa-total span:first-child { font-size: 12px; color: #8a7f81; letter-spacing: .04em; }
.tienda-bolsa-total span:last-child { font-size: 12px; color: #8a7f81; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.tienda-bolsa-total strong { font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--tienda-oscuro); margin-left: 6px; }
.tienda-bolsa-ver {
    display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
    border: 1px solid var(--tienda-marca-borde); background: #fff; color: var(--tienda-marca-texto) !important; font-size: 13px; font-weight: 600; text-decoration: none !important;
    transition: background .2s, border-color .2s;
}
.tienda-bolsa-ver:hover { background: var(--tienda-marca-suave); border-color: var(--tienda-marca); }
.tienda-bolsa-ver i { font-size: 11px; }

/* Dorado = avanzar a pagar. Solo en los 3 botones de pago: Pagar Pedido (bolsa), Finalizar compra (carrito), Confirmar Pagar */
a.tienda-boton-finalizar { text-align: center; text-decoration: none !important; color: #1c1c1c !important; font-size: 18px; }
.tienda-bolsa-acciones .tienda-bolsa-pagar {
    background: linear-gradient(180deg, #f8dc4d 0%, #ecbd1d 100%); border: 1px solid #c99a0e; color: #1c1c1c !important;
    box-shadow: 0 3px 10px rgba(201, 154, 14, .3);
}
.tienda-bolsa-acciones .tienda-bolsa-pagar:hover { background: linear-gradient(180deg, #f8dc4d 0%, #ecbd1d 100%); border-color: #c99a0e; filter: brightness(1.04); }

/* Bolsa compacta: que "Ver o editar carrito" quepa sin desplazarse */
.tienda-bolsa { padding: 14px 18px 14px; max-height: calc(100vh - 80px); }
.tienda-bolsa-acciones { padding-bottom: 12px; margin-bottom: 10px; }
.tienda-bolsa h3 { margin-bottom: 0; }
.tienda-bolsa-items li { padding: 7px 0; gap: 10px; }
.tienda-bolsa-items img { width: 44px; height: 44px; border-radius: 10px; }
.tienda-bolsa-items .nombre a { -webkit-line-clamp: 1; }
.tienda-bolsa-items li.tienda-bolsa-mas { padding: 8px 0 2px !important; }
.tienda-bolsa-total { margin: 4px 0 10px; padding: 10px 14px; }
.tienda-bolsa-ver { padding: 8px 14px; }

/* Departamento y ciudad: lista que se filtra al escribir */
.lista-buscable { position: absolute; left: 5px; right: 5px; top: 100%; z-index: 50; max-height: 240px; overflow-y: auto; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--tienda-linea); border-radius: 10px; box-shadow: 0 10px 28px rgba(46, 53, 62, .14); }
.lista-buscable[hidden] { display: none; }
.lista-buscable li { padding: 7px 10px; border-radius: 7px; font-size: 14px; color: #3a3335; cursor: pointer; }
.lista-buscable li:hover, .lista-buscable li.activo { background: var(--tienda-marca-suave); color: var(--tienda-marca-texto); }

/* Carrito: cantidad con − / + en píldora fina y papelera a la derecha del total */
.tienda-paso { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--tienda-linea); border-radius: 999px; overflow: hidden; background: #fff; }
.tienda-paso button { width: 34px; height: 32px; border: 0; background: none; color: #4b4446; font-size: 17px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.tienda-paso button:hover:not(:disabled) { background: var(--tienda-marca-suave); color: var(--tienda-marca-texto); }
.tienda-paso button:disabled { color: #d3cbcd; cursor: default; }
.tienda-paso input { width: 42px; height: 32px; border: 0; border-left: 1px solid var(--tienda-linea); border-right: 1px solid var(--tienda-linea); text-align: center; font-size: 14px; font-weight: 600; color: #3a3335; -moz-appearance: textfield; }
.tienda-paso input::-webkit-outer-spin-button, .tienda-paso input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tienda-paso input:focus { outline: none; background: var(--tienda-marca-suave); }
.tienda-linea-quitar { margin: 0 0 0 14px; align-self: center; }
.tienda-linea-quitar button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--tienda-marca); font-size: 16px; cursor: pointer; transition: background .2s, border-color .2s; }
.tienda-linea-quitar button:hover { background: var(--tienda-marca-suave); border-color: var(--tienda-marca-borde); }

/* Ficha: galería con miniaturas en columna a la izquierda */
.tienda-galeria-v { display: flex; gap: 10px; align-items: flex-start; }
.tienda-galeria-miniaturas { display: flex; flex-direction: column; gap: 8px; flex: 0 0 72px; max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.tienda-galeria-miniaturas button { padding: 0; border: 1px solid var(--tienda-linea); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; opacity: .75; transition: border-color .2s, opacity .2s; }
.tienda-galeria-miniaturas button:hover { opacity: 1; }
.tienda-galeria-miniaturas button.activa { border-color: var(--tienda-marca); box-shadow: 0 0 0 1px var(--tienda-marca); opacity: 1; }
.tienda-galeria-miniaturas img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.tienda-galeria-principal { flex: 1; min-width: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--tienda-linea); }
.tienda-galeria-principal img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 575px) { .tienda-galeria-miniaturas { flex-basis: 56px; max-height: 320px; } }
.tienda-galeria .tienda-galeria-v img { border: 0; border-radius: 0; aspect-ratio: auto; }
.tienda-galeria .tienda-galeria-miniaturas img { aspect-ratio: 1; object-fit: cover; }
.tienda-galeria-miniaturas button { flex-shrink: 0; }
.tienda-galeria .tienda-galeria-miniaturas img { height: auto; }
.tienda-linea-info .tienda-paso { align-self: flex-start; }

/* Tarjetas: segunda foto al pasar el mouse (solo en dispositivos con mouse) */
.tienda-tarjeta-foto img.tienda-foto-2 { opacity: 0; transition: opacity .35s ease; }
.tienda-tarjeta-foto img.tienda-foto-2:not([src]) { visibility: hidden; }
@media (hover: hover) { .tienda-tarjeta-enlace:hover .tienda-foto-2[src] { opacity: 1; } }
.tienda-galeria-principal img { transition: opacity .25s; }
.tienda-galeria-principal { touch-action: pan-y; }

/* Tarjeta: sin franja vacía entre el material y el pie de compra */
.tienda-tarjeta-info { padding-bottom: 4px; }
.tienda-tarjeta-pie { padding-top: 2px; }

/* Mayoristas: testimonios en tarjetas tipo celular */
.tienda-testimonios { padding: 56px 0 60px; background: linear-gradient(180deg, #fff 0%, var(--tienda-marca-suave) 100%); text-align: center; }
.tienda-testimonios-rotulo { color: #8a7f81; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px; }
.tienda-testimonios h2 { font-size: 28px; font-weight: 400; color: var(--tienda-oscuro); margin: 0 0 8px; letter-spacing: -.01em; }
.tienda-testimonios-sub { color: #7b7173; font-size: 14.5px; margin: 0 auto 32px; max-width: 46ch; }
.tienda-testimonios-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); justify-content: center; gap: 22px; }
.tienda-testimonio {
    display: block; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #fff; padding: 6px;
    border: 1px solid var(--tienda-marca-borde); box-shadow: 0 14px 34px rgba(46, 53, 62, .12); transition: transform .25s, box-shadow .25s;
}
.tienda-testimonio:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(46, 53, 62, .16); }
.tienda-testimonio img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 20px; display: block; }
@media (max-width: 767px) {
    .tienda-testimonios { padding: 40px 0 44px; }
    .tienda-testimonios h2 { font-size: 22px; }
    .tienda-testimonios-fila { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 16px 18px; margin: 0 -15px; justify-content: flex-start; }
    .tienda-testimonio { flex: 0 0 62%; scroll-snap-align: center; }
}

/* Celular: bolsa a la izquierda del menú hamburguesa */
@media (max-width: 991px) {
    .header-nav { display: flex; align-items: center; justify-content: flex-end; }
    .tienda-icono-carrito-movil { order: 1; margin: 0 18px 0 0; font-size: 24px; line-height: 1; }
    .header-nav .header-btn-collapse-nav { order: 2; margin-left: 0; }
}

/* ---------------------------------------- Blog: portada ---------------------------------------- */
.blog-portada { padding-bottom: 50px; }
.blog-cabecera { padding: 48px 0 30px; text-align: center; background: linear-gradient(180deg, var(--tienda-marca-suave) 0%, #fff 100%); }
.blog-rotulo { color: #8a7f81; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; }
.blog-cabecera h1 { font-size: 32px; font-weight: 400; color: var(--tienda-oscuro); letter-spacing: -.01em; line-height: 1.2; margin: 0 auto 10px; max-width: 22ch; }
.blog-intro { color: #7b7173; font-size: 15px; max-width: 52ch; margin: 0 auto; }

.blog-tarjeta { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tienda-linea); border-radius: 16px; overflow: hidden; text-decoration: none !important; color: inherit !important; transition: transform .25s, box-shadow .25s, border-color .25s; }
.blog-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(46, 53, 62, .1); border-color: var(--tienda-marca-borde); }
.blog-tarjeta[hidden] { display: none; }
.blog-tarjeta-imagen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tienda-marca-suave); }
.blog-tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.blog-tarjeta:hover .blog-tarjeta-imagen img { transform: scale(1.04); }
.blog-tarjeta-imagen i { font-size: 38px; color: #fff; opacity: .95; }
.blog-cat-libros { background: linear-gradient(135deg, #c9a87c, #8f6d4a); }
.blog-cat-tutoriales { background: linear-gradient(135deg, #f4a3b1, #d9637a); }
.blog-cat-joyas { background: linear-gradient(135deg, #d9c7ae, #b08d63); }
.blog-cat-vender { background: linear-gradient(135deg, #f7c6cf, #f17c90); }
.blog-cat-empieza { background: linear-gradient(135deg, #f1dfe2, #e0a5b0); }
.blog-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.blog-tarjeta-meta { color: #8a7f81; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.blog-tarjeta-titulo { color: var(--tienda-oscuro); font-size: 17px; font-weight: 600; line-height: 1.3; }
.blog-tarjeta-resumen { color: #6b6264; font-size: 14px; line-height: 1.5; }
.blog-tarjeta-leer { margin-top: auto; padding-top: 6px; color: var(--tienda-marca-texto); font-size: 13px; font-weight: 600; }
.blog-tarjeta-leer i { font-size: 11px; margin-left: 4px; transition: margin .2s; }
.blog-tarjeta:hover .blog-tarjeta-leer i { margin-left: 8px; }

.blog-destacado { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; margin: 26px 0 34px; }
.blog-destacado[hidden] { display: none; }
.blog-tarjeta-grande .blog-tarjeta-imagen { aspect-ratio: 16 / 9; }
.blog-tarjeta-grande .blog-tarjeta-titulo { font-size: 24px; font-weight: 500; }
.blog-tarjeta-grande .blog-tarjeta-resumen { font-size: 15px; }
.blog-destacados-lado { display: grid; gap: 22px; }
.blog-destacados-lado .blog-tarjeta { flex-direction: row; }
.blog-destacados-lado .blog-tarjeta-imagen { flex: 0 0 40%; aspect-ratio: auto; }

.blog-categorias { justify-content: center; margin: 0 0 26px; }
.blog-categorias .tienda-chip { cursor: pointer; font-family: inherit; }
.blog-categorias .tienda-chip i { font-size: 12px; margin-right: 3px; opacity: .8; }
.blog-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.blog-cierre { margin-top: 50px; padding: 36px 24px; text-align: center; border-radius: 18px; background: var(--tienda-marca-suave); }
.blog-cierre h2 { font-size: 24px; font-weight: 400; margin: 0 0 6px; color: var(--tienda-oscuro); }
.blog-cierre p { color: #6b6264; margin: 0 0 18px; }
.blog-cierre-boton { display: inline-block; width: auto; padding: 11px 30px; font-size: 16px; text-decoration: none !important; color: #1c1c1c !important; }

@media (max-width: 991px) {
    .blog-destacado { grid-template-columns: 1fr; }
    .blog-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .blog-cabecera { padding: 34px 0 20px; }
    .blog-cabecera h1 { font-size: 24px; }
    .blog-rejilla { grid-template-columns: 1fr; gap: 16px; }
    .blog-destacados-lado .blog-tarjeta { flex-direction: column; }
    .blog-destacados-lado .blog-tarjeta-imagen { aspect-ratio: 16 / 10; }
    .blog-tarjeta-grande .blog-tarjeta-titulo { font-size: 20px; }
    .blog-categorias { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
    .blog-categorias .tienda-chip { white-space: nowrap; }
}

/* Blog: artículo (ruta de migas, sigue leyendo) */
.blog-migas { padding-top: 22px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a7f81; }
.blog-migas a { color: var(--tienda-marca-texto); }
.blog-migas span { margin: 0 6px; color: #c9bfc1; }
.blog-relacionados { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--tienda-linea); }
.blog-relacionados .blog-rotulo { text-align: center; margin-bottom: 18px; }
.blog-volver { display: flex; justify-content: center; margin: 28px 0 10px; }
.blog-volver .tienda-bolsa-ver { display: inline-flex; padding: 9px 22px; }

/* Celular: botón de filtros junto a la lupa (reemplaza el botón grande "Filtros") */
.tienda-boton-filtros { position: relative; flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--tienda-marca-borde); background: #fff; color: var(--tienda-marca-texto); font-size: 16px; }
.tienda-boton-filtros:hover, .tienda-boton-filtros:focus { background: var(--tienda-marca-suave); color: var(--tienda-marca-texto); }
.tienda-boton-filtros span { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--tienda-marca); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; }
@media (max-width: 767px) { .tienda-filtros details > summary { display: none; } }
#filtros { scroll-margin-top: 170px; }