:root{--orange:#d96f28;--ochre:#b98532;--gold:#d8b05d;--black:#11100e;--coal:#1b1a18;--gray:#d9d6d0;--paper:#f4f1eb;--white:#fff;--sans:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--black);font-family:var(--sans);overflow-x:hidden}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}button{font:inherit}.demo-bar{height:30px;background:var(--black);color:#fff;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.14em;text-transform:uppercase}.demo-bar a{color:var(--gold)}.topbar{height:92px;padding:0 4vw;display:grid;grid-template-columns:190px 1fr auto;gap:2rem;align-items:center;position:sticky;top:0;z-index:70;background:rgba(244,241,235,.94);backdrop-filter:blur(15px);border-bottom:1px solid rgba(17,16,14,.12)}.brand img{width:145px;height:72px;object-fit:contain}.topbar nav{display:flex;justify-content:center;gap:2.3rem}.topbar nav a,.menu-cta{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.topbar nav a{position:relative;padding:.6rem 0}.topbar nav a:after{content:"";position:absolute;left:0;bottom:1px;width:0;height:2px;background:var(--orange);transition:.35s}.topbar nav a:hover:after{width:100%}.menu-cta{border:1px solid var(--black);padding:13px 16px}.menu-cta span{color:var(--orange)}
.hero{position:relative;height:calc(100vh - 122px);min-height:680px;overflow:hidden;background:#111;color:#fff}.hero-media,.hero-slide{position:absolute;inset:0}.hero-slide{opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 6s ease}.hero-slide.active{opacity:1;transform:scale(1)}.hero-slide img{width:100%;height:100%;object-fit:cover}.hero-mask{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,10,.88),rgba(12,11,10,.42) 48%,rgba(12,11,10,.08) 76%),linear-gradient(0deg,rgba(12,11,10,.32),transparent 55%)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:10vw 10vw;opacity:.22}.hero-copy{position:absolute;left:5vw;bottom:8.5vw;z-index:4;max-width:900px}.eyebrow,.section-label{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}.hero h1,.statement h2,.projects h2,.blueprint h2,.process h2,.architect h2,.contact h2{margin:14px 0 0;font-weight:900;letter-spacing:-.055em;line-height:.84;text-transform:uppercase}.hero h1{font-size:clamp(5rem,8.2vw,10rem)}.hero h1 em{font-style:normal;color:var(--gold)}.hero-copy p{max-width:560px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.78)}.hero-link{display:inline-flex;gap:1rem;margin-top:18px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.6);font-size:10px;letter-spacing:.13em;text-transform:uppercase}.hero-link span{color:var(--gold)}.hero-counter{position:absolute;right:4vw;bottom:4vw;z-index:4;display:flex;align-items:flex-end;gap:6px}.hero-counter strong{font-size:4.7rem;line-height:.75}.hero-counter span{font-size:12px;color:#ccc}.hero-switcher{position:absolute;right:4vw;top:4vw;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.hero-switcher button{border:0;background:transparent;color:rgba(255,255,255,.6);font-size:10px;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;padding:4px 0}.hero-switcher button.active{color:#fff}.hero-switcher button.active:before{content:"";display:inline-block;width:32px;height:1px;background:var(--gold);vertical-align:middle;margin-right:8px}.scroll-note{position:absolute;left:5vw;bottom:2vw;z-index:4;display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:.18em}.scroll-note i{width:90px;height:1px;background:linear-gradient(90deg,var(--orange),transparent);animation:scrollPulse 2s ease-in-out infinite}@keyframes scrollPulse{50%{transform:scaleX(.5);transform-origin:left}}
.statement{padding:8rem 5vw;display:grid;grid-template-columns:.18fr 1fr .55fr;gap:4vw;align-items:start}.statement-index{font-size:6rem;font-weight:900;color:var(--orange);line-height:.8}.statement-title span{font-size:10px;letter-spacing:.18em;color:#6c665f}.statement h2{font-size:clamp(4rem,6vw,7rem);max-width:10ch}.statement-side{border-top:1px solid #bdb8b0;padding-top:20px}.statement-side>p{color:#706a63;line-height:1.7}.statement-metrics{display:grid;grid-template-columns:1fr 1fr;margin-top:35px;border-top:1px solid #c9c3bb}.statement-metrics div{padding:18px 0}.statement-metrics strong,.statement-metrics span{display:block}.statement-metrics strong{font-size:2.6rem;color:var(--ochre)}.statement-metrics span{font-size:10px;text-transform:uppercase;color:#77716b}
.projects{background:var(--black);color:#fff;padding:7rem 0 6rem;overflow:hidden}.projects-top{padding:0 5vw 4rem;display:grid;grid-template-columns:.2fr 1fr .55fr;gap:4vw;align-items:end}.projects h2{font-size:clamp(4.8rem,7vw,8.5rem);grid-column:2}.projects h2 em{color:var(--gold);font-style:normal}.projects-top p{color:#aaa49d;line-height:1.6;margin:0}.project-stack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 5vw 18px;scrollbar-width:none}.project-stack::-webkit-scrollbar{display:none}.project-card{flex:0 0 min(62vw,980px);scroll-snap-align:start;position:relative;cursor:pointer}.project-image{height:min(64vh,620px);overflow:hidden;background:#222}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s,filter .5s}.project-card:hover .project-image img{transform:scale(1.035);filter:saturate(1.15)}.project-meta{display:grid;grid-template-columns:48px 1fr auto 36px;align-items:center;gap:15px;padding:18px 0;border-bottom:1px solid #393633}.project-meta span{color:var(--gold);font-size:10px}.project-meta h3{margin:0;font-size:2rem;text-transform:uppercase}.project-meta p{font-size:10px;color:#89837d;text-transform:uppercase;letter-spacing:.1em}.project-meta b{font-size:1.3rem;color:var(--orange)}
.blueprint{padding:8rem 5vw;background:#d96f28;color:#111;display:grid;grid-template-columns:.72fr 1.28fr;gap:5vw;align-items:center;overflow:hidden}.blueprint h2{font-size:clamp(4.7rem,6.6vw,8rem)}.blueprint-copy p{max-width:500px;line-height:1.7;color:#442d20}.light{color:#fff}.blueprint-stage{height:680px;position:relative;perspective:1200px}.plan{position:absolute;margin:0;width:72%;height:54%;overflow:hidden;box-shadow:0 28px 60px rgba(48,29,17,.18);transition:transform .25s ease}.plan img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}.p-a{left:4%;top:5%;transform:rotate(-5deg);z-index:3}.p-b{right:0;top:24%;transform:rotate(5deg);z-index:2}.p-c{left:13%;bottom:1%;transform:rotate(-2deg);z-index:4}.plan-axis{position:absolute;background:rgba(17,16,14,.5)}.axis-x{left:-5%;right:-5%;height:1px;top:50%}.axis-y{top:-5%;bottom:-5%;width:1px;left:50%}.plan-dot{position:absolute;left:50%;top:50%;width:14px;height:14px;border:2px solid #111;border-radius:50%;transform:translate(-50%,-50%);animation:dotPulse 2s ease-in-out infinite}@keyframes dotPulse{50%{transform:translate(-50%,-50%) scale(1.8);opacity:.3}}
.process{padding:8rem 5vw}.process-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:4rem}.process h2{font-size:clamp(4rem,6vw,7rem)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #bdb8b0;border-bottom:1px solid #bdb8b0}.process-step{min-height:310px;padding:24px 20px;border-right:1px solid #bdb8b0;position:relative;overflow:hidden;transition:.4s}.process-step:last-child{border-right:0}.process-step:before{content:"";position:absolute;inset:auto 0 0;height:0;background:var(--orange);transition:.45s;z-index:0}.process-step:hover:before{height:100%}.process-step>*{position:relative;z-index:1}.process-step span{font-size:10px;color:var(--ochre)}.process-step h3{font-size:2.5rem;text-transform:uppercase;margin:8rem 0 .7rem}.process-step p{color:#77716b;font-size:12px;line-height:1.6}.process-step:hover,.process-step:hover p,.process-step:hover span{color:#fff}
.architect{display:grid;grid-template-columns:.72fr 1.28fr;min-height:760px;background:#171614;color:#fff;overflow:hidden}.architect-copy{padding:8rem 0 7rem 5vw;align-self:center}.architect h2{font-size:clamp(4.4rem,6.5vw,7.6rem)}.architect h2 em{font-style:normal;color:var(--gold)}.architect-copy p{max-width:420px;color:#a8a19a}.architect-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.architect-visual img{height:94%;width:auto;max-width:none;object-fit:contain;object-position:center bottom;position:relative;z-index:4;filter:drop-shadow(0 30px 35px rgba(0,0,0,.2))}.architect-ring{position:absolute;border:1px solid rgba(216,176,93,.36);border-radius:50%;animation:ringFloat 8s ease-in-out infinite}.r1{width:560px;height:560px;right:8%;top:7%}.r2{width:360px;height:360px;right:28%;bottom:3%;animation-delay:-3s}@keyframes ringFloat{50%{transform:translate(-18px,14px) scale(1.05)}}.architect-word{position:absolute;right:-2vw;top:4%;font-size:18vw;font-weight:900;letter-spacing:-.08em;color:rgba(255,255,255,.035);z-index:1}.architect-name{position:absolute;right:5vw;bottom:4vw;z-index:6;background:#f4f1eb;color:#111;padding:16px 20px;border-left:3px solid var(--orange)}.architect-name strong,.architect-name span{display:block}.architect-name strong{font-size:1.1rem}.architect-name span{font-size:9px;text-transform:uppercase;color:#776f68;margin-top:4px}
.panorama{background:#111;padding:18px 0;overflow:hidden}.panorama-track{display:flex;gap:18px;width:max-content;animation:panoramaMove 30s linear infinite}.panorama article{width:420px;height:250px;position:relative;overflow:hidden;flex:none}.panorama img{width:100%;height:100%;object-fit:cover}.panorama span{position:absolute;left:12px;bottom:12px;background:#f4f1eb;padding:8px 10px;font-size:9px;text-transform:uppercase}@keyframes panoramaMove{to{transform:translateX(-35%)}}
.contact{min-height:600px;background:var(--gold);display:grid;grid-template-columns:.35fr 1fr;align-items:center;padding:6rem 5vw;overflow:hidden}.contact-number{font-size:22vw;font-weight:900;color:rgba(17,16,14,.10);line-height:.7}.contact h2{font-size:clamp(5rem,7vw,8.5rem)}.contact-copy>span{font-size:10px;letter-spacing:.2em}.contact-copy a{display:inline-flex;gap:1rem;margin-top:25px;padding-bottom:9px;border-bottom:1px solid #111;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.contact-copy b{color:#fff}
.footer{padding:5rem 5vw 1.5rem;background:#f4f1eb;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;border-top:1px solid #c9c4bd}.footer-brand img{width:190px}.footer-brand p,.footer p,.footer a{font-size:12px;color:#6f6962;line-height:1.6}.footer>div:not(.footer-brand):not(.footer-bottom){display:flex;flex-direction:column;gap:7px}.footer>div>span{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-weight:800}.footer-bottom{grid-column:1/-1;padding-top:18px;margin-top:2rem;border-top:1px solid #c9c4bd;display:flex;justify-content:space-between;font-size:9px;color:#8a847d}.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
@media(max-width:1000px){.topbar{grid-template-columns:160px 1fr}.topbar nav{display:none}.menu-cta{justify-self:end}.statement,.blueprint,.architect{grid-template-columns:1fr}.statement{gap:2rem}.statement-index{font-size:4rem}.statement-side{max-width:650px}.projects-top{grid-template-columns:1fr}.projects h2{grid-column:auto}.project-card{flex-basis:80vw}.blueprint-stage{height:600px}.process-grid{grid-template-columns:1fr 1fr}.process-step:nth-child(2){border-right:0}.architect-copy{padding:6rem 6vw 0}.architect-visual{min-height:660px}.footer{grid-template-columns:1.3fr 1fr 1fr}.footer-brand{grid-row:span 2}}
@media(max-width:650px){.demo-bar{font-size:8px}.demo-bar a{display:none}.topbar{height:76px;padding:0 6vw}.brand img{width:115px}.menu-cta{font-size:9px;padding:10px}.hero{height:auto;min-height:720px}.hero-copy{left:6vw;right:6vw;bottom:8rem}.hero h1{font-size:clamp(4.2rem,17vw,6rem)}.hero-counter{right:6vw;bottom:2rem}.hero-switcher{top:2rem;right:6vw}.statement,.process,.contact{padding-left:6vw;padding-right:6vw}.statement h2,.process h2,.contact h2{font-size:clamp(3.7rem,14vw,5.5rem)}.projects{padding-top:5.5rem}.projects-top{padding-left:6vw;padding-right:6vw}.project-card{flex-basis:88vw}.project-image{height:470px}.project-meta{grid-template-columns:36px 1fr 26px}.project-meta p{display:none}.project-meta h3{font-size:1.55rem}.blueprint{padding:5.5rem 6vw}.blueprint h2{font-size:clamp(4rem,15vw,5.6rem)}.blueprint-stage{height:500px}.plan{width:82%;height:48%}.process-grid{grid-template-columns:1fr}.process-step{border-right:0;border-bottom:1px solid #bdb8b0;min-height:230px}.process-step h3{margin-top:5rem}.architect{min-height:auto}.architect h2{font-size:clamp(4rem,15vw,5.5rem)}.architect-visual{min-height:570px}.architect-visual img{height:90%}.architect-name{right:6vw}.r1{width:430px;height:430px;right:-35%}.panorama article{width:300px;height:190px}.contact{grid-template-columns:1fr}.contact-number{font-size:40vw}.footer{grid-template-columns:1fr 1fr;padding-left:6vw;padding-right:6vw}.footer-brand{grid-column:1/-1;grid-row:auto}.footer-bottom{flex-direction:column}}


/* =========================================================
   ARKON AJUSTE 02 — REFINAMIENTO DE SECCIONES APROBADAS
   ========================================================= */

/* 01 / ESTUDIO — sin numeral lateral, mayor escala y fondo de agua */
.statement{
  position:relative;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr) !important;
  gap:6vw !important;
  align-items:center !important;
  min-height:720px;
  overflow:hidden;
}
.statement-watermark{
  position:absolute;
  left:-2vw;
  bottom:-8vw;
  z-index:0;
  font-size:clamp(12rem,24vw,30rem);
  line-height:.72;
  font-weight:900;
  letter-spacing:-.08em;
  color:rgba(185,133,50,.065);
  pointer-events:none;
  white-space:nowrap;
}
.statement-title,.statement-side{position:relative;z-index:2}
.statement-title span{font-size:11px!important}
.statement h2{
  font-size:clamp(5.7rem,8.1vw,9.6rem)!important;
  max-width:9.2ch!important;
  line-height:.78!important;
}
.statement-side{
  border-top:1px solid rgba(17,16,14,.28)!important;
  padding-top:28px!important;
}
.statement-side>p{
  font-size:clamp(1.15rem,1.45vw,1.55rem)!important;
  line-height:1.55!important;
  color:#4f4943!important;
  max-width:520px;
}
.statement-metrics strong{font-size:3.2rem!important}
.statement-index{display:none!important}

/* 02 / PROYECTOS — descripción arriba, lateral al título */
.projects-top{
  grid-template-columns:.22fr 1.08fr .55fr!important;
  align-items:start!important;
}
.projects-top .section-label{padding-top:.8rem}
.projects h2{margin-top:0!important}
.projects-description{
  align-self:start!important;
  margin:0!important;
  padding-top:.8rem;
  font-size:clamp(1rem,1.25vw,1.25rem)!important;
  line-height:1.55!important;
  max-width:420px;
}

/* 03 / PROCESO — planos algo mayores + expansión al click */
.blueprint-stage{height:720px!important}
.plan{
  width:78%!important;
  height:58%!important;
  cursor:zoom-in;
  transition:transform .42s cubic-bezier(.2,.8,.2,1), scale .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s, filter .42s!important;
}
.plan img{transition:filter .35s ease,transform .45s ease}
.plan.is-expanded{
  z-index:12!important;
  scale:1.08;
  cursor:zoom-out;
  box-shadow:0 40px 90px rgba(48,29,17,.34)!important;
}
.plan.is-expanded img{filter:grayscale(0) contrast(1.04)!important;transform:scale(1.015)}
.plan::after{
  content:"AMPLIAR ↗";
  position:absolute;
  right:12px;
  bottom:12px;
  background:rgba(17,16,14,.88);
  color:#fff;
  padding:8px 10px;
  font-size:8px;
  letter-spacing:.14em;
  opacity:0;
  transform:translateY(6px);
  transition:.3s;
}
.plan:hover::after{opacity:1;transform:none}
.plan.is-expanded::after{content:"CERRAR ×";opacity:1;transform:none}

/* 04 / SISTEMA DE TRABAJO — número como fondo de agua y divisores refinados */
.process-grid{
  border-top:1px solid rgba(185,133,50,.45)!important;
  border-bottom:1px solid rgba(185,133,50,.45)!important;
}
.process-step{
  border-right:0!important;
  min-height:330px!important;
  padding:28px 24px!important;
  isolation:isolate;
}
.process-step + .process-step{
  border-left:1px solid rgba(17,16,14,.12)!important;
  box-shadow:-1px 0 0 rgba(216,176,93,.18);
}
.process-step::after{
  content:attr(data-step);
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-52%);
  z-index:0;
  font-size:clamp(8rem,11vw,14rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.08em;
  color:rgba(185,133,50,.09);
  pointer-events:none;
  transition:color .35s,transform .35s;
}
.process-step h3,.process-step p{position:relative;z-index:2}
.process-step h3{
  margin:7.4rem 0 .7rem!important;
  font-size:clamp(2.6rem,3.1vw,3.7rem)!important;
}
.process-step:hover::after{
  color:rgba(255,255,255,.12);
  transform:translateY(-52%) scale(1.04);
}
.process-step>span{display:none!important}

/* 05 / DIRECCIÓN — titular vertical a la altura del modelo + ARKON cruza toda la franja */
.architect{
  grid-template-columns:minmax(330px,.62fr) minmax(0,1.38fr)!important;
  position:relative;
  min-height:820px!important;
}
.architect::before{
  content:"ARKON";
  position:absolute;
  left:-2vw;
  right:-2vw;
  top:50%;
  transform:translateY(-54%);
  z-index:0;
  font-size:clamp(15rem,27vw,34rem);
  line-height:.7;
  font-weight:900;
  letter-spacing:-.09em;
  color:rgba(255,255,255,.045);
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
}
.architect-copy{
  position:relative;
  z-index:5;
  padding:5rem 1rem 5rem 5vw!important;
  align-self:stretch!important;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr auto;
  gap:1.2rem 1.5rem;
  align-items:center;
}
.architect-copy .section-label{grid-column:1/-1}
.architect h2{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  margin:0!important;
  font-size:clamp(4.3rem,5.4vw,6.7rem)!important;
  line-height:.82!important;
  max-height:650px;
  justify-self:center;
  align-self:center;
}
.architect h2 br{display:none}
.architect h2 em{display:inline;color:var(--gold)!important}
.architect-desc{
  max-width:230px!important;
  font-size:13px;
  line-height:1.6;
  align-self:end;
  margin:0 0 1rem!important;
}
.architect-visual{z-index:2}
.architect-word{display:none!important}
.architect-visual img{height:96%!important}

@media(max-width:1000px){
  .statement{grid-template-columns:1fr!important;min-height:auto;padding-top:7rem!important;padding-bottom:7rem!important}
  .statement h2{max-width:10ch!important}
  .statement-side{max-width:none!important}
  .projects-top{grid-template-columns:1fr!important}
  .projects-description{padding-top:0!important;max-width:560px}
  .architect{grid-template-columns:1fr!important}
  .architect-copy{padding:5rem 6vw 1rem!important;display:block!important}
  .architect h2{writing-mode:horizontal-tb;transform:none;max-height:none;margin-top:1rem!important}
  .architect-desc{max-width:500px!important;margin-top:1.4rem!important}
  .architect-visual{min-height:650px}
}
@media(max-width:650px){
  .statement h2{font-size:clamp(4rem,16vw,5.8rem)!important}
  .statement-side>p{font-size:1.05rem!important}
  .statement-watermark{font-size:52vw;bottom:-3rem}
  .blueprint-stage{height:540px!important}
  .plan{width:86%!important;height:50%!important}
  .process-step{min-height:240px!important}
  .process-step + .process-step{border-left:0!important;border-top:1px solid rgba(17,16,14,.12)!important;box-shadow:0 -1px 0 rgba(216,176,93,.18)}
  .process-step h3{margin:4.5rem 0 .6rem!important}
  .process-step::after{font-size:44vw;right:5vw}
  .architect{min-height:auto!important}
  .architect h2{font-size:clamp(4rem,15vw,5.6rem)!important}
}


/* ARKON AJUSTE 03 — SOLO TÍTULO VERTICAL DE DIRECCIÓN */
@media(min-width:1001px){
  .architect-copy{
    grid-template-columns:minmax(170px,220px) 1fr !important;
  }
  .architect h2{
    font-family:"Arial Black","Helvetica Neue",Arial,sans-serif !important;
    font-weight:900 !important;
    font-size:clamp(6.2rem,7.4vw,9.2rem) !important;
    line-height:.70 !important;
    letter-spacing:-.065em !important;
    max-height:770px !important;
    transform:rotate(180deg) scaleX(1.08) !important;
    transform-origin:center center !important;
  }
}