/*
 * bloques/imagen-texto/estilos.css
 *
 * El grid (columnas, orden, alineación) se inyecta inline desde el
 * template porque depende de la instancia. Aquí solo estilos
 * compartidos del contenido.
 */

.bl-imgtxt {
    overflow: hidden;
}

.bl-imgtxt-img {
    overflow: hidden;
}

.bl-imgtxt-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.bl-imgtxt-titulo {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 .6em;
    color: inherit;
}

.bl-imgtxt-texto {
    font-size: 1rem;
    line-height: 1.5;
    color: inherit;
}

.bl-imgtxt-texto p { margin: 0 0 1em; }

.bl-imgtxt-texto a {
    color: var(--bl-color-primario, #1d7d99);
    text-decoration: underline;
}

.bl-imgtxt .boton {
    display: inline-block;
    margin-top: 8px;
}

/*
 * Antetitulo: bloque rosa con el texto en versalitas, como en el diseno. No es
 * una pildora redondeada: el rectangulo recto es parte del caracter de la marca.
 */
.bl-imgtxt .bl-imgtxt-antetitulo {
    display: inline-block;
    margin: 0 0 clamp(20px, 2.2vw, 34px);
    padding: 10px 20px;
    background: var(--bl-antetitulo-fondo, #f3c9d4);
    color: var(--bl-antetitulo-color, #2c2c2c);
    font-size: clamp(14px, 1.15vw, 17px);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Titular del hero: ligero, con media frase en negrita. */
.bl-imgtxt .bl-imgtxt-titulo {
    font-size: clamp(30px, 3.1vw, 46px);
    line-height: 1.18;
    font-weight: 300;
    margin: 0 0 clamp(18px, 1.8vw, 28px);
}
.bl-imgtxt .bl-imgtxt-titulo strong { font-weight: 700; }

.bl-imgtxt .bl-imgtxt-texto { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; }

/* Hueco de la imagen mientras no se ha subido. */
.bl-imgtxt .bl-imgtxt-hueco {
    position: absolute;
    inset: 0;
    border: 1px dashed currentColor;
    border-radius: 18px;
    opacity: .32;
}

/*
 * La regla de arriba pone los botones en inline-block, que sirve para un boton
 * de una linea pero anula el flex del que lleva subtitulo dentro. Dentro de una
 * botonera se recupera el inline-flex del sitio.
 */
.bl-imgtxt .bl-botonera .boton { display: inline-flex; }

/* La regla de enlaces del texto enriquecido subraya cualquier <a>, y un boton
   subrayado se lee como un enlace roto. */
.bl-imgtxt .bl-botonera .boton,
.bl-imgtxt .bl-botonera .boton:hover { text-decoration: none; }