@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * css/web/bd_hero_titulo.css — v1.0 25/04/2026
 *
 * Posicionamiento del bloque título del hero (.hero-content). Usa las
 * variables --titulo-x, --titulo-y, --titulo-align inyectadas inline desde
 * el PHP del hero.
 *
 * El bloque .hero-content contiene el pretítulo, título, título-italica
 * y subtítulo. Se posiciona como una unidad sobre el hero.
 * ════════════════════════════════════════════════════════════════════════════ */


.hero-content--posicionable {
    /* Si hay variables de posición definidas, salimos del flujo normal y
       nos colocamos en absoluto sobre el hero. Si no hay variables (caso
       muy raro), el bloque queda en su sitio original gracias a los
       defaults de las variables. */
    position: absolute;
    left: 50%;
    top: var(--titulo-y, 35%);
    transform: translate(-50%, -50%);
    /* Aplicamos un desplazamiento horizontal según --titulo-x.
       margin-left negativo equivalente: si X=50, el centro queda en 50%;
       si X=20, lo desplazamos hacia la izquierda. */
    margin-left: calc(var(--titulo-x, 50%) - 50%);
    text-align: var(--titulo-align, center);
    width: 100%;
    max-width: var(--container-max, 1200px);
    z-index: 1;  /* Detrás de los CTAs (z-index:2) */
}

/* Si el bloque está alineado a la izquierda o derecha, los items internos
   también se alinean en consecuencia. El text-align ya lo hace, pero los
   items flex pueden necesitarlo explícitamente. */
.hero-content--posicionable .hero-content__pretitulo,
.hero-content--posicionable .hero-content__titulo,
.hero-content--posicionable .hero-content__subtitulo {
    text-align: var(--titulo-align, center);
}


/* Móvil: ignoramos --titulo-x (siempre centrado) y mantenemos --titulo-y. */
@media (max-width: 768px) {
    .hero-content--posicionable {
        margin-left: 0 !important;
        text-align: center !important;
        padding-left: var(--sp-4, 20px);
        padding-right: var(--sp-4, 20px);
    }
    .hero-content--posicionable .hero-content__pretitulo,
    .hero-content--posicionable .hero-content__titulo,
    .hero-content--posicionable .hero-content__subtitulo {
        text-align: center !important;
    }
}


/* ── Subtítulo: ahora es <div> con HTML rico (color, tamaño, negrita) ─── */

/* Mantenemos los estilos base del subtítulo aunque el tag haya pasado de
   <p> a <div> (cambio para permitir contener HTML del editor). */
.hero-content__subtitulo {
    /* El estilo base lo hereda del bloques.css existente, pero forzamos
       margin-bottom 0 si el editor ha metido un <p> envolvente. */
}
.hero-content__subtitulo p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-style: inherit;
}
.hero-content__subtitulo p:not(:last-child) {
    margin-bottom: 0.4em;
}