:root { --blue: #1c6ae7; --blue-dark: #104da9; --ink: #10213a; --muted: #617187; --line: #d9e2ef; --bg: #f5f8fc; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Saira", Arial, sans-serif; overflow-x: hidden; }
.container-max { max-width: 1240px; }
header nav { flex-wrap: wrap; } header nav a { white-space: nowrap; }
#boxHeader { position: relative; display: grid; height: 330px; place-items: center; overflow: hidden; background: linear-gradient(115deg, rgba(12,55,122,.94), rgba(28,106,231,.76)), url("../img/lar.jpg") center/cover; }
#transparency { display: none; } h1 { position: relative; z-index: 1; margin: 0; padding: 0 20px; color: #fff; font-size: clamp(32px, 5vw, 50px); font-weight: 700; text-align: center; }
#principal { display: grid; grid-template-columns: minmax(0, .95fr) minmax(350px, 1fr); gap: 28px; width: min(1120px, calc(100% - 40px)); margin: -65px auto 50px; position: relative; z-index: 2; }
#form, #stage, #ad { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(19,60,120,.1); }
#form { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 26px; }
.one, .two, .three, .four { display: flex; flex-direction: column; margin-top: 16px; }.one { width: 24%; }.two { width: 49%; }.three { width: 75%; }.four { width: 100%; }
.formLabel { margin-bottom: 6px; color: #40516a; font-size: 13px; font-weight: 700; }.input, .selectBox { width: 100%; border: 1px solid #cbd8ea; border-radius: 7px; background: #fff; }.input { padding: 11px; font: inherit; font-size: 14px; outline: none; }.input:focus, .selectBox:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28,106,231,.12); }
#cadButton { width: 100%; margin-top: 22px; padding: 13px; border: 0; border-radius: 8px; color: #fff; background: var(--blue); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }.#cadButton:hover, #cadButton:hover { background: var(--blue-dark); }
#secundary { display: flex; flex-direction: column; gap: 22px; } #stage { padding: 28px; background: linear-gradient(135deg, var(--blue), #0e4ca9); } h2 { margin: 0; color: #fff; font-size: 25px; font-weight: 700; }.stage { display: grid; grid-template-columns: 48px 1fr; gap: 13px; margin-top: 23px; }.stageTitle { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--blue); background: #fff; font-size: 16px; font-weight: 700; }.stageText { align-self: center; color: rgba(255,255,255,.92); line-height: 1.45; }
#ad { display: flex; align-items: center; gap: 20px; padding: 24px; } #imageAd { width: 110px; height: 110px; object-fit: contain; } h3 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.35; }
#success { display: grid; width: min(900px, calc(100% - 40px)); min-height: 60vh; margin: 30px auto; place-items: center; text-align: center; } #successText { color: var(--blue); font-size: 26px; }
#msg { position: fixed; z-index: 10; top: 25px; right: -330px; padding: 14px; border-radius: 8px; color: #fff; background: var(--blue); font-weight: 700; transition: right .2s ease; }
.selectBox { display: flex; flex-direction: column; overflow: hidden; }.selectSelect { width: 100%; padding: 11px; }.selectListBox { height: 0; overflow-y: hidden; }.inputFilter { width: calc(100% - 10px); margin: 5px; padding: 9px; border: 1px solid #cbd8ea; }.selectList { max-height: 160px; overflow-y: auto; }.labelSelect { display: block; padding: 10px; color: #35465e; cursor: pointer; }.boxSelect:hover { background: #edf4ff; }.boxSelected { position: relative; cursor: pointer; }.arrowSelect { position: absolute; right: 10px; }
@media (max-width: 899px) { .topbar .d-flex { justify-content: center !important; text-align: center; }.topbar a, .topbar span { font-size: 12px; } header nav { gap: 10px !important; } header nav a { font-size: 14px !important; }.#boxHeader { height: 270px; } #principal { grid-template-columns: 1fr; margin-top: -35px; } }
@media (max-width: 575px) { #boxHeader { height: 235px; } #principal { width: min(100% - 24px, 600px); margin-bottom: 30px; } #form, #stage, #ad { padding: 19px; border-radius: 11px; }.one, .two, .three, .four { width: 100%; }.one, .two, .three, .four { margin-top: 13px; } #ad { align-items: flex-start; flex-direction: column; } #imageAd { width: 80px; height: 80px; } h3 { font-size: 18px; } .stage { grid-template-columns: 38px 1fr; }.stageTitle { width: 34px; height: 34px; } }