:root {
    --lfx-pena-ink: oklch(25% 0.018 68);
    --lfx-pena-muted: oklch(52% 0.016 68);
    --lfx-pena-surface: oklch(99% 0.006 75);
    --lfx-pena-subtle: oklch(96.5% 0.014 76);
    --lfx-pena-line: oklch(88% 0.018 70);
    --lfx-pena-accent: oklch(70% 0.17 55);
    --lfx-pena-accent-dark: oklch(52% 0.15 52);
    --lfx-pena-success: oklch(48% 0.12 153);
    --lfx-pena-warning: oklch(55% 0.12 75);
    --lfx-pena-danger: oklch(50% 0.17 27);
    --lfx-pena-focus: oklch(58% 0.18 255);
    --lfx-pena-radius: 14px;
    --lfx-pena-shadow: 0 12px 32px rgb(75 53 32 / 0.08);
}

.lfx-penas,
.home-penas-widget {
    color: var(--lfx-pena-ink);
}

.lfx-penas *,
.home-penas-widget * {
    box-sizing: border-box;
}

.lfx-penas a:focus-visible,
.lfx-penas button:focus-visible,
.lfx-penas input:focus-visible,
.lfx-penas summary:focus-visible,
.home-penas-widget a:focus-visible,
.home-penas-widget button:focus-visible {
    outline: 3px solid var(--lfx-pena-focus);
    outline-offset: 3px;
}

.lfx-penas-shell {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.lfx-penas-header {
    display: grid;
    gap: 12px;
    padding-block: 40px 28px;
}

.lfx-penas-header__eyebrow,
.lfx-pena-model {
    color: var(--lfx-pena-accent-dark);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lfx-penas-header h1,
.lfx-penas-header h2,
.lfx-pena-hero h1 {
    max-width: 22ch;
    margin: 0;
    color: var(--lfx-pena-ink);
    font-size: 2rem;
    font-weight: 780;
    line-height: 1.12;
    text-wrap: balance;
}

.lfx-penas-header p,
.lfx-pena-hero__intro {
    max-width: 68ch;
    margin: 0;
    color: var(--lfx-pena-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.lfx-penas-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 24px;
}

.lfx-penas-filter {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--lfx-pena-line);
    border-radius: 999px;
    background: var(--lfx-pena-surface);
    color: var(--lfx-pena-ink);
    font-weight: 650;
    text-decoration: none;
}

.lfx-penas-filter:hover,
.lfx-penas-filter[aria-current="page"] {
    border-color: var(--lfx-pena-accent);
    background: oklch(95% 0.045 65);
    color: var(--lfx-pena-accent-dark);
}

.lfx-penas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 20px;
}

.lfx-pena-card {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--lfx-pena-line);
    border-radius: var(--lfx-pena-radius);
    background: var(--lfx-pena-surface);
    box-shadow: 0 4px 18px rgb(75 53 32 / 0.05);
}

.lfx-pena-card__image {
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: var(--lfx-pena-subtle);
}

.lfx-pena-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lfx-pena-card__body {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 20px;
}

.lfx-pena-card__topline,
.lfx-pena-card__facts,
.lfx-pena-purchase__summary,
.lfx-pena-personal__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.lfx-pena-card h3 {
    margin: 0;
    color: var(--lfx-pena-ink);
    font-size: 1.18rem;
    line-height: 1.3;
    text-wrap: balance;
}

.lfx-pena-card__summary {
    min-height: 3em;
    margin: 0;
    color: var(--lfx-pena-muted);
    line-height: 1.5;
}

.lfx-pena-state {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--lfx-pena-subtle);
    color: var(--lfx-pena-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.lfx-pena-state::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.lfx-pena-state.is-success { color: var(--lfx-pena-success); background: oklch(95% 0.035 153); }
.lfx-pena-state.is-closed { color: var(--lfx-pena-muted); background: var(--lfx-pena-subtle); }
.lfx-pena-state.is-warning { color: var(--lfx-pena-warning); background: oklch(96% 0.04 82); }
.lfx-pena-state.is-danger { color: var(--lfx-pena-danger); background: oklch(96% 0.035 27); }
.lfx-pena-state.is-info { color: oklch(48% 0.12 250); background: oklch(96% 0.025 250); }

.lfx-pena-card__fact {
    display: grid;
    gap: 2px;
}

.lfx-pena-card__fact span {
    color: var(--lfx-pena-muted);
    font-size: 0.78rem;
}

.lfx-pena-card__fact strong {
    color: var(--lfx-pena-ink);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.lfx-pena-draws {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lfx-pena-draws li {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
    color: var(--lfx-pena-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.lfx-pena-draws i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--lfx-pena-accent-dark);
}

.lfx-pena-draws__more {
    font-weight: 700;
}

.lfx-pena-card__draws-button {
    width: 100%;
}
.lfx-pena-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.lfx-pena-quick-dialog .lfx-pena-purchase {
    margin-top: 24px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.lfx-pena-quick-dialog { overflow-y: auto; overscroll-behavior: contain; }
.lfx-pena-quick-dialog .lfx-pena-draws-dialog__content { padding: 32px; }
.lfx-pena-quick-dialog__title { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.lfx-pena-quick-dialog__subtitle { margin: 6px 0 0; color: var(--lfx-pena-muted); font-size: max(14px, 0.95rem); line-height: 1.4; overflow-wrap: anywhere; }
.lfx-pena-quick-dialog .lfx-pena-purchase { display: grid; gap: 24px; margin-top: 24px; }
.lfx-pena-quick-dialog .lfx-pena-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lfx-pena-quick-dialog .lfx-pena-field label { margin: 0; font-size: max(14px, 0.92rem); }
.lfx-pena-quick-dialog .lfx-pena-counter { width: auto; grid-template-columns: 44px 72px 44px; flex: 0 0 auto; }
.lfx-pena-quick-dialog .lfx-pena-counter button { width: 44px; height: 44px; min-height: 44px; }
.lfx-pena-quick-dialog .lfx-pena-counter input { width: 72px; min-height: 44px; padding-inline: 6px; }
.lfx-pena-quick-dialog .lfx-pena-counter input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.lfx-pena-quick-dialog .lfx-pena-counter input::-webkit-inner-spin-button,
.lfx-pena-quick-dialog .lfx-pena-counter input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lfx-pena-quick-dialog .lfx-pena-purchase__summary { padding-block: 16px; border-block: 1px solid var(--lfx-pena-line); }
.lfx-pena-quick-dialog .lfx-pena-purchase__price { font-size: 1.35rem; }
.lfx-pena-quick-dialog .lfx-pena-check { font-size: max(14px, 0.9rem); }
.lfx-pena-quick-dialog .lfx-pena-check a { color: var(--lfx-pena-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 520px) {
    .lfx-pena-quick-dialog .lfx-pena-draws-dialog__content { padding: 24px; }
    .lfx-pena-quick-dialog .lfx-pena-field { align-items: flex-start; flex-direction: column; gap: 12px; }
    .lfx-pena-quick-dialog { font-size: 14px; }
}
.lfx-pena-quick-dialog .lfx-pena-counter button:hover:not(:disabled) { background: var(--lfx-pena-subtle); }
.lfx-pena-quick-dialog .lfx-pena-counter :disabled { opacity: 0.58; cursor: not-allowed; }
.lfx-pena-quick-dialog input:focus-visible { outline: 3px solid var(--lfx-pena-focus); outline-offset: 2px; }

.lfx-pena-draws-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: min(680px, calc(100% - 32px));
    padding: 0;
    border: 1px solid var(--lfx-pena-line);
    border-radius: var(--lfx-pena-radius);
    background: var(--lfx-pena-surface);
    color: var(--lfx-pena-ink);
    box-shadow: var(--lfx-pena-shadow);
}

.lfx-pena-draws-dialog::backdrop { background: rgb(35 25 15 / 0.52); }
.lfx-pena-draws-dialog__content { padding: 24px; }
.lfx-pena-draws-dialog__heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.lfx-pena-draws-dialog__heading h4 { margin: 0; }
.lfx-pena-draws-dialog__close { display: inline-grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid var(--lfx-pena-line); border-radius: 50%; background: var(--lfx-pena-surface); color: var(--lfx-pena-ink); }
.lfx-pena-draws-dialog__list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.lfx-pena-draws-dialog__list li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--lfx-pena-line); border-radius: 10px; }
.lfx-pena-draws-dialog__list li > span:last-child { display: grid; gap: 2px; }
.lfx-pena-draws-dialog__list small { color: var(--lfx-pena-muted); }
.lfx-pena-draws-dialog__game-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: var(--lfx-pena-subtle); color: var(--lfx-pena-accent-dark); }
.lfx-pena-draws-dialog__game-icon img { width: 100%; height: 100%; object-fit: contain; }
.lfx-pena-draws-dialog__empty { margin: 24px 0 0; color: var(--lfx-pena-muted); }

.lfx-pena-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--lfx-pena-accent-dark);
    border-radius: 10px;
    background: var(--lfx-pena-accent-dark);
    color: oklch(98% 0.008 65);
    font-weight: 720;
    text-decoration: none;
    transition: background-color 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}

.lfx-pena-button:hover {
    border-color: oklch(44% 0.14 52);
    background: oklch(44% 0.14 52);
    color: oklch(98% 0.008 65);
}

.lfx-pena-button:active { transform: translateY(1px); }
.lfx-pena-button[disabled] { cursor: not-allowed; opacity: 0.58; }
.lfx-pena-button--secondary { border-color: var(--lfx-pena-line); background: transparent; color: var(--lfx-pena-ink); }
.lfx-pena-button--secondary:hover { border-color: var(--lfx-pena-accent); background: var(--lfx-pena-subtle); color: var(--lfx-pena-ink); }

/* The homepage CTA must win over the generic .widget a link colour. */
.home-penas-widget a.lfx-pena-button:not(.lfx-pena-button--secondary),
.home-penas-widget a.lfx-pena-button:not(.lfx-pena-button--secondary):visited {
    border-color: var(--lfx-color-primary);
    background: var(--lfx-color-primary);
    color: var(--lfx-color-primary-contrast);
}

.home-penas-widget a.lfx-pena-button:not(.lfx-pena-button--secondary):hover,
.home-penas-widget a.lfx-pena-button:not(.lfx-pena-button--secondary):focus-visible {
    border-color: color-mix(in srgb, var(--lfx-color-primary) 82%, var(--lfx-color-text) 18%);
    background: color-mix(in srgb, var(--lfx-color-primary) 82%, var(--lfx-color-text) 18%);
    color: var(--lfx-color-primary-contrast);
}

.lfx-pena-empty {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 40px 0;
    border-block: 1px solid var(--lfx-pena-line);
}

.lfx-pena-empty h2,
.lfx-pena-empty p { margin: 0; }
.lfx-pena-empty p { max-width: 60ch; color: var(--lfx-pena-muted); }

.lfx-pena-hero {
    display: grid;
    gap: 28px;
    padding-block: 32px;
}

.lfx-pena-hero__content {
    display: grid;
    align-content: start;
    gap: 16px;
}

.lfx-pena-hero__image {
    overflow: hidden;
    border-radius: var(--lfx-pena-radius);
    background: var(--lfx-pena-subtle);
}

.lfx-pena-hero__image img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    max-height: 410px;
    object-fit: cover;
}

.lfx-pena-keyfacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--lfx-pena-line);
    border-radius: 12px;
    background: var(--lfx-pena-line);
}

.lfx-pena-keyfact {
    display: grid;
    gap: 4px;
    padding: 16px;
    background: var(--lfx-pena-surface);
}

.lfx-pena-keyfact span { color: var(--lfx-pena-muted); font-size: 0.78rem; }
.lfx-pena-keyfact strong { color: var(--lfx-pena-ink); font-size: 1.08rem; font-variant-numeric: tabular-nums; }

.lfx-pena-layout {
    display: grid;
    gap: 28px;
    align-items: start;
}

.lfx-pena-main,
.lfx-pena-aside,
.lfx-pena-section {
    display: grid;
    gap: 20px;
}

.lfx-pena-section {
    padding-block: 28px;
    border-block-start: 1px solid var(--lfx-pena-line);
}

.lfx-pena-section h2,
.lfx-pena-purchase h2 {
    margin: 0;
    color: var(--lfx-pena-ink);
    font-size: 1.32rem;
    line-height: 1.25;
}

.lfx-pena-section__lead {
    max-width: 68ch;
    margin: -8px 0 0;
    color: var(--lfx-pena-muted);
    line-height: 1.55;
}

.lfx-pena-purchase {
    display: grid;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--lfx-pena-line);
    border-radius: var(--lfx-pena-radius);
    background: var(--lfx-pena-surface);
    box-shadow: var(--lfx-pena-shadow);
}

.lfx-pena-purchase__price {
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
}

.lfx-pena-field {
    display: grid;
    gap: 8px;
}

.lfx-pena-field label,
.lfx-pena-field legend {
    color: var(--lfx-pena-ink);
    font-weight: 700;
}

.lfx-pena-field__hint,
.lfx-pena-form-message {
    color: var(--lfx-pena-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.lfx-pena-counter {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
}

.lfx-pena-counter button,
.lfx-pena-counter input {
    min-height: 44px;
    border: 1px solid var(--lfx-pena-line);
    border-radius: 9px;
    background: var(--lfx-pena-surface);
    color: var(--lfx-pena-ink);
}

.lfx-pena-counter button { font-size: 1.2rem; font-weight: 750; }
.lfx-pena-counter input { width: 100%; padding: 8px 12px; text-align: center; font-size: 1rem; font-weight: 720; font-variant-numeric: tabular-nums; }

.lfx-pena-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: var(--lfx-pena-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.lfx-pena-check input { width: 20px; height: 20px; margin-top: 1px; }
.lfx-pena-form-message[hidden] { display: none; }
.lfx-pena-form-message.is-error { color: var(--lfx-pena-danger); }
.lfx-pena-form-message.is-success { color: var(--lfx-pena-success); font-weight: 700; }

.lfx-pena-trust {
    padding: 14px 16px;
    border: 1px solid oklch(87% 0.045 153);
    border-radius: 10px;
    background: oklch(97% 0.02 153);
    color: oklch(39% 0.1 153);
    font-size: 0.9rem;
    line-height: 1.5;
}

.lfx-pena-tickets {
    display: grid;
    gap: 12px;
}

.lfx-pena-ticket {
    border: 1px solid var(--lfx-pena-line);
    border-radius: 10px;
    background: var(--lfx-pena-surface);
}

.lfx-pena-ticket summary {
    display: flex;
    min-height: 48px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    color: var(--lfx-pena-ink);
    font-weight: 700;
}

.lfx-pena-ticket__lines {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0 16px 16px;
    list-style: none;
}

.lfx-pena-ticket__line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lfx-pena-ticket__common-extra {
    margin: 0;
    padding: 0 16px 16px;
    color: var(--lfx-pena-muted);
}

.lfx-pena-number {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--lfx-pena-line);
    border-radius: 50%;
    background: var(--lfx-pena-subtle);
    color: var(--lfx-pena-ink);
    font-size: 0.86rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.lfx-pena-extra {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: oklch(95% 0.035 65);
    color: var(--lfx-pena-accent-dark);
    font-size: 0.82rem;
}

.lfx-pena-personal-list {
    display: grid;
    gap: 12px;
}

.lfx-pena-personal {
    display: grid;
    gap: 16px;
    padding: 18px 0;
    border-block-end: 1px solid var(--lfx-pena-line);
}

.lfx-pena-personal h2 { margin: 0; font-size: 1.08rem; }
.lfx-pena-personal__meta { justify-content: flex-start; color: var(--lfx-pena-muted); font-size: 0.9rem; }
.lfx-pena-personal__meta strong { color: var(--lfx-pena-ink); font-variant-numeric: tabular-nums; }

.lfx-user-penas {
    margin-block-end: 32px;
    padding: 20px;
    border: 1px solid var(--lfx-pena-line);
    border-radius: var(--lfx-pena-radius);
    background: var(--lfx-pena-surface);
}

.lfx-pena-user-ticket-list {
    display: grid;
    gap: 16px;
    padding: 0 16px 16px;
}

.lfx-pena-user-ticket {
    display: grid;
    gap: 10px;
}

.home-penas-widget .lfx-penas-header {
    justify-items: center;
    padding-block-start: 0;
    text-align: center;
}
.lfx-penas-group {
    margin-block: 36px;
}

.lfx-penas-group > .lfx-type-h2 {
    margin-block-end: 16px;
}

.home-penas-widget .swiper { padding: 4px 4px 42px; }
.home-penas-widget .swiper-slide { height: auto; }
.home-penas-widget .lfx-pena-card { height: 100%; }
.home-penas-widget .swiper-pagination-bullet-active { background: var(--lfx-pena-accent-dark); }
.home-penas-widget__controls { display: none; }

@media (min-width: 700px) {
    .lfx-penas-header h1,
    .lfx-penas-header h2,
    .lfx-pena-hero h1 { font-size: 2.35rem; }
    .lfx-pena-keyfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-penas-widget__controls { display: flex; justify-content: flex-end; gap: 8px; margin-block-end: 12px; }
    .home-penas-widget__controls button { width: 44px; height: 44px; border: 1px solid var(--lfx-pena-line); border-radius: 50%; background: var(--lfx-pena-surface); color: var(--lfx-pena-ink); }
}

@media (min-width: 900px) {
    .lfx-pena-hero { grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr); align-items: center; padding-block: 48px; }
    .lfx-pena-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: 44px; }
    .lfx-pena-aside { position: sticky; top: 24px; }
}

@media (min-width: 980px) {
    .home-penas-widget .home-penas-swiper:has(.swiper-slide:last-child:nth-child(-n + 3)) .swiper-wrapper {
        justify-content: space-evenly;
    }

    .home-penas-widget .home-penas-swiper:has(.swiper-slide:last-child:nth-child(-n + 3)) .swiper-slide {
        margin-right: 0 !important;
    }
}

@media (pointer: fine) and (hover: hover) {
    .lfx-pena-card { transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out; }
    .lfx-pena-card:hover { border-color: oklch(80% 0.06 65); box-shadow: var(--lfx-pena-shadow); transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .lfx-penas *,
    .home-penas-widget * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}