/* categorias-grid — cuadrícula asimétrica de 4 categorías con hover panel */

#bloque-39 {
    position: relative;
    padding-top:    var(--b39-padding-top, 2rem);
    padding-bottom: var(--b39-padding-bottom, 2rem);
    background-color: var(--b39-color-fondo, var(--bg-white, #fff));
    background-image: var(--b39-imagen-fondo, none);
    background-size:     var(--b39-imagen-tamanio, cover);
    background-position: var(--b39-imagen-posicion, center);
    background-repeat:   var(--b39-imagen-repeat, no-repeat);
    border-top:    var(--b39-borde-sup-grosor, 0px) solid var(--b39-borde-sup-color, var(--border-color, #e5e7eb));
    border-bottom: var(--b39-borde-inf-grosor, 0px) solid var(--b39-borde-inf-color, var(--border-color, #e5e7eb));
}

.b39overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,1);
    opacity: var(--b39-overlay, 0);
    pointer-events: none;
    z-index: 0;
}

.b39inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.b39container {
    max-width: var(--b39-container-max-width, var(--site-container-max-width, 1200px));
    margin-inline: auto;
    padding-inline: var(--site-container-px, 1rem);
}

/* ── Grid asimétrico ──
   Columnas: [col-izq 40%] [col-der-a 30%] [col-der-b 30%]
   Filas:    [fila-top 55%] [fila-bot 45%]
   cat-main  → col 1, rows 1-2  (columna izquierda completa)
   cat-top   → col 2, row 1
   cat-mid   → col 3, rows 1-2  (columna derecha exterior completa)
   cat-bot   → col 2, row 2
*/

.b39grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    grid-template-rows: 55fr 45fr;
    gap: var(--b39-gap, 0.75rem);
    height: var(--b39-alto-grid, 600px);
}

/* ── Celdas ── */

.b39cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--b39-radio, 0.5rem);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-gray-100, #f3f4f6);
}

.b39cat-main {
    grid-column: 1;
    grid-row: 1 / 3;
}

.b39cat-top {
    grid-column: 2;
    grid-row: 1;
}

.b39cat-mid {
    grid-column: 3;
    grid-row: 1 / 3;
}

.b39cat-bot {
    grid-column: 2;
    grid-row: 2;
}

/* ── Contenido visible (título) ── */

.b39cell-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    z-index: 1;
    /* degradado sutil para legibilidad del título */
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 50%);
    transition: opacity 0.35s ease;
}

.b39titulo {
    margin: 0;
    line-height: 1.2;
}

.b39titulo--1 {
    color:       var(--b39-cat-1-titulo-color, #fff);
    font-size:   var(--b39-cat-1-titulo-tam,   1.5rem);
    font-weight: var(--b39-cat-1-titulo-peso,  600);
    text-align:  var(--b39-cat-1-titulo-align, left);
}

.b39titulo--2 {
    color:       var(--b39-cat-2-titulo-color, #fff);
    font-size:   var(--b39-cat-2-titulo-tam,   1.25rem);
    font-weight: var(--b39-cat-2-titulo-peso,  600);
    text-align:  var(--b39-cat-2-titulo-align, left);
}

.b39titulo--3 {
    color:       var(--b39-cat-3-titulo-color, #fff);
    font-size:   var(--b39-cat-3-titulo-tam,   1.25rem);
    font-weight: var(--b39-cat-3-titulo-peso,  600);
    text-align:  var(--b39-cat-3-titulo-align, left);
}

.b39titulo--4 {
    color:       var(--b39-cat-4-titulo-color, #fff);
    font-size:   var(--b39-cat-4-titulo-tam,   1.25rem);
    font-weight: var(--b39-cat-4-titulo-peso,  600);
    text-align:  var(--b39-cat-4-titulo-align, left);
}

/* ── Hover panel ── */

.b39hover-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.35s ease, background-color 0.35s ease;
    z-index: 2;
}

.b39cat-main .b39hover-panel {
    background-color: var(--b39-cat-1-hover-overlay, rgba(0,0,0,0.45));
}
.b39cat-top .b39hover-panel {
    background-color: var(--b39-cat-2-hover-overlay, rgba(0,0,0,0.45));
}
.b39cat-mid .b39hover-panel {
    background-color: var(--b39-cat-3-hover-overlay, rgba(0,0,0,0.45));
}
.b39cat-bot .b39hover-panel {
    background-color: var(--b39-cat-4-hover-overlay, rgba(0,0,0,0.45));
}

.b39cell:hover .b39hover-panel {
    opacity: 1;
}

.b39hover-texto {
    margin: 0;
    text-align: center;
    line-height: 1.4;
    max-width: 90%;
}

.b39hover-texto--1 {
    color:     var(--b39-cat-1-hover-texto-color, #fff);
    font-size: var(--b39-cat-1-hover-texto-tam, 0.95rem);
}
.b39hover-texto--2 {
    color:     var(--b39-cat-2-hover-texto-color, #fff);
    font-size: var(--b39-cat-2-hover-texto-tam, 0.95rem);
}
.b39hover-texto--3 {
    color:     var(--b39-cat-3-hover-texto-color, #fff);
    font-size: var(--b39-cat-3-hover-texto-tam, 0.95rem);
}
.b39hover-texto--4 {
    color:     var(--b39-cat-4-hover-texto-color, #fff);
    font-size: var(--b39-cat-4-hover-texto-tam, 0.95rem);
}

.b39hover-btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.b39hover-btn:hover {
    background-color: #fff;
    color: #000;
}

/* ── Responsive ── */

@media (max-width: 900px) {
    .b39grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    .b39cat-main {
        grid-column: 1 / 3;
        grid-row: auto;
        height: 280px;
    }
    .b39cat-top  { grid-column: 1; grid-row: auto; height: 200px; }
    .b39cat-mid  { grid-column: 2; grid-row: auto; height: 200px; }
    .b39cat-bot  { grid-column: 1 / 3; grid-row: auto; height: 200px; }
}

@media (max-width: 540px) {
    .b39grid {
        grid-template-columns: 1fr;
    }
    .b39cat-main,
    .b39cat-top,
    .b39cat-mid,
    .b39cat-bot {
        grid-column: 1;
        height: 220px;
    }
}

/* Personalizaciones del bloque */
#bloque-39 {
    --b39padding-top: 2rem;
    --b39-padding-top: 2rem;
    --b39padding-bottom: 2rem;
    --b39-padding-bottom: 2rem;
    --b39container-max-width: 1200px;
    --b39-container-max-width: 1200px;
    --b39color-fondo: var(--secondary-color);
    --b39-color-fondo: var(--secondary-color);
    --b39imagen-fondo: url("/images/patrones/bg_pattern_1.png");
    --b39-imagen-fondo: url("/images/patrones/bg_pattern_1.png");
    --b39overlay: 0;
    --b39-overlay: 0;
    --b39imagen-posicion: center;
    --b39-imagen-posicion: center;
    --b39imagen-tamanio: auto;
    --b39-imagen-tamanio: auto;
    --b39imagen-repeat: repeat;
    --b39-imagen-repeat: repeat;
    --b39borde-sup-grosor: 0px;
    --b39-borde-sup-grosor: 0px;
    --b39borde-sup-color: var(--border-color);
    --b39-borde-sup-color: var(--border-color);
    --b39borde-inf-grosor: 0px;
    --b39-borde-inf-grosor: 0px;
    --b39borde-inf-color: var(--border-color);
    --b39-borde-inf-color: var(--border-color);
    --b39gap: 1rem;
    --b39-gap: 1rem;
    --b39alto-grid: 560px;
    --b39-alto-grid: 560px;
    --b39radio: 0.5rem;
    --b39-radio: 0.5rem;
    --b39cat-1-titulo-color: var(--color-white);
    --b39-cat-1-titulo-color: var(--color-white);
    --b39cat-1-titulo-tam: 3rem;
    --b39-cat-1-titulo-tam: 3rem;
    --b39cat-1-titulo-peso: 800;
    --b39-cat-1-titulo-peso: 800;
    --b39cat-1-titulo-align: left;
    --b39-cat-1-titulo-align: left;
    --b39cat-1-hover-overlay: var(--terciario-color);
    --b39-cat-1-hover-overlay: var(--terciario-color);
    --b39cat-1-hover-texto-color: var(--color-white);
    --b39-cat-1-hover-texto-color: var(--color-white);
    --b39cat-1-hover-texto-tam: 1rem;
    --b39-cat-1-hover-texto-tam: 1rem;
    --b39cat-2-titulo-color: var(--color-white);
    --b39-cat-2-titulo-color: var(--color-white);
    --b39cat-2-titulo-tam: 2rem;
    --b39-cat-2-titulo-tam: 2rem;
    --b39cat-2-titulo-peso: 700;
    --b39-cat-2-titulo-peso: 700;
    --b39cat-2-titulo-align: left;
    --b39-cat-2-titulo-align: left;
    --b39cat-2-hover-overlay: var(--terciario-color);
    --b39-cat-2-hover-overlay: var(--terciario-color);
    --b39cat-2-hover-texto-color: var(--color-white);
    --b39-cat-2-hover-texto-color: var(--color-white);
    --b39cat-2-hover-texto-tam: 0.75rem;
    --b39-cat-2-hover-texto-tam: 0.75rem;
    --b39cat-3-titulo-color: var(--color-white);
    --b39-cat-3-titulo-color: var(--color-white);
    --b39cat-3-titulo-tam: 2rem;
    --b39-cat-3-titulo-tam: 2rem;
    --b39cat-3-titulo-peso: 800;
    --b39-cat-3-titulo-peso: 800;
    --b39cat-3-titulo-align: left;
    --b39-cat-3-titulo-align: left;
    --b39cat-3-hover-overlay: var(--terciario-color);
    --b39-cat-3-hover-overlay: var(--terciario-color);
    --b39cat-3-hover-texto-color: var(--color-white);
    --b39-cat-3-hover-texto-color: var(--color-white);
    --b39cat-3-hover-texto-tam: 1rem;
    --b39-cat-3-hover-texto-tam: 1rem;
    --b39cat-4-titulo-color: var(--color-white);
    --b39-cat-4-titulo-color: var(--color-white);
    --b39cat-4-titulo-tam: 2rem;
    --b39-cat-4-titulo-tam: 2rem;
    --b39cat-4-titulo-peso: 500;
    --b39-cat-4-titulo-peso: 500;
    --b39cat-4-titulo-align: left;
    --b39-cat-4-titulo-align: left;
    --b39cat-4-hover-overlay: var(--terciario-color);
    --b39-cat-4-hover-overlay: var(--terciario-color);
    --b39cat-4-hover-texto-color: var(--color-white);
    --b39-cat-4-hover-texto-color: var(--color-white);
    --b39cat-4-hover-texto-tam: 0.75rem;
    --b39-cat-4-hover-texto-tam: 0.75rem;
}