/* Olevor Core — gate, promotion and lot-tool presentation (VISUAL_REVAMP_PLAN W3, R3.16–R3.17).
   Consent logic is frozen (§1 rule 3); this file is presentation only.
   Tokens come from olevor-child/style.css :root; every var() carries the §5 fallback so the
   plugin renders correctly under any theme. */

body.olv-core-locked {
    overflow: hidden;
}

/* ---------------------------------------------------------------- offer timer bar */
.olv-core-timer {
    align-items: center;
    background: var(--olv-accent, #d8ff43);
    color: var(--olv-ink, #101010);
    display: flex;
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: var(--olv-type-micro, 11px);
    gap: 20px;
    justify-content: center;
    letter-spacing: 0.05em;
    min-height: 34px;
    padding: 8px 16px;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 9998;
}

.olv-core-timer[hidden] {
    display: none;
}

/* --------------------------------------------------------------------- overlays */
.olv-core-overlay {
    align-items: center;
    background: var(--olv-bg, #f3f3f0);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    overflow-y: auto;
    padding: 16px;
    position: fixed;
    transition: opacity var(--olv-motion-state, 320ms) var(--olv-ease-exit, cubic-bezier(0.4, 0, 1, 1));
    z-index: 99999;
}

.olv-core-overlay.is-visible {
    opacity: 1;
    transition-timing-function: var(--olv-ease-enter, cubic-bezier(0.16, 1, 0.3, 1));
}

.olv-core-overlay[hidden] {
    display: none;
}

#olv-gate-overlay {
    isolation: isolate;
    overflow: hidden;
}

/* ------------------------------------------------- gate kinetic field (§6.2) */
.olv-gate-atmosphere {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

body.olv-gate-static .olv-gate-atmosphere {
    display: none;
}

.olv-gate-vial {
    animation: olv-gate-drift var(--olv-gv-duration) linear var(--olv-gv-delay) infinite;
    bottom: -30%;
    display: block;
    left: var(--olv-gv-left);
    opacity: var(--olv-gv-opacity);
    position: absolute;
    transform-origin: 50% 50%;
    width: var(--olv-gv-width);
    will-change: transform;
}

.olv-gate-atmosphere[data-olv-gate-direction="fall"] .olv-gate-vial {
    bottom: auto;
    top: -30%;
}

.olv-gate-bob {
    animation: olv-gate-bob var(--olv-gv-bob-duration) ease-in-out var(--olv-gv-bob-delay) infinite;
    display: block;
    will-change: transform;
}

.olv-gate-vial img {
    display: block;
    /* R6.6: kept literal — no shadow token matches this §6.2 vial cast; --olv-card-shadow is
       the card box-shadow and a drop-shadow() filter takes no spread. */
    filter: drop-shadow(0 25px 45px rgba(16, 16, 16, 0.18));
    height: auto;
    width: 100%;
}

.olv-page-hidden .olv-gate-vial,
.olv-page-hidden .olv-gate-bob {
    animation-play-state: paused;
}

@keyframes olv-gate-drift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    25% {
        transform: translate3d(var(--olv-gv-lateral), calc(40vh * var(--olv-gate-direction, -1)), 0) rotate(var(--olv-gv-rotation));
    }

    50% {
        transform: translate3d(0, calc(80vh * var(--olv-gate-direction, -1)), 0) rotate(0deg);
    }

    75% {
        transform: translate3d(calc(-1 * var(--olv-gv-lateral)), calc(120vh * var(--olv-gate-direction, -1)), 0) rotate(calc(-1 * var(--olv-gv-rotation)));
    }

    100% {
        transform: translate3d(0, calc(160vh * var(--olv-gate-direction, -1)), 0) rotate(0deg);
    }
}

@keyframes olv-gate-bob {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, var(--olv-gv-bob-distance), 0);
    }
}

/* Bob layer (R3.9): Amino float / float-delayed / float-slow. */
.olv-gate-bob--a {
    --olv-gv-bob-duration: var(--olv-float-a-duration, 4000ms);
    --olv-gv-bob-distance: var(--olv-float-a-distance, -10px);
    --olv-gv-bob-delay: var(--olv-float-a-delay, 0ms);
}

.olv-gate-bob--b {
    --olv-gv-bob-duration: var(--olv-float-b-duration, 4500ms);
    --olv-gv-bob-distance: var(--olv-float-b-distance, -12px);
    --olv-gv-bob-delay: var(--olv-float-b-delay, 1000ms);
}

.olv-gate-bob--c {
    --olv-gv-bob-duration: var(--olv-float-c-duration, 5000ms);
    --olv-gv-bob-distance: var(--olv-float-c-distance, -8px);
    --olv-gv-bob-delay: var(--olv-float-c-delay, 500ms);
}

/* Per-instance values (§6.2 table, measured on Amino Club). Width classes:
   clamp(min = 55 % of max, vw, max) → 100–125 px at 1440, 55–69 px at 390. */
.olv-gate-vial--01 { --olv-gv-left: 3%;  --olv-gv-width: clamp(63.25px, 8.214vw, 115px); --olv-gv-opacity: 0.92; --olv-gv-duration: 28s; --olv-gv-delay: -2s;  --olv-gv-rotation: 14deg;  --olv-gv-rotation-static: 7deg;    --olv-gv-lateral: 9px; }
.olv-gate-vial--02 { --olv-gv-left: 12%; --olv-gv-width: clamp(57.75px, 7.5vw, 105px);   --olv-gv-opacity: 0.90; --olv-gv-duration: 26s; --olv-gv-delay: -16s; --olv-gv-rotation: -10deg; --olv-gv-rotation-static: -5deg;   --olv-gv-lateral: 8px; }
.olv-gate-vial--03 { --olv-gv-left: 21%; --olv-gv-width: clamp(63.25px, 8.214vw, 115px); --olv-gv-opacity: 0.94; --olv-gv-duration: 34s; --olv-gv-delay: -8s;  --olv-gv-rotation: 9deg;   --olv-gv-rotation-static: 4.5deg;  --olv-gv-lateral: 9px; }
.olv-gate-vial--04 { --olv-gv-left: 30%; --olv-gv-width: clamp(68.75px, 8.929vw, 125px); --olv-gv-opacity: 0.95; --olv-gv-duration: 38s; --olv-gv-delay: -22s; --olv-gv-rotation: 6deg;   --olv-gv-rotation-static: 3deg;    --olv-gv-lateral: 8px; }
.olv-gate-vial--05 { --olv-gv-left: 39%; --olv-gv-width: clamp(60.5px, 7.857vw, 110px);  --olv-gv-opacity: 0.90; --olv-gv-duration: 30s; --olv-gv-delay: -12s; --olv-gv-rotation: -13deg; --olv-gv-rotation-static: -6.5deg; --olv-gv-lateral: 9px; }
.olv-gate-vial--06 { --olv-gv-left: 48%; --olv-gv-width: clamp(63.25px, 8.214vw, 115px); --olv-gv-opacity: 0.92; --olv-gv-duration: 32s; --olv-gv-delay: -26s; --olv-gv-rotation: 10deg;  --olv-gv-rotation-static: 5deg;    --olv-gv-lateral: 8px; }
.olv-gate-vial--07 { --olv-gv-left: 56%; --olv-gv-width: clamp(57.75px, 7.5vw, 105px);   --olv-gv-opacity: 0.90; --olv-gv-duration: 30s; --olv-gv-delay: -19s; --olv-gv-rotation: -12deg; --olv-gv-rotation-static: -6deg;   --olv-gv-lateral: 8px; }
.olv-gate-vial--08 { --olv-gv-left: 66%; --olv-gv-width: clamp(55px, 7.143vw, 100px);    --olv-gv-opacity: 0.95; --olv-gv-duration: 28s; --olv-gv-delay: -5s;  --olv-gv-rotation: 11deg;  --olv-gv-rotation-static: 5.5deg;  --olv-gv-lateral: 9px; }
.olv-gate-vial--09 { --olv-gv-left: 74%; --olv-gv-width: clamp(60.5px, 7.857vw, 110px);  --olv-gv-opacity: 0.94; --olv-gv-duration: 36s; --olv-gv-delay: -27s; --olv-gv-rotation: -8deg;  --olv-gv-rotation-static: -4deg;   --olv-gv-lateral: 8px; }
.olv-gate-vial--10 { --olv-gv-left: 84%; --olv-gv-width: clamp(63.25px, 8.214vw, 115px); --olv-gv-opacity: 0.92; --olv-gv-duration: 40s; --olv-gv-delay: -10s; --olv-gv-rotation: 5deg;   --olv-gv-rotation-static: 2.5deg;  --olv-gv-lateral: 8px; }
.olv-gate-vial--11 { --olv-gv-left: 91%; --olv-gv-width: clamp(57.75px, 7.5vw, 105px);   --olv-gv-opacity: 0.90; --olv-gv-duration: 31s; --olv-gv-delay: -24s; --olv-gv-rotation: 14deg;  --olv-gv-rotation-static: 7deg;    --olv-gv-lateral: 8px; }
.olv-gate-vial--12 { --olv-gv-left: 98%; --olv-gv-width: clamp(57.75px, 7.5vw, 105px);   --olv-gv-opacity: 0.95; --olv-gv-duration: 33s; --olv-gv-delay: -14s; --olv-gv-rotation: -11deg; --olv-gv-rotation-static: -5.5deg; --olv-gv-lateral: 8px; }

/* ------------------------------------------------------------- card (D16) */
.olv-core-modal {
    background: var(--olv-white, #ffffff);
    border-radius: var(--olv-radius-card, 16px);
    /* R6.6: kept literal — the D16 card shadow is not --olv-card-shadow (0 16px 40px -4px / 0.12). */
    box-shadow: 0 28px 90px rgba(16, 16, 16, 0.08);
    color: var(--olv-ink, #101010);
    font-family: var(--olv-ui, "Inter", Arial, sans-serif);
    max-height: calc(100svh - 32px);
    max-width: 512px;
    opacity: 0;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    transform: translateY(14px);
    transition:
        opacity var(--olv-motion-state, 320ms) var(--olv-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
        transform var(--olv-motion-state, 320ms) var(--olv-ease-enter, cubic-bezier(0.16, 1, 0.3, 1));
    width: 100%;
    z-index: 3;
}

.olv-core-overlay.is-visible .olv-core-modal {
    opacity: 1;
    transform: translateY(0);
}

.olv-core-modal[hidden] {
    display: none;
}

.olv-core-topline {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
}

.olv-core-brand {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: -0.01em;
}

.olv-core-brand i {
    background: var(--olv-ink, #101010);
    border-radius: 2px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.olv-core-step {
    color: var(--olv-muted, #6c6c68);
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.olv-core-modal h2,
.olv-core-modal p,
.olv-core-modal label,
.olv-core-modal input,
.olv-core-modal button {
    font-family: inherit;
}

.olv-core-modal h2 {
    color: var(--olv-ink, #101010);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 12px;
}

.olv-core-modal > p {
    color: var(--olv-muted, #6c6c68);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.olv-core-check {
    align-items: flex-start;
    background: var(--olv-field-50, #f8f8f6);
    border: 1px solid var(--olv-line, #d8d8d2);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px 16px;
    transition:
        background var(--olv-motion-fast, 180ms) var(--olv-ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
        border-color var(--olv-motion-fast, 180ms) var(--olv-ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.olv-core-check:has(input:checked) {
    background: var(--olv-white, #ffffff);
    border-color: var(--olv-ink, #101010);
}

.olv-core-check:has(input:focus-visible) {
    outline: 2px solid var(--olv-ink, #101010);
    outline-offset: 2px;
}

.olv-core-check input {
    accent-color: var(--olv-ink, #101010);
    flex: 0 0 auto;
    height: 18px;
    margin: 1px 0 0;
    width: 18px;
}

.olv-core-check span {
    color: var(--olv-ink, #101010);
    font-size: 14px;
    line-height: 1.5;
}

.olv-interest-check {
    margin-top: 12px;
}

.olv-interest-check span {
    font-size: 13px;
}

.olv-core-modal > .olv-interest-privacy {
    font-size: 12px;
    margin: 12px 0;
}

.olv-interest-privacy a {
    color: inherit;
    text-decoration: underline;
}

.olv-core-button {
    align-items: center;
    background: var(--olv-ink, #101010);
    border: 0;
    border-radius: var(--olv-radius-control, 999px);
    color: var(--olv-white, #ffffff);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
    line-height: 1;
    margin-top: 14px;
    min-height: 48px;
    padding: 12px 24px;
    transition:
        background var(--olv-motion-fast, 180ms) var(--olv-ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
        color var(--olv-motion-fast, 180ms) var(--olv-ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
        transform 200ms var(--olv-ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1));
    width: 100%;
}

.olv-core-button:not(:disabled):hover {
    transform: scale(1.02);
}

.olv-core-button:not(:disabled):active {
    transform: scale(0.99);
}

.olv-core-button:focus-visible {
    outline: 2px solid var(--olv-ink, #101010);
    outline-offset: 2px;
}

.olv-core-button:disabled {
    background: var(--olv-soft, #e8e8e3);
    color: var(--olv-muted, #6c6c68);
    cursor: not-allowed;
}

.olv-core-button--secondary {
    /* R6.6: kept literal — a 6 % ink tint has no token; every §5 surface token is opaque. */
    background: rgba(0, 0, 0, 0.06);
    color: var(--olv-ink, #101010);
    margin-bottom: 0;
}

.olv-core-skip {
    background: transparent;
    border: 0;
    color: var(--olv-muted, #6c6c68);
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 13px;
    margin: 16px auto 0;
    /* R7.3 hit floor. Not a skip-to-content link: this is the always-visible "Continuar sin
       descuento" dismiss, so the floor applies. The box paints nothing (transparent, borderless)
       and a button centres its own label, so only the label's baseline moves. */
    min-height: 44px;
    padding: 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.olv-core-skip:focus-visible {
    outline: 2px solid var(--olv-ink, #101010);
    outline-offset: 2px;
}

.olv-core-offer {
    color: var(--olv-ink, #101010);
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 20px;
}

.olv-core-offer span {
    color: var(--olv-muted, #6c6c68);
    display: block;
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-top: 8px;
    text-transform: uppercase;
}

.olv-core-field-label {
    color: var(--olv-muted, #6c6c68);
    display: block;
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.olv-core-input {
    background: var(--olv-white, #ffffff);
    border: 1px solid var(--olv-line, #d8d8d2);
    border-radius: var(--olv-radius-input, 12px);
    color: var(--olv-ink, #101010);
    font-family: inherit;
    font-size: 15px;
    min-height: 48px;
    outline: none;
    padding: 12px 16px;
    width: 100%;
}

.olv-core-input:focus {
    border-color: var(--olv-ink, #101010);
}

.olv-core-feedback {
    color: var(--olv-danger, #c94848);
    font-size: 13px;
    line-height: 1.4;
    margin: 8px 0 0;
    min-height: 18px;
}

.olv-core-codebox {
    background: var(--olv-field-50, #f8f8f6);
    border: 1px dashed var(--olv-line, #d8d8d2);
    border-radius: var(--olv-radius-input, 12px);
    margin-bottom: 12px;
    padding: 24px 16px;
    text-align: center;
}

.olv-core-codebox > strong {
    color: var(--olv-ink, #101010);
    display: block;
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: 24px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.olv-core-codebox > span {
    color: var(--olv-muted, #6c6c68);
    display: block;
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: 11px;
    margin-top: 10px;
}

@media (max-width: 760px) {
    .olv-core-modal {
        padding: 28px 24px;
    }

    .olv-core-modal h2 {
        font-size: 24px;
    }
}

/* -------------------------------------------------------- lot tool (dormant, D13) */
.olv-lot-tool {
    background: var(--olv-white, #ffffff);
    border: 1px solid var(--olv-line, #d8d8d2);
    border-radius: var(--olv-radius-card, 16px);
    color: var(--olv-ink, #101010);
    font-family: var(--olv-ui, "Inter", Arial, sans-serif);
    padding: 24px;
}

.olv-lot-tool__eyebrow {
    color: var(--olv-muted, #6c6c68);
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: var(--olv-type-eyebrow, 10px);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.olv-lot-tool__head h3 {
    /* R6.6: literal 28px, not --olv-type-section — that token grows to 32/40px (§5.2) and this
       heading sits inside a 24/32px-padded card, not on a page section. */
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 8px;
}

.olv-lot-tool__head > p:last-child,
.olv-lot-tool__scope {
    color: var(--olv-muted, #6c6c68);
    font-size: var(--olv-type-small, 13px);
    line-height: 1.6;
}

.olv-lot-tool > label {
    display: block;
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: var(--olv-type-eyebrow, 10px);
    letter-spacing: 0.1em;
    margin: 20px 0 8px;
    text-transform: uppercase;
}

.olv-lot-tool__search {
    display: grid;
    gap: 8px;
}

.olv-lot-tool__search input {
    background: var(--olv-white, #ffffff);
    border: 1px solid var(--olv-line, #d8d8d2);
    border-radius: var(--olv-radius-input, 12px);
    font-family: var(--olv-mono, "DM Mono", monospace);
    min-height: 48px;
    outline: none;
    padding: 12px 16px;
    text-transform: uppercase;
}

.olv-lot-tool__search input:focus {
    border-color: var(--olv-ink, #101010);
}

.olv-lot-tool__search button {
    background: var(--olv-ink, #101010);
    border: 0;
    border-radius: var(--olv-radius-control, 999px);
    color: var(--olv-white, #ffffff);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    min-height: 48px;
    padding: 12px 24px;
}

.olv-lot-tool__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.olv-lot-tool__presets button {
    background: transparent;
    border: 1px solid var(--olv-line, #d8d8d2);
    border-radius: var(--olv-radius-control, 999px);
    color: var(--olv-muted, #6c6c68);
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: var(--olv-type-micro, 11px);
    /* R7.3 hit floor; min-width guards a short data-driven lot code. The lot tool is dormant
       (D13) and carries no measured geometry, so the pill itself grows to 44 px. */
    min-height: 44px;
    min-width: 44px;
    padding: 6px 10px;
    text-transform: uppercase;
}

.olv-lot-result {
    border-top: 1px solid var(--olv-line, #d8d8d2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 16px;
}

.olv-lot-result[hidden] {
    display: none;
}

.olv-lot-result > div {
    border-bottom: 1px solid var(--olv-line, #d8d8d2);
    padding: 12px 8px 12px 0;
}

.olv-lot-result > div:nth-child(even) {
    border-left: 1px solid var(--olv-line, #d8d8d2);
    padding-left: 12px;
}

.olv-lot-result small {
    color: var(--olv-muted, #6c6c68);
    display: block;
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: var(--olv-type-eyebrow, 10px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.olv-lot-result strong {
    display: block;
    font-family: var(--olv-mono, "DM Mono", monospace);
    font-size: var(--olv-type-small, 13px);
    margin-top: 4px;
}

.olv-lot-result.is-missing {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
}

.olv-lot-tool__scope {
    border-left: 2px solid var(--olv-line, #d8d8d2);
    margin: 16px 0 0;
    padding-left: 12px;
}

@media (min-width: 560px) {
    .olv-lot-tool {
        padding: 32px;
    }

    .olv-lot-tool__search {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* ------------------------------------------------------ reduced motion (R3.11) */
@media (prefers-reduced-motion: reduce) {
    .olv-core-overlay,
    .olv-core-modal,
    .olv-core-check,
    .olv-core-button {
        transition: none;
    }

    .olv-core-overlay,
    .olv-core-overlay .olv-core-modal {
        opacity: 1;
        transform: none;
    }

    .olv-gate-vial,
    .olv-gate-bob {
        animation: none;
        will-change: auto;
    }

    .olv-gate-vial {
        opacity: 0.45;
        transform: translateY(calc(40vh * var(--olv-gate-direction, -1))) rotate(var(--olv-gv-rotation-static));
    }
}

/* Local preview mirror (?olv_reduce_motion=1, localhost only) — same set as above. */
.olv-reduced-motion-preview .olv-core-overlay,
.olv-reduced-motion-preview .olv-core-modal,
.olv-reduced-motion-preview .olv-core-check,
.olv-reduced-motion-preview .olv-core-button {
    transition: none;
}

.olv-reduced-motion-preview .olv-core-overlay,
.olv-reduced-motion-preview .olv-core-overlay .olv-core-modal {
    opacity: 1;
    transform: none;
}

.olv-reduced-motion-preview .olv-gate-vial,
.olv-reduced-motion-preview .olv-gate-bob {
    animation: none;
    will-change: auto;
}

.olv-reduced-motion-preview .olv-gate-vial {
    opacity: 0.45;
    transform: translateY(calc(40vh * var(--olv-gate-direction, -1))) rotate(var(--olv-gv-rotation-static));
}