/*==================================================
RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;

}

/*==================================================
BODY
==================================================*/

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
    135deg,
    #03132c,
    #062b63,
    #0a4aa1,
    #02101f);

    background-size:cover;

    overflow-x:hidden;

    padding:30px;

}

/*==================================================
BOTON REGRESAR
==================================================*/

.boton-regresar{

    position:fixed;

    top:20px;

    left:20px;

    z-index:999;

    text-decoration:none;

    color:white;

    background:

    linear-gradient(
    90deg,
    #005eff,
    #00b7ff);

    padding:12px 25px;

    border-radius:12px;

    font-weight:bold;

    box-shadow:

    0 0 10px #00aaff,
    0 0 25px #0077ff;

    transition:.3s;

}

.boton-regresar:hover{

    transform:scale(1.08);

    box-shadow:

    0 0 20px white,
    0 0 35px #00aaff,
    0 0 50px #0066ff;

}

/*==================================================
PANEL PRINCIPAL
==================================================*/

.panel{

    width:900px;

    max-width:95%;

    padding:40px;

    border-radius:25px;

    background:

    rgba(0,20,60,.55);

    backdrop-filter:blur(10px);

    border:

    2px solid rgba(0,180,255,.4);

    box-shadow:

    0 0 20px rgba(0,150,255,.4),
    0 0 50px rgba(0,80,255,.2);

}

/*==================================================
ENCABEZADO
==================================================*/

.panel h1{

    color:white;

    font-size:40px;

    text-shadow:

    0 0 10px #00bfff,
    0 0 25px #0077ff;

}

.panel h3{

    color:#9ddcff;

    margin-top:10px;

    margin-bottom:30px;

}

/*==================================================
LOGO + TITULO
==================================================*/

.logo-titulo{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

}

.logo-titulo img{

    width:90px;

    height:90px;

    object-fit:contain;

}

/*==================================================
RADIOS
==================================================*/

.tipos{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:25px;

}

.tipos label{

    color:white;

    font-weight:bold;

    cursor:pointer;

}

.tipos input{

    margin-right:5px;

}

/*==================================================
CAJA COMENTARIOS
==================================================*/

textarea{

    width:100%;

    height:220px;

    resize:none;

    border-radius:15px;

    padding:18px;

    font-size:17px;

    background:#ececec;

    color:#111;

    border:3px solid #b8b8b8;

    outline:none;

    transition:.3s;

}

textarea:focus{

    border-color:#00b7ff;

    box-shadow:

    0 0 10px #00b7ff;

}

/*==================================================
BOTON ENVIAR
==================================================*/

#enviar{

    margin-top:25px;

    width:100%;

    padding:18px;

    border:none;

    border-radius:15px;

    cursor:pointer;

    color:white;

    font-size:18px;

    font-weight:bold;

    background:

    linear-gradient(
    90deg,
    #b30000,
    #ff2f2f);

    box-shadow:

    0 0 10px red,
    0 0 25px #ff4d4d;

    transition:.3s;

}

#enviar:hover{

    transform:scale(1.02);

    box-shadow:

    0 0 20px white,
    0 0 35px red,
    0 0 50px #ff3b3b;

}

/*==================================================
POPUP
==================================================*/

.popup{

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.75);

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.popup-contenido{

    width:500px;

    max-width:92%;

    background:

    linear-gradient(
    180deg,
    #062b63,
    #02142d);

    border-radius:20px;

    padding:35px;

    text-align:center;

    border:2px solid #00bfff;

    box-shadow:

    0 0 20px #00aaff,
    0 0 50px #004cff;

}

.popup-contenido h2{

    color:white;

    margin-top:20px;

}

.popup-contenido p{

    color:#bfe8ff;

    margin-top:15px;

}

.wordart{

    width:280px;

    max-width:100%;

}

#cerrar{

    margin-top:25px;

    padding:12px 35px;

    border:none;

    border-radius:10px;

    background:#005eff;

    color:white;

    cursor:pointer;

    font-weight:bold;

    box-shadow:

    0 0 10px #00bfff;

    transition:.3s;

}

#cerrar:hover{

    transform:scale(1.05);

    box-shadow:

    0 0 20px white,
    0 0 35px #00bfff;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

.panel{

    padding:20px;

}

.panel h1{

    font-size:28px;

}

.logo-titulo{

    flex-direction:column;

    text-align:center;

}

.logo-titulo img{

    width:70px;

    height:70px;

}

textarea{

    height:180px;

}

#enviar{

    font-size:16px;

}

.boton-regresar{

    padding:10px 18px;

    font-size:13px;

}

}

/*=========================================
HEADER HUNTER
=========================================*/

.hunter-header{

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:35px;

}

.hunter-logo{

    width:110px;

    height:110px;

    object-fit:contain;

    filter:

    drop-shadow(0 0 10px #00c8ff)

    drop-shadow(0 0 20px #0066ff);

}

.hunter-text{

    flex:1;

}

.hunter-text h1{

    color:white;

    font-size:42px;

    letter-spacing:2px;

    text-shadow:

    0 0 8px #00bfff,

    0 0 20px #005eff;

}

.hunter-text h3{

    margin-top:8px;

    color:#8edbff;

    font-weight:normal;

    letter-spacing:2px;

}

.hunter-line{

    margin-top:15px;

    width:100%;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

    90deg,

    #00e5ff,

    #0066ff,

    #00e5ff

    );

    box-shadow:

    0 0 10px #00c8ff,

    0 0 20px #005eff;

}

/* ===========================
   RESPONSIVE
=========================== */

/* Laptops pequeñas */
@media (max-width: 1024px) {

}

/*=========================================
RESPONSIVE TABLETS
=========================================*/
@media (max-width:768px){

body{
    padding:15px;
}

.panel{
    width:100%;
    padding:25px;
}

.hunter-header{
    flex-direction:column;
    text-align:center;
    gap:15px;
}

.hunter-logo{
    width:80px;
    height:80px;
}

.hunter-text h1{
    font-size:34px;
}

.hunter-text h3{
    font-size:20px;
}

.hunter-line{
    width:100%;
}

.tipos{
    justify-content:center;
}

textarea{
    height:180px;
}

}

/*=========================================
RESPONSIVE CELULARES
=========================================*/
@media (max-width:480px){

body{
    padding:10px;
}

.panel{
    padding:18px;
    border-radius:18px;
}

.hunter-header{
    flex-direction:column;
    text-align:center;
}

.hunter-logo{
    width:70px;
    height:70px;
}

.hunter-text h1{

    font-size:24px;
    letter-spacing:1px;
    line-height:1.1;

}

.hunter-text h3{

    font-size:16px;
    letter-spacing:1px;

}

.tipos{

    flex-direction:column;
    gap:12px;

}

textarea{

    height:160px;
    font-size:16px;

}

#enviar{

    font-size:16px;
    padding:16px;

}

.boton-regresar{

    top:10px;
    left:10px;
    padding:8px 15px;
    font-size:12px;

}

.popup-contenido{

    padding:20px;

}

.wordart{

    width:220px;

}

}

/* Celulares muy pequeños */
@media (max-width: 320px) {

}