.ockham-metal-button {
    display: flex;
    width: 100%;
    justify-content: center;
}

.ockham-metal-button__button {
    --ockham-icon-gap: 10px;
    --ockham-transition: .28s;
    --ockham-motion-x: 0px;
    --ockham-motion-y: 0px;
    --ockham-motion-scale: 1;
    --ockham-motion-rotate: 0deg;
    --ockham-hover-x-target: 0px;
    --ockham-hover-y-target: 0px;
    --ockham-hover-scale-target: 1;
    --ockham-hover-rotate-target: 0deg;
    --ockham-tilt-x: 0deg;
    --ockham-tilt-y: 0deg;
    --ockham-press-y: 0px;
    --ockham-metal-angle: 112deg;
    --ockham-metal-texture-opacity: .22;
    --ockham-metal-reflection-opacity: .72;
    --ockham-shine-opacity: .9;
    --ockham-shine-width: 28%;
    --ockham-shine-duration: 1.4s;

    /* Layout do conteúdo/ícone. Defaults preservam o comportamento antigo. */
    --ockham-content-h: center;
    --ockham-content-text-align: center;
    --ockham-stack-align: center;
    --ockham-icon-area-width: 48px;
    --ockham-icon-fixed-offset: 14px;
    --ockham-icon-fixed-top: 50%;
    --ockham-icon-fixed-bottom: auto;
    --ockham-icon-fixed-translate: -50%;
    --ockham-icon-layout-position: static;
    --ockham-icon-layout-direction: row;
    --ockham-icon-layout-justify: var(--ockham-content-h);
    --ockham-icon-layout-align: center;
    --ockham-icon-layout-text-width: auto;
    --ockham-icon-layout-text-padding: 0;
    --ockham-icon-layout-slot-width: auto;
    --ockham-icon-layout-side: auto;
    --ockham-icon-layout-gap: var(--ockham-icon-gap);
    --ockham-icon-slot-transform: none;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, background-position;
    transform:
        translate3d(var(--ockham-motion-x), calc(var(--ockham-motion-y) + var(--ockham-press-y)), 0)
        scale(var(--ockham-motion-scale))
        rotate(var(--ockham-motion-rotate))
        rotateX(var(--ockham-tilt-x))
        rotateY(var(--ockham-tilt-y));
    transition:
        transform var(--ockham-transition) ease,
        color var(--ockham-transition) ease,
        border-color var(--ockham-transition) ease,
        box-shadow var(--ockham-transition) ease,
        background-color var(--ockham-transition) ease,
        background-position var(--ockham-transition) ease;
}

.ockham-metal-button__button,
.ockham-metal-button__button:hover,
.ockham-metal-button__button:focus,
.ockham-metal-button__button:active,
.ockham-metal-button__button:visited {
    text-decoration: none;
}

.ockham-metal-button__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.ockham-metal-button__content {
    position: relative;
    z-index: 3;
    display: inline-flex;
    flex-direction: var(--ockham-icon-layout-direction, row);
    align-items: var(--ockham-icon-layout-align, center);
    justify-content: var(--ockham-icon-layout-justify, var(--ockham-content-h, center));
    width: 100%;
    gap: var(--ockham-icon-layout-gap, var(--ockham-icon-gap));
    text-align: var(--ockham-content-text-align, center);
    pointer-events: none;
}

.ockham-metal-button__icon-slot {
    position: var(--ockham-icon-layout-position, static);
    z-index: 2;
    top: var(--ockham-icon-fixed-top, 50%);
    bottom: var(--ockham-icon-fixed-bottom, auto);
    width: var(--ockham-icon-layout-slot-width, auto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transform: var(--ockham-icon-slot-transform, none);
    pointer-events: none;
}

.ockham-metal-button__content--before .ockham-metal-button__icon-slot {
    left: var(--ockham-icon-layout-side, auto);
    right: auto;
}

.ockham-metal-button__content--after .ockham-metal-button__icon-slot {
    right: var(--ockham-icon-layout-side, auto);
    left: auto;
}

.ockham-metal-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
    transition: color var(--ockham-transition) ease, transform var(--ockham-transition) ease;
}

.ockham-metal-button__icon svg {
    display: block;
    width: 1em;
    height: 1em;
    transition: fill var(--ockham-transition) ease, stroke var(--ockham-transition) ease;
}

.ockham-metal-button__text {
    display: inline-block;
    box-sizing: border-box;
    width: var(--ockham-icon-layout-text-width, auto);
    padding-inline: var(--ockham-icon-layout-text-padding, 0);
    text-align: inherit;
}

/* Botão normal: recebe os controles nativos de background do Elementor. */
.ockham-metal-button--effect-none {
    background: #1f6feb;
    color: #fff;
}

/* --------------------------------------------------------------------------
 * DOURADO POLIDO — acabamento "champagne / joia"
 *
 * O metal é construído com faixas largas e reflexos de baixa amplitude.
 * Evitamos sequências curtas de marrom/amarelo que criam o efeito
 * "caramelo/tigrado". A paleta foi aproximada ao dourado de identidade
 * visual premium: ouro menos saturado, luz creme e sombras bronze discretas.
 * -------------------------------------------------------------------------- */
.ockham-metal-button--effect-gold {
    background-color: #c7a04a;
    background-image:
        radial-gradient(110% 170% at 12% -35%, rgba(255,255,255,.78) 0%, rgba(255,246,202,.34) 25%, rgba(255,255,255,0) 56%),
        radial-gradient(90% 140% at 92% 145%, rgba(76,51,14,.20) 0%, rgba(76,51,14,0) 58%),
        linear-gradient(
            var(--ockham-metal-angle),
            #70521d 0%,
            #a57b2a 13%,
            #d2ad55 29%,
            #f0dc8d 41%,
            #fff1b4 48%,
            #d8b45a 57%,
            #9d7426 73%,
            #d3ad52 87%,
            #7b591f 100%
        );
    background-size: 125% 180%, 120% 175%, 132% 100%;
    background-position: 0% 0%, 100% 100%, 48% 50%;
    background-blend-mode: screen, multiply, normal;
    border-color: rgba(111,78,24,.34);
    box-shadow:
        inset 0 1px 0 rgba(255,248,205,.86),
        inset 0 2px 5px rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(83,57,17,.48),
        inset 0 -6px 12px rgba(83,57,17,.08),
        0 7px 18px rgba(54,38,12,.18);
}

.ockham-metal-button--effect-gold::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    opacity: .58;
    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,var(--ockham-metal-reflection-opacity)) 0%,
            rgba(255,249,220,.18) 20%,
            rgba(255,255,255,0) 43%,
            rgba(72,49,14,.10) 64%,
            rgba(255,239,175,.14) 83%,
            rgba(255,255,255,.30) 100%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,var(--ockham-metal-texture-opacity)) 0,
            rgba(255,255,255,0) 1px,
            rgba(73,50,17,var(--ockham-metal-texture-opacity)) 2px,
            rgba(255,255,255,0) 7px
        );
    background-blend-mode: soft-light;
    mix-blend-mode: soft-light;
}

/* --------------------------------------------------------------------------
 * CROMADO ESPELHADO — mesma construção do Dourado Polido
 *
 * A v1.0.6 abandona a abordagem experimental por imagem. O cromado passa
 * a usar EXATAMENTE a mesma arquitetura visual do dourado aprovado, trocando
 * somente a paleta quente por uma paleta de prata, branco e grafite frio.
 * -------------------------------------------------------------------------- */
.ockham-metal-button--effect-chrome {
    background-color: #aeb4b9;
    background-image:
        radial-gradient(110% 170% at 12% -35%, rgba(255,255,255,.78) 0%, rgba(238,244,248,.34) 25%, rgba(255,255,255,0) 56%),
        radial-gradient(90% 140% at 92% 145%, rgba(35,42,48,.20) 0%, rgba(35,42,48,0) 58%),
        linear-gradient(
            var(--ockham-metal-angle),
            #4d555c 0%,
            #788188 13%,
            #b3bbc1 29%,
            #dfe4e7 41%,
            #ffffff 48%,
            #c5ccd1 57%,
            #727b82 73%,
            #b7bec4 87%,
            #555d64 100%
        );
    background-size: 125% 180%, 120% 175%, 132% 100%;
    background-position: 0% 0%, 100% 100%, 48% 50%;
    background-blend-mode: screen, multiply, normal;
    border-color: rgba(74,82,89,.34);
    box-shadow:
        inset 0 1px 0 rgba(248,251,253,.86),
        inset 0 2px 5px rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(42,49,55,.48),
        inset 0 -6px 12px rgba(42,49,55,.08),
        0 7px 18px rgba(32,38,43,.18);
}

.ockham-metal-button--effect-chrome::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    opacity: .58;
    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,var(--ockham-metal-reflection-opacity)) 0%,
            rgba(245,249,252,.18) 20%,
            rgba(255,255,255,0) 43%,
            rgba(35,42,48,.10) 64%,
            rgba(229,235,239,.14) 83%,
            rgba(255,255,255,.30) 100%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,var(--ockham-metal-texture-opacity)) 0,
            rgba(255,255,255,0) 1px,
            rgba(40,47,53,var(--ockham-metal-texture-opacity)) 2px,
            rgba(255,255,255,0) 7px
        );
    background-blend-mode: soft-light;
    mix-blend-mode: soft-light;
}

/* Hover: dourado e cromado compartilham a mesma lógica de deslocamento. */
.ockham-metal-button--effect-gold:hover,
.ockham-metal-button--effect-chrome:hover {
    background-position: 8% 0%, 93% 100%, 54% 50%;
}

/* Brilho especular móvel. É propositalmente mais suave que na v1.0.0. */
.ockham-metal-button--effect-gold::after,
.ockham-metal-button--effect-chrome::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -55%;
    bottom: -55%;
    left: -70%;
    width: var(--ockham-shine-width);
    pointer-events: none;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.06) 24%,
        rgba(255,255,255,var(--ockham-shine-opacity)) 50%,
        rgba(255,255,255,.08) 76%,
        rgba(255,255,255,0) 100%
    );
    filter: blur(1.2px);
    mix-blend-mode: screen;
}


.ockham-metal-button--shine-hover:hover::after {
    animation: ockham-metal-button-shine var(--ockham-shine-duration) cubic-bezier(.22,.61,.36,1) 1;
}

.ockham-metal-button--shine-continuous::after {
    animation: ockham-metal-button-shine var(--ockham-shine-duration) ease-in-out infinite;
}

@keyframes ockham-metal-button-shine {
    0% {
        left: -70%;
        opacity: 0;
    }
    18% {
        opacity: .52;
    }
    66% {
        opacity: .52;
    }
    100% {
        left: calc(142% + var(--ockham-shine-width));
        opacity: 0;
    }
}

/* Movimentos de hover. */
.ockham-metal-button--motion-lift {
    --ockham-hover-y-target: -5px;
    --ockham-hover-scale-target: 1.015;
}

.ockham-metal-button--motion-grow {
    --ockham-hover-scale-target: 1.06;
}

.ockham-metal-button--motion-shrink {
    --ockham-hover-scale-target: .95;
}

.ockham-metal-button--motion-right {
    --ockham-hover-x-target: 7px;
}

.ockham-metal-button--motion-left {
    --ockham-hover-x-target: -7px;
}

.ockham-metal-button--motion-tilt-right {
    --ockham-hover-y-target: -2px;
    --ockham-hover-rotate-target: 2deg;
    --ockham-hover-scale-target: 1.02;
}

.ockham-metal-button--motion-tilt-left {
    --ockham-hover-y-target: -2px;
    --ockham-hover-rotate-target: -2deg;
    --ockham-hover-scale-target: 1.02;
}

.ockham-metal-button--motion-lift:hover,
.ockham-metal-button--motion-grow:hover,
.ockham-metal-button--motion-shrink:hover,
.ockham-metal-button--motion-right:hover,
.ockham-metal-button--motion-left:hover,
.ockham-metal-button--motion-tilt-right:hover,
.ockham-metal-button--motion-tilt-left:hover,
.ockham-metal-button--motion-custom:hover {
    --ockham-motion-x: var(--ockham-hover-x-target);
    --ockham-motion-y: var(--ockham-hover-y-target);
    --ockham-motion-scale: var(--ockham-hover-scale-target);
    --ockham-motion-rotate: var(--ockham-hover-rotate-target);
}

.ockham-metal-button--press:active {
    --ockham-press-y: 2px;
}

/* Um pequeno reforço visual dos ícones durante hover, sem sobrescrever rotação configurada. */
.ockham-metal-button__button:hover .ockham-metal-button__icon {
    filter: brightness(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .ockham-metal-button__button {
        transition-duration: 0.01ms !important;
    }

    .ockham-metal-button--shine-hover::after,
    .ockham-metal-button--shine-continuous::after {
        animation: none !important;
        opacity: 0 !important;
    }
}