/* ═══════════════════════════════════════════════════════════════
   OBRA · Hoja de estilo de sitio — v1.0
   Blue Room Services LLC · thinkbright
   Tokens + componentes. Nada declara un color o medida literal.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  --paper:#F4F2EE; --paper-sunk:#EAE7E1; --ink:#14181C; --ink-raised:#1D2227;
  --text:#14181C; --text-2:#4A5158; --text-3:#666D74;
  --text-inv:#F4F2EE; --text-inv-2:#A7ADB2; --text-inv-3:#828990;
  --rule:#D3CFC7; --rule-strong:#9C978D; --rule-inv:#2C3238; --rule-inv-strong:#4A5158;
  --blue:#1B4B73; --blue-live:#4590CF; --blue-wash:#E4EAF0; --clay:#9E563A;

  --display:'Instrument Serif','Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --t-mono:.6875rem; --t-micro:.75rem; --t-small:.8125rem; --t-body:1rem;
  --t-lead:clamp(1.0625rem,.95rem + .5vw,1.25rem);
  --t-d1:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  --t-d2:clamp(2.25rem,1.6rem + 3vw,4.5rem);
  --t-d3:clamp(3rem,1.6rem + 6.4vw,7.5rem);

  --lh-tight:.94; --lh-text:1.62; --ls-mono:.14em; --ls-disp:-.015em;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --s8:64px;--s9:96px;--s10:128px;--s11:180px;--s12:240px;

  --gutter:clamp(20px,4vw,64px); --col-gap:clamp(16px,2vw,32px);
  --measure:68ch;
  --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:180ms; --dur:320ms; --dur-slow:680ms;
}
.canvas-ink{
  --paper:var(--ink); --paper-sunk:var(--ink-raised);
  --text:var(--text-inv); --text-2:var(--text-inv-2); --text-3:var(--text-inv-3);
  --rule:var(--rule-inv); --rule-strong:var(--rule-inv-strong); --blue:var(--blue-live);
  background:var(--ink); color:var(--text-inv);
}

/* ── BASE ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);
     font-size:var(--t-body);line-height:var(--lh-text);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── TIPOGRAFÍA ─────────────────────────────────────────────── */
.display-1,.display-2,.display-3{font-family:var(--display);font-weight:400;
  line-height:var(--lh-tight);letter-spacing:var(--ls-disp)}
.display-1{font-size:var(--t-d1)}
.display-2{font-size:var(--t-d2)}
.display-3{font-size:var(--t-d3)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--text-2);max-width:var(--measure)}
.body{max-width:var(--measure)}
.small{font-size:var(--t-small);color:var(--text-2)}
.label{font-family:var(--mono);font-size:var(--t-mono);font-weight:500;text-transform:uppercase;
       letter-spacing:var(--ls-mono);color:var(--text-3);line-height:1}
.data{font-family:var(--mono);font-size:var(--t-small);font-variant-numeric:tabular-nums}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.wrap{padding-inline:var(--gutter)}
.section{padding-block:clamp(var(--s10),12vw,var(--s12))}
.section--tight{padding-block:var(--s9)}
.sheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s9);align-items:start}
@media (max-width:1024px){.sheet{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .sheet>.sheet-media{order:-1}
  /* Orden natural: cuando la columna izquierda es la que orienta
     (nombre de obra, encabezado de contacto) la media NO se adelanta.
     En esos casos la llamada rápida la cubre .callbar. */
  .sheet--header>.sheet-media,
  .sheet--natural>.sheet-media{order:0}}
.seclabel{display:flex;align-items:baseline;gap:var(--s4);border-top:1px solid var(--rule-strong);
          padding-top:var(--s3);margin-bottom:var(--s7)}
.seclabel .idx,.seclabel .ttl{font-family:var(--mono);font-size:var(--t-mono);
          letter-spacing:var(--ls-mono);text-transform:uppercase}
.seclabel .idx{color:var(--text-3)} .seclabel .ttl{color:var(--text)}

/* ── LOGOTIPO ───────────────────────────────────────────────── */
.wordmark{display:inline-grid;gap:5px;text-decoration:none;line-height:1}
.wordmark .w-name{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);
                  letter-spacing:.10em;text-transform:uppercase;white-space:nowrap}
.wordmark .w-sub{font-family:var(--mono);font-size:9px;letter-spacing:.34em;
                 text-transform:uppercase;color:var(--text-3)}

/* ── NAVEGACIÓN ─────────────────────────────────────────────── */
/* z-index 70: .nav crea contexto de apilamiento, así que el menú de
   pantalla completa que vive dentro debe poder cubrir la mockbar (50). */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s7);
     padding:var(--s5) var(--gutter);position:relative;z-index:70}
.nav--solid{border-bottom:1px solid var(--rule)}
.nav--over{position:absolute;inset:0 0 auto 0;background:none}
.nav ul{list-style:none;display:flex;gap:clamp(var(--s4),2.4vw,var(--s6));margin:0;padding:0;flex-wrap:wrap}
.nav a.navlink{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
       text-transform:uppercase;text-decoration:none;color:var(--text-2);
       display:inline-flex;align-items:center;gap:7px;transition:color var(--dur-fast) var(--ease)}
.nav a.navlink:hover{color:var(--text)}
.nav a.navlink[aria-current]{color:var(--blue)}
.nav a.navlink[aria-current]::before{content:"";width:4px;height:4px;background:currentColor}
/* Menú móvil: pantalla completa sobre tinta, entradas en display.
   Apilar seis elementos en la barra —como hacía la versión anterior—
   consumía 380px de cabecera antes de la portada. */
.navtoggle{display:none;background:none;border:1px solid currentColor;padding:9px var(--s4);
           font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
           text-transform:uppercase;cursor:pointer;color:inherit}
.navmenu{display:flex;align-items:center;gap:clamp(var(--s5),3vw,var(--s7));flex-wrap:wrap}
@media (max-width:820px){
  .nav{padding-block:var(--s4)}
  .navtoggle{display:inline-block}
  .navmenu{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--text-inv);
           flex-direction:column;align-items:flex-start;justify-content:center;
           gap:var(--s5);padding:var(--s9) var(--gutter);
           opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),
           visibility var(--dur) var(--ease)}
  .navmenu[data-open]{opacity:1;visibility:visible}
  .navmenu ul{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .navmenu .navlink{font-family:var(--display);font-size:var(--t-d1);text-transform:none;
                    letter-spacing:var(--ls-disp);color:var(--text-inv)}
  .navmenu .navlink[aria-current]{color:var(--blue-live)}
  .navmenu .navlink[aria-current]::before{width:6px;height:6px}
  .navmenu .nav-right{flex-direction:column;align-items:flex-start;gap:var(--s5);
                      margin-top:var(--s6);padding-top:var(--s6);
                      border-top:1px solid var(--rule-inv-strong);width:100%}
  .navmenu .nav-tel{color:var(--text-inv);font-size:var(--t-lead)}
  .navmenu .action{color:var(--text-inv);border-color:var(--text-inv)}
  .navclose{position:absolute;top:var(--s5);right:var(--gutter);background:none;border:0;
            color:var(--text-inv);font-family:var(--mono);font-size:var(--t-mono);
            letter-spacing:var(--ls-mono);text-transform:uppercase;cursor:pointer;padding:var(--s3)}
}
@media (min-width:821px){.navclose{display:none}}
/* Grupo derecho de la nav: el teléfono es dato, no botón — por eso va en mono
   y no compite con la marca. En móvil es tap-to-call. */
.nav-right{display:flex;align-items:center;gap:clamp(var(--s4),2vw,var(--s6));flex-wrap:wrap}
.nav-tel{font-family:var(--mono);font-size:var(--t-small);font-variant-numeric:tabular-nums;
         letter-spacing:.02em;text-decoration:none;color:var(--text);white-space:nowrap;
         transition:color var(--dur-fast) var(--ease)}
.nav-tel:hover{color:var(--blue)}

/* Disponibilidad — misma gramática que la etiqueta de estado de obra.
   Es un dato, no una urgencia fabricada. Debe ser cierto o se retira. */
.capacity{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
          font-size:var(--t-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;
          color:var(--text-2)}
.capacity::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);
          flex:none;animation:pulse 2.4s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){.capacity::before{animation:none}}

/* Canales directos — el cartucho de créditos convertido en lista accionable.
   Los valores van visibles: la gente copia un número, no un botón. */
.channels{display:grid;border-top:1px solid var(--rule)}
.channels a{display:grid;grid-template-columns:minmax(78px,24%) 1fr auto;gap:var(--s4);
            padding:var(--s4) 0;border-bottom:1px solid var(--rule);text-decoration:none;
            align-items:baseline;transition:padding var(--dur-fast) var(--ease),
            background var(--dur-fast) var(--ease)}
.channels a:hover,.channels a:focus-visible{background:var(--blue-wash);padding-inline:var(--s4)}
.canvas-ink .channels a:hover{background:var(--ink-raised)}
.channels .k{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
             text-transform:uppercase;color:var(--text-3)}
.channels .v{font-family:var(--mono);font-size:var(--t-small);color:var(--text)}
.channels .go{font-family:var(--mono);font-size:var(--t-mono);color:var(--text-3)}
.channels a:hover .go{color:var(--blue)}
@media (max-width:520px){.channels a{grid-template-columns:1fr auto;row-gap:3px}
  .channels .v{grid-column:1}}

/* Remate de página — una sola vez, al final, donde la intención es más alta */
.endcap{padding:var(--s10) var(--gutter)}
.endcap-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);align-items:end}
@media (max-width:860px){.endcap-inner{grid-template-columns:1fr;align-items:start;gap:var(--s6)}}
.endcap .acts{display:flex;gap:var(--s6);align-items:center;flex-wrap:wrap}

/* Bloque de contacto.
   El lienzo hundido resta contraste, así que los tokens terciarios se escalan
   al fondo — mismo mecanismo que .canvas-ink. Sobre #EAE7E1 el #666D74 global
   cae a 4.25:1 y las etiquetas del formulario son de 11px: no llega a AA. */
.contactblock{
  background:var(--paper-sunk);
  --text-3:#5F666D;        /* 4.7:1 sobre el hundido — AA */
  --rule:#C9C4BB;
  --rule-strong:#8F8A80;
}
/* En una columna, formulario y canales se leían como un solo bloque.
   Una regla de 1px y aire los separan sin introducir una tarjeta. */
@media (max-width:1024px){
  .contactblock .sheet>.sheet-media{
    margin-top:var(--s4);padding-top:var(--s7);border-top:1px solid var(--rule-strong)}
}
.note{font-family:var(--mono);font-size:var(--t-micro);line-height:1.7;color:var(--text-3);
      border-left:1px solid var(--rule-strong);padding-left:var(--s4)}

/* Barra de llamada — SOLO móvil, y solo tras recorrer el 55% de la página.
   Se gana por engagement en vez de aparecer de entrada.
   Si el cliente la rechaza: borrar este bloque y el <nav class="callbar">. */
.callbar{position:fixed;inset:auto 0 0 0;z-index:40;display:none;grid-template-columns:1fr 1fr;
         background:var(--ink);border-top:1px solid var(--rule-inv-strong);
         transform:translateY(100%);transition:transform var(--dur) var(--ease)}
.callbar.on{transform:none}
.callbar a{padding:16px var(--s4);text-align:center;text-decoration:none;color:var(--text-inv);
           font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
           text-transform:uppercase}
.callbar a+a{border-left:1px solid var(--rule-inv-strong)}
@media (max-width:720px){.callbar{display:grid} body{padding-bottom:54px}}

/* ── HERO ───────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ink)}
/* svh en vez de vh: en móvil la barra del navegador comía la portada */
.hero-img{width:100%;height:clamp(440px,86vh,880px);object-fit:cover;display:block}
@supports (height:1svh){.hero-img{height:min(86svh,880px);min-height:420px}}
@media (max-width:820px){
  .hero-img{height:74vh;min-height:400px}
  @supports (height:1svh){.hero-img{height:min(74svh,640px);min-height:400px}}
}
/* CARTELA DE PORTADA — placa sólida, no velo.
   La regla "sin degradado" sigue en pie; lo que cambia es la salida
   cuando ninguna foto admite texto encima. Con nueve fotos de obra
   tomadas con teléfono eso es lo normal, no la excepción: la de la
   cubierta metálica tiene barro claro justo donde iba el nombre.
   La solución es la misma que usa Foster para su cita — superficie
   sólida BAJO el texto — y aquí además refuerza el concepto: se lee
   como la cartela de una lámina. La fotografía queda intacta donde
   se ve; no se le pone nada encima.
   Contraste garantizado 16:1 sea cual sea la imagen. */
.hero-meta{position:absolute;left:0;bottom:0;max-width:min(760px,88%);
           background:var(--ink);display:grid;gap:var(--s4);
           padding:var(--s6) var(--s8) var(--s6) var(--gutter)}
.hero-meta .label{color:var(--text-inv-2)}
.hero-meta .display-2{color:var(--text-inv)}
.hero-meta-foot{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;
           padding-top:var(--s4);border-top:1px solid var(--rule-inv-strong)}
.hero-meta-foot .label{color:var(--text-inv-3)}
@media (max-width:820px){
  .hero-meta{max-width:none;width:100%;padding:var(--s5) var(--gutter)}
}

/* FRANJA DE PIE (.hero-meta--strip) — cuando la obra es un EJEMPLO
   y no el tema de la página.
   En la home, la cartela completa hacía de "Fallview" el elemento más
   grande y contrastado del sitio; pero la home no trata de Fallview,
   trata de Blue Room. Además tapaba justo los envigados: cubría el
   sujeto de la foto mientras el texto decía "floor system complete".
   La franja conserva la señal de credibilidad —etiqueta de estado con
   fecha reciente— ocluyendo una banda estrecha en vez de un cuarto de
   la imagen. El nombre vive en el registro, donde además es clicable.
   Toda la franja es enlace: el hero no tenía ninguna acción. */
.hero-meta--strip{
  position:absolute;left:0;right:0;bottom:0;max-width:none;
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s4) var(--gutter);background:var(--ink);
  text-decoration:none;color:var(--text-inv);
  transition:background var(--dur-fast) var(--ease)}
.hero-meta--strip:hover,.hero-meta--strip:focus-visible{background:var(--ink-raised)}
.hero-meta--strip .strip-go{
  margin-left:auto;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-inv);
  display:inline-flex;gap:var(--s3);align-items:center;white-space:nowrap}
.hero-meta--strip .strip-go .arrow{transition:transform var(--dur-fast) var(--ease)}
.hero-meta--strip:hover .strip-go{color:var(--blue-live)}
.hero-meta--strip:hover .strip-go .arrow{transform:translateX(4px)}
@media (max-width:820px){
  .hero-meta--strip{gap:var(--s2) var(--s4);padding:var(--s4) var(--gutter)}
  .hero-meta--strip .strip-go{margin-left:0;width:100%;padding-top:var(--s3);
    border-top:1px solid var(--rule-inv-strong)}
}
.hero-pause{position:absolute;left:var(--gutter);bottom:var(--s3);background:none;border:0;
            color:rgba(255,255,255,.6);font-family:var(--mono);font-size:var(--t-mono);
            letter-spacing:var(--ls-mono);cursor:pointer;padding:4px 0}
.hero-pause:hover{color:#fff}

/* ── LÁMINA ─────────────────────────────────────────────────────
   CUATRO anchos y ninguno más. Se declaran con clase, nunca con
   estilo en línea, para que el ritmo de la página sea auditable.
     .plate            ancho de contenido (col 1–12 dentro de .wrap)
     .plate--half      col 1–7, alineada a la izquierda
     .plate--half-end  col 6–12, alineada a la derecha
     .plate--bleed     sangra hasta el borde del viewport
   EN MÓVIL TODAS SANGRAN. Una lámina al 58% en una pantalla de
   390px es una estampilla; mezclar anchos ahí produce el desorden
   que se ve al hacer scroll. Regla única: bajo 760px, todo a sangre
   y solo el pie conserva el margen.                                */
.plate{margin:0}
.plate img{width:100%;height:auto}
.plate figcaption{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3);
                  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.05em;color:var(--text-3)}
.plate figcaption b{font-weight:400;color:var(--text-2)}
.plate--half{max-width:58%}
.plate--half-end{max-width:58%;margin-left:auto}
.plate--bleed{margin-inline:calc(var(--gutter) * -1)}
.plate--fixed img{aspect-ratio:var(--ar,3/2);object-fit:cover}
/* Solo las láminas que viven dentro de un contenedor con margen se
   sangran: las que ya están a ancho completo no se tocan, o se salen
   del viewport. */
@media (max-width:760px){
  .wrap .plate{max-width:none;margin-inline:calc(var(--gutter) * -1)}
  .wrap .plate figcaption{padding-inline:var(--gutter)}
}
.reveal{clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-slow) var(--ease)}
.reveal.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.reveal{clip-path:none}}

/* ── ENLACES Y ACCIONES ─────────────────────────────────────── */
.lnk{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
     background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
     transition:background-size var(--dur-fast) var(--ease);padding-bottom:2px}
.lnk:hover,.lnk:focus-visible{background-size:100% 1px}
@media (prefers-reduced-motion:reduce){.lnk{background-size:100% 1px}}
.action{display:inline-flex;align-items:center;gap:var(--s3);border:1px solid var(--text);
        padding:13px var(--s5);font-family:var(--mono);font-size:var(--t-mono);
        letter-spacing:var(--ls-mono);text-transform:uppercase;text-decoration:none;
        background:none;cursor:pointer;color:var(--text);
        transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.action:hover{background:var(--text);color:var(--paper)}
.action .arrow{transition:transform var(--dur-fast) var(--ease)}
.action:hover .arrow{transform:translateX(4px)}
/* Máximo énfasis permitido: relleno de tinta, sin radio, sin color de marca.
   Una sola por pantalla. El hover la vacía en lugar de oscurecerla. */
.action--solid{background:var(--text);color:var(--paper);border-color:var(--text)}
.action--solid:hover{background:none;color:var(--text)}
.action--sm{padding:9px var(--s4)}
.backlink{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
          text-transform:uppercase;color:var(--text-3);text-decoration:none;
          display:inline-flex;gap:var(--s3)}
.backlink:hover{color:var(--text)}

/* ── ETIQUETA DE ESTADO ─────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--t-mono);
     letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.tag::before{content:"";width:5px;height:5px;border:1px solid currentColor;flex:none}
.tag.live{color:var(--blue)}
.tag.live::before{background:currentColor;border-radius:50%;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.tag.live::before{animation:none}}

/* ── CARTUCHO DE CRÉDITOS ───────────────────────────────────── */
.titleblock{display:grid;border-top:1px solid var(--rule)}
.titleblock>div{display:grid;grid-template-columns:minmax(96px,30%) 1fr;gap:var(--s4);
                padding:11px 0;border-bottom:1px solid var(--rule)}
.titleblock dt{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
               text-transform:uppercase;color:var(--text-3);padding-top:2px}
.titleblock dd{font-size:var(--t-small);color:var(--text)}

/* ── REGISTRO ───────────────────────────────────────────────── */
.register{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
          gap:var(--s8);align-items:start}
@media (max-width:1024px){.register{grid-template-columns:minmax(0,1fr)}
  .register-preview{display:none}}
.register-list{border-top:1px solid var(--rule)}
.reg-year{display:flex;align-items:baseline;gap:var(--s4);padding:var(--s7) 0 var(--s3);
          border-bottom:1px solid var(--rule-strong)}
.reg-year:first-child{padding-top:0}
.reg-year .y{font-family:var(--display);font-size:26px;line-height:1}
.reg-year .c{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);color:var(--text-3)}
.reg-row{display:grid;grid-template-columns:46px minmax(0,1.4fr) minmax(0,1.1fr) 74px 124px;
         gap:var(--s4);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule);
         text-decoration:none;color:inherit;
         transition:background var(--dur-fast) var(--ease),padding var(--dur-fast) var(--ease)}
.reg-row:hover,.reg-row:focus-visible{background:var(--blue-wash);padding-inline:var(--s4)}
.canvas-ink .reg-row:hover,.canvas-ink .reg-row:focus-visible{background:var(--ink-raised)}
.reg-row .num,.reg-row .loc,.reg-row .yr{font-family:var(--mono);font-size:var(--t-small);
         font-variant-numeric:tabular-nums;color:var(--text-3)}
.reg-row .nm{font-family:var(--display);font-size:clamp(20px,2.2vw,25px);line-height:1.05;
             letter-spacing:-.01em}
.reg-row:hover .nm{color:var(--blue)}
@media (max-width:760px){
  .reg-row{grid-template-columns:42px minmax(0,1fr);row-gap:5px}
  .reg-row .loc,.reg-row .yr,.reg-row .st{grid-column:2}
}
.register-preview{position:sticky;top:var(--s6)}
.register-preview .frame{position:relative;aspect-ratio:4/5;background:var(--paper-sunk)}
.register-preview .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                             opacity:0;transition:opacity var(--dur) var(--ease)}
.register-preview .frame img.on{opacity:1}
.register-preview .cap{margin-top:var(--s3);font-family:var(--mono);font-size:var(--t-micro);
                       letter-spacing:.05em;color:var(--text-3);min-height:2.8em;line-height:1.6}

/* ── HOJA DE CONTACTO ───────────────────────────────────────── */
.contactsheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
              gap:1px;background:var(--rule)}
.canvas-ink .contactsheet{background:var(--rule-inv)}
.cs-cell{position:relative;display:block;text-decoration:none;color:inherit}
.cs-cell img{aspect-ratio:4/3;object-fit:cover;width:100%}
.cs-cell .meta{position:absolute;inset:auto 0 0 0;padding:9px 11px;
               background:linear-gradient(transparent,rgba(0,0,0,.8));
               font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
               color:#fff;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.cs-cell:hover .meta,.cs-cell:focus-visible .meta{opacity:1}
/* variante justificada — archivo de proyecto */
.contactsheet--justified{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule)}
.contactsheet--justified .cs-cell{height:132px;flex:1 1 auto}
.contactsheet--justified .cs-cell img{height:100%;width:auto;aspect-ratio:auto;min-width:100%}
@media (max-width:640px){.contactsheet--justified .cs-cell{height:88px}}

/* ── CONMUTADOR DE VISTA ────────────────────────────────────── */
.viewswitch{display:inline-flex;border:1px solid var(--rule-strong)}
.viewswitch button{background:none;border:0;padding:10px var(--s5);cursor:pointer;color:var(--text-3);
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.viewswitch button+button{border-left:1px solid var(--rule-strong)}
.viewswitch button[aria-pressed="true"]{background:var(--text);color:var(--paper)}

/* ── CITA ───────────────────────────────────────────────────── */
.pull{max-width:38ch}
.pull p{font-family:var(--display);font-size:var(--t-d1);line-height:1.14;letter-spacing:var(--ls-disp)}
.pull footer{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--text-3);line-height:1.9}
.pull--panel{background:var(--ink-raised);padding:var(--s6);max-width:46ch}
.pull--panel footer{border-top-color:var(--rule-inv-strong)}

/* ── FORMULARIO ─────────────────────────────────────────────── */
.field{display:grid;gap:7px;margin-bottom:var(--s6)}
.field label{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
             text-transform:uppercase;color:var(--text-3)}
.field input,.field textarea,.field select{
  font:inherit;font-size:var(--t-body);color:var(--text);background:none;border:0;
  border-bottom:1px solid var(--rule-strong);padding:9px 0;border-radius:0;width:100%;
  transition:border-color var(--dur-fast) var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--blue);border-bottom-width:2px;padding-bottom:8px}
.field textarea{resize:vertical;min-height:84px}

/* ── DETALLE PLEGABLE ───────────────────────────────────────── */
details.more{margin-top:var(--s4)}
details.more summary{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--blue);cursor:pointer;list-style:none;padding:var(--s2) 0}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+ ";}
details.more[open] summary::before{content:"− ";}
details.more p{margin-top:var(--s3)}

/* ── NAVEGACIÓN ENTRE OBRAS ─────────────────────────────────── */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
          border-block:1px solid var(--rule)}
@media (max-width:640px){.prevnext{grid-template-columns:1fr}}
.prevnext a{background:var(--paper);padding:var(--s6) var(--gutter);text-decoration:none;
            display:grid;gap:var(--s3);transition:background var(--dur-fast) var(--ease)}
.prevnext a:hover{background:var(--paper-sunk)}
.prevnext a:last-child{text-align:right}
.prevnext .nm{font-family:var(--display);font-size:clamp(22px,3vw,32px);line-height:1}

/* ── PIE ────────────────────────────────────────────────────── */
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
      gap:var(--s7);padding:var(--s9) var(--gutter) var(--s6)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media (max-width:480px){.foot{grid-template-columns:1fr}}
.foot h5{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);
         text-transform:uppercase;color:var(--text-3);font-weight:500;margin:0 0 var(--s4)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:var(--t-small)}
/* :not(.action) — si no, el color genérico de enlace del pie pisa el del
   componente y el hover de la acción queda claro sobre claro. */
.foot a:not(.action){text-decoration:none;color:var(--text-2)}
.foot a:not(.action):hover{color:var(--text)}
.foot-base{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s5) var(--gutter);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.08em;color:var(--text-3)}

/* ── BANNER DE MAQUETA (se elimina en producción) ─────────────
   Una sola línea, ocultable. Antes ocupaba tres renglones en móvil
   y empujaba la portada fuera de pantalla. */
.mockbar{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s4);align-items:center;background:var(--clay);color:#fff;padding:8px var(--gutter);
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase}
.mockbar-links{display:flex;gap:var(--s5);align-items:center;min-width:0;
  white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.mockbar-links::-webkit-scrollbar{display:none}
.mockbar a{color:#fff;text-decoration:none;opacity:.72}
.mockbar a:hover,.mockbar a[aria-current]{opacity:1;text-decoration:underline}
.mockbar .sep{opacity:.45}
.mockbar .hint{opacity:.7;text-transform:none;letter-spacing:.04em}
.mockbar-x{background:none;border:0;color:#fff;cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.08em;padding:2px 0}
.mockshow{display:none;position:fixed;top:0;right:0;z-index:50;background:var(--clay);color:#fff;
  border:0;cursor:pointer;padding:6px 12px;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.08em;text-transform:uppercase}
.mock-hidden .mockbar{display:none}
.mock-hidden .mockshow{display:block}
@media (max-width:720px){.mockbar .hint{display:none}}
@media print{.mockbar,.mockshow{display:none}}