/* El tamaño del saldo usa clases, no estilos inline bloqueados por CSP. */
.balance-amount { --balance-digits: 10; }
.balance-length-11 { --balance-digits: 11; }
.balance-length-12 { --balance-digits: 12; }
.balance-length-13 { --balance-digits: 13; }
.balance-length-14 { --balance-digits: 14; }
.balance-length-15 { --balance-digits: 15; }
.balance-length-16 { --balance-digits: 16; }
.balance-length-17 { --balance-digits: 17; }
.balance-length-18 { --balance-digits: 18; }
.balance-length-19 { --balance-digits: 19; }
.balance-length-20 { --balance-digits: 20; }
.balance-length-21 { --balance-digits: 21; }
.balance-length-22 { --balance-digits: 22; }
.balance-length-23 { --balance-digits: 23; }
.balance-length-24 { --balance-digits: 24; }
.balance-length-25 { --balance-digits: 25; }
.balance-length-26 { --balance-digits: 26; }
.balance-length-27 { --balance-digits: 27; }
.balance-length-28 { --balance-digits: 28; }
.balance-length-29 { --balance-digits: 29; }
.balance-length-30 { --balance-digits: 30; }
.balance-length-31 { --balance-digits: 31; }
.balance-length-32 { --balance-digits: 32; }
.balance-length-33 { --balance-digits: 33; }
.balance-length-34 { --balance-digits: 34; }
.balance-length-35 { --balance-digits: 35; }
.balance-length-36 { --balance-digits: 36; }
.balance-length-37 { --balance-digits: 37; }
.balance-length-38 { --balance-digits: 38; }
.balance-length-39 { --balance-digits: 39; }
.balance-length-40 { --balance-digits: 40; }
/* Centro de operaciones: contenido compacto, controles táctiles de al menos 44 px. */
.draw-chance-logo, .modality-chance-logo { object-fit: cover; border-radius: 12px; border: 1px solid #edce87; box-shadow: 0 2px 7px #0005, inset 0 1px #fff3; flex-shrink: 0; }
.draw-option .draw-chance-logo { width: 38px; height: 38px; }
.home-draw .draw-chance-logo { width: 36px; height: 36px; }
.modality-chance-logo { width: 48px; height: 48px; }
.home-balance { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin-block: 16px; }
.balance-card, .home-balance .metric-card.balance { position: relative; isolation: isolate; container-type: inline-size; display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; min-height: 0; padding: clamp(20px,4vw,30px); border: 1px solid #e8c47f; border-radius: 26px; color: #fff0c9; background: radial-gradient(ellipse at 100% 0,#f5d17a38,transparent 60%),linear-gradient(125deg,#64212b,#2d1018 65%,#392019); box-shadow: inset 0 1px #fff0c69c,inset 0 0 0 4px #c59a4824,0 10px 30px #17050b59; }
.balance-card::before { content: ''; position: absolute; inset: 7px; z-index: -1; pointer-events: none; border: 1px solid #f4cf7930; border-radius: 19px; background: linear-gradient(115deg,transparent 40%,#ffe9af0c 48%,transparent 56%); }
.balance-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.balance-card .balance-wallet-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #fff0bb; border-radius: 14px; color: #642313; background: linear-gradient(140deg,#fff0b9,#dfb55e 49%,#b47f32 51%,#ffe3a0); box-shadow: inset 0 1px #fff7dd,0 4px 12px #18040955; }
.balance-wallet-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.balance-copy { display: grid; gap: 4px; min-width: 0; }
.balance-card .balance-eyebrow { color: #e6caa8; font-size: .63rem; font-weight: 750; letter-spacing: .16em; }
.balance-card .balance-label { color: #fff1d3; font-size: clamp(.95rem,3.6vw,1.1rem); font-weight: 800; letter-spacing: .01em; text-transform: none; }
.balance-card > .balance-amount, .home-balance .metric-card.balance > .balance-amount { display: flex; align-items: baseline; gap: .12em; grid-column: 1; grid-row: auto; max-width: 100%; margin: 0; color: #ffe5a3; font-size: clamp(2rem,9vw,3.8rem); font-size: clamp(1rem,min(14cqi,calc(160cqi / var(--balance-digits))),3.8rem); font-weight: 900; line-height: 1.15; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; text-shadow: 0 2px 8px #17070d80; }
.balance-card .balance-currency { color: #e8c77e; font-size: .62em; font-weight: 750; }
.balance-card .home-wallet-parts, .balance-details { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1; grid-row: auto; margin: 0; padding-top: 14px; border-top: 1px solid #dfb96666; }
.balance-card .home-wallet-parts > span, .balance-details > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; padding: 7px 10px; border: 1px solid #ddbb7159; border-radius: 9px; background: #270c144f; color: #efdecb; font-size: .74rem; }
.balance-card .home-wallet-parts b, .balance-details b { margin: 0; color: #fff0c7; font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.balance-card .balance-footer { display: flex; align-items: center; justify-content: space-between; color: #ffe4a3; font-size: .78rem; font-weight: 800; }
.balance-footer > span { font-size: 1.2rem; line-height: 1; }
.balance-details { align-items: center; justify-content: space-between; }
.balance-card .balance-updated { display: inline-flex; align-items: center; gap: 7px; color: #e9d8c4; font-size: .69rem; }
.balance-updated > span { width: 6px; height: 6px; border-radius: 50%; background: #f2cf7b; box-shadow: 0 0 0 3px #f2cf7b1a; }
.home-balance .balance-card:focus-visible { outline: 3px solid #fff1c5; outline-offset: 3px; }
@media(hover:hover) { .home-balance .balance-card:hover { border-color: #fff0b8; box-shadow: inset 0 1px #fff6da,inset 0 0 0 4px #e9bf672b,0 10px 30px #17050b75; } }
.home-balance .metric-card.balance > small { grid-column: 1; grid-row: auto; }
.home-wallet-actions { display: flex; gap: 8px; }
.home-wallet-actions .button { flex: 1; min-height: 44px; padding: 11px 9px; font-size: .8rem; }
.home-modalities { margin-top: 18px; }
.home-modalities .section-title h1 { margin: 0; color: #fff0bd; font-size: clamp(1.2rem,4vw,1.65rem); letter-spacing: -.025em; }
.home-modality.modality-tiempos { background-image: radial-gradient(ellipse at 100% 0,#f6ce7959,transparent 65%),linear-gradient(120deg,#5e2919e8,#35151ddb),url('/branding/el-chance-costa-rica-v2.png'); }
.modality-tiempos-art { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.modality-tiempos-art > svg { width: 46px; height: 46px; flex: 0 0 46px; padding: 3px; color: #ffe5a0; fill: #e9c26520; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 2px 4px #0007); }
.modality-tiempos-art .modality-flags { gap: 4px; min-height: 24px; }
.modality-tiempos-art .country-flag { width: 24px; height: 17px; box-shadow: 0 2px 5px #0005; }
.modality-tiempos .modality-action { color: #fff0bd; }
.home-modality { gap: 9px; padding: 16px; position: relative; overflow: hidden; background-position: center; background-size: cover; }
.modality-tiempos { background-image: linear-gradient(120deg,#41141cf2,#35151dce),url('/branding/el-chance-costa-rica-v2.png'); }
.modality-chance, .chance-feature { background-image: linear-gradient(110deg,#701821ee,#32110cce),url('/branding/el-chance-costa-rica-v2.png'); background-size: cover; background-position: right center; }
.modality-raspas { background-image: radial-gradient(ellipse at 100% 0,#84632970,transparent),linear-gradient(120deg,#253326,#172219); }
.modality-ron { background: radial-gradient(ellipse at 100% 0,#c34d6260,transparent),linear-gradient(120deg,#402039,#1d1022); }
.modality-flags { display: flex; align-items: center; gap: 7px; min-height: 36px; }
.modality-flags .country-flag { position: relative; inset: auto; width: 30px; height: 21px; border-color: #f3d37d80; }
.modality-symbols { display: flex; gap: 5px; color: #ffdc80; }
.modality-symbols svg { width: 34px; height: 36px; fill: none; stroke: currentColor; stroke-width: 3; }
.modality-card-suits { font-size: 1.65rem; line-height: 36px; color: #fff1d6; letter-spacing: .08em; white-space: nowrap; }
.modality-card-suits i { color: #ff91a2; font-style: normal; }
.home-modality .modality-multiplier { color: #3d1b08; background: linear-gradient(125deg,#fff0b8,#dab463); border-radius: 7px; padding: 3px 5px; display: inline-block; font-size: .7rem; vertical-align: middle; white-space: nowrap; }
.chance-feature { padding: 16px 18px; margin-block: 16px; border-color: #edce77; }
.chance-feature .section-title { margin: 0; }
.chance-feature h2 { font-size: 1.3rem; margin: 0; }
.chance-feature p { font-size: .8rem; margin: 5px 0 10px; }
.chance-feature .button { padding: 11px 14px; min-height: 44px; font-size: .85rem; }
.home-upcoming, .home-latest { margin-top: 20px; }
.home-upcoming .section-title, .home-latest .section-title { margin-bottom: 10px; }
.home-upcoming h2, .home-latest h2 { font-size: 1.15rem; }
.home-draw-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.home-draw-compact { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; }
.home-draw-compact[hidden] { display: none !important; }
.home-draw-compact .country-flag { width: 30px; height: 21px; }
.home-draw-compact h3 { font-size: .8rem; margin: 0 0 3px; line-height: 1.3; }
.home-draw-info { min-width: 0; }
.home-draw-info time, .home-draw-info > small { display: block; font-size: .65rem; line-height: 1.5; color: #e7cbb9; }
.home-draw-info [data-countdown] { color: #ffe5a4; font-variant-numeric: tabular-nums; }
.home-draw-play { display: grid; justify-items: end; gap: 5px; }
.home-draw-play .home-draw-payout { font-size: .75rem; padding: 3px 6px; border-radius: 6px; }
.home-draw-play .button { min-height: 44px; padding: 8px 10px; font-size: .7rem; }
.home-draw-play .home-draw-payout small { font-size: .55rem; }
.home-latest .card-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.home-result { padding: 12px; gap: 9px; border-radius: 16px; }
.home-result strong { font-size: .78rem; }
.home-result time { font-size: .65rem; }
.home-result-number { width: 36px; height: 36px; flex-basis: 36px; font-size: 1.2rem; }
.home-account-link { padding: 18px; gap: 12px; margin-block: 12px; }
.wallet-prizes { display: block; padding: clamp(18px,4vw,28px); margin-block: 16px; border: 1px solid #e5c171; background: radial-gradient(ellipse at 100% 0,#c69a4838,transparent 65%),linear-gradient(135deg,#5b2020,#2c1116); box-shadow: inset 0 1px #ffedb877,0 10px 30px #19040940; }
.wallet-prizes-heading { display: flex; align-items: center; gap: 12px; }
.wallet-prizes-heading > div { flex: 1; min-width: 0; }
.wallet-prizes .eyebrow { color: #ffe2a4; font-size: .72rem; letter-spacing: .1em; }
.wallet-prizes small { display: block; color: #eddac1; font-size: .75rem; margin-top: 4px; }
.wallet-prizes > .wallet-prizes-amount { display: block; margin: 20px 0; color: #ffe4a2; font-size: clamp(1.65rem,7vw,3.2rem); font-weight: 850; white-space: nowrap; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wallet-prizes-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid #e1b86655; }
.wallet-prizes-footer .prize-level { margin: 0; font-size: .82rem; }
.wallet-prizes-footer > span { color: #ffe7b4; font-size: .8rem; font-weight: 800; }
.wallet-prizes > p { margin: 12px 0 0; font-size: .72rem; color: #e5cdbb; line-height: 1.5; }
.wallet-prizes-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: #fff0bd; font-size: 1.6rem; border-radius: 13px; border: 1px solid #e7c46a; background: linear-gradient(135deg,#c49739,#654313); }
.wallet-prizes-arrow { color: #ffe7b4; font-size: 1.3rem; }
.prize-total { border-color: #e5c171; background: radial-gradient(ellipse at 100% 0,#c69a4838,transparent 65%),linear-gradient(135deg,#5b2020,#2c1116); box-shadow: inset 0 1px #ffedb877; }
.prize-total-amount { white-space: nowrap; font-size: clamp(1.5rem,6vw,3rem); font-variant-numeric: tabular-nums; color: #ffe4a2; }
@media(max-width:400px) { .prize-total { padding: 18px; gap: 10px; } .prize-total-icon { font-size: 1.2rem; } }
.receipt-summary .applied { align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.receipt-summary .applied > strong, .receipt-summary .due > strong { flex-shrink: 0; max-width: 100%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.purchase-draw-summary { overflow: hidden; background: linear-gradient(120deg,#fff,#f1edf0); border: 1px solid #cbbba9; border-radius: 18px; color: #40202e; text-align: left; }
.purchase-draw-summary > header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px 12px; padding: 14px; border-bottom: 1px solid #d2b376; }
.purchase-draw-summary > header > span { font-size: .75rem; color: #795732; }
.purchase-draw-summary .ticket-play-group { border: 0; border-radius: 0; border-top: 1px solid #d2b37666; margin: 0; background: transparent; }
.purchase-draw-summary .ticket-play-group small { color: #684621; }
.purchase-draw-summary .ticket-play-group strong { color: #9a1826; white-space: nowrap; font-variant-numeric: tabular-nums; }
.purchase-draw-summary .ticket-number-list span { color: #fff7d8; background: linear-gradient(140deg,#a92431,#67151f); border-color: #d9af59; }
@media (max-width: 360px) { .wallet-prizes { padding: 16px; } .wallet-prizes-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 1.25rem; } .wallet-prizes-footer > span { width: 100%; } }
.wallet-withdrawal { border-color: #d9b45e; background: linear-gradient(140deg,#421a21,#261014); }
.wallet-withdrawal .payment-options label > span { border-color: #bb9757; background: #321a19; }
.wallet-withdrawal .payment-options input:checked + span { background: #674124; border-color: #f3d486; color: #fff0c1; }
.wallet-withdrawal .locked-bank { padding: 10px; border: 1px solid #b58b58; border-radius: 10px; }
.play-wizard .page-heading { margin: 8px 0 16px; }
.play-wizard .page-heading h1 { font-size: clamp(1.5rem,4vw,2rem); margin: 4px 0; }
.play-wizard .page-heading p { font-size: .8rem; margin: 0; }
.play-wizard .step-card { padding: clamp(14px,3vw,24px); }
.play-wizard .step-title { gap: 10px; margin-bottom: 12px; }
.play-wizard .step-title h2 { font-size: 1.1rem; }
.play-wizard .step-title p, .draw-list-help { font-size: .75rem; }
.play-wizard .draw-grid { gap: 8px; }
.play-wizard .draw-option { min-height: 70px; padding: 10px; gap: 10px; border-radius: 13px; }
.play-wizard .draw-name { font-size: .82rem; line-height: 1.3; }
.play-wizard .draw-option small, .play-wizard .draw-close { font-size: .68rem; margin-top: 3px; }
.play-wizard .draw-toggle { min-width: 64px; min-height: 44px; font-size: .75rem; }
.play-wizard .play-progress { margin-bottom: 12px; }
@media(max-width:650px) {
  .home-draw-grid, .home-latest .card-list { grid-template-columns: minmax(0,1fr); }
  .home-modalities-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-modality { padding: 13px 10px; }
  .home-modality strong { font-size: .85rem; }
  .modality-action { min-height: 44px; padding-top: 6px; }
}
@media(max-width:360px) { .modality-card-suits { font-size: 1.3rem; } .home-section-note { display: none; } }

/* Dorado espejo, sin movimiento continuo ni capas que intercepten los toques. */
.home-modality { isolation: isolate; border: 1px solid #edc66c; box-shadow: inset 0 1px 0 #fff2bfbd,inset 1px 0 0 #fff2bf50,inset 0 -1px 0 #b47c42,0 8px 24px #0005; }
.home-modality::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg,#fff1b721,transparent 38%,transparent 70%,#f2bc5818); }
.modality-tiempos { background-image: linear-gradient(120deg,#51121bc9,#35151d9c),url('/branding/el-chance-costa-rica-v2.png'); }
.modality-chance { background-image: linear-gradient(110deg,#701821bd,#32110c8c),url('/branding/el-chance-costa-rica-v2.png'); }
.modality-raspas { background-image: radial-gradient(ellipse at 90% 0,#deaf4f75,transparent 75%),linear-gradient(120deg,#324532,#18271b); }
.modality-ron { background: radial-gradient(ellipse at 100% 0,#da697566,transparent 75%),linear-gradient(120deg,#542840,#261325); }
.home-modality strong { color: #ffe6a3; text-shadow: 0 2px 5px #0009; }
.home-modality small { color: #fff0d8; }
.modality-action { display: flex; align-items: center; justify-content: space-between; align-self: stretch; min-height: 44px; border-top: 1px solid #eac27670; color: #ffe6a3; font-weight: 800; }
a.home-modality:hover { box-shadow: inset 0 1px #fff6d7,inset 0 0 0 1px #edc66c55,0 10px 28px #0006; }
.home-draw-compact { border: 1px solid #d6ae65; background: linear-gradient(120deg,#42171eef,#271015f5); box-shadow: inset 0 1px #ffe9b133; }
.home-draw-compact h3 { font-size: .9rem; color: #fff0cb; }
.home-draw-info time { font-size: .73rem; color: #f0d9c1; }
.home-draw-info .home-draw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.home-draw-status { color: #e8f5e7; background: #284b34; border: 1px solid #81a37c; border-radius: 5px; padding: 2px 5px; font-size: .65rem; line-height: 1.4; }
.home-draw-info .home-draw-countdown { color: #ffe6a3; background: #1b0b10; border: 1px solid #a98449; padding: 2px 5px; border-radius: 5px; font-size: .68rem; line-height: 1.4; }
.home-draw-play { min-width: 70px; }
.home-draw-play .home-draw-payout { display: block; min-width: 58px; text-align: center; padding: 4px 7px; font-size: .95rem; color: #30150b; background: linear-gradient(130deg,#fff0b8,#dcb561 55%,#f5dc96); border: 1px solid #ffe9ae; box-shadow: inset 0 1px #fff7d9; }
.home-draw-play .home-draw-payout small { margin-top: 3px; font-size: .66rem; color: #541a1a; }
.home-draw-play .button { font-size: .75rem; }
.bottom-nav { border: 1px solid #d5b06a; background: linear-gradient(145deg,#38131ce8,#200b11fa); box-shadow: inset 0 1px #fff1bd70,inset 0 -1px #704128,0 8px 30px #0009; min-height: 76px; }
.bottom-nav a { min-height: 58px; gap: 5px; color: #eee0d5; font-size: .68rem; }
.bottom-nav .nav-icon { width: 28px; height: 28px; }
.bottom-nav .nav-icon svg { width: 24px; height: 24px; }
.bottom-nav a[aria-current='page'] { color: #ffe49b; background: linear-gradient(130deg,#b886383e,#6d4a1e30); box-shadow: inset 0 1px #f5d08a59; }
.bottom-nav .nav-play .nav-icon { margin-top: 0; width: 32px; height: 32px; border-radius: 10px; border: 1px solid #ffdfa4; background: linear-gradient(140deg,#ff7160,#b8172a); color: #fff0bc; box-shadow: inset 0 1px #fff0bb99,0 3px 9px #a7192940; }
.bottom-nav a:focus-visible { outline: 2px solid #ffe7a4; outline-offset: -2px; }
.bottom-nav-agent { grid-template-columns: repeat(6,minmax(0,1fr)); width: min(calc(100% - 16px),680px); }
.bottom-nav .nav-agent { position: relative; isolation: isolate; overflow: hidden; gap: 4px; padding: 3px 1px; margin-inline: 1px; color: #ffe7a5; border: 1px solid #d9b360b3; border-radius: 14px; background: linear-gradient(145deg,#64401f,#37121a 65%,#715025); box-shadow: inset 0 1px #fff1bc80,inset 0 -1px #b88b3866,0 2px 7px #10050750; }
.bottom-nav .nav-agent::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg,transparent 30%,#fff1c51c 43%,#fff9dc42 47%,transparent 56%); }
.bottom-nav .nav-agent .nav-icon { width: 34px; height: 34px; border-radius: 11px; border: 1px solid #fff0bd; color: #672a0f; background: linear-gradient(135deg,#fff4c9,#e5bc5e 48%,#b98432 51%,#ffe5a2); box-shadow: inset 0 1px #fff9e6,0 2px 5px #12060550; transition: transform .15s ease,box-shadow .15s ease; }
.bottom-nav .nav-agent .nav-icon svg { width: 26px; height: 26px; stroke-width: 1.65; }
.bottom-nav .nav-agent-label { position: relative; line-height: 1.1; font-weight: 850; }
.bottom-nav .nav-agent[aria-current='page'] { color: #4b190b; border-color: #fff0b8; background: linear-gradient(135deg,#fff0bd,#dfb75d 65%,#f4d995); box-shadow: inset 0 1px #fff9e5,0 2px 10px #e4b95430; }
.bottom-nav .nav-agent[aria-current='page'] .nav-icon { color: #ffdf91; border-color: #662214; background: linear-gradient(145deg,#923228,#4d101a); box-shadow: inset 0 1px #ffc98450,0 2px 5px #46120840; }
.bottom-nav .nav-agent:focus-visible { outline: 2px solid #fff8dc; outline-offset: 2px; box-shadow: 0 0 0 4px #4b1520; }
@media(hover:hover) { .bottom-nav .nav-agent:hover .nav-icon { transform: translateY(-1px); box-shadow: inset 0 1px #fff9e6,0 3px 9px #f3cf653b; } }
@media(prefers-reduced-motion:reduce) { .bottom-nav .nav-agent .nav-icon { transition: none; } .bottom-nav .nav-agent:hover .nav-icon { transform: none; } }
@media(max-width:360px) { .bottom-nav-agent { padding-inline: 3px; } .bottom-nav-agent a { font-size: .57rem; } }
.account-header-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; line-height: 1; }
.account-header-link svg { display: block; flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.page-scroll-controls { position: fixed; right: 10px; bottom: 98px; z-index: 40; display: grid; gap: 8px; pointer-events: none; }
.page-scroll-controls[hidden], .page-scroll-controls button[hidden] { display: none !important; }
.page-scroll-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; pointer-events: auto; cursor: pointer; border-radius: 14px; border: 1px solid #e2bc72b8; background: linear-gradient(135deg,#51252bdb,#251115e8); color: #ffebb1; box-shadow: inset 0 1px #ffe8a657,0 4px 12px #10050740; backdrop-filter: blur(8px); }
.page-scroll-controls svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.page-scroll-controls button:focus-visible { outline: 2px solid #ffe9aa; outline-offset: 3px; }
.page-scroll-controls button:hover { border-color: #fff0c2; color: #fff3cd; background: #62352bf2; }
.account-signout p { color: #e8d6c6; font-size: .85rem; }
.draw-continue-bar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; margin: 0 0 16px; background: #310b0e; border: 1px solid #d5ac53; border-radius: 16px; box-shadow: 0 4px 16px #0005; }
.draw-continue-bar span { color: #ffe7ae; font-size: .9rem; }
.portal-tools { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; margin-bottom:12px; }
.portal-tools a { padding:9px 14px; color:#ffe4a3; background:linear-gradient(120deg,#4e1b25,#27141a); border:1px solid #d4b270; border-radius:24px; font-size:.85rem; font-weight:750; }
.agent-home-invitation { border:1px solid #aeda91; background:radial-gradient(ellipse at left,#164c31bb,transparent 80%),linear-gradient(120deg,#2a1019,#4e1723); box-shadow:inset 0 1px #f1dca84d,0 8px 30px #0003; }
.agent-rate-display { flex-shrink:0; display:inline-flex; align-items:baseline; gap:2px; color:#9df0b4; font-size:clamp(2.6rem,9vw,4rem); font-weight:950; line-height:1.15; letter-spacing:-.06em; text-shadow:0 0 26px #3dd97744; animation:agent-rate-float 1.6s ease-in-out 3; }
.agent-rate-display small { font-size:.5em; color:inherit; }
.agent-rate-hero { font-size:clamp(4rem,15vw,6rem); margin:12px 0; }
.agent-home-cta { display:block; margin-top:10px; font-weight:800; color:#ffe0a0; }
.agent-share-guide { padding-left:22px; display:grid; gap:14px; line-height:1.6; }
.agent-share-guide strong { color:#ffe4a9; }
.home-result>div { flex:1; min-width:0; }
.home-result>.country-flag,.home-result>.draw-chance-logo { position:relative; inset:auto; flex-shrink:0; width:36px; height:28px; }

/* Las banderas de resultados pertenecen a su fila, nunca a la esquina del portal. */
.premium-carousel { margin:20px 0; border:1px solid #e9c77ba8; border-radius:23px; overflow:hidden; background:#2a1019; box-shadow:inset 0 1px #fff0bd33,0 10px 30px #10040955; }
.premium-carousel-slide { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:24px; color:#ffe8b0; background:radial-gradient(ellipse at top right,#e5bf6b33,transparent 70%),linear-gradient(125deg,#542235,#27121e); }
.premium-carousel-slide[hidden] { display:none; }
.premium-carousel-gold { background:radial-gradient(ellipse at top right,#ffe09c2e,transparent 70%),linear-gradient(125deg,#654322,#2b1716); }
.premium-carousel-max { background:radial-gradient(ellipse at top right,#ead9ff2b,transparent 70%),linear-gradient(125deg,#4c2b51,#251227); }
.premium-carousel-copy { display:grid; min-width:0; gap:12px; }
.premium-carousel-copy>small { font-size:.57rem; letter-spacing:.13em; color:#ddbe87; }
.premium-carousel-copy>strong { display:grid; gap:4px; font-size:1.25rem; line-height:1.15; color:#ffebbf; }
.premium-carousel-copy>strong>span { color:#f2cf80; font-size:1.6rem; text-transform:uppercase; letter-spacing:.06em; }
.premium-carousel-price { font-size:.74rem; color:#e7cba4; line-height:1.4; }
.premium-carousel-cta { display:flex; align-items:center; gap:10px; font-size:.76rem; font-weight:800; color:#ffe6a9; }
.premium-carousel-power { display:block; flex-shrink:0; color:#ffe1a0; font-size:clamp(4rem,9vw,6rem); font-weight:850; letter-spacing:-.07em; line-height:1; text-shadow:0 4px 24px #d5a84633; }
.premium-carousel-power>small { font-size:.42em; letter-spacing:0; }
.premium-carousel-power>span { display:block; text-align:center; font-size:.6rem; letter-spacing:.12em; font-weight:600; margin-top:9px; }
.premium-carousel-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px; padding:10px 16px; border-top:1px solid #d3ae6240; font-size:.65rem; color:#c8ae89; }
.premium-carousel-controls>div { display:flex; gap:6px; }
.premium-carousel-controls button { display:grid; place-items:center; width:38px; height:36px; min-height:36px; padding:0; border:1px solid #b390534d; border-radius:9px; color:#f1d498; background:#462127; font-size:1.1rem; }
.premium-carousel a:focus-visible,.premium-carousel button:focus-visible { outline:2px solid #fff0bc; outline-offset:-4px; }
@media(max-width:400px) { .premium-carousel-slide { padding:20px 15px; gap:8px; } .premium-carousel-power { font-size:3.5rem; } .premium-carousel-copy>strong { font-size:1rem; } .premium-carousel-copy>strong>span { font-size:1.35rem; } .premium-carousel-controls>span:nth-child(2) { order:3; width:100%; } }
.home-result { align-items:center; min-height:80px; border-color:#bd95544d; background:linear-gradient(115deg,#41141ce8,#230b12f5); }
.home-result>.country-flag { flex:0 0 36px; }
.home-result-number { background:linear-gradient(145deg,#fff0bf,#d9ae57); color:#48210e; box-shadow:inset 0 1px #fff8df,0 3px 14px #0004; }
.home-modalities .section-title { align-items:center; margin-bottom:14px; }
.home-modalities-grid { gap:12px; }
.home-modality { padding:20px; gap:15px; border-radius:22px; border-color:#e8bf6d99; box-shadow:inset 0 1px #fff2c24d,0 8px 24px #13060b5c; }
.home-modality::before { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 100% 0,transparent 47px,#ffe7a318 48px,transparent 49px,transparent 76px,#ffe7a30d 77px,transparent 78px); pointer-events:none; }
.home-modality .modality-kicker { display:block; margin-bottom:7px; color:#e8c789; font-size:.62rem; font-weight:750; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; }
.home-modality strong { font-size:1.15rem; color:#fff0c7; }
.home-modality small { color:#ead8cd; font-size:.77rem; }
.home-modality .modality-action { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; margin-top:5px; padding-top:13px; color:#ffe4a0; border-top:1px solid #e5bc6f42; font-size:.77rem; font-weight:800; }
.modality-action>span { display:grid; place-items:center; flex:0 0 25px; height:25px; border:1px solid #e4ba6361; border-radius:50%; background:#e7bc6812; }
.home-modality .modality-multiplier { font-size:.72rem; padding:4px 6px; margin-left:3px; }
.home-modality .modality-chance-logo { width:54px; height:54px; border-radius:16px; }
.modality-symbols { width:100%; max-width:128px; }
.modality-symbols svg { flex:1 1 0; min-width:0; max-width:39px; height:49px; }
.modality-card-suits { min-height:54px; display:flex; align-items:center; gap:3px; }
.modality-tiempos-art { min-height:54px; }
.home-modality.modality-chance { background-position:75% center; }
@media(hover:hover) { a.home-modality:hover { transform:translateY(-2px); border-color:#ffe4a1; box-shadow:inset 0 1px #fff3c6,0 12px 26px #14040c80; } }
@media(max-width:600px) { .home-modality { padding:16px 13px; gap:12px; } .home-modality strong { font-size:.98rem; } .home-modality .modality-kicker { font-size:.54rem; } .home-modality small { font-size:.72rem; } }
@media(prefers-reduced-motion:reduce) { a.home-modality:hover { transform:none; } }
@keyframes agent-rate-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-4px) } }
@media(prefers-reduced-motion:reduce) { .agent-rate-display { animation:none; } }
.draw-continue-bar .button { flex-shrink: 0; min-height: 44px; }
@media (max-width: 360px) { .draw-continue-bar { padding: 8px; gap: 6px; } .draw-continue-bar .button { padding: 10px; } }