body { 
    margin: 0;
    padding-left: 220px;
    font-family: "Courier New", monospace;
    background-image: url("imagenes/fondo.png");
    background-repeat: repeat;
    background-size: 300px;
    color: #ddd;
}

/* Fondo en mosaico intercalado para la página de Cine */
body.pagina-cine {
    background-image: url("imagenes/palomitalentes.png");
    background-repeat: repeat;
    background-size: 300px;
}
/* Fondo en mosaico para la página de Música */
body.pagina-musica {
    background-image: url("imagenes/musicafondo.png");
    background-repeat: repeat;
    background-size: 300px;
}
/* Brillo turquesa del título, solo en la página de Cuentos */
body.pagina-cuentos .titulo h1 {
    color: #7fdfff;

    text-shadow:
        0 0 4px #ffffff,
        0 0 8px #7fdfff,
        0 0 16px #22d3ee,
        0 0 24px #06b6d4,
        0 0 40px #0e7490;

    animation: tituloBrilloTurquesa 2.5s infinite alternate;
}

/* Brillo turquesa de las gatitas, solo en la página de Cuentos */
body.pagina-cuentos .gatita {
    filter:
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 8px #7fdfff)
        drop-shadow(0 0 16px #22d3ee);
    animation: gatitaBrilloTurquesa 2.5s infinite alternate;
}

/* Globos turquesa, solo en la página de Cuentos */
body.pagina-cuentos .globo {
    background: #c8ffff;
    color: #0b4f5c;

    border: 3px solid #64e6ff;

    box-shadow:
        0 0 8px white,
        0 0 15px #64e6ff,
        0 0 25px #b8ffff;
}
/* Fondo Blog */

body.pagina-blog {

    background-image: url("imagenes/fondoblog.png");

    background-repeat: repeat;

    background-size: 300px;

}
body.pagina-arte {

    background-image: url("imagenes/fondoarte.png");

    background-repeat: repeat;

    background-size: 300px;

}
/* Fondo en mosaico para la página de Fotoklub */
body.pagina-galeria {
    background-image: url("imagenes/galeriafondo.png");
    background-repeat: repeat;
    background-size: 300px;
}
/* Fondo en mosaico para la página de Recetas */
body.pagina-recetas {
    background-image: url("imagenes/mantel.png");
    background-repeat: repeat;
    background-size: 150px; 
 }   
    /* Fondo en mosaico para la página de Cuentos */
body.pagina-cuentos {
    background-image: url("imagenes/ojo.png");
    background-repeat: repeat;
    background-size: 150px;
}
.contenedor {
    width: 900px;
    margin: auto;
}


/* CABECERA */

header {
    background: #111;
    padding: 40px;
    margin-top: 30px;
    text-align: center;
    box-shadow: 5px 5px 0px #000;
}

header h1 {
    font-size: 60px;
    color: #d9a6ff;
    text-align: center;
    letter-spacing: 3px;

    text-shadow:
        0 0 4px #ffffff,
        0 0 8px #d9a6ff,
        0 0 16px #c77dff,
        0 0 24px #a855f7,
        0 0 40px #7e22ce;

    animation: tituloBrillo 2.5s infinite alternate;
}

header p {
    color: #aaa;
}


/* CONTENIDO */

.contenido {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}


main {
    width: 70%;
}


/* POSTS */

.post {
    background: #222;
    border: 2px dashed #777;
    padding: 25px;
    margin-bottom: 25px;
}


.post h2 {
    color: #ff7ac8;
}


.fecha {
    color: #888;
    font-size: 13px;
}


.tags {
    color: #7fdfff;
    margin-top: 20px;
}


/* LATERAL */

aside {
    background: #151515;
    border: 2px solid #555;
    padding: 20px;
    height: fit-content;
    width: 30%;
}


aside h3 {
    color: #ff7ac8;
}


/* EFECTO LINK VIEJO */

a {
    color: #7fdfff;
    text-decoration: none;
}

a:hover {
    color: white;
}
.estrella {
    position: absolute;
    font-size: 18px;
    pointer-events: none;

    text-shadow:
        0 0 5px white,
        0 0 10px currentColor,
        0 0 20px currentColor;

    animation: glitter 0.9s steps(5) forwards;
}


@keyframes glitter {

    0% {
        opacity: 1;
        transform: scale(0.5) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.5) rotate(180deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0);
    }

}
.perfil {
    width:  240px;
    display: block;
    margin: 20px auto;

    border: 4px solid white;

    box-shadow:
        0 0 5px white,
        0 0 10px #ff7ac8,
        0 0 20px #ff7ac8,
        0 0 35px #7fdfff,
        0 0 50px #7fdfff;

    animation: brillo 2s infinite alternate;
}
@keyframes brillo {

    from {
        box-shadow:
            0 0 5px white,
            0 0 10px #ff7ac8,
            0 0 20px #ff7ac8,
            0 0 35px #7fdfff;
    }

    to {
        box-shadow:
            0 0 10px white,
            0 0 20px #ff7ac8,
            0 0 35px #ff7ac8,
            0 0 55px #7fdfff,
            0 0 75px #7fdfff;
    }

}

.esquina{

    text-align:center;
    font-size:28px;
    color:white;

    text-shadow:
    0 0 8px white,
    0 0 15px #ff7ac8;
}

@keyframes arcoiris{

    from{
        filter:hue-rotate(0deg);
    }

    to{
        filter:hue-rotate(360deg);
    }

}
.marco-glitter{
    position: relative;
    width: 250px;
    margin: auto;
    padding: 10px;
}

.glitter{
    position:absolute;
    font-size:24px;
    animation: twinkle 2s infinite alternate;

    text-shadow:
        0 0 5px white,
        0 0 10px currentColor,
        0 0 20px currentColor;
}

.g1{ top:-18px; left:-12px; color:#ffffff;}
.g2{ top:-8px; right:-18px; color:#7fdfff;}
.g3{ right:-18px; top:45%; color:#ff7ac8;}
.g4{ bottom:-18px; right:-10px; color:#ffffff;}
.g5{ bottom:-18px; left:-12px; color:#ffea00;}
.g6{ left:-18px; top:50%; color:#c77dff;}
.g7{ top:20%; left:-22px; color:#ff7ac8;}
.g8{ bottom:20%; right:-22px; color:#7fdfff;}

@keyframes twinkle{

    from{
        opacity:.4;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1.3);
    }

}
.g9  { top:-30px; left:40%; color:#ffffff; }
.g10 { top:15%; right:-30px; color:#ffea00; }
.g11 { bottom:35%; left:-28px; color:#7fdfff; }
.g12 { bottom:-25px; left:40%; color:#ff7ac8; }
.g13 { top:65%; right:-28px; color:#ffffff; }
.g14 { top:30%; left:-32px; color:#c77dff; }
.g15 { bottom:8%; right:-26px; color:#ffea00; }
.g16 { top:-25px; right:30%; color:#7fdfff; }
@keyframes tituloBrillo {

    from {
        text-shadow:
            0 0 4px #ffffff,
            0 0 8px #d9a6ff,
            0 0 16px #c77dff,
            0 0 24px #a855f7;
    }

    to {
        text-shadow:
            0 0 8px #ffffff,
            0 0 16px #f3d5ff,
            0 0 30px #d9a6ff,
            0 0 45px #c77dff,
            0 0 60px #7e22ce;
    }

}
.logo{
    width:550px;
    display:block;
    margin:auto;

    filter:
        drop-shadow(0 0 10px #c77dff)
        drop-shadow(0 0 20px #ff7ac8);

    transition:0.3s;
}

.logo:hover{

    transform:scale(1.03);

    filter:
        drop-shadow(0 0 20px white)
        drop-shadow(0 0 35px #c77dff)
        drop-shadow(0 0 45px #ff7ac8);

}
.menu-lateral {
    position: fixed;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.menu-lateral a {
    text-decoration: none;
    color: black;
    font-size: 18px;
    background: rgba(255,255,255,0.9);
    padding: 5px 10px;
    border-radius: 8px;
    position: relative;
    transition: transform 0.2s ease;
}

.menu-lateral a:hover {
    transform: scale(1.12) translateX(8px);
    color: white;

    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #d8b4fe,
        0 0 20px #c084fc,
        0 0 35px #9333ea;
}
.menu-lateral a::before,
.menu-lateral a::after {
    content: "✦";
    position: absolute;
    color: #d8b4fe;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
}

.menu-lateral a::before {
    left: -18px;
    top: -8px;
}

.menu-lateral a::after {
    right: -18px;
    bottom: -8px;
}

@keyframes sparkle {
    0% {
        opacity: 0;
        transform: scale(.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.3) translateY(-4px);
    }
    100% {
        opacity: 0;
        transform: scale(.8) translateY(-8px);
    }
}

.menu-lateral a:hover::before {
    animation: sparkle .8s infinite;
}

.menu-lateral a:hover::after {
    animation: sparkle .8s .4s infinite;
}
.titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 65px;
    margin-top: 20px;

    background: #111;
    border: 3px solid #555;
    padding: 20px;
    box-shadow: 5px 5px 0px #000;
}

.titulo h1 {
    font-size: 60px;
    white-space: normal;
    text-align: center;
    margin-left: 0;

    color: #d9a6ff;
    letter-spacing: 3px;

    text-shadow:
        0 0 4px #ffffff,
        0 0 8px #d9a6ff,
        0 0 16px #c77dff,
        0 0 24px #a855f7,
        0 0 40px #7e22ce;

    animation: tituloBrillo 2.5s infinite alternate;
}

.gatita {
    width: 180px;
    transition: transform 0.25s ease;
    filter:
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 8px #d9a6ff)
        drop-shadow(0 0 16px #c77dff);
    animation: gatitaBrillo 2.5s infinite alternate;
}

.gatita:hover,
.gatita:active {
    transform: scale(1.15) rotate(-6deg);
}

@keyframes gatitaBrillo {

    from {
        filter:
            drop-shadow(0 0 4px #ffffff)
            drop-shadow(0 0 8px #d9a6ff)
            drop-shadow(0 0 16px #c77dff);
    }

    to {
        filter:
            drop-shadow(0 0 8px #ffffff)
            drop-shadow(0 0 16px #f3d5ff)
            drop-shadow(0 0 30px #d9a6ff);
    }

}
.gatita-contenedor{
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.globo {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translateY(-50%);

    background: #ffd6eb;
    color: #5b275b;

    padding: 12px 18px;
    border: 3px solid #ff7ac8;
    border-radius: 25px;

    font-family: "Courier New", monospace;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;

    box-shadow:
        0 0 8px white,
        0 0 15px #ff7ac8,
        0 0 25px #ffd6eb;

    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .25s ease;
}

/* Mostrar globo al pasar el mouse */
.gatita-contenedor:hover .globo {
    opacity: 1;
}

/* Gatita izquierda */
.gatita-contenedor.izquierda .globo {
    left: auto;
    right: 80%;
}


/* Flecha derecha */
.gatita-contenedor.derecha .globo::after {
    content: "💗";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;

    filter:
        drop-shadow(0 0 4px white)
        drop-shadow(0 0 8px #ff7ac8);
}


/* Flecha izquierda */
.gatita-contenedor.izquierda .globo::after {
    right: -20px;
    border-left-color: white;
}
/* Brillo turquesa del título, solo en la página de Música */
body.pagina-musica .titulo h1 {
    color: #7fdfff;

    text-shadow:
        0 0 4px #ffffff,
        0 0 8px #7fdfff,
        0 0 16px #22d3ee,
        0 0 24px #06b6d4,
        0 0 40px #0e7490;

    animation: tituloBrilloTurquesa 2.5s infinite alternate;
}

@keyframes tituloBrilloTurquesa {

    from {
        text-shadow:
            0 0 4px #ffffff,
            0 0 8px #7fdfff,
            0 0 16px #22d3ee,
            0 0 24px #06b6d4;
    }

    to {
        text-shadow:
            0 0 8px #ffffff,
            0 0 16px #a5f3fc,
            0 0 30px #7fdfff,
            0 0 45px #22d3ee,
            0 0 60px #0e7490;
    }

}
/* Brillo turquesa de las gatitas, solo en la página de Música */
body.pagina-musica .gatita {
    filter:
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 8px #7fdfff)
        drop-shadow(0 0 16px #22d3ee);
    animation: gatitaBrilloTurquesa 2.5s infinite alternate;
}

@keyframes gatitaBrilloTurquesa {

    from {
        filter:
            drop-shadow(0 0 4px #ffffff)
            drop-shadow(0 0 8px #7fdfff)
            drop-shadow(0 0 16px #22d3ee);
    }

    to {
        filter:
            drop-shadow(0 0 8px #ffffff)
            drop-shadow(0 0 16px #a5f3fc)
            drop-shadow(0 0 30px #7fdfff);
    }

} 
body.pagina-musica .globo {
    background: #c8ffff;
    color: #0b4f5c;

    border: 3px solid #64e6ff;

    box-shadow:
        0 0 8px white,
        0 0 15px #64e6ff,
        0 0 25px #b8ffff;
}
body.pagina-arte {

    background-image: url("imagenes/fondoarte.png");

    background-repeat: repeat;

    background-size: 300px;

}
/* Brillo azul del título, solo en la página de Fotoklub */
body.pagina-galeria .titulo h1 {
    color: #7fa8ff;

    text-shadow:
        0 0 4px #ffffff,
        0 0 8px #7fa8ff,
        0 0 16px #3b82f6,
        0 0 24px #2563eb,
        0 0 40px #1e3a8a;

    animation: tituloBrilloAzul 2.5s infinite alternate;
}

@keyframes tituloBrilloAzul {

    from {
        text-shadow:
            0 0 4px #ffffff,
            0 0 8px #7fa8ff,
            0 0 16px #3b82f6,
            0 0 24px #2563eb;
    }

    to {
        text-shadow:
            0 0 8px #ffffff,
            0 0 16px #bfdbfe,
            0 0 30px #7fa8ff,
            0 0 45px #3b82f6,
            0 0 60px #1e3a8a;
    }

}

/* Brillo azul de las gatitas, solo en la página de Fotoklub */
body.pagina-galeria .gatita {
    filter:
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 8px #7fa8ff)
        drop-shadow(0 0 16px #3b82f6);
    animation: gatitaBrilloAzul 2.5s infinite alternate;
}

@keyframes gatitaBrilloAzul {

    from {
        filter:
            drop-shadow(0 0 4px #ffffff)
            drop-shadow(0 0 8px #7fa8ff)
            drop-shadow(0 0 16px #3b82f6);
    }

    to {
        filter:
            drop-shadow(0 0 8px #ffffff)
            drop-shadow(0 0 16px #bfdbfe)
            drop-shadow(0 0 30px #7fa8ff);
    }

}
/* Globos azules para la Galería */
body.pagina-galeria .globo {
    background: #d8f6ff;
    color: #0d4f73;

    border: 3px solid #7fdfff;

    box-shadow:
        0 0 8px white,
        0 0 15px #7fdfff,
        0 0 30px #4fc3f7;
}

/* Corazón brillante azul */
body.pagina-galeria .globo::after {
    filter:
        drop-shadow(0 0 4px white)
        drop-shadow(0 0 8px #7fdfff);
}
/* Brillo verde albahaca del título, solo en la página de Recetas */
body.pagina-recetas .titulo h1 {
    color: #8fd694;

    text-shadow:
        0 0 4px #ffffff,
        0 0 8px #8fd694,
        0 0 16px #4ade80,
        0 0 24px #16a34a,
        0 0 40px #14532d;

    animation: tituloBrilloVerde 2.5s infinite alternate;
}

@keyframes tituloBrilloVerde {

    from {
        text-shadow:
            0 0 4px #ffffff,
            0 0 8px #8fd694,
            0 0 16px #4ade80,
            0 0 24px #16a34a;
    }

    to {
        text-shadow:
            0 0 8px #ffffff,
            0 0 16px #bbf7d0,
            0 0 30px #8fd694,
            0 0 45px #4ade80,
            0 0 60px #14532d;
    }

}

/* Brillo verde albahaca de las gatitas, solo en la página de Recetas */
body.pagina-recetas .gatita {
    filter:
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 8px #8fd694)
        drop-shadow(0 0 16px #4ade80);
    animation: gatitaBrilloVerde 2.5s infinite alternate;
}

@keyframes gatitaBrilloVerde {

    from {
        filter:
            drop-shadow(0 0 4px #ffffff)
            drop-shadow(0 0 8px #8fd694)
            drop-shadow(0 0 16px #4ade80);
    }

    to {
        filter:
            drop-shadow(0 0 8px #ffffff)
            drop-shadow(0 0 16px #bbf7d0)
            drop-shadow(0 0 30px #8fd694);
    }

}
.hoja-albahaca {
    position: fixed;
    top: -40px;
    font-size: 34px;
    z-index: -1;
    pointer-events: none;
    animation: caerHoja linear forwards;
}

@keyframes caerHoja {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0.8;
    }
}
body.pagina-recetas .titulo h1 {
    font-size: 48px;
}
body.pagina-recetas .gatita {
    width: 145px;
}
/* ===== RECETAS ===== */

body.pagina-recetas .globo {

    background: #e8ffd8;
    color: #285c2b;

    border: 3px solid #7dff7d;

    box-shadow:
        0 0 8px white,
        0 0 15px #7dff7d,
        0 0 30px #4ade80;
}
.boton-follow {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #1a0b2e;
    color: #d9a6ff;
    border: 2px solid #c77dff;
    border-radius: 10px;
    font-family: "Courier New", monospace;
    font-size: 16px;
    cursor: pointer;

    box-shadow:
        0 0 5px #c77dff,
        0 0 10px #a855f7,
        0 0 20px #7e22ce;

    animation: botonBrillo 2s infinite alternate;
    transition: transform 0.15s ease;
}

.boton-follow:hover {
    transform: scale(1.05);
}

.boton-follow:active {
    transform: scale(0.95);
}

@keyframes botonBrillo {
    from {
        box-shadow:
            0 0 5px #c77dff,
            0 0 10px #a855f7,
            0 0 20px #7e22ce;
    }
    to {
        box-shadow:
            0 0 10px #d9a6ff,
            0 0 20px #c77dff,
            0 0 35px #9333ea;
    }
}

.estrella-follow {
    position: fixed;
    font-size: 18px;
    pointer-events: none;
    color: #d9a6ff;

    text-shadow:
        0 0 5px white,
        0 0 10px currentColor,
        0 0 20px currentColor;

    animation: explotarEstrella 0.8s ease-out forwards;
}

@keyframes explotarEstrella {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(1.4);
    }
}
.contador-seguidores {
    margin-top: 8px;
    color: #d9a6ff;
    font-size: 14px;
}
.foto-post {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    border: 2px solid #555;
    margin: 15px 0;
    display: block;
}
/* Sin barra lateral en Paparazzi: centrar el contenido */
body.pagina-galeria .contenido {
    justify-content: center;
}
.foto-post {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border: 2px solid #555;
    margin: 15px 0;
    display: block;
}
.portada-cancion {
    width: 100%;
    border: 2px solid #555;
    margin-bottom: 10px;
    display: block;
}

.reproductor audio {
    width: 100%;
}
.foto-post-chica {
    width: 500px;
    border: none;
    margin: 0 15px 10px 0;

Eso significa:
    float: left;
}
aside header {
    padding: 15px 10px;
    text-align: left;
}

aside header p {
    text-align: justify;
}
.post {
    background: #222;
    border: 2px dashed #777;
    padding: 25px;
    margin-bottom: 25px;
    overflow: hidden;
}
.post-arte {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.arte-imagen {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border: 2px solid #555;
    flex-shrink: 0;
}

.arte-descripcion {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Ajustes para pantallas de celular */
@media (max-width: 800px) {

    body {
        padding-left: 0;
    }

    .menu-lateral {
        position: static;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 15px 10px;
    }

    .contenedor {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .contenido {
        flex-direction: column;
    }

    main,
    aside {
        width: 100%;
        box-sizing: border-box;
    }

    .titulo {
        flex-wrap: wrap;
    }

    .titulo h1 {
        font-size: 32px;
        white-space: normal;
        text-align: center;
    }

    .gatita {
        width: 90px;
    }

}
.visitas {
    margin-top: 15px;
}
.foto-completa {
    width: 100%;
    max-width: 700px;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
    margin: 15px auto;
    border: 2px solid #555;
}
.caja-comentarios {
    margin-top: 30px;
}


.caja-comentarios input,
.caja-comentarios textarea {

    width: 100%;
    box-sizing: border-box;

    background: #111;
    color: white;

    border: 2px solid #c77dff;
    border-radius: 10px;

    padding: 10px;
    margin-bottom: 10px;

    font-family: "Courier New", monospace;
}


.caja-comentarios textarea {
    height: 100px;
    resize: vertical;
}


.caja-comentarios button {

    background: #1a0b2e;
    color: #d9a6ff;
    border: 2px solid #c77dff;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;

    font-family: "Courier New", monospace;
    font-size: 16px;

}


.caja-comentarios button:hover {

    background: #c77dff;
    color: #111;

}


.comentario {

    background: #111;
    border: 2px solid #c77dff;
    border-radius: 15px;
    padding: 15px;
    margin-top: 15px;

}


.comentario h4 {

    color: #d9a6ff;
    margin-top: 0;

}
.comentario p {
    color: #eee;
    font-family: "Courier New", monospace;
}
.estrella-comentario {

    position: fixed;

    font-size: 28px;

    pointer-events: none;

    z-index: 9999;

    animation: glitterExplosion 1.2s ease-out forwards;

    text-shadow:
        0 0 5px white,
        0 0 15px #c77dff,
        0 0 25px #ff7ac8;
}


@keyframes glitterExplosion {

    0% {

        transform: translate(0,0) scale(0.5) rotate(0deg);

        opacity: 1;

    }


    100% {

        transform:
        translate(var(--x), var(--y))
        scale(0)
        rotate(360deg);

        opacity: 0;

    }

}


@keyframes glitterExplosion {

    0% {

        transform: translate(0,0) rotate(0deg) scale(1);

        opacity: 1;

    }


    60% {

        opacity: 1;

    }


    100% {

        transform:
        translate(var(--x), 250px)
        rotate(var(--rotacion))
        scale(0.2);

        opacity: 0;

    }

}