/* ══════════════════════════════════════════════
   K-RYPTA — MOBILE FIXES
   Solo afecta a dispositivos ≤ 768px
   ══════════════════════════════════════════════ */

/* ══ 1. GATE SECTION — "DESCUBRE MÁS" ════════
   El GSAP pin en móvil causa scroll-jacking.
   Fix: la sección tiene height normal, las
   puertas se abren con CSS transition disparada
   por IntersectionObserver (JS). La imagen se
   corrige con cover + posición adecuada.
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Sección: altura normal, sin pin GSAP */
    .gate-section {
        height: auto;
        min-height: 100svh;
        overflow: hidden;
        position: relative;
    }

    /* Puertas: arreglamos la imagen para móvil
       Cada puerta mostrará la imagen completa con cover
       y se recortará izquierda/derecha respectivamente */
    .gate-left {
        background-size: cover;
        background-position: left center;
        /* Animación de apertura via CSS transition */
        transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .gate-right {
        background-size: cover;
        background-position: right center;
        transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    }

    /* Estado abierto — clase añadida por JS */
    .gate-section.gate-open .gate-left {
        transform: translateX(-100%);
    }

    .gate-section.gate-open .gate-right {
        transform: translateX(100%);
    }

    /* Label "DESCUBRE MÁS": más pequeño en móvil */
    .gate-label {
        flex-direction: column;
        gap: 0.25rem;
        align-items: center;
    }

    .gate-text {
        font-size: 2.2rem;
        letter-spacing: 0.06em;
    }

    /* El label desaparece al abrir */
    .gate-section.gate-open .gate-label {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* Contenido: aparece cuando las puertas se abren */
    .gate-content {
        background: radial-gradient(circle at center, #1a052e 0%, #000 80%);
    }

    .central-column {
        /* En móvil empieza oculto, JS lo muestra al abrir */
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
        padding: 0 20px;
        width: 100%;
    }

    .gate-section.gate-open .central-column {
        opacity: 1;
        transform: translateY(0);
    }

    /* Tipografía ajustada */
    .central-header h2 {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
    }

    .central-header {
        margin-bottom: 1.2rem;
    }

    /* Lista premium */
    .premium-list {
        gap: 0.6rem;
        margin-top: 1rem;
    }

    .premium-item {
        padding: 0.85rem 1rem;
        border-radius: 10px;
        /* Sin transform scale en táctil */
        transition: background 0.2s ease, border-color 0.2s ease !important;
    }

    .premium-item:hover,
    .premium-item:active {
        transform: none !important;
    }

    .p-item-info h3 {
        font-size: 0.95rem;
    }

    .p-item-info p {
        font-size: 0.78rem;
    }

    .p-item-btn {
        font-size: 1rem;
    }
}

/* ══ 2. BENEFICIOS — SCROLL-DRIVEN ═══════════
   height:500vh + position:sticky rompe el scroll
   en iOS Safari y Chrome móvil.
   Fix: sección a altura natural + acordeón táctil.
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    .beneficios-scroll-container {
        height: auto !important;
        position: static !important;
    }

    .beneficios-sticky-content {
        position: static !important;
        height: auto !important;
        min-height: unset;
        padding: 56px 0;
        overflow: visible;
    }

    .benefits-content {
        flex-direction: column;
        gap: 28px;
        align-items: stretch;
    }

    .bp-sidebar {
        display: none !important;
    }

    .beneficio-trigger {
        display: none !important;
    }

    .benefits-left .section-title {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
        margin-bottom: 1.2rem;
    }

    /* Todos los ítems visibles */
    .beneficio-item {
        opacity: 1 !important;
        padding: 14px 12px 14px 0;
        cursor: pointer;
    }

    /* Acordeón: descripción extendida */
    .desc-extendida {
        max-height: 0;
        transition: max-height 0.4s ease;
    }

    .beneficio-item.active .desc-extendida {
        max-height: 260px;
    }

    /* Frases visibles sin delay en móvil */
    .beneficio-item.active .desc-extendida .frase {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Flip card adaptada */
    .beneficio-flip-container {
        width: 100% !important;
        max-width: 100%;
        height: 220px !important;
        margin: 0 auto;
    }

    .beneficio-flip-card {
        transition: transform 0.5s ease !important;
    }

    .beneficio-flip-front img,
    .beneficio-flip-back img {
        object-fit: cover;
        object-position: center;
    }

    .benefits-section {
        padding: 0;
    }

    .benefits-right {
        width: 100%;
        justify-content: center;
    }
}

/* ══ 3. PANTALLAS MUY PEQUEÑAS ≤ 390px ═══════ */
@media (max-width: 390px) {

    .gate-text {
        font-size: 1.8rem;
    }

    .central-header h2 {
        font-size: 1.35rem;
    }

    .premium-item {
        padding: 0.7rem 0.85rem;
    }

    .beneficio-flip-container {
        height: 180px !important;
    }

    .beneficios-sticky-content {
        padding: 40px 0;
    }

    .desc-extendida .frase {
        font-size: 0.78rem;
    }
}