@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * css/web/bc_hero_cta.css — v1.0 25/04/2026
 *
 * Estilos del bloque .hero-cta-layer (capa absoluta con los CTAs del hero).
 *
 * Sustituye al CSS .hero-content__ctas--posicionable del ba_correcciones.css
 * que apuntaba a una clase que el HTML real NO tenía → de ahí que los
 * cambios de cta_x/cta_y no se vieran.
 *
 * Variables CSS (inyectadas inline desde hero.php):
 *   --cta-x       posición horizontal en % (0-100)
 *   --cta-y       posición vertical en % (0-100)
 *   --cta-justify flex-start | center | flex-end
 *   --cta-gap     hueco entre los dos botones en % del hero (NUEVO bc)
 * ════════════════════════════════════════════════════════════════════════════ */


/* El section #hero debe ser relative para que los hijos absolute se
   posicionen respecto al hero, no al body. */
#hero {
    position: relative;
}


.hero-cta-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--cta-y, 75%);
    transform: translateY(-50%);
    /* La capa ocupa todo el ancho del hero; el .hero-cta-layer__inner es
       el que contiene los dos botones y se desplaza horizontalmente con
       la separación que toque. */
    padding: 0 var(--sp-5, 28px);
    z-index: 2;
    pointer-events: none;  /* Solo los botones reciben click, no la capa */
}


.hero-cta-layer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--cta-justify, center);
    gap: var(--cta-gap, 12px);
    /* La X actúa como margin-left del inner: si la X es 50, el inner
       queda 50% a la derecha del borde izquierdo, etc. */
    margin-left: calc(var(--cta-x, 50%) - 50%);
    pointer-events: auto;
}


/* Móvil: forzar centrado horizontal e ignorar X. La separación tampoco
   tiene sentido en columna; los botones se apilan con un gap fijo. */
@media (max-width: 768px) {
    .hero-cta-layer__inner {
        justify-content: center !important;
        margin-left: 0 !important;
        flex-direction: column;
        gap: var(--sp-2, 12px) !important;
    }
    .hero-cta-layer .btn,
    .hero-cta-layer .btn--grande {
        font-size: 0.875rem;
        padding: 10px 22px;
        min-height: 40px;
    }
}