/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/

/* reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
copyright,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
copyright,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}

/* text align right */
.txt-lt {
    text-align: left;
}

/* text align left */
.txt-center {
    text-align: center;
}

/* text align center */
.float-rt {
    float: right;
}

/* float right */
.float-lt {
    float: left;
}

/* float left */
.clear {
    clear: both;
}

/* clear float */
.pos-relative {
    position: relative;
}

/* Position Relative */
.pos-absolute {
    position: absolute;
}

/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}

/* vertical align top */
nav.vertical ul li {
    display: block;
}

/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */
img {
    max-width: 100%;
}

/* //end reset */
body {
    font-size: 100%;
    font-family: 'Source Sans Pro', sans-serif;
}

.main-bg {
    background: url(../img/fondo.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 100vh;
}

/* title */
.nom {
    font-size: 2.8vw;
    font-weight: 800;
    color: #000;
    text-align: center;
    padding: 1.5vw 1vw 1vw;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* //title */

/* content */
.sub-main-w3 {
    margin: 1.1vw 5vw;
}

.bg-content-w3pvt {
    max-width: 400px;
    margin: 0 auto;
    background: #fff;
    text-align: center;
    border-radius: 15px;
    overflow: hidden;
}

.top-content-style {
    padding: 3rem 2rem 5rem;
    background: linear-gradient(135deg, #0ec95c, #00796b);

}

.top-content-style img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #fff;
    display: block;
    margin: 0 auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border: 5px solid rgba(255, 255, 255, 0.3);
}

.sub-main-w3 form {
    background: #ffff;
    padding: 2.5em;
    /* Más espacio interno */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    /* Sombra más suave y difusa */
    margin: -2.5em 2.5em 2em;
    border-radius: 20px;
    /* Bordes más redondeados */
}

p.legend {
    color: #4e4d4d;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1.2em;
}

p.legend span {
    color: #000;
    margin-left: 10px;
}

.input {
    position: relative;
    margin: 20px auto;
    width: 100%
}

.input span {
    position: absolute;
    display: block;
    color: #0ec95c;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    z-index: 10;
}

.input .show-password {
    left: auto !important;
    right: 20px;
    cursor: pointer;
    color: #11998e;
}

.input input {
    width: 100%;
    padding: 15px 50px 15px 45px;
    /* Espacio extra a la derecha para el ojo */
    display: block;
    border: 1px solid #e0e0e0;
    /* Borde gris suave por defecto */
    color: #333;
    box-sizing: border-box;
    font-size: 14px;
    outline: none;
    letter-spacing: 1px;
    background: #f9f9f9;
    /* Fondo gris muy claro */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.02);
    border-radius: 50px;
    /* Inputs redondeados (estilo píldora) */
    transition: all 0.3s ease;
}

.input input:focus {
    border-color: #0ec95c;
    background: #fff;
    box-shadow: 0 4px 10px rgba(14, 201, 92, 0.15);
}

.submit {
    width: 60%;
    height: 50px;
    display: block;
    margin: 2em auto 0;
    background: linear-gradient(to right, #11998e, #38ef7d);
    /* Gradiente llamativo */
    border-radius: 50px;
    /* Botón redondeado */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(28, 168, 89, 0.4);
    /* Sombra coloreada */
}

.submit span {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.submit:hover {
    transform: translateY(-3px);
    /* Efecto de elevación */
    box-shadow: 0 8px 20px rgba(28, 168, 89, 0.6);
}

.submit:hover {
    opacity: .8;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

a.bottom-text-w3ls {
    color: #757474;
    font-size: 16px;
    display: inline-block;
    margin: 0em 1em 1em;
    letter-spacing: 1px;
}

/* //content */

/* copyright */
.copyright {
    margin-top: 1.08vw;
    padding-bottom: 1.5vw;
}

.copyright h2 {
    font-size: 16px;
    color: #000;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.8;
}

.copyright h2 a {
    color: #000;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.copyright h2 a:hover {
    opacity: .8;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

/* //copyright */

/* responsive */
@media(max-width:1280px) {
    .top-content-style {
        padding: 3vw 4vw 5vw;
    }
}

@media(max-width:1080px) {
    h1 {
        font-size: 3.5vw;
    }
}

@media(max-width:991px) {
    h1 {
        font-size: 4vw;
    }

    .top-content-style {
        padding: 3vw 4vw 6vw;
    }
}

@media(max-width:800px) {
    h1 {
        font-size: 5vw;
        padding: 2.5vw 1vw 3vw;
    }

    .top-content-style {
        padding: 4vw 4vw 9vw;
    }

    .copyright {
        margin-top: 3em;
        padding-bottom: 1.5em;
    }
}

@media(max-width:640px) {
    h1 {
        font-size: 6vw;
        padding: 3vw 1vw 4vw;
    }
}

@media(max-width:600px) {
    .copyright h2 {
        letter-spacing: 1px;
    }
}

@media(max-width:480px) {
    h1 {
        font-size: 2em;
        letter-spacing: 1px;
    }

    .top-content-style {
        padding: 2em 1em 4em;
    }

    .copyright h2 {
        font-size: 15px;
    }

    .copyright {
        margin-top: 2em;
        padding-bottom: 1em;
    }

    p.legend {
        font-size: 23px;
    }

    a.bottom-text-w3ls {
        font-size: 15px;
    }
}

@media(max-width:384px) {
    .sub-main-w3 form {
        margin: -2.5em 2em 2em;
    }

    h1 {
        padding: 5vw 1vw 6vw;
    }
}

@media(max-width:320px) {
    h1 {
        font-size: 1.7em;
    }

    .sub-main-w3 form {
        margin: -2em 1em 1.5em;
        padding: 1.5em;
    }

    .top-content-style {
        padding: 1.5em 1em 3em;
    }

    .copyright h2 {
        font-size: 14px;
    }
}

/* //responsive */