/* Plantilla: banner-hero — Banner con imagen, etiqueta píldora, título y enlace circular */

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

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

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

.b38container {
    max-width: var(--b38-container-max-width, var(--site-container-max-width, 1200px));
    margin-inline: auto;
    padding-inline: var(--site-container-px, 1rem);
    position: relative;
    height: var(--b38-alto, 380px);
    border-radius: var(--b38-radio, 0.75rem);
    overflow: hidden;
    box-shadow: var(--b38-sombra, none);

    /* La imagen de fondo también puede vivir en el container para que el radio recorte */
    background-image:    var(--b38-imagen-fondo, none);
    background-size:     var(--b38-imagen-tamanio, cover);
    background-position: var(--b38-imagen-posicion, center);
    background-repeat:   var(--b38-imagen-repeat, no-repeat);
}

/* Cuando hay imagen en el container, quitar la del bloque raíz para no duplicar */
#bloque-38:has(.b38container) {
    background-image: none;
    background-color: transparent;
    padding-top:    var(--b38-padding-top, 2rem);
    padding-bottom: var(--b38-padding-bottom, 2rem);
}

/* ── Etiqueta píldora ── */

.b38etiqueta {
    position: absolute;
    z-index: 2;
    font-size: var(--b38-etiqueta-tam, 0.75rem);
    font-weight: var(--b38-etiqueta-peso, 700);
    color: var(--b38-etiqueta-color, var(--dark-color, #1a1a2e));
    background-color: var(--b38-etiqueta-fondo, #fff);
    border-radius: var(--b38-etiqueta-radio, 9999px);
    padding: 0.35rem 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.b38etiqueta--top-left     { top: 1.25rem; left: 1.25rem; }
.b38etiqueta--top-right    { top: 1.25rem; right: 1.25rem; }
.b38etiqueta--bottom-left  { bottom: 1.25rem; left: 1.25rem; }
.b38etiqueta--bottom-right { bottom: 1.25rem; right: 1.25rem; }

/* ── Pie: texto + botón ── */

.b38footer {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    z-index: 2;
}

.b38textos {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.b38titulo {
    font-size: var(--b38-titulo-tam, 2rem);
    color: var(--b38-titulo-color, #fff);
    font-family: var(--b38-titulo-fuente, inherit);
    font-weight: var(--b38-titulo-peso, 700);
    margin: 0;
    line-height: 1.2;
    width: fit-content;
}

.b38subtitulo {
    font-size: var(--b38-subtitulo-tam, 1rem);
    color: var(--b38-subtitulo-color, #fff);
    font-family: var(--b38-subtitulo-fuente, inherit);
    font-weight: var(--b38-subtitulo-peso, 400);
    margin: 0;
    line-height: 1.4;
    opacity: 0.9;
}

/* ── Botón circular ── */

.b38btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: var(--b38-btn-fondo, #fff);
    color: var(--b38-btn-color, var(--dark-color, #1a1a2e));
    opacity: var(--b38-btn-opacidad, 0.85);
    font-size: 1.25rem;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.b38btn:hover {
    opacity: 1;
    transform: scale(1.08);
}

/* ── Responsive ── */

@media (max-width: 540px) {
    .b38titulo { font-size: clamp(1.25rem, 5vw, 2rem); }
    .b38btn { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
}

/* Personalizaciones del bloque */
#bloque-38 {
    --b38padding-top: 0;
    --b38-padding-top: 0;
    --b38padding-bottom: 0;
    --b38-padding-bottom: 0;
    --b38container-max-width: 100%;
    --b38-container-max-width: 100%;
    --b38color-fondo: var(--bg-white);
    --b38-color-fondo: var(--bg-white);
    --b38imagen-fondo: url("/images/almacen-don-papel-cazalegas.webp");
    --b38-imagen-fondo: url("/images/almacen-don-papel-cazalegas.webp");
    --b38overlay: 0.4;
    --b38-overlay: 0.4;
    --b38imagen-posicion: center;
    --b38-imagen-posicion: center;
    --b38imagen-tamanio: cover;
    --b38-imagen-tamanio: cover;
    --b38imagen-repeat: no-repeat;
    --b38-imagen-repeat: no-repeat;
    --b38alto: 460px;
    --b38-alto: 460px;
    --b38radio: 0;
    --b38-radio: 0;
    --b38sombra: 0 4px 12px rgba(0,0,0,0.12);
    --b38-sombra: 0 4px 12px rgba(0,0,0,0.12);
    --b38borde-sup-grosor: 0px;
    --b38-borde-sup-grosor: 0px;
    --b38borde-sup-color: var(--border-color);
    --b38-borde-sup-color: var(--border-color);
    --b38borde-inf-grosor: 0px;
    --b38-borde-inf-grosor: 0px;
    --b38borde-inf-color: var(--border-color);
    --b38-borde-inf-color: var(--border-color);
    --b38etiqueta-color: var(--dark-color);
    --b38-etiqueta-color: var(--dark-color);
    --b38etiqueta-fondo: var(--primary-color);
    --b38-etiqueta-fondo: var(--primary-color);
    --b38etiqueta-tam: 0.75rem;
    --b38-etiqueta-tam: 0.75rem;
    --b38etiqueta-peso: 700;
    --b38-etiqueta-peso: 700;
    --b38etiqueta-radio: 9999px;
    --b38-etiqueta-radio: 9999px;
    --b38titulo-color: var(--bg-white);
    --b38-titulo-color: var(--bg-white);
    --b38titulo-tam: 3rem;
    --b38-titulo-tam: 3rem;
    --b38titulo-fuente: var(--font-1);
    --b38-titulo-fuente: var(--font-1);
    --b38titulo-peso: 800;
    --b38-titulo-peso: 800;
    --b38subtitulo-color: var(--bg-white);
    --b38-subtitulo-color: var(--bg-white);
    --b38subtitulo-tam: 1.125rem;
    --b38-subtitulo-tam: 1.125rem;
    --b38subtitulo-fuente: var(--font-2);
    --b38-subtitulo-fuente: var(--font-2);
    --b38subtitulo-peso: 400;
    --b38-subtitulo-peso: 400;
    --b38btn-fondo: var(--primary-color);
    --b38-btn-fondo: var(--primary-color);
    --b38btn-color: var(--dark-color);
    --b38-btn-color: var(--dark-color);
    --b38btn-opacidad: 1;
    --b38-btn-opacidad: 1;
}