/*
Theme Name: Senseben
Description: Tema de marca — réplica exacta de la paleta/tipografía/sistema de componentes del prototipo original (c:\xampp\htdocs\senseben\assets\css\style.css). Pone la base compartida (variables, contenedor, botones, tarjetas, encabezados de sección) que consumen los widgets de Roger Editor, igual que en el original la base vivía en style.css y los módulos (hero-slider.css, destacados.css, etc.) heredaban de ahí.
Author: Roger Soluciones Web
Version: 0.2.0-fase-c
Text Domain: senseben
*/

/* ============ VARIABLES DE MARCA (calcadas 1:1 del prototipo) ============ */
:root {
    /* Paleta OFICIAL de marca Senseben (ficha del cliente) — mismos hex
       que c:\xampp\htdocs\senseben\assets\css\style.css:8-36. Antes esta
       paleta estaba duplicada en 3 archivos distintos ahí (hero-slider.css,
       destacados.css, category-explorer.css) — acá vive en un solo lugar. */
    --color-marca:        #9298BA;
    --color-primary:      #6F759C;
    --color-primary-dark: color-mix(in srgb, #6F759C 80%, black);
    --color-rose:         #91ADBA;
    --color-rose-soft:    color-mix(in srgb, #91ADBA 18%, white);
    --color-nude:         color-mix(in srgb, #91ADBA 10%, #F8F9FC);
    --color-plum:         #333333;
    --color-sale:         #E0532E;

    --bg:                 #F8F9FC;
    --bg-muted:           color-mix(in srgb, #91ADBA 8%, #F8F9FC);
    --fg:                 #333333;
    --fg-muted:           #8D8D8D;
    --border:             color-mix(in srgb, #91ADBA 25%, white);
    --white:              #FFFFFF;

    --font-display: 'Poppins', sans-serif;
    --font-sans: 'Montserrat', sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-card: 0 2px 14px rgba(51,51,51,0.08);
    --shadow-hover: 0 10px 30px rgba(111,117,156,0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--fg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    color: var(--color-plum);
    margin: 0;
}

/* Contenedor estándar — usado por TODOS los widgets del home/páginas
   (salvo el Hero, que en el original usa su propio max-width de 1360px). */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ TOPBAR (chrome global, va antes que .site-header) —
   réplica de style.css:77-108 del prototipo. No tenía NINGÚN CSS propio
   en el sitio público hasta ahora (solo existía sin querer un selector
   con nombre parecido, .roger-editor-topbar-grupo, que es de la barra
   del editor admin, cosa totalmente distinta). ============ */
.roger-editor-topbar {
    background: var(--color-plum);
    color: var(--bg);
    font-size: 13px;
    text-align: center;
    padding: 8px 16px;
    letter-spacing: .02em;
    overflow: hidden;
    transition: background-color .6s ease;
}
.roger-editor-topbar--1 { background: color-mix(in srgb, var(--color-plum) 78%, var(--color-marca) 22%); }
.roger-editor-topbar--2 { background: color-mix(in srgb, var(--color-plum) 72%, var(--color-primary) 28%); }
.roger-editor-topbar--3 { background: color-mix(in srgb, var(--color-plum) 82%, var(--color-rose) 18%); }
.roger-editor-topbar-texto {
    display: inline-block;
    transition: opacity .35s ease, transform .35s ease;
}
.roger-editor-topbar-texto.roger-editor-topbar-saliendo { opacity: 0; transform: translateX(-24px); }
.roger-editor-topbar-texto.roger-editor-topbar-entrando { opacity: 0; transform: translateX(24px); }

/* ============ ENCABEZADO DE SECCIÓN (compartido por todos los widgets
   del home: Hero, Categorías, Destacados, Marcas, Testimonios, Blog) ============ */
.section { padding: 4rem 0; }
@media (max-width: 767px) { .section { padding: 2rem 0rem; } }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}
@media (min-width: 1199px) {
    .section-head { padding-left: 2rem; }
}
.section-head h2 {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--color-marca);
}
.eyebrow-sm {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 6px;
}
.section-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 2px;
}

/* ============ BOTONES (mismo lenguaje visual en todo el sitio:
   checkout, carrito, PDP, formularios) ============ */
.btn-primario, .roger-editor-hero-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 12px 28px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: background-color .2s ease;
}
.btn-primario:hover, .roger-editor-hero-boton:hover { background: var(--color-primary-dark); }

.btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 12px 28px;
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    transition: background-color .2s ease, color .2s ease;
}
.btn-secundario:hover { background: var(--color-primary); color: #fff; }

/* "Añadir al carrito" — pill outline que se invierte en hover, igual en
   todo widget que muestre productos (Grid/Ficha/Catálogo). */
.btn-add,
.roger-editor-catalogo-nombre-producto ~ .add_to_cart_button,
a.add_to_cart_button {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    background: #fff;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-add:hover, a.add_to_cart_button:hover { background: var(--color-primary); color: #fff; }

/* ============ TARJETA DE PRODUCTO (mismo lenguaje que .product-card del
   original — Grid de productos, Catálogo filtrable, relacionados de la
   Ficha) ============ */
.roger-editor-tarjeta-producto,
.roger-editor-catalogo-tarjeta,
.roger-editor-pf-relacionado-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.roger-editor-tarjeta-producto:hover,
.roger-editor-catalogo-tarjeta:hover,
.roger-editor-pf-relacionado-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.roger-editor-grid-productos-nombre,
.roger-editor-catalogo-nombre-producto,
.roger-editor-pf-relacionado-nombre {
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--fg-muted);
    min-height: 36px;
}
.roger-editor-grid-productos-precio,
.roger-editor-catalogo-precio-producto,
.roger-editor-pf-relacionado-precio {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
}

/* ============ TARJETAS GENÉRICAS (mismo lenguaje: Marcas, Destacados,
   Puntos de venta, Diferenciales de Quiénes somos) ============ */
.roger-editor-nosotros-vm-card,
.roger-editor-nosotros-feature,
.roger-editor-marca-card,
.roger-editor-tarjeta-contenido,
.roger-editor-trust-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: transform .25s, box-shadow .25s;
}
.roger-editor-nosotros-vm-card:hover,
.roger-editor-marca-card:hover,
.roger-editor-tarjeta-contenido:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* ============ MODALES TIPO LIGHTBOX (Testimonios, Antes/Después, Puntos
   de venta) — mismo patrón exacto en todo el sitio original. ============ */
.roger-editor-lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(36,27,33,.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 9990;
}
.roger-editor-lightbox-overlay.abierto { opacity: 1; visibility: visible; }
.roger-editor-lightbox {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s ease, opacity .3s ease;
    z-index: 9991;
    /* Sin background/border-radius/overflow acá: eso lo resuelve la caja
       interna de cada modal concreto (ej. .roger-editor-lightbox-caja de
       Testimonios) — tenerlo también en este wrapper compartido recortaba
       (overflow:hidden) cualquier elemento que un modal hijo necesitara
       mostrar por fuera de su propio recuadro, como las flechas de
       navegación de Testimonios (bug real: quedaban cortadas a la mitad,
       o directamente invisibles si se las alejaba más). */
}
.roger-editor-lightbox-overlay.abierto + .roger-editor-lightbox,
.roger-editor-lightbox.abierto {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
}

/* ============ CARRITO DESLIZANTE (chrome global) — clases reales que
   pinta assets/js/cart-drawer.js del plugin (roger-editor-cart-*), no
   las senseben-cart-* de un borrador anterior que nunca coincidían con
   ningún script real (bug detectado: el botón de carrito no hacía nada). ============ */
.roger-editor-cart-overlay {
    position: fixed; inset: 0;
    background: rgba(36,27,33,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 9998;
}
.roger-editor-cart-overlay.abierto { opacity: 1; visibility: visible; }
.roger-editor-cart-unidad {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    display: flex;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.65,0,.35,1);
    box-shadow: -8px 0 30px rgba(0,0,0,.12);
    font-family: var(--font-sans);
}
.roger-editor-cart-unidad.abierto { transform: translateX(0); }
.roger-editor-cart-seccion {
    width: 380px;
    max-width: 100vw;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.roger-editor-cart-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px; border-bottom: 1px solid var(--border);
}
.roger-editor-cart-drawer-head h3 { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.roger-editor-cart-drawer-close { font-size: 22px; color: var(--fg-muted); line-height: 1; background: none; border: none; cursor: pointer; }
.roger-editor-cart-drawer-body { padding: 16px 20px; flex: 1; }
.roger-editor-cart-vacio { padding: 40px 0; text-align: center; color: var(--fg-muted); font-size: 13.5px; line-height: 1.6; }
.roger-editor-cart-item {
    display: flex; gap: .75rem;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.roger-editor-cart-item img {
    width: 60px; height: 60px; object-fit: cover;
    border-radius: var(--radius-sm);
}
.roger-editor-cart-item-info { display: flex; flex-direction: column; gap: .15rem; flex: 1; font-size: 13px; }
.roger-editor-cart-item-nombre { font-weight: 600; color: var(--fg); }
.roger-editor-cart-item-tipo { color: var(--fg-muted); font-size: 12px; }
.roger-editor-cart-item-precio { font-weight: 700; color: var(--color-primary); }
.roger-editor-cart-item-qty { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.roger-editor-cart-item-qty button {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--border); background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.roger-editor-cart-item-eliminar { position: absolute; top: 14px; right: 0; color: var(--fg-muted); font-size: 18px; }
.roger-editor-cart-item-eliminar:hover { color: var(--color-sale); }
.roger-editor-cart-drawer-foot { padding: 16px 20px; border-top: 1px solid var(--border); }
.roger-editor-cart-envio-texto { font-size: 12.5px; color: var(--fg-muted); margin-bottom: 6px; }
.roger-editor-cart-envio-barra { background: var(--bg-muted); height: 6px; border-radius: 3px; overflow: hidden; margin: .5rem 0; }
.roger-editor-cart-envio-barra-fill { background: var(--color-primary); height: 100%; transition: width .3s ease; }
.roger-editor-cart-resumen-row { display: flex; justify-content: space-between; padding: .25rem 0; font-size: 14px; }
.roger-editor-cart-resumen-total { font-weight: 700; font-size: 16px; color: var(--fg); }
.roger-editor-cart-checkout-btn {
    display: block; text-align: center; margin-top: .75rem;
    padding: 14px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    transition: background-color .2s ease;
}
.roger-editor-cart-checkout-btn:hover { background: var(--color-primary-dark); }
.roger-editor-sug-seccion {
    width: 300px;
    max-width: 80vw;
    background: #fff;
    padding: 24px;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    display: none;
    flex-direction: column;
}
.roger-editor-sug-seccion.visible { display: flex; }
.roger-editor-sug-panel-head { margin-bottom: 18px; }
.roger-editor-sug-panel-head h4 { font-size: 16px; }
.roger-editor-sug-grid { display: flex; flex-direction: column; gap: 18px; }
.roger-editor-sug-card { text-align: left; }
.roger-editor-sug-card img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    border-radius: var(--radius-sm); margin-bottom: 10px;
    background: var(--bg-muted);
}
.roger-editor-sug-card-nombre { font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.3; display: block; margin-bottom: 6px; }
.roger-editor-sug-card-precio { font-size: 14px; font-weight: 700; color: var(--color-primary); display: block; margin-bottom: 10px; }
.roger-editor-btn-add { margin-top: 4px; }

@media (max-width: 900px) {
    .roger-editor-sug-seccion { display: none !important; }
    .roger-editor-cart-seccion { width: 100vw; }
}

/* ============ HEADER REAL (réplica de style.css:110-329 del prototipo) ============ */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,252,251,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.header-main { display: flex; align-items: center; gap: 28px; padding: 16px 24px; }
/* scroll-margin-top: compensa .site-header sticky para que las secciones
   ancladas (#marcas, #testimonios) no queden tapadas por el header al saltar. */
#marcas, #testimonios { scroll-margin-top: 195px; }
.logo { display: inline-flex; align-items: center; white-space: nowrap; }
.logo img { height: 100px; width: auto; display: block; transition: height .25s ease; }
@media (min-width: 769px) {
    .site-header.scrolled .logo img { height: 70px; }
}

.search-bar {
    position: relative; flex: 1; display: flex; align-items: center;
    background: var(--bg-muted); border: 1px solid var(--border);
    border-radius: 999px; padding: 10px 18px; max-width: 560px;
    transition: border-color .2s, box-shadow .2s;
}
.search-bar:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.search-bar input { border: none; background: none; flex: 1; font-family: inherit; font-size: 14px; color: var(--fg); }
.search-bar input:focus-visible { outline: none; }
.search-bar input::placeholder { color: var(--fg-muted); }
.search-bar svg { flex-shrink: 0; color: var(--fg-muted); }

.header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; }
.header-actions-icons { display: flex; align-items: center; gap: 20px; }
.icon-btn {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; color: var(--color-plum);
    transition: background .2s;
}
.icon-btn:hover { background: var(--color-rose-soft); }
.icon-btn .cart-count {
    position: absolute; top: -2px; right: -2px;
    background: var(--color-primary); color: #fff;
    font-size: 10px; font-weight: 700;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.menu-toggle, .mobile-search-btn { display: none; }

.header-quicklinks { width: 220px; display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; }
.header-quicklinks a {
    font-size: 14px; font-weight: 600; color: var(--fg-muted);
    background: var(--bg-muted); border: 1px solid var(--border);
    border-radius: 100px; padding: 6px 14px;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.header-quicklinks a:hover { color: var(--color-primary); border-color: var(--color-primary); background: #fff; }

/* ---- Mega-menú de categorías (hover puro CSS) ---- */
.categories-nav { position: relative; border-top: 1px solid var(--border); }
.categories-nav ul { display: flex; justify-content: space-between; align-items: stretch; padding: 0 24px; max-width: 1240px; margin: 0 auto; }
.categories-nav a {
    display: inline-flex; align-items: center; padding: 13px 16px;
    font-size: 14px; font-weight: 500; color: var(--fg);
    white-space: nowrap; border-bottom: 2px solid transparent;
}
.categories-nav a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.cat-nav-item { position: static; }
.cat-nav-link .chev { width: 9px; height: 9px; margin-left: 6px; transition: transform .25s ease; color: var(--fg-muted); }
.cat-nav-item:hover .cat-nav-link .chev { transform: rotate(180deg); color: var(--color-primary); }

.cat-nav-dropdown {
    position: absolute; top: 100%; left: 50%;
    width: 100%; max-width: 1240px; box-sizing: border-box;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 30px 60px -22px rgba(51,51,51,.32);
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transform: translateX(-50%) translateY(10px) scale(.985);
    transform-origin: top center;
    transition: opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1), visibility .25s;
    z-index: 60; display: flex;
}
.cat-nav-item:hover .cat-nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); }

.cat-nav-dropdown-rail {
    width: 202px; flex-shrink: 0;
    background: linear-gradient(165deg, var(--color-plum), var(--color-primary) 130%);
    color: #fff; padding: 32px 24px;
    display: flex; flex-direction: column; justify-content: center;
}
.cat-nav-dropdown-rail-icon {
    width: 41px; height: 41px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; margin-bottom: 17px;
}
.cat-nav-dropdown-rail-icon svg { width: 22px; height: 22px; }
.cat-nav-dropdown-rail-title { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.25; margin: 0 0 7px; color: #fff; }
.cat-nav-dropdown-rail-tag { font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.7); margin: 0; }
/* El selector arranca con ".categories-nav" a propósito: este enlace vive
   dentro de ese menú, y ".categories-nav a { color: var(--fg) }" —más
   específico que una clase sola— lo pintaba gris oscuro sobre el panel
   oscuro (casi invisible) y violeta al pasar el mouse. Sobre este fondo va
   blanco siempre, en todos los estados. */
.categories-nav .cat-nav-dropdown-rail-cta,
.categories-nav .cat-nav-dropdown-rail-cta:hover,
.categories-nav .cat-nav-dropdown-rail-cta:focus,
.categories-nav .cat-nav-dropdown-rail-cta:visited {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 700; color: #fff;
    margin-top: 19px; padding: 0;
}
.cat-nav-dropdown-rail-cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.cat-nav-dropdown-rail-cta:hover svg { transform: translate(3px,-3px); }

.cat-nav-dropdown-body { padding: 24px; }
.cat-nav-dropdown-eyebrow {
    display: block; font-family: var(--font-sans);
    font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--fg-muted); margin-bottom: 17px;
}
.cat-nav-dropdown-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 228px); gap: 14px; }
.cat-nav-dropdown-grid .cat-nav-card { position: relative; display: block; border-radius: 12px; overflow: hidden; height: 253px; }
.cat-nav-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.cat-nav-card:hover img { transform: scale(1.08); }
.cat-nav-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, rgba(51,51,51,.82) 0%, rgba(51,51,51,.15) 55%, transparent 75%);
}
.cat-nav-card span { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.25; }

.cat-nav-dropdown-foot { margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--border); }
.cat-nav-dropdown-foot a { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--color-marca); }
.cat-nav-dropdown-foot a svg { width: 16px; height: 16px; transition: transform .2s ease; }
.cat-nav-dropdown-foot a:hover svg { transform: translate(3px,-3px); }

/* ============ BUSCADOR EN VIVO (desktop: dos columnas / mobile: modal
   pantalla completa) — réplica 1:1 de style.css del prototipo. ============ */
.search-dropdown {
    position: absolute; top: 100%; left: 50%;
    width: 100%; max-width: 1240px;
    box-sizing: border-box;
    transform: translateX(-50%);
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(36,27,33,0.18);
    display: none;
    overflow: hidden;
    z-index: 80;
    /* Escritorio: cada columna alto según su propio contenido en vez de
       estirarse a la altura de la otra (el "stretch" por defecto de flex
       dejaba la previsualización del producto —mucho más corta que el
       listado de resultados— con un enorme espacio en blanco abajo). En
       mobile (flex-direction:column más abajo) se vuelve a "stretch"
       porque ahí controla el ANCHO, no el alto. */
    align-items: flex-start;
}
.search-dropdown.abierto { display: flex; }
.search-col-preview { align-self: flex-start; }

.search-col-resultados {
    width: 680px; flex-shrink: 0;
    max-height: 552px; overflow-y: auto;
    padding: 16px 0;
    border-right: 1px solid var(--border);
}
.search-col-preview {
    flex: 1;
    padding: 20px;
    max-height: 552px; overflow-y: auto;
}

.search-grupo-titulo {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--fg-muted);
    padding: 6px 20px;
}
.search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background .15s;
}
.search-item:hover, .search-item.activo { background: var(--bg-muted); }
.search-item-icono { color: var(--fg-muted); flex-shrink: 0; }
.search-item img {
    width: 36px; height: 36px; object-fit: cover;
    border-radius: 6px; flex-shrink: 0;
    background: var(--bg-muted);
}
.search-item-texto { min-width: 0; }
.search-item-nombre { font-size: 13.5px; font-weight: 500; color: var(--fg); display: block; line-height: 1.3; }
.search-item-sku { font-size: 11px; color: var(--fg-muted); }

.search-sin-resultados { padding: 30px 20px; text-align: center; color: var(--fg-muted); font-size: 13.5px; }

.search-col-resultados .search-ver-todos-resultados,
.search-col-resultados .search-ver-todos-resultados:hover,
.search-col-resultados .search-ver-todos-resultados:visited {
    display: block; text-align: center;
    margin: 8px 20px 4px;
    padding: 11px; background: var(--bg-muted); color: var(--color-primary);
    border-radius: 999px; font-size: 13px; font-weight: 600;
    white-space: normal; border-bottom: none;
}
.search-col-resultados .search-ver-todos-resultados:hover { background: var(--color-primary); color: #fff; }

.search-preview-cat h4 { font-size: 16px; margin-bottom: 14px; }
.search-preview-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
.search-preview-grid img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    border-radius: var(--radius-sm); margin-bottom: 6px;
    background: var(--bg-muted);
}
.search-preview-grid span { font-size: 11.5px; color: var(--fg); display: block; line-height: 1.3; }
.search-preview-grid .search-preview-grid-item,
.search-preview-grid .search-preview-grid-item:visited {
    display: block;
    padding: 8px; white-space: normal;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg); text-decoration: none;
    transition: border-color .2s ease;
}
.search-preview-grid .search-preview-grid-item:hover { border-color: var(--color-primary); }
.search-preview-grid-item em {
    display: block; margin-top: 2px;
    font-style: normal; font-size: 12px; font-weight: 700;
    color: var(--color-primary);
}
.search-preview-grid-item:hover span { color: var(--color-primary); }
.search-preview-cat .search-ver-categoria,
.search-preview-cat .search-ver-categoria:hover,
.search-preview-cat .search-ver-categoria:visited {
    display: block; text-align: center;
    padding: 11px; background: var(--color-plum); color: #fff;
    border-radius: 999px; font-size: 13px; font-weight: 600;
    white-space: normal; border-bottom: none;
}
.search-preview-cat .search-ver-categoria:hover { background: var(--color-primary); }

.search-preview-prod {
    /* Compacta a propósito, solo pensada para el dropdown de escritorio
       (esta clase no la usa el modal mobile, que tiene su propia versión
       .sm-preview-*): imagen y texto más chicos para que la tarjeta no
       quede mucho más alta que la lista de resultados de al lado. */
    max-width: 46%;
    margin-inline: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    transition: border-color .2s ease;
}
.search-preview-prod:hover { border-color: var(--color-primary); }
.search-preview-prod img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    border-radius: var(--radius-sm); margin-bottom: 10px;
    background: var(--bg-muted);
}
.search-preview-prod h4 { font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
.search-preview-prod p {
    font-size: 12px; color: var(--fg-muted); line-height: 1.5; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-preview-prod .precio-preview { font-size: 15px; font-weight: 700; color: var(--color-primary); margin-bottom: 10px; display: block; }
.search-preview-prod .search-ver-producto,
.search-preview-prod .search-ver-producto:hover,
.search-preview-prod .search-ver-producto:visited {
    display: block; text-align: center;
    padding: 9px; background: var(--color-primary); color: #fff;
    border-radius: 999px; font-size: 13px; font-weight: 600;
    white-space: normal; border-bottom: none;
}
.search-preview-prod .search-ver-producto:hover { background: var(--color-primary-dark); }

@media (max-width: 900px) {
    .search-dropdown { width: 92vw; }
    .search-col-resultados { width: 220px; }
}
@media (max-width: 640px) {
    .search-dropdown { flex-direction: column; width: 90vw; align-items: stretch; }
    .search-col-resultados { width: 100%; max-height: 220px; border-right: none; border-bottom: 1px solid var(--border); }
    .search-col-preview { max-height: 260px; }
}

/* ---- Modal de búsqueda (pantalla completa, <768px) ---- */
.search-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1001; background: #fff;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .3s ease;
    visibility: hidden;
}
.search-modal.open { visibility: visible; transform: translateY(0); width: 100%; height: 100vh; }
body.search-modal-lock { overflow: hidden; }

.search-modal__bar { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.search-modal__input-wrap { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--bg-muted); border-radius: 8px; padding: 10px 14px; min-width: 0; }
.search-modal__icon { color: var(--fg-muted); flex-shrink: 0; width: 18px; height: 18px; }
.search-modal__input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 15px; color: var(--fg); font-family: inherit; }
.search-modal__input::-webkit-search-cancel-button,
.search-modal__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-modal__input::-ms-clear { display: none; width: 0; height: 0; }
.search-modal__clear { background: none; border: none; color: var(--fg-muted); opacity: .5; cursor: pointer; padding: 2px; flex-shrink: 0; transition: opacity .15s ease; }
.search-modal__clear:hover { opacity: .8; }
.search-modal__clear svg { width: 16px; height: 16px; display: block; }
.search-modal__close { background: none; border: none; color: var(--fg); cursor: pointer; padding: 4px; flex-shrink: 0; }
.search-modal__close svg { width: 22px; height: 22px; display: block; }
.search-modal__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.sm-list { padding: 6px 0; }
.sm-section-title { font-weight: 800; font-size: 11px; letter-spacing: .08em; color: var(--fg-muted); padding: 12px 20px 6px; text-transform: uppercase; }
.sm-cat-item, .sm-prod-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 20px; border: none; border-bottom: 1px solid var(--border); background: none; text-align: left; font-family: inherit; cursor: pointer; }
.sm-cat-item svg:first-child { color: var(--color-primary); flex-shrink: 0; }
.sm-cat-item span { flex: 1; font-size: 14px; font-weight: 600; color: var(--fg); }
.sm-chevron { color: var(--fg-muted); flex-shrink: 0; }
.sm-prod-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--bg-muted); flex-shrink: 0; }
.sm-prod-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sm-prod-name { font-size: 14px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-prod-code { font-size: 12px; color: var(--fg-muted); }
.sm-ver-todos { display: block; text-align: center; padding: 16px; font-size: 13px; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.sm-back { display: flex; align-items: center; gap: 8px; width: 100%; padding: 16px 20px; border: none; border-bottom: 1px solid var(--border); background: none; text-align: left; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--fg); cursor: pointer; }
.sm-empty { padding: 48px 24px; text-align: center; }
.sm-empty p { font-size: 14px; color: var(--fg); margin: 0 0 8px; }
.sm-empty-sub { color: var(--fg-muted); font-size: 13px; }

.sm-preview-card { padding: 20px; }
.sm-preview-img { width: 100%; max-width: 280px; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--bg-muted); margin: 0 auto 16px; }
.sm-preview-img img { width: 100%; height: 100%; object-fit: cover; }
.sm-preview-name { font-weight: 700; font-size: 15px; color: var(--fg); line-height: 1.3; margin-bottom: 6px; }
.sm-preview-precio { font-weight: 700; font-size: 16px; color: var(--color-primary); margin-bottom: 10px; }
.sm-preview-desc { font-size: 13px; color: var(--fg-muted); line-height: 1.5; margin-bottom: 18px; }
.sm-preview-btn { display: block; text-align: center; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 13px; padding: 12px 16px; border-radius: 8px; text-decoration: none; }
.sm-preview-cat-label { font-weight: 800; font-size: 11px; letter-spacing: .08em; color: var(--fg-muted); margin-bottom: 6px; text-transform: uppercase; }
.sm-preview-cat-title { font-weight: 700; font-size: 17px; color: var(--fg); line-height: 1.3; margin-bottom: 16px; }
.sm-cat-preview-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.sm-cat-preview-item { display: flex; align-items: center; gap: 10px; text-decoration: none; background: var(--bg-muted); border-radius: 8px; padding: 8px 10px; }
.sm-cat-preview-item img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; background: #fff; flex-shrink: 0; }
.sm-cat-preview-item span { font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.3; }
.sm-ver-categoria-btn { background: var(--color-plum); }
@media (min-width: 769px) {
    .search-modal { display: none !important; }
}

/* ---- Menú mobile (acordeón) ---- */
.mobile-menu {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: block; }
.mobile-menu-bar { display: flex; justify-content: flex-end; padding: 14px 20px 0; }
.mobile-menu-close { background: none; border: none; color: var(--fg); cursor: pointer; padding: 6px; }
.mobile-menu-close svg { width: 22px; height: 22px; display: block; }
.mobile-menu-inner { padding: 8px 24px 40px; }
.mobile-link { display: block; padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--fg); border-bottom: 1px solid var(--border); }
.mobile-cat { border-bottom: 1px solid var(--border); }
.mobile-cat-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; padding: 14px 0; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600; color: var(--fg);
}
.mobile-cat-trigger svg { width: 16px; height: 16px; color: var(--color-primary); transition: transform .2s; flex-shrink: 0; }
.mobile-cat-body { display: none; padding: 0 0 14px 12px; }
.mobile-cat.open .mobile-cat-body { display: block; }
.mobile-cat.open .mobile-cat-trigger svg { transform: rotate(180deg); }
.mobile-cat-all { display: block; padding: 8px 0; font-size: 13px; font-weight: 700; color: var(--color-primary); }
.mobile-cat-item { display: block; padding: 8px 0; font-size: 13px; color: var(--fg-muted); }
.mobile-cat-item:hover { color: var(--fg); }
body.mobile-menu-lock { overflow: hidden; }

/* ---- Barra inferior mobile ---- */
.mobile-bottom-nav {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,.05);
    padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; flex: 1; padding: 8px 4px 10px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--fg-muted);
}
.mobile-bottom-nav-item svg { width: 22px; height: 22px; }
.mobile-bottom-nav-item .cart-count {
    position: absolute; top: 2px; left: 50%; margin-left: 6px;
    background: var(--color-primary); color: #fff;
    font-size: 10px; font-weight: 700;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 768px) {
    /* Header: el buscador de escritorio se oculta (lo reemplaza el ícono
       .mobile-search-btn) y todo se achica para que quepa en una sola
       fila angosta — sin esto, el header quedaba con el mismo layout de
       escritorio apretado en el ancho de un celular (buscador, 6 íconos
       y el logo grande, todo peleando por el mismo espacio). */
    .search-bar { display: none; }
    .header-main { gap: 10px; padding: 12px 16px; }
    .logo img { height: 64px; }
    .header-actions-icons { gap: 6px; }
    .icon-btn { width: 34px; height: 34px; }
    .icon-btn .icon { width: 19px; height: 19px; }
    /* Puntos de venta/Favoritos/Mi cuenta/Carrito bajan a .mobile-bottom-nav
       en mobile — dejarlos también arriba sería duplicar los mismos 4
       accesos dos veces en la misma pantalla (bug real: el header mobile
       mostraba 6 íconos apretados en vez de solo buscador + menú). */
    .icon-btn-bottom-nav { display: none; }
    .categories-nav { display: none; }
    .menu-toggle, .mobile-search-btn { display: flex; }
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: 60px; }
    .header-quicklinks { display: none; }
}

/* ============ BREADCRUMB (réplica de style.css:2253-2260 del prototipo) ============ */
.breadcrumb { font-size: 13px; color: var(--fg-muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--fg-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span { margin: 0 6px; }

/* ============ PLACEHOLDER DE IMAGEN (blog sin foto destacada, réplica de
   style.css:1291-1300 del prototipo) ============ */
.placeholder-gradient {
    background: linear-gradient(120deg, var(--color-marca), var(--color-rose), var(--color-marca));
    background-size: 200% 200%;
    animation: gradientMove 8s ease infinite;
}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============ BLOG — listado (página "Blog" + archivo de categoría, réplica
   de style.css:1823-1891 del prototipo) ============ */
.blog-titulo-pagina { font-size: 30px; }

.blog-buscador {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    max-width: 420px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 11px 18px;
    margin-bottom: 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-buscador:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(194, 41, 92, .15);
}
.blog-buscador svg { flex-shrink: 0; color: var(--fg-muted); }
.blog-buscador input {
    border: none; background: none; flex: 1;
    font-family: inherit; font-size: 14px; color: var(--fg);
}
.blog-buscador input:focus { outline: none; }
.blog-buscador input::placeholder { color: var(--fg-muted); }
.blog-buscador-limpiar {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-muted); font-size: 12px;
    transition: background .2s ease, color .2s ease;
}
.blog-buscador-limpiar:hover { background: var(--border); color: var(--color-sale); }

.blog-resultados-nota { font-size: 13.5px; color: var(--fg-muted); margin-bottom: 24px; }
.blog-resultados-nota strong { color: var(--color-plum); }

.blog-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.blog-filtro {
    padding: 9px 18px; border-radius: 100px;
    border: 1px solid var(--border); background: #fff; color: var(--fg-muted);
    font-size: 13px; font-weight: 600; transition: all .2s ease;
}
.blog-filtro:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blog-filtro.activo { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
    display: block;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
    overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.blog-card-foto { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.blog-card-foto img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-cat {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #fff; background: rgba(36, 20, 28, .55); padding: 5px 12px; border-radius: 100px;
}

.blog-card-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.blog-card-fecha { font-size: 11.5px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .03em; }
.blog-card-body h3 { font-family: var(--font-display); font-size: 18px; color: var(--color-plum); line-height: 1.3; }
.blog-card-body p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; }
.blog-card-leer { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-top: 4px; }

.plp-vacio { text-align: center; padding: 60px 20px; color: var(--fg-muted); }

.plp-paginacion { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 40px 0 64px; }
.pagina-link {
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13.5px; font-weight: 600; color: var(--fg-muted);
}
.pagina-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagina-link.activa { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagina-link.pagina-flecha { min-width: 40px; width: 40px; padding: 0; font-size: 16px; }

@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* ---- Página de entrada individual (réplica de style.css:1893-2039 del
   prototipo) ---- */
.blog-post-layout { padding-top: 1.5rem; }
.blog-post-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
}
.blog-post-col-principal { max-width: none; }

.blog-sidebar {
    display: flex; flex-direction: column; gap: 20px;
    position: sticky; top: 150px;
}
.blog-sidebar-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 22px;
}
.blog-sidebar-titulo {
    display: block; font-size: 14px; font-weight: 700; color: var(--color-plum);
    margin-bottom: 16px;
}
.blog-sidebar-whatsapp { transition: transform .3s ease, box-shadow .3s ease; }
.blog-sidebar-whatsapp:hover {
    transform: translateY(-6px);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .35), -8px -8px 16px rgba(255, 255, 255, .5);
}
.blog-whatsapp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px;
    background: #25D366; color: #fff;
    border-radius: 999px;
    font-size: 13.5px; font-weight: 700;
    transition: background .2s ease;
}
.blog-whatsapp-btn:hover { background: #1ebd5a; }

/* ============ WHATSAPP FLOTANTE ============ */
.whatsapp-flotante{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#25D366;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
    transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-flotante:hover{
    transform:scale(1.08);
    box-shadow:0 6px 18px rgba(0,0,0,.3);
}
@media (max-width:768px){
    /* En mobile hay una barra inferior fija (.mobile-bottom-nav, ~60px) que
       el prototipo no tiene — sin este ajuste el botón de WhatsApp queda
       encima de esa barra y tapa los íconos de Tienda/Carrito/etc. */
    .whatsapp-flotante{ bottom:calc(60px + env(safe-area-inset-bottom) + 14px); }
}
@media (max-width:640px){
    .whatsapp-flotante{ right:14px; width:50px; height:50px; }
    .whatsapp-flotante svg{ width:26px; height:26px; }
}

.blog-sidebar-lista { display: flex; flex-direction: column; gap: 12px; }
.blog-sidebar-lista li { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.blog-sidebar-lista li:last-child { padding-bottom: 0; border-bottom: none; }
.blog-sidebar-lista a { font-size: 13.5px; color: var(--fg-muted); line-height: 1.4; transition: color .2s ease; }
.blog-sidebar-lista a:hover { color: var(--color-primary); }

.blog-sidebar-reciente { display: flex; align-items: center; gap: 0; }
.blog-sidebar-reciente-foto { display: none; }
@media (min-width: 769px) {
    .blog-sidebar-reciente { gap: 12px; }
    .blog-sidebar-reciente-foto {
        display: block; flex-shrink: 0;
        width: 56px; height: 56px; border-radius: var(--radius-sm);
        overflow: hidden; background: var(--bg-muted);
    }
    .blog-sidebar-reciente-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .blog-sidebar-reciente span {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
}

@media (max-width: 900px) {
    .blog-post-grid { grid-template-columns: 1fr; }
    .blog-post-col-principal { max-width: none; }
    .blog-sidebar { position: static; }
}

.blog-post-cabecera { text-align: center; margin-bottom: 28px; }
.blog-post-cat {
    display: inline-flex; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-primary); background: var(--color-rose-soft);
    padding: 5px 14px; border-radius: 100px; margin-bottom: 16px;
}
.blog-post-cabecera h1 { font-size: 32px; line-height: 1.25; margin-bottom: 14px; }
.blog-post-meta { font-size: 13px; color: var(--fg-muted); }
.blog-post-meta-sep { margin: 0 6px; }

.blog-post-foto {
    position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg, 20px);
    overflow: hidden; margin-bottom: 32px;
}
.blog-post-foto img { width: 100%; height: 100%; object-fit: cover; }

.blog-post-contenido { font-size: 15.5px; color: var(--fg); line-height: 1.8; }
.blog-post-contenido p { margin-bottom: 20px; }
.blog-post-contenido p:last-child { margin-bottom: 0; }
.blog-post-contenido h2 { font-size: 22px; margin: 32px 0 14px; }
.blog-post-contenido h3 { font-size: 18px; margin: 28px 0 12px; }
.blog-post-contenido ul, .blog-post-contenido ol { margin: 0 0 20px; padding-left: 22px; }
.blog-post-contenido li { margin-bottom: 8px; }
.blog-post-contenido img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 10px 8px 10px 0; vertical-align: top; }
/* Imágenes consecutivas sin párrafo entre medio (ej. antes/después) quedan
   lado a lado en vez de apiladas — mismo resultado visual que en el sitio
   real, donde esos casos puntuales están armados con un contenedor grid. */
.blog-post-contenido img:has(+ img),
.blog-post-contenido img:has(+ br + img),
.blog-post-contenido img + img,
.blog-post-contenido br + img {
    display: inline-block;
    max-width: calc(50% - 20px);
    margin-right: 12px;
}
.blog-post-contenido img:has(+ br + img) + br,
.blog-post-contenido img + br:has(+ img) {
    display: none;
}

/* Tablas pegadas dentro del contenido (entradas migradas del sitio real,
   sin clase propia) — el prototipo original no tenía tablas en el blog. */
.blog-post-contenido table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 28px;
    font-size: 14.5px;
}
.blog-post-contenido table td,
.blog-post-contenido table th {
    border: 1px solid var(--border);
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}
.blog-post-contenido table thead td,
.blog-post-contenido table thead th {
    background: var(--bg-muted);
    font-weight: 700;
    color: var(--color-plum);
}
.blog-post-contenido table tbody tr:nth-child(even) {
    background: var(--bg-muted);
}

.blog-post-volver {
    display: inline-block; margin-top: 32px;
    font-size: 13.5px; font-weight: 600; color: var(--color-primary);
}
.blog-post-volver:hover { color: var(--color-primary-dark); }

/* ============ AUTENTICACIÓN (Mi cuenta — login/registro nativos de
   WooCommerce, restilizados vía woocommerce/myaccount/form-login.php,
   igual que cuenta/login.php y cuenta/registro.php del prototipo) ============ */
.auth-wrap {
    display: flex; justify-content: center;
    padding: 48px 24px 64px;
}
.auth-card {
    width: 100%; max-width: 440px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 36px;
}
.auth-title { font-size: 26px; margin-bottom: 6px; }
.auth-subtexto { font-size: 13.5px; color: var(--fg-muted); margin-bottom: 24px; }
.auth-switch {
    text-align: center; font-size: 13.5px; color: var(--fg-muted);
    margin-top: 20px;
}
.auth-switch a { color: var(--color-primary); font-weight: 600; }

.auth-card form.woocommerce-form-login,
.auth-card form.woocommerce-form-register {
    border: none;
    padding: 0;
    margin: 0;
}

.ck-field { margin-bottom: 16px; }
.ck-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); margin-bottom: 6px; }
.ck-field input {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 14px; color: var(--fg);
}
.ck-field input:focus { border-color: var(--color-primary) !important; outline: none; }

.btn-comprar {
    display: block;
    padding: 12px 20px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 14px; font-weight: 700;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}
.btn-comprar:hover { background: var(--color-primary-dark); color: #fff; }

.auth-card .woocommerce-error,
.auth-card .woocommerce-message {
    font-size: 13px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    list-style: none;
}
.auth-card .woocommerce-error {
    background: #FDECEA; border: 1px solid #F5A9A0; color: #B3261E;
}
.auth-card .lost_password a { font-size: 13px; color: var(--fg-muted); }
.auth-card .lost_password a:hover { color: var(--color-primary); }

/* ============ FOOTER (réplica de style.css:2200-2247 del prototipo) ============ */
.site-footer { background: var(--bg-muted); border-top: 1px solid var(--border); padding: 56px 0 24px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 32px; margin-bottom: 40px; }
.footer-col h5 {
    font-family: var(--font-sans); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--color-plum); margin-bottom: 16px;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--fg-muted); transition: color .2s; }
.footer-col a:hover { color: var(--color-primary); }
.footer-libro-reclamaciones { display: inline-flex; align-items: center; gap: 6px; }
.footer-brand p { color: var(--fg-muted); margin: 14px 0 18px; max-width: 280px; }
@media (min-width: 769px) {
    .footer-brand { text-align: center; }
    .footer-brand p { margin-left: auto; margin-right: auto; }
}
@media (min-width: 1025px) { .footer-col-legal { padding-right: 1.5rem; } }
.footer-social { display: flex; justify-content: center; gap: 12px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; color: var(--color-plum);
}
.footer-social a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.footer-bottom {
    border-top: 1px solid var(--border); padding-top: 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    color: var(--fg-muted); font-size: 13px;
}
.payment-icons { display: flex; gap: 8px; }
.payment-icons span { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; }

@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; }
    .site-footer { padding-top: 28px; }
    .footer-brand { text-align: center; }
    .footer-brand p { margin-left: auto; margin-right: auto; }
    .footer-col:not(.footer-brand) { border-top: 1px solid var(--border); padding-top: 14px; }
    .footer-col-title { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 0; }
    .footer-col-icono { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
    .footer-col-icono::before, .footer-col-icono::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--color-plum); transform: translate(-50%,-50%); }
    .footer-col-icono::before { width: 14px; height: 2px; }
    .footer-col-icono::after { width: 2px; height: 14px; transition: transform .2s ease; }
    .footer-col.abierto .footer-col-icono::after { transform: translate(-50%,-50%) rotate(90deg); }
    .footer-links { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
    .footer-col.abierto .footer-links { max-height: 400px; margin-top: 14px; }
}