@font-face {
    font-family: 'kaoly'; 
    src: url('Kaoly Demo-Regular.ttf'); 
 }
 @font-face {
    font-family: 'loudbeats'; 
    src: url('LoudBeats.ttf'); 
 }

 @font-face {
    font-family: 'okine'; 
    src: url('MADEOkineSansPERSONALUSE-Regular.otf'); 
 }

 @font-face {
    font-family: 'comforta'; 
    src: url('Comfortaa-Bold.ttf'); 
 }

@font-face {
    font-family: 'rainyhearts'; 
    src: url('rainyhearts.ttf'); 
 }



.menu22 {
    font-family: 'okine', sans-serif; /* 🔤 Aquí usas tu fuente cargada */
    font-size: 34px;                    /* 📐 Tamaño para texto de lectura */
    color: #F79225;                     /* 🎨 El color de tu paleta */
    text-align: center;
    
    /* 📍 El truco para congelarlo donde tú quieras: */
    position: absolute;
    top: 172px;                         /* Qué tan abajo va a estar del tope de la página */
    left: 683px;                         /* Qué tan separado de la izquierda */
    z-index: 10;                        /* Para que no se quede guardado detrás de los fondos */
    background-color: rgba(52, 127, 201, 0.2); /* 🎨 Cambia el cuadro a un azul clarito (o el color que quieras) */
    padding: 2px 8px;                          /* Espacio acolchonado alrededor de las letras */
    border-radius: 2px;                         /* Bordes redonditos estéticos */
}





/* Estilo base del botón */
 .boton-interactivo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    flex-direction: column;  /* Obliga a que el texto se acomode hacia abajo, palabra por palabra */
    text-align: center;      /* Centra el texto de forma interna */
    line-height: 1.2em;      /* Controla la separación entre "PROMOCION" y "SOCIAL" para que no se encimen */
    
    /* Ajusta el ancho y alto según el tamaño de tu imagen */
    width: 194px; 
    height: 390px; 
    
    /* Imagen por defecto */
    background-image: url('https://nanita22.neocities.org/naranja.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Estilo del texto que va encima */
   color: #FFEFD9;
    font-family: 'comforta', sans-serif;
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important; /* Quita la línea de link */
    
    
    /* Transición suave para que el cambio no sea brusco */
    transition: all 0.3s ease; 
    
    position: absolute; 
    z-index: 999; /* Esto asegura que los botones floten POR ENCIMA de cualquier fondo o cuadro */
}

/* EFECTO HOVER: Lo que pasa al poner el cursor encima */
.boton-interactivo:hover {
    /* Aquí pones la segunda imagen */
    background-image: url('https://nanita22.neocities.org/naranjaclaro.png');
    
    /* Opcional: puedes hacer que el texto cambie de color o suba un poquito */
    color: #FF9C14; 
    transform: scale(1.05); /* Esto hace que el botón se agrande un 5% */
    
}
    
    
    /* Estilo base del botón */
 .boton-interactivo2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Ajusta el ancho y alto según el tamaño de tu imagen */
    width: 162px; 
    height: 177px; 
    
    /* Imagen por defecto */
    background-image: url('https://nanita22.neocities.org/azul.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Estilo del texto que va encima */
    color: #DEE1FF;
    font-family: 'comforta', sans-serif;
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important; /* Quita la línea de link */
    
    /* Transición suave para que el cambio no sea brusco */
    transition: all 0.3s ease; 
    
    position: absolute; 
    z-index: 999; /* Esto asegura que los botones floten POR ENCIMA de cualquier fondo o cuadro */
}

/* EFECTO HOVER: Lo que pasa al poner el cursor encima */
.boton-interactivo2:hover {
    /* Aquí pones la segunda imagen */
    background-image: url('https://nanita22.neocities.org/azulclaro.png');
    
    /* Opcional: puedes hacer que el texto cambie de color o suba un poquito */
    color: #0E22F0; 
    transform: scale(1.05); /* Esto hace que el botón se agrande un 5% */
    
}






 .boton-interactivo3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Ajusta el ancho y alto según el tamaño de tu imagen */
    width: 171px; 
    height: 278px; 
    
    /* Imagen por defecto */
    background-image: url('https://nanita22.neocities.org/rosa.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Estilo del texto que va encima */
    color: #FFF1E5;
    font-family: 'comforta', sans-serif;
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important; /* Quita la línea de link */
    transition: all 0.3s ease;     /* Transición suave para que el cambio no sea brusco */
    
    position: absolute; 
    z-index: 999; /* Esto asegura que los botones floten POR ENCIMA de cualquier fondo o cuadro */
}

/* EFECTO HOVER: Lo que pasa al poner el cursor encima */
.boton-interactivo3:hover {
    /* Aquí pones la segunda imagen */
    background-image: url('https://nanita22.neocities.org/rosaclaro.png');
    color: #FA0A5A; 
    transform: scale(1.05); /* Esto hace que el botón se agrande un 5% */
    
}
    
    
    
    
    
    
    
    
    
    
    
     .boton-interactivo4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    flex-direction: column;  /* Obliga a que el texto se acomode hacia abajo, palabra por palabra */
    text-align: center;      /* Centra el texto de forma interna */
    line-height: 1.2em; 
    
    /* Ajusta el ancho y alto según el tamaño de tu imagen */
    width: 320px; 
    height: 127px; 
    
    /* Imagen por defecto */
    background-image: url('https://nanita22.neocities.org/amarillo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Estilo del texto que va encima */
    color: #FEFFD4;
    font-family: 'comforta', sans-serif;
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important; /* Quita la línea de link */
    transition: all 0.3s ease;     /* Transición suave para que el cambio no sea brusco */
    
    position: absolute; 
    z-index: 999; /* Esto asegura que los botones floten POR ENCIMA de cualquier fondo o cuadro */
}

/* EFECTO HOVER: Lo que pasa al poner el cursor encima */
.boton-interactivo4:hover {
    /* Aquí pones la segunda imagen */
    background-image: url('https://nanita22.neocities.org/amarilloclaro.png');
    color: #F7BD00; 
    transform: scale(1.05); /* Esto hace que el botón se agrande un 5% */
    
}
    
    
    
    
    
    /* 🌟 Esto le aplicará el fondo SOLO al texto que está dentro del span */
.boton-interactivo span {
    background-color: rgba(255, 229, 82, 0.4); /* Amarillo bonito con 70% de opacidad */
    padding: 4px 2px;                          /* Espacio acolchonado alrededor de las letras */
    border-radius: 11px;                         /* Bordes redonditos estéticos */
    display: inline-block;    
    max-width: 84%;              /* Evita que el padding deforme el tamaño */
    box-sizing: border-box;      /* Hace que respete el padding correctamente */
                           
}

.boton-interactivo:hover span {
    background-color: rgba(255, 255, 255, 0.4); /* 🎨 Cambia el cuadro a un azul clarito (o el color que quieras) */
    transition: all 0.3s ease;                  /* Hace que el cambio de color sea suavecito */
}











/* 🌟 Esto le aplicará el fondo SOLO al texto que está dentro del span */
.boton-interactivo2 span {
    background-color: rgba(27, 0, 230, 0.4); /* Amarillo bonito con 70% de opacidad */
    padding: 4px 2px;                          /* Espacio acolchonado alrededor de las letras */
    border-radius: 8px;                         /* Bordes redonditos estéticos */
    display: inline-block;                      /* Hace que respete el padding correctamente */
    max-width: 84%;              /* Evita que el padding deforme el tamaño */
    box-sizing: border-box;      /* Hace que respete el padding correctamente */
}
.boton-interactivo2:hover span {
    background-color: rgba(255, 255, 255, 0.4); /* 🎨 Cambia el cuadro a un azul clarito (o el color que quieras) */
    transition: all 0.3s ease;                  /* Hace que el cambio de color sea suavecito */
}








/* 🌟 Esto le aplicará el fondo SOLO al texto que está dentro del span */
.boton-interactivo3 span {
    background-color: rgba(230, 0, 69, 0.4); /* Amarillo bonito con 70% de opacidad */
    padding: 6px 12px;                          /* Espacio acolchonado alrededor de las letras */
    border-radius: 8px;                         /* Bordes redonditos estéticos */
    display: inline-block;                      /* Hace que respete el padding correctamente */
     max-width: 84%;              /* Evita que el padding deforme el tamaño */
    box-sizing: border-box;      /* Hace que respete el padding correctamente */
}
.boton-interactivo3:hover span {
    background-color: rgba(255, 255, 255, 0.4); /* 🎨 Cambia el cuadro a un azul clarito (o el color que quieras) */
    transition: all 0.3s ease;                  /* Hace que el cambio de color sea suavecito */
}











/* 🌟 Esto le aplicará el fondo SOLO al texto que está dentro del span */
.boton-interactivo4 span {
    background-color: rgba(33, 40, 46, 0.4); /* Amarillo bonito con 70% de opacidad */
    padding: 6px 12px;                          /* Espacio acolchonado alrededor de las letras */
    border-radius: 8px;                         /* Bordes redonditos estéticos */
    display: inline-block;                      /* Hace que respete el padding correctamente */
     max-width: 84%;              /* Evita que el padding deforme el tamaño */
    box-sizing: border-box;      /* Hace que respete el padding correctamente */
}
.boton-interactivo4:hover span {
    background-color: rgba(255, 255, 255, 0.4); /* 🎨 Cambia el cuadro a un azul clarito (o el color que quieras) */
    transition: all 0.3s ease;                  /* Hace que el cambio de color sea suavecito */
}





.pagedollTS {
    position: absolute;  /* 🌟 Esto hace que flote sobre todo lo demás */
    z-index: 9999;       /* 🚀 El número más alto para que NADA la tape */
    
    /* 📍 Ajusta estos números para moverla a tu antojo: */
    top: 84px;          /* Qué tan lejos está del borde de ARRIBA */
    left: 1089px;         /* Qué tan lejos está del borde de la IZQUIERDA */
    
    /* 📐 Controla el tamaño para que no tape toda la pantalla */
    width: 360px;        
    height: auto;
  
}

.pagedollTS:hover {
  transform: rotateY(360deg);
  transition: 2s;
  
}