:root{
    --ink:        #0E1E3A;
    --ink-2:      #16294B;
    --ink-soft:   rgba(14,30,58,0.62);
    --ink-mute:   rgba(14,30,58,0.38);
    --hair:       rgba(14,30,58,0.12);
    --hair-strong:rgba(14,30,58,0.24);

    --paper:      #FFFFFF;
    --paper-2:    #F7F5EE;
    --paper-3:    #FAF9F4;

    --moss:       #3E6E4A;
    --moss-2:     #2F5238;
    --signal:     #C9522A;

    --font-display: 'Archivo Narrow', sans-serif;
    --font-sans:    'Geist', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  }
  /* View Transitions — animaciones para document.startViewTransition() */
  @keyframes vt-out {
    to { opacity: 0; transform: translate3d(0, 4px, 0); }
  }
  @keyframes vt-in {
    from { opacity: 0; transform: translate3d(0, -4px, 0); }
  }
  ::view-transition-old(root) {
    animation: 170ms cubic-bezier(0.4,0,0.2,1) vt-out;
  }
  ::view-transition-new(root) {
    animation: 190ms cubic-bezier(0.16,1,0.3,1) vt-in;
  }
  /* Topbar stays pinned — zero animation so it looks fixed */
  ::view-transition-old(topbar),
  ::view-transition-new(topbar) { animation-duration: 0ms }
  /* Respect reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0ms }
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0; background:var(--paper); color:var(--ink); scroll-behavior:smooth; overflow-x:hidden}
  html{ scrollbar-gutter: stable }
  html.restore-scroll{ scroll-behavior: auto !important }
  section[id]{ scroll-margin-top: 60px }
  body{
    font-family:var(--font-sans);
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body.modal-lock{
    overflow:hidden;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    padding-right: var(--scrollbar-comp, 0px);
  }
  a{color:inherit; text-decoration:none}

  /* =================================================================
     CHROME — top nav bar (the only thing that looks "websitey")
     ================================================================= */
  .topbar{
    display:flex; align-items:stretch;
    border-bottom:1px solid var(--ink);
    background:var(--paper);
    height: 56px;
    position:sticky; top:0; z-index:20;
    view-transition-name: topbar;
  }
  .topbar .brand{
    display:flex; align-items:center; gap:12px;
    padding: 0 20px; border-right:1px solid var(--ink);
    min-width: 240px;
    text-decoration:none; color:inherit; cursor:pointer;
  }
  .topbar .brand-mk{
    width:32px; height:32px; border-radius:999px;
    overflow:hidden; background:#fff;
    position:relative;
  }
  .topbar .brand-mk img{ width:100%; height:100%; margin:0; display:block }
  .topbar .brand-text{
    font-family:var(--font-display); font-weight:700;
    font-size:14px; text-transform:uppercase; letter-spacing:.02em;
    line-height:1; display:flex; flex-direction:column; gap:3px;
  }
  .topbar .brand-text em{ font-style:normal; font-weight:500; color:var(--moss-2); font-size:11px; letter-spacing:.08em }

  .topbar nav{
    display:flex; align-items:stretch; flex:1;
    justify-content:center;
  }
  .topbar nav a{
    display:flex; align-items:center;
    padding: 0 22px;
    font-family:var(--font-mono); font-size:11px;
    letter-spacing:.16em; text-transform:uppercase;
    color:rgba(14,30,58,0.72);
    border-right:1px solid var(--hair);
    transition: background 160ms, color 160ms;
    position:relative;
  }
  .topbar nav a:hover{ color:var(--ink); background:var(--paper-2) }
  .topbar nav a.active{ color:var(--ink) }
  .topbar nav a.active::after{
    content:''; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; background:var(--moss);
  }
  .menu-toggle{
    display:none;
    width: 52px;
    min-width: 52px;
    border: none;
    border-right: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    position: relative;
  }
  .menu-toggle span{
    display:block;
    width: 18px;
    height: 2px;
    background: currentColor;
    margin: 5px auto;
    transform-origin: center;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 160ms;
  }
  .topbar.menu-open .menu-toggle span:first-child{ transform: translateY(3.5px) rotate(45deg) }
  .topbar.menu-open .menu-toggle span:last-child{ transform: translateY(-3.5px) rotate(-45deg) }

  .topbar .right{
    display:flex; align-items:stretch;
    border-left:1px solid var(--ink);
  }
  .topbar .live-coord{
    display:flex; align-items:center; gap:10px;
    padding: 0 16px; border-right:1px solid var(--hair);
    font-family:var(--font-mono); font-size:10.5px;
    color:var(--ink-soft); letter-spacing:.06em;
  }
  .topbar .live-coord b{ color:var(--ink); font-weight:500 }
  .topbar .live-coord .blink{ width:7px; height:7px; background:var(--moss); border-radius:999px; animation:blink 1.2s infinite }
  @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

  .topbar .cta{
    display:flex; align-items:center; gap:8px;
    padding: 0 22px; background:var(--ink); color:var(--paper);
    font-family:var(--font-mono); font-size:11px;
    letter-spacing:.16em; text-transform:uppercase; font-weight:500;
    transition: background 160ms;
  }
  .topbar .cta:hover{ background:var(--moss-2) }
  .topbar .cta svg{ width:14px; height:14px }

  /* =================================================================
     HERO — Plano topográfico en vivo
     ================================================================= */
  .hero{
    display:grid;
    grid-template-columns: 32px 1fr 360px;
    grid-template-rows: 24px 1fr 28px;
    height: calc(100vh - 56px);
    min-height: 640px;
    background: var(--paper);
    position:relative;
    overflow:hidden;
  }

  /* edge labels — coordinate ruler around the drawing area */
  .grat-top, .grat-bot, .grat-left{
    background: var(--ink); color: rgba(247,245,238,0.75);
    font-family:var(--font-mono); font-size:9px;
    letter-spacing:.06em;
    display:flex;
    overflow:hidden;
  }
  .grat-top{
    grid-column: 2 / 4; grid-row: 1;
    border-bottom:1px solid var(--ink);
    align-items:center; justify-content:space-between; padding: 0 12px;
  }
  .grat-top .ax{display:flex; gap:48px}
  .grat-top .ax span{ position:relative }
  .grat-top .ax span::after{ content:''; position:absolute; left:50%; bottom:-12px; width:1px; height:6px; background:rgba(247,245,238,0.5) }
  .grat-left{
    grid-column:1; grid-row: 2 / 5;
    border-right:1px solid var(--ink);
    flex-direction:column; align-items:center; justify-content:space-between;
    padding: 14px 0;
  }
  .grat-left span{
    writing-mode: vertical-rl; transform: rotate(180deg);
    white-space:nowrap;
  }

  /* the drawing area */
  .drawing{
    grid-column: 2; grid-row: 2;
    position:relative;
    background:
      linear-gradient(to right, rgba(14,30,58,0.04) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(to bottom, rgba(14,30,58,0.04) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(to right, rgba(14,30,58,0.10) 1px, transparent 1px) 0 0 / 160px 160px,
      linear-gradient(to bottom, rgba(14,30,58,0.10) 1px, transparent 1px) 0 0 / 160px 160px,
      var(--paper);
    cursor: crosshair;
    overflow:hidden;
  }
  .drawing svg.parcel{
    position:absolute; inset:0;
    width:100%; height:100%;
    display:block;
  }
  .drawing .edge{
    fill: rgba(14,30,58,0.02);
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-linejoin: round;
  }

  .drawing .vtx{}
  .drawing .edge-label{}
  .drawing .interior{}

  /* cursor follower */
  .cursor-mark{
    position:absolute; left:0; top:0;
    width: 32px; height:32px;
    pointer-events:none;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity:0;
    transition: opacity 200ms;
  }
  .drawing:hover .cursor-mark{ opacity:1 }
  .cursor-mark::before, .cursor-mark::after{
    content:''; position:absolute; background:var(--moss);
  }
  .cursor-mark::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-0.5px) }
  .cursor-mark::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-0.5px) }
  .cursor-mark .ring{
    position:absolute; inset:8px; border:1px solid var(--moss); border-radius:999px;
  }
  .cursor-mark .ll{
    position:absolute; left: 22px; top: -4px;
    font-family:var(--font-mono); font-size:10px;
    color: var(--ink); background: var(--paper);
    padding: 2px 6px; border:1px solid var(--ink);
    white-space:nowrap;
  }

  /* pre-plotted project markers (real MJ projects, no click required) */
  .pm{
    position:absolute; transform:translate(-50%,-50%);
    z-index: 4;
    cursor: pointer;
  }
  .pm .pin{
    width:18px; height:18px; border-radius:999px;
    border:1.5px solid var(--ink); background: var(--paper);
    display:grid; place-items:center;
    transition: background 160ms, border-color 160ms;
  }
  .pm .pin::after{
    content:''; width:6px; height:6px; border-radius:999px; background:var(--moss-2);
  }
  .pm:hover .pin{ background:var(--moss); border-color:var(--moss-2) }
  .pm:hover .pin::after{ background:var(--paper) }
  .pm .pm-card{
    position:absolute; left:24px; top:-8px;
    width: 220px;
    background:var(--paper); border:1px solid var(--ink);
    padding: 12px 14px;
    opacity:0; pointer-events:none;
    transform: translateX(-6px);
    transition: opacity 160ms, transform 160ms;
    z-index: 6;
  }
  .pm:hover .pm-card{ opacity:1; transform: translateX(0) }
  .pm .pm-card .id{
    font-family:var(--font-mono); font-size:10px; color:var(--ink-soft);
    letter-spacing:.14em; text-transform:uppercase;
    display:flex; justify-content:space-between;
  }
  .pm .pm-card .id b{ color:var(--ink); font-weight:500 }
  .pm .pm-card .name{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    font-size:15px; line-height:1.05; margin: 6px 0 4px;
  }
  .pm .pm-card .loc{
    font-family:var(--font-sans); font-size:11.5px;
    color:var(--ink); margin: 0 0 8px;
  }
  .pm .pm-card .num{
    font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft);
    border-top:1px solid var(--hair); padding-top:6px;
    display:flex; justify-content:space-between;
  }
  .pm .pm-card .num b{ color:var(--ink); font-weight:500 }

  /* north arrow */
  .north{
    position:absolute; left: 22px; top: 22px;
    width: 56px; height: 56px;
    z-index: 3;
  }
  .north svg{ width:100%; height:100% }

  /* scale bar */
  .scale-bar{
    position:absolute; right: 22px; bottom: 22px;
    z-index: 3; text-align:right;
    font-family:var(--font-mono); font-size:9px;
    color:var(--ink-soft); letter-spacing:.12em; text-transform:uppercase;
  }
  .scale-bar .bar{
    display:flex; width:160px; height:7px; border:1px solid var(--ink); margin:4px 0 3px auto;
  }
  .scale-bar .bar span{ flex:1; border-right:1px solid var(--ink) }
  .scale-bar .bar span:last-child{ border-right:none }
  .scale-bar .bar span:nth-child(odd){ background:var(--ink) }
  .scale-bar .ticks{ display:flex; justify-content:space-between; width:160px; margin-left:auto; font-size:8.5px }

  /* hint text overlay */
  .drawing-hint{
    position:absolute; left:50%; top: 24px;
    transform: translateX(-50%);
    font-family:var(--font-mono); font-size:9.5px;
    color:var(--ink-soft); letter-spacing:.16em; text-transform:uppercase;
    pointer-events:none;
    display:flex; align-items:center; gap:8px;
    padding: 5px 12px; background: var(--paper); border:1px solid var(--ink);
    z-index: 3;
    opacity:1;
  }
  .drawing-hint::before{
    content:''; width:7px; height:7px; border-radius:999px; background:var(--moss);
    animation: blink 1.2s infinite;
  }

  /* =================================================================
     TITLE BLOCK — right column (the "cartouche")
     ================================================================= */
  .titleblock{
    grid-column: 3; grid-row: 2;
    border-left: 1px solid var(--ink);
    background: var(--paper);
    display:flex; flex-direction:column;
    overflow-y:auto;
  }

  .tb-head{
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--ink);
    background: var(--ink); color: var(--paper-2);
  }
  .tb-head .doc{
    font-family:var(--font-mono); font-size:10px;
    letter-spacing:.18em; text-transform:uppercase;
    display:flex; justify-content:space-between; opacity:.7;
  }
  .tb-head h1{
    font-family:var(--font-display); font-weight:700;
    text-transform:uppercase;
    font-size: 26px; line-height: 0.98; letter-spacing: 0.005em;
    margin: 12px 0 9px; color:var(--paper);
  }
  .tb-head h1 em{
    font-style:normal; font-weight:500;
    color: #9DB9A4; /* musgo claro sobre navy */
  }
  .tb-head .tag{
    font-family:var(--font-sans); font-size:12.5px;
    line-height:1.35; color: rgba(247,245,238,0.78);
    margin:0;
  }

  /* services list as roster — like a plan's legend */
  .tb-roster{
    display:flex; flex-direction:column;
    border-bottom: 1px solid var(--ink);
    overflow: hidden;
    flex: 1 1 auto;
  }
  .tb-roster .row{
    display:grid;
    grid-template-columns: 38px 1fr auto;
    align-items:center;
    padding: 10px 22px;
    border-bottom: 1px solid var(--hair);
    transition: background 160ms;
    cursor: default;
    flex: 1 1 0;
    min-height: 42px;
  }
  .tb-roster .row:last-child{ border-bottom:none }
  .tb-roster .row:hover{ background: var(--paper-2) }
  .tb-roster .row .n{
    font-family:var(--font-mono); font-size:10px;
    color:var(--ink-soft); letter-spacing:.12em;
  }
  .tb-roster .row .name{
    font-family:var(--font-display); font-size:15px;
    font-weight:700; text-transform:uppercase; letter-spacing:0;
  }
  .tb-roster .row .meta{
    font-family:var(--font-mono); font-size:9.5px;
    color:var(--ink-soft); letter-spacing:.06em;
    text-align:right;
  }
  .tb-roster .row:hover .name{ color:var(--moss-2) }
  .tb-roster .row--link{ cursor: pointer; }
  .tb-roster .row--link .n{ color: var(--moss-2); }
  .tb-roster .row--link:hover{ background: rgba(62,110,74,0.06); }

  /* footer of title block */
  .tb-foot{
    margin-top:auto;
    padding: 14px 22px;
    border-top:1px solid var(--ink);
    display:grid; grid-template-columns: 1fr 1fr; gap: 4px 14px;
    font-family:var(--font-mono); font-size:10px;
    color:var(--ink-soft); letter-spacing:.06em;
  }
  .tb-foot b{
    display:block; color:var(--ink); font-weight:500;
    text-transform:uppercase; letter-spacing:.12em;
    margin-bottom: 3px;
  }
  .tb-foot .cta-line{
    grid-column: 1 / -1;
    display:flex; gap: 0;
    margin-top: 8px;
  }
  .tb-foot .cta-line a{
    flex:1;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding: 12px 14px;
    background: var(--ink); color:var(--paper);
    font-family:var(--font-mono); font-size:11px;
    letter-spacing:.14em; text-transform:uppercase;
    transition: background 160ms;
    border-right: 1px solid var(--paper);
  }
  .tb-foot .cta-line a:last-child{ border-right:none; background: var(--moss); }
  .tb-foot .cta-line a:hover{ background: var(--moss-2) }
  .tb-foot .cta-line a:last-child:hover{ background: var(--ink) }

  /* =================================================================
     COORDINATE READOUT — bottom strip under drawing
     ================================================================= */
  .readout{
    grid-column: 2; grid-row: 3;
    border-top: 1px solid var(--ink);
    background: var(--paper-3);
    display:flex; align-items:center; gap: 0;
    font-family:var(--font-mono); font-size:10.5px;
    color:var(--ink); letter-spacing:.04em;
    overflow:hidden;
  }
  .readout > div{
    padding: 0 14px; height:100%; display:flex; align-items:center; gap:8px;
    border-right: 1px solid var(--hair);
  }
  .readout .lbl{ color: var(--ink-soft); letter-spacing:.14em; text-transform:uppercase; font-size:9.5px }
  .readout b{ font-weight:500 }

  /* readout under titleblock — sheet number */
  .readout-r{
    grid-column: 3; grid-row: 3;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
    background: var(--ink); color: var(--paper-2);
    display:flex; align-items:center; justify-content:space-between;
    padding: 0 16px;
    font-family:var(--font-mono); font-size:10px;
    letter-spacing:.14em; text-transform:uppercase;
  }
  .readout-r b{ color:var(--paper); font-weight:500 }

  /* =================================================================
     FIELD LOG — bottom strip across full width
     ================================================================= */
  .fieldlog{
    grid-column: 1 / -1; grid-row: 4;
    border-top: 1px solid var(--ink);
    background: var(--paper);
    display:flex; align-items:stretch;
    overflow:hidden;
    position:relative;
  }
  .fieldlog .fl-label{
    flex-shrink:0; padding: 0 18px;
    display:flex; align-items:center; gap:10px;
    border-right: 1px solid var(--ink);
    background: var(--ink); color:var(--paper-2);
    font-family:var(--font-mono); font-size:10px;
    letter-spacing:.18em; text-transform:uppercase;
  }
  .fieldlog .fl-label .blink{ width:7px; height:7px; background:var(--moss); border-radius:999px; animation: blink 1.2s infinite }
  .fieldlog .fl-track{
    flex:1; overflow:hidden; position:relative;
    display:flex; align-items:center;
  }
  .fieldlog .fl-rail{
    display:flex; gap: 32px; padding: 0 24px;
    align-items:center; white-space:nowrap;
    animation: marquee 60s linear infinite;
  }
  @keyframes marquee{
    from{ transform: translateX(0) }
    to{ transform: translateX(-50%) }
  }
  .fieldlog .entry{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:11px;
    color: var(--ink); letter-spacing:.04em;
  }
  .fieldlog .entry .d{ color:var(--ink-soft) }
  .fieldlog .entry .id{ color:var(--moss-2); font-weight:500 }
  .fieldlog .entry .area{ color:var(--ink); font-weight:500 }
  .fieldlog .entry .sep{ color:var(--ink-mute) }

  /* =================================================================
     RESPONSIVE
     ================================================================= */
  /* hide bitácora marquee — was visually heavy, projects already shown in §04 */
  .fieldlog{ display: none !important }

  /* =================================================================
     FLOATING ACTIONS — back-to-top
     ================================================================= */
  .float-actions{
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 60;
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 10px;
    pointer-events: none;
  }
  .float-actions > *{ pointer-events: auto }

  .float-back{
    width: 44px; height: 44px;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink); border-radius: 999px;
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0; transform: translateY(8px);
    transition: opacity 220ms cubic-bezier(0.2,0.8,0.2,1),
                transform 220ms cubic-bezier(0.2,0.8,0.2,1),
                background 160ms;
    box-shadow: 0 6px 20px -8px rgba(14,30,58,0.5);
  }
  .float-back.show{ opacity: 1; transform: translateY(0) }
  .float-back:hover{ background: var(--moss-2) }
  .float-back svg{ width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none }

  /* =================================================================
     LANGUAGE TOGGLE (in topbar)
     ================================================================= */
  .lang-toggle{
    display: inline-flex; align-items: stretch;
    border-right: 1px solid var(--hair);
    background: var(--paper);
  }
  .lang-btn{
    display: inline-flex; align-items: center;
    padding: 0 16px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    background: transparent; color: var(--ink-soft);
    border: none; cursor: pointer;
    transition: background 160ms, color 160ms;
  }
  .lang-btn:hover{ background: var(--paper-2); color: var(--ink) }

  /* hide live coord readout when not in the hero (cleaner topbar after scroll) */
  .topbar .live-coord{ transition: opacity 200ms, max-width 200ms; overflow: hidden }
  body[data-past-hero="1"] .topbar .live-coord{ opacity: 0; max-width: 0; padding: 0; border-right: 0 }

  @media (max-width: 900px){
    .hero{ grid-template-columns: 24px 1fr; grid-template-rows: 24px minmax(300px, 54vh) auto 28px }
    .grat-top{ grid-column: 2 }
    .drawing{ grid-column: 2; grid-row: 2 }
    .drawing-hint,
    .cursor-mark,
    .pm .pm-card{ display: none }
    .titleblock{ grid-column: 1 / -1; grid-row: 3; border-left:none; border-top: 1px solid var(--ink); max-height: none; overflow: visible }
    .readout{ grid-column: 2; grid-row: 4 }
    .readout-r{ display:none }
    .topbar{ position: sticky }
    .menu-toggle{ display:block }
    .topbar nav{
      display:flex;
      position:absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 22;
      background: var(--paper);
      border-bottom: 1px solid var(--ink);
      box-shadow: 0 18px 38px rgba(14,30,58,.12);
      transform: translateY(-8px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,.8,.2,1), visibility 0ms linear 180ms;
    }
    .topbar.menu-open nav{
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 0ms;
    }
    .topbar nav a{
      flex: 1 1 auto;
      min-height: 48px;
      justify-content: center;
      padding: 0 10px;
      font-size: 9.5px;
      letter-spacing: .12em;
      white-space: normal;
      text-align: center;
    }
    .topbar .live-coord{ display:none }
    .topbar .brand{ min-width: 0 }
    .tb-head{ padding: 24px 28px 20px }
    .tb-head h1{ font-size: clamp(30px, 9vw, 42px); line-height: .98 }
    .tb-roster .row{ min-height: 54px; padding: 0 28px }
    .tb-foot{ grid-template-columns: 1fr 1fr }
  }

  @media (max-width: 560px){
    .topbar{ height: 52px }
    .topbar .brand{ padding: 0 10px; gap: 8px; flex: 1; min-width: 0 }
    .topbar .brand-text{ font-size: 12px }
    .topbar .brand-text em{ font-size: 9px }
    .topbar .right{ flex: 1 1 auto; min-width: 0 }
    .topbar .back-btn{ display:none }
    .topbar .lang-toggle{
      display: inline-flex;
      flex: 0 0 42px;
      min-width: 42px;
      border-left: 1px solid var(--hair);
      border-right: 1px solid var(--hair);
    }
    .topbar .lang-btn{
      width: 42px;
      min-width: 42px;
      padding: 0;
      justify-content: center;
      font-size: 10px;
    }
    .topbar .cta{ flex: 1 1 auto; min-width: 0; justify-content: space-between; padding: 0 10px; font-size: 9.5px; line-height: 1.35 }
    .topbar .quote{ padding: 0 12px; min-width: auto; font-size: 9px; letter-spacing: .16em }
    .topbar nav{
      display:grid;
      grid-template-columns: 1fr 1fr;
    }
    .topbar nav a{
      min-height: 46px;
      border-bottom: 1px solid var(--hair);
      font-size: 10px;
    }
    .hero{ grid-template-columns: 16px 1fr; grid-template-rows: 18px minmax(260px, 46vh) auto 24px 54px }
    .tb-head{ padding: 20px 22px 18px }
    .tb-head .doc{ font-size: 10px; margin-bottom: 12px }
    .tb-head h1{ font-size: clamp(28px, 10.5vw, 38px) }
    html[lang="en"] .tb-head h1{ font-size: clamp(24px, 8.6vw, 32px) }
    .tb-head .tag{ font-size: 14px; line-height: 1.45; max-width: 32ch }
    .tb-roster .row{ min-height: 48px; padding: 0 22px; grid-template-columns: 34px 1fr auto }
    .tb-roster .row .name{ font-size: 18px }
    .tb-roster .row .meta{ font-size: 10px; max-width: 13ch; text-align: right }
    .tb-foot{ grid-template-columns: 1fr 1fr; padding: 14px 22px; gap: 8px 14px }
    .tb-foot .cta-line{ grid-template-columns: 1fr 1fr }
    .tb-foot .cta-line a{ min-height: 52px; padding: 0 12px; font-size: 10px }
  }

  /* =================================================================
     § 02 — SERVICIOS · índice técnico
     ================================================================= */
  .sec-services{
    border-top:1px solid var(--ink);
    background: var(--paper);
    padding: 0;
  }
  .sec-head{
    display:grid; grid-template-columns: 240px 1fr 360px;
    border-bottom: 1px solid var(--ink);
  }
  .sec-head .num{
    padding: 14px 22px;
    border-right: 1px solid var(--ink);
    background: var(--ink); color: var(--paper-2);
    font-family:var(--font-mono); font-size:11px;
    letter-spacing:.18em; text-transform:uppercase;
    display:flex; flex-direction:column; gap:8px; justify-content:space-between;
  }
  .sec-head .num b{
    font-family:var(--font-display); font-weight:700;
    font-size: 24px; letter-spacing:0;
    color:var(--paper); display:block;
  }
  .sec-head .title{
    padding: 14px 28px;
    border-right: 1px solid var(--ink);
    display:flex; flex-direction:column; justify-content:center;
  }
  .sec-head .title h2{
    margin:0; font-family:var(--font-display); font-weight:700;
    text-transform:uppercase; letter-spacing:0;
    font-size: clamp(28px, 3.0vw, 42px); line-height:1.0;
  }
  .sec-head .title h2 em{ font-style:normal; font-weight:500; color: var(--moss-2) }
  .sec-head .lede{
    padding: 14px 28px;
    font-family:var(--font-sans); font-size:13.5px; line-height:1.5;
    color: var(--ink);
  }
  .sec-head .lede b{ font-weight:600 }

  /* big section marker — used at top of every major section */
  .sec-marker{
    background: var(--ink);
    color: var(--paper);
    display: grid; grid-template-columns: auto 1fr auto;
    border-bottom: 1px solid var(--ink);
    border-top: 1px solid var(--ink);
  }
  .sec-marker .num{
    padding: 13px 22px;
    border-right: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(247,245,238,0.55);
    display: flex; flex-direction:column; gap: 6px; justify-content: center;
    min-width: 180px;
  }
  .sec-marker .num b{
    color: var(--paper); font-family: var(--font-display);
    font-weight: 700; font-size: 28px; letter-spacing: 0;
    line-height: 1;
  }
  .sec-marker .title{
    padding: 13px 28px;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(28px, 3.4vw, 48px); line-height: 0.98;
    text-transform: uppercase; letter-spacing: 0;
    display: flex; align-items: center; color: var(--paper);
  }
  .sec-marker .title em{ color: #9DB9A4; font-style: normal; font-weight: 500 }
  .sec-marker .sheet{
    padding: 13px 22px;
    border-left: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(247,245,238,0.65);
    display: flex; flex-direction: column; gap: 6px; justify-content:center;
    text-align: right;
  }
  .sec-marker .sheet b{ color: var(--paper); font-weight: 500; font-size: 12px }

  /* honeycomb of services */
  .hive-wrap{
    padding: 32px 24px 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
    background:
      radial-gradient(circle at 18% 30%, rgba(14,30,58,0.025), transparent 55%),
      radial-gradient(circle at 82% 70%, rgba(62,110,74,0.035), transparent 55%),
      var(--paper);
  }
  .hive-side{
    padding: 0;
    border: 1px solid var(--hair-strong);
    background: var(--paper);
  }
  .hive-side .hs-head{
    padding: 14px 18px;
    border-bottom: 1px solid var(--hair-strong);
    background: var(--paper-2);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-soft);
    display:flex; justify-content:space-between;
  }
  .hive-side .hs-head b{ color: var(--ink); font-weight: 500 }
  .hive-side .hs-body{
    padding: 18px 18px;
  }
  .hive-side h2{
    margin: 0 0 10px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 22px; line-height: 1.0; text-transform: uppercase;
    letter-spacing: 0;
  }
  .hive-side h2 em{ font-style: normal; color: var(--moss-2); font-weight: 500 }
  .hive-side p{
    margin: 0 0 14px;
    font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
    color: var(--ink);
  }
  .hive-side p b{ font-weight: 600 }
  .hive-side .legend{
    border-top: 1px solid var(--hair);
    padding-top: 14px; margin-top: 4px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft); line-height: 2;
  }
  .hive-side .legend .lg-row{
    display:flex; align-items:center; gap: 10px;
  }
  .hive-side .legend .dot{
    display:inline-block; width: 8px; height: 8px;
    border-radius: 999px; background: var(--moss);
  }
  .hive-side .legend .ln{
    display:inline-block; width: 22px; height: 1px; background: var(--ink);
    border-top: 1px dashed var(--ink); border-bottom: none;
  }
  .hive-side .legend .hx{
    display:inline-block; width: 12px; height: 14px;
    background: var(--ink);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  /* hive — the hex container */
  .hive{
    position: relative;
    width: 100%;
    max-width: 792px;
    height: 394px;
    margin: 0 auto;
  }
  .hive::after{
    content: '▸  Clic en un hexágono · ver ficha técnica';
    position: absolute;
    top: -30px; right: 0;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--ink);
    padding: 5px 12px;
    pointer-events: none;
  }
  /* triangulation network behind hexes */
  .hive .net{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
    overflow: visible;
  }
  .hive .net line{
    stroke: var(--ink); stroke-width: 0.8;
    stroke-dasharray: 3 4; opacity: 0.32;
  }
  .hive .net circle.node{
    fill: var(--paper); stroke: var(--ink); stroke-width: 0.8;
  }

  /* faint background grid */
  .hive::before{
    content: '';
    position: absolute; inset: -12px;
    background-image:
      linear-gradient(to right, rgba(14,30,58,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(14,30,58,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none; opacity: 0.6;
    z-index: 0;
  }

  /* hexagon button */
  .hex{
    position: absolute;
    width: 132px;
    height: 152px;
    cursor: pointer;
    background: transparent;
    border: none; padding: 0;
    z-index: 2;
    transition: transform 320ms cubic-bezier(0.2,0.8,0.2,1);
    font-family: inherit;
    perspective: 900px;
    transform-style: preserve-3d;
  }
  /* positions: row1=7 | row2=6 offset — compact horizontal layout */
  .hex:nth-child(2){ left: 0;    top: 0 }
  .hex:nth-child(3){ left: 132px; top: 0 }
  .hex:nth-child(4){ left: 264px; top: 0 }
  .hex:nth-child(5){ left: 396px; top: 0 }
  .hex:nth-child(6){ left: 528px; top: 0 }
  .hex:nth-child(7){ left: 660px; top: 0 }
  .hex:nth-child(8){ left: 66px;  top: 114px }
  .hex:nth-child(9){ left: 198px; top: 114px }
  .hex:nth-child(10){ left: 330px; top: 114px }
  .hex:nth-child(11){ left: 462px; top: 114px }
  .hex:nth-child(12){ left: 594px; top: 114px }
  .hex:nth-child(13){ left: 264px; top: 228px }
  .hex:nth-child(14){ left: 396px; top: 228px }

  .hex .hex-face,
  .hex .hex-inner{
    position: absolute; inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .hex .hex-face{
    background: var(--ink);
    transition: background 200ms;
  }
  .hex .hex-inner{
    inset: 2px;
    background: var(--paper);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 18px 12px;
    transition: background 200ms;
  }
  .hex:hover .hex-face{ background: var(--moss-2) }
  .hex:hover .hex-inner{ background: var(--paper-2) }
  .hex.is-open{
    opacity: 0;
    pointer-events: none;
  }
  @media (hover: hover) and (pointer: fine){
    .hex:not(.is-open):hover{
      transform: translate3d(0, -10px, 24px) rotateX(3deg) scale(1.055);
      z-index: 8;
    }
    .hex:not(.is-open):hover .hex-face{
      filter: drop-shadow(0 18px 18px rgba(14,30,58,0.18));
    }
  }

  .hex .hex-id{
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 500;
  }
  .hex .hex-icon{ display: grid; place-items: center; height: 42px }
  .hex .hex-icon svg{ width: 42px; height: 42px }
  .hex .hex-name{
    font-family: var(--font-display); font-weight: 700;
    font-size: 16px; line-height: 1; text-transform: uppercase;
    letter-spacing: 0; color: var(--ink); text-align: center;
  }
  .hex .hex-name small{
    display: block; margin-top: 5px;
    font-family: var(--font-mono); font-size: 8px;
    color: var(--ink-soft); letter-spacing: .10em;
    font-weight: 400;
  }
  /* node coord label — inside hex, top-right */
  .hex .hex-node{
    position: absolute;
    top: 20px; right: 24px;
    font-family: var(--font-mono); font-size: 8px;
    color: var(--ink-soft);
    letter-spacing: .14em; z-index: 5;
    pointer-events: none;
  }
  .hex:hover .hex-node{ color: var(--moss-2) }

  /* click spin — rotateY 360 (forward) for open, optional reverse on close.
     backface-visibility hides the mid-flip text so it never appears boca-abajo. */
  .hex.spinning{ animation: hexSpinY 760ms cubic-bezier(0.32, 0.0, 0.18, 1) }
  @keyframes hexSpinY{
    0%   { transform: rotateY(0deg)   scale(1) }
    50%  { transform: rotateY(180deg) scale(0.92) }
    100% { transform: rotateY(360deg) scale(1) }
  }
  .hex.spinning-back{ animation: hexSpinYBack 620ms cubic-bezier(0.7, 0, 0.3, 1) }
  @keyframes hexSpinYBack{
    0%   { transform: rotateY(0deg)    scale(1) }
    50%  { transform: rotateY(-180deg) scale(0.92) }
    100% { transform: rotateY(-360deg) scale(1) }
  }

  /* hive footer band */
  .hive-foot{
    display: grid;
    grid-template-columns: 1fr auto;
    border-top: 1px solid var(--ink);
    background: var(--paper-3);
  }
  .hive-foot .note{
    padding: 16px 22px;
    font-family: var(--font-sans); font-size: 13px;
    color: var(--ink); line-height: 1.5;
  }
  .hive-foot .note b{ font-weight: 600 }
  .hive-foot .note em{ font-style: normal; color: var(--moss-2); font-weight: 500 }
  .hive-foot .actions{
    display: flex; align-items: stretch;
    border-left: 1px solid var(--ink);
  }
  .hive-foot .actions a{
    display: flex; align-items: center; gap: 10px;
    padding: 0 24px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
    text-decoration: none; color: var(--ink);
    border-right: 1px solid var(--hair);
    transition: background 160ms, color 160ms;
  }
  .hive-foot .actions a:last-child{
    border-right: none; background: var(--moss); color: var(--paper);
  }
  .hive-foot .actions a:hover{ background: var(--paper-2) }
  .hive-foot .actions a:last-child:hover{ background: var(--moss-2) }

  /* MODAL — flip-in from -90° rotateY, scales up; reverse on close. */
  .svc-modal{
    position: fixed; inset: 0;
    background:
      linear-gradient(rgba(14, 30, 58, 0.76), rgba(14, 30, 58, 0.76)),
      radial-gradient(circle at 50% 42%, rgba(247,245,238,0.06), rgba(14,30,58,0) 46%);
    z-index: 100;
    opacity: 0; pointer-events: none;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
    display: grid; place-items: center;
    padding: 32px;
    perspective: 1400px;
    overflow: hidden;
  }
  .svc-modal.open{ opacity: 1; pointer-events: auto }
  .svc-modal .modal-card{
    width: 100%; max-width: 660px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 32px 80px -32px rgba(14,30,58,0.5);
    transform: translateZ(0) rotateY(-90deg) scale(0.6);
    opacity: 0;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    transition:
      transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .svc-modal.open .modal-card{
    transform: translateZ(0) rotateY(0deg) scale(1);
    opacity: 1;
  }
  /* CLOSE = true inverse of OPEN. Same axis (rotateY -90), same scale.
     Easing inverted so it accelerates into the close. */
  .svc-modal.closing .modal-card{
    transform: translateZ(0) rotateY(-90deg) scale(0.6);
    opacity: 0;
    transition:
      transform 380ms cubic-bezier(0.7, 0.0, 0.84, 0),
      opacity 280ms cubic-bezier(0.7, 0.0, 0.84, 0);
  }
  .svc-modal.closing{
    opacity: 0;
    transition: opacity 280ms cubic-bezier(0.7, 0.0, 0.84, 0);
  }
  /* Once animation settles, drop 3D context so native scroll is smooth */
  .svc-modal.open.settled{ perspective: none; }
  .svc-modal.open.settled .modal-card{ transform: none; }

  /* Custom scrollbar — modal-card */
  .modal-card{ scrollbar-width: thin; scrollbar-color: rgba(14,30,58,0.35) var(--paper-2); }
  .modal-card::-webkit-scrollbar{ width: 5px; }
  .modal-card::-webkit-scrollbar-track{ background: var(--paper-2); }
  .modal-card::-webkit-scrollbar-thumb{ background: rgba(14,30,58,0.35); }
  .modal-card::-webkit-scrollbar-thumb:hover{ background: var(--ink); }

  .mc-head{
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: stretch;
    background: var(--ink); color: var(--paper);
  }
  .mc-head .mc-id{
    padding: 14px 20px; border-right: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
  }
  .mc-head .mc-id b{ color: var(--paper); font-weight: 500 }
  .mc-head .mc-title{
    padding: 14px 20px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 22px; text-transform: uppercase; letter-spacing: 0;
    display: flex; align-items: center; line-height: 1;
  }
  .mc-head .mc-close{
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px;
    background: transparent; color: var(--paper);
    border: none; border-left: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer;
    transition: background 160ms;
    font-weight: 500;
  }
  .mc-head .mc-close:hover{ background: var(--moss-2) }
  .mc-head .mc-close svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none }

  .mc-body{ padding: 22px 24px; display: grid; gap: 18px }
  .mc-body .mc-icon-row{
    display: grid; grid-template-columns: 96px 1fr;
    align-items: center; gap: 18px;
  }
  .mc-body .mc-icon{
    width: 96px; height: 96px;
    display: grid; place-items: center;
    border: 1px solid var(--ink);
    background: var(--paper-2);
  }
  .mc-body .mc-icon svg{ width: 60px; height: 60px }
  .mc-body .mc-pitch{
    margin: 0;
    font-family: var(--font-sans); font-size: 15px; line-height: 1.45;
    color: var(--ink);
  }
  .mc-body .mc-pitch b{ font-weight: 600 }

  .mc-grid{
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--hair-strong);
  }
  .mc-grid > div{
    padding: 12px 16px;
    border-right: 1px solid var(--hair-strong);
    border-bottom: 1px solid var(--hair-strong);
  }
  .mc-grid > div:nth-child(2n){ border-right: none }
  .mc-grid > div:nth-last-child(-n+2){ border-bottom: none }
  .mc-grid .lbl{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 6px;
  }
  .mc-grid .val{
    font-family: var(--font-display); font-weight: 700;
    font-size: 16px; text-transform: uppercase; letter-spacing: 0;
    line-height: 1.1;
  }
  .mc-grid .val small{
    display: block; margin-top: 3px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .06em; color: var(--ink-soft);
    font-weight: 400; text-transform: none;
  }

  .mc-includes-wrap .lbl{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 8px;
  }
  .mc-includes{ display: flex; flex-wrap: wrap; gap: 6px }
  .mc-includes span{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border: 1px solid var(--hair-strong);
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .06em; color: var(--ink); background: var(--paper);
  }
  .mc-includes span::before{
    content: ''; width: 4px; height: 4px; background: var(--moss);
  }

  .mc-foot{
    display: flex; border-top: 1px solid var(--ink);
  }
  .mc-foot a{
    flex: 1;
    padding: 14px 18px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
    text-align: center;
    color: var(--ink); text-decoration: none;
    border-right: 1px solid var(--ink);
    transition: background 160ms;
  }
  .mc-foot a:last-child{
    border-right: none; background: var(--moss); color: var(--paper);
  }
  .mc-foot a:hover{ background: var(--paper-2) }
  .mc-foot a:last-child:hover{ background: var(--moss-2) }

  @media (max-width: 900px){
    .sec-head{ grid-template-columns: 1fr }
    .sec-head .num, .sec-head .title{ border-right: none; border-bottom: 1px solid var(--ink) }
    .sec-marker{ grid-template-columns: 1fr }
    .sec-marker .num, .sec-marker .title{ border-right: none; border-bottom: 1px solid rgba(247,245,238,0.18) }
    .sec-marker .sheet{ border-left: none; border-top: 1px solid rgba(247,245,238,0.18); text-align: left }
    .hive-wrap{ grid-template-columns: 1fr; padding: 26px 16px 32px; gap: 24px }
    .hive-side{ text-align: left }
    .hive-side .legend{ grid-template-columns: 1fr }
    .hive{
      --hex-w: min(116px, calc((100vw - 32px) / 3));
      --hex-h: calc(var(--hex-w) * 1.16);
      --hex-step: calc(var(--hex-h) * .74);
      position: relative;
      width: calc(var(--hex-w) * 3);
      max-width: 100%;
      height: calc(32px + (var(--hex-step) * 4) + var(--hex-h));
      display: block;
      margin: 0 auto;
      padding-top: 0;
    }
    .hive::after{
      top: 0;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 8px;
      padding: 5px 10px;
    }
    .hive::before{ inset: 18px -8px -8px }
    .hive .net{ display: none }
    .hex,
    .hex:nth-child(n){
      position: absolute;
      width: var(--hex-w);
      height: var(--hex-h);
      min-height: 0;
      left: auto;
      top: auto;
    }
    .hex:nth-child(2){ left: 0; top: 32px }
    .hex:nth-child(3){ left: var(--hex-w); top: 32px }
    .hex:nth-child(4){ left: calc(var(--hex-w) * 2); top: 32px }
    .hex:nth-child(5){ left: calc(var(--hex-w) * .5); top: calc(32px + var(--hex-step)) }
    .hex:nth-child(6){ left: calc(var(--hex-w) * 1.5); top: calc(32px + var(--hex-step)) }
    .hex:nth-child(7){ left: 0; top: calc(32px + (var(--hex-step) * 2)) }
    .hex:nth-child(8){ left: var(--hex-w); top: calc(32px + (var(--hex-step) * 2)) }
    .hex:nth-child(9){ left: calc(var(--hex-w) * 2); top: calc(32px + (var(--hex-step) * 2)) }
    .hex:nth-child(10){ left: calc(var(--hex-w) * .5); top: calc(32px + (var(--hex-step) * 3)) }
    .hex:nth-child(11){ left: calc(var(--hex-w) * 1.5); top: calc(32px + (var(--hex-step) * 3)) }
    .hex:nth-child(12){ left: 0; top: calc(32px + (var(--hex-step) * 4)) }
    .hex:nth-child(13){ left: var(--hex-w); top: calc(32px + (var(--hex-step) * 4)) }
    .hex:nth-child(14){ left: calc(var(--hex-w) * 2); top: calc(32px + (var(--hex-step) * 4)) }
    .hex .hex-inner{ gap: 3px; padding: 12px 7px }
    .hex .hex-name{ font-size: clamp(10.5px, 3.25vw, 13px) }
    .hex .hex-icon{ height: 27px }
    .hex .hex-icon svg{ width: 27px; height: 27px }
    .hex .hex-id{ font-size: 7.5px }
    .hex .hex-node{ display: none }
    .hex .hex-name small{ font-size: 6.5px; line-height: 1.1; max-width: 11ch; margin-inline: auto }
    .hive-foot{ grid-template-columns: 1fr }
    .hive-foot .actions{ border-left: none; border-top: 1px solid var(--ink) }
    .hive-foot .actions a{ flex: 1; justify-content: center }
    .svc-modal{ padding: 12px }
    .svc-modal .modal-card{
      max-width: min(560px, 100%);
      max-height: calc(100dvh - 24px);
    }
    .mc-body{ padding: 20px 18px; gap: 16px }
    .mc-body .mc-icon-row{
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }
    .mc-body .mc-icon{
      width: 76px;
      height: 76px;
    }
    .mc-body .mc-icon svg{ width: 48px; height: 48px }
    .mc-body .mc-pitch{
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 14px;
      line-height: 1.5;
    }
    .mc-grid{ grid-template-columns: 1fr }
    .mc-grid > div{ border-right: none }
    .mc-grid > div:nth-last-child(2){ border-bottom: 1px solid var(--hair-strong) }
  }

  @media (max-width: 520px){
    .mc-head{
      grid-template-columns: auto 1fr auto;
    }
    .mc-head .mc-id,
    .mc-head .mc-title{
      padding: 14px 12px;
    }
    .mc-head .mc-title{
      font-size: clamp(20px, 6vw, 26px);
      line-height: .95;
    }
    .mc-head .mc-close{
      padding: 0 12px;
      font-size: 10px;
      letter-spacing: .12em;
    }
    .mc-body .mc-icon-row{
      grid-template-columns: 1fr;
    }
    .mc-body .mc-icon{
      width: 88px;
      height: 88px;
    }
    .mc-body .mc-pitch{
      font-size: 15px;
      line-height: 1.48;
    }
    .mc-foot{
      position: sticky;
      bottom: 0;
      background: var(--paper);
      z-index: 2;
    }
    .mc-foot a{
      min-height: 54px;
      display: grid;
      place-items: center;
      padding: 12px 10px;
      font-size: 9.5px;
      letter-spacing: .08em;
      line-height: 1.25;
    }
  }
  /* =================================================================
     § 03 — COBERTURA RD · mapa de territorio
     ================================================================= */
  .sec-coverage{ background: var(--paper) }
  .cov-wrap{
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    border-bottom: 1px solid var(--ink);
  }
  .cov-map{
    position: relative;
    padding: 12px 16px 10px;
    border-right: 1px solid var(--ink);
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    overflow: hidden;
    background:
      linear-gradient(to right, rgba(14,30,58,0.04) 1px, transparent 1px) 0 0 / 40px 40px,
      linear-gradient(to bottom, rgba(14,30,58,0.04) 1px, transparent 1px) 0 0 / 40px 40px,
      var(--paper);
  }
  .cov-chrome{
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 0 10px 0; margin: 0 0 8px;
    border-bottom: 1px solid var(--hair-strong);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .cov-chrome b{ color: var(--ink); font-weight: 500 }
  .rd-map{
    width: min(138%, 1360px);
    height: clamp(455px, 42vw, 585px);
    display: block;
    justify-self: center;
    align-self: center;
  }
  .rd-map[data-view="all"] .land{ fill: #E3ECDE; stroke: var(--moss-2); stroke-width: 4 }
  .rd-map .minor-pin{ opacity: 0; transition: opacity 280ms cubic-bezier(0.2,0.8,0.2,1) }
  .rd-map[data-view="all"] .minor-pin{ opacity: 1 }
  .rd-map .minor-pin-lbl{
    font-family: var(--font-mono); font-size: 13px;
    fill: var(--ink); letter-spacing: .03em;
    paint-order: stroke; stroke: var(--paper); stroke-width: 3;
  }
  .rd-map .nationwide-stamp{ opacity: 0; transition: opacity 280ms cubic-bezier(0.2,0.8,0.2,1) }
  .rd-map[data-view="all"] .nationwide-stamp{ opacity: 1 }

  .cov-toggle{
    display: inline-flex; border: 1px solid var(--ink);
    background: var(--paper);
  }
  .ct-btn{
    padding: 6px 14px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    background: transparent; color: var(--ink);
    border: none; border-right: 1px solid var(--ink);
    cursor: pointer; font-weight: 500;
    transition: background 160ms, color 160ms;
  }
  .ct-btn:last-child{ border-right: none }
  .ct-btn.active{ background: var(--ink); color: var(--paper) }
  .ct-btn:hover:not(.active){ background: var(--paper-2) }

  .rd-map .land{ fill: var(--paper-2); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round }
  .rd-map .axis{ stroke: var(--ink); stroke-width: 1; stroke-dasharray: 10 10; opacity: 0.18 }
  .rd-map .pin-group{ cursor: pointer; transition: transform 240ms cubic-bezier(0.2,0.8,0.2,1) }
  .rd-map .pin-group .pin-dot{
    fill: var(--paper); stroke: var(--ink); stroke-width: 3.5;
    transition: fill 160ms, stroke 160ms;
  }
  .rd-map .pin-group .pin-dot.inner{ fill: var(--moss-2); stroke: none }
  .rd-map .pin-group:hover .pin-dot:not(.inner),
  .rd-map .pin-group.active .pin-dot:not(.inner){
    fill: var(--moss); stroke: var(--moss-2);
  }
  .rd-map .pin-group:hover .pin-dot.inner,
  .rd-map .pin-group.active .pin-dot.inner{ fill: var(--paper) }
  .rd-map .pin-group.active{ transform: translateY(-2px) }
  .rd-map .pin-label{
    font-family: var(--font-mono); font-size: 22px;
    fill: var(--ink); letter-spacing: .04em;
    paint-order: stroke;
    stroke: var(--paper); stroke-width: 5;
  }
  .rd-map .pin-group:hover .pin-label,
  .rd-map .pin-group.active .pin-label{ fill: var(--moss-2); font-weight: 500 }
  .rd-map[data-view="main"] .pin-group.secondary{ display: none }
  .rd-map .compass text{ font-family: var(--font-mono) }

  .cov-side{
    padding: 12px 16px;
    background: var(--paper-3);
    display: flex; flex-direction: column; gap: 0;
  }
  .cov-side .cov-side-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hair-strong);
  }
  .cov-side h2{
    margin: 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: 22px; line-height: 1; text-transform: uppercase;
    letter-spacing: 0;
  }
  .cov-side h2 em{ font-style: normal; color: var(--moss-2); font-weight: 500 }
  .cov-side .total{
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .cov-side .total b{ color: var(--ink); font-weight: 500 }
  .z-list{
    display: flex; flex-direction: column;
    border: 1px solid var(--hair-strong);
    background: var(--paper);
  }
  .z-row{
    display: grid;
    grid-template-columns: 44px 1fr 70px;
    align-items: center;
    padding: 7px 14px;
    gap: 12px;
    border-bottom: 1px solid var(--hair);
    cursor: pointer;
    transition: background 160ms;
  }
  .z-row:last-child{ border-bottom: none }
  .z-row:hover, .z-row.active{ background: var(--paper-2) }
  .z-row:hover .z-name, .z-row.active .z-name{ color: var(--moss-2) }
  .z-row .z-id{
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-soft); letter-spacing: .12em;
  }
  .z-row .z-name{
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px; text-transform: uppercase; letter-spacing: 0;
    line-height: 1.1;
  }
  .z-row .z-name small{
    display: block; margin-top: 3px;
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: .08em; color: var(--ink-soft);
    font-weight: 400; text-transform: uppercase;
  }
  .z-row .z-count{
    font-family: var(--font-display); font-size: 18px;
    font-weight: 700; text-align: right;
    color: var(--ink); letter-spacing: 0;
    line-height: 1;
  }
  .z-row .z-count small{
    display: block; font-size: 9px; color: var(--ink-soft);
    letter-spacing: .14em; text-transform: uppercase;
    margin-top: 4px; font-family: var(--font-mono); font-weight: 400;
  }

  .cov-foot{
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--ink);
    color: var(--paper);
  }
  .cov-foot .stat{
    padding: 18px 22px;
    border-right: 1px solid rgba(247,245,238,0.18);
  }
  .cov-foot .stat:last-child{ border-right: none }
  .cov-foot .stat .lbl{
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(247,245,238,0.55);
    margin-bottom: 6px;
  }
  .cov-foot .stat .val{
    font-family: var(--font-display); font-weight: 700;
    font-size: 30px; letter-spacing: 0; text-transform: uppercase;
    line-height: 1; display:flex; align-items:baseline; gap:8px;
  }
  .cov-foot .stat .val small{
    font-family: var(--font-mono); font-size: 11px;
    font-weight: 400; color: rgba(247,245,238,0.55);
    letter-spacing: .08em; text-transform: lowercase;
  }
  .cov-foot .stat .val em{
    font-style: normal; color: #9DB9A4; font-weight: 500;
  }

  @media (max-width: 900px){
    .cov-wrap{ grid-template-columns: 1fr }
    .cov-map{ border-right: none; border-bottom: 1px solid var(--ink); overflow: visible }
    .rd-map{
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 0;
    }
    .cov-foot{ grid-template-columns: 1fr 1fr }
    .cov-foot .stat:nth-child(2n){ border-right: none }
    .cov-foot .stat:nth-child(1), .cov-foot .stat:nth-child(2){ border-bottom: 1px solid rgba(247,245,238,0.18) }
  }
  /* =================================================================
     § 04 — PROYECTOS · bitácora detallada
     ================================================================= */
  .sec-projects{ background: var(--paper) }
  .proj-wrap{
    display: grid;
    grid-template-columns: 210px 1fr;
    border-bottom: 1px solid var(--ink);
  }
  .proj-side{
    padding: 12px 14px;
    border-right: 1px solid var(--ink);
    background: var(--paper-3);
  }
  .proj-side h2{
    margin: 0 0 10px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 20px; line-height: 1; text-transform: uppercase;
    letter-spacing: 0;
  }
  .proj-side p{
    margin: 0 0 12px;
    font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45;
    color: var(--ink);
  }
  .proj-side p b{ font-weight: 600 }
  .proj-filters{
    border-top: 1px solid var(--hair-strong);
    padding-top: 12px; margin-top: 4px;
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .proj-filters .pf{
    padding: 4px 8px; background: var(--paper);
    border: 1px solid var(--hair-strong);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); cursor: pointer;
    transition: background 160ms, color 160ms, border-color 160ms;
  }
  .proj-filters .pf:hover{ background: var(--paper-2) }
  .proj-filters .pf.active{
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
  .proj-side .pf-counter{
    margin-top: 14px;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--ink-soft); letter-spacing: .14em; text-transform: uppercase;
  }
  .proj-side .pf-counter b{ color: var(--ink); font-weight: 500; font-size: 13px }
  .pf-clear{
    margin-top: 12px;
    background: transparent; border: none;
    color: var(--moss-2); cursor: pointer;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--moss);
    transition: background 160ms, color 160ms;
    align-self: flex-start;
    display: inline-flex;
  }
  .pf-clear:hover{ background: var(--moss); color: var(--paper) }
  .pf-clear[hidden]{ display: none }

  /* § Biblioteca — galería completa de proyectos */
  .sec-biblioteca{ background: var(--paper-2) }
  .bib-wrap{
    display: grid;
    grid-template-columns: 210px 1fr;
    border-bottom: 1px solid var(--ink);
  }
  .bib-side{
    padding: 12px 14px;
    border-right: 1px solid var(--ink);
    background: var(--paper-3);
  }
  .bib-side h2{
    margin: 0 0 10px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 20px; line-height: 1; text-transform: uppercase;
  }
  .bib-side p{
    margin: 0 0 12px;
    font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45;
    color: var(--ink);
  }
  .bib-side .pf-counter{
    margin-top: 14px;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--ink-soft); letter-spacing: .14em; text-transform: uppercase;
  }
  .bib-side .pf-counter b{ color: var(--ink); font-weight: 500; font-size: 13px }
  .bib-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    background: var(--paper);
  }
  .bib-grid .proj-card{
    flex: none; max-width: none; min-width: 0; width: 100%;
  }
  @media (max-width: 700px){
    .bib-wrap{ grid-template-columns: 1fr }
    .bib-side{ border-right: none; border-bottom: 1px solid var(--ink) }
    .bib-grid{ grid-template-columns: 1fr }
  }

  .proj-grid{
    background: var(--paper);
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    cursor: grab;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    user-select: none;
    scroll-snap-type: x mandatory;
  }
  .proj-grid::-webkit-scrollbar{ display:none }
  .proj-grid.dragging{ cursor: grabbing }
  .proj-grid.dragging .proj-card{ pointer-events:none }
  .proj-grid::before,
  .proj-grid::after{
    content:'';
    position:absolute;
    top:0; bottom:0;
    width:44px;
    z-index:2;
    pointer-events:none;
    display:none;
  }
  .proj-grid.is-marquee::before,
  .proj-grid.is-marquee::after{ display:block }
  .proj-grid.is-marquee{ scroll-snap-type: none }
  .proj-grid::before{
    left:0;
    background: linear-gradient(90deg, var(--paper), rgba(255,255,255,0));
  }
  .proj-grid::after{
    right:0;
    background: linear-gradient(270deg, var(--paper), rgba(255,255,255,0));
  }
  .proj-track{
    display: flex;
    align-items: stretch;
    width: max-content;
    background: var(--paper);
    will-change: transform;
  }
  .proj-grid.is-marquee .proj-track{ animation: projectsMarquee var(--projects-speed, 34s) linear infinite }
  .proj-grid:hover .proj-track{ animation-play-state: paused }
  body.modal-lock .proj-track{ animation-play-state: paused !important }
  .proj-track.is-static{ animation: none }
  @keyframes projectsMarquee{
    from{ transform: translateX(0) }
    to{ transform: translateX(-50%) }
  }
  .proj-card{
    flex: 0 0 clamp(360px, 31vw, 424px);
    max-width: 424px;
    min-height: 438px;
    border-right: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    background: var(--paper);
    cursor: pointer;
    transition: background 160ms;
    display: flex; flex-direction: column;
    scroll-snap-align: start;
  }
  .proj-card[hidden]{ display: none !important }
  .proj-card:hover{ background: var(--paper-3) }
  .proj-card .pc-head{
    padding: 8px 12px;
    border-bottom: 1px solid var(--hair);
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .proj-card .pc-head b{ color: var(--ink); font-weight: 500 }
  /* card grid — lighter, less detail in each card so the wall doesn't feel cluttered */
  .proj-card .pc-draw{
    background:
      linear-gradient(to right, rgba(14,30,58,0.03) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(to bottom, rgba(14,30,58,0.03) 1px, transparent 1px) 0 0 / 32px 32px,
      var(--paper-3);
    height: 208px;
    display: grid; place-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--hair);
    position: relative;
  }
  .proj-card .pc-draw svg{ width: 100%; height: 100%; display: block }
  .proj-card .pc-draw img{
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    display: block;
    object-fit: contain;
    background: var(--paper);
  }
  .proj-card .pc-draw .pc-stamp{ z-index: 2 }
  .proj-card .pc-draw .pc-stamp{
    position: absolute; top: 8px; right: 10px;
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); padding: 2px 6px;
    background: var(--paper); border: 1px solid var(--hair-strong);
  }
  .proj-card .pc-body{
    padding: 9px 12px 9px;
    flex: 1; display: flex; flex-direction: column;
  }
  .proj-card .pc-svc{
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px; text-transform: uppercase; letter-spacing: 0;
    line-height: 1;
  }
  .proj-card .pc-svc small{
    display: block; margin-top: 4px;
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .12em; color: var(--ink-soft);
    font-weight: 400; text-transform: uppercase;
  }
  .proj-card .pc-loc{
    margin-top: 5px;
    font-family: var(--font-sans); font-size: 11.5px;
    color: var(--ink); line-height: 1.4;
  }
  .proj-card .pc-loc b{ font-weight: 500 }
  .proj-card .pc-foot{
    margin-top: auto; padding-top: 6px;
    border-top: 1px solid var(--hair);
    display: flex; justify-content: space-between; align-items: center;
  }
  .proj-card .pc-area{
    font-family: var(--font-mono); font-size: 11.5px;
    font-weight: 500; color: var(--ink); letter-spacing: 0;
    display: flex; align-items: baseline; gap: 6px;
  }
  .proj-card .pc-area .lbl{
    font-size: 9px; color: var(--ink-soft);
    letter-spacing: .14em; text-transform: uppercase;
    font-weight: 400;
  }
  .proj-card .pc-cta{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink); font-weight: 500;
    display: flex; align-items: center; gap: 5px;
    transition: color 160ms;
  }
  .proj-card:hover .pc-cta{ color: var(--moss-2) }

  .proj-foot{
    background: var(--paper-3);
    display: grid;
    grid-template-columns: 1fr auto;
    border-top: 1px solid var(--ink);
  }
  .proj-foot .note{
    padding: 16px 22px;
    font-family: var(--font-sans); font-size: 13px;
    color: var(--ink); line-height: 1.5;
  }
  .proj-foot .note b{ font-weight: 600 }
  .proj-foot .actions{
    display: flex; align-items: stretch;
    border-left: 1px solid var(--ink);
  }
  .proj-foot .actions a{
    display: flex; align-items: center; gap: 10px;
    padding: 0 22px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
    text-decoration: none; color: var(--ink);
    border-right: 1px solid var(--hair);
    transition: background 160ms;
  }
  .proj-foot .actions a:last-child{ border-right: none; background: var(--moss); color: var(--paper) }
  .proj-foot .actions a:hover{ background: var(--paper-2) }
  .proj-foot .actions a:last-child:hover{ background: var(--moss-2) }

  @media (max-width: 900px){
    .proj-wrap{ grid-template-columns: 1fr }
    .proj-side{ border-right: none; border-bottom: 1px solid var(--ink) }
    .proj-card{
      flex-basis: min(86vw, 390px);
      max-width: min(86vw, 390px);
      min-height: 410px;
    }
    .proj-card .pc-draw{ height: 188px }
    .proj-foot{ grid-template-columns: 1fr }
    .proj-foot .actions{ border-left: none; border-top: 1px solid var(--ink) }
    .proj-foot .actions a{ flex: 1; justify-content: center }
  }
  /* =================================================================
     § 05 — CLIENTES
     ================================================================= */
  .sec-clients{ background: var(--paper) }
  .cl-wrap{
    display: grid; grid-template-columns: 280px 1fr;
    border-bottom: 1px solid var(--ink);
  }
  .cl-side{
    padding: 22px 24px;
    border-right: 1px solid var(--ink);
    background: var(--paper-3);
  }
  .cl-side h2{
    margin: 0 0 12px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 22px; line-height: 1; text-transform: uppercase;
    letter-spacing: 0;
  }
  .cl-side p{
    margin: 0 0 14px;
    font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
  }
  .cl-side p b{ font-weight: 600 }
  .cl-side .cl-stat{
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--hair-strong);
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .cl-side .cl-stat .s{
    display: flex; flex-direction: column; gap: 4px;
  }
  .cl-side .cl-stat .s .v{
    font-family: var(--font-display); font-weight: 700;
    font-size: 28px; line-height: 1; letter-spacing: 0;
  }
  .cl-side .cl-stat .s .l{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
  }

  .cl-grid{
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--paper);
  }
  .cl-cell{
    border-right: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    aspect-ratio: 5 / 3;
    display: flex; flex-direction: column;
    padding: 18px 18px;
    transition: background 160ms;
    position: relative;
  }
  .cl-cell:nth-child(4n){ border-right: none }
  .cl-cell:hover{ background: var(--paper-3) }
  .cl-cell .cl-code{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .cl-cell .cl-mark{
    flex: 1; display: grid; place-items: center;
    margin: 8px 0;
  }
  .cl-cell .cl-mark .mk{
    font-family: var(--font-display); font-weight: 700;
    font-size: 28px; letter-spacing: 0; line-height: 1;
    color: var(--ink); text-transform: uppercase;
    text-align: center;
  }
  .cl-cell .cl-name{
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); font-weight: 500;
  }
  .cl-cell .cl-sector{
    font-family: var(--font-mono); font-size: 9.5px;
    color: var(--ink-soft); letter-spacing: .06em;
    margin-top: 3px;
  }

  /* =================================================================
     § 06 — SOBRE NOSOTROS
     ================================================================= */
  .sec-about{ background: var(--paper) }
  .ab-wrap{
    display: grid; grid-template-columns: .82fr .92fr 1.16fr;
    border-bottom: 1px solid var(--ink);
  }
  .ab-bio{
    padding: 26px 28px;
    border-right: 1px solid var(--ink);
  }
  .ab-bio h2{
    margin: 0 0 14px;
    font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0;
    font-size: clamp(26px, 2.6vw, 36px); line-height: 1;
  }
  .ab-bio h2 em{ font-style: normal; color: var(--moss-2); font-weight: 500 }
  .ab-bio p{
    font-family: var(--font-sans); font-size: 13.5px; line-height: 1.48;
    color: var(--ink); margin: 0 0 10px; max-width: 54ch;
  }
  .ab-bio p b{ font-weight: 600 }
  .ab-photo{
    position: relative;
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--ink);
    background:
      linear-gradient(90deg, var(--paper) 0 48%, var(--ink) 48% 100%);
  }
  .ab-photo img{
    width: 100%;
    height: 100%;
    min-height: 403px;
    display: block;
    object-fit: contain;
    object-position: center center;
    filter: saturate(0.90) contrast(1.02) brightness(0.98);
  }
  .ab-photo::before{
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, var(--paper) 0%, rgba(247,245,238,0.92) 16%, rgba(247,245,238,0.42) 34%, rgba(14,30,58,0.02) 56%),
      linear-gradient(180deg, rgba(14,30,58,0.02), rgba(14,30,58,0.38));
    pointer-events: none;
  }
  .ab-photo::after{
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(to right, rgba(247,245,238,0.08) 1px, transparent 1px) 0 0 / 36px 36px,
      linear-gradient(to bottom, rgba(247,245,238,0.06) 1px, transparent 1px) 0 0 / 36px 36px;
    mix-blend-mode: screen;
    opacity: .26;
    pointer-events: none;
  }
  .ab-tag{
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 9px;
    background: rgba(247,245,238,0.88);
    border: 1px solid rgba(14,30,58,0.28);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px -18px rgba(14,30,58,0.70);
  }
  .ab-tag b{
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink);
  }
  .ab-tag small{ color: var(--moss-2); font-size: 8px; letter-spacing: .10em }
  .ab-tag.michael{ right: 16px; top: 24px }
  .ab-tag.juliver{ left: 16px; bottom: 22px;
    background: rgba(14,30,58,0.92); border-color: rgba(247,245,238,0.26);
    color: var(--paper) }
  .ab-tag.juliver b{ color: var(--paper) }

  .ab-cv{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    align-items: start;
    background: var(--paper-3);
  }
  .ab-cv-head{
    padding: 12px 14px;
    background: var(--ink); color: var(--paper);
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
  }
  .ab-cv-head b{
    color: var(--paper); font-family: var(--font-display);
    font-weight: 700; font-size: 15px; letter-spacing: 0;
  }
  .ab-cv > .ab-cv-head:nth-child(1){ grid-column: 1; grid-row: 1; border-right: 1px solid rgba(247,245,238,0.18) }
  .ab-cv > .ab-cv-person:nth-child(2){ grid-column: 1; grid-row: 2; border-right: 1px solid var(--hair-strong) }
  .ab-cv > .ab-cv-head:nth-child(3){ grid-column: 2; grid-row: 1 }
  .ab-cv > .ab-cv-person:nth-child(4){ grid-column: 2; grid-row: 2 }
  .ab-row{
    display: grid; grid-template-columns: 82px 1fr;
    padding: 9px 14px;
    border-bottom: 1px solid var(--hair);
    align-items: baseline;
  }
  .ab-row:last-child{ border-bottom: none }
  .ab-cv-person{ display: block }
  .ab-row .k{
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .ab-row .v{
    min-width: 0;
    font-family: var(--font-sans); font-size: 12.5px;
    color: var(--ink); line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .ab-row .v b{ font-weight: 600 }
  .ab-row .v small{
    display: block; margin-top: 3px;
    font-family: var(--font-mono); font-size: 9px;
    color: var(--ink-soft); letter-spacing: .04em;
  }
  .ab-cv-head-r{
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  }
  .codia-verify{
    font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .10em;
    text-transform: uppercase; color: rgba(247,245,238,0.65);
    border: 1px solid rgba(247,245,238,0.35); padding: 2px 7px;
    text-decoration: none; transition: color .18s, border-color .18s;
  }
  .codia-verify:hover{ color: var(--paper); border-color: var(--paper) }

  /* equipment strip — small */
  .ab-eq{
    grid-column: 1 / -1;
    background: var(--ink); color: var(--paper);
    padding: 18px 32px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  }
  .ab-eq .e{
    padding: 0 18px;
    border-right: 1px solid rgba(247,245,238,0.18);
  }
  .ab-eq .e:first-child{ padding-left: 0 }
  .ab-eq .e:last-child{ border-right: none }
  .ab-eq .e .l{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(247,245,238,0.55); margin-bottom: 6px;
  }
  .ab-eq .e .v{
    font-family: var(--font-display); font-weight: 700;
    font-size: 18px; letter-spacing: 0; text-transform: uppercase;
    line-height: 1.05; color: var(--paper);
  }
  .ab-eq .e .v small{
    display: block; margin-top: 4px;
    font-family: var(--font-mono); font-size: 10px;
    color: rgba(247,245,238,0.55); font-weight: 400;
    text-transform: none; letter-spacing: 0;
  }

  /* =================================================================
     § 07 — CONTACTO
     ================================================================= */
  .sec-contact{ background: var(--paper) }
  .ct-wrap{
    display: grid; grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--ink);
  }
  .ct-form{
    padding: 32px 32px;
    border-right: 1px solid var(--ink);
  }
  .ct-form h2{
    margin: 0 0 6px;
    font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0;
    font-size: clamp(28px, 2.8vw, 36px); line-height: 1;
  }
  .ct-form h2 em{ font-style: normal; color: var(--moss-2); font-weight: 500 }
  .ct-form .sub{
    font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
    color: var(--ink-soft); margin-bottom: 22px; max-width: 50ch;
  }
  .ct-grid{
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid var(--ink);
    margin-bottom: 14px;
  }
  .ct-field{
    padding: 12px 14px;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    display: flex; flex-direction: column; gap: 5px;
    background: var(--paper);
    transition: background 160ms;
  }
  .ct-field:focus-within{ background: var(--paper-2) }
  .ct-field:nth-child(2n){ border-right: none }
  .ct-field:nth-last-child(-n+2){ border-bottom: none }
  .ct-field.full{ grid-column: 1 / -1; border-right: none }
  .ct-field label{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .ct-field input, .ct-field select, .ct-field textarea{
    border: none; outline: none; background: transparent;
    font-family: var(--font-sans); font-size: 14.5px;
    color: var(--ink); padding: 0;
    width: 100%;
    resize: vertical;
  }
  .ct-field input::placeholder, .ct-field textarea::placeholder{ color: var(--ink-mute) }
  .ct-field textarea{ min-height: 60px; line-height: 1.45 }

  .ct-actions{
    display: flex; gap: 0;
    border: 1px solid var(--ink);
  }
  .ct-actions button{
    flex: 1; padding: 14px 18px;
    background: var(--ink); color: var(--paper); border: none;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
    cursor: pointer;
    transition: background 160ms, color 160ms;
    text-align: center;
  }
  .ct-actions button:hover{ background: var(--moss-2) }

  .ct-success{
    margin-top: 18px;
    border: 1px solid var(--moss);
    background: #EBF1E5;
    padding: 16px 18px;
    display: grid; grid-template-columns: 40px 1fr; gap: 14px;
    align-items: start;
  }
  .ct-success[hidden]{ display: none }
  .ct-success-icon{
    width: 32px; height: 32px;
    border-radius: 999px;
    background: var(--moss);
    color: var(--paper);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 18px;
  }
  .ct-success b{
    display: block; font-family: var(--font-display);
    font-weight: 700; text-transform: uppercase;
    font-size: 14px; letter-spacing: 0; line-height: 1;
    margin-bottom: 6px; color: var(--moss-2);
  }
  .ct-success span{
    font-family: var(--font-sans); font-size: 13px;
    line-height: 1.45; color: var(--ink);
  }
  .ct-error{
    margin-top: 12px;
    border: 1px solid var(--signal);
    padding: 12px 16px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .1em; color: var(--signal);
    line-height: 1.5;
  }
  .ct-error[hidden]{ display: none }

  /* ── Quote Toast ────────────────────────────────────── */
  #quoteToast{
    position:fixed; inset:0; z-index:9100;
    display:flex; align-items:center; justify-content:center;
    background:rgba(14,30,58,.52);
    opacity:0; pointer-events:none;
    transition:opacity 260ms ease;
  }
  #quoteToast.qt-show{ opacity:1; pointer-events:auto }
  #quoteToast.qt-hide{ opacity:0; pointer-events:none }
  .qt-card{
    background:#fff; padding:44px 48px; text-align:center;
    max-width:360px; width:90%;
    transform:scale(.88) translateY(12px);
    transition:transform 300ms cubic-bezier(.16,1,.3,1);
  }
  #quoteToast.qt-show .qt-card{ transform:scale(1) translateY(0) }
  .qt-svg{ width:72px; height:72px; display:block; margin:0 auto 20px }
  .qt-ring{
    fill:none; stroke:var(--moss,#3E6E4A); stroke-width:4;
    stroke-dasharray:200; stroke-dashoffset:200;
    stroke-linecap:round;
  }
  #quoteToast.qt-show .qt-ring{
    animation:qt-ring 380ms 60ms cubic-bezier(.4,0,.2,1) forwards
  }
  .qt-tick{
    fill:none; stroke:var(--moss,#3E6E4A); stroke-width:4.5;
    stroke-dasharray:50; stroke-dashoffset:50;
    stroke-linecap:round; stroke-linejoin:round;
  }
  #quoteToast.qt-show .qt-tick{
    animation:qt-tick 280ms 420ms cubic-bezier(.4,0,.2,1) forwards
  }
  @keyframes qt-ring{ to{ stroke-dashoffset:0 } }
  @keyframes qt-tick{ to{ stroke-dashoffset:0 } }
  .qt-title{
    font-family:var(--font-display,sans-serif); font-weight:700;
    font-size:15px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink,#0E1E3A); margin-bottom:8px;
  }
  .qt-sub{
    font-family:var(--font-sans,Arial,sans-serif); font-size:13px;
    line-height:1.55; color:var(--ink-soft,#6B778D);
  }

  .ct-info{
    padding: 32px 32px;
    background: var(--ink); color: var(--paper);
    display: flex; flex-direction: column; gap: 0;
  }
  .ct-info .ci-head{
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(247,245,238,0.55);
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(247,245,238,0.18);
  }
  .ct-info h3{
    margin: 0 0 22px;
    font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0;
    font-size: clamp(26px, 2.4vw, 34px); line-height: 1;
    color: var(--paper);
  }
  .ct-info h3 em{ font-style: normal; color: #9DB9A4; font-weight: 500 }

  .ct-info .ci-row{
    display: grid; grid-template-columns: 90px 1fr;
    padding: 12px 0;
    border-bottom: 1px solid rgba(247,245,238,0.10);
    align-items: baseline;
  }
  .ct-info .ci-row .k{
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(247,245,238,0.55);
  }
  .ct-info .ci-row .v{
    font-family: var(--font-sans); font-size: 14px;
    color: var(--paper); line-height: 1.45;
  }
  .ct-info .ci-row .v a{ color: #9DB9A4; text-decoration: underline; text-underline-offset: 3px }
  .ct-info .ci-row .v small{
    display: block; margin-top: 3px;
    font-family: var(--font-mono); font-size: 10px;
    color: rgba(247,245,238,0.55);
  }
  .ct-info .ci-coords{
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .04em; color: rgba(247,245,238,0.7); line-height: 1.7;
  }
  .ct-info .ci-coords b{ color: var(--paper); font-weight: 500 }

  /* footer of page */
  .pagefoot{
    position: relative;
    z-index: 70;
    background: var(--ink); color: rgba(247,245,238,0.62);
    border-top: 1px solid var(--ink);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .04em;
  }
  .pagefoot a{ color: rgba(247,245,238,0.85); text-decoration: none; transition: color 160ms }
  .pagefoot a:hover{ color: var(--paper) }
  .pagefoot b{ color: var(--paper); font-weight: 500 }

  .pf-top{
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    padding: 36px 32px 28px;
    border-bottom: 1px solid rgba(247,245,238,0.18);
  }
  .pf-brand{ display: flex; align-items: center; gap: 14px }
  .pf-brand-mk{
    width: 56px; height: 56px;
    border-radius: 999px; overflow: hidden;
    background: #fff;
    flex-shrink: 0;
  }
  .pf-brand-mk img{
    width: 100%; height: 100%; margin: 0;
    display: block;
  }
  .pf-brand-text{
    font-family: var(--font-display); font-weight: 700;
    font-size: 18px; letter-spacing: .02em;
    text-transform: uppercase; color: var(--paper);
    line-height: 1.05;
    display: flex; flex-direction: column; gap: 4px;
  }
  .pf-brand-text em{
    font-style: normal; font-weight: 500;
    color: rgba(247,245,238,0.6); font-size: 11px;
    letter-spacing: .08em; font-family: var(--font-mono);
  }

  .pf-cols{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  }
  .pf-col{ display: flex; flex-direction: column; gap: 8px }
  /* Services column: 2-column grid so 13 links don't grow too tall */
  .pf-col--services{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 0;
    align-content: start;
  }
  .pf-col--services .pf-h{ grid-column: 1 / -1; }
  .pf-col .pf-h{
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(247,245,238,0.5);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(247,245,238,0.15);
    margin-bottom: 4px;
  }
  .pf-col a, .pf-col .pf-line{
    font-family: var(--font-sans); font-size: 13px;
    line-height: 1.5; padding: 1px 0;
    color: rgba(247,245,238,0.78);
    letter-spacing: 0;
  }
  .pf-col .pf-line{ color: rgba(247,245,238,0.55) }
  .pf-soc{
    display: inline-flex; align-items: center; gap: 8px;
  }
  .pf-soc svg{ width: 18px; height: 18px; flex-shrink: 0 }

  .pf-mid-row{
    display: flex; justify-content: space-between;
    padding: 14px 32px;
    border-bottom: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .08em; color: rgba(247,245,238,0.55);
  }

  .pf-legal{
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 32px;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .08em; color: rgba(247,245,238,0.55);
    text-transform: uppercase;
  }
  .pf-legal-links{ display: flex; gap: 22px }
  .pf-legal-links a{
    color: rgba(247,245,238,0.55);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 160ms, border-color 160ms;
  }
  .pf-legal-links a:hover{ color: var(--paper); border-color: rgba(247,245,238,0.4) }

  @media (min-width: 901px) and (max-width: 1180px){
    .sec-marker{ grid-template-columns: minmax(142px, auto) minmax(0, 1fr) auto }
    .sec-marker .num{
      min-width: 142px;
      padding: 12px 16px;
      font-size: 10px;
      letter-spacing: .15em;
    }
    .sec-marker .num b{ font-size: 24px }
    .sec-marker .title{
      min-width: 0;
      padding: 12px 20px;
      font-size: clamp(30px, 4vw, 42px);
      line-height: 1;
      overflow-wrap: anywhere;
    }
    .sec-marker .sheet{
      padding: 12px 16px;
      font-size: 9px;
      letter-spacing: .13em;
    }
    .ab-wrap{
      grid-template-columns: minmax(340px, .88fr) minmax(420px, 1fr);
    }
    .ab-bio{
      padding: 26px 24px;
      border-right: 1px solid var(--ink);
      border-bottom: 1px solid var(--ink);
    }
    .ab-bio h2{ font-size: clamp(30px, 3.6vw, 38px) }
    .ab-bio p{ font-size: 14px; line-height: 1.5 }
    .ab-photo{
      min-height: 520px;
      border-right: none;
      border-bottom: 1px solid var(--ink);
    }
    .ab-photo img{
      min-height: 520px;
      object-position: center center;
    }
    .ab-photo::before{
      background:
        linear-gradient(90deg, rgba(247,245,238,0.88) 0%, rgba(247,245,238,0.58) 24%, rgba(14,30,58,0.04) 52%),
        linear-gradient(180deg, rgba(14,30,58,0.02), rgba(14,30,58,0.34));
    }
    .ab-tag.michael{ right: 18px; top: 24px }
    .ab-tag.juliver{ left: 24px; bottom: 22px }
    .ab-cv{
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto;
    }
    .ab-row{ grid-template-columns: 104px 1fr; padding: 10px 16px }
    .ab-eq{ padding: 18px 24px }
  }

  @media (max-width: 900px){
    .cl-wrap{ grid-template-columns: 1fr }
    .cl-side{ border-right: none; border-bottom: 1px solid var(--ink) }
    .cl-grid{ grid-template-columns: 1fr 1fr }
    .cl-cell:nth-child(4n){ border-right: 1px solid var(--hair) }
    .cl-cell:nth-child(2n){ border-right: none }
    .ab-wrap{ grid-template-columns: 1fr }
    .ab-bio{ border-right: none; border-bottom: 1px solid var(--ink) }
    .ab-photo{ min-height: 360px; border-right: none; border-bottom: 1px solid var(--ink) }
    .ab-photo img{ min-height: 360px; object-position: 52% center }
    .ab-cv{ grid-template-columns: 1fr; grid-template-rows: auto auto auto auto }
    .ab-cv > .ab-cv-head:nth-child(1){ grid-column: 1; grid-row: 1; border-right: none }
    .ab-cv > .ab-cv-person:nth-child(2){ grid-column: 1; grid-row: 2; border-right: none; border-bottom: 1px solid var(--ink) }
    .ab-cv > .ab-cv-head:nth-child(3){ grid-column: 1; grid-row: 3; border-top: 1px solid rgba(247,245,238,0.18) }
    .ab-cv > .ab-cv-person:nth-child(4){ grid-column: 1; grid-row: 4 }
    .ab-cv-head{ gap: 12px }
    .ab-cv-head-r{ align-items: flex-end }
    .codia-verify{
      min-height: 38px;
      min-width: 128px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      font-size: 9px;
      color: var(--paper);
      border-color: rgba(247,245,238,0.70);
      background: rgba(247,245,238,0.08);
    }
    .ab-eq{ grid-template-columns: 1fr 1fr; gap: 14px 0 }
    .ab-eq .e:nth-child(2n){ border-right: none }
    .ab-eq .e:nth-child(1), .ab-eq .e:nth-child(2){ border-bottom: 1px solid rgba(247,245,238,0.18); padding-bottom: 14px }
    .ct-wrap{ grid-template-columns: 1fr }
    .ct-form{ border-right: none; border-bottom: 1px solid var(--ink) }
    .ct-grid{ grid-template-columns: 1fr }
    .ct-field,
    .ct-field:nth-child(2n),
    .ct-field:nth-last-child(-n+2){ border-right: none; border-bottom: 1px solid var(--ink) }
    .ct-field:last-child{ border-bottom: none }
    .ct-actions button{ min-height: 52px }
    .pf-top{ grid-template-columns: 1fr; gap: 28px }
    .pf-cols{ grid-template-columns: 1fr 1fr; gap: 20px }
    .pf-mid-row{ flex-direction: column; gap: 6px }
    .pf-legal{ flex-direction: column; gap: 10px; text-align: center }
    .pf-legal-links{ flex-wrap: wrap; justify-content: center; gap: 12px }
  }
  /* =================================================================
     PROJECT MODAL (uses same flip mechanic as service modal)
     ================================================================= */
  .proj-modal{
    position: fixed; inset: 0;
    background:
      linear-gradient(rgba(14, 30, 58, 0.60), rgba(14, 30, 58, 0.60)),
      radial-gradient(circle at 50% 42%, rgba(247,245,238,0.08), rgba(14,30,58,0) 46%);
    z-index: 100;
    opacity: 0; pointer-events: none;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
    display: grid; place-items: center;
    padding: 24px;
    perspective: 1400px;
    overflow-y: auto;
  }
  .proj-modal.open{ opacity: 1; pointer-events: auto }
  .proj-modal .pjm-card{
    width: 100%; max-width: 660px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 32px 80px -32px rgba(14,30,58,0.5);
    transform: translateZ(0) rotateY(-90deg) scale(0.6);
    opacity: 0;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    transition:
      transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .proj-modal.open .pjm-card{
    transform: translateZ(0) rotateY(0deg) scale(1);
    opacity: 1;
  }
  .proj-modal.closing .pjm-card{
    transform: translateZ(0) rotateY(-90deg) scale(0.6);
    opacity: 0;
    transition:
      transform 380ms cubic-bezier(0.7, 0.0, 0.84, 0),
      opacity 280ms cubic-bezier(0.7, 0.0, 0.84, 0);
  }
  .proj-modal.closing{
    opacity: 0;
    transition: opacity 280ms cubic-bezier(0.7, 0.0, 0.84, 0);
  }
  .proj-modal.open.settled{ perspective: none; }
  .proj-modal.open.settled .pjm-card{ transform: none; }

  /* Custom scrollbar — pjm-card */
  .pjm-card{ scrollbar-width: thin; scrollbar-color: rgba(14,30,58,0.35) var(--paper-2); }
  .pjm-card::-webkit-scrollbar{ width: 5px; }
  .pjm-card::-webkit-scrollbar-track{ background: var(--paper-2); }
  .pjm-card::-webkit-scrollbar-thumb{ background: rgba(14,30,58,0.35); }
  .pjm-card::-webkit-scrollbar-thumb:hover{ background: var(--ink); }

  .pjm-head{
    display: grid; grid-template-columns: auto auto 1fr auto;
    align-items: stretch;
    background: var(--ink); color: var(--paper);
  }
  .pjm-head .pjm-id{
    padding: 10px 14px; border-right: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase;
    display: flex; align-items: center; font-weight: 500;
  }
  .pjm-head .pjm-type{
    padding: 10px 14px; border-right: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    display: flex; align-items: center;
    color: #9DB9A4;
  }
  .pjm-head .pjm-title-h{
    padding: 10px 14px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 19px; text-transform: uppercase; letter-spacing: 0;
    display: flex; align-items: center; line-height: 1;
  }
  .pjm-head .pjm-close{
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px;
    background: transparent; color: var(--paper);
    border: none; border-left: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer; font-weight: 500;
    transition: background 160ms;
  }
  .pjm-head .pjm-close:hover{ background: var(--moss-2) }
  .pjm-head .pjm-close svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none }

  .pjm-body{ padding: 0 }
  .pjm-top-grid{
    display: grid; grid-template-columns: 1.4fr 1fr;
    border-bottom: 1px solid var(--hair-strong);
  }
  .pjm-plano{
    background:
      linear-gradient(to right, rgba(14,30,58,0.04) 1px, transparent 1px) 0 0 / 36px 36px,
      linear-gradient(to bottom, rgba(14,30,58,0.04) 1px, transparent 1px) 0 0 / 36px 36px,
      var(--paper-3);
    padding: 14px;
    display: grid; place-items: center;
    border-right: 1px solid var(--hair-strong);
    min-height: 180px;
  }
  .pjm-plano svg{ width: 100%; height: auto; max-height: 205px }

  .pjm-keydata{
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  }
  .pjm-keydata > div{
    padding: 10px 14px;
    border-right: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    display: flex; flex-direction: column; gap: 4px;
  }
  .pjm-keydata > div:nth-child(2n){ border-right: none }
  .pjm-keydata > div:nth-last-child(-n+2){ border-bottom: none }
  .pjm-keydata .k{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .pjm-keydata .v{
    font-family: var(--font-display); font-weight: 700;
    font-size: 16px; line-height: 1.0; letter-spacing: 0;
    text-transform: uppercase;
  }
  .pjm-keydata .v.ok{ color: var(--moss-2) }
  .pjm-keydata .v small{
    display: block; margin-top: 3px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .06em; color: var(--ink-soft);
    font-weight: 400; text-transform: none;
  }

  .pjm-section{
    padding: 12px 18px;
    border-bottom: 1px solid var(--hair);
  }
  .pjm-section h4{
    margin: 0 0 10px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 500;
  }
  .pjm-section p{
    margin: 0;
    font-family: var(--font-sans); font-size: 13px; line-height: 1.45;
    color: var(--ink);
  }
  .pjm-section .quote{
    font-family: var(--font-display); font-weight: 500;
    font-size: 14.5px; line-height: 1.3;
    color: var(--ink); font-style: italic;
    padding-left: 14px;
    border-left: 3px solid var(--moss);
  }

  .pjm-tech{
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--ink); color: var(--paper);
  }
  .pjm-tech > div{
    padding: 8px 12px;
    border-right: 1px solid rgba(247,245,238,0.18);
  }
  .pjm-tech > div:last-child{ border-right: none }
  .pjm-tech .k{
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(247,245,238,0.55); margin-bottom: 4px;
  }
  .pjm-tech .v{
    font-family: var(--font-mono); font-size: 13px;
    color: var(--paper); font-weight: 500; letter-spacing: 0;
  }

  .pjm-deliv{
    display: grid; grid-template-columns: 1fr 1fr;
    padding: 10px 18px;
    gap: 5px 12px;
    border-bottom: 1px solid var(--hair);
  }
  .pjm-deliv .d{
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-sans); font-size: 12.5px;
    color: var(--ink);
  }
  .pjm-deliv .d::before{
    content: '✓'; color: var(--moss);
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px;
  }

  .pjm-foot{
    display: flex; border-top: 1px solid var(--ink);
  }
  .pjm-foot a{
    flex: 1; padding: 10px 12px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
    text-align: center; text-decoration: none;
    color: var(--ink);
    border-right: 1px solid var(--ink);
    transition: background 160ms;
  }
  .pjm-foot a:last-child{
    border-right: none; background: var(--moss); color: var(--paper);
  }
  .pjm-foot a:hover{ background: var(--paper-2) }
  .pjm-foot a:last-child:hover{ background: var(--moss-2) }

  /* =================================================================
     LEGAL MODAL (Terms / Privacy / Notice)
     ================================================================= */
  .legal-modal{
    position: fixed; inset: 0;
    background:
      linear-gradient(rgba(14, 30, 58, 0.60), rgba(14, 30, 58, 0.60)),
      radial-gradient(circle at 50% 42%, rgba(247,245,238,0.08), rgba(14,30,58,0) 46%);
    z-index: 110;
    opacity: 0; pointer-events: none;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
    display: grid; place-items: center;
    padding: 24px;
    perspective: 1400px;
    overflow: hidden;
  }
  .legal-modal.open{ opacity: 1; pointer-events: auto }
  .legal-modal .legal-card{
    width: 100%; max-width: 680px;
    max-height: calc(100vh - 48px);
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 32px 80px -32px rgba(14,30,58,0.5);
    transform: translate3d(0, 22px, 0) rotateX(8deg) scale(0.96);
    opacity: 0;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    transition:
      transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
  }
  .legal-modal.open .legal-card{ transform: translate3d(0, 0, 0) rotateX(0deg) scale(1); opacity: 1 }
  .legal-modal.closing .legal-card{
    transform: translate3d(0, 18px, 0) rotateX(6deg) scale(0.97); opacity: 0;
    transition:
      transform 260ms cubic-bezier(0.7, 0.0, 0.84, 0),
      opacity 220ms cubic-bezier(0.7, 0.0, 0.84, 0);
  }
  .legal-modal.open.settled{ perspective: none }
  .legal-modal.open.settled .legal-card{ transform: none }

  .lm-head{
    display: grid; grid-template-columns: auto 1fr auto;
    background: var(--ink); color: var(--paper);
    align-items: stretch;
    flex-shrink: 0;
  }
  .lm-head .lm-id{
    padding: 10px 14px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    border-right: 1px solid rgba(247,245,238,0.18);
    display: flex; align-items: center;
  }
  .lm-title{
    padding: 10px 14px;
    margin: 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: 18px; text-transform: uppercase; letter-spacing: 0;
    display: flex; align-items: center; line-height: 1;
  }
  .lm-close{
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px;
    background: transparent; color: var(--paper);
    border: none; border-left: 1px solid rgba(247,245,238,0.18);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer; font-weight: 500;
    transition: background 160ms;
  }
  .lm-close:hover{ background: var(--moss-2) }
  .lm-close svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none }

  .lm-body{
    padding: 16px 20px;
    overflow: hidden;
    font-family: var(--font-sans); font-size: 12.5px; line-height: 1.42;
    color: var(--ink);
    flex: 1;
    columns: 2 300px;
    column-gap: 22px;
  }
  .lm-body h4{
    margin: 12px 0 5px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 12.5px; text-transform: uppercase; letter-spacing: .02em;
    color: var(--ink);
  }
  .lm-body h4:first-child{ margin-top: 0 }
  .lm-body p{ margin: 0 0 8px }
  .lm-body ul{ margin: 0 0 8px; padding-left: 16px }
  .lm-body ul li{ margin-bottom: 3px }
  .lm-body b{ font-weight: 600 }
  .lm-body h4,
  .lm-body p,
  .lm-body ul{ break-inside: avoid }

  .lm-foot{
    border-top: 1px solid var(--ink);
    background: var(--paper-3);
    padding: 10px 20px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
    flex-shrink: 0;
  }
  .lm-close-btn{
    padding: 7px 16px;
    background: var(--ink); color: var(--paper); border: none;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer; font-weight: 500;
    transition: background 160ms;
  }
  .lm-close-btn:hover{ background: var(--moss-2) }

  @media (max-width: 700px){
    .proj-modal{ padding: 12px }
    .proj-modal .pm-card{ max-width: 100% }
    .pm-head{ grid-template-columns: auto 1fr auto }
    .pm-head .pm-type{ display: none }
    .pm-head .pm-title-h{ font-size: 16px; padding: 12px 14px }
    .pm-head .pm-id{ font-size: 9.5px; padding: 12px 14px }
    .pm-top-grid{ grid-template-columns: 1fr }
    .pm-plano{ border-right: none; border-bottom: 1px solid var(--hair-strong) }
    .pm-tech{ grid-template-columns: 1fr }
    .pm-tech > div{ border-right: none; border-bottom: 1px solid rgba(247,245,238,0.18) }
    .pm-tech > div:last-child{ border-bottom: none }
    .pm-deliv{ grid-template-columns: 1fr }

    .legal-modal{ padding: 12px }
    .lm-title{ font-size: 16px; padding: 12px 14px }
    .lm-id{ font-size: 9.5px; padding: 12px 14px }
    .lm-body{ padding: 18px 20px; columns: auto; overflow-y: auto }

    .cl-grid{ grid-template-columns: 1fr }
    .cl-cell,
    .cl-cell:nth-child(2n),
    .cl-cell:nth-child(4n){ border-right: none }
    .cl-cell{ min-height: 150px; aspect-ratio: auto }
    .pf-cols{ grid-template-columns: 1fr }
    .pf-col--services{ grid-template-columns: 1fr 1fr }
  }

  /* ═══════════════════════════════════════════════════
     MJ ADMIN PANEL
  ═══════════════════════════════════════════════════ */
  #mjAdmin { position:fixed; inset:0; z-index:99999; font-family:'Geist',system-ui,sans-serif; }
  /* force [hidden] to work inside admin even when element has display:flex/block in CSS */
  #mjAdmin [hidden] { display: none !important; }
  .mja-lock { position:absolute; inset:0; background:rgba(14,30,58,0.97); display:flex; align-items:center; justify-content:center; }
  .mja-lock-box { background:#fff; border-radius:12px; padding:2.5rem 2rem; width:320px; max-width:90vw; display:flex; flex-direction:column; gap:1rem; box-shadow:0 24px 64px rgba(0,0,0,0.4); }
  .mja-lock-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .mja-lock-logo { font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:1.5rem; color:#0E1E3A; letter-spacing:.5px; line-height:1.2; }
  .mja-lock-close { background:none; border:none; cursor:pointer; color:rgba(14,30,58,0.4); padding:2px; line-height:0; border-radius:6px; transition:color 140ms, background 140ms; flex-shrink:0; margin-top:2px; }
  .mja-lock-close:hover { color:#0E1E3A; background:rgba(14,30,58,0.07); }
  .mja-lock-hint { margin:0; color:rgba(14,30,58,0.55); font-size:13px; }
  .mja-dash { position:absolute; inset:0; background:#F7F5EE; display:flex; flex-direction:column; overflow:hidden; }
  .mja-header { background:#0E1E3A; color:#fff; padding:.9rem 1.5rem; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
  .mja-header-title { display:flex; align-items:center; gap:.75rem; font-size:14px; opacity:.85; }
  .mja-logo-text { font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:1.25rem; opacity:1; }
  .mja-body { flex:1; overflow-y:auto; padding:1.5rem; }
  .mja-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
  .mja-section-title { margin:0; font-size:1.1rem; font-weight:600; color:#0E1E3A; }
  .mja-proj-list { display:flex; flex-direction:column; gap:.75rem; }
  .mja-proj-item { background:#fff; border:1px solid rgba(14,30,58,.1); border-radius:10px; display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; transition:box-shadow .15s; }
  .mja-proj-item:hover { box-shadow:0 2px 12px rgba(14,30,58,.1); }
  .mja-proj-hidden { opacity:.45; }
  .mja-proj-thumb { width:64px; height:48px; flex-shrink:0; border-radius:6px; overflow:hidden; background:#e8e4d8; }
  .mja-proj-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .mja-thumb-ph { width:100%; height:100%; background:linear-gradient(135deg,#e0dcd0 25%,#d5d0c4 75%); }
  .mja-proj-info { flex:1; min-width:0; }
  .mja-proj-id { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:#0E1E3A; opacity:.7; }
  .mja-proj-type { font-size:13px; font-weight:600; color:#0E1E3A; }
  .mja-proj-loc { font-size:12px; color:rgba(14,30,58,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mja-proj-actions { display:flex; gap:.5rem; flex-shrink:0; }
  .mja-btn-icon { background:none; border:1px solid rgba(14,30,58,.15); border-radius:6px; padding:.3rem .55rem; cursor:pointer; font-size:14px; transition:background .15s; color:#0E1E3A; }
  .mja-btn-icon:hover { background:rgba(14,30,58,.08); }
  /* Editor overlay */
  .mja-editor { position:absolute; inset:0; background:rgba(14,30,58,.6); display:flex; align-items:flex-start; justify-content:center; padding:1rem; overflow-y:auto; }
  .mja-editor-inner { background:#fff; border-radius:14px; width:100%; max-width:860px; margin:auto; box-shadow:0 32px 80px rgba(0,0,0,.3); display:flex; flex-direction:column; max-height:90vh; }
  .mja-editor-head { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; border-bottom:1px solid rgba(14,30,58,.1); flex-shrink:0; }
  .mja-editor-head h3 { margin:0; font-size:1.1rem; font-weight:700; color:#0E1E3A; }
  .mja-editor-close { font-size:1.4rem; line-height:1; background:none; border:none; cursor:pointer; color:rgba(14,30,58,.5); padding:.25rem .5rem; }
  .mja-editor-body { flex:1; overflow-y:auto; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
  .mja-editor-foot { padding:1rem 1.5rem; border-top:1px solid rgba(14,30,58,.1); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; background:#fafaf8; border-radius:0 0 14px 14px; }
  .mja-editor-foot-right { display:flex; gap:.75rem; }
  .mje-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .mje-row-3 { grid-template-columns:1fr 1fr 1fr; }
  .mje-field { display:flex; flex-direction:column; gap:.35rem; }
  .mje-field label { font-size:12px; font-weight:600; color:rgba(14,30,58,.65); text-transform:uppercase; letter-spacing:.5px; }
  .mje-field label small { font-weight:400; text-transform:none; letter-spacing:0; font-size:11px; }
  .mje-full { grid-column:1/-1; }
  .mje-images { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .mje-img-zone label { font-size:12px; font-weight:600; color:rgba(14,30,58,.65); text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:.4rem; }
  .mja-dropzone { border:2px dashed rgba(14,30,58,.2); border-radius:10px; background:#faf9f4; cursor:pointer; overflow:hidden; position:relative; min-height:140px; display:flex; align-items:center; justify-content:center; transition:border-color .2s,background .2s; }
  .mja-dropzone:hover,.mja-drag { border-color:#3E6E4A; background:rgba(62,110,74,.05); }
  .mja-drop-preview { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
  .mja-drop-placeholder { display:flex; flex-direction:column; align-items:center; gap:.4rem; color:rgba(14,30,58,.4); font-size:13px; padding:1rem; text-align:center; }
  .mja-drop-icon { font-size:1.8rem; }
  .mja-drop-placeholder small { font-size:11px; opacity:.75; }
  /* Deliverables */
  .mje-deliverables-list { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.5rem; }
  .mje-deliv-row { display:flex; gap:.5rem; }
  .mje-deliv-input { flex:1; }
  .mje-deliv-remove { background:none; border:1px solid rgba(14,30,58,.15); border-radius:6px; padding:0 .5rem; cursor:pointer; color:rgba(14,30,58,.4); font-size:1.1rem; line-height:1; }
  .mje-deliv-remove:hover { color:#c0392b; border-color:#c0392b; }
  .mje-add-deliv { margin-top:.25rem; }
  /* Shared form inputs */
  .mja-input,.mja-select,.mja-textarea { width:100%; padding:.55rem .75rem; border:1px solid rgba(14,30,58,.18); border-radius:7px; font-family:inherit; font-size:14px; color:#0E1E3A; background:#fff; transition:border-color .15s; box-sizing:border-box; }
  .mja-input:focus,.mja-select:focus,.mja-textarea:focus { outline:none; border-color:#3E6E4A; box-shadow:0 0 0 3px rgba(62,110,74,.12); }
  .mja-textarea { resize:vertical; min-height:80px; line-height:1.5; }
  /* Buttons */
  .mja-btn-primary { background:#0E1E3A; color:#fff; border:none; border-radius:8px; padding:.6rem 1.25rem; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; font-family:inherit; }
  .mja-btn-primary:hover:not(:disabled) { background:#16294B; }
  .mja-btn-primary:disabled { opacity:.5; cursor:not-allowed; }
  .mja-login-btn { padding:.75rem; font-size:14px; }
  .mja-btn-ghost { background:none; border:1px solid rgba(14,30,58,.2); border-radius:8px; padding:.55rem 1rem; font-size:13px; cursor:pointer; color:#0E1E3A; font-family:inherit; transition:background .15s; }
  .mja-btn-ghost:hover { background:rgba(14,30,58,.06); }
  .mja-btn-danger { background:none; border:1px solid rgba(192,57,43,.4); color:#c0392b; border-radius:8px; padding:.55rem 1rem; font-size:13px; cursor:pointer; font-family:inherit; transition:background .15s; }
  .mja-btn-danger:hover { background:rgba(192,57,43,.08); }
  /* Error + toast */
  .mja-err { color:#c0392b; font-size:13px; margin:0; text-align:center; }
  .mja-toast { position:fixed; bottom:1.5rem; right:1.5rem; background:#0E1E3A; color:#fff; padding:.75rem 1.25rem; border-radius:8px; font-size:13px; z-index:100001; box-shadow:0 8px 24px rgba(0,0,0,.25); }
  .mja-toast-error { background:#c0392b; }
  @media(max-width:600px){
    .mje-row,.mje-images { grid-template-columns:1fr; }
    .mje-row-3 { grid-template-columns:1fr 1fr; }
    .mja-editor-inner { max-height:none; }
  }

  /* ══ MODULE A: SPA view switching ═══════════════════════════════ */
  body:not(.lib-active) #lib-view{ display:none }
  body.lib-active #main-view{ display:none }
  body:not(.lib-active) .topbar .back-btn{ display:none }
  body:not(.lib-active) .topbar .lib-coord{ display:none }
  body.lib-active .topbar .main-coord{ display:none }
  body.lib-active .topbar a[href="/library"]{ color:var(--ink) }
  body.lib-active .topbar a[href="/library"]::after{
    content:''; position:absolute;
    left:14px; right:14px; bottom:-1px;
    height:2px; background:var(--moss);
  }
  #main-view,
  #lib-view{
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
  body.spa-fading-out #main-view,
  body.spa-fading-out #lib-view{
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition:
      opacity 150ms cubic-bezier(0.4,0,0.2,1),
      transform 150ms cubic-bezier(0.4,0,0.2,1);
  }
  body.spa-fading-in #main-view,
  body.spa-fading-in #lib-view{
    animation: spa-view-in 190ms cubic-bezier(0.16,1,0.3,1) both;
  }
  @keyframes spa-view-in{
    from{ opacity: 0; transform: translate3d(0, -4px, 0) }
    to{ opacity: 1; transform: translate3d(0, 0, 0) }
  }
  @media (prefers-reduced-motion: reduce){
    body.spa-fading-out #main-view,
    body.spa-fading-out #lib-view{
      transition: none;
      transform: none;
    }
    body.spa-fading-in #main-view,
    body.spa-fading-in #lib-view{ animation: none }
  }
  .topbar .back-btn{
    display:flex; align-items:center; gap:6px;
    padding:0 16px; border-right:1px solid var(--hair);
    font-family:var(--font-mono); font-size:10px;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-soft); text-decoration:none;
    transition:color 160ms, background 160ms; white-space:nowrap;
  }
  .topbar .back-btn:hover{ color:var(--ink); background:var(--paper-2) }
  .topbar .back-btn svg{ flex-shrink:0 }
  @media (max-width: 560px){
    .topbar .back-btn{ display:none !important }
    .topbar .brand{
      flex: 1 1 auto;
      width: auto;
      min-width: 124px;
      max-width: 150px;
    }
    body.lib-active .topbar .brand{
      min-width: 132px;
      max-width: 156px;
    }
    .topbar .brand-mk{ width: 28px; height: 28px; flex: 0 0 28px }
    .topbar .brand-text{
      min-width: 0;
      overflow: hidden;
    }
    .topbar .brand-text em{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }
    .topbar .cta{
      flex: 1 1 auto;
      min-width: 0;
      max-width: none;
    }
    body.lib-active .topbar .back-btn{
      display:inline-flex !important;
      flex:0 0 60px;
      width:60px;
      min-width:60px;
      padding:0;
      justify-content:center;
      font-size:9px;
      letter-spacing:.12em;
      background:var(--paper);
    }
    body.lib-active .topbar .back-btn svg{
      width:14px;
      height:14px;
    }
    body.lib-active .topbar .cta{
      flex:1 1 auto;
      width:auto;
      min-width:48px;
      padding:0;
      justify-content:center;
    }
    body.lib-active .topbar .cta span:first-child{
      display:none;
    }
  }
  @media (max-width: 390px){
    .topbar .brand{
      min-width: 122px;
      max-width: 126px;
      padding-left: 8px;
      padding-right: 8px;
    }
    .menu-toggle{
      width: 48px;
      min-width: 48px;
    }
    .topbar .brand-text{ font-size: 11px }
    .topbar .brand-text em{ font-size: 8px }
    .topbar .cta{ font-size: 9px; letter-spacing: .12em }
    body.lib-active .topbar .brand{
      min-width: 122px;
      max-width: 126px;
    }
    body.lib-active .topbar .back-btn{
      flex-basis: 56px;
      width: 56px;
      min-width: 56px;
    }
  }
  /* Library layout */
  .lib-wrap{ display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 56px) }
  .lib-side{
    padding:16px 14px; border-right:1px solid var(--ink);
    background:var(--paper-3); position:sticky; top:56px;
    height:calc(100vh - 56px); overflow-y:auto;
    display:flex; flex-direction:column;
  }
  .lib-side h2{ margin:0 0 6px; font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1; text-transform:uppercase; letter-spacing:0 }
  .lib-side .lib-desc{ margin:0 0 14px; font-family:var(--font-sans); font-size:12.5px; line-height:1.45; color:var(--ink-soft) }
  .lib-search{ margin-bottom:10px; position:relative }
  .lib-search input{ width:100%; padding:7px 10px 7px 30px; border:1px solid var(--hair-strong); background:var(--paper); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink); outline:none; appearance:none; transition:border-color 160ms }
  .lib-search input:focus{ border-color:var(--ink) }
  .lib-search input::placeholder{ color:var(--ink-mute) }
  .lib-search .srch-icon{ position:absolute; left:9px; top:50%; transform:translateY(-50%); width:12px; height:12px; stroke:var(--ink-mute); fill:none; stroke-width:2; pointer-events:none }
  .lib-sort{ display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap }
  .lib-sort .srt{ padding:3px 7px; border:1px solid var(--hair-strong); background:var(--paper); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; transition:background 160ms, color 160ms, border-color 160ms }
  .lib-sort .srt:hover{ background:var(--paper-2); color:var(--ink) }
  .lib-sort .srt.active{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
  .lib-filters{ border-top:1px solid var(--hair-strong); padding-top:12px; margin-top:2px; display:flex; flex-wrap:wrap; gap:4px }
  .lib-filters .pf{ padding:4px 8px; background:var(--paper); border:1px solid var(--hair-strong); font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); cursor:pointer; transition:background 160ms, color 160ms, border-color 160ms }
  .lib-filters .pf:hover{ background:var(--paper-2) }
  .lib-filters .pf.active{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
  .lib-counter{ margin-top:14px; font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase }
  .lib-counter b{ color:var(--ink); font-weight:500; font-size:13px }
  .lib-clear{ margin-top:12px; background:transparent; color:var(--moss-2); cursor:pointer; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--moss); transition:background 160ms, color 160ms; align-self:flex-start; display:inline-flex }
  .lib-clear:hover{ background:var(--moss); color:var(--paper) }
  .lib-clear[hidden]{ display:none }
  .lib-side-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--hair); font-family:var(--font-mono); font-size:9.5px; color:var(--ink-mute); letter-spacing:.1em; text-transform:uppercase; line-height:1.5 }
  .lib-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); align-content:start; background:var(--paper); min-width:0 }
  .lib-grid .proj-card{
    width:100%;
    max-width:none;
    min-width:0;
  }
  .lib-empty{ display:none; grid-column:1/-1; padding:60px 24px; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute) }
  .lib-empty.show{ display:block }
  @media(max-width:820px){
    .lib-wrap{ grid-template-columns:1fr }
    .lib-side{ grid-column:1; grid-row:1; position:static; height:auto; max-height:none; border-right:none; border-bottom:1px solid var(--ink); padding:14px 16px }
    .lib-side h2{ font-size:22px }
    .lib-side .lib-desc{ font-size:13px; max-width:38ch }
    .lib-view-modes,
    .lib-sort,
    .lib-filters{
      display:flex;
      flex-wrap:nowrap;
      gap:6px;
      overflow-x:auto;
      scrollbar-width:none;
      padding-bottom:2px;
      margin-left:-16px;
      margin-right:-16px;
      padding-left:16px;
      padding-right:16px;
    }
    .lib-view-modes::-webkit-scrollbar,
    .lib-sort::-webkit-scrollbar,
    .lib-filters::-webkit-scrollbar{ display:none }
    .lib-view-modes .vmb,
    .lib-sort .srt,
    .lib-filters .pf{
      flex:0 0 auto;
      min-height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .lib-grid{ grid-column:1; grid-row:2; grid-template-columns:1fr; width:100%; overflow:hidden }
    .lib-grid .proj-card{
      flex-basis:auto;
      max-width:none;
      width:100%;
      min-height:0;
      border-right:none;
    }
    .lib-grid .proj-card .pc-draw{ height:176px }
    .lib-grid .proj-card .pc-body{ min-height:158px }
    .lib-side-foot{ display:none }
  }
  /* ══ MODULE B: library map view ══════════════════════════════════ */
  .lib-view-modes{ display:flex; gap:4px; margin-bottom:10px }
  .lib-view-modes .vmb{ padding:3px 8px; border:1px solid var(--hair-strong); background:var(--paper); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; transition:background 160ms, color 160ms, border-color 160ms }
  .lib-view-modes .vmb:hover{ background:var(--paper-2); color:var(--ink) }
  .lib-view-modes .vmb.active{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
  #libMapPanel{ display:none; grid-column:2; grid-row:1; padding:16px; background:var(--paper); position:relative }
  body.lib-active.map-view #libMapPanel{ display:block }
  .lib-map-tip{
    position:absolute; background:var(--paper); border:1px solid var(--ink);
    padding:9px 13px; pointer-events:none; opacity:0; z-index:20;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
    line-height:1.6; max-width:210px; transition:opacity 100ms;
  }
  .lib-map-tip.vis{ opacity:1 }
  .lib-map-tip strong{ font-size:11px; letter-spacing:.1em; text-transform:uppercase }
  body.lib-active.map-view #libGrid{ display:none }
  /* Table view */
  #libTablePanel{ display:none; grid-column:2; grid-row:1; overflow-x:auto; background:var(--paper); padding:0 }
  body.lib-active.table-view #libTablePanel{ display:block }
  body.lib-active.table-view #libGrid{ display:none }
  .lib-table{ width:100%; border-collapse:collapse }
  .lib-table th{ font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); padding:8px 14px; border-bottom:2px solid var(--hair-strong); text-align:left; white-space:nowrap; position:sticky; top:0; background:var(--paper); z-index:1 }
  .lib-table td{ font-family:var(--font-mono); font-size:11px; padding:8px 14px; border-bottom:1px solid var(--hair); color:var(--ink-soft); vertical-align:middle }
  .lib-table td.lt-id{ color:var(--moss); font-weight:600; white-space:nowrap }
  .lib-table td.lt-type{ white-space:nowrap }
  .lib-table td.lt-area{ white-space:nowrap; text-align:right }
  .lib-table td.lt-estado{ white-space:nowrap }
  .lib-table tr.proj-row{ cursor:pointer; transition:background 120ms }
  .lib-table tr.proj-row:hover{ background:var(--paper-2) }
  .lib-table tr.proj-row:hover td{ color:var(--ink) }
  .lib-map-svg{ width:100%; background:var(--paper-3); border:1px solid var(--hair-strong); cursor:default }
  .proj-pin{ cursor:pointer }
  .proj-pin .pp-ring{ fill:none; stroke:var(--signal); stroke-width:3; transition:stroke 160ms }
  .proj-pin .pp-dot{ fill:var(--signal); stroke:var(--ink); stroke-width:3; transition:fill 160ms }
  .proj-pin:hover .pp-ring{ stroke:var(--ink) }
  .proj-pin:hover .pp-dot{ fill:var(--ink) }
  .proj-pin .pp-lbl{ font-family:var(--font-mono); font-size:20px; fill:var(--ink); letter-spacing:.04em; pointer-events:none }
  .proj-pin .pp-id{ font-family:var(--font-mono); font-size:18px; fill:var(--ink); font-weight:500; letter-spacing:.04em; pointer-events:none }
  @media(max-width:820px){
    #libMapPanel{ grid-column:1; grid-row:2 }
    #libTablePanel{ grid-column:1; grid-row:2 }
    #libMapPanel{
      padding:12px;
      min-width:0;
      overflow:hidden;
    }
    .lib-map-svg{
      height:min(68vh, 520px);
      min-height:360px;
      touch-action:none;
    }
    .lib-map-hint{ padding:0; font-size:9px; line-height:1.4 }
    body.lib-active.table-view #libTablePanel{
      display:block;
      overflow:visible;
      min-width:0;
    }
    .lib-table,
    .lib-table tbody,
    .lib-table tr,
    .lib-table td{
      display:block;
      width:100%;
    }
    .lib-table thead{ display:none }
    .lib-table{
      border-collapse:separate;
      border-spacing:0;
    }
    .lib-table tr.proj-row{
      display:grid;
      grid-template-columns:1fr auto;
      gap:6px 12px;
      padding:14px 16px;
      border-bottom:1px solid var(--hair-strong);
      background:var(--paper);
    }
    .lib-table tr.proj-row:hover{ background:var(--paper-2) }
    .lib-table td{
      border-bottom:none;
      padding:0;
      font-size:11px;
      line-height:1.35;
      white-space:normal;
    }
    .lib-table td.lt-id{
      grid-column:1;
      color:var(--moss-2);
      font-size:11px;
    }
    .lib-table td.lt-type{
      grid-column:1 / -1;
      color:var(--ink);
      font-family:var(--font-display);
      font-size:18px;
      font-weight:700;
      line-height:1;
      white-space:normal;
    }
    .lib-table td.lt-area{
      grid-column:2;
      grid-row:1;
      text-align:right;
      color:var(--ink);
      white-space:nowrap;
    }
    .lib-table td.lt-estado{ display:none }
    .lib-table td:nth-child(3){
      grid-column:1 / -1;
      color:var(--ink-soft);
    }
    .lib-table td:nth-child(5){
      grid-column:1 / -1;
      color:var(--ink-mute);
      letter-spacing:.14em;
      text-transform:uppercase;
    }
  }
  .lib-map-hint{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-top:8px; padding:0 16px }

  /* ================================================================
     MJ · INTERACTIONS v1
     1 · :active scale  2 · hex hover lift  3 · focus glow
     4 · header shadow  5-6 · scroll reveal + stagger
     7 · success entrance  8 · coord flash
     ================================================================ */

  /* 1 · :active feedback — nav, CTA, misc buttons */
  .topbar nav a,
  .topbar .cta,
  .lang-btn,
  .back-btn{
    transition: background 160ms, color 160ms,
                transform 130ms cubic-bezier(0.23,1,0.32,1);
  }
  .topbar nav a:active,
  .topbar .cta:active { transform: scale(0.96) }
  .lang-btn:active,
  .back-btn:active    { transform: scale(0.95) }

  /* 1 · :active feedback — form CTA row */
  .ct-actions button,
  .ct-actions a{
    transition: background 160ms, color 160ms,
                transform 130ms cubic-bezier(0.23,1,0.32,1);
  }
  .ct-actions button:active,
  .ct-actions a:active{ transform: scale(0.97) }

  /* 2 · Hex hover lift + press */
  .hex:hover { transform: translateY(-4px) }
  .hex:active{ transform: translateY(-1px) scale(0.97) }

  /* 3 · Form field focus glow */
  .ct-field{ transition: background 160ms, box-shadow 180ms }
  .ct-field label{ transition: color 160ms }
  .ct-field:focus-within{
    background: var(--paper-2);
    box-shadow: inset 0 0 0 1.5px var(--moss);
  }
  .ct-field:focus-within label{ color: var(--moss-2) }

  /* 4 · Header elevation on scroll */
  .topbar{ transition: box-shadow 300ms ease-out }
  body[data-past-hero="1"] .topbar{
    box-shadow: 0 3px 20px oklch(22% 0.015 200 / 0.13);
  }

  /* 5-6 · Scroll reveal + stagger */
  .mja-reveal{
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity  560ms cubic-bezier(0.23,1,0.32,1),
      transform 560ms cubic-bezier(0.23,1,0.32,1);
    transition-delay: var(--mja-delay, 0ms);
    will-change: opacity, transform;
  }
  .mja-reveal.mja-in{
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .mja-reveal{ opacity:1; transform:none; transition:none }
  }

  /* 7 · Success panel entrance — keyframe triggers cleanly on display:none→grid */
  @keyframes mja-success-in{
    from{ opacity:0; transform:translateY(10px) scale(0.97) }
    to  { opacity:1; transform:translateY(0)    scale(1)    }
  }
  .ct-success:not([hidden]){
    animation: mja-success-in 400ms cubic-bezier(0.23,1,0.32,1) both;
  }

  /* 8 · Coordinate value flash */
  @keyframes mja-coord-flash{
    0%  { opacity: 0.3 }
    100%{ opacity: 1 }
  }
  .mja-coord-tick{ animation: mja-coord-flash 200ms ease-out forwards }