/* Estilos visuales principales de la experiencia. */
:root {
    --ui-radius-xl: 28px;
    --ui-radius-lg: 20px;
    --ui-radius-md: 16px;
    --ui-shadow: 0 24px 60px rgba(13,52,45,.13);
    --ui-shadow-hover: 0 30px 70px rgba(13,52,45,.19);
    --ui-green-glow: rgba(23,84,71,.14);
}

/* Elementos compartidos */
.benefit-card, .experience-item, .modal-category-tab, .modal-reward-card, .benefit-detail {
    isolation:isolate;
}

/* Hero: Puntos Promerica y Cash Back */
.hero-copy .benefit-experience-left {
    margin-top:34px;
    width:min(610px,100%);
}

.hero-copy .benefit-cards {
    gap:14px;
}

.hero-copy .benefit-card {
    min-height:116px;
    padding:20px 54px 19px 58px;
    border:1px solid rgba(23,84,71,.16);
    border-radius:18px;
    background:     radial-gradient(circle at 100% 0%, rgba(23,84,71,.08), transparent 38%),     rgba(255,255,255,.42);
    box-shadow:0 10px 30px rgba(16,19,17,.045);
    overflow:hidden;
    transform:translateY(0);
}

.hero-copy .benefit-card::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(120deg, rgba(255,255,255,.42), transparent 48%);
    opacity:.8;
    pointer-events:none;
}

.hero-copy .benefit-card::after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,var(--green),#63a996);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.hero-copy .benefit-card:hover, .hero-copy .benefit-card.is-active {
    transform:translateY(-4px);
    border-color:rgba(23,84,71,.45);
    background:     radial-gradient(circle at 90% 10%, rgba(93,174,149,.25), transparent 40%),     linear-gradient(135deg,#15594b,#0d3b32);
    color:var(--paper);
    box-shadow:var(--ui-shadow-hover);
}

.hero-copy .benefit-card:hover::after, .hero-copy .benefit-card.is-active::after {
    transform:scaleX(1);
}

.hero-copy .benefit-card-number {
    left:20px;
    top:20px;
    font-size:9px;
    font-weight:700;
}

.hero-copy .benefit-card-title {
    font-size:18px;
    letter-spacing:-.035em;
}

.hero-copy .benefit-card-meta {
    margin-top:10px;
    font-size:10px;
    letter-spacing:.12em;
}

.hero-copy .benefit-card-arrow {
    right:19px;
    bottom:17px;
    font-size:21px;
}

/* Panel de detalle de beneficios */
.hero-copy .benefit-detail {
    margin-top:14px;
    padding:26px 28px 23px;
    border:1px solid rgba(23,84,71,.28);
    border-radius:22px;
    background:     radial-gradient(circle at 100% 0%, rgba(112,179,157,.18), transparent 30%),     radial-gradient(circle at 0% 100%, rgba(255,255,255,.05), transparent 34%),     linear-gradient(135deg,#0d342d,#124c40 58%,#0b2c25);
    box-shadow:0 25px 65px rgba(8,34,29,.22);
    overflow:hidden;
}

.hero-copy .benefit-detail::before {
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-90px;
    top:-100px;
    border:1px solid rgba(243,241,233,.14);
    border-radius:50%;
    box-shadow:0 0 0 25px rgba(243,241,233,.025),0 0 0 50px rgba(243,241,232,.018);
    pointer-events:none;
}

.hero-copy .benefit-detail-close {
    width:34px;
    height:34px;
    top:16px;
    right:16px;
    border-color:rgba(243,241,233,.32);
    z-index:2;
    transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.hero-copy .benefit-detail-close:hover {
    transform:rotate(90deg) scale(1.05);
    background:rgba(243,241,233,.1);
    border-color:rgba(243,241,233,.7);
}

.hero-copy .benefit-detail-eyebrow {
    margin-bottom:10px;
    color:#a9c9bd;
    font-size:9px;
}

.hero-copy .benefit-detail h2 {
    max-width:245px;
    font-size:27px;
    line-height:.98;
    letter-spacing:-.055em;
}

.hero-copy .benefit-detail-groups {
    gap:10px;
}

.hero-copy .benefit-group {
    padding:13px 0 0 14px;
    border-left:1px solid rgba(243,241,233,.18);
}

.hero-copy .benefit-group strong {
    font-size:17px;
    color:#fff;
}

.hero-copy .benefit-group p {
    margin-top:7px;
    color:rgba(243,241,232,.68);
    font-size:9.5px;
    line-height:1.5;
}

.hero-copy .benefit-detail-note {
    color:rgba(243,241,232,.4);
}

/* Hero: selector de experiencias */
.experience-selector {
    gap:12px;
    border-top:0;
}

.experience-item {
    min-height:78px;
    padding:0 22px;
    border:1px solid rgba(23,84,71,.13);
    border-radius:17px;
    background:rgba(255,255,255,.24);
    box-shadow:0 8px 24px rgba(16,19,17,.035);
    overflow:hidden;
}

.experience-item::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 55%);
    opacity:.7;
}

.experience-item:hover, .experience-item.is-active {
    background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(226,238,233,.65));
    border-color:rgba(23,84,71,.32);
    box-shadow:0 14px 34px rgba(23,84,71,.08);
}

.experience-item.is-active::after {
    height:3px;
    left:18px;
    right:18px;
    bottom:0;
    width:auto;
    transform:scaleX(1);
    background:var(--green);
}

.experience-number {
    font-weight:700;
}

.experience-name {
    font-size:15px;
    letter-spacing:-.015em;
}

.experience-arrow {
    font-size:20px;
}

/* Modal: estructura principal */
.experience-modal-backdrop {
    background:     radial-gradient(circle at 50% 0%, rgba(76,135,118,.18), transparent 42%),     rgba(5,22,18,.84);
}

.experience-modal-panel {
    inset:14px;
    height:calc(100dvh - 28px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:26px;
    background:var(--paper);
    box-shadow:0 35px 110px rgba(0,0,0,.34);
    overflow:hidden;
}

.modal-header {
    height:70px;
    flex-basis:70px;
    padding:0 28px;
    background:rgba(243,241,233,.88);
}

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

.modal-close {
    width:46px;
    height:46px;
    border-color:rgba(23,84,71,.45);
}

.modal-close:hover {
    background:var(--green);
    box-shadow:0 8px 24px rgba(23,84,71,.18);
}

/* Categorías presentadas como bloques individuales. */
.modal-category-nav {
    gap:10px;
    padding:10px;
    height:82px;
    flex-basis:82px;
    border-bottom:0;
    background:var(--paper-deep);
}

.modal-category-tab {
    height:62px;
    padding:0 18px;
    grid-template-columns:27px 38px 1fr auto;
    gap:10px;
    border:1px solid rgba(23,84,71,.10);
    border-radius:15px;
    background:rgba(255,255,255,.38);
    box-shadow:0 6px 20px rgba(16,19,17,.035);
    transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.modal-category-tab:last-child {
    border-right:1px solid rgba(23,84,71,.10);
}

.modal-category-tab:hover {
    transform:translateY(-2px);
    border-color:rgba(23,84,71,.3);
    box-shadow:0 12px 26px rgba(23,84,71,.08);
}

.modal-category-tab.is-active {
    background:linear-gradient(135deg,#175447,#0d342d);
    color:var(--paper);
    border-color:#175447;
    box-shadow:0 13px 30px rgba(13,52,45,.18);
}

.modal-category-tab::after {
    display:none;
}

.modal-category-tab .tab-number {
    font-size:9px;
}

.modal-category-tab .tab-icon {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(23,84,71,.08);
}

.modal-category-tab .tab-icon img {
    width:24px;
    height:24px;
    object-fit:contain;
}

.modal-category-tab.is-active .tab-icon {
    background:rgba(243,241,233,.12);
}

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

.modal-category-tab b {
    font-size:10px;
    letter-spacing:.08em;
}

.modal-category-tab.is-active b {
    color:#a8c8bd;
}

/* Modal: contenido de la experiencia */
.modal-content {
    gap:0;
    background:var(--paper);
}

.modal-copy {
    padding:50px clamp(38px,4vw,72px);
    background:     radial-gradient(circle at 0 0, rgba(23,84,71,.055), transparent 34%),     var(--paper);
}

.modal-eyebrow {
    font-size:10px;
    font-weight:700;
}

.modal-copy h2 {
    max-width:650px;
    font-size:clamp(62px,5vw,98px);
    line-height:.84;
}

.modal-copy p {
    max-width:520px;
    font-size:15px;
    line-height:1.6;
}

.modal-subcategories {
    gap:8px;
}

.modal-subcategory {
    padding:9px 13px;
    border:1px solid rgba(23,84,71,.18);
    background:rgba(255,255,255,.38);
    border-radius:999px;
    font-size:10px;
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.modal-subcategory:hover {
    transform:translateY(-2px);
    background:#fff;
    border-color:rgba(23,84,71,.38);
}

.modal-spend-box {
    margin-top:34px;
    padding:19px 20px 18px;
    border:1px solid rgba(23,84,71,.12);
    border-radius:18px;
    background:rgba(255,255,255,.42);
    box-shadow:0 10px 30px rgba(16,19,17,.035);
}

.modal-spend-heading strong {
    font-size:40px;
    letter-spacing:-.05em;
}

.modal-spend-box input {
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--green),rgba(16,19,17,.13));
}

.modal-spend-box input::-webkit-slider-thumb {
    width:23px;
    height:23px;
    box-shadow:0 0 0 6px rgba(23,84,71,.08);
}

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

.modal-points-result > div:first-child, .modal-monthly {
    padding:17px 19px;
    border:1px solid rgba(23,84,71,.12);
    border-radius:18px;
    background:rgba(255,255,255,.34);
}

.modal-points-result > div:first-child {
    min-width:185px;
}

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

.modal-monthly {
    min-width:155px;
}

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

/* Modal: sección de recompensas */
.modal-rewards-area {
    position:relative;
    padding:38px clamp(28px,3.2vw,52px) 28px;
    background:     radial-gradient(circle at 88% 0%, rgba(83,139,123,.16), transparent 32%),     linear-gradient(145deg,#ebe8df,#e5e2d8);
    overflow:hidden;
}

.modal-rewards-area::before {
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-170px;
    top:-170px;
    border:1px solid rgba(23,84,71,.09);
    border-radius:50%;
    box-shadow:0 0 0 35px rgba(23,84,71,.025),0 0 0 70px rgba(23,84,71,.018);
    pointer-events:none;
}

.modal-visual-row {
    min-height:145px;
    grid-template-columns:150px minmax(0,1fr);
    gap:28px;
    position:relative;
    z-index:1;
}

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

.modal-orbit {
    border-color:rgba(23,84,71,.16);
}

.modal-orbit.orbit-one {
    width:118px;
    height:118px;
}

.modal-orbit.orbit-two {
    width:150px;
    height:150px;
    border-style:dashed;
}

.modal-icon {
    width:82px;
    height:82px;
    background:linear-gradient(145deg,#1e6958,#0d342d);
    box-shadow:0 18px 40px rgba(23,84,71,.2);
}

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

.modal-rewards-head {
    align-items:center;
}

.modal-rewards-head > div span {
    font-size:9px;
    font-weight:700;
}

.modal-rewards-head > div strong {
    font-size:clamp(30px,2.7vw,44px);
    letter-spacing:-.055em;
}

.modal-rewards-head > span {
    padding:9px 12px;
    border:1px solid rgba(23,84,71,.15);
    border-radius:999px;
    background:rgba(255,255,255,.4);
    font-size:10px;
    font-weight:600;
}

/* Recompensas mostradas como tarjetas. */
.modal-rewards-grid {
    position:relative;
    z-index:1;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-top:24px;
    border:0;
}

.modal-reward-card {
    min-height:178px;
    padding:18px 16px 16px;
    border:1px solid rgba(23,84,71,.12);
    border-radius:18px;
    background:rgba(255,255,255,.43);
    box-shadow:0 8px 22px rgba(16,19,17,.035);
    overflow:hidden;
    transition:     transform .3s cubic-bezier(.2,.8,.2,1),     box-shadow .3s ease,     background .3s ease,     opacity .3s ease,     border-color .3s ease;
}

.modal-reward-card::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,rgba(255,255,255,.5),transparent 55%);
    pointer-events:none;
}

.modal-reward-card:hover {
    transform:translateY(-6px);
    border-color:rgba(23,84,71,.28);
    box-shadow:0 18px 34px rgba(23,84,71,.11);
}

.modal-reward-card.is-unlocked {
    background:     radial-gradient(circle at 100% 0%, rgba(105,185,158,.25), transparent 45%),     linear-gradient(145deg,#175b4c,#0d342d);
    border-color:#175447;
    box-shadow:0 18px 35px rgba(13,52,45,.17);
    color:var(--paper);
}

.modal-reward-card.is-unlocked:hover {
    transform:translateY(-8px) scale(1.015);
}

.modal-reward-card.is-locked {
    opacity:.5;
    background:rgba(255,255,255,.25);
}

.reward-threshold {
    font-size:10px;
    font-weight:700;
    letter-spacing:.13em;
}

.reward-icon {
    width:48px;
    height:48px;
    margin:20px 0 14px;
    border:1px solid currentColor;
    border-radius:15px;
    background:rgba(255,255,255,.08);
    font-size:11px;
    font-weight:700;
    transform:rotate(-4deg);
    transition:transform .3s ease, background .3s ease;
}

.modal-reward-card:hover .reward-icon {
    transform:rotate(0) scale(1.08);
}

.modal-reward-card.is-unlocked .reward-icon {
    background:rgba(243,241,233,.1);
}

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

.modal-reward-card small {
    margin-top:7px;
    font-size:9px;
    line-height:1.45;
}

.modal-disclaimer {
    position:relative;
    z-index:1;
    margin-top:13px;
    font-size:8px;
}

/* Tarjetas inferiores de la página */
.benefits-list article {
    position:relative;
    border:1px solid rgba(23,84,71,.12);
    border-radius:18px;
    background:rgba(255,255,255,.24);
    box-shadow:0 8px 24px rgba(16,19,17,.035);
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.benefits-list article:not(:first-child) {
    border-left:1px solid rgba(23,84,71,.12);
}

.benefits-list article:hover {
    transform:translateY(-5px);
    background:rgba(255,255,255,.52);
    box-shadow:0 18px 40px rgba(23,84,71,.08);
}

.benefits-list h3 {
    letter-spacing:-.035em;
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion:reduce) {
    .benefit-card,   .experience-item,   .modal-category-tab,   .modal-reward-card,   .benefit-detail,   .benefit-card-arrow,   .reward-icon {
        transition:none!important;
    }
}

/* Adaptación visual para pantallas pequeñas */
@media (max-width:1100px) and (min-width:801px) {
    .hero-copy .benefit-experience-left {
        width:min(560px,100%);
    }
    .hero-copy .benefit-cards {
        grid-template-columns:1fr;
    }
    .modal-category-nav {
        gap:7px;
        padding:8px;
    }
    .modal-category-tab {
        padding:0 12px;
        grid-template-columns:24px 34px 1fr auto;
    }
    .modal-rewards-grid {
        gap:8px;
    }
    .modal-reward-card {
        min-height:150px;
        padding:14px;
    }
}

@media (max-width:800px) {
    .experience-modal-panel {
        inset:8px;
        width:calc(100% - 16px);
        height:calc(100dvh - 16px);
        border-radius:20px;
    }
    .modal-category-nav {
        gap:8px;
        padding:8px;
    }
    .modal-category-tab {
        border-radius:13px;
    }
    .modal-copy {
        padding:34px 24px 28px;
    }
    .modal-spend-box {
        padding:16px;
    }
    .modal-points-result > div:first-child,   .modal-monthly {
        width:100%;
        min-width:0;
    }
    .modal-rewards-area {
        padding:30px 24px 28px;
    }
    .modal-rewards-grid {
        gap:10px;
    }
    .modal-reward-card {
        border-radius:16px;
    }
    .hero-copy .benefit-experience-left {
        width:100%;
    }
}

@media (max-width:520px) {
    .hero-copy .benefit-cards {
        gap:9px;
    }
    .hero-copy .benefit-card {
        min-height:92px;
        padding:17px 45px 15px 48px;
        border-radius:15px;
    }
    .hero-copy .benefit-card-title {
        font-size:16px;
    }
    .hero-copy .benefit-detail {
        border-radius:18px;
        padding:22px 20px;
    }
    .hero-copy .benefit-detail-groups {
        grid-template-columns:1fr!important;
        gap:12px;
    }
    .hero-copy .benefit-group {
        padding:11px 0 0;
        border-left:0;
        border-top:1px solid rgba(243,241,233,.18);
    }
    .experience-selector {
        gap:8px;
    }
    .experience-item {
        border-radius:14px;
    }
    .modal-category-nav {
        grid-template-columns:repeat(4,minmax(132px,1fr));
    }
    .modal-category-tab {
        min-width:132px;
    }
    .modal-rewards-head {
        align-items:flex-start;
        flex-direction:column;
    }
    .modal-rewards-head > span {
        align-self:flex-start;
    }
    .modal-rewards-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .modal-reward-card {
        min-height:145px;
    }
    .modal-reward-card:last-child {
        grid-column:1 / -1;
    }
}

/* Tarjetas de la calculadora */
.spending-grid {
    gap:12px;
    border-top:0;
}

.spending-category {
    position:relative;
    min-height:220px;
    padding:24px 24px 25px!important;
    border:1px solid rgba(23,84,71,.12)!important;
    border-radius:18px;
    background:rgba(255,255,255,.28);
    box-shadow:0 8px 24px rgba(16,19,17,.035);
    overflow:hidden;
    transition:transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.spending-category::before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 100% 0%,rgba(23,84,71,.08),transparent 45%);
    pointer-events:none;
}

.spending-category:hover {
    transform:translateY(-5px);
    background:rgba(255,255,255,.55);
    border-color:rgba(23,84,71,.28)!important;
    box-shadow:0 18px 38px rgba(23,84,71,.08);
}

.category-top {
    position:relative;
    z-index:1;
}

.category-top strong {
    font-size:15px;
    letter-spacing:-.025em;
}

.category-input-wrap {
    position:relative;
    z-index:1;
    margin-top:58px;
    padding-bottom:8px;
    border-bottom-color:rgba(23,84,71,.2);
}

.category-input {
    font-size:30px;
    letter-spacing:-.04em;
}

.category-range {
    position:relative;
    z-index:1;
    height:4px;
    border-radius:999px;
    background:rgba(16,19,17,.13);
}

.category-range::-webkit-slider-thumb {
    width:20px;
    height:20px;
    box-shadow:0 0 0 6px rgba(23,84,71,.07);
}

.points-result {
    padding:28px;
    border:1px solid rgba(23,84,71,.12);
    border-radius:20px;
    background:rgba(255,255,255,.35);
    box-shadow:0 12px 32px rgba(16,19,17,.035);
}

.spend-summary {
    padding:0;
}

/* Formulario de solicitud */
.request-form label {
    color:var(--ink);
    font-size:12px;
    letter-spacing:.01em;
}

.request-form input, .request-form select {
    border:1px solid rgba(23,84,71,.18);
    border-radius:14px;
    background:rgba(255,255,255,.4);
    padding:16px 17px;
    box-shadow:0 6px 18px rgba(16,19,17,.025);
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}

.request-form input:focus, .request-form select:focus {
    border-color:var(--green);
    background:#fff;
    box-shadow:0 0 0 4px rgba(23,84,71,.08);
    outline:none;
    transform:translateY(-1px);
}

.request-submit {
    border-radius:14px!important;
    box-shadow:0 12px 28px rgba(23,84,71,.14);
    transition:transform .25s ease, box-shadow .25s ease!important;
}

.request-submit:hover {
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(23,84,71,.2);
}

@media (max-width:800px) {
    .spending-category {
        min-height:190px;
    }
    .points-result {
        padding:22px;
    }
}

/* Distribución del contenido del modal. */
@media (min-width: 801px) {
    .experience-modal-panel {
        inset:8px;
        height:calc(100dvh - 16px);
        border-radius:24px;
    }
    .modal-header {
        height:58px;
        flex-basis:58px;
        padding:0 24px;
    }
    .modal-close {
        width:44px;
        height:44px;
    }
    .modal-category-nav {
        height:68px;
        flex-basis:68px;
        gap:8px;
        padding:8px;
    }
    .modal-category-tab {
        height:52px;
        padding:0 16px;
        grid-template-columns:24px 34px minmax(0,1fr) auto;
        gap:9px;
        border-radius:13px;
    }
    .modal-category-tab .tab-icon {
        width:32px;
        height:32px;
    }
    .modal-category-tab .tab-icon img {
        width:22px;
        height:22px;
    }
    .modal-category-tab strong {
        font-size:14px;
    }
    .modal-content {
        grid-template-columns:minmax(390px,43%) minmax(0,57%);
    }
    .modal-copy {
        padding:30px clamp(28px,3.2vw,48px) 24px;
        justify-content:flex-start;
    }
    .modal-eyebrow {
        font-size:9px;
    }
    .modal-copy h2 {
        max-width:590px;
        margin-top:13px;
        font-size:clamp(54px,4.15vw,76px);
        line-height:.87;
    }
    .modal-copy p {
        max-width:520px;
        margin-top:14px;
        font-size:13px;
        line-height:1.45;
    }
    .modal-subcategories {
        gap:6px;
        margin-top:13px;
    }
    .modal-subcategory {
        padding:7px 11px;
        font-size:9px;
    }
    .modal-spend-box {
        margin-top:18px;
        padding:14px 16px 13px;
        border-radius:15px;
    }
    .modal-spend-heading span {
        font-size:8px;
    }
    .modal-spend-heading strong {
        font-size:32px;
    }
    .modal-spend-box input {
        margin-top:12px;
    }
    .modal-range-labels {
        margin-top:5px;
        font-size:8px;
    }
    .modal-points-result {
        margin-top:13px;
        gap:10px;
    }
    .modal-points-result>div:first-child,   .modal-monthly {
        padding:12px 15px;
        border-radius:15px;
    }
    .modal-points-result>div:first-child {
        min-width:155px;
    }
    .modal-monthly {
        min-width:140px;
    }
    .modal-points-result span,   .modal-monthly span {
        font-size:8px;
    }
    .modal-points-result strong {
        font-size:52px;
    }
    .modal-monthly strong {
        margin-top:4px;
        font-size:27px;
    }
    .modal-rewards-area {
        padding:22px clamp(22px,2.6vw,38px) 16px;
        justify-content:flex-start;
    }
    .modal-visual-row {
        min-height:108px;
        grid-template-columns:118px minmax(0,1fr);
        gap:20px;
    }
    .modal-visual {
        width:108px;
        height:108px;
    }
    .modal-orbit.orbit-one {
        width:82px;
        height:82px;
    }
    .modal-orbit.orbit-two {
        width:108px;
        height:108px;
    }
    .modal-icon {
        width:62px;
        height:62px;
    }
    .modal-icon img {
        width:42px;
        height:42px;
    }
    .modal-rewards-head {
        gap:12px;
    }
    .modal-rewards-head>div span {
        font-size:8px;
    }
    .modal-rewards-head>div strong {
        margin-top:4px;
        font-size:clamp(25px,2.15vw,34px);
        line-height:.95;
    }
    .modal-rewards-head>span {
        padding:7px 9px;
        font-size:8px;
    }
    .modal-rewards-grid {
        margin-top:13px;
        gap:7px;
    }
    .modal-reward-card {
        min-height:126px;
        padding:12px 11px 11px;
        border-radius:14px;
    }
    .reward-threshold {
        font-size:8px;
    }
    .reward-icon {
        width:34px;
        height:34px;
        margin:10px 0 8px;
        border-radius:11px;
        font-size:9px;
    }
    .modal-reward-card strong {
        font-size:10px;
    }
    .modal-reward-card small {
        margin-top:4px;
        font-size:8px;
        line-height:1.3;
    }
    .modal-disclaimer {
        margin-top:6px;
        font-size:7px;
    }
}

@media (min-width: 801px) and (max-height: 760px) {
    .modal-header {
        height:52px;
        flex-basis:52px;
    }
    .modal-category-nav {
        height:62px;
        flex-basis:62px;
    }
    .modal-category-tab {
        height:46px;
    }
    .modal-copy {
        padding-top:22px;
        padding-bottom:18px;
    }
    .modal-copy h2 {
        font-size:clamp(48px,3.8vw,66px);
    }
    .modal-copy p {
        margin-top:10px;
    }
    .modal-subcategories {
        margin-top:9px;
    }
    .modal-spend-box {
        margin-top:13px;
        padding:11px 14px;
    }
    .modal-points-result {
        margin-top:9px;
    }
    .modal-points-result strong {
        font-size:46px;
    }
    .modal-rewards-area {
        padding-top:16px;
        padding-bottom:11px;
    }
    .modal-visual-row {
        min-height:88px;
        grid-template-columns:96px minmax(0,1fr);
    }
    .modal-visual {
        width:88px;
        height:88px;
    }
    .modal-orbit.orbit-one {
        width:68px;
        height:68px;
    }
    .modal-orbit.orbit-two {
        width:88px;
        height:88px;
    }
    .modal-icon {
        width:54px;
        height:54px;
    }
    .modal-icon img {
        width:36px;
        height:36px;
    }
    .modal-rewards-head>div strong {
        font-size:27px;
    }
    .modal-rewards-grid {
        margin-top:9px;
        gap:6px;
    }
    .modal-reward-card {
        min-height:108px;
        padding:9px 10px;
    }
    .reward-icon {
        width:29px;
        height:29px;
        margin:7px 0 6px;
    }
    .modal-disclaimer {
        margin-top:4px;
    }
}

/* Detalle de beneficios y formulario de solicitud. */

/* El detalle del beneficio se mantiene junto a sus botones sin desplazar las experiencias. */
.hero-copy .benefit-experience-left {
    position:relative;
    z-index:60;
}

.hero-copy .benefit-cards {
    position:relative;
    z-index:1;
}

.hero-copy .benefit-detail {
    position:absolute;
    left:0;
    right:0;
    top:0;
    width:100%;
    height:176px;
    min-height:176px;
    margin:0;
    padding:22px 48px 18px 24px;
    display:grid;
    grid-template-columns:minmax(185px, .85fr) minmax(0, 1.8fr);
    grid-template-rows:auto auto 1fr;
    column-gap:24px;
    border:1px solid rgba(243,241,233,.18);
    border-radius:22px;
    background:     radial-gradient(circle at 100% 0%, rgba(116,183,160,.22), transparent 32%),     linear-gradient(135deg,#0b3129,#124f42 58%,#0b2e27);
    box-shadow:0 26px 55px rgba(8,34,29,.22);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px) scale(.985);
    pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}

.hero-copy .benefit-detail.is-open {
    display:grid;
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.hero-copy .benefit-detail::before {
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    right:-110px;
    bottom:-130px;
    border:1px solid rgba(243,241,233,.12);
    border-radius:50%;
    box-shadow:0 0 0 25px rgba(243,241,233,.025),0 0 0 50px rgba(243,241,233,.018);
    pointer-events:none;
}

.hero-copy .benefit-detail-eyebrow {
    grid-column:1;
    grid-row:1;
    margin:0;
    color:#a9c9bd;
    font-size:8px;
    letter-spacing:.18em;
}

.hero-copy .benefit-detail h2 {
    grid-column:1;
    grid-row:2;
    max-width:210px;
    margin:7px 0 0;
    color:var(--paper);
    font-size:25px;
    line-height:.95;
    letter-spacing:-.045em;
}

.hero-copy .benefit-detail > p {
    grid-column:1;
    grid-row:3;
    max-width:220px;
    margin:7px 0 0;
    color:rgba(243,241,233,.63);
    font-size:8.5px;
    line-height:1.35;
}

.hero-copy .benefit-detail-groups {
    grid-column:2;
    grid-row:1 / span 3;
    align-self:stretch;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    max-height:none;
    overflow:hidden;
    padding:0;
}

.hero-copy .benefit-group {
    min-width:0;
    padding:3px 14px 0;
    border-left:1px solid rgba(243,241,233,.18);
}

.hero-copy .benefit-group:first-child {
    border-left:1px solid rgba(243,241,233,.18);
}

.hero-copy .benefit-group strong {
    display:block;
    color:var(--paper);
    font-size:17px;
    line-height:1;
    letter-spacing:-.025em;
}

.hero-copy .benefit-group p {
    margin:7px 0 0;
    color:rgba(243,241,233,.68);
    font-size:8px;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.hero-copy .benefit-detail-note {
    position:absolute;
    left:24px;
    bottom:10px;
    margin:0;
    color:rgba(243,241,233,.35);
    font-size:6.5px;
    line-height:1;
}

.hero-copy .benefit-detail-close {
    position:absolute;
    top:12px;
    right:12px;
    width:29px;
    height:29px;
    border:1px solid rgba(243,241,233,.3);
    border-radius:50%;
    background:rgba(243,241,233,.04);
    color:var(--paper);
    z-index:5;
}

.hero-copy .benefit-detail-close:hover {
    background:rgba(243,241,233,.12);
    border-color:rgba(243,241,233,.65);
}

/* Área de conversión integrada al diseño visual. */
.request-section {
    position:relative;
    overflow:hidden;
    min-height:100vh;
    padding:clamp(90px,9vw,150px) max(48px,8vw);
    background:     radial-gradient(circle at 8% 20%, rgba(91,156,136,.16), transparent 28%),     radial-gradient(circle at 92% 85%, rgba(255,255,255,.05), transparent 25%),     linear-gradient(135deg,#0d4035 0%,#0a332b 58%,#082b24 100%);
}

.request-section::before {
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-250px;
    top:-260px;
    border:1px solid rgba(243,241,233,.09);
    border-radius:50%;
    box-shadow:0 0 0 45px rgba(243,241,233,.018),0 0 0 90px rgba(243,241,233,.012);
    pointer-events:none;
}

.request-section::after {
    content:"YSI EXPERIENCE";
    position:absolute;
    right:8vw;
    bottom:45px;
    color:rgba(243,241,233,.22);
    font-size:8px;
    letter-spacing:.28em;
}

.request-copy, .request-form {
    position:relative;
    z-index:2;
}

.request-copy > span {
    color:#a9c9bd;
    font-size:10px;
    letter-spacing:.24em;
}

.request-copy h2 {
    max-width:700px;
    margin:28px 0 28px;
    color:var(--paper);
    font-size:clamp(58px,6.7vw,112px);
    line-height:.84;
    letter-spacing:-.075em;
}

.request-copy h2 em {
    color:#91b5aa;
}

.request-copy p {
    max-width:430px;
    color:rgba(243,241,233,.68);
    font-size:14px;
    line-height:1.7;
}

.request-form {
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:30px;
    border:1px solid rgba(243,241,233,.14);
    border-radius:28px;
    background:rgba(243,241,233,.055);
    box-shadow:0 30px 80px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
}

.form-row {
    gap:16px;
}

.request-form label {
    gap:8px;
    color:rgba(243,241,233,.66)!important;
    font-size:9px!important;
    font-weight:600;
    letter-spacing:.16em!important;
}

.request-form input, .request-form select {
    min-height:58px;
    padding:15px 17px!important;
    border:1px solid rgba(243,241,233,.17)!important;
    border-radius:14px!important;
    background:rgba(243,241,233,.08)!important;
    color:var(--paper)!important;
    font-family:inherit;
    font-size:16px!important;
    letter-spacing:0!important;
    box-shadow:none!important;
    transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}

.request-form input::placeholder {
    color:rgba(243,241,233,.3);
}

.request-form select option {
    color:var(--ink)!important;
    background:var(--paper);
}

.request-form input:hover, .request-form select:hover {
    border-color:rgba(243,241,233,.32)!important;
    background:rgba(243,241,233,.1)!important;
}

.request-form input:focus, .request-form select:focus {
    border-color:#a9c9bd!important;
    background:rgba(243,241,233,.12)!important;
    box-shadow:0 0 0 4px rgba(169,201,189,.08)!important;
    transform:none;
}

.request-submit {
    align-self:flex-start;
    min-height:58px;
    margin-top:8px!important;
    padding:17px 24px!important;
    border:1px solid rgba(243,241,233,.2);
    border-radius:15px!important;
    background:var(--paper)!important;
    color:var(--green)!important;
    font-size:12px!important;
    font-weight:700;
    letter-spacing:.12em!important;
    box-shadow:0 16px 35px rgba(0,0,0,.14)!important;
}

.request-submit:hover {
    background:#fff!important;
    transform:translateY(-3px);
    box-shadow:0 22px 42px rgba(0,0,0,.2)!important;
}

.form-note {
    color:rgba(243,241,233,.4)!important;
    font-size:9px!important;
    line-height:1.55!important;
}

@media (max-width:800px) {
    .hero-copy .benefit-detail {
        height:auto;
        min-height:0;
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        margin-top:10px;
        grid-template-columns:1fr;
        grid-template-rows:auto;
        padding:20px 42px 20px 20px;
    }
    .hero-copy .benefit-detail-eyebrow,   .hero-copy .benefit-detail h2,   .hero-copy .benefit-detail > p,   .hero-copy .benefit-detail-groups {
        grid-column:1;
        grid-row:auto;
    }
    .hero-copy .benefit-detail-groups {
        grid-template-columns:1fr;
        margin-top:14px;
        overflow:visible;
    }
    .hero-copy .benefit-group,   .hero-copy .benefit-group:first-child {
        padding:10px 0 0;
        border-left:0;
        border-top:1px solid rgba(243,241,233,.18);
    }
    .hero-copy .benefit-detail-note {
        position:static;
        margin-top:14px;
    }
    .request-section {
        min-height:auto;
        padding:90px 24px;
    }
    .request-form {
        padding:20px;
        border-radius:22px;
    }
    .request-copy h2 {
        font-size:clamp(54px,15vw,84px);
    }
}

/* Capas visuales del detalle de Puntos Promerica y Cash Back. */
.hero-copy .benefit-experience-left {
    position:relative;
    z-index:80;
    isolation:isolate;
}

.hero-copy .benefit-cards {
    position:relative;
    z-index:1;
}

.hero-copy .benefit-card {
    position:relative;
    z-index:1;
}

.hero-copy .benefit-detail {
    position:absolute;
    z-index:100;
    isolation:isolate;
}

.hero-copy .benefit-detail.is-open {
    z-index:200;
}

/* Beneficios visibles mientras se muestra el detalle. */
.hero-copy .benefit-experience-left:has(.benefit-detail.is-open) .benefit-cards {
    z-index:1;
}

.hero-copy .benefit-experience-left:has(.benefit-detail.is-open) .benefit-card {
    filter:brightness(.92);
}

/* Etiquetas de categorías y ventana de confirmación. */
.experience-selector .experience-item {
    overflow:hidden;
}

.experience-selector .experience-name {
    font-weight:600;
    letter-spacing:-.025em;
    color:var(--ink-soft);
    transition:color .25s ease, transform .25s ease;
}

.experience-selector .experience-item:hover .experience-name, .experience-selector .experience-item.is-active .experience-name {
    color:var(--green);
}

.experience-selector .experience-item:hover .experience-name {
    transform:translateX(3px);
}

/* Confirmación mostrada como ventana superpuesta. */
.confirmation-section[hidden] {
    display:none!important;
}

.confirmation-section {
    position:fixed!important;
    inset:0!important;
    z-index:9999!important;
    display:grid!important;
    place-items:center!important;
    padding:24px!important;
    background:rgba(7,25,21,.62)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    color:var(--paper)!important;
    overflow:auto!important;
}

.confirmation-modal {
    position:relative;
    width:min(1040px,94vw);
    min-height:min(650px,88vh);
    padding:48px clamp(30px,5vw,72px) 54px;
    border:1px solid rgba(243,241,233,.18);
    border-radius:32px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:     radial-gradient(circle at 85% 15%,rgba(117,184,160,.24),transparent 26%),     radial-gradient(circle at 5% 90%,rgba(255,255,255,.06),transparent 28%),     linear-gradient(135deg,#0d4035 0%,#0a342c 58%,#082a24 100%);
    box-shadow:0 45px 120px rgba(0,0,0,.34);
    animation:confirmationIn .42s cubic-bezier(.2,.8,.2,1) both;
}

.confirmation-modal::before, .confirmation-modal::after {
    content:"";
    position:absolute;
    border:1px solid rgba(243,241,233,.08);
    border-radius:50%;
    pointer-events:none;
}

.confirmation-modal::before {
    width:520px;
    height:520px;
    right:-290px;
    top:-290px;
    box-shadow:0 0 0 42px rgba(243,241,233,.018),0 0 0 84px rgba(243,241,233,.012);
}

.confirmation-modal::after {
    width:250px;
    height:250px;
    left:-150px;
    bottom:-170px;
}

.confirmation-brand {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.confirmation-brand img {
    width:142px;
    height:auto;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.confirmation-brand span, .confirmation-kicker {
    font-size:10px;
    letter-spacing:.24em;
    color:#a9c9bd;
    text-transform:uppercase;
}

.confirmation-content {
    position:relative;
    z-index:2;
    max-width:800px;
    margin:auto 0;
    padding:70px 0 40px;
}

.confirmation-kicker {
    display:block;
    margin-bottom:26px;
}

.confirmation-content h2 {
    max-width:850px;
    margin:0 0 28px;
    color:var(--paper);
    font-size:clamp(54px,7vw,105px)!important;
    line-height:.86!important;
    letter-spacing:-.075em!important;
}

.confirmation-content h2 em {
    color:#91b5aa!important;
    font-family:"Playfair Display",Georgia,serif!important;
    font-weight:500!important;
}

.confirmation-content p {
    max-width:520px;
    margin:0 0 34px;
    color:rgba(243,241,233,.7);
    font-size:16px;
    line-height:1.65;
}

.confirmation-action {
    display:inline-flex;
    align-items:center;
    gap:38px;
    min-height:58px;
    padding:17px 22px;
    border:1px solid rgba(243,241,233,.18);
    border-radius:15px;
    background:var(--paper);
    color:var(--green);
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}

.confirmation-action:hover {
    transform:translateY(-3px);
    background:#fff;
    box-shadow:0 18px 38px rgba(0,0,0,.2);
}

.confirmation-action span {
    font-size:20px;
    line-height:1;
}

.confirmation-close {
    position:absolute;
    z-index:4;
    top:22px;
    right:22px;
    width:48px;
    height:48px;
    border:1px solid rgba(243,241,233,.3);
    border-radius:50%;
    background:rgba(243,241,233,.04);
    color:var(--paper);
    font-size:25px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
    transition:transform .25s ease,background .25s ease,border-color .25s ease;
}

.confirmation-close:hover {
    transform:rotate(90deg);
    background:rgba(243,241,233,.12);
    border-color:rgba(243,241,233,.7);
}

.confirmation-mark {
    position:absolute;
    right:58px;
    bottom:42px;
    z-index:2;
    color:rgba(243,241,233,.1);
    font-size:clamp(80px,13vw,190px);
    font-weight:700;
    letter-spacing:-.08em;
    line-height:.8;
}

body.confirmation-open {
    overflow:hidden;
}

@keyframes confirmationIn {
    from {
        opacity:0;
        transform:translateY(18px) scale(.975)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}

@media(max-width:700px) {
    .confirmation-section {
        padding:12px!important
    }
    .confirmation-modal {
        width:100%;
        min-height:calc(100dvh - 24px);
        border-radius:24px;
        padding:30px 24px 32px;
    }
    .confirmation-brand img {
        width:112px
    }
    .confirmation-brand span {
        font-size:8px
    }
    .confirmation-content {
        padding:50px 0 30px
    }
    .confirmation-content h2 {
        font-size:clamp(48px,14vw,76px)!important
    }
    .confirmation-content p {
        font-size:14px
    }
    .confirmation-mark {
        right:28px;
        bottom:32px;
        font-size:90px
    }
}