/* global style start */
/* 3dcd58 */
/* 5bb359 */
:root {
    /* font */
    --primary_font: "Helvetica", "Arial", sans-serif;
    --secondary_font: "Helvetica", "Arial", sans-serif;
    /* color */
    --primary_color: #3dcd58;
    --secondary_color: #2b8d37;
    --third_color: 255, 255, 255 ;
    --dark:#000;
    --danger_color: #981415;
    --default_color: #FFFFFF;
    --primary_text_color: #F0F0F0;
    --secondary_text_color: rgba(18, 24, 32, 0.60);
    /* text shade */
    --primary_text_shade: #999999;
    --secondary_text_shade: rgba(240, 240, 240, 0.40);
    /* shade bg */
    --primary_bg: rgba(107, 159, 26, 0.04);
    /* border */
    --primary_radius: 8px;
    --secondary_radius: 4px;
}

html {
    scroll-behavior: smooth;
    font-family: var(--primary_font);

}
body {
    overflow-x: hidden;
    margin: 0 !important;
}

/* selection */
::selection, .d2c_card_wrapper:hover ::selection {
    color: var(--default_color);
    background: var(--primary_color);
}
/* selection */
/* typography */
h1,h2,h3,h4,h5,h6 {
    color: var(--primary_text_color);
    font-weight: 600;  
}
h2 {
    margin-top: 0px;
    font-size: 42px;
    margin-bottom: 0px;
}
img{
	width: 100%;
}
a {
  text-decoration: none
}
.left a:hover {
    color: var(--secondary_color) !important;
}
.login {
    height: 1000px;
    width: 100%;
    background: linear-gradient(180deg, rgba(18, 24, 32, 0.40) 0%, rgba(18, 24, 32, 0.79) 80.96%, #121820 100%), url(../images/login/portada.webp);
    position: relative;
}
.login_box {
    width: 1050px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 10px;
    box-shadow: 1px 4px 22px -8px #0004;
    display: flex;
    overflow: hidden;
}
.login_box .left{
  width: 60%;
  height: 100%;
  padding: 25px 25px;
  
}
.login_box .right{
  width: 59%;
  height: 100%  
}
.left .top_link a {
    color: var(--primary_color);
    font-weight: 400;
}
.left .top_link{
  height: 20px;
}

.left .contact{
	display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 100%;
    width: 73%;
    margin: auto;
}
.left h3{
  text-align: center;
  margin-bottom: 40px;
}
.left input {
    border: none;
    width: 80%;
    margin: 15px 0px;
    border-bottom: 1px solid var(--primary_color);
    padding: 7px 9px;
    width: 100%;
    overflow: hidden;
    background: transparent;
    font-weight: 600;
    font-size: 14px;
}
.left{
    background-color: rgba(255, 255, 255, 0.05) !important; /* puedes ajustar la opacidad */
    border: none !important;
    backdrop-filter: blur(8px); /* opcional: desenfoque del fondo */
}
.submit {
    border: none;
    padding: 15px 70px;
    border-radius: 8px;
    margin: auto;
    margin-top: 120px;
    background: var(--primary_color);
    font-weight: bold;
    cursor: pointer;
    -moz-box-shadow: 0px 9px 15px -11px rgba(43,141,55,1);
    box-shadow: 0px 9px 15px -11px rgba(43,141,55,1);
}
/* button */
.btn {
    cursor: pointer;
    color: var(--primary_color);
    font-family: var(--secondary_font);
    font-size: 16px;
    font-weight: 500;

    background: var(--dark);
    
    border-radius: var(--primary_radius);
    border: 1px solid var(--primary_color);
    padding: 11px 35px 10px;
    transition: 0.4s all;
}
.btn:hover {
    color: var(--dark);
    background: var(--primary_color);
    border: 1px solid var(--primary_color);
    transition: 0.4s all;
}
.btn.active {
    color: var(--primary_color);
    background: var(--dark);
    border: 1px solid var(--primary_color);
    transition: 0.4s all;
}
.text-primary {
    color: var(--primary_color)!important;
}

.right {
	background: linear-gradient(212.38deg, rgba(61, 205, 88, 0.6) 0%, rgba(43, 141, 55, 0.6) 100%),
	            url(../images/login/login.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
}
.right h2, .right h5, .left label {
    color: var(--primary_text_color);
}

.right .right-text{
  height: 100%;
  position: relative;
  transform: translate(0%, 45%);
}
.right-text h2{
  display: block;
  width: 100%;
  text-align: center;
  font-size: 50px;
  font-weight: 500;
}
.right-text h5{
  display: block;
  width: 100%;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
}

.right .right-inductor{
  position: absolute;
  width: 70px;
  height: 7px;
  background: #fff0;
  left: 50%;
  bottom: 70px;
  transform: translate(-50%, 0%);
}
.top_link img {
    width: 28px;
    padding-right: 7px;
    margin-top: -3px;
}



/* ====== RESPONSIVE LOGIN START ====== */
@media (max-width: 1100px) {
    .login_box {
        width: 95vw;
        height: 95vh;
        min-width: 320px;
        min-height: 450px;
    }
}

@media (max-width: 900px) {
    .login_box {
        width: 100vw;
        height: auto;
        min-height: 450px;
        flex-direction: column;
        border-radius: 0;
        box-shadow: none;
        position: static;
        top: auto; left: auto; transform: none;
    }
    .login_box .left, .login_box .right {
        width: 100%;
        height: auto;
    }
    .left .contact {
        width: 100%;
        padding: 0 12px;
        margin: 0;
    }
    .right .right-text {
        transform: none;
        padding: 40px 0;
    }
}

@media (max-width: 600px) {
    .login {
        height: auto;
        min-height: 100vh;
        padding: 0;
    }
    .login_box {
        flex-direction: column;
        width: 100vw;
        height: auto;
        min-height: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .login_box .left, .login_box .right {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 18px 10px;
    }
    .left .contact {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    h2 {
        font-size: 30px;
    }
    .right-text h5 {
        font-size: 16px;
    }
    .btn {
        width: 100%;
        padding: 11px 0;
        font-size: 15px;
    }
    .mb-3, .my-3 {
        margin-bottom: 12px !important;
    }
    .left input {
        font-size: 13px;
        padding: 5px 8px;
    }
}

/* ====== RESPONSIVE LOGIN END ====== */