/* Fuente */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

body{

    font-family:'Poppins', sans-serif;
    background:#FAFAF8;
    color:#30343A;

}

.contenedor{

    width:100%;
    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px 20px;

}

.tarjeta{

    width:100%;
    max-width:460px;

    text-align:center;

}

.logo{

    width:180px;
    max-width: 75%;
    display:block;
    
    margin:0 auto 30px auto;
}

h1{
    font-size:20px;
    font-weight:400;
    color:#30343A;
    margin-bottom:8px;
}

h2{

    font-size:34px;

    font-weight:700;

    color:#81B0AA;

    line-height:1.2;

    margin-bottom:18px;

}

h3{
    font-size:18px;
    font-weight:500;
    color:#666;
    margin-bottom:35px;
}

.descripcion{

    margin-top:24px;

    line-height:1.8;

    font-size:18px;

    color:#555;

    max-width:520px;

    margin-left:auto;

    margin-right:auto;

}

.boton{

    display:block;

    margin-top:45px;

    padding:20px;

    background:#81B0AA;

    color:white;

    text-decoration:none;

    border-radius:14px;

    font-size:22px;

    font-weight:600;

    cursor:pointer;
    
    width:100%;

    box-shadow:0 8px 20px rgba(129,176,170,.25);
  
    transition:
        background .25s,
        transform .15s,
        box-shadow .25s;

}

.boton:hover{

    background:#6F9F99;

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(129,176,170,.35);

}

.boton:active{

    transform:scale(.98);

}

.boton:focus{

    outline:none;

}

.texto-inferior{

    margin-top:35px;

    font-size:15px;

    color:#777;

    line-height:1.8;

}

.seguridad{

    margin-top:40px;

    font-size:14px;

    color:#8b8b8b;

    line-height:1.8;

}

.footer{

    margin-top:35px;

    text-align:center;

    font-size:13px;

    color:#999;

}

/* Animación de entrada */

@keyframes aparecer {

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.tarjeta{

    animation:aparecer .6s ease-out;

}

/* Barra de progreso */

.progreso{

    width:100%;

    height:8px;

    background:#E8EEED;

    border-radius:50px;

    overflow:hidden;

    margin:10px auto 10px auto;

}

.progreso-barra{

    width:25%;

    height:100%;

    background:#81B0AA;

    border-radius:50px;

}

.progreso-texto{

    font-size:14px;

    color:#777;

    margin-bottom:30px;

}

.boton-secundario{

    display:block;

    width:100%;

    margin-top:18px;

    padding:18px;

    text-decoration:none;

    text-align:center;

    border:2px solid #81B0AA;

    color:#81B0AA;

    border-radius:14px;

    font-size:18px;

    font-weight:600;

    transition:.25s;

    box-sizing:border-box;

}

.boton-secundario:hover{

    background:#81B0AA;

    color:white;

}

.menu{

    margin-top:40px;

}

.tarjeta-menu{

    display:flex;

    align-items:center;

    gap:20px;

    text-decoration:none;

    background:white;

    border:1px solid #E5E5E5;

    border-radius:18px;

    padding:22px;

    margin-bottom:18px;

    color:#333;

    transition:.25s;

    min-height: 110px;

}

.tarjeta-menu:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.tarjeta-menu:hover .menu-flecha{

    transform:translateX(6px);

}

.menu-icono{

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.menu-icono svg{

    width:30px;

    height:30px;

    stroke:#81B0AA;

    stroke-width:2.2;

    color:#81B0AA;

}

.menu-contenido{

    flex:1;

}

.menu-titulo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:8px;

}

.menu-flecha{

    font-size:22px;

    color:#81B0AA;

    font-weight:700;

    transition:.25s;

}

.tarjeta-menu h3{

    margin:0;

    margin-bottom:6px;

    color:#81B0AA;

    font-size:22px;

}

.tarjeta-menu p{

    margin:0;

    color:#666;

    line-height:1.5;

    font-size:16px;

}

.saludo{

    font-size:24px;

    font-weight:600;

    color:#444;

    letter-spacing:0.5px;

    margin-bottom:12px;

}

.wifi-saludo{
    color:#81B0AA;
}

.saludo svg{
    width:28px;
    height:28px;
    color:#81B0AA;
    stroke:#81B0AA;
    stroke-width:2.2;
    vertical-align:middle;
}

.wifi-card{

    margin-top:35px;

    padding:25px;

    border-radius:20px;

    background:#F6F8F8;

}

.wifi-card h2{

    color:#81B0AA;

    margin-bottom:8px;

}

.wifi-card p{

    font-size:20px;

    font-weight:600;

    margin-bottom:25px;

    word-break:break-word;

}

.dato{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-bottom:30px;

    flex-wrap:wrap;

}

.dato span{

    font-size:20px;

    font-weight:600;

    word-break:break-word;

}

.copiar{

    background:#81B0AA;

    color:white;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    font-size:15px;

    transition:.25s;

}

.copiar:hover{

    background:#6d9d97;

}

.mensaje-copiado{

    margin-top:20px;

    text-align:center;

    color:#81B0AA;

    font-weight:600;

    min-height:25px;

}

/* ========================= */
/* WIFI */
/* ========================= */

.wifi-card{

    background:white;

    border:1px solid #E5E5E5;

    border-radius:20px;

    padding:30px;

    margin-top:40px;

}

.wifi-card h3{

    color:#81B0AA;

    font-size:20px;

    margin-bottom:18px;

}

.wifi-dato{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 20px;

    background:#F8F8F8;

    border-radius:14px;

    margin-bottom:28px;

}

.wifi-dato span{

    font-size:20px;

    font-weight:600;

    color:#333;

}

.wifi-dato button{

    background:#81B0AA;

    color:white;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    transition:.25s;

}

.wifi-dato button:hover{

    background:#6D9B96;

}

.boton-principal{

    width:100%;

    margin-top:10px;

    background:#81B0AA;

    color:white;

    border:none;

    border-radius:14px;

    padding:18px;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

}

.boton-principal:hover{

    background:#6D9B96;

}

.volver-menu{

    display:inline-block;

    margin-top:35px;

    text-decoration:none;

    color:#81B0AA;

    font-weight:600;

}

/* =============================== */
/* BOTÓN ÁREA DE HUÉSPEDES */
/* =============================== */

.boton-huespedes {

    display: block;

    margin-top: 15px;

    background: transparent;

    color: #81B0AA;

    border: 1.5px solid #81B0AA;

    text-decoration: none;

    transition: all 0.25s ease;

}

.boton-huespedes:hover {

    background: #81B0AA;

    color: white;

    transform: translateY(-1px);

}

/* =============================== */
/* BOTONES DE ACCESO */
/* =============================== */

.boton {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}

.boton svg {

    width: 22px;

    height: 22px;

    stroke-width: 2.2;

    flex-shrink: 0;

}

.boton-huespedes {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 15px;

    background: transparent;

    color: #81B0AA;

    border: 1.5px solid #81B0AA;

    text-decoration: none;

    transition: all .25s ease;

}

.boton-huespedes:hover {

    background: #81B0AA;

    color: white;

    transform: translateY(-1px);

}

/* ========================================
   BOTONES DE WIFI
   ======================================== */

.wifi-card button {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    background: #81B0AA;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.wifi-card button:hover {
    background: #6D9B96;
    transform: translateY(-1px);
}


/* Botón copiar contraseña */

.wifi-card #copiar-password {
    width: 100%;
    margin-top: 0;
}