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

body{
    background:#f4efe6;
    font-family:'Patrick Hand', cursive;
    min-height:100vh;
}

header{
    text-align:center;
    padding:60px 20px;
}

h1{
    font-family:'Caveat', cursive;
    font-size:5rem;
}

header p{
    font-size:1.2rem;
}

.main  {
    margin-bottom: 0;
    padding-bottom: 0;
}

.title{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.title span{
    font-family:'Caveat', cursive;
    font-size:5rem;
}

.name-images{
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.name-letter{
    height: 90px;
    width: auto;
    cursor: pointer;

    transition:
        transform .25s ease,
        filter .25s ease;

    filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
}

/* Cada letra arranca con una inclinación distinta */
.name-letter:nth-child(1){
    transform: rotate(-8deg);
}

.name-letter:nth-child(2){
    transform: rotate(4deg);
}

.name-letter:nth-child(3){
    transform: rotate(-5deg);
}

.name-letter:nth-child(4){
    transform: rotate(7deg);
}

.name-letter:nth-child(5){
    transform: rotate(-3deg);
}

.name-letter:nth-child(6){
    transform: rotate(5deg);
}

.name-letter:nth-child(7){
    transform: rotate(-6deg);
}

.name-letter:nth-child(8){
    transform: rotate(3deg);
}

.name-letter:nth-child(1):hover{
    transform: translateY(-20px) rotate(-8deg);
}

.name-letter:nth-child(2):hover{
    transform: translateY(-20px) rotate(4deg);
}

.name-letter:nth-child(3):hover{
    transform: translateY(-20px) rotate(-5deg);
}

.name-letter:nth-child(4):hover{
    transform: translateY(-20px) rotate(7deg);
}

.name-letter:nth-child(5):hover{
    transform: translateY(-20px) rotate(-3deg);
}

.name-letter:nth-child(6):hover{
    transform: translateY(-20px) rotate(5deg);
}

.name-letter:nth-child(7):hover{
    transform: translateY(-20px) rotate(-6deg);
}

.name-letter:nth-child(8):hover{
    transform: translateY(-20px) rotate(3deg);
}

/* CARPETAS */

.folders{
    width:95%;
    max-width:1400px;
    margin:80px auto 0;
}

/* CARPETA INDV */

.folder{
    position:relative;
    height:150px;
    margin-top: -35px;
    border-radius:35px 35px 0 0;
    overflow:hidden;
    cursor:pointer;
    transition:.8s ease;
}

/* SOLAPA */

.folder::before{
    content:"";
    position:absolute;
    width:180px;
    height:55px;
    top:-55px;
    border-radius:22px 22px 0 0;
}

/* TEXTURA */

.folder::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.05) 2px,
        transparent 2px,
        transparent 5px
    );
    opacity:.35;
    pointer-events:none;
}

/* POSICIONES */

.green::before{
    left:60px;
}

.cream::before{
    left:180px;
}

.black::before{
    left:300px;
}

.pink::before{
    left:420px;
}

.yellow::before{
    left:540px;
}

/* COLORES */

.green{
    background:#aab05f;
}

.green::before{
    background:#aab05f;
}

.cream{
    background:#ece8e0;
}

.cream::before{
    background:#ece8e0;
}

.black{
    background:#201d1d;
    color:white;
}

.black::before{
    background:#201d1d;
}

.pink{
    background:#efb7ca;
}

.pink::before{
    background:#efb7ca;
}

.yellow{
    background:#ffe881;
}

.yellow::before{
    background:#ffe881;
}

/* ========================= */

.tab-label{

    position:absolute;

    top:-42px;

    z-index:10;

    font-size:1.2rem;

    letter-spacing:1px;
}

.green .tab-label{
    left:110px;
}

.cream .tab-label{
    left:230px;
}

.black .tab-label{
    left:350px;
}

.pink .tab-label{
    left:470px;
}

.yellow .tab-label{
    left:590px;
}

.folder + .folder{
    z-index: 600;
}

/* IMAGENES DE CARPETAS CURSOR */
.preview-images{
    position:absolute;
    right:80px;
    top: -70px;
    display:flex;
    gap:0;
    z-index:2;
    pointer-events:none;
}

.preview-images img{
    height: 200px;
    width: auto;
    object-fit: contain;
    margin-left: -45px;
    border-radius: 12px;
    filter:
        drop-shadow(0 8px 10px rgba(0,0,0,.15))
        drop-shadow(0 15px 25px rgba(0,0,0,.2));
    opacity: 0;
    transition: .6s ease;
    position: relative;
}

.preview-images{
    position:absolute;
    top:-150px;
    right:0;
    display:flex;
}

.preview-images img:first-child{
    margin-left: 0;
}

.preview-images img:nth-child(1){
    transform: translateY(190px) rotate(-10deg);
}

.preview-images img:nth-child(2){
    transform: translateY(210px) rotate(-4deg);
}

.preview-images img:nth-child(3){
    transform: translateY(185px) rotate(5deg);
}

.preview-images img:nth-child(4){
    transform: translateY(205px) rotate(10deg);
}


.folder:hover .preview-images img{
    opacity: 1;
}

.folder:hover .preview-images img:nth-child(1){
    transform: translateY(110px) rotate(-10deg);
}

.folder:hover .preview-images img:nth-child(2){
    transform: translateY(100px) rotate(-4deg);
}

.folder:hover .preview-images img:nth-child(3){
    transform: translateY(120px) rotate(5deg);
}

.folder:hover .preview-images img:nth-child(4){
    transform: translateY(120px) rotate(10deg);
}

.folder{
    overflow:visible;
    transition:
    transform .45s ease,
    height .8s ease,
    margin-top .8s ease;
    z-index: 1;
    position: relative;
}

.folder:hover{
    transform:translateY(-30px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.15);
}

.folder::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:80px;
    z-index:1000;
}

/* ========================= */

.content{

    display:none;

    padding:120px 60px 60px;
}

.folder.active{

    height:85vh;

    margin-top:0;

    z-index:1000;
}

.folder.active .content{

    display:block;
}

.folder.active:hover{

    transform:none;
}

.folder.active .preview{

    display:none;
}

/* ========================= */

.paper{

    background:white;

    padding:40px;

    border-radius:20px;

    max-width:900px;

    box-shadow:0 15px 30px rgba(0,0,0,.12);
}

.paper p{

    font-size:1.3rem;

    margin-bottom:15px;
}

h2{

    font-size:4rem;

    margin-bottom:25px;

    font-family:'Caveat', cursive;
}

h3{

    margin-top:20px;
}

/* ========================= */

.todo-list{

    list-style:none;
}

.todo-list li{

    margin:15px 0;

    cursor:pointer;

    font-size:1.3rem;
}

.todo-list li::before{

    content:"☐ ";

    margin-right:10px;
}

.done{

    text-decoration:line-through;

    opacity:.5;
}

.done::before{

    content:"☑ ";
}









.ocio-paper{
max-width:1200px;
}

.ocio-section{
margin-bottom:80px;
}

.albums-grid{
    display:grid;
    grid-template-columns:repeat(4, auto);
    justify-content:center;
    column-gap:90px;
    row-gap:80px;
    margin:50px 0;
}

.album-card{
    position:relative;
    width:180px;
    cursor:pointer;
    overflow:visible;
}

.album-card img{
    width:180px;
    height:180px;
    object-fit:cover;
    display:block;
    border-radius:15px;
    position:relative;
    z-index:2;
}

.album-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.75);
color:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
opacity:0;
transition:.3s;
}

.album-card:hover .album-overlay{
opacity:1;
}

.album-card::before{
    content:"";
    position:absolute;

    width:150px;
    height:150px;

    top:15px;
    left:90px;

    background-image:url("img/vinilo.gif");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    z-index:1;
}

.album-card::before{
    transition:.4s;
}

.album-card:hover::before{
    transform:translateX(25px);
}


.song-day{
display:flex;
gap:20px;
align-items:center;
background:#fff7d8;
padding:20px;
border-radius:15px;
}

.song-day img{
width:100px;
border-radius:10px;
}

.movies-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:25px;
}

.movie-card{
position:relative;
}

.movie-card img{
width:100%;
border-radius:15px;
}

.movie-rating{
position:absolute;
inset:0;
background:rgba(0,0,0,.8);
color:gold;
font-size:2rem;
display:flex;
justify-content:center;
align-items:center;
opacity:0;
transition:.3s;
border-radius:15px;
}

.movie-card:hover .movie-rating{
opacity:1;
}

.tickets-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 30px; /* espacio horizontal */
    row-gap: 80px;    /* espacio vertical */
    justify-items: center;
}

.ticket{
    position: relative;
    cursor: pointer;
    transition: .3s;
}

.ticket:hover{
    transform: translateY(-8px) rotate(-2deg);
}

.ticket img{
    width: 100%;
    max-width: 220px; /* ajustá este valor a gusto */
    height: auto;     /* mantiene las proporciones */
    display: block;
}

/* Fecha del recital */

.ticket::after{
    content: attr(data-date);
    position: absolute;
    left: 50%;
    bottom: -45px;
    transform: translateX(-50%);
    background: #fff;
    color: #333;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: .85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
}

.ticket:hover::after{
    opacity: 1;
}

/* Próximamente */

.next-title{
    margin-top: 60px;
    text-align: center;
}

.upcoming-grid{
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    margin-top: 40px;
}

/* Modal */

#galleryModal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.gallery-content{
    width: 90%;
    max-width: 1200px;
}

#closeGallery{
    color: white;
    font-size: 2rem;
    cursor: pointer;
    display: block;
    margin-bottom: 20px;
}

#galleryPhotos{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 30px;
}

/* Polaroids */

#galleryPhotos img{
    width: 180px;
    background: white;
    padding: 10px 10px 35px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    transform: rotate(calc(var(--r) * 1deg));
    transition: .3s;
}

#galleryPhotos img:hover{
    transform:
        rotate(calc(var(--r) * 1deg))
        scale(1.1);
    z-index: 10;
}















.personal-paper{
   max-width:1200px;
}

.profile-section{
   display:flex;
   gap:40px;
   align-items:center;
   margin-bottom:40px;
}

.profile-info h3{
   font-size:2.5rem;
   margin-bottom:15px;
   margin-left: 120px;
   font-family:'Caveat', cursive;
}

/* contenedor */
.stickers{
   position: relative;
   height: 400px;  /* más espacio para dispersar */
   margin-top: 30px;
}

/* sticker base */
.sticker{
   position: absolute;
   cursor: pointer;
   transition: transform .3s ease, z-index .3s ease;
   transform: rotate(-5deg);
}

/* imagen sticker */
.sticker img{
   width: 140px;   /* más grande */
   height: auto;   /* clave: mantiene proporción */
   display: block;
    max-width: 300px;
   filter: drop-shadow(0 6px 10px rgba(0,0,0,.2));
}

.sticker:nth-child(1) img { width: 200px; }
.sticker:nth-child(2) img { width: 130px; }
.sticker:nth-child(3) img { width: 260px; }
.sticker:nth-child(4) img { width: 230px; }
.sticker:nth-child(5) img { width: 180px; }
.sticker:nth-child(6) img { width: 150px; }
.sticker:nth-child(7) img { width: 140px; }
.sticker:nth-child(8) img { width: 190px; }
.sticker:nth-child(9) img { width: 100px; }
.sticker:nth-child(10) img { width: 160px; }

.sticker:nth-child(1){ top: 20px; left: 20px; z-index: 1; }
.sticker:nth-child(2){ top: 60px; left: 160px; z-index: 2; }
.sticker:nth-child(3){ top: 70px; left: 260px; z-index: 1; }
.sticker:nth-child(4){ top: 190px; left: 80px; z-index: 2; }
.sticker:nth-child(5){ top: 140px; left: 270px; z-index: 1; }
.sticker:nth-child(6){ top: 10px; left: 500px; z-index: 2; }
.sticker:nth-child(7){ top: 130px; left: 440px; z-index: 1; }
.sticker:nth-child(8){ top: 280px; left: 300px; z-index: 2; }
.sticker:nth-child(9){ top: 120px; left: 550px; z-index: 1; }
.sticker:nth-child(10){ top: 70px; left: 620px; z-index: 2; }

.sticker:hover{
   transform: translateY(-20px) scale(1.05) rotate(0deg);
   z-index: 10;
}

.sticker span{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(255,255,255,0.92);
   padding: 6px 10px;
   border-radius: 8px;
   font-size: 0.9rem;
   opacity: 0;
   transition: opacity .25s ease;
   pointer-events: none;
}

.sticker:hover span{
   opacity: 1;
}


.profile-photo {
    position: relative;
    margin-left: 40px;
    width: 220px;
    height: 220px;
    display: inline-block;
}

/* estilo base que ya tenías */
.profile-photo img {
    position: absolute; /* clave para que no empuje el layout */
    top: 0;
    left: 0;
    width: 220px;
    height: 220px;
    border: 12px solid white;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    transform: rotate(-3deg);
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* imagen normal */
.img-base {
    opacity: 1;
}

/* imagen hover */
.img-hover {
    opacity: 0;
}

/* swap en hover */
.profile-photo:hover .img-base {
    opacity: 0;
}

.profile-photo:hover .img-hover {
    opacity: 1;
}

.profile-info h3{
   font-size:2.5rem;
   margin-bottom:15px;
   font-family:'Caveat', cursive;
}

.profile-info p{
   margin-bottom:12px;
}

.divider{
   height:2px;
   background:#ddd;
   margin:50px 0;
}

.section-text{
   margin-bottom:25px;
}

.photo-gallery img{
width:100%;
aspect-ratio:1;
object-fit:cover;
background:white;
padding:10px;
box-shadow:0 10px 20px rgba(0,0,0,.12);
transition:.3s;

}

.photo-gallery img:hover{
transform:
rotate(-2deg)
scale(1.05);

}

.photo-gallery{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.photo-item{
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.photo-item img{
    display: block;
    width: 260px; 
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform .3s ease, filter .3s ease;
}

/* Capa del texto */
.photo-item span{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    color: white;
    text-align: center;
    padding: 15px;
    opacity: 0;
    transition: opacity .3s ease;
}

/* Hover */
.photo-item:hover img{
    transform: scale(1.05);
    filter: brightness(0.7);
}

.photo-item:hover span{
    opacity: 1;
}

.movie-sinopsis {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    color: white;
    text-align: center;
    padding: 15px;
    opacity: 0;
    transition: opacity .3s ease;
}

.movie-sinopsis:hover img{
    transform: scale(1.00);
    filter: brightness(0.7);
}

.movie-sinopsis:hover {
    opacity: 800;
}







.checklist-paper{

    max-width:800px;

    color:#222;
}

.custom-todo{

    list-style:none;

    padding:0;

    margin:0;
}

.custom-todo li{

    display:flex;

    align-items:center;

    gap:20px;

    margin:25px 0;

    padding:15px;

    border-bottom:2px dashed #ddd;

    color:#222;

    font-size:1.6rem;

    line-height:1.4;
}

.checkbox{

    width:28px;

    height:28px;

    min-width:28px;

    border:3px solid #444;

    border-radius:6px;
}

.completed{

    text-decoration:line-through;

    color:#666;
}

.completed .checkbox{

    background:#aab05f;

    position:relative;
}

.completed .checkbox::after{

    content:"✓";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    color:white;

    font-weight:bold;
}















.unq-paper{
max-width:1200px;
}

.unq-intro{
font-size:1.3rem;
margin-bottom:40px;
text-align:center;
}

.projects-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.project-card{
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    padding: 15px;
    transition: .3s;
}

.project-card:hover{
    transform: translateY(-8px) rotate(-1deg);
}

.project-card iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 12px;
    display: block;
}

.project-card h3{
    margin-top: 15px;
    text-align: center;
    font-size: 1.1rem;
}

.project-card:nth-child(odd){
    transform: rotate(-1deg);
}

.project-card:nth-child(even){
    transform: rotate(1deg);
}

.project-card:hover{
    transform: translateY(-10px) rotate(0deg) scale(1.02);
}













.games-paper{

    max-width:1200px;
}

.games-intro{

    text-align:center;

    margin-bottom:40px;

    font-size:1.4rem;
}

.games-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin-bottom:60px;
}

.game-card{

    background:white;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 20px rgba(0,0,0,.1);

    transition:.3s;
}

.game-card:hover{

    transform:
    translateY(-8px)
    rotate(-1deg);
}

.game-icon{

    font-size:3rem;

    margin-bottom:15px;
}

.game-section{
    margin-top:70px;
}








.wordsearch-container{
    display:flex;
    gap:50px;
    flex-wrap:wrap;
    align-items:flex-start;
}

.wordsearch-grid{
    display:grid;
    grid-template-columns:repeat(10, 50px);
    gap:6px;
}

.cell{
    width:50px;
    height:50px;
    border:none;
    border-radius:14px;
    background:white;
    font-size:1.2rem;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    transition:.2s;
}

.cell:hover{
    transform:translateY(-3px);
}

.cell.selected{
    background:#ffdce7;
}

.cell.found{
    background:#ff99b6;
    color:white;
}

.word-list{
    min-width:180px;
}

.word-list li{
    margin-bottom:12px;
    transition:.3s;
}

.word-list li.found{
    text-decoration:line-through;
    opacity:.5;
}

#winner-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:1000;
}

#winner-popup.show{
    display:flex;
}

.popup-box{
    background:white;
    padding:40px;
    border-radius:25px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.popup-box h2{
    margin-bottom:15px;
}

#restart-btn{
    margin-top:20px;
    padding:12px 20px;
    border:none;
    border-radius:12px;
    cursor:pointer;
}