:root {
    --bg: #f5f8fd;
    --page: #f7faff;
    --surface: #ffffff;
    --surface-soft: #f8fbff;
    --surface-soft-2: #f4f8fd;
    --surface-blue: #edf4ff;
    --surface-blue-2: #eff5ff;
    --surface-blue-3: #e9f1ff;
    --surface-green: #eefaf2;
    --surface-yellow: #f4db8b;
    --text: #18283f;
    --text-soft: #5d6d86;
    --text-muted: #8c9ab0;
    --blue: #3477ff;
    --blue-strong: #2b68ef;
    --blue-line: #d8e5fb;
    --green: #23a65a;
    --green-soft: #d9f3df;
    --yellow: #f0c94a;
    --border: #dfe8f5;
    --border-soft: #e8eef7;
    --shadow-sm: 0 8px 24px rgba(24, 40, 63, .045);
    --shadow-md: 0 14px 36px rgba(24, 40, 63, .06);
    --shadow-lg: 0 20px 60px rgba(24, 40, 63, .08);
    --radius-32: 32px;
    --radius-28: 28px;
    --radius-24: 24px;
    --radius-22: 22px;
    --radius-20: 20px;
    --radius-18: 18px;
    --radius-16: 16px;
    --radius-14: 14px;
    --radius-pill: 999px;
    --page-w: 1320px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 0% 0%, rgba(61, 118, 255, .055), transparent 26%),
        linear-gradient(180deg, #f9fbff 0%, #f5f8fd 100%);
}

a {
    text-decoration: none;
    color: inherit
}

button,
input,
select {
    font: inherit
}

img,
svg {
    display: inline-block;
}

.page-shell {
    width: min(calc(100% - 40px), var(--page-w));
    margin: 20px auto 40px;
}


/* Start media query from 1000px */
@media screen and (min-width: 1000px) {

    .example-card-mobile {
        display:none;
    }

    .example-card-desctop {
        display:block;
    }

    .block-green-desctop {
        display:block;
    }

    .block-green-mobile {
        display:none;
    }
} 
/* End media query from 1000px */


.main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.88fr) minmax(350px, .92fr);
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-24);
    box-shadow: var(--shadow-sm);
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 26px 24px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .98)),
        linear-gradient(120deg, rgba(52, 111, 255, .03), rgba(52, 111, 255, 0));
}

.hero-top {
    position: relative;
    z-index: 0;
    max-width: 690px;
}

.update-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    border: 1px solid #e3ebf8;
    background: #f5f8ff;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.update-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #26b057;
    box-shadow: 0 0 0 6px rgba(38, 176, 87, .11);
}

.hero h1 {
    margin: 28px 0 0;
    font-size: 62px;
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 900;
}

.hero h1 span {
    color: var(--blue)
}

.hero-sub {
    margin: 18px 0 0;
    max-width: 610px;
    font-size: 17px;
    line-height: 1.58;
    color: var(--text-soft);
    font-weight: 500;
}

.hero-cities {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334865;
    font-size: 15px;
    font-weight: 700;
}

/* Start block lote select */

.lote-map-img {
    width: 100%;
}

/* End block lote select */

.hero-cities svg {
    width: 18px;
    height: 18px;
    color: var(--blue);
    flex: 0 0 auto;
}

.barcelona-card {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid #dfebff;
    background: linear-gradient(180deg, #f5f9ff 0%, #eef4fe 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.barcelona-art {
    height: 92px;
}

.barcelona-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.barcelona-meta h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.03em;
    font-weight: 800;
}

.mini-pill {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: #e8f0ff;
    color: #5470a4;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
}

.barcelona-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.52;
    max-width: 520px;
}

.content-card {
    margin-top: 22px;
    padding: 28px 22px 22px;
}

.section-head h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 850;
}

.section-head p {
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.55;
}

.steps-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.step-card {
    min-height: 138px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
}

.step-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef4ff;
    border: 1px solid #dce8ff;
    color: var(--blue);
    font-size: 15px;
    font-weight: 800;
}

.step-card h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: 800;
}

.step-card p {
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.step-card p strong {
    color: var(--blue)
}

.example-card .example-label {
    font-size: 13px;
    color: var(--text-soft);
    font-weight: 700;
    margin-bottom: 14px;
}

.example-card .example-code {
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -.04em;
    font-weight: 900;
    margin-top: 8px;
}

.example-card .example-foot {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.lote-block-main {
	margin-bottom:20px;
}

.loading-block {
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    padding: 16px 18px 25px;
    border-radius: 22px;
    border: 1px solid #d8e4ff;
    background:
        radial-gradient(circle at 0% 50%, rgba(197, 153, 255, .22), transparent 26%),
        radial-gradient(circle at 100% 10%, rgba(106, 186, 255, .16), transparent 30%),
        linear-gradient(135deg, rgba(241, 229, 255, .95) 0%, rgba(224, 239, 255, .98) 56%, rgba(214, 238, 255, .98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 18px 36px rgba(75, 124, 219, .08);
}

.loading-title {
    position: relative;
    z-index: 1;
    text-align: center;
}

.loading-title h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.03em;
    font-weight: 850;
}

.loading-title p {
    margin: 6px 0 0;
    font-size: 13px;
    color: #5c6d88;
    font-weight: 600;
}

.loading-process {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.loading-rail {
    position: absolute;
    left: 13%;
    right: 13%;
    top: 52px;
    height: 4px;
    border-radius: 999px;
    /* background: rgba(58, 114, 255, .16); */
    overflow: hidden;
}

.loading-step {
    text-align: center;
    padding: 2px 6px 0;
}

.loading-circle {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #3170ff;
    background: rgba(255, 255, 255, .65);
    border: 2px solid #5e94ff;
    box-shadow:
        0 8px 20px rgba(54, 98, 197, .10),
        inset 0 1px 0 rgba(255, 255, 255, .88);
    position: relative;
    z-index: 1;
}

.loading-step.active .loading-circle {
    box-shadow:
        0 0 0 8px rgba(51, 112, 255, .08),
        0 10px 22px rgba(54, 98, 197, .16),
        inset 0 1px 0 rgba(255, 255, 255, .92);
}

.loading-step h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -.02em;
    font-weight: 800;
}

.loading-foot {
    position: relative;
    z-index: 1;
    margin-top: 16px;
}

.loading-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(47, 109, 255, 0.075);
    overflow: hidden;
}

.loading-progress span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    /* background: linear-gradient(90deg, #2f6fff 0%, #4f95ff 100%); */
    background: linear-gradient(90deg, #2f6fff 0%, #4fedff 100%);
    box-shadow: 0 0 16px rgba(51, 112, 255, .28);
    /* animation: barPulse 2s ease-in-out 1 forwards; */
}

.animate-progress-line {
    animation: barPulse 2s ease-in-out 1 forwards;
}

@keyframes barPulse {
    from {
        width: 0%
    }

    to {
        width: 100%
    }
}

.cta-row-wrp {
    display:none;
    margin-top: 16px;
    /* display: grid; */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.cta-row-wrp .btn {
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.cta-row-wrp .btn-primary {
    color: #fff;
    background: linear-gradient(180deg, #3677ff 0%, #2a67ef 100%);
    box-shadow: 0 14px 26px rgba(47, 111, 255, .22);
}

.cta-row-wrp .btn-secondary {
    color: var(--blue);
    background: #fff;
    border-color: #cfe0ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.office-block {
    margin-top: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 16px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.office-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
    padding: 18px;
}

.office-copy h3 {
    margin: 2px 0 14px;
    font-size: 26px;
    line-height: 1.06;
    letter-spacing: -.04em;
    font-weight: 850;
}

.office-list {
    display: grid;
    gap: 13px;
}

.office-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.5;
}

.office-item strong {
    display: block;
    color: var(--blue);
    font-size: 15px;
    margin-bottom: 2px;
}

.map-card {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.map-art {
    height: 212px;
    background: linear-gradient(180deg, #eef3fb 0%, #e6eef9 100%);
}

.map-actions {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    background: #fff;
}

.map-btn {
    height: 52px;
    border-radius: 16px;
    border: 1px solid #d7e4ff;
    color: var(--blue);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
}

.bottom-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/** Start all svg  */
.imgs-svg {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/** End all svg  */

.back-lote-img {
    position: absolute;
    right: 0px;
    bottom: 52%;
    width: 44%;
}

/** Start block output (result) */

.title-lote {
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
    font-size: 25px;
    text-align: center;
    text-transform: uppercase;
}

.output-lote-block {
    width: fit-content;
    margin: 0px auto;
}

.outer-lote-block {
    width: 108%;
    margin: 7px 0px 13px -14px;
    padding: 10px 0px;
    background-color: #8CB9BD4D;

}

.output-lote-inner {
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #15B632;
}

.output-actualizacao-block {
    margin: 7px 0px 10px 7px;
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 22px;
    text-align: center;
}

.output-predv_zapi-block {
    text-align: center;
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #0B3CC9;
    text-transform: uppercase;
}

.title-lote-address {
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    background-image: linear-gradient(to left, #FC8103, #FAC30B);
    background-size: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 50px;
    text-align: center;
    margin: 0px auto;
}

.title-lote-address {
    width: 250px;
    padding: 9px 10px;
    font-size: 19px;
}

.output-address-inner,
.output-thanks-to {
    text-align: center;
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.output-address-inner {
    width: 88%;
    margin-top: -3px;
}

.output-thanks-to {
    width: 108%;
    margin: 5px 0px 0px -14px;
    padding: 6px 5px;
    text-align: center;
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #7F89A8;
    font-style: italic;
}

/** End block output (result) */

.office-result-wrp {
    display: none;
}

.bottom-card {
    min-height: 116px;
    padding: 18px 18px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background-color: #f9fcff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bottom-card.green {
    background-color: #eefaf1;
    border-color: #d8efde;
    cursor: pointer;
}

.bottom-card.green:hover {
    background-color: #e1ffe9;
}

.bottom-card h4 {
    margin: 14px 0 8px;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 800;
}

.bottom-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.bottom-card.description2 {
    grid-column: -4/-1;
}

.arrow {
    color: #7f94b6;
}

.sidebar {
    display: grid;
    gap: 14px;
}

.side-card {
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, #f9fbff 0%, #f5f9fe 100%);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.side-pad {
    padding: 32px 16px 16px 16px;
}

.image-lote {
    padding: 0px !important;
    border-top: 5px solid white !important;
    border-radius: 22px;
    overflow: hidden;
}

.image-lote img {
    width: 100%;
}

.side-title {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 850;
}

.field-stack {
    display: grid;
    gap: 12px
}

.field {
    display: block;
    margin: 12px 0px 10px 0px;
    color:#5e5e5e;
    font-size: 17px;
    font-weight: 700;
}

.wrp-resutl-address {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 18px;
}

.select {
    width: 100%;
    height: 54px;
    border-radius: 16px;
    border: 3px solid #ccdbef;
    background: #fff;
    color: var(--text);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 700;
    outline: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #7c90aa 50%),
        linear-gradient(135deg, #7c90aa 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 3px),
        calc(100% - 16px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.result-card {
    margin-top: 28px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid #d8efde;
    background: linear-gradient(180deg, #f1fbf4 0%, #f8fffa 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84);
}

.result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.result-badge {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e5f8ea;
    color: #28834d;
    font-size: 14px;
    font-weight: 800;
}

.result-badge .mini-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #23a65a;
}

.result-time {
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 700;
}

.result-label {
    color: #70809a;
    font-size: 14px;
    font-weight: 700;
}

.result-lote {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.result-lote strong {
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -.04em;
    font-weight: 900;
    color: #17345f;
}

.result-date {
    margin-top: 14px;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.45;
}

.result-date strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
}

.result-btn {
    margin-top: 16px;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(180deg, #f5d66a 0%, #f1c944 100%);
    color: #5d4300;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 22px rgba(241, 201, 67, .18);
}

.result-address {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.5;
}

.side-list,
.news-list,
.faq-list {
    display: grid;
    gap: 10px;
}

.side-item,
.faq-item,
.news-item {
    min-height: 50px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-soft);
    font-size: 15px;
    font-weight: 700;
}

.news-head,
.faq-head {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.side-link {
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
}

.news-item {
    justify-content: flex-start;
}

.news-item time {
    width: 42px;
    flex: 0 0 auto;
    color: #8b9ab0;
    font-size: 13px;
    font-weight: 800;
}

.news-item .news-label {
    flex: 1 1 auto;
    min-width: 0;
}

.news-item .news-day {
    flex: 0 0 auto;
    color: #99a7b8;
    font-size: 13px;
    font-weight: 800;
}

.faq-footer {
    margin-top: 12px;
    text-align: center;
}

.faq-footer a {
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
}

.icon-18 {
    width: 18px;
    height: 18px
}

.icon-20 {
    width: 20px;
    height: 20px
}

.icon-24 {
    width: 24px;
    height: 24px
}

@media (max-width: 1180px) {

    .page-shell {
        width: min(calc(100% - 30px));
    }

    .update-pill {
        height: 53px;
        padding: 4px 14px;
    }

    .back-lote-img {
        top: 3%;
        opacity: 0.7;
        width: 100%;
    }

    .wrp-mobile-lote {

        margin-bottom: 25px;
        order: -1;
    }
    
    .sidebar-reklama {
      width: 100% !important; overflow:hidden;
    }
    
    #ezoic-pub-ad-placeholder-105 {
    max-width: 270px !important;
    }
    
    wrp-mobile-sidebar-reklama {
    max-width:90%;
    overflow:hidden;
    }
    
    .lote-block-main {
        margin-bottom: 0px;
    }

    .hero,
    .card {
        background: white;
    }

    .main-grid {
        grid-template-columns: 1fr
    }

    .wrp-block-3-steps {
        order: 3;
    }

    .block-green-desctop {
        display:none;
    }

    .block-green-mobile {
        display:block;
    }

    .example-card-mobile {
        display:block;
    }

    .example-card-desctop {
        display:none;
    }

    .bottom-grid {
        display: block;
        order: 4;
    }

    .bottom-card {
        margin-bottom: 20px;
    }

    .wrp-mobile-lote-res-office {
        order: -1;
    }

    .sidebar {
        position: static
    }

    .loading-step {
        width: 81px;
    }

    .loading-step h4 {

        font-size: 11px;
        color: #363636;
    }

    .cta-row-wrp {
        margin-bottom: 20px;
    }


}

@media (max-width: 980px) {
    .nav {
        display: none
    }

    .hero h1 {
        font-size: 44px
    }

    .steps-grid,
    .cta-row-wrp,
    .office-block,
    .barcelona-card {
        grid-template-columns: 1fr
    }

    .office-info {
        grid-template-columns: 1fr
    }

    .map-actions {
        grid-template-columns: 1fr
    }
}