* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #dfe8f6;
    font-family: Arial, Helvetica, sans-serif;
}

.hero {
    width: 100vw;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* DESKTOP 16:9 */
.scene {
    position: relative;
    width: min(100vw, calc(100svh * 16 / 9));
    height: min(100svh, calc(100vw * 9 / 16));
    overflow: hidden;
}

.bg-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bg-picture .bg,
.scene>.bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    z-index: 1;
}

.item {
    position: absolute;
    z-index: 2;
    max-width: none;
    height: auto;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

a .item {
    pointer-events: auto;
}

/* DESKTOP */
.revista {
    width: 24%;
    left: 41%;
    top: 59%;
    transform: translate(-50%, -50%);
    z-index: 3;
    cursor: pointer;
}

.sobre1 {
    width: 23%;
    left: 60%;
    top: 51%;
    transform: translate(-50%, -50%) rotate(14deg);
    z-index: 4;
    animation: floatGlow 4s ease-in-out infinite, rotateFloat 6s ease-in-out infinite;
}

.sobre2 {
    width: 17%;
    left: 56%;
    top: 77%;
    transform: translate(-50%, -50%) rotate(2deg);
    z-index: 5;
    animation: pulseReveal 4.5s ease-in-out infinite, swivelTilt 5s ease-in-out infinite;
}

@keyframes floatGlow {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(14deg) translateY(0px);
    }

    50% {
        transform: translate(-50%, -50%) rotate(14deg) translateY(-15px);
    }
}

@keyframes rotateFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(14deg) rotateZ(0deg);
    }

    25% {
        transform: translate(-50%, -50%) rotate(14deg) rotateZ(1.5deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(14deg) rotateZ(0deg);
    }

    75% {
        transform: translate(-50%, -50%) rotate(14deg) rotateZ(-1.5deg);
    }
}

@keyframes pulseReveal {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(2deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(2deg) scale(1.05);
    }
}

@keyframes swivelTilt {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(2deg) translateY(0px);
    }

    25% {
        transform: translate(-50%, -50%) rotate(4deg) translateY(-8px);
    }

    50% {
        transform: translate(-50%, -50%) rotate(2deg) translateY(-3px);
    }

    75% {
        transform: translate(-50%, -50%) rotate(0deg) translateY(-10px);
    }
}

.sobre3 {
    width: 15%;
    left: 75%;
    top: 40%;
    transform: translate(-50%, -50%) rotate(12deg);
    z-index: 4;
}

/* IPAD / TABLET EN HORIZONTAL */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
    .revista {
        width: 34%;
        left: 39%;
        top: 48%;
        cursor: pointer;
    }

    .sobre1 {
        width: 27%;
        left: 63%;
        top: 39%;
        animation: floatGlow 4s ease-in-out infinite, rotateFloat 6s ease-in-out infinite;
    }

    .sobre2 {
        width: 21%;
        left: 61%;
        top: 68%;
        animation: pulseReveal 4.5s ease-in-out infinite, swivelTilt 5s ease-in-out infinite;
    }

    .sobre3 {
        width: 16%;
        left: 75%;
        top: 41%;
    }
}

/* IPAD / TABLET EN VERTICAL */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
    .scene {
        width: min(100vw, calc(100svh * 3 / 4));
        height: min(100svh, calc(100vw * 4 / 3));
    }

    .bg-picture .bg,
    .scene>.bg {
        object-fit: cover;
    }

    .revista {
        width: 48%;
        left: 39%;
        top: 57%;
        cursor: pointer;
    }

    .sobre1 {
        width: 42%;
        left: 65%;
        top: 52%;
        transform: translate(-50%, -50%) rotate(14deg);
        animation: floatGlow 4s ease-in-out infinite, rotateFloat 6s ease-in-out infinite;
    }

    .sobre2 {
        width: 36%;
        left: 59%;
        top: 75%;
        transform: translate(-50%, -50%) rotate(2deg);
        animation: pulseReveal 4.5s ease-in-out infinite, swivelTilt 5s ease-in-out infinite;
    }

    .sobre3 {
        width: 28%;
        left: 75%;
        top: 43%;
        transform: translate(-50%, -50%) rotate(12deg);
    }
}

/* MÓVIL NORMAL */
@media (max-width: 768px) and (orientation: portrait) {
    .scene {
        width: min(100vw, calc(100svh * 9 / 16));
        height: min(100svh, calc(100vw * 16 / 9));
    }

    .bg-picture .bg,
    .scene>.bg {
        object-fit: fill;
    }

    .revista {
        width: 57%;
        left: 38%;
        top: 47%;
        cursor: pointer;
    }

    .sobre1 {
        width: 53%;
        left: 66%;
        top: 45%;
        transform: translate(-50%, -50%) rotate(14deg);
        animation: floatGlow 4s ease-in-out infinite, rotateFloat 6s ease-in-out infinite;
    }

    .sobre2 {
        width: 46%;
       left: 54%;
        top: 69%;
        transform: translate(-50%, -50%) rotate(2deg);
        animation: pulseReveal 4.5s ease-in-out infinite, swivelTilt 5s ease-in-out infinite;
    }

    .sobre3 {
        width: 34%;
        left: 76%;
        top: 46%;
        transform: translate(-50%, -50%) rotate(12deg);
    }
}

/* MÓVILES PEQUEÑOS: iPhone SE, celulares bajitos */
@media (max-width: 390px) and (orientation: portrait) {
    .revista {
        width: 54%;
        left: 37%;
        top: 44%;
        cursor: pointer;
    }

    .sobre1 {
        width: 49%;
        left: 66%;
        top: 45%;
        animation: floatGlow 4s ease-in-out infinite, rotateFloat 6s ease-in-out infinite;
    }

    .sobre2 {
        width: 43%;
        left: 55%;
        top: 70%;
        animation: pulseReveal 4.5s ease-in-out infinite, swivelTilt 5s ease-in-out infinite;
    }

    .sobre3 {
        width: 31%;
        left: 76%;
        top: 46%;
    }
}

/* MÓVILES MUY BAJITOS */
@media (max-height: 700px) and (max-width: 768px) and (orientation: portrait) {
    .revista {
        width: 50%;
        left: 38%;
        top: 46%;
        cursor: pointer;
    }

    .sobre1 {
        width: 46%;
        left: 66%;
        top: 44%;
        animation: floatGlow 4s ease-in-out infinite, rotateFloat 6s ease-in-out infinite;
    }

    .sobre2 {
        width: 40%;
        left: 48%;
        top: 66%;
        animation: pulseReveal 4.5s ease-in-out infinite, swivelTilt 5s ease-in-out infinite;
    }

    .sobre3 {
        width: 29%;
        left: 75%;
        top: 45%;
    }
}

/* CELULAR HORIZONTAL */
@media (max-height: 500px) and (orientation: landscape) {
    .scene {
        width: min(100vw, calc(100svh * 16 / 9));
        height: min(100svh, calc(100vw * 9 / 16));
    }

    .revista {
        width: 30%;
        left: 40%;
        top: 48%;
        cursor: pointer;
    }

    .sobre1 {
        width: 24%;
        left: 62%;
        top: 39%;
        animation: floatGlow 4s ease-in-out infinite, rotateFloat 6s ease-in-out infinite;
    }

    .sobre2 {
        width: 18%;
        left: 61%;
        top: 68%;
        animation: pulseReveal 4.5s ease-in-out infinite, swivelTilt 5s ease-in-out infinite;
    }

    .sobre3 {
        width: 14%;
        left: 74%;
        top: 41%;
    }
}

.empty-owned-cards {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    opacity: 0.9;
    padding: 12px;
}

/* =========================
   PERFIL / MENÚ USUARIO
========================= */

.profile-menu {
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 20;
    width: 310px;
}

.profile-card {
    width: 100%;
    min-height: 78px;

    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 10px 14px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);

    transition: transform 0.25s ease, background 0.25s ease;
}

.profile-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.68);
}

.profile-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-info {
    flex: 1;
    text-align: left;
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.profile-info strong {
    display: block;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.1;
}

.profile-info span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.profile-arrow {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    transition: transform 0.25s ease;
}

.profile-menu.is-open .profile-arrow {
    transform: rotate(180deg);
}

/* Dropdown */
.profile-dropdown {
    width: 92%;
    margin: 10px auto 0;

    border: 3px solid rgba(255, 255, 255, 0.75);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    padding: 10px 18px;

    display: none;
    flex-direction: column;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.profile-menu.is-open .profile-dropdown {
    display: flex;
    animation: dropdownShow 0.22s ease;
}

@keyframes dropdownShow {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profile-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 44px;

    color: #0b4c9b;
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;

    border-bottom: 2px solid rgba(255, 255, 255, 0.45);

    transition: transform 0.2s ease, color 0.2s ease;
}

.profile-dropdown a:last-child {
    border-bottom: none;
}

.profile-dropdown a:hover {
    transform: translateX(4px);
    color: #003c8f;
}

.profile-dropdown img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.ranking-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
}

/* TABLET */
@media (min-width: 769px) and (max-width: 1180px) {
    .profile-menu {
        top: 4%;
        right: 4%;
        width: 270px;
    }

    .profile-card {
        min-height: 68px;
        padding: 8px 12px;
        border-radius: 16px;
    }

    .profile-avatar {
        width: 50px;
        height: 50px;
    }

    .profile-info strong {
        font-size: 16px;
    }

    .profile-info span {
        font-size: 12px;
    }

    .profile-dropdown a {
        font-size: 17px;
    }
}

/* MÓVIL */
@media (max-width: 768px) and (orientation: portrait) {
    .profile-menu {
        top: 2.5%;
        right: 50%;
        transform: translateX(50%);
        width: 82%;
        max-width: 330px;
    }

    .profile-card {
        min-height: 58px;
        padding: 7px 10px;
        border-radius: 15px;
        border-width: 2px;
    }

    .profile-avatar {
        width: 44px;
        height: 44px;
    }

    .profile-info strong {
        font-size: 15px;
    }

    .profile-info span {
        font-size: 11px;
    }

    .profile-arrow {
        font-size: 15px;
    }

    .profile-dropdown {
        width: 92%;
        padding: 8px 14px;
        border-width: 2px;
    }

    .profile-dropdown a {
        min-height: 38px;
        font-size: 15px;
        gap: 10px;
    }

    .profile-dropdown img {
        width: 24px;
        height: 24px;
    }

    .ranking-icon {
        width: 24px;
        height: 24px;
        font-size: 18px;
    }
}

/* MÓVILES PEQUEÑOS */
@media (max-width: 390px) and (orientation: portrait) {
    .profile-menu {
        width: 86%;
        top: 2%;
    }

    .profile-card {
        min-height: 54px;
    }

    .profile-avatar {
        width: 40px;
        height: 40px;
    }

    .profile-info strong {
        font-size: 14px;
    }

    .profile-info span {
        font-size: 10px;
    }

    .profile-dropdown a {
        font-size: 14px;
    }
}

/* CELULAR HORIZONTAL */
@media (max-height: 500px) and (orientation: landscape) {
    .profile-menu {
        top: 4%;
        right: 4%;
        width: 230px;
    }

    .profile-card {
        min-height: 50px;
        padding: 6px 9px;
        border-radius: 13px;
        border-width: 2px;
    }

    .profile-avatar {
        width: 38px;
        height: 38px;
    }

    .profile-info strong {
        font-size: 13px;
    }

    .profile-info span {
        font-size: 10px;
    }

    .profile-dropdown {
        padding: 6px 12px;
    }

    .profile-dropdown a {
        min-height: 32px;
        font-size: 13px;
    }

    .profile-dropdown img,
    .ranking-icon {
        width: 20px;
        height: 20px;
    }
}