*{
box-sizing:border-box;
}

html, body{
margin:0;
width:100%;
height:100%;
font-family:Avenir, sans-serif;

background-image:url("23.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;

overflow:hidden;
}

/* CONTENEDOR GENERAL */

#stage{
position:relative;
width:100vw;
height:100vh;
}

/* FRASES QUE APARECEN */

#frasesLayer{
position:absolute;
inset:0;
width:100%;
height:100%;
}

.frase{
position:absolute;
max-width:28vw;
font-size:18px;
color:white;
white-space:normal;
word-break:break-word;
opacity:0.95;
pointer-events:none;
text-shadow:0 2px 6px rgba(0,0,0,0.7);
}

.fecha{
display:block;
margin-top:3px;
font-size:11px;
opacity:0.72;
}

/* CONTENEDOR CENTRAL */

#inputWrapper{
position:absolute;
left:50%;
top:46%;
transform:translate(-50%,-50%);
z-index:10;
text-align:center;
}

/* TITULO */

h1{
margin:0 0 18px 0;
font-size:46px;
font-weight:700;
color:white;
text-shadow:0 3px 10px rgba(0,0,0,0.6);
}

/* INPUT + BOTON */

.controls{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
}

/* INPUT */

#inputFrase{
width:420px;
max-width:60vw;
height:60px;
font-size:26px;
padding:10px 15px;

background:white;
border:none;
border-radius:8px;

box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* BOTON */

#btnEnviar{
height:60px;
padding:0 25px;
font-size:22px;
border:none;
border-radius:8px;

background:#ffffff;
cursor:pointer;

box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

#btnEnviar:hover{
background:#f2f2f2;
}

#mensajeEstado{
margin-top:10px;
font-size:14px;
min-height:20px;
color:white;
}

/* VERSION CELULAR */

@media (max-width:600px){

h1{
font-size:28px;
}

.controls{
flex-direction:column;
gap:10px;
}

#inputFrase{
width:240px;
height:45px;
font-size:16px;
}

#btnEnviar{
width:240px;
height:45px;
font-size:16px;
}


  .frase{
    max-width:52vw;
    font-size:14px;
  }

  .fecha{
    font-size:10px;
  }

}