/*Margen inferior para cada seccion */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    overflow-x: hidden; /* Evita el scroll horizontal */
}

body {
    overflow-y: auto; /* Habilitar scroll vertical en la página */
}

.responsive-box {
    z-index: 1;
    position: relative;
    margin: 10px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8); /* Fondo blanco semi-transparente y desenfocado */
    backdrop-filter: blur(2px); /* Efecto de desenfoque */
    border: 2px solid rgba(0, 0, 255, 0.1); /* Borde transparente con color azul */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    overflow: visible;  /* Permitir que el contenido crezca fuera del recuadro */
    height: auto; /* Dejar que el tamaño se ajuste al contenido */
    text-align: center;
   
}


/********* botones de confirmar asistencia y mapas*********/
.btnValidar {
    width: 80%;
    padding: 10px 10px;
    margin-top: 10px;
    font-size: 16px;
    background: #a9bdce;
    border: 2px solid #00bcd4;
    border-radius: 5px;
    cursor: pointer;

    font-family: 'toystoryFont', sans-serif;
    color: #000000;
}

.btnValidar:hover {
    background: #41a7e5;
}

form {
    padding: 15px 10px;
    border: 2px solid rgba(0, 0, 255, 0.1); /* Borde transparente con color azul */
    border-radius: 10px; /* Bordes redondeados */
    margin-bottom: 50px;
}

/* Estilo para los campos de entrada */
input[type="text"] {
    width: 66%;
    padding: 2vw;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}

input[type="text"]:focus{
    border-color: #007bff;
    outline: none;
}

select {
    width: 53%;
    padding: 2vw;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}

@font-face {
  font-family: 'toystoryFont';
  src: url('../fuentes/toy-story.ttf') format('truetype');
}

.titulo {
    display: block;
    margin-bottom: 10px;
    font-family: 'toystoryFont', sans-serif;
    font-size: 10vw;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #0c4b91;
    color: #427dab;   
}

.subTitulo {
    position: relative;
    margin-right: 5px;
    font-family: 'toystoryFont', sans-serif;
    font-size: 5vw;
    text-shadow: 2px 3px 3px #000000;
    -webkit-text-stroke: 1px #0c4b91;
    color: #f3a869;   
    text-align: left; 
}



/*****************************FUENTES PARA MUESTRAS****/
@font-face {
  font-family: 'muestraFont';
  src: url('../fuentes/muestra.ttf') format('truetype');
}

.muestras {
    display: block;
    font-family: 'muestraFont', sans-serif;
    font-size: 12vw;
    margin-bottom: 10px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #f0efe4;
    color: #000000;
}

@font-face {
  font-family: 'blueyFont';
  src: url('../fuentes/Super-Cottage.ttf') format('truetype');
}

.bluey {
    display: block;
    font-family: 'blueyFont', sans-serif;
    font-size: 11vw;
    margin-bottom: 10px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #000000;
    color: #2596be;
    cursor: pointer;
}

@font-face {
  font-family: 'spiderman';
  src: url('../fuentes/Spider-Man.ttf') format('truetype');
}

.spiderman {
    display: block;
    font-family: 'spiderman', sans-serif;
    font-size: 9vw;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #ffffff;
    color: #e03036;
    cursor: pointer;
}

@font-face {
  font-family: 'carsFont';
  src: url('../fuentes/Super-Cartoon.ttf') format('truetype');
}

.cars {
    display: block;
    font-family: 'carsFont', sans-serif;
    font-size: 12vw;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #000000;
    color: #cb2c2c;
}

@font-face {
  font-family: 'pepaFont';
  src: url('../fuentes/Peppa-Pig.ttf') format('truetype');
}

.pepa {
    display: block;
    font-family: 'pepaFont', sans-serif;
    font-size: 12vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px #5f96d9;
    color: #ffaadd;
}

@font-face {
  font-family: 'barbieFont';
  src: url('../fuentes/Barbie.otf') format('truetype');
}

.barbie {
    display: block;
    font-family: 'barbieFont', sans-serif;
    font-size: 14vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px #e01782;
    color: #ffffff;

}

@font-face {
  font-family: 'bobEsponjaFont';
  src: url('../fuentes/bob-esponja.ttf') format('truetype');
}

.bobesponja {
    display: block;
    font-family: 'bobEsponjaFont', sans-serif;
    font-size: 8vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    color: #ffff00;
}

@font-face {
  font-family: 'mickeyFont';
  src: url('../fuentes/mickey-mouse.ttf') format('truetype');
}

.mickeymouse {
    display: block;
    font-family: 'mickeyFont', sans-serif;
    font-size: 8vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #f0efe4;
    color: #d22826;
}

@font-face {
  font-family: 'mickeyFont';
  src: url('../fuentes/mickey-mouse.ttf') format('truetype');
}

@font-face {
  font-family: 'helloKittyFont';
  src: url('../fuentes/hello-kitty.ttf') format('truetype');
}

.hellokitty {
    display: block;
    font-family: 'helloKittyFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px #e01782;
    -webkit-text-stroke: 1px #ffffff;
    color: #fba2cc;

}

@font-face {
  font-family: 'toystoryFont';
  src: url('../fuentes/toy-story.ttf') format('truetype');
}

.toystory {
    display: block;
    font-family: 'toystoryFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #0c4b91;
    color: #ffed03;
}

@font-face {
  font-family: 'pawpatrolFont';
  src: url('../fuentes/paw-patrol.ttf') format('truetype');
}

.pawpatrol {
    display: block;
    font-family: 'pawpatrolFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px #000000;
    -webkit-text-stroke: 1px #fddc02;
    color: #205f99;
}

@font-face {
  font-family: 'plimplimFont';
  src: url('../fuentes/Super-Cottage.ttf') format('truetype');
}

.plimplim {
    display: block;
    font-family: 'plimplimFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #ffffff;
    color: #1886f0;
}

@font-face {
  font-family: 'minionsFont';
  src: url('../fuentes/minions.ttf') format('truetype');
}

.minions {
    display: block;
    font-family: 'minionsFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #000000;
    color: #ffcc01;
}

@font-face {
  font-family: 'robloxFont';
  src: url('../fuentes/roblox.ttf') format('truetype');
}

.roblox {
    display: block;
    font-family: 'robloxFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #ffffff;
    color: #000000;
}

@font-face {
  font-family: 'stitchFont';
  src: url('../fuentes/stitch.ttf') format('truetype');
}

.stitch {
    display: block;
    font-family: 'stitchFont', sans-serif;
    font-size: 12vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    color: #e03036;
}

@font-face {
  font-family: 'mashaFont';
  src: url('../fuentes/mickey-mouse.ttf') format('truetype');
}

.masha {
    display: block;
    font-family: 'mashaFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
   
    -webkit-text-stroke: 1px #ffffff;
    background-image: linear-gradient(90deg, #df0936, #bb7d19, #c548d4); /* Degradado de colores */
    -webkit-background-clip: text; /* Aplica el fondo solo al texto */
    color: transparent; /* El color del texto es transparente para mostrar el degradado */
}

@font-face {
  font-family: 'moanaFont';
  src: url('../fuentes/moana.ttf') format('truetype');
}

.moana {
    display: block;
    font-family: 'moanaFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px #000000;
    color: #0393d2;
}

@font-face {
  font-family: 'beliybetoFont';
  src: url('../fuentes/beliybeto.ttf') format('truetype');
}

.beliybeto {
    display: block;
    font-family: 'beliybetoFont', sans-serif;
    font-size: 18vw;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px #000000;
    -webkit-text-stroke: 1px #ff5b00;
    color: #ffffff;
}

@font-face {
  font-family: 'kuromiFont';
  src: url('../fuentes/kuromi.ttf') format('truetype');
}

.kuromi {
    display: block;
    font-family: 'kuromiFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px #000000;
    -webkit-text-stroke: 1px #a340a6;
    color: #fde8a7;
}

@font-face {
  font-family: 'princesasFont';
  src: url('../fuentes/princesas.otf') format('truetype');
}

.princesas {
    display: block;
    font-family: 'princesasFont', sans-serif;
    font-size: 12vw;
    margin-bottom: 10px;
    text-shadow: 1px 3px 3px #000000;
    -webkit-text-stroke: 1px #ffffff;
    color: #81aae9;
}

@font-face {
  font-family: 'pampinFont';
  src: url('../fuentes/lulipampin.ttf') format('truetype');
}

.lulipampin {
    display: block;
    font-family: 'pampinFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px #000000;
    -webkit-text-stroke: 1px #ffffff;
    color: #e2469f;

}

@font-face {
  font-family: 'marioFont';
  src: url('../fuentes/super-mario.ttf') format('truetype');
}

.mario {
    display: block;
    margin: 10px;
    padding: 10px 15px;
    font-family: 'marioFont', sans-serif;
    font-size: 9vw;
    margin-bottom: 10px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.6);
    -webkit-text-stroke: 1px #ffffff;
    color: #d22826;
}

/* Colores estilo Super Mario Bros */
.mario span:nth-child(6n+1) { color: #009cd9; }
.mario span:nth-child(6n+2) { color: #fccf00; }
.mario span:nth-child(6n+3) { color: #e62311; }
.mario span:nth-child(6n+4) { color: #43b034; }
.mario span:nth-child(6n+5) { color: #fad000; }
.mario span:nth-child(6n+6) { color: #e32411; }

@font-face {
  font-family: 'sonicFont';
  src: url('../fuentes/NiseSegaSonic.ttf') format('truetype');
}

.sonic {
    display: block;
    margin: 10px;
    padding: 10px 15px;
    font-family: 'sonicFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px #000000;
    -webkit-text-stroke: 2px #24428c;
    color: #fccb0f;
}

@font-face {
  font-family: 'zenonFont';
  src: url('../fuentes/zenon1.ttf') format('truetype');
}

.zenon {
    display: block;
    margin: 10px;
    padding: 10px 15px;
    font-family: 'zenonFont', sans-serif;
    font-size: 10vw;
    margin-bottom: 10px;
    text-shadow: 2px 2px 3px #000000;
    -webkit-text-stroke: 1px #ffffff;
    color: #ff6500;
}

@font-face {
  font-family: 'labubuFont';
  src: url('../fuentes/labubu.ttf') format('truetype');
}

.labubu {
    display: block;
    margin: 10px;
    padding: 10px 15px;
    font-size: 12vw;
    margin-bottom: 30px;
    letter-spacing: 5px; 
    font-family: 'labubuFont', sans-serif;

    font-weight: bold;
    background: linear-gradient(90deg, #ff4ecd, #ffdd00, #00f5a0, #00c3ff, #d500f9, #ff4ecd);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glowGradient 4s ease infinite;
    -webkit-text-stroke: 1px #000000;
    
}

@keyframes glowGradient {
    0% {
    background-position: 0% 50%;
    }
    50% {
    background-position: 100% 50%;
    }
    100% {
    background-position: 0% 50%;
    }
}