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

:root{--blue:#2176f3;--ink:#29313c;--dark:#151b24;--paper:#f7f7f4;--line:#d9dcdf;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}.topbar{height:94px;padding:0 clamp(24px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7e7e4;position:sticky;z-index:20;top:0;background:rgba(247,247,244,.94);backdrop-filter:blur(12px)}.brand img,footer img{display:block;width:162px;height:auto}.navigation{display:flex;align-items:center;gap:28px;font-size:14px}.navigation a{padding:10px 0}.navigation a:not(.nav-cta):hover{color:var(--blue)}.nav-cta{color:white;background:var(--blue);padding:13px 19px!important}.menu-toggle{display:none;background:transparent;border:0;padding:8px}.menu-toggle span{display:block;width:31px;height:2px;background:var(--ink);margin:6px}.section-pad{padding:clamp(72px,9vw,140px) max(28px,calc((100vw - var(--max))/2));position:relative}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--blue);font-weight:700;font-size:13px;margin:0 0 20px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;min-height:calc(100vh - 94px);align-items:center;overflow:hidden}.hero h1,h2{font:700 clamp(42px,5.3vw,78px)/.98 'Manrope',sans-serif;letter-spacing:-.065em;margin:0 0 28px}.hero h1{max-width:670px}.lead{font-size:19px;line-height:1.55;max-width:620px;margin:0 0 30px}.button{background:var(--blue);color:#fff;display:flex;width:max-content;min-width:250px;align-items:center;justify-content:space-between;gap:35px;padding:19px 23px;font-size:17px;font-weight:600;border:0;cursor:pointer}.button b{font-size:26px;font-weight:400}.micro{font-size:15px;margin:20px 0}.legal{color:#77808c;font-size:12px;line-height:1.45;margin-top:20px}.hero-art{height:min(600px,69vw);background:#d3c7bd;position:relative;overflow:hidden;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,25% 53%,0 0)}.portrait-placeholder{height:100%;background:linear-gradient(135deg,#b49b86,#e9d9cb 47%,#9a715a);display:flex;align-items:center;justify-content:center;color:white;font:700 55px Manrope;letter-spacing:.1em}.x-cut{position:absolute;background:var(--paper);width:42%;height:23%;z-index:1}.x-one{top:0;left:32%;transform:skew(-35deg)}.x-two{bottom:0;right:3%;transform:skew(-35deg)}.value{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center}.value h2 em{color:var(--blue);font-style:normal}.value-list{border:1px solid var(--line)}.value-list article{display:flex;gap:28px;padding:37px;border-bottom:1px solid var(--line)}.value-list article:last-child{border:0}.value-list i{font-size:48px;font-style:normal;line-height:.75;color:var(--ink)}.value-list h3{font:700 25px Manrope;margin:0 0 9px;letter-spacing:-.05em}.value-list p{margin:0;line-height:1.45}.value-list .featured{color:white;background:var(--blue)}.value-list .featured i{color:white}.history{background:var(--dark);color:#fff;overflow:hidden}.history .eyebrow{color:var(--blue)}.history-head{max-width:650px;position:relative;z-index:1}.history h2{font-size:clamp(42px,4.7vw,70px)}.history-head>p:not(.eyebrow){font-size:19px;line-height:1.5;max-width:580px}.big-number{position:absolute;color:transparent;stroke:var(--line);opacity:.2;-webkit-text-stroke:1px #d8dde5;font:700 clamp(190px,32vw,480px)/.7 Manrope;right:14%;top:18%}.timeline{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:55px 0 25px;margin:0;position:relative;z-index:1}.timeline:before{content:"";height:1px;background:#9da7b2;position:absolute;left:0;right:0;top:63px}.timeline li{position:relative;padding-top:26px}.timeline li:before{content:"";width:13px;height:13px;border-radius:50%;background:var(--blue);border:4px solid var(--dark);position:absolute;top:0;left:0}.timeline span{font:700 27px Manrope;color:var(--blue)}.timeline p{max-width:205px;line-height:1.35;margin:5px 0}.history-facts{display:flex;gap:32px;border-top:1px solid #4b535f;padding-top:28px;position:relative;z-index:1}.history-facts p{flex:1;text-transform:uppercase;letter-spacing:.08em;margin:0;font-size:13px}.history-facts b{display:block;margin-top:7px;font-size:15px}.history small{display:block;position:relative;z-index:1;margin-top:30px;color:#bcc3cb}.products h2{max-width:940px}.product-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.product-list>a,.product-primary{border-bottom:1px solid var(--line);padding:30px 0;font:700 clamp(22px,2.2vw,32px) Manrope;letter-spacing:-.05em;display:flex;gap:20px;align-items:center}.product-list>a:nth-child(odd){padding-left:40px}.product-list span{font:500 16px 'DM Sans';letter-spacing:0}.product-list b{margin-left:auto;font-weight:400}.product-primary{grid-column:span 2;background:var(--blue);color:#fff;padding:40px;display:grid;grid-template-columns:70px 1fr}.product-primary h3,.product-primary p,.product-primary a{margin:0;grid-column:2}.product-primary h3{font-size:42px}.product-primary p{font:400 16px DM Sans;line-height:1.4;max-width:430px;margin:8px 0 20px}.product-primary a{font:600 16px DM Sans;text-decoration:underline;text-underline-offset:7px}.process{background:#fff}.process>h2{max-width:620px}.process ol{list-style:none;max-width:800px;margin:50px 0 0 auto;padding:0;border-left:1px solid var(--blue)}.process li{display:flex;gap:26px;padding:25px 0 25px 50px;position:relative;border-bottom:1px solid var(--line)}.process li:before{content:"";position:absolute;left:-8px;top:41px;width:15px;height:15px;background:var(--paper);border:1px solid var(--blue);border-radius:50%}.process li span{font:700 58px/.8 Manrope;letter-spacing:-.07em}.process h3{font:700 23px Manrope;margin:0 0 8px;letter-spacing:-.05em}.process li p{margin:0;font-size:16px}.process .active span{width:100px;height:100px;display:grid;place-items:center;background:var(--blue);color:#fff;border-radius:50%}.security{background:var(--blue);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.security .eyebrow{color:#fff}.security h2{max-width:550px}.security ul{padding:0;list-style:none;font-size:18px;line-height:1.45}.security li{padding:12px 0}.security-contact{background:var(--paper);color:var(--ink);padding:32px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.phone-visual{height:230px;max-width:240px;margin:auto auto 30px;border:8px solid #1d232c;border-radius:25px;background:#fff;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:13px;box-shadow:0 20px 30px #0002}.phone-visual span{font:700 30px Manrope;color:var(--ink)}.phone-visual b{border:3px solid var(--blue);color:var(--blue);border-radius:50%;width:55px;height:55px;display:grid;place-items:center;font-size:32px}.security-contact a{display:block;font-size:17px;margin:8px 0}.security-contact>div:last-child>p:last-child{font-size:13px;color:#707984;line-height:1.45}.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center}.about-photo{height:600px;overflow:hidden;clip-path:polygon(0 0,100% 0,73% 45%,100% 100%,0 100%)}.team-placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#7f8b96,#d5c1af 50%,#534437);font:700 64px Manrope;color:#fff}.about h2{font-size:clamp(39px,4.4vw,65px)}.principles{margin-top:30px;border-top:1px solid var(--line)}.principles article{padding:16px 0;border-bottom:1px solid var(--line)}.principles h3{text-transform:uppercase;color:var(--blue);font-size:13px;letter-spacing:.15em;margin:0 0 7px}.principles p{margin:0;line-height:1.45}.closing{background:var(--dark);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:8vw;overflow:hidden}.closing .lead{color:#e1e4e7}.lead-form{padding-top:30px}.lead-form label{display:block;font-size:14px;margin-bottom:22px}.lead-form input[type=text]{display:block;width:100%;color:#fff;background:transparent;border:0;border-bottom:1px solid #dce0e5;padding:14px 0;font:400 17px DM Sans;outline:0}.lead-form input::placeholder{color:#9ba3ad}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}.checkbox{display:flex!important;gap:10px;line-height:1.4;color:#cfd4d9}.checkbox input{accent-color:var(--blue);margin-top:3px}.checkbox a{color:var(--blue)}.form-errors{color:#ff9f9f;font-size:13px}.closing .legal{color:#aab2bc}.toast-area{position:fixed;top:105px;right:24px;z-index:50}.toast{margin:0;padding:17px 22px;background:#1d6ef0;color:white;box-shadow:0 8px 28px #0002}footer{background:#0e131a;color:#fff;text-align:center;padding:65px 24px}footer img{margin:0 auto 22px;filter:brightness(0) invert(1)}footer p{margin:12px 0;color:#d3d6d9}footer address{font-style:normal;line-height:1.75;margin:22px 0;color:#d3d6d9}footer a:hover{color:var(--blue)}footer small{color:#77808c}.legal-page{min-height:100vh;background:var(--dark);color:white}.legal-page main{max-width:760px;margin:0 auto;padding:70px 28px}.legal-page .brand{display:inline-block;margin-bottom:80px}.legal-page .brand img{filter:brightness(0) invert(1)}.legal-page h1{font:700 clamp(48px,7vw,85px) Manrope;letter-spacing:-.065em;margin:0 0 20px}.legal-page p:not(.eyebrow){font-size:20px;line-height:1.5;color:#cbd1d8;margin-bottom:35px}

@media (max-width:760px){.topbar{height:82px;padding:0 28px}.brand img{width:130px}.menu-toggle{display:block}.navigation{display:none;position:absolute;top:81px;left:0;right:0;background:var(--paper);padding:18px 28px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px}.navigation.open{display:flex}.navigation a{padding:12px 0}.nav-cta{text-align:center;margin-top:5px}.section-pad{padding:72px 28px}.hero{display:block;padding-top:86px;min-height:0}.hero h1,h2{font-size:clamp(42px,13.2vw,66px);line-height:.99}.hero .lead{font-size:18px}.button{width:100%;min-width:0}.hero-art{height:540px;margin:40px -28px -72px;clip-path:none}.portrait-placeholder{align-items:flex-end;padding-bottom:70px}.x-cut{background:var(--paper)}.value{display:block}.value h2{margin-bottom:43px}.value-list{margin:0 -28px;border-left:0;border-right:0}.value-list article{padding:30px 28px;gap:22px}.value-list h3{font-size:23px}.history{padding-bottom:65px}.history h2{font-size:47px}.big-number{font-size:255px;right:-8%;top:14%;opacity:.16}.timeline{display:block;padding:38px 0 0;margin-left:12px;border-left:1px solid #8c95a1}.timeline:before{display:none}.timeline li{padding:0 0 32px 29px}.timeline li:before{top:5px;left:-8px;border-color:var(--dark)}.timeline p{max-width:none;font-size:17px}.history-facts{display:grid;grid-template-columns:1fr 1fr;gap:22px}.history-facts p:last-child{grid-column:span 2}.product-list{display:block;margin:0 -28px}.product-list>a{padding:25px 28px!important;font-size:27px}.product-primary{display:grid;padding:30px 28px;grid-template-columns:1fr}.product-primary h3,.product-primary p,.product-primary a{grid-column:1}.product-primary h3{font-size:38px}.process ol{margin:38px 0 0}.process li{padding-left:35px;gap:18px}.process li span{font-size:48px}.process .active span{width:80px;height:80px}.security{display:block;padding:0}.security-copy{padding:72px 28px}.security h2{font-size:54px}.security ul{font-size:17px}.security-contact{padding:48px 28px}.about{display:flex;flex-direction:column;padding:72px 0;gap:0}.about>div:last-child{padding:56px 28px 0}.about-photo{order:2;width:100%;height:390px;margin-top:35px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 55%,17 55%)}.about>div:last-child{display:contents}.about .eyebrow,.about h2,.about .lead{margin-left:28px;margin-right:28px}.about .eyebrow{order:0}.about h2{order:1}.about .lead{order:2}.about .principles{order:3;margin:40px 28px 0}.about .legal{order:4;margin:20px 28px 0}.about-photo{order:2}.principles{width:auto}.closing{display:block;padding:72px 28px}.closing h2{font-size:57px}.form-row{display:block}.lead-form{padding-top:22px}.toast-area{top:94px;left:14px;right:14px}.toast{text-align:center}.legal-page main{padding-top:40px}.legal-page .brand{margin-bottom:65px}}

/* ==========================================
   ASX DESIGN SYSTEM REFINEMENTS & FIXED ISSUES
   ========================================== */

/* 1. Hero Art & Responsive X-Crop */
.hero-art {
    background: transparent !important;
}
.hero-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.icon-wa {
    color: #25D366;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.micro {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ink);
    margin-top: 20px;
}
@media (max-width: 760px) {
    .hero-art {
        clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 25% 53%, 0 0) !important;
        margin: 40px 0 0 !important;
        height: 380px !important;
    }
}

/* 2. Value Section (Hands & Alignment) */
.value-list article {
    align-items: center;
}
.x-icon {
    flex-shrink: 0;
}
.value-art {
    width: 100%;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 55%, 17% 55%);
}
.value-art img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
@media (max-width: 760px) {
    .value {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .value-art {
        height: 300px;
        order: 3;
    }
}

/* 3. History Section (Skyline Crop & SVGs) */
.history-art {
    margin: 40px auto;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    clip-path: polygon(18% 0, 100% 0, 75% 50%, 100% 100%, 0 100%, 22% 50%, 0 0) !important;
}
.history-art img {
    width: 100%;
    height: auto;
    display: block;
}
.history-facts {
    align-items: center;
}
.history-facts p {
    display: flex;
    align-items: center;
    gap: 8px;
}
.history-facts svg {
    flex-shrink: 0;
}

/* 4. Products List Layout Arrow Alignments */
.product-list > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* 5. Stepper Timeline Line and Circles Alignment */
.process ol {
    border-left: 2px solid var(--blue) !important;
}
.process li {
    padding-left: 40px !important;
    border-bottom: none !important;
    display: grid !important;
    grid-template-columns: 50px 1fr auto !important;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}
.process li::before {
    display: none !important;
}
.process li span {
    font-size: 24px !important;
    font-weight: 700;
    color: #77808c;
    width: 44px;
    height: 44px;
    border: 2px solid #dce0e5;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--paper);
    margin-left: -63px;
    position: relative;
    z-index: 2;
}
.process .active span {
    width: 44px !important;
    height: 44px !important;
    background: var(--blue) !important;
    color: #fff !important;
    border-color: var(--blue) !important;
}
.wa-bubble-icon {
    color: #25D366;
    margin-left: auto;
}

/* 6. Security Section (SVGs & Phone Image) */
.security-copy ul {
    list-style: none;
    padding: 0;
}
.security-copy ul li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    font-size: 18px;
}
.sec-icon {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    padding: 9px;
    color: #fff;
    width: 42px;
    height: 42px;
}
.security-phone-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}
.security-phone-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 7. About Team Image */
.about-photo {
    background: transparent !important;
}
.about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pin-legal {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

/* 8. Vamos Conversar / Form Section Overrides */
.closing {
    position: relative;
    overflow: hidden;
}
.closing::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 60%;
    height: 120%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L90 90 M90 10 L10 90' stroke='%232176f3' stroke-width='4' stroke-opacity='0.12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    pointer-events: none;
    z-index: 0;
}
.closing > * {
    position: relative;
    z-index: 1;
}
.form-group {
    margin-bottom: 24px;
    width: 100%;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #9ba3ad;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: normal;
}
.form-group input[type=text] {
    display: block;
    width: 100%;
    color: #fff;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #4b535f !important;
    padding: 10px 0 !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px !important;
    outline: 0;
    transition: border-color 0.2s;
}
.form-group input[type=text]:focus {
    border-bottom-color: var(--blue) !important;
}

/* 9. Footer Logo & Contact Details */
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}
.footer-logo img {
    margin: 0;
}
.footer-logo-sub {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.52em;
    color: #77808c;
    margin-top: 6px;
    margin-right: -0.52em;
}
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d3d6d9;
    font-size: 15px;
}
.footer-contact li svg {
    color: var(--blue);
    flex-shrink: 0;
}
.footer-links {
    margin-top: 32px;
}

