/* ===========================================================================
   PROYECTOS · la galeria de trabajo terminado (14/09/2026)

   Va aparte de styles.css a proposito: esta pagina se carga sola, sin galaxia ni
   canvas, y asi la hoja de la portada no cambia (hay DOS versiones de la portada,
   la de la galaxia en vivo y la del video sin aprobar, y las dos comparten esta).

   El gesto: cada proyecto es una OBRA. Lamina con doble filete dorado (el mismo
   marco que "Sobre mi") y al lado una CARTELA de museo: sector, tipo, ano, estado.
   El cliente nunca se nombra: se dice su sector. La discrecion es parte del lujo.
   Solo se anima transform y opacity (reglas de rendimiento de la casa).
   =========================================================================== */

/* Los rotulos pequenos van en --fg-soft y no en --fg-dim: el gris mas apagado da
   2,96:1 sobre el negro (qa_web.py, 14/09) y el minimo para texto es 4,5. */

/* --- Cabecera de la pagina ------------------------------------------------- */
.pg-head{ position:relative; padding:clamp(9rem,20vh,12rem) 0 clamp(4rem,9vh,6rem); }
.pg-head__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2.5rem,6vw,6rem); align-items:end; }
/* 6x el cuerpo en escritorio (acabado.md, fila 3): a 5.6rem se quedaba en 5,6x */
.pg-head h1{ font-size:clamp(3.1rem, 1.6rem + 5.6vw, 6rem); line-height:1; max-width:13ch; margin:0 0 1.6rem; }
.pg-head__lead{ color:var(--fg-soft); font-size:var(--step-0); max-width:50ch; margin:0; }

/* El indice de la exposicion: lo primero que se lee en una galeria de verdad */
.expo{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); counter-reset:obra; }
.expo li{ border-bottom:1px solid var(--line); }
.expo a{
  display:grid; grid-template-columns:2.2rem 1fr auto; align-items:baseline; gap:.8rem;
  padding:.95rem 0; min-height:44px; text-decoration:none; color:var(--fg);
  transition:color .3s;
}
.expo__num{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:1.05rem; }
.expo__nombre{ font-family:var(--font-display); font-size:1.2rem; line-height:1.2; }
.expo__tipo{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-soft); white-space:nowrap; }
.expo a:hover .expo__nombre{ color:var(--gold-soft); }

/* --- Una obra -------------------------------------------------------------- */
.obra{ position:relative; padding:clamp(4.5rem,11vh,8rem) 0; }
.obra + .obra::before{
  content:''; position:absolute; top:0; left:50%; translate:-50% 0;
  width:min(100% - 2.5rem, var(--wrap)); height:1px; background:var(--line);
}
.obra__rotulo{ display:flex; align-items:baseline; gap:1rem; margin:0 0 1.4rem; }
.obra__num{ font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--gold); line-height:1; }
.obra__tipo{ font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--fg-soft); }
.obra h2{ font-size:clamp(2.3rem, 1.5rem + 3vw, 4rem); line-height:1.02; margin:0 0 1.4rem; max-width:10ch; }

/* Cabeza de la obra: el titulo y la frase de entrada a la izquierda, la lamina a la derecha.
   Antes la captura iba a todo el ancho y era un bloque blanco del 66 % de la pantalla (88 %
   de sus pixeles casi blancos) que se comia el negro de la marca. Al lado del titulo pesa
   la mitad y se lee como obra colgada, no como pantallazo. */
.obra__cabeza{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(2rem,5vw,4.5rem); align-items:end; }
.obra__intro{ padding-bottom:3.4rem; }

/* La lamina: la imagen dentro de un marco dorado con un segundo filete por fuera */
.lamina{ position:relative; margin:0; }
.lamina__marco{
  position:relative; border:1px solid var(--gold-dim); padding:clamp(6px,.8vw,10px);
  background:var(--bg-2);
}
.lamina__marco::after{ content:''; position:absolute; inset:clamp(-14px,-1.1vw,-8px); border:1px solid var(--line); pointer-events:none; }
.lamina img{ width:100%; height:auto; background:var(--surface); }
.lamina figcaption{
  margin-top:1.3rem; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-soft);
  display:flex; gap:.7rem; align-items:center;
}
.lamina figcaption::before{ content:''; width:18px; height:1px; background:var(--gold-dim); flex:none; }

/* Ventana de aplicacion de escritorio: una barra de titulo fina, sin semaforos de Mac
   (la app es de Windows y los tres puntos de colores son el cliche de las plantillas) */
.ventana{ border:1px solid rgba(236,233,228,.14); background:#0e0f13; overflow:hidden; }
.ventana__barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:30px; padding:0 .2rem 0 .8rem; background:#15161b; border-bottom:1px solid rgba(236,233,228,.08);
  font-size:.66rem; color:var(--fg-soft); letter-spacing:.02em;
}
.ventana__titulo{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ventana__ctrl{ display:flex; flex:none; }
.ventana__ctrl i{ width:34px; height:30px; display:grid; place-items:center; }
.ventana__ctrl i::before{ content:''; width:9px; height:9px; }
.ventana__ctrl i:nth-child(1)::before{ height:1px; background:var(--fg-dim); }
.ventana__ctrl i:nth-child(2)::before{ border:1px solid var(--fg-dim); }
.ventana__ctrl i:nth-child(3)::before{
  background:linear-gradient(45deg,transparent 46%,var(--fg-dim) 46%,var(--fg-dim) 54%,transparent 54%),
             linear-gradient(-45deg,transparent 46%,var(--fg-dim) 46%,var(--fg-dim) 54%,transparent 54%);
}
.ventana img{ display:block; width:100%; }

/* Cuerpo de la obra: el texto a un lado, la cartela al otro */
.obra__cuerpo{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2.5rem,6vw,6rem); margin-top:clamp(3rem,7vh,4.5rem); }
.obra__texto p{ color:var(--fg-soft); font-size:var(--step-0); max-width:58ch; }
.obra__texto p strong{ color:var(--fg); font-weight:500; }
/* .obra__texto .obra__entrada y no .obra__entrada a secas: con una sola clase perdia
   contra .obra__texto p y salia al tamano del texto normal (capturas del 14/09). */
.obra .obra__entrada{ font-family:var(--font-display); font-size:clamp(1.45rem,1.15rem + 1vw,1.95rem); line-height:1.3; color:var(--fg); max-width:26ch; margin:0; }

.cartela{ margin:0; border-top:1px solid var(--gold-dim); align-self:start; }
.cartela div{ display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.cartela dt{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-soft); padding-top:.3rem; }
.cartela dd{ margin:0; font-family:var(--font-display); font-size:1.1rem; line-height:1.3; color:var(--fg); }
.cartela dd small{ display:block; font-family:var(--font-ui); font-size:.8rem; color:var(--fg-soft); margin-top:.15rem; }

/* Cifras de la obra: el mismo numero en italica dorada que la franja de la portada */
.obra__cifras{
  list-style:none; margin:clamp(3rem,7vh,4.5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.obra__cifras li{ padding:1.6rem 1.4rem 1.7rem; border-left:1px solid var(--line); }
.obra__cifras li:first-child{ border-left:0; padding-left:0; }
.obra__cifras b{ display:block; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem); line-height:1; color:var(--gold); margin-bottom:.7rem; font-variant-numeric:tabular-nums; }
.obra__cifras span{ display:block; font-size:.86rem; color:var(--fg-soft); line-height:1.5; max-width:24ch; }

/* Vistas secundarias: tres laminas pequenas en fila */
.obra__vistas{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.6rem); margin-top:clamp(3.5rem,8vh,5rem); align-items:start; }
/* Colgadas como en una sala: la del centro baja un poco. Tres a la misma altura se leian
   como rejilla de plantilla (acabado.md, fila 6: dos proporciones CON desfase). */
.obra__vistas .lamina:nth-child(2){ margin-top:clamp(2.5rem,6vw,5rem); }

/* Obra "par": imagen a un lado y texto al otro, alternando */
.obra--par .obra__par{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.obra--par.obra--espejo .obra__par > .lamina{ order:2; }
.obra--par h2{ font-size:clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
.obra--par .cartela{ margin-top:2rem; }

/* Subtitulos dentro de una obra: la etiqueta pequena de la casa, en oro */
.obra__subtitulo{
  font-family:var(--font-ui); font-size:.64rem; font-weight:400; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1.6rem;
}

/* "Te suena alguna?": la lista editorial de "El sistema" de la portada, a todo lo ancho */
.obra__situaciones{ margin-top:clamp(4rem,9vh,6rem); }
.obra__situaciones .sistema{ max-width:none; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4.5rem); border-top:0; }
.obra__situaciones .sistema__item{ border-top:1px solid var(--line); border-bottom:0; }
.obra__situaciones .sistema__item h3{ font-size:1.3rem; }
.obra__situaciones .sistema__item p{ font-size:.95rem; }

/* Lo que hace: dos columnas de filetes, el nombre en serif y lo que ahorra debajo */
.capacidades{ margin-top:clamp(4rem,9vh,6rem); }
.capacidades__lista{ margin:0; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4.5rem); }
.capacidades__lista div{ padding:1.5rem 0 1.6rem; border-top:1px solid var(--line); }
.capacidades__lista dt{ font-family:var(--font-display); font-size:1.35rem; line-height:1.2; color:var(--fg); margin-bottom:.5rem; }
.capacidades__lista dd{ margin:0; color:var(--fg-soft); font-size:.95rem; max-width:48ch; }

/* Garantias: privacidad e instalacion, dos columnas con un filete dorado arriba */
.obra__garantias{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(4rem,9vh,6rem); }
.obra__garantias > div{ border-top:1px solid var(--gold-dim); padding-top:1.6rem; }
.obra__garantias p{ color:var(--fg-soft); font-size:var(--step-0); max-width:54ch; }
.obra__garantias p strong{ color:var(--fg); font-weight:500; }
.obra__para-quien{ margin-top:1.4rem; font-family:var(--font-display); font-size:1.2rem !important; line-height:1.4; color:var(--fg) !important; }
.obra__para-quien span{ display:block; font-family:var(--font-ui); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }

/* Cierre */
.pg-cierre{ padding:clamp(3.5rem,8vh,6rem) 0 clamp(6rem,14vh,10rem); position:relative; }
.pg-cierre::before{ content:''; position:absolute; top:0; left:50%; translate:-50% 0; width:min(100% - 2.5rem, var(--wrap)); height:1px; background:var(--line); }

/* Menu: el enlace de la pagina en la que estas */
.nav a[aria-current="page"]{ color:var(--fg); border-bottom-color:var(--gold); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width:1000px){
  /* minmax(0,1fr) y no 1fr: 1fr no encoge por debajo de su contenido y a 320 px la columna
     se quedaba en 306 px dentro de un hueco de 280 (qa-web, 15/09) */
  .pg-head__grid{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .obra__cuerpo{ grid-template-columns:minmax(0,1fr); }
  .obra__cabeza{ grid-template-columns:minmax(0,1fr); }
  .obra__situaciones .sistema, .capacidades__lista, .obra__garantias{ grid-template-columns:minmax(0,1fr); }
  .obra__intro{ padding-bottom:0; }
  .obra--par .obra__par{ grid-template-columns:minmax(0,1fr); }
  .obra--par.obra--espejo .obra__par > .lamina{ order:0; }
  .obra__cifras{ grid-template-columns:1fr 1fr; }
  .obra__cifras li:nth-child(3){ border-left:0; padding-left:0; }
  .obra__cifras li:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:640px){
  /* En movil las tres vistas apiladas eran 1.400 px de capturas seguidas (1,66 pantallas).
     Van en una tira que se desliza de lado, con la siguiente asomando. El desborde es de
     la tira, no de la pagina. El padding de arriba deja sitio al filete exterior. */
  .obra__vistas{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:76%;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:-1.25rem; padding:14px 1.25rem 1rem; scroll-padding-inline:1.25rem;
    scrollbar-width:none;
  }
  .obra__vistas::-webkit-scrollbar{ display:none; }
  .obra__vistas .lamina{ scroll-snap-align:start; }
  .obra__vistas .lamina:nth-child(2){ margin-top:0; }
  .obra__cifras li{ padding:1.3rem .9rem 1.4rem; }
  .obra__cifras li:nth-child(odd){ padding-left:0; }
  .cartela div{ grid-template-columns:6rem 1fr; }
  .expo__tipo{ display:none; }
  .expo a{ grid-template-columns:2rem 1fr; }
  .ventana__barra{ height:24px; font-size:.58rem; }
  .ventana__ctrl i{ width:26px; height:24px; }
}