/* AperClau · zona pages */

/* breadcrumb */
.crumb{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,241,232,.55);
  padding: 28px var(--pad-x) 0;
  display:flex; gap: 12px; align-items:center;
}
.crumb a:hover{ color: var(--mostaza); }
.crumb .here{ color: var(--mostaza); }
.crumb .sep{ opacity: .35; }

/* ZONE HERO */
.zhero{
  padding: 56px var(--pad-x) 80px;
  position: relative;
  overflow: hidden;
}
.zhero .ey{
  display:flex; justify-content:space-between; align-items:center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin-bottom: 56px;
  font-family: var(--mono); font-size: 12px; letter-spacing:.14em; text-transform: uppercase;
  color: rgba(245,241,232,.7);
}
.zhero .ey .y{ color: var(--mostaza); }
.zhero .grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 80px;
  align-items:start;
}
.zhero h1{
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 168px;
  line-height: .85;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.zhero h1 .y{ color: var(--mostaza); }
.zhero h1 .stroke{
  -webkit-text-stroke: 2px var(--mostaza);
  color: transparent;
}
.zhero .lead{
  margin-top: 36px;
  font-size: 21px;
  line-height: 1.45;
  color: rgba(245,241,232,.78);
  max-width: 560px;
}
.zhero .lead strong{ color: var(--crema); font-weight: 600; }
.zhero .actions{ margin-top: 36px; display:flex; gap: 12px; }

.zhero .map{
  background: var(--ink-2);
  border: 1px solid var(--line);
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}
.zhero .map .tag{
  position: absolute; top: 16px; left: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.16em; text-transform: uppercase;
  color: rgba(245,241,232,.5);
}
.zhero .map .pin{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display:flex; flex-direction: column; align-items: center; gap: 8px;
}
.zhero .map .pin .dot{
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--mostaza);
  box-shadow: 0 0 0 8px rgba(229,184,58,.18), 0 0 0 18px rgba(229,184,58,.08);
}
.zhero .map .pin .lbl{
  font-family: var(--display2); font-weight: 800; font-size: 24px; letter-spacing:.02em;
  text-transform: uppercase; color: var(--crema);
}

/* TECH FICHA */
.ficha{
  background: var(--mostaza);
  color: var(--ink);
  padding: 64px var(--pad-x);
}
.ficha .row{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 32px;
}
.ficha .col{
  padding-right: 24px;
  border-right: 1px solid rgba(11,11,11,.18);
}
.ficha .col:last-child{ border-right: 0; }
.ficha .lbl{
  font-family: var(--mono); font-size: 11px; letter-spacing:.16em; text-transform: uppercase;
  color: rgba(11,11,11,.55); margin-bottom: 16px;
}
.ficha .val{
  font-family: var(--display); font-weight: 900;
  font-size: 88px; line-height: .85;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ficha .val .unit{ font-family: var(--display2); font-weight: 800; font-size: 36px; letter-spacing:.02em; opacity:.65; margin-left: 4px; vertical-align: top;}
.ficha .note{
  font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform: uppercase;
  color: rgba(11,11,11,.7); margin-top: 14px;
}

/* WORK BLOCK */
.work{
  background: var(--ink);
  padding: 120px var(--pad-x);
}
.work .head{
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
.work .head h2{
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 96px;
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.work .head h2 .y{ color: var(--mostaza); }
.work .head p{
  margin: 0;
  font-size: 17px; line-height: 1.55;
  color: rgba(245,241,232,.7);
  max-width: 420px;
}
.cases{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.case{
  background: var(--ink);
  padding: 36px 32px;
  min-height: 320px;
  display:flex; flex-direction:column;
}
.case .num{
  font-family: var(--mono); font-size: 12px; letter-spacing:.14em; color: var(--mostaza);
  margin-bottom: 28px;
}
.case h3{
  margin: 0 0 16px;
  font-family: var(--display2);
  font-weight: 800; font-size: 28px; line-height: 1.05;
  text-transform: uppercase;
  color: var(--crema);
}
.case p{
  margin: 0;
  font-size: 15px; line-height: 1.5;
  color: rgba(245,241,232,.65);
}
.case .tag{
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing:.14em; text-transform: uppercase;
  color: rgba(245,241,232,.55);
  display: flex; justify-content: space-between;
}
.case .tag .price{ color: var(--mostaza); }

/* LOCKS BLOCK */
.locks{
  background: var(--crema);
  color: var(--ink);
  padding: 120px var(--pad-x);
}
.locks .head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom: 56px;
}
.locks h2{
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 88px;
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
  max-width: 760px;
}
.locks h2 .y{ color: var(--mostaza-2); }
.locks .head .right{
  text-align: right;
  font-family: var(--mono); font-size: 12px; letter-spacing:.14em; text-transform: uppercase;
  color: rgba(11,11,11,.6);
  max-width: 280px;
}
.locks-list{
  border-top: 1px solid rgba(11,11,11,.14);
}
.lock-row{
  display:grid; grid-template-columns: 80px 1fr 1.2fr 1fr 200px;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(11,11,11,.14);
  transition: background .15s ease;
}
.lock-row:hover{ background: rgba(11,11,11,.04); }
.lock-row .n{
  font-family: var(--mono); font-size: 13px; letter-spacing:.14em; color: rgba(11,11,11,.45);
}
.lock-row .name{
  font-family: var(--display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
}
.lock-row .desc{
  font-size: 15px; line-height: 1.45;
  color: rgba(11,11,11,.7);
}
.lock-row .brand{
  font-family: var(--mono); font-size: 12px; letter-spacing:.12em; text-transform: uppercase;
  color: rgba(11,11,11,.6);
}
.lock-row .freq{
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase;
  color: rgba(11,11,11,.5);
  text-align: right;
}
.lock-row .freq strong{ color: var(--mostaza-2); font-family: var(--display2); font-weight: 800; font-size: 22px; letter-spacing:.02em; display:block; margin-bottom: 4px;}

/* ZONE CTA */
.zcta{
  background: var(--mostaza);
  color: var(--ink);
  padding: 96px var(--pad-x);
}
.zcta .grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
.zcta h2{
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 120px;
  line-height: .85;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.zcta h2 .stroke{
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
}
.zcta .tel{ color: var(--ink); font-size: 96px; line-height: 1; display:block; margin-top: 32px;}
.zcta .right{
  font-family: var(--mono); font-size: 13px; letter-spacing:.1em; text-transform: uppercase;
  color: var(--ink);
}
.zcta .right h4{
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 8px; color: rgba(11,11,11,.55); font-weight: 500;
}
.zcta .right .block{ margin-bottom: 28px; }
.zcta .right .block .v{ font-family: var(--display2); font-weight: 800; font-size: 24px; letter-spacing:.02em; line-height: 1.1;}

/* ZONES HUB */
.hub-hero{
  padding: 64px var(--pad-x) 96px;
}
.hub-hero .ey{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin-bottom: 64px;
  font-family: var(--mono); font-size: 12px; letter-spacing:.14em; text-transform: uppercase;
  color: rgba(245,241,232,.7);
  display:flex; justify-content:space-between;
}
.hub-hero .ey .y{ color: var(--mostaza); }
.hub-hero h1{
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 200px;
  line-height: .85;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.hub-hero h1 .y{ color: var(--mostaza); }
.hub-hero h1 .stroke{ -webkit-text-stroke: 2px var(--mostaza); color: transparent; }
.hub-hero .lead{
  margin-top: 36px;
  font-size: 21px; line-height: 1.45;
  color: rgba(245,241,232,.75);
  max-width: 720px;
}

.hub-zones{
  background: var(--ink);
  padding: 0 var(--pad-x) 120px;
}
.hub-zone-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.hub-zone-grid > a:first-child{ grid-column: span 2; }
.hub-zone{
  background: var(--ink);
  padding: 56px 56px;
  display:grid; grid-template-columns: 1fr auto; gap: 48px; align-items:center;
  min-height: 360px;
  position: relative;
  overflow: hidden;
  color: var(--crema);
  transition: background .2s ease;
}
.hub-zone:hover{ background: var(--ink-2); }
.hub-zone:hover h3 .name{ color: var(--mostaza); }
.hub-zone .num-mega{
  font-family: var(--display); font-weight: 900;
  font-size: 220px; line-height: .85;
  letter-spacing: -.03em;
  -webkit-text-stroke: 2px var(--mostaza);
  color: transparent;
  position: absolute; top: 24px; right: 56px;
  line-height: .85;
}
.hub-zone .stack{ position: relative; z-index: 2; }
.hub-zone .stack .sub{
  font-family: var(--mono); font-size: 12px; letter-spacing:.14em; color: var(--mostaza); text-transform: uppercase;
  margin-bottom: 16px;
}
.hub-zone h3{
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 96px;
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.hub-zone h3 .name{ color: var(--crema); transition: color .2s ease; }
.hub-zone p{
  margin: 0;
  font-size: 16px; line-height: 1.5;
  color: rgba(245,241,232,.7);
  max-width: 480px;
}
.hub-zone .meta{
  margin-top: 32px;
  display:flex; gap: 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.14em; text-transform: uppercase;
  color: rgba(245,241,232,.55);
}
.hub-zone .meta strong{ display:block; font-family: var(--display2); font-weight: 800; font-size: 24px; letter-spacing: .02em; color: var(--mostaza); margin-bottom: 4px; }
.hub-zone .arrow-cta{
  position: relative; z-index: 2;
  font-family: var(--mono); font-size: 12px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--mostaza);
  display:flex; align-items:center; gap: 14px;
  white-space: nowrap;
}
.hub-zone .arrow-cta .arr{
  width: 56px; height: 56px; border-radius: 999px; border: 1.5px solid var(--mostaza);
  display:grid; place-items:center; font-size: 18px; color: var(--mostaza);
}

/* First (featured) hub-zone bigger */
.hub-zone.feat{
  background: var(--mostaza); color: var(--ink);
  display:grid; grid-template-columns: 1.4fr 1fr;
}
.hub-zone.feat:hover{ background: var(--mostaza); }
.hub-zone.feat h3 .name{ color: var(--ink); }
.hub-zone.feat .stack .sub{ color: var(--ink); opacity: .7; }
.hub-zone.feat p{ color: rgba(11,11,11,.75); max-width: 520px; font-size: 19px; }
.hub-zone.feat .meta{ color: rgba(11,11,11,.6); }
.hub-zone.feat .meta strong{ color: var(--ink); }
.hub-zone.feat .arrow-cta{ color: var(--ink); }
.hub-zone.feat .arrow-cta .arr{ border-color: var(--ink); color: var(--ink); }
.hub-zone.feat .num-mega{ -webkit-text-stroke: 2px rgba(11,11,11,.5); color: transparent;}