/* =========================================================================
   Bellota V2 — Catálogo (listing, section, family, detail)
   Basado en las vistas de Leo pero simplificado sin Bootstrap/Owl/Magnific.
   ========================================================================= */

/* Fuente de iconos técnicos (A, B, C, H, Q, ø, …) usada en las cabeceras y
   leyendas de la tabla técnica de la ficha de producto. Es la misma
   BellotaAgrisolutions_iconografia.ttf del sitio de Leo.
   Dedupe: comparte fichero binario con `bellota-icons` (base.css) — MD5
   idéntico. Distintas familias, MISMA URL → una sola descarga. */
@font-face {
    font-family: 'bellota-iconos';
    src: url('/assets/public/fonts/bellota-icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* -------- Encabezado común -------------------------------------------- */
.cat-page-header { background: var(--c-surface-alt); padding: 32px 0 24px; }
.cat-page-header--compact { padding: 20px 0 12px; }
.cat-page-header h1 { margin: 8px 0 0; font-size: clamp(28px, 3vw, 40px); color: var(--c-text-strong); }

/* -------- Listing raíz — 5 secciones base --------------------------------
   Cards uniformes en el mismo estilo que .news-card (fondo blanco, borde
   suave, hover translate + shadow). Las 5 secciones son igualmente
   importantes → sin hero destacado. Grid de 3 columnas en desktop → las
   dos últimas quedan naturalmente en la fila 2. */
.cat-root-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}
@media (min-width: 720px)  { .cat-root-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cat-root-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.cat-root-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.cat-root-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
}

.cat-root-card-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f6f7f9;
    display: flex; align-items: center; justify-content: center;
}
.cat-root-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}
.cat-root-card:hover .cat-root-card-img img { transform: scale(1.05); }
.cat-root-card-empty { color: #d1d5db; }

.cat-root-card-body {
    padding: var(--sp-5);
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
}
.cat-root-card-title {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
}
.cat-root-card-link {
    color: inherit;
    text-decoration: none;
}
/* Stretched link: toda la card es clickable y lleva al detail */
.cat-root-card-link::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
}
.cat-root-card:hover .cat-root-card-title { color: var(--c-brand); }

.cat-root-card-excerpt {
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.cat-root-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}
.cat-root-card-pdf {
    position: relative;
    z-index: 2; /* por encima del stretched link para no bloquear el download */
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: #fee2e2;
    color: var(--c-brand);
    border-radius: var(--r-sm);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.cat-root-card-pdf:hover { background: var(--c-brand); color: #fff; }

/* -------- Section: grid de familias por grupo ------------------------- */
/* Fallback CSS (para no-JS): N columnas fijas con Grid, alturas independientes.
   El JS de catalog-section.js aplica posicionamiento masonry encima — con JS
   activo, los .cat-group tienen position:absolute y la columna se llena en
   la más corta cada vez (siempre N columnas visibles, sin huecos). */
.cat-group-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
@media (min-width: 900px) {
    .cat-group-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .cat-group-grid--3,
    .cat-group-grid--4,
    .cat-group-grid--5,
    .cat-group-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
/* Cuando JS activa masonry, sobreescribe con position:relative + altura fija */
.cat-group-grid.is-masonry { display: block; position: relative; }
.cat-group-grid.is-masonry .cat-group { position: absolute; margin: 0; box-sizing: border-box; }
.cat-group {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 20px;
}
.cat-group-title {
    margin: 0 0 16px; padding-bottom: 10px;
    border-bottom: 2px solid var(--c-brand);
    color: var(--c-text-strong); font-size: 20px; font-weight: 700;
}
.cat-family-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Layout HORIZONTAL: imagen izq + nombre dcha alineado a la izquierda.
   `minmax(0, 1fr)` en la 2ª columna evita que crezca por contenido no-breakable
   (palabras largas RU/DE tipo "ГЛУБОКОРЫХЛИТЕЛЬ" o "Sämaschine"). El nombre
   rompe con `overflow-wrap: anywhere` — baja a la línea siguiente sin desbordar. */
.cat-family-item a.cat-family-link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px; align-items: center;
    padding: 8px; border-radius: 6px; text-decoration: none; color: inherit;
    transition: background .15s ease;
}
.cat-family-item a.cat-family-link:hover { background: var(--c-surface-alt); }
/* Thumbnail con tamaño FIJO en px — sin aspect-ratio (que fallaba porque el
   grid-item con align-items:center no estira su ancho, y el div tomaba el
   tamaño natural de la imagen contenida). */
.cat-family-img {
    width: 96px; height: 96px;
    background: #fff; border: 1px solid var(--c-border); border-radius: 6px;
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
}
/* width/height 100% + contain: la imagen SIEMPRE se escala para verse
   completa dentro del thumbnail (sin recorte, sin quedarse pequeña por su
   tamaño natural). */
.cat-family-img img {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
}
.cat-family-name {
    margin: 0; font-size: 15px; font-weight: 600;
    color: var(--c-text-body); text-transform: uppercase; letter-spacing: .01em;
    /* Palabras muy largas (RU/DE) rompen dentro del contenedor en vez de desbordar */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* -------- Manual page: cuerpo + galería ------------------------------- */
.cat-manual-body {
    color: var(--c-text-body);
    line-height: 1.7;
    font-size: var(--fs-md);
}
.cat-manual-body p { margin: 0 0 var(--sp-4); }
.cat-manual-body h2 { color: var(--c-brand); font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-3); }
.cat-manual-body h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); }
.cat-manual-body ul, .cat-manual-body ol { margin: 0 0 var(--sp-4) var(--sp-6); }
.cat-manual-body a { color: var(--c-brand); }
.cat-manual-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: var(--sp-4) 0; }
.cat-manual-body strong { color: var(--c-text-strong); }

/* Galería: cuadrícula uniforme 2 columnas (1 en móvil), todas las tarjetas
   con la misma proporción para que se vea limpio aunque las fotos originales
   tengan ratios muy distintos. Click abre la imagen completa en lightbox. */
.cat-manual-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    margin: var(--sp-6) 0;
}
.cat-manual-gallery-item {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #f6f7f9;
}
.cat-manual-gallery-item img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease, opacity .2s ease;
}
.cat-manual-gallery-item:hover img { transform: scale(1.03); opacity: .96; }
@media (max-width: 640px) {
    .cat-manual-gallery { grid-template-columns: 1fr; }
}

.cat-manual-pdf { margin-top: var(--sp-6); }

/* Visor de PDF inline (páginas manuales) — pdf.js renderiza cada página
   como canvas PLANO, sin la toolbar del visor nativo. Mismo patrón que Leo. */
.cat-manual-pdf-viewer {
    margin: var(--sp-6) 0;
    background: #f6f7f9;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: var(--r-sm, 6px);
    padding: var(--sp-4);
    overflow: hidden;
}
.cat-manual-pdf-viewer .pdf-page-canvas {
    display: block;
    width: 100%; height: auto;
    margin: 0 auto var(--sp-4);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.cat-manual-pdf-viewer .pdf-page-canvas:last-child { margin-bottom: 0; }
.cat-manual-pdf-loading {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

/* -------- Family: cross-linking al catálogo (final de página) ---------
   Bloque final que muestra las 5 secciones raíz para invitar a explorar
   más del catálogo. Va separado del contenido con un divisor sutil
   arriba y padding generoso a ambos lados. */
.cat-cross-links {
    margin-top: var(--sp-16);           /* separación clara del listado */
    padding: var(--sp-12) 0 var(--sp-16);
    background: var(--c-surface-alt);
    border-top: 1px solid var(--c-border);
}
.cat-cross-links-header {
    text-align: center;
    margin-bottom: var(--sp-8);
}
.cat-cross-links-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-brand);
    margin-bottom: var(--sp-3);
}
.cat-cross-links-title {
    margin: 0;
    font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-2xl));
    font-weight: var(--fw-bold);
    color: var(--c-text-strong);
    letter-spacing: -0.02em;
}

/* -------- Family: layout sidebar + main ------------------------------- */
.cat-family-layout {
    display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 992px) { .cat-family-layout { grid-template-columns: 220px 1fr; } }

/* Sidebar en flujo normal — sin sticky ni scroll propio. Scrollea junto
   con el contenido, así el usuario ve el final del listado de familias
   sin tener que llegar al final de los productos. */
.cat-family-sidebar { align-self: start; }
.cat-sidebar-accordion { border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; background: var(--c-surface); }
.cat-sidebar-group { border-bottom: 1px solid var(--c-border); }
.cat-sidebar-group:last-child { border-bottom: 0; }

/* Título de accordion — discreto + chevron rotativo para indicar clic */
.cat-sidebar-group-title {
    cursor: pointer; padding: 11px 14px; font-weight: 600;
    color: var(--c-text-body); font-size: 13px;
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--c-surface-alt);
    list-style: none; user-select: none;
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    transition: background .12s ease;
}
.cat-sidebar-group-title:hover { background: #eeeeee; }
.cat-sidebar-group-title::-webkit-details-marker { display: none; }
.cat-sidebar-group-title::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid var(--c-text-muted);
    border-bottom: 2px solid var(--c-text-muted);
    transform: rotate(45deg);
    transition: transform .18s ease, border-color .18s ease;
    flex-shrink: 0;
    margin-right: 2px;
}
.cat-sidebar-group[open] > .cat-sidebar-group-title { color: var(--c-brand); }
.cat-sidebar-group[open] > .cat-sidebar-group-title::after {
    transform: rotate(-135deg);
    border-color: var(--c-brand);
}

.cat-sidebar-list { list-style: none; margin: 0; padding: 8px 10px 12px; display: grid; gap: 2px; }
.cat-sidebar-item a {
    display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center;
    padding: 6px 8px; border-radius: 4px; text-decoration: none; color: var(--c-text-body); font-size: 13px;
    line-height: 1.35;
    transition: background .12s ease;
}
.cat-sidebar-item a:hover { background: var(--c-surface-alt); }
.cat-sidebar-item.is-current a { background: var(--c-brand-soft); color: var(--c-brand-dark); font-weight: 600; }


/* Thumbnail cuadrado FIJO en pixels — la imagen se centra dentro con contain,
   así todas las miniaturas del sidebar quedan del mismo tamaño visual. */
.cat-sidebar-img {
    width: 40px; height: 40px;
    background: #fff; border: 1px solid var(--c-border); border-radius: 3px;
    display: grid; place-items: center; padding: 3px; overflow: hidden;
    flex-shrink: 0;
}
.cat-sidebar-img img {
    display: block; width: 100%; height: 100%; object-fit: contain;
}

/* -------- Buscador top de familia ------------------------------------- */
.cat-family-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding: 14px 16px; margin-bottom: 20px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.cat-toolbar-field {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 260px; min-width: 220px;
    background: var(--c-surface-alt); border: 1px solid var(--c-border-soft);
    border-radius: 6px; padding: 0 10px 0 12px;
    transition: border-color .15s ease, background .15s ease;
}
.cat-toolbar-field:focus-within { border-color: var(--c-brand); background: #fff; }
.cat-toolbar-field svg { color: var(--c-text-muted); flex-shrink: 0; }
.cat-toolbar-field input,
.cat-toolbar-field select {
    flex: 1; border: 0; background: transparent; padding: 11px 4px;
    font: inherit; color: var(--c-text-body); outline: 0; min-width: 0;
}
.cat-toolbar-field select { cursor: pointer; padding-right: 8px; }
.cat-toolbar-field input::placeholder { color: var(--c-text-soft); }
.cat-toolbar-clear {
    background: none; border: 0; color: var(--c-text-muted);
    font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px;
    display: none;
}
.cat-toolbar-field.has-value .cat-toolbar-clear { display: inline-flex; }
.cat-toolbar-hint {
    flex-basis: 100%; font-size: 12px; color: var(--c-text-muted); margin: -4px 0 0;
}
.cat-toolbar-empty {
    display: none; padding: 40px 20px; text-align: center; color: var(--c-text-muted);
    background: var(--c-surface-alt); border: 1px dashed var(--c-border); border-radius: 8px;
}
.cat-product-grid.has-no-matches ~ .cat-toolbar-empty { display: block; }

/* -------- Grid de productos — cards "pro" ----------------------------- */
.cat-family-main { min-width: 0; }
/* Cards con ancho máximo controlado — si sobran huecos a la derecha, se dejan
   vacíos: mejor eso que ver 2 tarjetas gigantes cuando la familia tiene pocas. */
/* Subimos el min a 260px para tener MENOS columnas pero MÁS grandes:
   3-4 cards por fila típicamente. Con `1fr` los cards estiran para llenar
   el ancho completo del grid en partes iguales. */
.cat-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.cat-product-card {
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.cat-product-card:hover {
    border-color: var(--c-brand);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.cat-product-card.is-hidden,
.cat-family-item.is-hidden,
.cat-group.is-hidden { display: none; }

/* Caja de imagen con ALTURA FIJA (no aspect-ratio): así todos los cards del
   grid tienen exactamente el mismo tamaño de foto, independientemente del
   ancho de columna y de la proporción original del PNG. La imagen se centra
   con object-fit:contain sin recortarse. */
.cat-product-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 260px;
    flex-shrink: 0;    /* no se comprime aunque el card padre crezca */
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--c-border);
    overflow: hidden;
}
.cat-product-img img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .3s ease;
}
.cat-product-card:hover .cat-product-img img { transform: scale(1.04); }

/* Body con altura mínima consistente + flex-grow — así todos los cards de una
   fila tienen la misma altura total aunque uno tenga título de 2 líneas y otro
   de 3: el body absorbe el espacio extra que el grid stretch reparte y no
   queda hueco visual al final del card corto. */
.cat-product-body {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 14px 16px;
    min-height: 74px;
    flex: 1 0 auto;
    text-decoration: none; color: inherit;
    border-top: 0;
}
.cat-product-name {
    margin: 0; flex: 1;
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--c-text-strong); line-height: 1.35;
    /* Clamp defensivo: si un título es larguísimo (>4 líneas) se corta con
       "…" para no romper el layout del grid. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-product-chevron {
    color: var(--c-brand); font-weight: 700; font-size: 22px; line-height: 1;
    flex-shrink: 0;
}
/* Wrapper columna usado por la página de resultados de búsqueda: nombre + sub.
   El .cat-product-body sigue siendo flex row (meta + chevron), y DENTRO del
   meta apilamos nombre y la línea de "familia · sección · ref.original". */
.cat-product-meta {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1; min-width: 0;
}
.cat-product-sub {
    display: flex; flex-wrap: wrap; gap: 4px 6px;
    font-size: 11px; color: var(--c-text-muted);
    font-weight: 500; letter-spacing: 0;
    text-transform: none;
}
.search-ref-original {
    display: inline-block;
    padding: 1px 6px;
    background: #fee2e2;
    color: var(--c-brand);
    border-radius: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10.5px;
    font-weight: 600;
}
.search-results-count {
    margin: 8px 0 0;
    color: var(--c-text-muted);
    font-size: 14px;
}
.search-tips {
    margin-top: 8px;
    font-size: 13px;
    color: var(--c-text-muted);
}

/* -------- Detail: galería + info -------------------------------------- */
.cat-detail-hero {
    display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 900px) { .cat-detail-hero { grid-template-columns: minmax(320px, 42%) 1fr; } }

/* Variante compacta para la landing /ref/{sku}: la imagen es una sola foto
   plana (disco, reja) y la caja default 260px queda "tirada". Columna más
   estrecha + caja más baja + texto centrado verticalmente respecto a la
   imagen. Móvil sigue apilando (herencia de .cat-detail-hero). */
.cat-detail-hero--ref { align-items: center; }
@media (min-width: 900px) {
    .cat-detail-hero--ref { grid-template-columns: minmax(220px, 300px) 1fr; gap: 40px; }
}
.cat-detail-hero--ref .cat-product-img { height: 220px; }
@media (max-width: 899px) {
    .cat-detail-hero--ref .cat-product-img { max-width: 320px; margin: 0 auto; height: 200px; }
}

.cat-gallery-main {
    position: relative;
    aspect-ratio: 1;
    background: #fff; border: 3px solid var(--c-border);
    overflow: hidden;
}
.cat-gallery-main img {
    /* Con position absolute y inset 0 la imagen queda garantizada dentro del
       cuadro. object-fit: contain la escala completa sin recortar. */
    position: absolute;
    inset: 0;
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    cursor: crosshair;
    padding: 12px;
    box-sizing: border-box;
}
.cat-gallery-lens {
    position: absolute; width: 220px; height: 220px; border-radius: 50%;
    border: 2px solid var(--c-brand); background-repeat: no-repeat; background-color: #fff;
    pointer-events: none; opacity: 0; transition: opacity .12s ease; display: none;
    z-index: 2;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
@media (min-width: 900px) { .cat-gallery-lens { display: block; } }

/* Botonera de zoom flotante en la esquina superior derecha del cuadro */
.cat-gallery-zoom {
    position: absolute; top: 10px; right: 10px;
    display: flex; gap: 2px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 3px;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.cat-zoom-btn {
    background: transparent; border: 0;
    padding: 4px 9px;
    font-size: 12px; font-weight: 600;
    color: var(--c-text-muted);
    cursor: pointer; border-radius: 4px;
    transition: background .12s ease, color .12s ease;
    line-height: 1;
}
.cat-zoom-btn:hover { background: var(--c-surface-alt); color: var(--c-text-body); }
.cat-zoom-btn.is-active {
    background: var(--c-brand); color: #fff;
}
.cat-zoom-btn.is-active:hover { background: var(--c-brand-dark); color: #fff; }

/* Carrusel de miniaturas: mismo tamaño (88x88), scroll horizontal con dos
   flechas overlay para navegar. */
.cat-gallery-thumbs-wrap {
    position: relative;
    margin-top: 12px;
}
.cat-gallery-thumbs {
    display: flex; gap: 8px;
    overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none;   /* Firefox */
    padding: 2px 0;
    scroll-padding-inline: 0;
}
/* Solo cuando hay overflow (JS añade .has-overflow al wrap): reservamos
   padding lateral para que las flechas no tapen las thumbs. Sin overflow,
   los thumbs se alinean al borde izquierdo, con la imagen principal. */
.cat-gallery-thumbs-wrap.has-overflow .cat-gallery-thumbs {
    padding-left: 40px;
    padding-right: 40px;
    scroll-padding-inline: 40px;
}
.cat-gallery-thumbs::-webkit-scrollbar { display: none; }
.cat-gallery-thumb {
    width: 88px; height: 88px;
    flex: 0 0 88px;
    padding: 6px; background: #fff; border: 2px solid var(--c-border);
    cursor: pointer;
    display: grid; place-items: center;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color .12s ease;
}
.cat-gallery-thumb img {
    display: block;
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain;
}
.cat-gallery-thumb.is-active,
.cat-gallery-thumb:hover { border-color: var(--c-brand); }

/* Flechas del carrusel de miniaturas: pill circular oscura sobre el
   contenedor, siempre visibles sobre cualquier color de miniatura.
   El wrap usa flex align-items:center para que el centrado sea garantizado
   aunque el thumbs interior tenga padding o altura variable. */
.cat-gallery-thumbs-wrap {
    display: flex; align-items: center;
}
.cat-gallery-thumbs { flex: 1 1 auto; }
.cat-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px;
    display: grid; place-items: center;
    background: rgba(20, 20, 24, .96);
    border: 0; border-radius: 50%;
    cursor: pointer;
    color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    transition: background .12s ease, transform .12s ease, opacity .15s ease;
    z-index: 2;
}
.cat-gallery-nav:hover {
    background: var(--c-brand);
    transform: translateY(-50%) scale(1.08);
}
.cat-gallery-nav[disabled] { opacity: .3; cursor: default; }
.cat-gallery-nav[disabled]:hover { background: rgba(20, 20, 24, .96); transform: translateY(-50%); }
.cat-gallery-nav--prev { left: 4px; }
.cat-gallery-nav--next { right: 4px; }
.cat-gallery-nav[hidden] { display: none; }

.cat-detail-title { margin: 0 0 12px; color: var(--c-brand); font-size: clamp(24px, 3vw, 38px); font-weight: 700; }
.cat-detail-desc { font-size: 15px; color: var(--c-text-body); line-height: 1.55; }
.cat-detail-cabeceras { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cat-detail-cabecera-item {
    display: block; width: 130px; aspect-ratio: 1; padding: 6px;
    background: #fff; border: 2px solid var(--c-border); cursor: zoom-in;
}
.cat-detail-cabecera-item img { width: 100%; height: 100%; object-fit: contain; }

/* Aire al final de la ficha del producto — evita que la última tabla
   cruzada quede pegada al footer tras quitar el bloque "Relacionados". */
.cat-detail-main { padding-bottom: var(--sp-10); }

/* -------- Tabla técnica ----------------------------------------------- */
.cat-detail-h2 { margin: 32px 0 16px; font-size: 22px; color: var(--c-text-strong); font-weight: 700; }
.cat-detail-h3 { margin: 22px 0 12px; font-size: 18px; color: var(--c-text-strong); font-weight: 700; }
.cat-tech-wrap {
    overflow: auto; max-height: 80vh;
    border: 1px solid var(--c-border);       /* filo fino izq+der+arriba */
    border-bottom: 5px solid var(--c-brand); /* barra roja gruesa al pie */
    border-radius: 4px 4px 0 0;
    margin-bottom: var(--sp-6);
}
.cat-tech-wrap:last-child { margin-bottom: 0; }
/* Aire extra entre tablas cruzadas consecutivas (cada una precede a un h3
   de sección siguiente o cierra el bloque) */
.cat-tech-wrap + .cat-detail-h3 { margin-top: var(--sp-8); }
.cat-tech-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cat-tech-table thead th {
    position: sticky; top: 0;
    background: var(--c-brand); color: #fff; text-align: center;
    padding: 10px 12px; font-weight: 600; white-space: nowrap;
}
.cat-tech-table thead th.cat-th-icon {
    font-family: 'bellota-iconos', 'Times New Roman', serif;
    font-weight: normal; font-style: normal;
    font-size: 26px; line-height: 1;
    color: #ffe0e0;   /* rojo Bellota clareado — misma jerarquía que Leo (gris claro sobre rojo) */
}
.cat-tech-table tbody td { padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--c-border); }
.cat-tech-table tbody tr:nth-child(even) { background: #f7f7f7; }
.cat-tech-table tbody tr:hover { background: var(--c-brand-soft); }

/* Fila resaltada cuando el usuario abre la ficha desde el buscador de la home
   (?q=<ref>) y esa referencia aparece dentro de la tabla técnica. */
.cat-tech-table tbody tr.is-highlighted {
    background: #fef3c7 !important;
    box-shadow: inset 3px 0 0 #ca8a04;   /* mostaza, combina con el fondo amarillo pastel */
    animation: cat-tech-flash 1.4s ease-out 1;
}
.cat-tech-table tbody tr.is-highlighted td { font-weight: 600; }
@keyframes cat-tech-flash {
    0%   { background: #fde68a; }
    50%  { background: #fbbf24; }
    100% { background: #fef3c7; }
}

.cat-tech-legend { margin: 14px 0 0; display: flex; flex-direction: column; gap: 4px; }
.cat-legend-item {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0;
    color: var(--c-text-muted); font-size: 14px; line-height: 1.4;
}
.cat-legend-badge {
    display: inline-grid; place-items: center; min-width: 26px; height: 26px;
    padding: 0 6px; border-radius: 3px;
    background: var(--c-brand); color: #fff;
    font-family: 'bellota-iconos', 'Times New Roman', serif;
    font-weight: normal; font-style: normal;
    font-size: 18px; line-height: 1;
}
.cat-legend-item--phrase { color: var(--c-text-body); }
.cat-frase-link { color: var(--c-brand); text-decoration: underline; text-underline-offset: 2px; }
.cat-frase-link:hover { color: var(--c-brand-dark); }

/* Celda de tabla técnica cuyo valor es un código de tornillo enlazable */
.cat-td-link {
    color: var(--c-brand); font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
}
.cat-td-link:hover { color: var(--c-brand-dark); border-bottom-style: solid; }

/* Link "(Ver ↗)" al lado de la leyenda de tornillos */
.cat-legend-link {
    color: var(--c-brand); font-weight: 600;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 2px;
}
.cat-legend-link:hover { color: var(--c-brand-dark); text-decoration: underline; }
.cat-legend-link svg { vertical-align: middle; }

/* -------- Texto largo + Relacionados ---------------------------------- */
.cat-longtext {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px;
    padding: 14px 18px;
}
.cat-longtext > summary {
    cursor: pointer; font-weight: 600; color: var(--c-brand); font-size: 15px;
    list-style: none;
}
.cat-longtext > summary::-webkit-details-marker { display: none; }
.cat-longtext > summary::after { content: '›'; margin-left: 6px; transition: transform .15s ease; display: inline-block; }
.cat-longtext[open] > summary::after { transform: rotate(90deg); }
.cat-longtext-body { margin-top: 12px; color: var(--c-text-body); font-size: 15px; line-height: 1.6; }

.cat-related-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (min-width: 720px) { .cat-related-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-related-card { display: block; text-decoration: none; color: inherit; }
.cat-related-img {
    aspect-ratio: 1; background: #fff; border: 2px solid var(--c-brand);
    display: grid; place-items: center; padding: 10px;
}
.cat-related-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-related-name { display: block; padding: 8px 0; font-size: 13px; color: var(--c-text-body); text-align: center; }

/* Wrapper del bloque de cards de productos citados en las frases
   (patrón Leo V1). Se pega al bloque de la tabla principal sin la
   wrapper .section; el aspecto de las cards viene de components/cards.css
   (.product-card + .card-grid). */
.cat-frases-wrap {
    margin-top: 4px;
    padding-bottom: var(--sp-4);
}

/* Lightbox → assets/public/css/components/lightbox.css (compartido) */

/* =========================================================
   Sección con bloque editorial extra (banner + sidebar + info)
   Editable desde /_adm/producto-secciones/edit
   ========================================================= */

/* Grid principal: main a la izquierda + sidebar 300px a la derecha */
.cat-sec-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-8);
    align-items: start;
}
@media (max-width: 900px) {
    .cat-sec-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.cat-sec-main { min-width: 0; }
.cat-sec-side { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: var(--sp-6); }
@media (max-width: 900px) { .cat-sec-side { position: static; } }

/* Bloque unificado sección+imagen+PDF para la vista de página manual —
   presenta los 3 elementos como una tarjeta única "todo en uno". */
.cat-sec-side-block {
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: #fff;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.cat-sec-side-block .cat-sec-side-figure {
    border: 0; box-shadow: none;
}
.cat-sec-side-title {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    text-decoration: none;
    line-height: 1.25;
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--c-brand);
    transition: color .12s;
}
.cat-sec-side-title:hover { color: var(--c-brand); }

/* Descripción bajo el H1 (o encima del listado de familias si no hay banner) */
.cat-sec-desc {
    color: var(--c-text-body);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin: 0 0 var(--sp-6);
    max-width: 780px;
}

/* Sidebar: imagen destacada + card catálogo */
.cat-sec-side-figure {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--c-border, #e5e7eb);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.cat-sec-side-figure img { display: block; width: 100%; height: auto; cursor: zoom-in; }

/* Card de descarga de catálogo — layout compacto: icono+título en una fila
   y el botón PDF a ancho completo abajo. Aguanta bien un sidebar estrecho
   (300px) sin romper el texto en 3 líneas. */
.cat-sec-side-card {
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 60%);
    border: 1px solid #fecaca;
    border-radius: 10px;
}
.cat-sec-side-card-head {
    display: flex; align-items: center; gap: var(--sp-3); min-width: 0;
}
.cat-sec-side-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fee2e2; color: var(--c-brand);
    border-radius: 8px;
}
.cat-sec-side-icon svg { width: 20px; height: 20px; }
.cat-sec-side-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-sec-side-text strong { color: var(--c-text-strong); font-size: var(--fs-sm); line-height: 1.25; }
.cat-sec-side-text small { color: var(--c-text-muted); font-size: 11px; line-height: 1.3; }
.cat-sec-side-card .btn { width: 100%; justify-content: center; }

/* Bloque info extra al final (fondo section-alt, texto libre HTML) */
.cat-sec-info { padding: var(--sp-6) 0; }
/* Bloque limitado a 900px pero alineado a la izquierda del container (no
   centrado) — así arranca al mismo left que el resto del contenido y no
   parece flotar en medio del ancho. */
.cat-sec-info-inner { max-width: 900px; margin-right: auto; margin-left: 0; }
.cat-sec-info-title {
    color: var(--c-brand);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--sp-4);
    line-height: 1.2;
}
.cat-sec-info-body {
    color: var(--c-text-body);
    font-size: var(--fs-md);
    line-height: 1.75;
}
.cat-sec-info-body p { margin: 0 0 var(--sp-4); }
.cat-sec-info-body h2 { color: var(--c-brand); font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-3); }
.cat-sec-info-body h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); }
.cat-sec-info-body ul, .cat-sec-info-body ol { margin: 0 0 var(--sp-4) var(--sp-6); }
.cat-sec-info-body li { margin-bottom: var(--sp-1); }
.cat-sec-info-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: var(--sp-4) 0; }
.cat-sec-info-body a { color: var(--c-brand); }
.cat-sec-info-body strong { color: var(--c-text-strong); }