:root{
  --indigo:#232C8F;
  --night:#12153A;
  --paper:#F1F0F5;
  --fuchsia:#D61F69;
  --mist:#C9CCE3;
  --slate:#5A5F7D;
  --white:#FFFFFF;
  --max:1160px;
  --gutter:clamp(16px,4vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--night);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--fuchsia);outline-offset:3px}

/* Bilingual content: Spanish by default, toggled via <html lang> */
html[lang="es"] [data-lang-content="en"],
html[lang="en"] [data-lang-content="es"]{display:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* Display type: expanded, heavy */
.display{
  font-stretch:125%;
  font-variation-settings:"wdth" 125;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.02;
  margin:0;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.site-header.scrolled{border-bottom-color:var(--mist)}
.topbar{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand-name{
  font-weight:800;font-size:17px;line-height:1.1;
  font-variation-settings:"wdth" 125;letter-spacing:.01em;
}
.brand-name small{
  display:block;font-weight:500;font-size:12px;color:var(--slate);
  font-variation-settings:"wdth" 100;letter-spacing:0;
}
.nav{display:flex;gap:22px}
.nav a{
  text-decoration:none;font-size:15px;font-weight:500;color:var(--slate);
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a.active{color:var(--night);border-bottom-color:var(--fuchsia)}
.lang{display:flex;border:1px solid var(--mist);border-radius:999px;padding:3px}
.lang button{
  font:inherit;font-size:13px;font-weight:600;
  border:0;background:none;color:var(--slate);
  padding:4px 10px;border-radius:999px;cursor:pointer;
}
.lang button[aria-pressed="true"]{background:var(--night);color:var(--white)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;text-decoration:none;
  padding:12px 22px;border-radius:999px;border:2px solid transparent;
  transition:background-color .15s,color .15s,border-color .15s;
}
.btn-ink{background:var(--night);color:var(--white)}
.btn-ink:hover{background:var(--indigo)}
.btn-fuchsia{background:var(--fuchsia);color:var(--white)}
.btn-fuchsia:hover{background:#B5175A}
.btn-ghost{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn-white{background:var(--white);color:var(--indigo)}
.btn-white:hover{background:var(--paper)}

/* ---------- Hero ---------- */
.hero{background:var(--indigo);color:var(--white);overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1.6fr .8fr;gap:40px;align-items:end;
  padding-top:clamp(48px,7vw,96px);
}
.hero h1{font-size:clamp(38px,5vw,68px);padding-bottom:28px}
.hero-sub{max-width:34em;font-size:19px;color:#DCDEF2;margin:0 0 32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:clamp(48px,7vw,96px)}
.arches{width:100%;max-width:460px;justify-self:end;align-self:end}
.arches path{fill:none;stroke:var(--mist);stroke-width:1.5}
.arches .core{fill:var(--fuchsia);stroke:none}
.arches .draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.4s cubic-bezier(.6,0,.2,1) forwards}
.arches .d2{animation-delay:.15s}.arches .d3{animation-delay:.3s}.arches .d4{animation-delay:.45s}
.arches .core{opacity:0;animation:rise .8s ease-out .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .arches .draw{animation:none;stroke-dashoffset:0}
  .arches .core{animation:none;opacity:1}
}

/* ---------- Sections ---------- */
section{padding:clamp(64px,9vw,120px) 0}
.section-head{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;margin-bottom:48px}
.section-head h2{font-size:clamp(30px,4vw,48px)}
.section-head p{margin:0;max-width:36em;color:var(--slate);font-size:18px}

.intro{border-bottom:1px solid var(--mist)}
.intro-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.intro .statement{font-size:clamp(24px,2.6vw,32px);line-height:1.3;font-weight:500;margin:0 0 28px;max-width:28em}
.intro .statement-body{color:var(--slate);max-width:36em;margin:0 0 28px}
.focus{border-left:3px solid var(--fuchsia);padding-left:24px}
.focus h3{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--fuchsia)}
.focus p{margin:0;font-size:19px;line-height:1.45}

/* Product */
.product{background:var(--night);color:var(--white)}
.product .section-head p{color:#B8BBD6}
.product-name{font-size:clamp(30px,4vw,48px)}
.product-name span{display:block;font-size:.42em;font-weight:500;font-variation-settings:"wdth" 100;letter-spacing:0;color:var(--mist);margin-top:12px;line-height:1.3}
.features{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(201,204,227,.25)}
.feature{padding:32px 32px 32px 0;border-bottom:1px solid rgba(201,204,227,.25)}
.feature:nth-child(odd){border-right:1px solid rgba(201,204,227,.25)}
.feature:nth-child(even){padding-left:32px;padding-right:0}
.feature h3{margin:0 0 10px;font-size:21px;font-weight:700}
.feature p{margin:0;color:#B8BBD6;max-width:30em}
.product-cta{margin-top:40px}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,48px)}
.service{background:var(--white);padding:0 36px 40px;border-radius:220px 220px 0 0;}
.service-arch{
  height:150px;display:flex;align-items:flex-end;justify-content:center;
  border-bottom:1px solid var(--mist);margin:0 -36px 32px;
}
.service-arch svg{width:92px;height:auto}
.service h3{font-size:clamp(22px,2.4vw,28px);margin:0 0 12px;font-variation-settings:"wdth" 112;font-weight:700;line-height:1.15}
.service p{margin:0;color:var(--slate)}

/* Company */
.company{background:var(--white);border-top:1px solid var(--mist);border-bottom:1px solid var(--mist)}
.registry{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin:0}
.registry div{padding:20px 0;border-top:1px solid var(--mist)}
.registry dt{font-size:14px;color:var(--slate);margin-bottom:4px}
.registry dd{margin:0;font-size:19px;font-weight:600}

/* Contact */
.contact{background:var(--indigo);color:var(--white)}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.contact h2{font-size:clamp(34px,5vw,64px)}
.contact p{color:#DCDEF2;font-size:19px;max-width:30em;margin:20px 0 0}
.contact-side{justify-self:end;text-align:right}
.contact-side .mail{display:block;margin-top:14px;color:#DCDEF2;font-size:15px}

/* Footer */
.site-footer{background:var(--night);color:#B8BBD6;font-size:15px;padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.footer-grid h4{color:var(--white);font-size:15px;margin:0 0 14px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin:0 0 8px}
.footer-grid a{text-decoration:none}
.footer-grid a:hover{color:var(--white);text-decoration:underline}
.footer-brand{color:var(--white);font-weight:800;font-size:20px;font-variation-settings:"wdth" 125;margin:0 0 12px}
.footer-grid p{margin:0 0 16px;max-width:34em}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(201,204,227,.2);margin-top:48px;padding-top:24px;font-size:13px;
}

/* ---------- Legal pages ---------- */
.legal{padding:clamp(48px,7vw,88px) 0 clamp(64px,9vw,120px)}
.legal-inner{max-width:760px}
.legal h1{font-size:clamp(34px,5vw,56px);margin-bottom:12px}
.legal .updated{color:var(--slate);margin:0 0 48px}
.legal h2{font-size:22px;font-weight:700;margin:48px 0 12px;padding-top:24px;border-top:1px solid var(--mist)}
.legal h3{font-size:18px;font-weight:700;margin:24px 0 8px}
.legal p,.legal li{color:#2C3054}
.legal ul{padding-left:20px}
.legal li{margin-bottom:6px}
.legal address{font-style:normal;background:var(--white);padding:20px 24px;border-left:3px solid var(--indigo)}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;background:var(--white)}
.legal th,.legal td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--mist);font-size:15px}
.legal th{font-weight:700}
.legal .note{background:var(--white);padding:16px 20px;border-left:3px solid var(--fuchsia)}
.back{display:inline-block;margin-bottom:32px;color:var(--slate);font-size:15px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav{display:none}
  .topbar .btn{display:none}
  .hero-grid,.intro-grid,.section-head,.contact-grid{grid-template-columns:1fr}
  .arches{max-width:300px;justify-self:start;margin-top:-8px}
  .hero-actions{padding-bottom:8px}
  .hero-grid{gap:24px}
  .contact-side{justify-self:start;text-align:left}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > :first-child{grid-column:1 / -1}
}
@media (max-width:680px){
  .features,.services-grid,.registry{grid-template-columns:1fr}
  .feature,.feature:nth-child(even){padding:28px 0;border-right:0}
  .feature:nth-child(odd){border-right:0}
  .service{padding:0 24px 32px}
  .service-arch{margin:0 -24px 28px;height:120px}
  .footer-grid{grid-template-columns:1fr}
}