/* ============================================================
   Versión móvil de la tarjeta: banda glitter plateada animada
   que desciende por el borde izquierdo de las páginas internas
   (cargar DESPUÉS de tarjeta.css)
   ============================================================ */

/* Azul noche y ciruela con luz cálida central para separar la tarjeta del fondo. */
body {
    background-color: #171d32;
    background-image:
        radial-gradient(ellipse at 50% 42%, rgba(192, 157, 119, 0.24) 0%, transparent 62%),
        radial-gradient(ellipse at 0% 100%, rgba(105, 55, 86, 0.48) 0%, transparent 65%),
        radial-gradient(ellipse at 100% 0%, rgba(53, 81, 115, 0.4) 0%, transparent 60%),
        linear-gradient(135deg, #101c30 0%, #26273e 48%, #352332 100%);
}

/* Cartulina de algodón: centro limpio y color apenas insinuado en las esquinas. */
.face {
    --card-shadow: 0 2px 3px rgba(0, 0, 0, 0.35),
        0 10px 16px rgba(0, 0, 0, 0.32),
        0 26px 38px -8px rgba(0, 0, 0, 0.65),
        0 42px 70px -16px rgba(0, 0, 0, 0.5);
    background-color: #fffaf0;
    background-image:
        radial-gradient(ellipse at 100% 0%, rgba(205, 208, 214, 0.24), transparent 42%),
        radial-gradient(ellipse at 0% 100%, rgba(222, 196, 147, 0.23), transparent 44%),
        linear-gradient(125deg, #fffdf6, #faf4e6);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.85),
        inset 0 -2px 5px rgba(132, 108, 68, 0.08),
        var(--card-shadow);
}

/* La portada conserva su marco y suma la misma sombra de las hojas. */
.face.cover {
    box-shadow:
        inset 0 0 0 6px #fbf6e9,
        inset 0 0 0 8px #b8bcc2,
        inset 0 0 0 11px #fbf6e9,
        inset 0 0 0 13px #d8d2c4,
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -3px 6px rgba(120, 100, 60, 0.12),
        inset 0 0 40px rgba(120, 100, 60, 0.08),
        var(--card-shadow);
}

.face.back {
    background-color: #fffaf0;
    background-image:
        radial-gradient(ellipse at 100% 0%, rgba(205, 208, 214, 0.24), transparent 42%),
        radial-gradient(ellipse at 0% 100%, rgba(222, 196, 147, 0.23), transparent 44%),
        linear-gradient(125deg, #fffdf6, #faf4e6);
}

/* Sustituye la trama cruzada y los pliegues por fibras muy delicadas. */
.face::after,
.face.back::after,
.face.cover::after {
    background:
        radial-gradient(ellipse at 45% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
        repeating-linear-gradient(0deg, rgba(139, 117, 77, 0.018) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(139, 117, 77, 0.012) 0 1px, transparent 1px 5px);
}

.paper-grain {
    opacity: 0.045;
}

/* Filete de papelería que acompaña la cinta sin invadir el texto. */
.face:not(.cover) .page-content::before {
    content: '';
    position: absolute;
    inset: 15px 13px 15px 55px;
    border: 1px solid rgba(150, 156, 165, 0.45);
    border-radius: 3px;
    pointer-events: none;
}

.face.back .page-content::before {
    left: 13px;
    right: 55px;
}

@media (max-width: 959px) {
    .mobile-face .banda-glitter {
        width: 24px;
    }

    .face:not(.cover) .page-content,
    .mobile-face .face.back .page-content {
        padding-left: 44px;
        padding-right: 22px;
    }

    .face:not(.cover) .page-content::before,
    .mobile-face .face.back .page-content::before {
        left: 35px;
        right: 13px;
    }
}

.banda-glitter {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 44px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255, 255, 255, 0.55) 1px, transparent 1.4px),
        linear-gradient(to right, #777e88, #e0e3e7 30%, #a8aeb7 55%, #e0e3e7 75%, #777e88);
    background-size: 7px 7px, 11px 11px, 100% 100%;
    box-shadow:
        inset -3px 0 6px rgba(65, 70, 80, 0.25),
        2px 0 6px rgba(119, 126, 136, 0.2);
    z-index: 0;
    animation: bandaDesciende 6s linear infinite;
}

/* Destello de luz que recorre la banda de arriba hacia abajo */
.banda-glitter::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 15%, rgba(255, 255, 255, 0.4) 50%, transparent 85%);
    animation: brilloDesciende 3.8s linear infinite;
}

/* Las motas de glitter descienden en bucle perfecto
   (77px = múltiplo común de las tramas de 7px y 11px) */
@keyframes bandaDesciende {
    0% {
        background-position: 0 0, 3px 4px, 0 0;
    }

    100% {
        background-position: 0 77px, 3px 81px, 0 0;
    }
}

@keyframes brilloDesciende {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* En los dorsos (visibles en modo plancha de pantalla ancha) la banda
   va junto al pliegue, que queda a la derecha */
.face.back .banda-glitter {
    left: auto;
    right: 0;
    box-shadow:
        inset 3px 0 6px rgba(65, 70, 80, 0.25),
        -2px 0 6px rgba(119, 126, 136, 0.2);
}

/* Espacio para la banda en el contenido de las páginas internas */
.face .page-content {
    padding-left: 64px;
}

.face.back .page-content {
    padding-left: 22px;
    padding-right: 64px;
}

/* La portada conserva su cinta centrada y su padding simétrico */
.face.cover .page-content {
    padding-left: 22px;
}

/* Moño fotográfico con transparencia, en lugar de los lazos dibujados. */
.face.cover .bow {
    width: min(210px, 100%);
    height: auto;
    aspect-ratio: 3 / 2;
    flex-shrink: 0;
    background: url('images/mono-satin-plateado.png') center / contain no-repeat;
    filter: drop-shadow(0 5px 4px rgba(50, 55, 65, 0.25));
}

.face.cover .bow > * {
    display: none;
}

/* En PC ambas bandas se juntan en el centro: 18px por hoja. */
@media (min-width: 960px) {
    .banda-glitter {
        width: 18px;
    }

    .face:not(.cover) .page-content {
        padding-left: 38px;
    }

    .face.back .page-content {
        padding-left: 22px;
        padding-right: 38px;
    }

    .face:not(.cover) .page-content::before {
        left: 29px;
    }

    .face.back .page-content::before {
        left: 13px;
        right: 29px;
    }

    .face:not(.cover)::before {
        width: 12px;
    }
}