/* Adaptación para pantallas medianas */
@media (max-width: 1100px) {
    :root {
        --header-height: 92px;
    }
    .site-header {
        width: calc(100% - 48px);
    }
    .main-nav {
        gap: 14px;
    }
    .hero {
        width: calc(100% - 48px);
        min-height: calc(100vh - var(--header-height));
    }
    .hero-copy {
        left: 3%;
        width: 48%;
    }
    .hero-card-wrapper {
        right: 1%;
        width: 52%;
    }
    .hero-copy h1 {
        font-size: clamp(58px,6.5vw,82px);
    }
    .hero-description {
        font-size: 18px;
    }
    .hero-context {
        right: 4%;
    }
    .experience-selector {
        left: 3%;
        right: 3%;
    }
    .rewards-header {
        grid-template-columns: 1fr 300px;
    }
}

@media (max-width: 800px) {
    :root {
        --header-height: 76px;
    }
    .site-header {
        width: calc(100% - 32px);
        grid-template-columns: 1fr auto;
    }
    .site-logo {
        width: 118px;
    }
    .header-center {
        display: none;
    }
    .main-nav {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        padding: 20px;
        display: none;
        flex-direction: column;
        background: var(--paper);
        border: 1px solid var(--line);
    }
    .main-nav.is-open {
        display: flex;
    }
    .mobile-menu {
        display: flex;
        justify-self: end;
    }
    .hero {
        width: calc(100% - 32px);
        min-height: auto;
        padding: 55px 0 0;
        overflow: visible;
    }
    .hero-index, .hero-mark, .hero-context, .card-caption, .card-instruction, .hero-grid-line {
        display: none !important;
    }
    .hero-copy {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        padding: 0 8px;
    }
    .hero-copy h1 {
        font-size: clamp(58px,16vw,92px);
    }
    .hero-description {
        margin-top: 30px;
        font-size: 19px;
    }
    .hero-detail {
        font-size: 11px;
    }
    .hero-discover {
        display: none;
    }
    .hero-card-wrapper {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin-top: 40px;
        padding: 35px 0 95px;
    }
    .card-flip {
        top: 0;
        right: 8px;
        display: block;
    }
    .card-scene {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1.59/1;
    }
    .card {
        width: 100%;
    }
    .experience-selector {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        height: auto;
        grid-template-columns: repeat(2,1fr);
    }
    .benefit-experience {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        margin: 30px 0 0;
    }
    .benefit-cards {
        grid-template-columns: 1fr 1fr;
    }
    .benefit-card {
        min-height: 110px;
    }
    .benefit-detail {
        position: relative;
        inset: auto;
        min-height: 0;
        margin-top: 12px;
    }
    .experience-item {
        min-height: 70px;
        padding: 0 14px;
    }
    .experience-name {
        font-size: 12px;
    }
    .simple-section, .rewards-section, .request-section {
        padding: 90px 24px;
    }
    .simple-section h2, .rewards-title {
        margin-bottom: 55px;
    }
    .benefits-list {
        grid-template-columns: 1fr 1fr;
    }
    .benefits-list article {
        min-height: 210px;
    }
    .benefits-list article:nth-child(2) {
        border-right: 0;
    }
    .benefits-list article:nth-child(3), .benefits-list article:nth-child(4) {
        border-top: 1px solid var(--line);
    }
    .request-section {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .rewards-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .spending-grid {
        grid-template-columns: 1fr 1fr;
    }
    .spending-category:nth-child(2) {
        border-right: 0;
    }
    .spending-category:nth-child(3), .spending-category:nth-child(4) {
        border-top: 1px solid var(--line);
    }
    .points-result {
        align-items: flex-start;
        flex-direction: column;
    }
    .spend-summary {
        width: 100%;
    }
    .experience-modal-panel {
        inset: 0;
    }
    .modal-header {
        height: 68px;
        padding: 0 18px;
        grid-template-columns: 55px 1fr 55px;
    }
    .modal-content {
        display: block;
        overflow-y: auto;
    }
    .modal-copy {
        padding: 42px 24px 25px;
    }
    .modal-copy h2 {
        font-size: clamp(50px,14vw,75px);
    }
    .modal-interaction {
        padding: 25px 24px 40px;
    }
    .modal-visual {
        width: 270px;
    }
    .modal-footer {
        height: 65px;
        padding: 0 18px;
    }
}

@media (max-width: 520px) {
    .site-footer {
        padding: 28px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .benefits-list, .spending-grid {
        grid-template-columns: 1fr;
    }
    .benefits-list article, .benefits-list article:not(:first-child), .spending-category, .spending-category:not(:first-child) {
        padding: 24px 0;
        border-right: 0;
        border-top: 1px solid var(--line);
    }
    .benefits-list article:first-child, .spending-category:first-child {
        border-top: 0;
    }
    .modal-points {
        flex-wrap: wrap;
    }
}