/* fuentes */
@font-face {
    font-family: 'FUENTE1'; 
    src: url('ChalkDash.otf') format('truetype'); /* 🌟 Cambiado a truetype para asegurar compatibilidad */
}

@font-face {
    font-family: 'dreamer'; 
    src: url('DreamerTM-Regular.ttf'); /* 🌟 Cambiado a truetype para asegurar compatibilidad */
}

 @font-face {
    font-family: 'kaoly'; 
    src: url('Kaoly Demo-Regular.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'); 
 }
 
 
 @font-face {
    font-family: 'bootzy'; 
    src: url('BootzyTM.woff'); 
 }
 



/* these are the main colors and header image
   replace them with anything you want! */
:root {
    --header-bg: url('https://nanita22.neocities.org/drop/fears%20%E2%80%94%20nata%20metlukh.gif');
    --accent-color: #FFFFFF;
    --link-color: #1C1113;
    --button-color: #BAAA9C;
    --bg-color: #CEFF61;
    --bg-color2: #FF176A;
    --text-color: #2750E8;
    --favorite-color: #1C1113;
}
/* you can get hex codes from sites like this:
   https://palettes.shecodes.io/
   i just looked up "css color templates" to find that link! */

/* this applies to all the content */

/* this is for when you select text on the page */
::selection {
    background-color: #BD1546 !important;
    color: #E4FFC2 !important;
}

body {
    
    background-color: #F7FCED;
    margin: 0;
    font-family: arial; /* 🌾 Al ponerlo aquí, servirá de base pero NO romperá tus fuentes especiales */
}
/* i think having better line spacing helps text to be more readable, but you can remove it if you want */
p {line-height: 1em;}

header {
/* you can add the image url in :root (at the top) if you want */
    background: var(--header-bg);
    background-size: 100%;
    background-position: center;
/* change the minimum height if you want it to take up more/less space */
    max-width: 1000px;
    min-height: 220px;
    margin: 0 auto;
    padding: 0 1em;
/* i have a default border-radius set, but i didn't want rounded corners on this element */
    border-radius: 1em;
    box-shadow: #615C44 8px 8px 20px;
}

/* this is your site title displayed at the top of the page */
header h1 {
    font-family: 'FUENTE1', sans-serif !important;
    font-size: 42px; /* ¡Ahora sí, gigante! */
    color: #FFFFFF; /* Letra blanca para que resalte */
    text-shadow: 3px 3px 0px #264780;
    letter-spacing: 2px;
    text-align: center;
    padding: .5em;
    margin: 0 auto;
    max-width: 900px;
}

header p {
    font-family: 'arial', sans-serif !important;
    text-align: center;           /* 🎯 Lo centra debajo del título */
    color: #FFFFFF;               /* 🎨 Letra blanca/celeste para que resalte en tu imagen de fondo */
    font-size: 20px;              /* 📐 Un tamaño legible */
    font-weight: bold;
    text-shadow: 3px 3px 0px #264780; /* 🌟 Sombra para que combine con el título y no se pierda */
    margin-top: -10px;            /* Lo acerca un poquito más al título grande */
}


nav {
    /*padding: 1em;*/
    margin-top: 2em;
    font-weight: bold;
}

nav > ul {
    max-width: 960px;
    margin: auto;
    line-height: 3rem;
/* this stuff makes it wrap around on mobile */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
/* this line takes away the dot in front of the list items */
    list-style-type: none;
/* list items have default padding but we don't need it for these */
    padding-left: 0;
/* and this spaces out the buttons so they're not touching */
    justify-content: space-evenly;
}
nav li {
    text-align: center;
}
nav li > a {
    background-color: var(--button-color);
    padding: .5em 3em;
    box-shadow: var(--bg-color2) 0 0 6px;
/* this takes away the link underline */
    text-decoration: none;
}
nav li > a:visited {
    color: var(--link-color);
}
nav li > a:hover {
    background-color: var(--favorite-color);
    box-shadow: var(--bg-color) 0 0 6px;
    color: var(--text-color);
}

a {
    color: var(--link-color);
    border-radius: .5em;
    text-shadow: var(--bg-color) 1px 1px 2px;
    font-weight: bold;
    transition: color 400ms ease-out, background-color 400ms ease-out, box-shadow 400ms ease-out;
}
a:visited {
    color: var(--text-color);
}
a:hover {
    color: var(--link-color);
}

/* you can change this to anything you want :) */
ul { list-style-type: "❤︎ "; }

#sidebar {
    background-image: url('https://nanita22.neocities.org/drop/Dise%C3%B1o%20sin%20t%C3%ADtulo.png'); /* 🖼️ Tu imagen aquí */
    background-repeat: no-repeat;                 /* 🚫 ¡No más bloques repetidos! */
    background-size: cover;                        /* 📐 Estira la imagen para que llene todo el cuadro */
    background-position: center;                   /* 🎯 La centra para que no se corte feo */
    min-width: 89px;
    padding: 1em 9px;
    border: 2px outset #E64C09;
    box-shadow: var(--button-color) 4px 4px 7px;
    border-radius: 2em;
    /* 🛸 MODO FLOTANTE ABSOLUTO */
    position: absolute;
    top: 15px;   /* Mueve este número para definir qué tan abajo del techo estará */
    left: 110px;   /* Mueve este número para definir qué tan pegada a la izquierda estará */
}

#avatar {
    margin: .5em auto;
/* image size is 160px so i made its container a little bigger to fit the borders */
    max-width: 164px;
    max-height: 164px;
    border-radius: 0!important;
}
#avatar img {
    background: #E8E8D5;
    border: 2px #E8E8D5;
    max-width: 180px;
    border-radius: 150px !important; /* 🔲 Cuadrado con esquinas suaves */
    
}

.bio-grupal {
    margin: 2em 1em;
    background: #E9F7F7;
    border: 1px solid var(--button-color);
    border-radius: 1em;
    margin-top: 8px;
}
#bio p { margin: 1em; }

#content {
    position: relative;   /* ⚓ Esta será la única ANCLA de toda la página */
    max-width: 1700px;    /* El ancho total de tu zona de trabajo */
    height: 800px;        /* 📐 Dale una altura fija para que no se encime con el footer */
    margin: 0 auto;       /* Centra todo el bloque en la pantalla */

}

main {
    background-color: transparent;
    padding: 1em 2em;
    margin: 1em;
    border: none;
    box-shadow: none;
    flex-grow: 1;
    
}

main > h1,
main > h2,
main > h3 {
    background-color: var(--favorite-color);
    border-radius: .4em;
    padding: .2em .5em;
}

/* a class for centering text and images */
.center { text-align: center; }
/* made this a class so i can change it to be centered on mobile */
.img-right { float: right; }

footer {
    text-align: center;
    font-size: small;
    margin: 1em auto;
    max-width: 200px;
}






















.menu22 {
    font-family: 'okine', sans-serif; /* 🔤 Aquí usas tu fuente cargada */
    font-size: 34px;                    /* 📐 Tamaño para texto de lectura */
    color: #FF8D0A!important;                     /* 🎨 El color de tu paleta */
    text-align: center;
    
    /* 📍 El truco para congelarlo donde tú quieras: */
    position: absolute;
    top: 13px;                         /* Qué tan abajo va a estar del tope de la página */
    left: 727px;                         /* Qué tan separado de la izquierda */
    z-index: 10;                        /* Para que no se quede guardado detrás de los fondos */
    background-color: rgba(49, 115, 232, 0.2)!important; /* 🎨 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 */
}







.textoequis {
  font-family: 'rainyhearts', sans-serif; /* Tu fuente de píxeles */
    font-size: 40px;
    color: #3E78ED !important;             /* Tu color naranja interactivo */
    text-align: center;
    
    /* 📌 POSICIÓN: Lo movemos para que no se esconda */
    position: absolute;
    top: 455px;        /* 🔽 Lo subí un poco (de 280px a 180px) para sacarlo del escondite */
    left: 600px;       /* ↔️ Lo moví un poquito a la izquierda para centrarlo con tus botones */
    
    /* 🛡️ CAPA MÁXIMA: Esto obliga a que flote POR ENCIMA de cualquier fondo o botón */
    z-index: 1000 !important; 
    
    /* 🎨 FONDO SÓLIDO: Cambié el 0.2 por 0.85 para que la caja azul SÍ se vea clara y bonita */
    
    
}


/* 👑 Título superior de la Sidebar */
.titulo-sidebar {
    font-family: 'rainyhearts', sans-serif; /* Puedes usar 'kaoly', 'okine' o la que prefieras */
    font-size: 24px !important;            /* Tamaño llamativo pero que quepa bien */
    color: #FFFFFF;              /* Usa el color de tus links para que combine */
    text-align: center;                    /* Bien centradito */
    margin-bottom: 18px !important;        /* ↕️ Empuja las fotos hacia abajo para que no se amontonen */
    
    text-transform: uppercase;             /* Hace que se ponga en mayúsculas automáticamente */
    letter-spacing: 1px;                   /* Separa un poquito las letras */
}








/* 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!important;
    font-family: 'comforta', sans-serif!important;
    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!important; 
    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!important;
    font-family: 'comforta', sans-serif!important;
    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!important; 
    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!important;
    font-family: 'comforta', sans-serif!important;
    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!important; 
    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!important;
    font-family: 'comforta', sans-serif!important;
    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!important; 
    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)!important; /* 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)!important; /* 🎨 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)!important; /* 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)!important; /* 🎨 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)!important; /* 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)!important; /* 🎨 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)!important; /* 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)!important; /* 🎨 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: 230px;          /* Qué tan lejos está del borde de ARRIBA */
    left: 1108px;         /* Qué tan lejos está del borde de la IZQUIERDA */
    
    /* 📐 Controla el tamaño para que no tape toda la pantalla */
    width: 360px;        
    height: auto;
    transition: 2s;
}

.pagedollTS:hover {
  transform: rotateY(360deg);
  
  
}
  
  
  .menu-botones a {
    text-shadow: none !important; /* 🚫 Desactiva por completo la sombra verde en los botones */
}
  
  









/* 👥 Contenedor individual de cada persona */
.miembro-equipo {
    margin-bottom: 30px;       /* ↕️ Separa a cada integrante del siguiente para que no se encimen */
    text-align: center;
}

/* 🖼️ Estilos para los 3 avatares (manteniendo el look que elegiste) */
.avatar-grupal img {
    width:110px;               /* Ajustamos un poquito el tamaño para que quepan bien los 3 */
    height: 110px;
    border-radius: 12px !important; /* 🔲 Tus esquinas suaves de ayer */
    object-fit: cover;
    border: 2px dotted #FFF4BF; /* Un lindo borde alrededor de la foto */
}

/* 📝 Estilos para los textos de las bios */
.bio-grupal p {
    font-size: 13px;           /* Letra un poquito más compacta para el grupo */
    line-height: 1.3em;
    margin: 5px 0;
    padding: 10px 18px;
    display: inline-block;
}

/* 🌟 Destacar el nombre de cada quien */
.nombre-miembro {
    font-family: 'comforta'!important;
    font-weight: bold;
    color: #FF4800;  /* Usa el color claro de tus links */
    font-size: 15px !important;
    margin: 0 !important;                        /* 🪓 Corta cualquier separación rara del navegador */
    line-height: 1;
   
}




.goodboy {
    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: 835px;          /* Qué tan lejos está del borde de ARRIBA */
    left: 605px;         /* Qué tan lejos está del borde de la IZQUIERDA */
    
    /* 📐 Controla el tamaño para que no tape toda la pantalla */
    width: 400px;        
    height: auto;
   transition: 2s;
}

.goodboy:hover {
  transform: scaleX(1.5);
 
  
}











footer {
    margin-top: -45px !important; /* 🚀 Jala el footer hacia arriba exactamente 15px */
}