/* ============================================================
   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-vid{object-fit:cover;width:100%;height:100%}
.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-bg--dark::after{background:linear-gradient(95deg,rgba(8,7,6,.96) 0%,rgba(8,7,6,.86) 52%,rgba(8,7,6,.62) 100%),linear-gradient(to bottom,rgba(8,7,6,.4) 30%,rgba(8,7,6,.95) 100%)}
.sec-hero-bg--opaque::after{background:rgba(8,7,6,.9)}
.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);margin-bottom:1.8rem}
/* Left-weighted scrim: hero copy is left-anchored, so the opaque end sits under
   the text (clears 4.5:1 on the measured photo luminance) and the right side
   keeps the image readable. Alphas derived from pixel sampling of each hero. */
.sec-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(8,7,6,.94) 0%,rgba(8,7,6,.9) 45%,rgba(8,7,6,.84) 75%,rgba(8,7,6,.4) 100%)}
@media(max-width:600px){.sec-hero-scrim{background:linear-gradient(180deg,rgba(8,7,6,.86) 0%,rgba(8,7,6,.9) 100%)}}
.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)}
.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 (full-bleed video, "De la cocina a la mesa") ── */
.sec-lead{padding:0}
.sec-lead-video{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;overflow:hidden;background:var(--night);color:var(--on-night)}
.sec-lead-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sec-lead-vid-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(8,7,6,.86) 0%,rgba(8,7,6,.62) 45%,rgba(8,7,6,.28) 100%)}
.sec-lead-video-copy{position:relative;z-index:2;width:100%}
.sec-lead-copy{max-width:640px}
.sec-lead .eyebrow{margin-bottom:1.8rem;color:var(--on-night-soft)}
.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(--on-night)}
.sec-lead p{font-size:1.04rem;line-height:1.78;color:var(--on-night-soft)}
.sec-lead p+p{margin-top:1.4rem}
/* Image variant (other sector pages: no video available) — same full-bleed treatment */
.sec-lead-img-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}

/* ── 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-hero h1{max-width:none}
  .sec-lead-video{min-height:88vh;min-height:88dvh;padding:7rem 0 3rem}
  .sec-lead-copy{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-video{min-height:78vh;min-height:78dvh;padding:6.5rem 0 2.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}
}

/* ============================================================
   SERVICE DETAIL blocks (personalizacion-restaurantes.html)
   ============================================================ */
.svc-detail{padding:clamp(5.5rem,10vh,8rem) 0}
.svc-detail.alt{background:var(--surface)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.svc-grid.text-only{align-items:start}
.svc-media{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.svc-media.single{grid-template-columns:1fr}
.svc-img{position:relative;border-radius:var(--card-radius);overflow:hidden;aspect-ratio:3/4;background:var(--night)}
.svc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.svc-img-tall{aspect-ratio:4/5}
.svc-copy .eyebrow{margin-bottom:1.4rem}
.svc-copy h3{font-size:calc(clamp(1.7rem,2.8vw,2.3rem) * var(--tscale));font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--ink);margin-bottom:1.3rem}
.svc-copy h3.svc-sub{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2.2rem;margin-bottom:1.1rem}
.apps-note{font-size:.88rem;line-height:1.7;color:var(--muted);max-width:62ch;margin-top:2.4rem}
.apps-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.apps-grid.cols-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.apps-grid.cols-4{grid-template-columns:1fr}}
.svc-copy p{font-size:1rem;line-height:1.78;color:var(--muted)}
.svc-copy p+p{margin-top:1.2rem}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-bottom:.4rem}
.svc-list li{font-size:.96rem;line-height:1.6;color:var(--muted);padding-left:1.3rem;position:relative}
.svc-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.svc-price{margin-top:1.6rem;font-size:.98rem;font-weight:600;color:var(--ink-soft);padding:.9rem 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.svc-price strong{color:var(--ink);font-size:1.1em}
.btn-ghost{margin-top:1.7rem}
@media(max-width:820px){
  .svc-grid{grid-template-columns:1fr;gap:2rem}
  .svc-media{order:-1}
}
@media(max-width:600px){
  .svc-detail{padding:4rem 0}
  .svc-copy h3{font-size:1.5rem}
  .svc-media{grid-template-columns:1fr 1fr;gap:.8rem}
}