/* ============================================================
   SHELL. Brand-agnostic. Reads every colour and face from brand.css.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}

/* ---------- nav ---------- */
.nav{background:var(--deep);position:sticky;top:0;z-index:40}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:104px;gap:24px}
.logo{display:flex;align-items:center;gap:15px;text-decoration:none;color:#fff;flex:none}
.logo-mark{height:var(--logo-height);width:var(--logo-height);fill:currentColor;flex:none}
.logo-type{display:block}
.logo-type b{display:block;font-weight:700;line-height:1.02;
  font-size:calc(var(--logo-height)*.325);letter-spacing:.015em}
.logo-type i{display:block;font-style:normal;font-weight:300;line-height:1.18;
  font-size:calc(var(--logo-height)*.30);letter-spacing:.238em}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0;align-items:center}
.nav a{color:#fff;text-decoration:none;font-size:15.5px;letter-spacing:.01em;opacity:.92}
.nav a:hover{opacity:1;border-bottom:1px solid #fff;padding-bottom:2px}
.burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--deep);color:#fff;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--deep-2);
  clip-path:polygon(74% 0,100% 0,100% 100%,90% 100%);
  opacity:.42;
}
.hero .wrap{position:relative;z-index:2;padding-top:132px;padding-bottom:150px}
.hero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(40px,5.6vw,74px);line-height:1.06;letter-spacing:-.012em;
  margin:0 0 30px;max-width:17ch;
}
.hero p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:52ch;margin:0 0 40px;color:#d3dcf0}
.btn{
  display:inline-block;background:#fff;color:var(--deep);text-decoration:none;
  font-weight:600;font-size:14px;letter-spacing:.13em;text-transform:uppercase;
  padding:16px 34px;
}
.btn:hover{background:var(--tint)}

/* ---------- three-panel band: copy | photo | accent ---------- */
.band{display:grid;grid-template-columns:1fr 1fr 1fr;min-height:520px}
.band .pane{display:flex;align-items:center;padding:64px 56px}
.band .pane.copy{background:var(--paper)}
.band .pane.copy p{margin:0;font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--ink)}
.band .pane.accent{background:var(--mid);color:#fff}
.band .pane.accent p{margin:0 0 26px;font-size:clamp(18px,1.55vw,21px);line-height:1.55}
.band .photo{background-size:cover;background-position:center}
.textlink{
  color:#fff;text-decoration:none;font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid #fff;padding-bottom:5px;
}
.textlink.dark{color:var(--deep);border-color:var(--deep)}

/* ---------- section scaffolding ---------- */
section{padding:104px 0}
section.deep{background:var(--deep);color:#fff}
section.tint{background:var(--tint)}
h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(32px,4vw,52px);line-height:1.1;margin:0 0 18px;max-width:20ch;letter-spacing:-.008em;
}
.deck{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:60ch;margin:0 0 56px}
section.deep .deck{color:#c3d0e8}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.card{padding:52px 42px;min-height:300px}
.card:nth-child(1){background:var(--mid);color:#fff}
.card:nth-child(2){background:var(--tint);color:var(--ink)}
.card:nth-child(3){background:var(--deep);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.card h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.2;margin:0 0 18px}
.card p{margin:0;font-size:16.5px;line-height:1.6;opacity:.94}
.spec{
  margin:0;padding:30px 42px;background:var(--paper);color:var(--ink-soft);
  font-size:15.5px;border:1px solid var(--line);border-top:0;
}
.spec b{color:var(--deep);font-weight:600}

/* ---------- numbered approach rows ---------- */
.rows{border-top:1px solid var(--line)}
.rows .row{
  display:grid;grid-template-columns:74px 300px 1fr;gap:36px;align-items:start;
  padding:38px 0;border-bottom:1px solid var(--line);
}
.rows .n{font-family:var(--display);font-size:38px;font-weight:300;color:var(--mid);line-height:1}
.rows .stage{min-width:0}
.rows h3{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.25;margin:0;color:var(--deep)}
.rows .when{margin:9px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mid)}
.rows p{margin:0;color:var(--ink-soft);max-width:56ch}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:400px 1fr;gap:72px;align-items:start}
.founder .shot{position:relative}
.founder .shot img{width:100%}
.founder .shot::before{
  content:"";position:absolute;left:-26px;bottom:-26px;width:190px;height:190px;
  background:var(--mid);z-index:-1;
}
.founder h2{margin-bottom:6px;font-size:clamp(30px,3.4vw,44px);color:var(--deep)}
.founder .role{font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin:0 0 30px}
.founder p{color:var(--ink-soft);max-width:60ch;margin:0 0 20px}
.founder p.turn{color:var(--deep);font-weight:600}
.founder .creds{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-size:15px}

/* ---------- contact ---------- */
#contacto h2{color:#fff}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.contact .mail{
  font-family:var(--display);font-weight:400;font-size:clamp(21px,2.3vw,30px);
  color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:6px;display:inline-block;margin-bottom:42px;word-break:break-word;
}
.contact .mail:hover{border-color:#fff}
.tel{margin-bottom:16px}
.tel span{
  display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#8fa4c8;margin-bottom:2px;
}
.tel b{font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,25px);color:#fff}

footer{background:var(--deep);color:#8fa4c8;padding:34px 0;font-size:13.5px;
  border-top:1px solid rgba(255,255,255,.12)}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .band{grid-template-columns:1fr}
  .band .photo{min-height:340px}
  .founder{grid-template-columns:1fr;gap:44px}
  .founder .shot{max-width:380px}
  .contact{grid-template-columns:1fr;gap:44px}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .rows .row{grid-template-columns:52px 1fr;gap:20px}
  .rows .row p{grid-column:2}
}
@media (max-width:720px){
  .wrap{padding:0 24px}
  .nav .wrap{height:82px}
  .nav ul{display:none}
  .nav ul.open{
    display:flex;position:absolute;top:82px;left:0;right:0;background:var(--deep);
    flex-direction:column;gap:0;padding:8px 24px 22px;border-top:1px solid rgba(255,255,255,.14);
  }
  .nav ul.open li{padding:11px 0}
  .burger{display:block}
  .hero .wrap{padding-top:78px;padding-bottom:88px}
  .hero::after{clip-path:polygon(78% 0,100% 0,100% 100%,94% 100%)}
  section{padding:68px 0}
  .band .pane{padding:48px 24px}
  .card{padding:40px 26px}
  .spec{padding:24px 26px}
}