body {
    background-color: #e9e3ff;
    color: #29204d;
    font-family: "Courier New", monospace;
    background-image: url("../img/fondo-cielo.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

h1 {
    font-size: 48px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #ffffff;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

.ventana {
    max-width: 700px;
    margin: 60px auto;
    border: 2px solid #7764b5;
    background-color: #f5f0ff;
    box-shadow: 6px 6px 0 #c4b5e8;
}

.ventana-barra {
    padding: 8px 12px;
    background: linear-gradient(to right, #6550a8, #b49be8);
    color: #ffffff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ventana-contenido {
    padding: 24px;
}

.accesos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
}

.acceso {
    padding: 16px;
    border: 2px solid #b49be8;
    background-color: #e9e3ff;
    color: #29204d;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
}

.acceso:hover {
    background-color: #d8ccf5;
}

.acceso:focus-visible {
    outline: 3px solid #6550a8;
    outline-offset: 3px;
}

.acceso-icono {
    display: block;
    font-size: 36px;
    margin-bottom: 8px;
}

.ventana-cerrar {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px outset #e9e3ff;
    background-color: #e9e3ff;
    color: #29204d;
    font-size: 22px;
    cursor: pointer;
    margin-left: auto;
}

.ventana-cerrar:hover {
    background-color: #d8ccf5;
}

.actividad-glitch {
    display: inline-block;
    padding: 14px 18px;
    border: 2px solid #6550a8;
    background-color: #e9e3ff;
    color: #29204d;
    font-weight: bold;
    text-decoration: none;
    animation: colores-digitales 2s linear infinite;
}

.actividad-glitch:hover {
    transform: translate(2px, -2px);
    text-shadow: -2px 0 #ff70d5, 2px 0 #70eaff;
}

.actividad-glitch:focus-visible {
    outline: 3px solid #29204d;
    outline-offset: 4px;
}

@keyframes colores-digitales {

    0%,
    100% {
        background-color: #c49bff;
        border-color: #6530bd;
    }

    33% {
        background-color: #65e5ff;
        border-color: #006b87;
    }

    66% {
        background-color: #ff85d5;
        border-color: #a01575;
    }
}

@media (prefers-reduced-motion: reduce) {
    .actividad-glitch {
        animation: none;
    }

    .actividad-glitch:hover {
        transform: none;
    }
}

.burbuja {
    position: fixed;
    top: 15%;
    right: 5%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: radial-gradient(circle at 30% 25%,
            #ffffff,
            rgba(205, 240, 255, 0.25) 25%,
            rgba(190, 150, 255, 0.15) 60%,
            rgba(255, 180, 235, 0.6));
    box-shadow:
        inset -8px -8px 18px rgba(158, 110, 230, 0.3),
        0 0 20px rgba(255, 255, 255, 0.5);
    padding: 0;
    cursor: pointer;
    z-index: 2;
    animation: flotar-burbuja 5s ease-in-out infinite;
}

@keyframes flotar-burbuja {
    0%, 100% {
        transform: translate(0, 0);
    }

    35% {
        transform: translate(-18px, -65px);
    }

    70% {
        transform: translate(12px, -30px);
    }
}
@keyframes flotar {

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

    50% {
        transform: translateY(-20px);
    }
}

.burbuja-2 {
    top: 65%;
    right: auto;
    left: 4%;
    width: 60px;
    height: 60px;
    animation-duration: 8s;
    animation-delay: -3s;
}

.burbuja-3 {
    top: 78%;
    right: 12%;
    width: 120px;
    height: 120px;
    animation-duration: 7s;
    animation-delay: -5s;
}

@media (prefers-reduced-motion: reduce) {
    .burbuja {
        animation: none;
    }
}

.burbuja.reventada {
    visibility: hidden;
}

.burbuja:focus-visible {
    outline: 3px solid #6550a8;
    outline-offset: 4px;
}

.planeta-decorativo {
    position: absolute;
    top: 28px;
    bottom: auto;
    left: clamp(40px, 7vw, 140px);
    right: auto;
    width: clamp(150px, 25vw, 350px);
    height: auto;
    pointer-events: none;
    animation: flotar 10s ease-in-out infinite;
}

.nota-escritorio {
    position: absolute;
    top: 360px;
    left: 4%;
    width: 250px;
    border: 2px solid #7764b5;
    background-color: #e8ddfa;
    box-shadow: 5px 5px 0 #a995ca;
    transform: rotate(-5deg);
    z-index: 0;
}

.nota-escritorio p {
    padding: 0 16px;
}

.nota-escritorio > span {
    display: block;
    padding: 0 16px 18px;
    font-size: 13px;
}

main {
    position: relative;
    z-index: 1;
}

@media (max-width: 600px) {
    .nota-escritorio {
        position: relative;
        top: auto;
        left: auto;
        width: 80%;
        margin: 24px auto;
        transform: rotate(-2deg);
    }
}

/* COLLAGE: fondo (0), imágenes (1), ventanas (3), objetos flotantes (4). */
body {
    margin: 0;
    min-height: 100vh;
    isolation: isolate;
    position: relative;
}

.collage-recuerdos {
    position: absolute;
    inset: 0;
    height: auto;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.pieza { position: absolute; height: auto; object-fit: contain; }
.estatua { width: clamp(180px, 24vw, 360px); bottom: 0; left: -2%; }
.flores { width: clamp(160px, 23vw, 340px); bottom: 0; right: 0; z-index: 2; transform-origin: 50% 100%; animation: mecer-flores 6s ease-in-out infinite; }
.disco { width: clamp(110px, 15vw, 220px); top: 12px; right: 5%; animation: girar-disco 35s linear infinite; }
.pez { width: clamp(130px, 18vw, 260px); top: 56%; left: 20%; animation: flotar 7s ease-in-out infinite; z-index: 2; }

.foto-recuerdo {
    position: absolute;
    margin: 0;
    padding: 9px;
    width: 210px;
    background: #f5f0ff;
    border: 1px solid #b49be8;
    box-shadow: 6px 9px 16px #29204d40;
}
.foto-recuerdo img { display: block; width: 100%; height: 170px; object-fit: cover; }
.foto-recuerdo figcaption { padding: 10px 3px 3px; font-size: 12px; line-height: 1.4; }
.foto-ruinas { top: 110px; left: 3%; transform: rotate(-7deg); }
.foto-ruinas .ventana-barra { margin: -9px -9px 9px; font-size: 12px; }
.foto-cables { top: 270px; right: 3%; transform: rotate(8deg); }
.foto-puerta { top: 560px; right: 20%; width: 165px; transform: rotate(-10deg); }
.foto-puerta img { height: 205px; }

main { position: relative; z-index: 3; padding: 1px 18px 100px; }
.bienvenida { margin-top: 100px; }
.bienvenida h1 { font-size: clamp(30px, 4vw, 48px); overflow-wrap: anywhere; }
.nota-escritorio { top: 500px; left: 7%; z-index: 2; }
.planeta-decorativo { z-index: 4; }
.burbuja { z-index: 5; }

@keyframes mecer-flores { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

@keyframes girar-disco { to { transform: rotate(360deg); } }

/* En pantallas pequeñas, las fotos pasan a una galería sin tapar el contenido. */
@media (max-width: 900px) {
    main { padding-bottom: 24px; }
    .bienvenida { margin-top: 35px; }
    .collage-recuerdos {
        position: relative;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 22px;
        padding: 35px 18px;
    }
    .collage-recuerdos .pieza,
    .collage-recuerdos .foto-recuerdo { position: relative; inset: auto; }
    .collage-recuerdos .pieza { width: 110px; max-height: 150px; }
    .collage-recuerdos .foto-recuerdo { width: min(210px, 65vw); }
    .nota-escritorio { position: relative; inset: auto; width: min(250px, 80%); margin: 28px auto; }
    .planeta-decorativo { width: 120px; top: 8px; bottom: auto; left: 8px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .disco, .pez, .planeta-decorativo, .flores { animation: none; }
}
/* El escritorio crece con las carpetas; las flores siguen su borde inferior. */
@media (min-width: 901px) {
    body { min-height: max(900px, 100vh); }
}
/* Separación entre actividades de Parcial 2. */
.lista-practicas { list-style: none; padding: 0; display: grid; gap: 14px; }
.lista-practicas a { box-sizing: border-box; max-width: 100%; }

/* SOBRE MÍ: estilos limitados a la ventana personal. */
#mis-cosas { max-width: 860px; }
#mis-cosas > .ventana-contenido {
    background: linear-gradient(140deg, #f8f4ff, #e3e5ff 60%, #f8dcf1);
}
.sobre-mi { position: relative; isolation: isolate; }
.sobre-mi-titulo { padding: 6px 0 18px; }
.etiqueta-archivo { font-size: 12px; letter-spacing: 2px; color: #6550a8; }
.sobre-mi h2 { font-size: clamp(26px, 4vw, 36px); margin: 12px 0; }
.sobre-mi-titulo > p { font-size: 16px; max-width: 45ch; }
.sobre-mi-columnas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: center; }
.sobre-mi-textos { display: grid; gap: 18px; min-width: 0; }
.tarjeta-personal {
    padding: 18px;
    border: 1px solid #ac97d5;
    background: #ffffffb8;
    box-shadow: 4px 4px 0 #b49be840;
}
.tarjeta-personal h3 { margin: 0 0 12px; font-size: 18px; }
.tarjeta-personal p, .tarjeta-personal li { font-size: 16px; line-height: 1.75; }
.tarjeta-personal p { margin: 0; }
.tarjeta-personal ul { padding-left: 20px; margin: 0; }
.tarjeta-cualidades { background: #efe6ffcc; }
.retrato-imaginario {
    min-width: 0;
    margin: 0;
    padding: 9px;
    background: #fdfaff;
    border: 1px solid #b49be8;
    box-shadow: 5px 7px 0 #b49be866;
    transform: rotate(3deg);
}
.retrato-cielo {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 50%, #6b5395, #171630 85%);
    aspect-ratio: 1 / 1.1;
    display: grid;
    place-items: center;
}
.retrato-cielo img { width: 100%; height: auto; mix-blend-mode: screen; }
.retrato-cielo > span { position: absolute; right: 14px; bottom: 12px; color: #e9e3ff; font-size: 44px; }
.retrato-imaginario figcaption { padding: 14px 5px 6px; font-size: 13px; line-height: 1.6; }
.nota-sueno {
    position: relative;
    margin: 28px 35px 8px 0;
    padding: 18px 24px;
    border-left: 4px solid #9f73ca;
    background: #fff5fcbf;
}
.nota-sueno p { margin: 0; font-size: 16px; line-height: 1.8; }
.mariposa-personal {
    position: absolute;
    top: -22px;
    right: -35px;
    width: clamp(65px, 12vw, 110px);
    height: auto;
    pointer-events: none;
    animation: flotar 8s ease-in-out infinite;
}
@media (max-width: 600px) {
    .sobre-mi-columnas { grid-template-columns: 1fr; }
    .retrato-imaginario { width: min(260px, 85%); justify-self: center; }
    .mariposa-personal { top: -12px; right: -15px; width: 65px; }
    .sobre-mi-titulo { padding-right: 36px; }
    .nota-sueno { margin-right: 0; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .mariposa-personal { animation: none; }
}
/* Galería: las ilustraciones conservan su proporción y se amplían en un dialog. */
.mis-dibujos { margin-top: 45px; padding-top: 28px; border-top: 2px dashed #b49be8; }
.dibujos-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: center; }
.dibujos-intro h2 { font-size: 32px; margin: 12px 0; }
.dibujos-intro p { font-size: 16px; line-height: 1.8; }
.vae-galeria { margin: 0; padding: 12px; background: radial-gradient(ellipse, #735b99, #171630); border: 1px solid #b49be8; transform: rotate(2deg); }
.vae-galeria img { display: block; width: 100%; height: auto; mix-blend-mode: screen; }
.vae-galeria figcaption { color: #f5f0ff; font-size: 12px; line-height: 1.6; margin-top: 10px; }
.galeria-personal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.galeria-personal figure { min-width: 0; margin: 0; padding: 9px; border: 1px solid #b49be8; background: #fffaff; box-shadow: 4px 4px 0 #b49be855; }
.abrir-dibujo { display: block; box-sizing: border-box; width: 100%; height: 240px; min-width: 0; padding: 8px; background: #e9e3ff; border: 0; overflow: hidden; cursor: zoom-in; }
.abrir-dibujo img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.abrir-dibujo:focus-visible { outline: 3px solid #6550a8; outline-offset: 3px; }
.galeria-personal figcaption { font-size: 12px; padding: 12px 2px 3px; overflow-wrap: anywhere; }
.visor-dibujo { width: min(1000px, 92vw); max-height: 92vh; box-sizing: border-box; padding: 0; border: 2px solid #7764b5; background: #f5f0ff; color: #29204d; }
.visor-dibujo::backdrop { background: #15102de0; }
.visor-dibujo .ventana-barra { justify-content: space-between; }
.visor-dibujo h2 { margin: 0; font: bold 16px 'Courier New', monospace; }
.visor-dibujo form { margin: 0; }
#dibujo-ampliado { display: block; width: 100%; height: min(70vh, 800px); object-fit: contain; margin: 12px auto; }
#descripcion-dibujo { margin: 12px 18px; font-size: 14px; }
@media (max-width: 600px) {
    .dibujos-intro { grid-template-columns: 1fr; }
    .vae-galeria { width: min(260px, 85%); justify-self: center; }
    .galeria-personal { grid-template-columns: 1fr; }
}
/* Diario personal: hojas estáticas y una llave con movimiento reducido opcional. */
.diario-personal { margin-top: 42px; padding-top: 28px; border-top: 2px dashed #b49be8; }
.diario-encabezado h2 { font-size: clamp(26px, 4vw, 32px); margin: 12px 0; }
.diario-encabezado p { font-size: 16px; }
.diario-paginas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 16px 4px; }
.diario-hoja { position: relative; padding: 26px 20px 20px; background: repeating-linear-gradient(#fffdf8 0 29px, #d8d0ea 29px 30px); border: 1px solid #c3b6d8; box-shadow: 4px 5px 0 #ac97d533; transform: rotate(-1deg); }
.diario-hoja::before { content: ''; position: absolute; top: -9px; left: 30%; width: 65px; height: 22px; background: #b8b4ed99; transform: rotate(5deg); }
.diario-hoja-rosa { background: repeating-linear-gradient(#fff1fa 0 29px, #e6cce0 29px 30px); transform: rotate(1deg); }
.diario-numero { display: block; font-size: 12px; color: #6550a8; }
.diario-hoja h3 { font-size: 19px; line-height: 1.5; margin: 16px 0; }
.diario-hoja p { font-size: 16px; line-height: 30px; margin: 0; }
.diario-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.diario-objetos { position: relative; height: 220px; pointer-events: none; }
.diario-objetos img { position: absolute; height: auto; object-fit: contain; }
.diario-libreta { width: 75%; top: 15px; left: 0; transform: rotate(-8deg); max-height: 190px; }
.diario-pluma { width: 40%; top: 15px; right: 10%; max-height: 190px; transform: rotate(15deg); }
.diario-llave { width: 22%; right: 0; bottom: 10px; max-height: 100px; animation: flotar 7s ease-in-out infinite; }
.diario-recordatorio { padding: 18px; font-size: 16px; line-height: 1.8; background: #e4ddfc; border: 1px solid #b49be8; transform: rotate(2deg); }
@media (max-width: 600px) {
    .diario-paginas, .diario-pie { grid-template-columns: 1fr; }
    .diario-objetos { width: min(290px, 100%); justify-self: center; }
    .diario-recordatorio { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .diario-llave { animation: none; }
}
/* Desplegables nativos: summary funciona con clic, Enter y barra espaciadora. */
.apartado-plegable > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
    cursor: pointer;
    list-style: none;
    font-size: clamp(23px, 4vw, 32px);
    font-weight: bold;
    color: #29204d;
}
.apartado-plegable > summary::-webkit-details-marker { display: none; }
.apartado-plegable > summary:hover { color: #7551ac; }
.apartado-plegable > summary:focus-visible { outline: 3px solid #6550a8; outline-offset: 4px; }
.flecha-apartado { font-size: 30px; flex-shrink: 0; }
.apartado-plegable[open] > summary .flecha-apartado { transform: rotate(90deg); }
.contenido-apartado { padding-top: 12px; }
/* Música: panel decorativo con reproducción real a través de YouTube. */
.musica-personal { margin-top: 42px; padding-top: 28px; border-top: 2px dashed #b49be8; }
.musica-composicion { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-top: 20px; align-items: start; }
.reproductor-personal { min-width: 0; padding: 8px; border: 2px outset #b49be8; background: linear-gradient(135deg,#d3c5f2,#f7f2ff,#b9d7ec); box-shadow: 5px 5px 0 #7764b544; }
.reproductor-personal > .ventana-barra { font-size: 12px; overflow-wrap: anywhere; }
.pantalla-musica { padding: 20px 16px; margin-top: 8px; color: #e9e3ff; background: radial-gradient(ellipse at top right,#67448c,#171630); border: 2px inset #b49be8; }
.musica-estado { font-size: 11px; letter-spacing: 2px; color: #9eeeff; }
.pantalla-musica h3 { font-size: 20px; line-height: 1.6; }
.pantalla-musica p { font-size: 12px; line-height: 1.8; }
.barras-musica { display: flex; align-items: end; gap: 6px; height: 45px; }
.barras-musica i { display: block; width: 12px; height: 45%; background: linear-gradient(#9eeeff,#f195dd); }
.barras-musica i:nth-child(2n) { height: 85%; }
.barras-musica i:nth-child(3n) { height: 65%; }
.musica-instruccion { margin: 12px 4px; font-size: 13px; line-height: 1.7; }
#video-musica { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #171630; }
.musica-enlace { display: inline-block; padding: 12px 4px 4px; font-size: 13px; color: #43316d; }
.musica-objetos { position: relative; height: 240px; pointer-events: none; }
.musica-objetos img { position: absolute; height: auto; object-fit: contain; }
.musica-audifonos { width: 82%; top: 0; left: 0; max-height: 210px; }
.musica-casete { width: 60%; right: 0; bottom: 0; max-height: 125px; transform: rotate(-9deg); }
.musica-nota { padding: 18px; background: #fff3fbc9; border: 1px solid #b49be8; margin-top: 16px; }
.musica-nota h3 { font-size: 18px; margin-top: 0; }
.musica-nota p { font-size: 15px; line-height: 1.8; }
@media (max-width: 600px) {
    .musica-composicion { grid-template-columns: 1fr; }
    .musica-objetos { width: min(280px,100%); margin: 0 auto; }
}
/* Openings locales, conservando la proporción completa de cada video. */
.openings-personales { margin-top: 28px; padding-top: 20px; border-top: 1px dashed #b49be8; }
.openings-personales > h3 { font-size: 22px; }
.openings-personales > p { font-size: 15px; line-height: 1.7; }
.lista-openings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lista-openings figure { min-width: 0; margin: 0; padding: 8px; border: 1px solid #b49be8; background: #fdfaff; box-shadow: 4px 4px 0 #b49be844; }
.lista-openings figcaption { padding: 8px 4px 12px; font-size: 13px; line-height: 1.6; }
.lista-openings video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #171630; }
@media (max-width: 600px) { .lista-openings { grid-template-columns: 1fr; } }
/* Recetario de recuerdos: fotos completas y notas alternadas. */
.comidas-personales { margin-top: 42px; padding-top: 28px; border-top: 2px dashed #b49be8; }
.comidas-intro { display: grid; grid-template-columns: 1fr 170px; gap: 18px; align-items: center; }
.comidas-intro h3 { font-size: 22px; line-height: 1.5; }
.comidas-intro p { font-size: 16px; line-height: 1.8; }
.comidas-pecera { width: 100%; height: 180px; object-fit: contain; pointer-events: none; }
.recetario-personal { display: grid; gap: 30px; margin-top: 20px; padding: 8px; }
.recuerdo-comida { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; align-items: center; }
.recuerdo-comida figure { position: relative; min-width: 0; margin: 0; padding: 10px; background: #fffaff; border: 1px solid #b49be8; box-shadow: 4px 5px 0 #b49be844; transform: rotate(-2deg); }
.recuerdo-comida figure::before { content: ''; position: absolute; width: 65px; height: 21px; background: #c1b3e999; top: -10px; left: 35%; transform: rotate(5deg); }
.recuerdo-comida figure img { display: block; width: 100%; height: 185px; object-fit: contain; background: #eee5fa; }
.recuerdo-comida figcaption { padding: 12px 3px 3px; font-size: 12px; line-height: 1.6; }
.comida-nota { min-width: 0; padding: 18px; border-left: 3px solid #aa81c9; background: #f7e8f5; }
.comida-nota h3 { font-size: 18px; margin: 0 0 12px; }
.comida-nota p { font-size: 15px; line-height: 1.8; margin: 0; }
.recuerdo-comida:nth-child(even) figure { order: 2; transform: rotate(2deg); }
.recuerdo-comida:nth-child(even) .comida-nota { background: #e7e6ff; }
@media (max-width: 600px) {
    .comidas-intro { grid-template-columns: 1fr 90px; gap: 10px; }
    .comidas-pecera { height: 120px; }
    .recuerdo-comida { grid-template-columns: 1fr; gap: 16px; }
    .recuerdo-comida:nth-child(even) figure { order: 0; }
}