/* ============ SURCO look & feel — Campo Legal ============ */
:root{
  --white:#ffffff;
  --ink:#0a0a0a;
  --g1:#f2f2f2;
  --g2:#d4d4d4;
  --g3:#8c8c8c;
  --g4:#4a4a4a;
  --neon:#b8ff2c;
  --pad:clamp(16px, 3vw, 48px);
  --vh:100vh;
  --sans:'Geist', ui-sans-serif, sans-serif;
  --mono:'Geist Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html{scroll-snap-type:y mandatory}
html,body{margin:0;background:var(--white)}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;font-weight:400}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,p{margin:0}
ol{list-style:none;margin:0;padding:0}
figure{margin:0}
.source{display:none}

/* scroll spacer */
.spacer > div{height:var(--vh);scroll-snap-align:start}

/* ============ Stage ============ */
.stage{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.col{position:relative;overflow:hidden;height:var(--vh)}
.track{will-change:transform}
.tp,.pp{height:var(--vh);position:relative;overflow:hidden}

.divider{position:fixed;top:0;bottom:0;left:50%;width:1px;background:var(--g2);transform:translateX(-.5px);z-index:5;pointer-events:none}

/* ============ Nav ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:32px;
  padding:22px var(--pad);
  color:#fff;
}
.nav__links,.lang{mix-blend-mode:difference}
.logo{color:var(--ink);transition:color .3s;display:flex;align-items:center;gap:12px;font-weight:500;font-size:23px;letter-spacing:-.025em;line-height:30px;padding-left:18px;margin-right:auto;white-space:nowrap}
/* logo PNG is white; the nav's mix-blend-mode:difference renders it dark on light panels and light on dark panels */
.logo__mark{height:26px;width:auto;display:block;filter:invert(1);transition:filter .3s}
.nav.on-dark .logo{color:#fff}
.nav.on-dark .logo__mark{filter:none}
.logo-dot{
  position:fixed;z-index:21;left:var(--pad);top:32px;
  width:8px;height:8px;border-radius:50%;background:var(--neon);
  box-shadow:0 0 14px var(--neon);pointer-events:none;
}
.nav__links{display:flex;gap:24px}
.nav__links a,.lang{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;line-height:20px}
.nav__links a{opacity:.7;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.nav__links a.is-active{opacity:1}
.nav__links a.is-active::before{content:"● "}
.lang{display:flex;gap:6px;align-items:center}
.lang span{opacity:.4}
.lang button{opacity:.55;letter-spacing:.06em;transition:opacity .2s}
.lang button.is-active{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ============ Counter / dots / hint ============ */
.counter{
  position:fixed;z-index:15;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--ink);color:#fff;border-radius:999px;padding:8px 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;white-space:nowrap;
  transition:opacity .35s;pointer-events:none;
}
.counter__cur{color:var(--neon)}
.counter.is-hidden{opacity:0}

.dots{
  position:fixed;z-index:15;right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;
  mix-blend-mode:difference;
}
.dots button{padding:6px 4px;display:block}
.dots button i{display:block;width:18px;height:2px;background:#fff;opacity:.55;transition:width .3s, opacity .3s}
.dots button.is-active i{width:30px;opacity:1}

.hint{
  position:fixed;z-index:15;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;transition:opacity .35s;pointer-events:none;
  margin-left:12px;
}
.hint.is-hidden{opacity:0}

/* ============ Type ============ */
h1{font-size:clamp(46px, min(6.2vw, 11vh), 108px);font-weight:500;letter-spacing:-.045em;line-height:.95;overflow-wrap:break-word}
h2{font-size:clamp(38px, min(4.6vw, 8vh), 80px);font-weight:500;letter-spacing:-.045em;line-height:.95;text-wrap:balance}
h2.h2--sm{font-size:clamp(30px, min(3.4vw, 6.4vh), 58px)}
em{font-style:normal;font-weight:300;color:var(--g3)}
mark{color:inherit;background:linear-gradient(transparent 72%, var(--neon) 72% 88%, transparent 88%)}
.tp p{font-size:clamp(15px, 1.25vw, 19px);line-height:1.45;color:var(--g4);max-width:40ch;text-wrap:pretty}
.tp p.lead{color:var(--ink);font-weight:500}
.label,.meta,.kicker,.n{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* ============ Text panel ============ */
.tp{
  background:var(--white);color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--pad) + 64px) var(--pad) var(--pad);
  gap:20px;
}
.col--right .tp{padding-right:calc(var(--pad) + 28px)}
.kicker{display:flex;align-items:center;gap:10px;color:var(--g3)}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.mid{display:flex;flex-direction:column;gap:clamp(14px, 2.6vh, 28px);min-height:0}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.meta{color:var(--g3)}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* dark text panel */
.tp--dark{background:var(--ink);color:#fff}
.tp--dark mark{background:none;color:var(--neon)}
.tp--dark p{color:#a6a6a6}
.tp--dark .list{border-top-color:#fff}
.tp--dark .list li{border-bottom-color:#2a2a2a}
.tp--dark .list small{color:#8c8c8c}

/* ============ Numbered list ============ */
.list{border-top:1px solid var(--ink)}
.list li{
  display:grid;grid-template-columns:52px 1fr 24px;align-items:baseline;
  padding:clamp(8px,1.4vh,13px) 0;border-bottom:1px solid var(--g2);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);cursor:pointer;
}
.list li:hover{transform:translateX(8px)}
.n{color:var(--g3)}
.t b{display:block;font-weight:500;font-size:clamp(15px, 1.2vw, 19px);letter-spacing:-.015em;line-height:1.25}
.t b em{font-size:.85em}
.t small{display:block;font-size:13px;color:var(--g3);margin-top:3px;line-height:1.4;max-width:52ch}
.a{text-align:right;opacity:0;transition:opacity .25s}
.list li:hover .a{opacity:1}
.more{display:none;font-size:13.5px;line-height:1.45;color:var(--g4);margin-top:8px;max-width:56ch}
.list--acc li.open .more{display:block}
.list--acc li.open .a{opacity:1}
.list--acc li.open{transform:none}
.tp--dark .more{color:#a6a6a6}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 22px;border-radius:999px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  font-size:14px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.btn:hover{background:var(--neon);color:var(--ink);border-color:var(--neon)}
.btn--line{background:transparent;color:var(--ink)}
.tp--dark .btn{background:var(--neon);color:var(--ink);border-color:var(--neon)}
.tp--dark .btn:hover{background:#fff;border-color:#fff}

/* ============ Forms ============ */
.f{display:flex;flex-direction:column;gap:6px}
.f .label{color:var(--g3);transition:color .2s}
.f input,.f select{
  font:inherit;font-size:15px;background:transparent;border:0;border-bottom:1px solid var(--g2);
  padding:8px 0;color:inherit;border-radius:0;outline:none;transition:border-color .2s;width:100%;
  -webkit-appearance:none;appearance:none;
}
.tp--dark .f input,.tp--dark .f select{border-bottom-color:#333;color:#fff}
.tp--dark .f select option{color:var(--ink)}
.f:focus-within .label{color:var(--neon)}
.f input:focus,.f select:focus{border-bottom-color:var(--neon)}
.tp:not(.tp--dark) .f:focus-within .label{color:var(--ink)}
.sent{display:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--neon)}
.tp:not(.tp--dark) .sent{color:var(--ink)}
[data-form].is-sent .sent{display:block}
[data-form].is-sent .f,[data-form].is-sent .btn{display:none}

.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vh,20px) 28px}
.f--wide{grid-column:1 / -1}
.form__end{grid-column:1 / -1;display:flex;align-items:center;gap:16px}

.tp p.disclaimer{
  grid-column:1 / -1;max-width:none;
  font-size:11px;line-height:1.5;color:#7a7a7a;
  border-top:1px solid #2a2a2a;padding-top:12px;
}
.tp p.disclaimer a{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a6a6a6;
  border-bottom:1px solid #444;padding-bottom:2px;transition:color .2s, border-color .2s;
}
.tp p.disclaimer a:hover{color:var(--neon);border-color:var(--neon)}
[data-form].is-sent .disclaimer{display:none}
.legal-links{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:4px}
.legal-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap;transition:background .2s;
}
.legal-links a:hover{background:var(--neon)}
.foot--magnet{display:block}
.magnet{border-top:1px solid var(--g2);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.magnet .label{color:var(--ink)}
.tp p.magnet__p{font-size:14px;color:var(--g3)}
.inline-form{display:flex;align-items:flex-end;gap:16px}
.inline-form .f{flex:1;max-width:320px}

.foot--info{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;align-items:start;border-top:1px solid #2a2a2a;padding-top:14px}
.foot--info .meta{color:#a6a6a6;text-transform:none;letter-spacing:.02em}
.foot--info .meta b{font-weight:400;color:var(--g3);text-transform:uppercase;letter-spacing:.06em;margin-right:8px}

/* ============ Photo panel ============ */
.pp{background:var(--ink);color:#fff}
.pp img{
  position:absolute;left:-6%;top:-6%;width:112%;height:112%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.82);
  will-change:transform;
}
.pp::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 58%, rgba(10,10,10,.6) 100%);
}
.pp__cap{
  position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
}
.col--right .pp__cap{right:calc(var(--pad) + 28px)}
.big{font-size:clamp(72px, 11vw, 190px);font-weight:500;letter-spacing:-.06em;line-height:.8}
.big--brand{font-size:clamp(44px, 6vw, 104px);line-height:.9}
.big sup{color:var(--neon);font-size:.28em;vertical-align:top;position:relative;top:.2em;margin-left:.08em;text-shadow:0 0 14px var(--neon)}
.pp__cap--brand{flex-wrap:wrap}
.desc{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);max-width:34ch;text-align:right;line-height:1.5}

.pp--ph{background:#bdbdbd}
.pp--ph .pp__cap{bottom:max(8px, calc(var(--pad) - 38px))}
.pp__info{
  position:absolute;z-index:2;left:var(--pad);right:calc(var(--pad) + 28px);top:calc(var(--pad) + 30px);
  display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;
  color:var(--ink);
}
.pp__info .meta{color:var(--ink);font-weight:500;text-transform:none;letter-spacing:.02em;line-height:1.5}
.pp__info .meta b{display:table;font-weight:500;color:var(--ink);background:var(--neon);padding:2px 6px;margin-bottom:6px !important;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.pp--ph::after{background:linear-gradient(180deg, transparent 55%, rgba(10,10,10,.55) 100%)}
.ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg, #c4c4c4 0 12px, #b4b4b4 12px 24px);
}
.ph .label{background:var(--white);color:var(--g4);padding:8px 12px;white-space:nowrap;font-size:clamp(8px, 0.8vw, 11.5px);letter-spacing:.04em;transform:translateY(113px)}

/* ============ Responsive ============ */
@media (max-height: 800px){
  .list small{display:none}
}
@media (max-height: 620px){
  .tp p{display:none}
  .list li:nth-child(n+4){display:none}
  .foot--magnet .magnet__p{display:none}
}
@media (max-width: 900px){
  .nav{gap:16px}
  .logo{font-size:19px;gap:9px}
  .logo__mark{height:21px}
  .nav__links,.dots{display:none}
  h1{font-size:clamp(28px, 6vw, 54px)}
  h2,h2.h2--sm{font-size:clamp(24px, 5vw, 44px)}
  .list li{grid-template-columns:34px 1fr}
  .a{display:none}
  .list small{display:none}
  .foot .meta{display:none}
  .foot--info .meta{display:block}
  .desc{display:none}
  .form{grid-template-columns:1fr}
  .f--opt{display:none}
  .col--right .tp{padding-right:var(--pad)}
  .col--right .pp__cap{right:var(--pad)}
  .counter{padding:6px 9px;font-size:10px}
  .inline-form{flex-direction:column;align-items:stretch}
  .foot--info{grid-template-columns:1fr}
  .pp__info{grid-template-columns:1fr;right:var(--pad);gap:10px}
}
@media (max-width: 600px){
  .tp p{display:none}
  .tp p.lead{display:block;font-size:14px}
  .btn{padding:10px 14px;font-size:12.5px}
  .btns .btn--line{display:none}
  .t b{font-size:13.5px}
  .n{font-size:10px}
  .kicker{font-size:10px}
  .foot--info .meta:nth-child(n+3){display:none}
  .foot--info .meta b{display:block}
}