/* =========================================================
   MINERA ANDINA
   LOGIN SYSTEM
========================================================= */
/* =========================================================
   RESET
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-family: "Inter", sans-serif;
    background: #f5f7fa;
    overflow: hidden;
}
body {
    min-height: 100vh;
}
/* =========================================================
   CONTENEDOR
========================================================= */
.login-container {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}
/* =========================================================
   LADO IZQUIERDO - MINA
========================================================= */
.mining-section {
    position: relative;
    width: 58%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    color: #fff;
    background-image:
          url("../img/portada1.png");
    background-size: cover;
    background-position: center center;
    background-color: #09243d;
}
/* =========================================================
   OVERLAY
========================================================= */
.mining-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 18, 35, 0.75) 0%, rgba(5, 35, 61, 0.50) 45%, rgba(7, 48, 80, 0.30) 100%), linear-gradient(180deg, rgba(4, 24, 43, 0.45) 0%, rgba(7, 45, 72, 0.15) 45%, rgba(2, 17, 31, 0.65) 100%);
}
/* =========================================================
   LUCES
========================================================= */
.light {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
}
.light-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -80px;
    background: rgba(70, 140, 210, .18);
    animation: lightMove 8s ease-in-out infinite;
}
.light-2 {
    width: 180px;
    height: 180px;
    left: 15%;
    bottom: 15%;
    background: rgba(80, 160, 220, .12);
    animation: lightMove 10s ease-in-out infinite reverse;
}
.light-3 {
    width: 120px;
    height: 120px;
    right: 25%;
    top: 40%;
    background: rgba(120, 190, 240, .10);
    animation: lightPulse 5s ease-in-out infinite;
}
@keyframes lightMove {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(25px, -20px);
    }
}
@keyframes lightPulse {
    0%,
    100% {
        opacity: .15;
        transform: scale(1);
    }
    50% {
        opacity: .45;
        transform: scale(1.25);
    }
}
/* =========================================================
   PARTICULAS
========================================================= */
.particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #1A73E8;
    box-shadow:
        0 0 8px rgba(92, 169, 223, .8);
    animation: particle 7s linear infinite;
}
.particles span:nth-child(1) {
    left: 12%;
    top: 30%;
}
.particles span:nth-child(2) {
    left: 22%;
    top: 65%;
    animation-delay: 1s;
}
.particles span:nth-child(3) {
    left: 38%;
    top: 25%;
    animation-delay: 2s;
}
.particles span:nth-child(4) {
    left: 48%;
    top: 72%;
    animation-delay: 3s;
}
.particles span:nth-child(5) {
    left: 63%;
    top: 35%;
    animation-delay: 1.5s;
}
.particles span:nth-child(6) {
    left: 75%;
    top: 65%;
    animation-delay: 2.5s;
}
.particles span:nth-child(7) {
    left: 85%;
    top: 25%;
    animation-delay: 4s;
}
.particles span:nth-child(8) {
    left: 92%;
    top: 75%;
    animation-delay: 5s;
}
@keyframes particle {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(.5);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: .8;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(1.3);
    }
}
/* =========================================================
   LINEAS
========================================================= */
.tech-lines {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.tech-lines span {
    position: absolute;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(80, 160, 220, .5),
            transparent
        );
    animation: techMove 6s linear infinite;
}
.tech-lines span:nth-child(1) {
    width: 250px;
    top: 28%;
    left: 0;
}
.tech-lines span:nth-child(2) {
    width: 350px;
    top: 62%;
    right: 0;
    animation-delay: 2s;
}
.tech-lines span:nth-child(3) {
    width: 180px;
    top: 82%;
    left: 20%;
    animation-delay: 4s;
}
@keyframes techMove {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    30% {
        opacity: .4;
    }
    70% {
        opacity: .4;
    }
    100% {
        transform: translateX(150px);
        opacity: 0;
    }
}
/* =========================================================
   MARCA
========================================================= */
.brand {
    position: absolute;
    top: 50px;
    left: 60px;
    z-index: 5;
}
.brand-logo {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(92, 169, 223, .55);
    border-radius: 14px;
    background: rgba(60, 130, 190, .10);
    backdrop-filter: blur(10px);
    color: #1A73E8;
    font-size: 26px;
}
.brand-name {
    margin-top: 13px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2px;
}
.brand-name strong {
    display: block;
    color: #1A73E8;
    font-weight: 800;
    letter-spacing: 3px;
}
.brand-description {
    margin-top: 9px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255,255,255,.65);
}
/* =========================================================
   CONTENIDO MINA
========================================================= */
.mining-content {
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 90px;
    z-index: 5;
    animation: contentAppear .8s ease forwards;
}
@keyframes contentAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.content-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,.75);
}
.content-label span {
    width: 30px;
    height: 2px;
    background: #1A73E8;
}
.mining-content h1 {
    margin-top: 17px;
    max-width: 650px;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.5px;
}
.mining-content h1 strong {
    display: block;
    color: #1A73E8;
    font-weight: 800;
}
.mining-content p {
    margin-top: 20px;
    max-width: 570px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.72);
}
.yellow-line {
    width: 75px;
    height: 4px;
    margin-top: 23px;
    border-radius: 10px;
    background: #1A73E8;
    box-shadow:
        0 0 15px rgba(92,169,223,.45);
}
/* =========================================================
   ESTADISTICAS
========================================================= */
.mining-stats {
    display: flex;
    gap: 45px;
    margin-top: 27px;
}
.stat {
    position: relative;
    display: flex;
    flex-direction: column;
}
.stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4px;
    right: -23px;
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.20);
}
.stat strong {
    font-size: 22px;
    color: #1A73E8;
}
.stat span {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
}
/* =========================================================
   FOOTER MINA
========================================================= */
.mining-footer {
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 30px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 15px;
}
.mining-footer span:first-child {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255,255,255,.45);
}
.footer-line {
    width: 70px;
    height: 1px;
    background: rgba(92,169,223,.5);
}
/* =========================================================
   LADO DERECHO - LOGIN
========================================================= */
.login-section {
    position: relative;
    width: 42%;
    height: 100vh;
    min-height: 100vh;
    padding: 35px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(247,249,252,.98)
        );
}
/* =========================================================
   FONDO LOGIN
========================================================= */
.login-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
/* =========================================================
   CIRCULOS
========================================================= */
.bg-circle {
    position: absolute;
    border-radius: 50%;
}
.circle-1 {
    width: 520px;
    height: 520px;
    top: -300px;
    right: -250px;
    background:
        radial-gradient(
            circle,
            rgba(92,169,223,.16),
            rgba(92,169,223,.04) 50%,
            transparent 72%
        );
}
.circle-2 {
    width: 450px;
    height: 450px;
    left: -280px;
    bottom: -300px;
    border: 1px solid rgba(92,169,223,.10);
    box-shadow:
        0 0 0 35px rgba(92,169,223,.025),
        0 0 0 70px rgba(92,169,223,.018),
        0 0 0 105px rgba(92,169,223,.012);
}
/* =========================================================
   GRID
========================================================= */
.bg-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(
            rgba(20,70,105,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20,70,105,.025) 1px,
            transparent 1px
        );
    background-size: 45px 45px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );
}
/* =========================================================
   LINEAS LOGIN
========================================================= */
.bg-line {
    position: absolute;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(92,169,223,.35),
            transparent
        );
    opacity: .7;
}
.line-1 {
    width: 300px;
    top: 25%;
    right: -80px;
    transform: rotate(-35deg);
}
.line-2 {
    width: 220px;
    bottom: 25%;
    left: -80px;
    transform: rotate(-35deg);
}
/* =========================================================
   LOGIN BOX
========================================================= */
.login-box {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 410px;
    padding: 0;
    animation: loginAppear .8s ease forwards;
}
@keyframes loginAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================================
   LOGO
========================================================= */
.login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 78px;
    margin-bottom: 8px;
}
.login-logo-image {
    display: block;
    width: auto;
    height: 76px;
    max-width: 230px;
    object-fit: contain;
    object-position: center;
    animation: logoFloat 4s ease-in-out infinite;
    filter:
        drop-shadow(
            0 8px 15px rgba(20,70,105,.12)
        );
}
@keyframes logoFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}
/* =========================================================
   CABECERA
========================================================= */
.login-header {
    text-align: center;
    margin-bottom: 22px;
}
.login-header > span {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #397eae;
}
.login-header h2 {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #22272e;
}
.login-header p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: #858b93;
}
/* =========================================================
   INPUTS
========================================================= */
.input-group {
    margin-bottom: 15px;
}
.input-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #3e454d;
}
.input-wrapper {
    position: relative;
    width: 100%;
}
.input-wrapper > i {
    position: absolute;
    left: 17px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    font-size: 17px;
    color: #a0a5ab;
    transition: .25s ease;
}
.input-wrapper input {
    width: 100%;
    height: 53px;
    padding: 0 50px;
    border: 1px solid #dfe2e6;
    border-radius: 11px;
    outline: none;
    background: rgba(255,255,255,.95);
    color: #252a30;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    box-shadow:
        0 5px 18px rgba(0,0,0,.035);
    transition: .25s ease;
}
.input-wrapper input::placeholder {
    color: #adb2b8;
}
.input-wrapper input:focus {
    border-color: #4c91c2;
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(76,145,194,.10),
        0 8px 20px rgba(0,0,0,.05);
}
.input-wrapper:focus-within > i {
    color: #397eae;
}
/* =========================================================
   PASSWORD
========================================================= */
.password-eye {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #999fa6;
    cursor: pointer;
    transition: .25s ease;
}
.password-eye:hover {
    background: #eef5fa;
    color: #397eae;
}
/* =========================================================
   BOTON
========================================================= */
.btn-login {
    width: 100%;
    height: 54px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, #3385ff, #1763d1);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow:
        0 10px 25px rgba(53,126,174,.24);
    transition: .25s ease;
}
.btn-login i {
    font-size: 17px;
    transition: .25s ease;
}
.btn-login:hover {
    transform: translateY(-2px);
    background: 
        linear-gradient(
            135deg,
            #3385ff,
            #1763d1
        );
    box-shadow: 
        0 15px 30px rgba(23, 99, 209, 0.30);
}
.btn-login:hover i {
    transform: translateX(5px);
}
.btn-login:active {
    transform: translateY(0);
}
/* =========================================================
   SEPARADOR
========================================================= */
.separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
}
.separator span {
    flex: 1;
    height: 1px;
    background: #e2e5e8;
}
.separator p {
    margin: 0;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #a1a6ac;
}
/* =========================================================
   REDES
========================================================= */
.social-networks {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.social {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e4e7;
    border-radius: 10px;
    background: rgba(255,255,255,.85);
    color: #777d84;
    text-decoration: none;
    font-size: 16px;
    transition: .25s ease;
}
.social:hover {
    transform: translateY(-4px);
    color: #fff;
    border-color: transparent;
    box-shadow:
        0 8px 20px rgba(0,0,0,.12);
}
.social.facebook:hover {
    background: #1877f2;
}
.social.youtube:hover {
    background: #ff0000;
}
.social.tiktok:hover {
    background: #111;
}
.social.instagram:hover {
    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        );
}
/* =========================================================
   SEGURIDAD
========================================================= */
.security-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 11px 13px;
    border: 1px solid #e5e7e9;
    border-radius: 11px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
}
.security-icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(76,145,194,.12);
    color: #397eae;
    font-size: 16px;
}
.security-box strong {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #4a5057;
}
.security-box p {
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.4;
    color: #92979d;
}
/* =========================================================
   FOOTER
========================================================= */
.login-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
    font-size: 8px;
    color: #a3a7ac;
}
.login-footer span:last-child {
    text-align: right;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1200px) {
    .mining-section {
        width: 55%;
    }
    .login-section {
        width: 45%;
        padding: 30px 35px;
    }
    .brand {
        left: 50px;
    }
    .mining-content {
        left: 50px;
        right: 40px;
    }
    .mining-content h1 {
        font-size: 46px;
    }
    .login-logo {
        height: 70px;
    }
    .login-logo-image {
        height: 68px;
        max-width: 210px;
    }
}
/* =========================================================
   TABLET PEQUEÑA
========================================================= */
@media (max-width: 1000px) {
    .mining-section {
        width: 52%;
    }
    .login-section {
        width: 48%;
        padding: 25px;
    }
    .brand {
        left: 35px;
        top: 35px;
    }
    .mining-content {
        left: 35px;
        right: 25px;
    }
    .mining-content h1 {
        font-size: 38px;
    }
    .brand-name {
        font-size: 27px;
    }
    .mining-stats {
        gap: 28px;
    }
    .login-logo {
        height: 65px;
    }
    .login-logo-image {
        height: 63px;
        max-width: 190px;
    }
    .login-header h2 {
        font-size: 28px;
    }
}
/* =========================================================
   TABLET VERTICAL
========================================================= */
@media (max-width: 800px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .login-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    /* MINA */
    .mining-section {
        width: 100%;
        height: 370px;
        min-height: 370px;
    }
    .login-section {
        width: 100%;
        height: auto;
        min-height: auto;
        padding: 40px 30px;
    }
    .login-box {
        max-width: 450px;
    }
    .mining-content {
        left: 35px;
        right: 35px;
        bottom: 35px;
    }
    .mining-content h1 {
        font-size: 36px;
    }
    .mining-footer {
        display: none;
    }
}
/* =========================================================
   CELULARES
========================================================= */
@media (max-width: 600px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .login-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        overflow: visible;
    }
    /* =====================================================
       MINA
    ====================================================== */
    .mining-section {
        width: 100%;
        height: 315px;
        min-height: 315px;
        background-position: center;
    }
    .mining-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.82),
                rgba(0,0,0,.45) 45%,
                rgba(0,0,0,.92)
            );
    }
    /* =====================================================
       MARCA
    ====================================================== */
    .brand {
        top: 20px;
        left: 20px;
    }
    .brand-logo {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    .brand-name {
        margin-top: 8px;
        font-size: 20px;
    }
    .brand-description {
        margin-top: 6px;
        font-size: 7px;
        letter-spacing: 1.5px;
    }
    /* =====================================================
       CONTENIDO
    ====================================================== */
    .mining-content {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }
    .content-label {
        font-size: 7px;
        letter-spacing: 1.2px;
    }
    .content-label span {
        width: 22px;
    }
    .mining-content h1 {
        margin-top: 8px;
        font-size: 25px;
        line-height: 1.06;
        letter-spacing: -.5px;
    }
    .mining-content p {
        margin-top: 8px;
        font-size: 10px;
        line-height: 1.45;
    }
    .yellow-line {
        width: 45px;
        height: 3px;
        margin-top: 10px;
    }
    /* =====================================================
       ESTADISTICAS
    ====================================================== */
    .mining-stats {
        gap: 22px;
        margin-top: 12px;
    }
    .stat strong {
        font-size: 15px;
    }
    .stat span {
        margin-top: 2px;
        font-size: 7px;
    }
    .stat:not(:last-child)::after {
        right: -12px;
        height: 25px;
    }
    /* =====================================================
       LOGIN
    ====================================================== */
    .login-section {
        width: 100%;
        padding: 25px 20px 25px;
        min-height: 0;
    }
    .login-box {
        width: 100%;
        max-width: 100%;
    }
    /* =====================================================
       LOGO
    ====================================================== */
    .login-logo {
        height: 55px;
        margin-bottom: 5px;
    }
    .login-logo-image {
        height: 55px;
        max-width: 180px;
    }
    /* =====================================================
       TITULO
    ====================================================== */
    .login-header {
        margin-bottom: 18px;
    }
    .login-header > span {
        margin-bottom: 4px;
        font-size: 7px;
        letter-spacing: 2px;
    }
    .login-header h2 {
        font-size: 25px;
    }
    .login-header p {
        margin-top: 4px;
        font-size: 11px;
    }
    /* =====================================================
       INPUTS
    ====================================================== */
    .input-group {
        margin-bottom: 13px;
    }
    .input-group label {
        margin-bottom: 5px;
        font-size: 10px;
    }
    .input-wrapper input {
        height: 50px;
        font-size: 12px;
        border-radius: 10px;
    }
    .input-wrapper > i {
        left: 15px;
        font-size: 16px;
    }
    /* =====================================================
       BOTON
    ====================================================== */
    .btn-login {
        height: 51px;
        border-radius: 10px;
        font-size: 11px;
    }
    /* =====================================================
       REDES
    ====================================================== */
    .separator {
        margin: 16px 0 12px;
    }
    .social-networks {
        gap: 8px;
    }
    .social {
        width: 37px;
        height: 37px;
        border-radius: 9px;
        font-size: 15px;
    }
    /* =====================================================
       SEGURIDAD
    ====================================================== */
    .security-box {
        margin-top: 15px;
        padding: 9px 11px;
        border-radius: 10px;
    }
    .security-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .security-box strong {
        font-size: 9px;
    }
    .security-box p {
        font-size: 7px;
    }
    /* =====================================================
       FOOTER
    ====================================================== */
    .login-footer {
        margin-top: 12px;
        font-size: 7px;
    }
    /* =====================================================
       DECORACIONES
    ====================================================== */
    .bg-grid {
        opacity: .15;
    }
    .circle-1 {
        width: 300px;
        height: 300px;
    }
    .circle-2 {
        width: 300px;
        height: 300px;
    }
    .tech-lines {
        display: none;
    }
}
/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */
@media (max-width: 380px) {
    .mining-section {
        height: 290px;
        min-height: 290px;
    }
    .brand {
        top: 17px;
        left: 17px;
    }
    .brand-logo {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .brand-name {
        font-size: 18px;
    }
    .brand-description {
        font-size: 6px;
        letter-spacing: 1px;
    }
    .mining-content {
        left: 17px;
        right: 17px;
        bottom: 17px;
    }
    .content-label {
        font-size: 6px;
    }
    .mining-content h1 {
        font-size: 22px;
    }
    .mining-content p {
        font-size: 9px;
        margin-top: 6px;
    }
    .mining-stats {
        gap: 18px;
        margin-top: 9px;
    }
    .stat strong {
        font-size: 13px;
    }
    .stat span {
        font-size: 6px;
    }
    .login-section {
        padding: 20px 17px 20px;
    }
    .login-logo {
        height: 48px;
    }
    .login-logo-image {
        height: 48px;
        max-width: 160px;
    }
    .login-header {
        margin-bottom: 15px;
    }
    .login-header h2 {
        font-size: 23px;
    }
    .input-wrapper input {
        height: 48px;
    }
    .btn-login {
        height: 49px;
    }
    .security-box {
        margin-top: 13px;
    }
}
/* =========================================================
   DISPOSITIVOS MUY PEQUEÑOS
========================================================= */
@media (max-width: 330px) {
    .mining-section {
        height: 270px;
        min-height: 270px;
    }
    .brand {
        left: 15px;
        top: 15px;
    }
    .brand-logo {
        width: 35px;
        height: 35px;
        font-size: 15px;
    }
    .brand-name {
        font-size: 16px;
    }
    .brand-description {
        font-size: 5px;
    }
    .mining-content {
        left: 15px;
        right: 15px;
        bottom: 14px;
    }
    .mining-content h1 {
        font-size: 20px;
    }
    .mining-content p {
        font-size: 8px;
    }
    .mining-stats {
        gap: 15px;
    }
    .stat strong {
        font-size: 12px;
    }
    .stat span {
        font-size: 5px;
    }
    .login-section {
        padding-left: 14px;
        padding-right: 14px;
    }
    .login-logo {
        height: 43px;
    }
    .login-logo-image {
        height: 43px;
        max-width: 145px;
    }
    .login-header h2 {
        font-size: 21px;
    }
    .input-wrapper input {
        height: 46px;
    }
    .btn-login {
        height: 47px;
    }
}
/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.social.facebook {
    background: #1877f2;
    color: #fff;
}
.social.youtube {
    background: #ff0000;
    color: #fff;
}
.social.tiktok{
    background: #111;
    color: #fff;
}
.social.instagram {
    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        );
   color: #fff;       
}