@font-face {
    font-family: Albert;
    src: url('/fonts/AlbertSans-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}
* { box-sizing: border-box; }
:root { --u: min(0.0520833333vw, 1px); --ink: #1e272d; --green: #102e27; --yellow: #e5e500; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); font-family: Albert, Arial, sans-serif; font-size: calc(24 * var(--u)); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #b0a900; outline-offset: 5px; }
p, h1, h2, h3 { margin: 0; }
p { line-height: 1.45; }
h1, h2 { font-weight: 400; line-height: 1.25; }
b, strong { font-weight: 700; }
.container { width: calc(1744 * var(--u)); margin-inline: auto; }
.hero-shell { overflow-x: clip; }
.hero-shell, footer { background: var(--ink); color: #f0efea; }
.hero-shell {
    background-image: url('/images/valler/marca-dagua.svg');
    background-repeat: no-repeat;
    background-size: calc(1102 * var(--u)) calc(823 * var(--u));
    background-position: calc(50% - 409 * var(--u)) top;
}
.header { height: calc(156 * var(--u)); display: flex; align-items: center; gap: calc(92 * var(--u)); }
.brand { display: flex; align-items: center; gap: calc(12 * var(--u)); white-space: nowrap; font-size: calc(52 * var(--u)); letter-spacing: calc(-1.5 * var(--u)); }
.brand svg { width: calc(60 * var(--u)); height: calc(54 * var(--u)); color: var(--yellow); }
.header nav { margin-left: auto; }
nav { display: flex; align-items: center; gap: calc(60 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); border-radius: 100px; background: var(--yellow); color: #080d0d; font-weight: 700; font-size: calc(20 * var(--u)); height: calc(58 * var(--u)); padding-inline: calc(29 * var(--u)); white-space: nowrap; }
.button:hover { background: #f4f43a; }
.button span { font-size: calc(36 * var(--u)); line-height: 1; font-weight: 400; }
.login { min-width: calc(208 * var(--u)); height: calc(46 * var(--u)); }
.login span { font-size: calc(38 * var(--u)); }
.hero { height: calc(924 * var(--u)); position: relative; }
.hero-copy { position: relative; z-index: 2; padding-top: calc(102 * var(--u)); width: calc(465 * var(--u)); }
.hero h1 { font-size: calc(54 * var(--u)); line-height: calc(68 * var(--u)); }
.hero h1 strong { color: var(--yellow); }
.hero-copy > p { font-size: calc(24 * var(--u)); line-height: calc(36 * var(--u)); margin-top: calc(24 * var(--u)); }
.hero-copy > .button { margin-top: calc(58 * var(--u)); }
.hero-photo { position: absolute; left: calc(653 * var(--u)); width: calc(1179 * var(--u)); top: 0; height: calc(852 * var(--u)); background: url('/images/valler/residencia-fachada.webp') center center / cover; clip-path: polygon(32.2% 0, 70.7% 0, 100% 40.7%, 100% 100%, 0 100%, 0 44.3%); }
.future { position: absolute; right: calc(-88 * var(--u)); bottom: calc(72 * var(--u)); width: calc(248 * var(--u)); height: calc(236 * var(--u)); padding: calc(62 * var(--u)) calc(39 * var(--u)); background: var(--ink); border-radius: 0 0 0 calc(60 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.25; }
.future i { display: block; width: calc(50 * var(--u)); height: calc(3 * var(--u)); background: var(--yellow); margin-top: calc(25 * var(--u)); }
.values { position: absolute; z-index: 3; left: 0; bottom: calc(72 * var(--u)); width: calc(1166 * var(--u)); height: calc(142 * var(--u)); display: grid; grid-template-columns: 326fr 346fr 408fr; background: #2b353d; border-radius: calc(40 * var(--u)); padding: calc(28 * var(--u)) calc(43 * var(--u)); box-shadow: 0 calc(27 * var(--u)) #111a1f; }
.values > div { min-width: 0; padding: calc(4 * var(--u)) calc(60 * var(--u)); border-right: 1px solid var(--yellow); }
.values > div:first-child { padding-left: 0; padding-right: calc(35 * var(--u)); }
.values > div:last-child { border: 0; padding-right: 0; }
.values b { font-size: calc(18 * var(--u)); letter-spacing: calc(1 * var(--u)); }
.values p { font-size: calc(20 * var(--u)); line-height: 1.1; margin-top: calc(9 * var(--u)); }
.about { display: grid; grid-template-columns: calc(450 * var(--u)) 1fr; gap: calc(38 * var(--u)); padding-block: calc(83 * var(--u)); }
.eyebrow { font-size: calc(24 * var(--u)); font-weight: 700; margin-bottom: calc(25 * var(--u)); line-height: 1.2; }
.eyebrow::after { content: ''; display: block; width: calc(200 * var(--u)); height: 1px; background: var(--yellow); margin-top: calc(16 * var(--u)); }
.about h2 { font-size: calc(52 * var(--u)); line-height: calc(68 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.about .button { margin-left: calc(-20 * var(--u)); font-size: calc(24 * var(--u)); padding-inline: calc(42 * var(--u)); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(42 * var(--u)); }
.pillar { background: var(--green); color: #eeede5; }
.pillar img { display: block; width: 100%; height: calc(250 * var(--u)); object-fit: cover; object-position: center 30%; }
.pillar > div { padding: calc(19 * var(--u)); min-height: calc(148 * var(--u)); }
.pillar h3 { font-size: calc(20 * var(--u)); line-height: 1.2; }
.pillar p { font-size: calc(14 * var(--u)); line-height: 1.2; margin-top: calc(10 * var(--u)); }
.solutions { background: var(--green); color: #f0efea; padding-top: calc(56 * var(--u)); padding-bottom: calc(68 * var(--u)); }
.solutions-grid > *, .solutions-details > *, .methodology > *, .steps > *, .contact > * { min-width: 0; }
.solutions-grid { display: grid; grid-template-columns: calc(584 * var(--u)) 1fr; gap: calc(92 * var(--u)); }
.solutions-photo { width: 100%; height: calc(394 * var(--u)); object-fit: cover; object-position: center 30%; }
.solutions h2 { font-size: calc(54 * var(--u)); line-height: calc(68 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.solutions-details { display: grid; grid-template-columns: calc(480 * var(--u)) 1fr; gap: calc(64 * var(--u)); }
.solutions-details > p { font-size: calc(24 * var(--u)); line-height: calc(36 * var(--u)); }
.solutions-details > div { border-left: 1px solid var(--yellow); padding-left: calc(76 * var(--u)); }
.solutions-details h3 { font-size: calc(24 * var(--u)); margin-bottom: calc(12 * var(--u)); line-height: 1.2; }
.solutions-details > div p { font-size: calc(24 * var(--u)); line-height: calc(38 * var(--u)); }
.method-shell { background: #f1eee7; padding-top: calc(58 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.methodology { display: grid; grid-template-columns: calc(348 * var(--u)) 1fr; gap: calc(54 * var(--u)); align-items: end; margin-bottom: calc(60 * var(--u)); }
.method-intro h2 { font-size: calc(40 * var(--u)); line-height: calc(44 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.method-intro h2 > b:first-child { font-size: calc(54 * var(--u)); line-height: calc(60 * var(--u)); }
.method-intro > p:not(.eyebrow) { font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); margin-top: calc(12 * var(--u)); }
.steps { list-style: none; display: grid; grid-template-columns: 182fr 236fr 238fr 222fr 168fr; gap: calc(38 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(44 * var(--u)); padding: calc(40 * var(--u)) calc(66 * var(--u)); margin: 0; }
.steps span { font-size: calc(24 * var(--u)); font-weight: 700; }
.steps h3 { font-size: calc(24 * var(--u)); margin: calc(10 * var(--u)) 0 calc(16 * var(--u)); }
.steps p { font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
.contact { background: var(--green); color: #f0efea; padding: calc(56 * var(--u)) calc(102 * var(--u)) calc(64 * var(--u)); display: grid; grid-template-columns: calc(510 * var(--u)) calc(580 * var(--u)) 1fr; align-items: end; gap: calc(60 * var(--u)); }
.contact h2 { font-size: calc(54 * var(--u)); line-height: calc(60 * var(--u)); }
.contact > p { border-left: calc(3 * var(--u)) solid var(--yellow); padding: calc(30 * var(--u)) 0 calc(30 * var(--u)) calc(86 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
.contact .button { align-self: center; font-size: calc(16 * var(--u)); height: calc(48 * var(--u)); padding-inline: calc(24 * var(--u)); }
.footer { height: calc(188 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(60 * var(--u)); }
.footer p { font-size: calc(18 * var(--u)); color: var(--yellow); font-weight: 700; }
.footer p span { padding-inline: calc(10 * var(--u)); }
@media(max-width:800px){.header{height:auto;min-height:110px;flex-wrap:wrap;gap:18px;padding:20px 0}.header nav{order:3;width:100%;justify-content:space-between;margin:0}.brand{font-size:28px}.brand svg{width:34px}.login{margin-left:auto;min-width:100px;padding:8px 15px}.hero{height:auto;padding-bottom:36px;display:flex;flex-direction:column}.hero-copy{width:100%;padding-top:35px}.hero h1{font-size:44px}.hero-copy>p{max-width:470px;font-size:18px}.hero-copy>.button{margin-top:25px}.hero-photo{position:relative;inset:auto;height:360px;margin-top:35px;clip-path:polygon(25% 0,76% 0,100% 28%,100% 100%,0 100%,0 28%);background-position:center 32%}.future{right:0;bottom:180px;width:155px;padding:24px;font-size:13px}.values{position:relative;inset:auto;width:100%;margin-top:-10px;padding:22px 16px;border-radius:22px;box-shadow:0 12px #111a1f}.values b{font-size:11px}.values p{font-size:12px}.values>div{padding:0 12px}.values br{display:none}.about{grid-template-columns:1fr;padding:45px 0;gap:30px}.about h2{font-size:36px;max-width:470px}.pillars{gap:16px;grid-template-columns:repeat(2,1fr)}.pillar img{height:190px}.pillar p{font-size:14px;line-height:1.3}.solutions-grid{grid-template-columns:1fr;gap:30px}.solutions-photo{height:280px}.solutions h2{font-size:34px}.solutions-details{gap:25px}.solutions-details>div{padding-left:25px}.solutions-details h3{font-size:16px}.solutions-details>p,.solutions-details>div p{font-size:16px}.methodology{grid-template-columns:1fr;gap:30px}.method-intro h2 br{display:none}.method-intro h2 br:after{content:' '}.method-intro h2{font-size:28px;max-width:360px}.method-intro h2>b{display:block}.method-intro h2>b:first-child{margin-bottom:10px}.steps{grid-template-columns:1fr;border-radius:25px;gap:25px}.steps li{display:grid;grid-template-columns:35px 1fr;column-gap:12px}.steps h3{margin:0 0 8px}.steps p{grid-column:2}.contact{grid-template-columns:1fr;gap:24px;padding:30px}.contact h2{font-size:34px}.contact>p{padding:0 0 0 20px}.contact .button{justify-self:start}.footer{flex-wrap:wrap;padding:35px 0;gap:25px}.footer nav{width:100%;justify-content:space-between}.footer p{font-size:14px}.eyebrow{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

@media (max-width: 800px) {
    :root { --u: 1px; }
    body { font-size: 16px; }
    .container { width: 91%; }
    nav { font-size: 14px; gap: 20px; }
    .button { font-size: 13px; height: auto; min-height: 42px; padding: 12px 18px; gap: 10px; }
    .button span { font-size: 24px; }
    .login { height: 38px; min-height: 38px; }
    .hero h1 { line-height: 1.2; }
    .hero-copy > p { line-height: 1.5; }
    .hero-photo { width: 100%; }
    .future { height: auto; line-height: 1.3; }
    .values { height: auto; min-height: 100px; }
    .about h2, .solutions h2 { line-height: 1.2; }
    .about .button { margin-left: 0; font-size: 13px; padding-inline: 18px; }
    .pillar h3 { font-size: 18px; }
    .pillar > div { min-height: 150px; padding: 16px; }
    .solutions-details > p, .solutions-details > div p { line-height: 1.5; }
    .method-intro > p:not(.eyebrow) { line-height: 1.45; }
    .steps { padding: 28px; border-width: 2px; }
    .steps p { line-height: 1.45; }
    .contact h2 { line-height: 1.2; }
    .contact > p { font-size: 16px; line-height: 1.5; }
    .contact .button { font-size: 12px; height: auto; padding-inline: 14px; }
    .footer { height: auto; }
    .solutions-details { grid-template-columns: minmax(0, 1fr); }
    .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .values p, .values b { overflow-wrap: anywhere; }
    .button { max-width: 100%; white-space: normal; line-height: 1.3; }
    .steps h3 { overflow-wrap: anywhere; }
    .method-intro h2 br { display: initial; }
}