.experience-modal {
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    z-index:99999;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease,visibility 0s linear .25s
}

.experience-modal.is-open {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity .25s ease
}

.experience-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(8,23,19,.82);
    backdrop-filter:blur(12px)
}

.experience-modal-panel {
    position:absolute;
    inset:10px;
    height:calc(100dvh - 20px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--paper);
    color:var(--ink);
    transform:translateY(18px) scale(.992);
    opacity:0;
    transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease;
    box-shadow:0 30px 90px rgba(0,0,0,.28)
}

.experience-modal.is-open .experience-modal-panel {
    transform:translateY(0) scale(1);
    opacity:1
}

/* Encabezado del modal y botón de cierre */
.modal-header {
    height:64px;
    flex:0 0 64px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line)
}

.modal-brandline {
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--muted);
    font-size:10px;
    letter-spacing:.18em
}

.modal-brandline span:first-child {
    color:var(--green);
    font-weight:700
}

.modal-close {
    width:52px;
    height:52px;
    border:1px solid var(--green);
    border-radius:50%;
    background:transparent;
    position:relative;
    cursor:pointer;
    transition:transform .25s,background .25s
}

.modal-close:hover {
    transform:rotate(90deg);
    background:var(--green)
}

.modal-close span {
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:1px;
    background:var(--green)
}

.modal-close:hover span {
    background:var(--paper)
}

.modal-close span:first-child {
    transform:translate(-50%,-50%) rotate(45deg)
}

.modal-close span:last-child {
    transform:translate(-50%,-50%) rotate(-45deg)
}

/* Navegación entre categorías */
.modal-category-nav {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid var(--line);
    flex:0 0 70px
}

.modal-category-tab {
    min-width:0;
    height:70px;
    padding:0 22px;
    display:grid;
    grid-template-columns:30px 42px 1fr auto;
    gap:12px;
    align-items:center;
    text-align:left;
    border:0;
    border-right:1px solid var(--line);
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    position:relative
}

.modal-category-tab:last-child {
    border-right:0
}

.modal-category-tab .tab-number {
    color:var(--muted);
    font-size:10px
}

.tab-icon {
    width:38px;
    height:38px;
    display:grid;
    place-items:center
}

.tab-icon img {
    width:34px;
    height:34px;
    object-fit:contain
}

.modal-category-tab strong {
    font-size:15px;
    font-weight:600
}

.modal-category-tab b {
    font-size:11px;
    color:var(--green)
}

.modal-category-tab:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:3px;
    background:var(--green);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s
}

.modal-category-tab.is-active {
    background:var(--paper-deep)
}

.modal-category-tab.is-active:after {
    transform:scaleX(1)
}

/* Contenido principal de la experiencia */
.modal-content {
    min-height:0;
    flex:1 1 auto;
    display:grid;
    grid-template-columns:minmax(360px,40%) minmax(0,60%);
    overflow:hidden
}

/* Información de la categoría */
.modal-copy {
    min-width:0;
    min-height:0;
    padding:42px clamp(34px,4vw,68px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden
}

.modal-eyebrow {
    color:var(--muted);
    font-size:10px;
    letter-spacing:.18em
}

.modal-copy h2 {
    margin:18px 0 0;
    max-width:620px;
    font-size:clamp(62px,4.9vw,94px);
    line-height:.86;
    letter-spacing:-.075em
}

.modal-copy p {
    max-width:500px;
    margin:22px 0 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.55
}

.modal-subcategories {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:22px
}

.modal-subcategory {
    padding:9px 13px;
    border:1px solid rgba(23,84,71,.25);
    border-radius:999px;
    color:var(--green);
    font-size:10px
}

/* Calculadora de gasto */
.modal-spend-box {
    margin-top:30px;
    padding-top:16px;
    border-top:1px solid var(--line)
}

.modal-spend-heading {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:15px
}

.modal-spend-heading span {
    color:var(--muted);
    font-size:9px;
    letter-spacing:.15em
}

.modal-spend-heading strong {
    font-size:38px;
    font-weight:500;
    white-space:nowrap
}

.modal-spend-box input {
    display:block;
    width:100%;
    margin-top:16px;
    appearance:none;
    height:3px;
    background:rgba(16,19,17,.22)
}

.modal-spend-box input::-webkit-slider-thumb {
    appearance:none;
    width:21px;
    height:21px;
    border:1px solid var(--green);
    border-radius:50%;
    background:var(--paper);
    cursor:pointer
}

.modal-spend-box input::-moz-range-thumb {
    width:21px;
    height:21px;
    border:1px solid var(--green);
    border-radius:50%;
    background:var(--paper);
    cursor:pointer
}

.modal-range-labels {
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    color:var(--muted);
    font-size:9px
}

.modal-points-result {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-top:26px
}

.modal-points-result>div:first-child {
    display:flex;
    flex-direction:column
}

.modal-points-result span,.modal-monthly span {
    color:var(--muted);
    font-size:9px;
    letter-spacing:.13em
}

.modal-points-result strong {
    margin-top:3px;
    color:var(--green);
    font-family:"Playfair Display",Georgia,serif;
    font-size:68px;
    line-height:.86;
    font-weight:500
}

.modal-points-result strong b {
    font-weight:500
}

.modal-points-result small {
    color:var(--muted);
    font-size:9px;
    letter-spacing:.1em
}

.modal-monthly {
    text-align:right
}

.modal-monthly strong {
    display:block;
    margin-top:6px;
    font-size:32px;
    font-weight:500
}

/* Puntos y recompensas */
.modal-rewards-area {
    min-width:0;
    min-height:0;
    background:var(--paper-deep);
    padding:28px clamp(24px,3vw,46px) 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden
}

.modal-visual-row {
    min-height:150px;
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:28px;
    align-items:center
}

.modal-visual {
    position:relative;
    width:170px;
    height:170px;
    display:grid;
    place-items:center
}

.modal-orbit {
    position:absolute;
    border:1px solid rgba(23,84,71,.2);
    border-radius:50%
}

.orbit-one {
    width:57%;
    height:57%
}

.orbit-two {
    width:100%;
    height:100%;
    border-style:dashed
}

.modal-icon {
    position:relative;
    z-index:2;
    width:92px;
    height:92px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--green);
    box-shadow:0 18px 40px rgba(23,84,71,.18)
}

.modal-icon img {
    width:60px;
    height:60px;
    object-fit:contain
}

/* Encabezado de recompensas */
.modal-rewards-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:18px;
    margin-top:0;
    padding-top:0;
    border:0
}

.modal-rewards-head>div span {
    display:block;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.15em
}

.modal-rewards-head>div strong {
    display:block;
    margin-top:6px;
    font-size:30px;
    line-height:1;
    font-weight:600
}

.modal-rewards-head>span {
    color:var(--green);
    font-size:11px;
    white-space:nowrap
}

.modal-rewards-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    margin-top:22px;
    border-top:1px solid var(--line);
    border-left:1px solid var(--line)
}

.modal-reward-card {
    min-width:0;
    min-height:156px;
    padding:15px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    transition:background .25s,opacity .25s,transform .25s;
    position:relative
}

.modal-reward-card.is-unlocked {
    background:var(--green);
    color:var(--paper)
}

.modal-reward-card.is-unlocked .reward-threshold,.modal-reward-card.is-unlocked small {
    color:rgba(243,241,233,.68)
}

.modal-reward-card.is-locked {
    opacity:.4
}

.reward-threshold {
    font-size:10px;
    color:var(--muted);
    letter-spacing:.1em
}

.reward-icon {
    width:40px;
    height:40px;
    margin:15px 0 11px;
    border:1px solid currentColor;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:11px;
    letter-spacing:.08em;
    opacity:.7
}

.modal-reward-card strong {
    font-size:11px;
    font-weight:600;
    line-height:1.25
}

.modal-reward-card small {
    margin-top:5px;
    color:var(--muted);
    font-size:9px;
    line-height:1.35
}

.modal-disclaimer {
    margin:9px 0 0;
    color:var(--muted);
    font-size:8px;
    line-height:1.3
}

body.modal-open {
    overflow:hidden!important
}

/* Espaciado del bloque de recompensas */
@media (max-height:820px) and (min-width:801px) {
    .modal-header {
        height:56px;
        flex-basis:56px
    }
    .modal-category-nav {
        height:62px;
        flex-basis:62px
    }
    .modal-category-tab {
        height:62px
    }
    .modal-copy {
        padding:28px clamp(28px,3vw,50px)
    }
    .modal-copy h2 {
        font-size:clamp(54px,4.3vw,82px);
        margin-top:14px
    }
    .modal-copy p {
        margin-top:14px;
        font-size:14px
    }
    .modal-subcategories {
        margin-top:14px
    }
    .modal-spend-box {
        margin-top:20px;
        padding-top:12px
    }
    .modal-points-result {
        margin-top:16px
    }
    .modal-points-result strong {
        font-size:58px
    }
    .modal-visual-row {
        grid-template-columns:150px minmax(0,1fr);
        gap:18px;
        min-height:125px
    }
    .modal-visual {
        width:140px;
        height:140px
    }
    .modal-icon {
        width:76px;
        height:76px
    }
    .modal-icon img {
        width:50px;
        height:50px
    }
    .modal-rewards-head>div strong {
        font-size:26px
    }
    .modal-rewards-grid {
        margin-top:15px
    }
    .modal-reward-card {
        min-height:124px;
        padding:11px
    }
    .reward-icon {
        width:34px;
        height:34px;
        margin:9px 0 7px
    }
    .modal-disclaimer {
        margin-top:6px
    }
}

@media (max-height:700px) and (min-width:801px) {
    .modal-header {
        height:50px;
        flex-basis:50px
    }
    .modal-category-nav {
        height:54px;
        flex-basis:54px
    }
    .modal-category-tab {
        height:54px;
        padding:0 16px
    }
    .modal-copy {
        padding:18px 28px
    }
    .modal-copy h2 {
        font-size:52px
    }
    .modal-copy p {
        font-size:12px;
        margin-top:8px
    }
    .modal-subcategories {
        margin-top:8px
    }
    .modal-subcategory {
        padding:6px 9px
    }
    .modal-spend-box {
        margin-top:12px;
        padding-top:9px
    }
    .modal-spend-heading strong {
        font-size:27px
    }
    .modal-points-result {
        margin-top:10px
    }
    .modal-points-result strong {
        font-size:48px
    }
    .modal-visual-row {
        grid-template-columns:120px 1fr;
        min-height:105px
    }
    .modal-visual {
        width:112px;
        height:112px
    }
    .modal-icon {
        width:62px;
        height:62px
    }
    .modal-icon img {
        width:42px;
        height:42px
    }
    .modal-rewards-head>div strong {
        font-size:22px
    }
    .modal-rewards-grid {
        margin-top:10px
    }
    .modal-reward-card {
        min-height:98px;
        padding:8px
    }
    .reward-icon {
        width:28px;
        height:28px;
        margin:6px 0
    }
    .modal-reward-card strong {
        font-size:9px
    }
    .modal-reward-card small {
        font-size:7px
    }
}

@media (max-width:800px) {
    .experience-modal-panel {
        inset:0;
        height:100dvh
    }
    .modal-header {
        height:58px;
        flex-basis:58px;
        padding:0 16px
    }
    .modal-category-nav {
        overflow-x:auto;
        grid-template-columns:repeat(4,minmax(145px,1fr));
        flex-basis:58px
    }
    .modal-category-tab {
        height:58px;
        padding:0 12px
    }
    .modal-content {
        display:block;
        overflow-y:auto
    }
    .modal-copy {
        padding:28px 22px 24px;
        overflow:visible
    }
    .modal-copy h2 {
        font-size:clamp(42px,12vw,68px)
    }
    .modal-rewards-area {
        padding:24px 22px 28px;
        overflow:visible
    }
    .modal-visual-row {
        grid-template-columns:95px 1fr;
        gap:16px;
        min-height:100px
    }
    .modal-visual {
        width:90px;
        height:90px
    }
    .modal-icon {
        width:52px;
        height:52px
    }
    .modal-icon img {
        width:34px;
        height:34px
    }
    .modal-rewards-head>div strong {
        font-size:22px
    }
    .modal-rewards-grid {
        grid-template-columns:repeat(2,1fr);
        margin-top:18px
    }
    .modal-reward-card {
        min-height:105px
    }
}

@media (min-width: 801px) {
    .modal-rewards-area {
        padding:42px clamp(34px,3.2vw,58px) 30px;
        justify-content:flex-start;
    }
    .modal-visual-row {
        min-height:205px;
        grid-template-columns:190px minmax(0,1fr);
        gap:34px;
        flex:0 0 205px;
    }
    .modal-visual {
        width:190px;
        height:190px;
    }
    .modal-icon {
        width:106px;
        height:106px;
    }
    .modal-icon img {
        width:70px;
        height:70px;
    }
    .modal-rewards-head>div span {
        font-size:10px;
    }
    .modal-rewards-head>div strong {
        font-size:clamp(32px,2.15vw,42px);
        line-height:1.02;
    }
    .modal-rewards-head>span {
        font-size:12px;
    }
    .modal-rewards-grid {
        margin-top:26px;
        flex:0 0 auto;
        min-height:225px;
    }
    .modal-reward-card {
        min-height:225px;
        padding:22px 18px 18px;
    }
    .reward-threshold {
        font-size:11px;
    }
    .reward-icon {
        width:50px;
        height:50px;
        margin:22px 0 18px;
        font-size:12px;
    }
    .modal-reward-card strong {
        font-size:14px;
        line-height:1.3;
    }
    .modal-reward-card small {
        margin-top:8px;
        font-size:10px;
        line-height:1.45;
    }
    .modal-disclaimer {
        margin-top:13px;
        font-size:9px;
    }
}

@media (min-width:801px) and (max-height:760px) {
    .modal-rewards-area {
        padding-top:28px;
        padding-bottom:20px;
    }
    .modal-visual-row {
        min-height:170px;
        flex-basis:170px;
    }
    .modal-visual {
        width:160px;
        height:160px;
    }
    .modal-icon {
        width:90px;
        height:90px;
    }
    .modal-icon img {
        width:60px;
        height:60px;
    }
    .modal-rewards-grid {
        margin-top:18px;
        min-height:185px;
    }
    .modal-reward-card {
        min-height:185px;
        padding:16px 14px;
    }
    .reward-icon {
        width:42px;
        height:42px;
        margin:14px 0 12px;
    }
    .modal-reward-card strong {
        font-size:12px;
    }
    .modal-reward-card small {
        font-size:9px;
    }
}

/* Distribución de recompensas en pantallas pequeñas */
@media (max-width: 800px) {
    .experience-modal-panel {
        inset: 0;
        height: 100dvh;
        overflow: hidden;
    }

    .modal-header {
        height: 56px;
        flex-basis: 56px;
        padding: 0 16px;
    }

    .modal-brandline {
        gap: 10px;
        font-size: 9px;
    }

    .modal-close {
        width: 42px;
        height: 42px;
    }

    .modal-category-nav {
        flex: 0 0 60px;
        height: 60px;
        grid-template-columns: repeat(4, minmax(132px, 1fr));
        overflow-x: auto;
        scrollbar-width: none;
    }

    .modal-category-nav::-webkit-scrollbar {
        display: none;
    }

    .modal-category-tab {
        height: 60px;
        padding: 0 12px;
        grid-template-columns: 22px 34px 1fr auto;
        gap: 8px;
    }

    .tab-icon {
        width: 34px;
        height: 34px;
    }

    .tab-icon img {
        width: 28px;
        height: 28px;
    }

    .modal-category-tab strong {
        font-size: 12px;
    }

    .modal-category-tab b {
        font-size: 10px;
    }

    .modal-content {
        height: calc(100dvh - 116px);
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
        -webkit-overflow-scrolling: touch;
    }

    .modal-copy {
        padding: 28px 20px 24px;
    }

    .modal-eyebrow {
        font-size: 9px;
    }

    .modal-copy h2 {
        margin-top: 12px;
        font-size: clamp(42px, 12vw, 60px);
        line-height: .9;
    }

    .modal-copy p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .modal-subcategories {
        margin-top: 16px;
        gap: 6px;
    }

    .modal-subcategory {
        padding: 7px 10px;
        font-size: 9px;
    }

    .modal-spend-box {
        margin-top: 24px;
        padding-top: 14px;
    }

    .modal-spend-heading {
        gap: 10px;
    }

    .modal-spend-heading span {
        font-size: 8px;
    }

    .modal-spend-heading strong {
        font-size: 28px;
    }

    .modal-points-result {
        margin-top: 20px;
        gap: 18px;
    }

    .modal-points-result strong {
        font-size: 58px;
    }

    .modal-monthly strong {
        font-size: 25px;
    }

    /* Separación entre la calculadora y las recompensas. */
    .modal-rewards-area {
        padding: 24px 20px 32px;
        border-top: 1px solid var(--line);
        overflow: visible;
    }

    .modal-visual-row {
        min-height: 92px;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
    }

    .modal-visual {
        width: 78px;
        height: 78px;
    }

    .modal-icon {
        width: 48px;
        height: 48px;
    }

    .modal-icon img {
        width: 31px;
        height: 31px;
    }

    .modal-rewards-head {
        display: block;
    }

    .modal-rewards-head > div span {
        font-size: 8px;
    }

    .modal-rewards-head > div strong {
        margin-top: 5px;
        font-size: 22px;
        line-height: 1.05;
    }

    .modal-rewards-head > span {
        display: block;
        margin-top: 8px;
        font-size: 9px;
    }

    /* Dos columnas para mantener una lectura cómoda. */
    .modal-rewards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 20px;
        border: 0;
    }

    .modal-reward-card {
        min-height: 150px;
        padding: 14px 13px;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .modal-reward-card:last-child {
        grid-column: 1 / -1;
        min-height: 125px;
    }

    .reward-threshold {
        font-size: 8px;
    }

    .reward-icon {
        width: 34px;
        height: 34px;
        margin: 12px 0 9px;
        font-size: 9px;
    }

    .modal-reward-card strong {
        font-size: 11px;
        line-height: 1.25;
    }

    .modal-reward-card small {
        margin-top: 5px;
        font-size: 8px;
        line-height: 1.35;
    }

    .modal-disclaimer {
        margin: 14px 0 0;
        font-size: 8px;
        line-height: 1.45;
    }
}

@media (max-width: 420px) {
    .modal-copy {
        padding-left: 17px;
        padding-right: 17px;
    }

    .modal-rewards-area {
        padding-left: 17px;
        padding-right: 17px;
    }

    .modal-category-tab {
        grid-template-columns: 20px 30px 1fr auto;
        gap: 6px;
        padding: 0 10px;
    }

    .tab-icon,
    .tab-icon img {
        width: 28px;
        height: 28px;
    }

    .modal-reward-card {
        min-height: 145px;
        padding: 12px 11px;
    }

    .modal-reward-card:last-child {
        min-height: 118px;
    }
}

/* Recompensas en flujo vertical para pantallas pequeñas. */
@media (max-width: 800px) {
    .experience-modal-panel {
        overflow: hidden;
    }

    .modal-content {
        height: calc(100dvh - 116px);
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
    }

    .modal-rewards-area {
        padding: 28px 18px 36px !important;
        overflow: visible !important;
    }

    .modal-visual-row {
        min-height: 86px !important;
        grid-template-columns: 70px minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .modal-visual {
        width: 70px !important;
        height: 70px !important;
    }

    .modal-icon {
        width: 46px !important;
        height: 46px !important;
    }

    .modal-icon img {
        width: 29px !important;
        height: 29px !important;
    }

    .modal-rewards-head {
        display: block !important;
    }

    .modal-rewards-head > div strong {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    .modal-rewards-head > span {
        display: inline-block !important;
        margin-top: 9px !important;
        font-size: 8px !important;
    }

    /* Dos columnas con espacio suficiente entre tarjetas. */
    .modal-rewards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 22px !important;
        border: 0 !important;
    }

    .modal-reward-card,
    .modal-reward-card:last-child {
        grid-column: auto !important;
        min-width: 0 !important;
        min-height: 132px !important;
        height: auto !important;
        padding: 15px 13px 14px !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    /* La última recompensa ocupa el ancho disponible. */
    .modal-reward-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        min-height: 118px !important;
    }

    .reward-threshold {
        font-size: 8px !important;
        letter-spacing: .1em !important;
    }

    .reward-icon {
        width: 36px !important;
        height: 36px !important;
        margin: 11px 0 9px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
    }

    .modal-reward-card strong {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .modal-reward-card small {
        display: block !important;
        margin-top: 5px !important;
        font-size: 8px !important;
        line-height: 1.35 !important;
    }

    .modal-disclaimer {
        margin: 16px 0 0 !important;
        font-size: 8px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 380px) {
    .modal-rewards-grid {
        grid-template-columns: 1fr !important;
    }

    .modal-reward-card,
    .modal-reward-card:last-child,
    .modal-reward-card:nth-child(5) {
        grid-column: 1 !important;
        min-height: 116px !important;
    }
}