/* ============================================================
   PolyAethers — Sector pages
   ============================================================ */

/* The sector pages keep a dark fixed nav from the top (no hero canvas under it),
   so nav text stays on-dark until scrolled. */
body.sector{background:var(--paper)}
body.sector .nav:not(.scrolled) .brand,
body.sector .nav:not(.scrolled) .nav-links a,
body.sector .nav:not(.scrolled) .nav-sectors-btn{color:var(--on-night)}
body.sector .nav:not(.scrolled) .brand .dot{color:var(--on-night-soft)}
body.sector .nav:not(.scrolled) .nav-links a{color:var(--on-night-soft)}
body.sector .nav:not(.scrolled) .nav-links a:hover,
body.sector .nav:not(.scrolled) .nav-sectors-btn:hover{color:var(--on-night)}
body.sector .nav:not(.scrolled) .lang button{color:var(--on-night-faint)}
body.sector .nav:not(.scrolled) .lang button.active{color:var(--on-night)}
body.sector .nav:not(.scrolled) .nav-cta{background:var(--on-night);color:var(--night)}
body.sector .nav:not(.scrolled) .burger span{background:var(--on-night)}

/* ── Hero ─────────────────────────────────── */
.sec-hero{position:relative;background:var(--night);color:var(--on-night);overflow:hidden;padding:11rem 0 clamp(4rem,8vh,7rem)}
.sec-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.sec-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(8,7,6,.74) 0%,rgba(8,7,6,.34) 52%,rgba(8,7,6,.08) 100%),linear-gradient(to bottom,rgba(8,7,6,0) 58%,rgba(8,7,6,.8) 100%)}
.sec-hero .wrap{position:relative;z-index:2}
.sec-ghost{position:absolute;right:-2%;top:50%;transform:translateY(-46%);font-size:clamp(9rem,26vw,28rem);font-weight:700;letter-spacing:-.05em;line-height:.8;color:rgba(242,239,233,.04);user-select:none;pointer-events:none;z-index:1;white-space:nowrap}
.crumb{display:flex;align-items:center;gap:.7rem;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-faint);margin-bottom:clamp(3rem,7vh,5rem)}
.crumb a{color:var(--on-night-soft);text-decoration:none;transition:color .3s}
.crumb a:hover{color:var(--on-night)}
.crumb .sep{opacity:.5}
.crumb .here{color:var(--on-night)}
.sec-hero .eyebrow{color:var(--on-night-soft);margin-bottom:1.8rem}
.sec-hero h1{font-size:calc(clamp(2.8rem,6.5vw,6rem) * var(--tscale));font-weight:650;letter-spacing:-.04em;line-height:.98;color:var(--on-night);max-width:16ch}
.sec-hero .sec-tag{margin-top:1.8rem;max-width:46ch;font-size:1.12rem;line-height:1.65;color:var(--on-night-soft)}
.sec-hero .hero-actions{margin-top:2.8rem}
.sec-hero .hero-actions .btn-fill{background:var(--on-night);color:var(--night)}
.sec-hero .hero-actions .btn-fill:hover{background:#fff}
.sec-hero .hero-actions .btn-outline{color:var(--on-night);border-color:var(--on-night-line)}
.sec-hero .hero-actions .btn-outline:hover{border-color:var(--on-night)}

/* ── Lead statement ───────────────────────── */
.sec-lead{padding:clamp(6rem,12vh,10rem) 0}
.sec-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.sec-lead .eyebrow{margin-bottom:1.8rem}
.sec-lead h2{font-size:calc(clamp(1.9rem,3.4vw,3rem) * var(--tscale));font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.sec-lead p{font-size:1.04rem;line-height:1.78;color:var(--muted)}
.sec-lead p+p{margin-top:1.4rem}

/* ── Applications grid ────────────────────── */
.apps{padding:clamp(6rem,12vh,10rem) 0;background:var(--surface)}
.apps-head{margin-bottom:clamp(3rem,6vh,4.5rem)}
.apps-head .eyebrow{margin-bottom:1.4rem}
.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.app{position:relative;padding:clamp(2rem,3vw,3rem) clamp(1.6rem,2vw,2.4rem) clamp(2.4rem,4vw,3.4rem);border-bottom:1px solid var(--line-soft);transition:background .35s var(--ease)}
.app:not(:nth-child(3n)){border-right:1px solid var(--line-soft)}
.app:hover{background:var(--surface-2)}
.app-num{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--faint);margin-bottom:1.6rem}
.app-name{font-size:1.22rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.app-arr{position:absolute;right:clamp(1.6rem,2vw,2.4rem);bottom:clamp(2.4rem,4vw,3.4rem);width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:all .35s var(--ease)}
.app:hover .app-arr{opacity:1;transform:translateY(0)}
.app-arr svg{width:11px;height:11px;stroke:var(--ink);fill:none;stroke-width:1.6}
.app-desc{font-size:.9rem;line-height:1.62;color:var(--muted);margin-top:.9rem;max-width:34ch}
.app{padding-bottom:clamp(2.8rem,4.5vw,3.8rem)}

/* ── Project examples ("Proyectos tipo") ── */
.sec-examples{padding:clamp(6rem,12vh,10rem) 0;background:var(--surface)}
.ex-head{margin-bottom:clamp(3rem,6vh,4.5rem)}
.ex-head .eyebrow{margin-bottom:1.4rem}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.5rem)}
.ex-card{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--card-radius);padding:clamp(2rem,2.6vw,2.7rem);display:flex;flex-direction:column;opacity:0;transform:translateY(22px);transition:border-color .4s,transform .4s var(--ease)}
.ex-card:hover{border-color:var(--line);transform:translateY(-3px)}
.ex-num{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--faint);margin-bottom:1.6rem;display:flex;align-items:center;gap:.7rem}
.ex-num::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.ex-title{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.3;margin-bottom:.9rem}
.ex-body{font-size:.92rem;line-height:1.72;color:var(--muted);flex:1}
.ex-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.ex-tag{font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line-soft);border-radius:999px;padding:.42rem .85rem}

/* ── Materials (reuse mat-grid) — sector tweak ── */
.sec-materials{padding:clamp(6rem,12vh,10rem) 0}
.sec-materials .mat-head{margin-bottom:clamp(3rem,6vh,4.5rem)}
.sec-materials .mat-grid{grid-template-columns:repeat(3,1fr)}

@media(max-width:1080px){
  .apps-grid{grid-template-columns:1fr 1fr}
  .app:not(:nth-child(3n)){border-right:none}
  .ex-grid{grid-template-columns:1fr 1fr}
  .app:nth-child(odd){border-right:1px solid var(--line-soft)}
  .sec-materials .mat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .sec-lead-grid{grid-template-columns:1fr;gap:2rem}
  .sec-hero h1{max-width:none}
}
@media(max-width:560px){
  .apps-grid{grid-template-columns:1fr}
  .app{border-right:none!important}
  .sec-materials .mat-grid{grid-template-columns:1fr}
  .crumb{flex-wrap:wrap}
}

/* ── Mobile type & spacing refinement (≤600px) — desktop untouched ── */
@media(max-width:600px){
  .sec-hero{padding:7rem 0 3.6rem}
  .sec-hero .eyebrow{margin-bottom:1.3rem}
  .sec-hero h1{font-size:2.4rem;line-height:1.04}
  .sec-hero .sec-tag{margin-top:1.3rem;font-size:1rem;line-height:1.6}
  .sec-hero .hero-actions{margin-top:2rem;gap:1.1rem}
  .sec-ghost{font-size:8rem;right:-4%}
  .crumb{margin-bottom:2.4rem;font-size:.72rem}

  .sec-lead{padding:4.6rem 0}
  .sec-lead-grid{gap:1.6rem}
  .sec-lead .eyebrow{margin-bottom:1.3rem}
  .sec-lead h2{font-size:1.7rem;line-height:1.14}
  .sec-lead p{font-size:.96rem;line-height:1.72}

  .sec-apps{padding:4.6rem 0}
  .apps-head{margin-bottom:2.4rem}
  .app{padding:1.9rem 0 2.2rem}
  .app-num{margin-bottom:1.1rem}
  .app-name{font-size:1.12rem}
  .app-arr{right:.2rem;bottom:2.2rem}

  .sec-materials{padding:4.6rem 0}
}
@media(max-width:760px){
  .ex-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .sec-hero h1{font-size:2.15rem}
  .sec-lead h2{font-size:1.56rem}
}