/* ==========================================================================
   Botones sobre fondo oscuro — variante de .boton-cta
   Clase `boton-cta-claro` en el bloque Botones (o en un botón suelto).

   Sobre Tinta, el Teja de .boton-cta baja a 2,4:1 y resulta ilegible.
   Esta variante usa Papel y Ámbar, los dos únicos colores de la paleta
   que superan AA sobre fondo oscuro.
   ========================================================================== */

/* Base común a los dos estilos -------------------------------------------- */

.boton-cta-claro .wp-block-button__link,
a.wp-block-button__link.boton-cta-claro {
    border: 2px solid var(--wp--preset--color--base);
    border-radius: 0.25rem;
    transition: transform 160ms ease, box-shadow 160ms ease,
        background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Relleno: Papel con texto Tinta ------------------------------------------ */

.boton-cta-claro .wp-block-button__link:not(.is-style-outline),
a.wp-block-button__link.boton-cta-claro:not(.is-style-outline) {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

/* Contorno: transparente con texto Papel ---------------------------------- */

.boton-cta-claro .is-style-outline>.wp-block-button__link,
.is-style-outline>a.wp-block-button__link.boton-cta-claro {
    background-color: transparent;
    color: var(--wp--preset--color--base);
}

/* Elevación compartida ----------------------------------------------------- */

.boton-cta-claro .wp-block-button__link:hover,
a.wp-block-button__link.boton-cta-claro:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.boton-cta-claro .wp-block-button__link:active,
a.wp-block-button__link.boton-cta-claro:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Hover del relleno: vira a Ámbar ------------------------------------------ */

.boton-cta-claro .wp-block-button__link.wp-element-button:not(.is-style-outline):hover,
a.wp-block-button__link.wp-element-button.boton-cta-claro:not(.is-style-outline):hover {
    background-color: var(--wp--preset--color--accent-2) !important;
    border-color: var(--wp--preset--color--accent-2) !important;
    color: var(--wp--preset--color--contrast) !important;
}

/* Hover del contorno: se rellena de Papel --------------------------------- */

.boton-cta-claro .is-style-outline>.wp-block-button__link:hover,
.is-style-outline>a.wp-block-button__link.boton-cta-claro:hover {
    background-color: var(--wp--preset--color--base) !important;
    border-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
}

/* El contorno de foco por teclado, en claro sobre fondo oscuro ------------- */

.boton-cta-claro .wp-block-button__link:focus-visible,
a.wp-block-button__link.boton-cta-claro:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-2);
    outline-offset: 3px;
}

/* Sin animación para quien la haya desactivado en su sistema --------------- */

@media (prefers-reduced-motion: reduce) {

    .boton-cta-claro .wp-block-button__link:hover,
    a.wp-block-button__link.boton-cta-claro:hover {
        transform: none;
    }
}