:root {
    --glass-bg: rgba(25, 26, 35, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-input-bg: rgba(0, 0, 0, 0.2);
}

body {
    background: radial-gradient(circle at top right, #2a2a35, #0f0f13);
    font-family: 'inter', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tracking-widest {
    letter-spacing: 0.12em;
}

.glass-nav {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}

footer.glass-nav {
    border-bottom: none;
    border-top: 1px solid var(--glass-border);
}

.glass-container {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    padding: 40px;
    max-width: 900px;
    animation: fadein 0.8s ease-out;
}

/* diseño base de la tarjeta (escritorio) */
.credit-card-preview {
    background: linear-gradient(135deg, #1c1c22, #0d0d0f);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 30px;
    height: 220px; 
    width: 100%;
    max-width: 380px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
    animation: float 5s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-number-text {
    font-size: 1.4rem; 
}
.card-medium-text {
    font-size: 0.85rem; 
}
.card-small-text {
    font-size: 0.55rem; 
}

.chip {
    width: 44px; 
    height: 32px;
    background: linear-gradient(135deg, #fceab2, #d4af37, #c19b2e);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.1);
}

.chip::before, .chip::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(0,0,0,0.3);
}

.chip::before {
    top: 25%; bottom: 25%; left: 0; right: 0;
    border-left: none; border-right: none;
}

.chip::after {
    left: 30%; right: 30%; top: 0; bottom: 0;
    border-top: none; border-bottom: none;
}

.visa-logo {
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.glass-input {
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-border);
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.glass-input:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.05);
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

select.glass-input option {
    background: #1e1e24;
    color: #fff;
}

.btn-glass {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #000000;
    border-radius: 12px; /* bordes más redondeados para toque premium */
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-glass:hover, .btn-glass:active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
    transform: translatey(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15); 
}

@keyframes fadein {
    from { opacity: 0; transform: translatey(20px); }
    to { opacity: 1; transform: translatey(0); }
}

@keyframes float {
    0% { transform: translatey(0px); }
    50% { transform: translatey(-6px); }
    100% { transform: translatey(0px); }
}


/* =========================================================
   vista móvil premium (modo app nativa)
   ========================================================= */
@media (max-width: 768px) {
    
    /* quitamos márgenes y bordes para que se funda con el fondo del teléfono */
    .glass-container {
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 10px 15px;
        margin-top: 10px !important;
    }

    /* tarjeta con proporciones matemáticas inquebrantables */
    .credit-card-preview {
        max-width: 100%;
        height: auto;
        aspect-ratio: 1.586 / 1; /* proporción oficial de una tarjeta real */
        padding: 6vw; /* padding relativo al ancho de la pantalla */
        margin-bottom: 30px;
    }

    /* tipografía fluida: se ajusta perfectamente al ancho de la tarjeta */
    .card-number-text {
        font-size: 6.5vw; /* tamaño basado en el viewport */
        letter-spacing: 0.05em; 
        white-space: nowrap; 
        margin-bottom: 0 !important;
    }

    /* control estricto del nombre largo */
    .card-medium-text {
        font-size: 3.5vw;
        max-width: 50vw; /* solo puede ocupar la mitad de la pantalla */
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; /* agrega "..." si el nombre es muy largo */
        display: inline-block;
        vertical-align: bottom;
    }

    .card-small-text {
        font-size: 2vw;
    }
    
    .chip {
        width: 11vw;
        height: 8vw;
    }

    .visa-logo {
        font-size: 6vw;
    }

    /* ajustes ergonómicos del formulario para pulgares */
    .glass-input {
        padding: 14px 15px; /* inputs más altos y cómodos de tocar */
        font-size: 1rem; /* evita que el iphone haga zoom al escribir */
        border-radius: 10px;
    }

    .btn-glass {
        padding: 16px !important; /* botón gigante al final */
        font-size: 1.1rem;
        margin-top: 20px;
    }
}