/*==================================================
DRMC.CL
style.css
Parte 1/3
==================================================*/

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

:root{

    --primary:#002D72;
    --secondary:#F7B500;
    --secondary-hover:#ffc938;

    --white:#ffffff;
    --light:#f5f7fa;
    --gray:#9ca3af;

    --overlay:rgba(0,25,63,.72);

    --shadow:0 20px 60px rgba(0,0,0,.35);

    --radius:14px;

    --transition:.35s ease;

    --max-width:1300px;

}

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

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

html{
    scroll-behavior:smooth;
	overflow-y: hidden;
}

body{

    font-family:'Montserrat',sans-serif;
    color:var(--white);

    background:#02162f;
	background-image:url(../img/background_page.png);
	background-size:cover;

    overflow-x:hidden;
    min-height:100vh;

}

/*==========================
BACKGROUND
==========================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:url("../img/fondo.jpg") center center/cover no-repeat;

    z-index:-3;

    animation:bgZoom 25s ease-in-out infinite alternate;

}

.overlay{

    position:fixed;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,28,68,.90),
        rgba(0,33,76,.78),
        rgba(0,38,90,.62)
    );

    z-index:-2;

}

.blueprint{

    position:fixed;

    inset:0;

    background:url("../img/plano.png") center center/cover;

    opacity:.08;

    mix-blend-mode:screen;

    animation:moveBlueprint 35s linear infinite;

    z-index:-1;

}

/*==========================
HERO
==========================*/

.hero{

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

    max-width:var(--max-width);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

    /*padding:60px;*/

}

/*==========================
CONTENT
==========================*/

.hero-content{

    width:50%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.logo{

    width:250px;

    display:block;

    margin-bottom:80px;

}

/*==========================
TEXT
==========================*/

.text-container{

    display:flex;

    align-items:center;

    gap:30px;

    margin-bottom:60px;

}

.line {
    width: 8px;
    min-width: 8px;
    height: 120px;
    border-radius: 20px;
    background: var(--secondary);
    float: left;
}

.text-container h1{

    font-size:4rem;

    line-height:1.1;

    font-weight:800;

    margin-bottom:18px;

    letter-spacing:-1px;

}

.text-container p{

    font-size:1.25rem;

    color:#d8dde7;

    line-height:1.7;

    max-width:550px;

}

/*==========================
BUTTON
==========================*/

.btn-primary{

    background:var(--secondary);

    color:#002b69;

    border:none;

    border-radius:8px;

    padding:20px 42px;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:0 15px 35px rgba(0,0,0,.25);

    letter-spacing:.3px;

}

.btn-primary:hover{

    transform:translateY(-3px);

    background:var(--secondary-hover);

    box-shadow:0 22px 45px rgba(0,0,0,.32);

}

.btn-primary:active{

    transform:translateY(0);

}

/*==========================
WORKER
==========================*/

.hero-worker{

    width:50%;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

}

.worker-image{

    width:100%;

    max-width:610px;

    user-select:none;

    transition:all .6s ease;

    filter:drop-shadow(0 25px 45px rgba(0,0,0,.45));

}

.worker-image:hover{

    transform:

        translateY(-6px)

        rotate(.35deg)

        scale(1.01);

}

/*==========================
ANIMATIONS INITIAL STATE
==========================*/

.animate-logo,
.animate-title,
.animate-button{

    opacity:0;

    transform:translateX(90px);

}

/*==========================
MODAL
==========================*/

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

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

    backdrop-filter:blur(8px);

    visibility:hidden;

    opacity:0;

    transition:.35s ease;

    z-index:9999;

}

.modal.active{

    visibility:visible;

    opacity:1;

}

.modal-content{

    width:100%;

    max-width:700px;

    background:#000000;

    border-radius:18px;

    padding:55px;

    position:relative;

    box-shadow:0 40px 80px rgba(0,0,0,.35);

    transform:translateY(20px) scale(.96);

    transition:.35s ease;

}

.modal.active .modal-content{

    transform:translateY(0) scale(1);

}

.close-modal{

    position:absolute;

    right:20px;

    top:18px;

    width:42px;

    height:42px;

    border:none;

    background:#ececec;

    border-radius:50%;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}

.close-modal:hover{

    background:#d8d8d8;

    transform:rotate(90deg);

}

.modal.active p {
    float: left;
    width: 96%;
    margin-left: 2%;
	margin-bottom: 40px;
}

.modal.active h2 {
    float: left;
    width: 95%;
    margin-left: 2%;
    font-size: 49px;
}
input#nombre {
    width: 50%;
    padding: 5px;
}
input#empresa{
    width: 50%;
    padding: 5px;
	margin-bottom: 6px;
}
input#email{
    width: 50%;
    padding: 5px;
}
textarea#mensaje{
    width: 50%;
    padding: 5px;
}