/* ============================================================
   Nimbra · configurador de lámparas

   Adaptado del CSS de Veta. Se conservo toda la maqueta; lo que
   cambio es la PALETA: alla el fondo era claro porque los renders
   tenian fondo claro horneado. Aca las fotos son sobre negro, asi
   que la pagina es oscura y la pieza es lo unico que ilumina.

   El color de la marca vive en --acento.
   ============================================================ */

/* ------------------------------------------------------------
   PALETA UNICA  ·  nocturna

   REGLA QUE MANDA (la misma de Veta, al reves): las fotos traen
   el fondo horneado en un azul casi negro. El fondo de la pagina
   TIENE que separarse de ese valor o la pieza se disuelve en la
   pagina. Por eso --paper es mas neutro y mas oscuro que la foto.
   ------------------------------------------------------------ */
:root{
  --paper:#0A0C11; --paper-2:#141926; --ink:#EDF0F5; --ink-soft:#8B95A8;
  --line:#232B3A; --field:#161C29;
  --acento:#E8B563; --acento-ink:#12151C;
  --marco:#141926; --marco-linea:#232B3A;
  --focus:var(--acento);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
img{display:block; max-width:100%}
b{font-weight:500}

h1,h2,.marca,.nom,.precio{
  font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  font-weight:600; letter-spacing:-.015em; text-wrap:balance;
}
/* títulos de sección del catálogo */
#destacados h2,#catalogo h2{font-size:22px; margin:44px 0 20px}
#destacados h2{margin-top:30px}
#destacados:not([hidden]) + #catalogo h2:first-child{margin-top:44px}
#catalogo h2:first-child{margin-top:30px}
/* nombre del producto en la ficha */
#f-nombre{font-size:34px; margin:0; line-height:1.05}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.eyebrow,.lab,.spec,.med,.claim,.fino,.volver,.nota{
  font-family:"Spline Sans Mono","SFMono-Regular",ui-monospace,monospace;
}

/* ---- banda de portada (video de ambientación) ----
   Va full-bleed arriba del header. La altura se recorta con
   object-fit:cover en vez de dejar el 16:9 entero, que en desktop
   se comería media pantalla antes de mostrar una sola lámpara.
   Editable: el clamp de abajo es alto mínimo / ideal / máximo. */
.portada{
  margin:0; position:relative;
  background:var(--paper-2); border-bottom:1px solid var(--line);
}
/* El alto va en proporción al ancho, NO en píxeles fijos.
   Con un tope en px (400) pasaba esto: el video escala con el ancho de
   la pantalla, así que en un monitor grande el recuadro se quedaba
   chico y recortaba cada vez más — a 1512 px se veía menos de la mitad
   del cuadro y los colgantes quedaban cortados.
   Con 36vw el recorte es siempre el mismo (~63% del cuadro) en
   cualquier monitor; 62vh es el freno para que en una pantalla baja
   la portada no se coma todo antes del catálogo.
   El 58% vertical elige QUÉ se recorta: deja los cables arriba y llega
   hasta la encimera abajo. */
.portada-media{
  width:100%; height:clamp(220px,36vw,62vh);
  object-fit:cover; object-position:50% 58%;
}
.portada-fija{display:none}          /* solo aparece con movimiento reducido */
.portada-nota{
  position:absolute; left:0; right:0; bottom:0; padding:30px 0 9px;
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.03em; color:#FFFFFF;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  /* velo oscuro apenas perceptible: la encimera encendida es clara y
     sin esto el texto blanco se pierde justo ahí */
  background:linear-gradient(to top,rgba(0,0,0,.6) 35%,rgba(0,0,0,0));
  pointer-events:none;
}
.portada-nota .wrap{display:block}   /* para que alinee con el logo */
/* Quien pide "reducir movimiento" ve la imagen fija y el video ni se
   reproduce. El .jpg es el mismo archivo del poster, así que no pesa. */
@media (prefers-reduced-motion:reduce){
  .portada-video{display:none}
  .portada-fija{display:block}
}
@media (max-width:560px){
  .portada-media{height:clamp(160px,46vw,240px)}
}

/* ---- header ---- */
.top{
  position:sticky; top:0; z-index:5; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px 12px}
.marca{
  font-size:21px; text-decoration:none; letter-spacing:0;
  display:inline-flex; align-items:center; color:var(--ink);
}
.marca-svg{height:24px; width:auto; display:block}
.marca:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:2px}
.claim{
  margin:0; padding-bottom:14px; color:var(--ink-soft);
  font-size:12px; line-height:1.5; max-width:62ch;
}
.luz{display:flex; border:1px solid var(--line); border-radius:2px; overflow:hidden}
.luz button{
  border:0; background:transparent; padding:8px 15px; cursor:pointer;
  font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.luz button.on{background:var(--acento); color:var(--acento-ink)}

/* ---- las 4 líneas ---- */
.lineas{
  display:grid; gap:14px; margin:0 0 12px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.linea{
  display:grid; gap:5px; text-align:left; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  padding:16px 16px 15px; font:inherit; color:inherit;
  transition:border-color .15s ease;
}
.linea:hover{border-color:var(--acento)}
.linea:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.linea-sw{display:flex; gap:6px; margin-bottom:4px}
.linea-sw .pip{
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(0,0,0,.14);
}
.linea-nom{
  font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  font-weight:600; font-size:16px; letter-spacing:-.015em;
}
.linea-par{
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft);
}
.linea-txt{color:var(--ink-soft); font-size:12.5px; line-height:1.45}

/* ---- catálogo ---- */
.grilla{
  display:grid; gap:32px 24px; margin:0 0 64px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}
.card{cursor:pointer; background:none; border:0; padding:0; text-align:left;
  font:inherit; color:inherit; width:100%}
.card .mat{
  background:var(--marco); border:1px solid var(--marco-linea); border-radius:3px;
  aspect-ratio:1/1; overflow:hidden; transition:border-color .15s ease;
}
.card .mat img{width:100%; height:100%; object-fit:cover; transition:opacity .18s ease}
.card:hover .mat{border-color:var(--acento)}
.card:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.card .nom{font-size:19px; margin:13px 0 3px}
.card .d{color:var(--ink-soft); font-size:13.5px; margin:0 0 11px; min-height:2.7em}
.card .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  border-top:1px solid var(--line); padding-top:9px;
  font-size:11px; letter-spacing:.03em;
}
.card .med{color:var(--ink-soft); text-transform:uppercase}
.card .pr{color:var(--ink); font-variant-numeric:tabular-nums}

/* ---- ficha / configurador ---- */
.volver{
  border:0; background:none; cursor:pointer; color:var(--ink-soft);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:26px 0 4px;
}
.volver:hover{color:var(--ink)}
.ficha-in{
  display:grid; grid-template-columns:1.15fr .85fr; gap:44px;
  align-items:start; padding-bottom:72px;
}
.col-img{display:flex; flex-direction:column; gap:16px; align-self:start}
.visor{margin:0}
.visor img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:3px;
  background:var(--marco); border:1px solid var(--marco-linea);
  transition:opacity .18s ease;
}
.foto-real{margin:0}
.foto-real img{
  width:100%; height:auto; border-radius:3px; border:1px solid var(--marco-linea);
  background:var(--marco); display:block;
}
.foto-real figcaption{
  margin-top:8px; color:var(--ink-soft); font-size:11px; line-height:1.45;
  font-family:"Spline Sans Mono",ui-monospace,monospace; letter-spacing:.01em;
}
.panel{padding-top:4px}
.eyebrow{
  margin:0 0 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.desc{color:var(--ink-soft); margin:12px 0 4px; max-width:42ch}
.spec{
  color:var(--ink-soft); font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 30px;
}
.grupo{margin-bottom:26px}
.lab{
  margin:0 0 12px; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft);
}
.lab .val{color:var(--ink)}
.swatches{display:flex; gap:12px; flex-wrap:wrap}
.sw{
  width:36px; height:36px; border-radius:50%; cursor:pointer; padding:0;
  border:1px solid rgba(0,0,0,.14); box-shadow:inset 0 0 0 3px var(--paper-2);
}
.sw.sel{outline:2px solid var(--acento); outline-offset:3px}
.sw:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.sw.pronto{opacity:.55}
.sw.pronto.sel{opacity:1}

.desc-color{
  margin:12px 0 0; color:var(--ink-soft); font-size:12.5px; line-height:1.45;
  max-width:40ch;
}
.lab .val i{font-style:normal; color:var(--ink-soft); font-size:.85em}

/* ---- sistemas de luz ---- */
.opts{display:grid; gap:8px}
.opt{
  display:grid; gap:3px; text-align:left; cursor:pointer; width:100%;
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  padding:11px 13px; font:inherit; color:inherit;
  transition:border-color .15s ease;
}
.opt:hover{border-color:var(--ink-soft)}
.opt.sel{border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento)}
.opt:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.op-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.op-nom{font-size:13.5px; font-weight:500}
.op-costo{
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.02em; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.opt.sel .op-costo{color:var(--ink)}
.op-desc{color:var(--ink-soft); font-size:12px; line-height:1.4}

.aviso{
  margin:4px 0 26px; padding:11px 13px; border:1px solid var(--line);
  border-radius:3px; background:var(--paper-2);
  color:var(--ink-soft); font-size:11.5px; line-height:1.5;
  font-family:"Spline Sans Mono",ui-monospace,monospace; letter-spacing:.01em;
}

/* ---- modo de compra (completa / solo pantalla) ---- */
.modos{display:flex; gap:0; border:1px solid var(--line); border-radius:2px; overflow:hidden}
.modos button{
  flex:1; border:0; background:transparent; padding:9px 12px; cursor:pointer;
  font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
}
.modos button + button{border-left:1px solid var(--line)}
.modos button.on{background:var(--acento); color:var(--acento-ink)}
.compat{
  margin:-6px 0 22px; padding:10px 12px; border-left:2px solid var(--line);
  color:var(--ink-soft); font-size:12px; line-height:1.5; max-width:44ch;
}
.cross{
  margin:14px 0 0; padding:11px 13px; border:1px dashed var(--line);
  border-radius:3px; color:var(--ink); font-size:12.5px; line-height:1.5;
}
.hermano{margin:12px 0 0}
.hermano a{
  color:var(--acento); font-size:12.5px; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:1px;
}
.hermano a:hover{border-color:var(--ink)}

/* ---- bloque "cambia la pantalla" en portada ---- */
#recambio-intro{margin:40px 0 8px; padding:22px 0 4px; border-top:1px solid var(--line)}
#recambio-intro h2{margin:0 0 8px; font-size:22px}
#recambio-intro p{margin:0; color:var(--ink-soft); font-size:13.5px; max-width:60ch}
.cierre{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; border-top:1px solid var(--line); padding-top:22px; margin-top:32px;
}
.precio-box{display:grid; gap:3px}
.precio{font-size:27px; font-variant-numeric:tabular-nums}
.precio-det{
  margin:0; color:var(--ink-soft); font-size:11px; line-height:1.4;
  font-family:"Spline Sans Mono",ui-monospace,monospace; letter-spacing:.01em;
  max-width:34ch;
}
.pedir{
  background:var(--acento); color:var(--acento-ink); text-decoration:none;
  padding:13px 24px; border-radius:2px; font-weight:500; font-size:14px;
}
.pedir:hover{opacity:.88}
.pedir:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.pedir.off{
  background:var(--field); color:var(--ink-soft); cursor:default;
  pointer-events:none; font-size:12px; letter-spacing:.02em;
}
.nota{color:var(--ink-soft); font-size:11px; letter-spacing:.02em; margin:14px 0 0}

/* ---- pie ---- */
.pie{border-top:1px solid var(--line); padding:24px 0 56px}
.pie p{margin:0; color:var(--ink-soft); font-size:12px}
.pie .fino{opacity:.7; margin-top:3px; font-size:11px}

@media (max-width:780px){
  .ficha-in{grid-template-columns:1fr; gap:24px}
  #f-nombre{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ---- packs de la portada ---- */
#packs{margin:0 0 44px}
#packs h2{margin:0 0 6px}
.packs-intro{
  color:var(--ink-soft); font-size:13.5px; line-height:1.55;
  max-width:56ch; margin:0 0 18px;
}
.packs-grilla{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.pack{
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  padding:16px 17px 18px;
}
.pack h3{margin:0; font-size:15px}
.pack-p{
  margin:7px 0 0;
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:20px; color:var(--acento); font-variant-numeric:tabular-nums;
}
.pack-d{margin:8px 0 0; color:var(--ink-soft); font-size:12.5px; line-height:1.5}

/* ---- cuántas pantallas (colgantes) ---- */
.opt-n{font-size:13.5px; font-weight:500}
.opt-p{
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:12.5px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.opt-p em{font-style:normal; color:var(--acento); font-size:11.5px}
.opt-d{color:var(--ink-soft); font-size:12px; line-height:1.4}

/* ---- aviso del pack elegido ---- */
.pack-nota{
  margin:-6px 0 20px; padding:10px 12px;
  border-left:2px solid var(--acento);
  color:var(--ink); font-size:12.5px; line-height:1.5; max-width:46ch;
}

/* ---- altura: velador / mesa alta ---- */
#grupo-alto .opt-nota{color:var(--ink-soft); font-size:12px}

/* ---- ambientación (imagen generada, va primero) ---- */
.ambiente{margin:0 0 18px}
.ambiente img{
  width:100%; display:block; border-radius:3px;
  background:var(--field); aspect-ratio:1; object-fit:cover;
}
.ambiente figcaption{
  margin-top:8px; color:var(--ink-soft); font-size:11.5px; line-height:1.5;
  max-width:52ch;
}
.visor-cap{
  color:var(--ink-soft); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:7px;
}

/* ---- atribución del diseño (obligatoria por licencia) ---- */
.credito{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:12px; line-height:1.5;
}
.credito a{color:var(--ink-soft); text-decoration:underline}
.credito a:hover{color:var(--acento)}

/* ---- colores de base que van a pedido ---- */
.base-otros{
  margin:6px 0 0; color:var(--ink-soft); font-size:11.5px; line-height:1.5;
  font-style:italic;
}

/* ============================================================
   REDISEÑO CINEMATOGRÁFICO · agregado sep-2026

   Va todo AL FINAL a propósito: así pisa lo de arriba sin tocar
   una sola línea de lo anterior. Si algo no gusta, se borra este
   bloque completo y la página vuelve exactamente a como estaba.

   Tres ideas:
   1. La portada ocupa la pantalla y el texto va ENCIMA del video.
   2. El header queda flaco: solo la marca y el día/noche.
   3. La ficha respira más y el precio pesa lo que tiene que pesar.
   ============================================================ */

/* ---- 1 · la portada es la pantalla ---- */
.portada{border-bottom:0; background:#0F0E0A}

/* El alto sube de 36vw a 78vh. Sigue siendo proporcional, no un
   número fijo: en un monitor grande se ve el mismo encuadre. */
.portada-media{
  height:clamp(460px,78vh,860px);
  object-position:50% 54%;
}

/* Velo oscuro. Sin esto el texto blanco desaparece justo sobre la
   encimera encendida, que es la parte más clara del cuadro. */
.portada::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg,
    rgba(10,9,6,.80) 0%, rgba(10,9,6,.16) 30%,
    rgba(10,9,6,.52) 68%, rgba(10,9,6,.95) 100%);
}

.portada-txt{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:flex-end;
  pointer-events:none;              /* el clic pasa al video... */
}
.portada-txt a{pointer-events:auto} /* ...menos en el botón */
.portada-txt-in{
  width:100%; display:flex; flex-direction:column; align-items:flex-start;
  gap:16px; padding-bottom:clamp(30px,4.6vw,66px);
}
.portada-eyebrow{
  margin:0; color:var(--acento);
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.portada-titulo{
  margin:0; color:#FFFCF6; font-size:clamp(32px,5.4vw,72px);
  line-height:.99; letter-spacing:-.022em; text-wrap:balance;
  font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  font-weight:600;
  text-shadow:0 2px 26px rgba(0,0,0,.42);
}
.portada-bajada{
  margin:0; color:#E7E0D3; font-size:clamp(14.5px,1.25vw,17px);
  line-height:1.55; max-width:46ch;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.portada-cta-fila{margin:6px 0 0}
.portada-cta{
  display:inline-block; background:var(--acento); color:var(--acento-ink);
  text-decoration:none; padding:15px 30px; border-radius:2px;
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.portada-cta:hover{opacity:.9}
.portada-cta:focus-visible{outline:2px solid #FFFCF6; outline-offset:3px}
.portada-fuente{
  margin:2px 0 0; color:rgba(255,252,246,.62);
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.03em;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* En celular el titular necesita aire: la portada crece en vez de
   achicarse. Un hero de 240 px con texto encima no se lee. */
@media (max-width:560px){
  .portada-media{height:clamp(480px,118vw,660px)}
  .portada-txt-in{gap:13px}
  .portada-cta{padding:14px 24px}
}

/* ---- 2 · el header, flaco ---- */
.top-in{padding:13px 24px}
.marca-svg{height:21px}
.luz button{padding:7px 14px; font-size:10.5px}

/* ---- 3 · catálogo: un poco más de aire y foco en la imagen ---- */
#destacados h2,#catalogo h2{font-size:25px; margin:56px 0 22px}
#catalogo h2:first-child{margin-top:44px}
.grilla{gap:38px 26px}
.card .mat img{transition:transform .55s cubic-bezier(.2,.7,.3,1), opacity .18s ease}
.card:hover .mat img{transform:scale(1.035)}
.card .nom{font-size:20px}

/* ---- 4 · la ficha respira ---- */
.ficha-in{gap:52px}
#f-nombre{font-size:clamp(30px,3.4vw,46px)}
.visor-cap{margin-bottom:9px; letter-spacing:.09em}
.cierre{
  align-items:flex-end; padding-top:26px; margin-top:38px;
  border-top-color:var(--acento);
}
.precio{
  font-size:38px; letter-spacing:-.025em;
  font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  font-weight:600;
}
.pedir{
  padding:17px 30px; border-radius:2px;
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}

/* ---- 5 · la barra de paletas, al pie y discreta ---- */
.paletas{
  border-bottom:0; border-top:1px solid var(--line);
  margin-top:8px; opacity:.75;
}
.paletas:hover{opacity:1}

/* ---- 6 · el catálogo, como el book ----
   Tarjetas más grandes (3 por fila en vez de 4), título con la
   cuenta al lado, y la baldosa "ver todas" cerrando la tanda. */
.grilla{grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:40px 26px}

.cat-tit{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:24px;
}
.cat-cuenta{
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:11px; font-weight:400; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft); opacity:.8;
}

/* la baldosa que abre el resto del grupo */
.mas{
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:13px;
  aspect-ratio:1/1; width:100%; cursor:pointer; text-align:left;
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  padding:0 30px; font:inherit; color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.mas:hover{border-color:var(--acento); background:var(--field)}
.mas:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.mas-n{
  font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  font-weight:600; font-size:27px; line-height:1.08; letter-spacing:-.015em;
  text-wrap:balance;
}
.mas-ver{
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acento);
}
.mas-ver::after{content:" →"}

/* la medida se apaga un poco: el precio es lo que se busca */
.card .med{opacity:.75}

/* ---- 7 · el pie, en el mismo tono que el resto ---- */
.pie{padding:34px 0 60px}
.pie p{
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.03em; line-height:1.75;
}

/* ---- 8 · EL ARREGLO IMPORTANTE ----
   .mat es un <span>. Un span es texto en linea, asi que el navegador
   IGNORA aspect-ratio, la altura y el overflow:hidden: el marco
   cuadrado no existia y la imagen se dibujaba del alto que queria.
   Resultado: la tarjeta medía 445 px pero su contenido 590, y esos
   145 px de sobra caían encima de la tarjeta de abajo, tapando el
   nombre, la descripción y el precio.

   Con display:block el span pasa a ser una caja de verdad y las tres
   reglas vuelven a valer. (Esto también pasa en la web actual.) */
.card .mat{display:block}

/* La tarjeta en columna: así crece siempre hasta donde llega su
   contenido, sin depender de cómo un <button> calcula su alto. */
.card{display:flex; flex-direction:column}

/* ---- 9 · la ficha: una imagen que manda y dos de apoyo ----
   Estaban las tres apiladas a todo lo ancho: 2131 px de columna
   contra 1343 del panel. Ahora el visor (el que responde a los
   colores que elegís) va arriba y grande, y la ambientación y la
   foto real quedan abajo, una al lado de la otra. */
.col-img{
  display:grid; gap:18px; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.visor{grid-column:1 / -1; order:1; position:relative}
#ambiente{order:2}
#foto-real{order:3}

/* pies de foto más chicos: son notas al pie, no párrafos */
#ambiente figcaption,.foto-real figcaption{font-size:10.5px; line-height:1.55}

/* ---- el día/noche, sobre la imagen ----
   app.js muda acá el mismo control que vive en el header. */
.visor .luz{
  position:absolute; left:14px; bottom:14px;
  border-color:rgba(242,237,227,.30);
  background:rgba(23,21,15,.48);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border-radius:2px; overflow:hidden;
}
.visor .luz button{color:#D5CCBC; padding:10px 17px}
.visor .luz button.on{background:var(--acento); color:var(--acento-ink)}

/* En pantalla angosta la imagen es chica: el control estorba encima.
   Vuelve a ser una fila normal debajo del visor. */
@media (max-width:620px){
  .visor .luz{
    position:static; margin-top:12px; background:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    border-color:var(--line);
  }
  .visor .luz button{color:var(--ink-soft)}
}

/* En celular se toca con el dedo, no con el mouse: el día/noche
   necesita 44 px de alto o se falla el toque.
   Van los dos selectores porque `.visor .luz button` es más
   específico que `.luz button` y si no, gana el de arriba. */
@media (max-width:620px){
  .luz button,
  .visor .luz button{padding:15px 18px; font-size:11px}
}

/* ============================================================
   AJUSTES NIMBRA
   Lo que se agrego sobre la maqueta heredada de Veta.
   ============================================================ */

/* La portada ahora es una foto fija, no un video. Se conserva el alto
   proporcional que ya estaba calibrado (clamp 36vw / 62vh); lo unico
   que cambia es QUE parte de la foto se ve: la del trio es cuadrada y
   las piezas estan en la mitad de abajo. */
.portada-media{object-position:50% 46%}
/* Velo hacia abajo, para que el titular blanco se lea sobre la mesa
   iluminada. Va entre la foto y el texto (que ya tiene z-index 1). */
.portada::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,17,0) 30%,rgba(10,12,17,.72) 78%,rgba(10,12,17,.96) 100%);
}

/* nota del header, donde Veta tenia el toggle dia/noche */
.top-nota{
  font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  margin:0;
}

/* bajada de cada universo, bajo el titulo del grupo */
.cat-bajada{
  color:var(--ink-soft); font-size:14px; margin:-12px 0 22px; max-width:56ch;
}

/* parrafo de detalle en la ficha */
.detalle{
  color:var(--ink-soft); font-size:14px; line-height:1.6;
  margin:16px 0 26px; max-width:46ch;
  padding-left:14px; border-left:2px solid var(--line);
}

/* aviso de fan art — obligatorio en cada ficha */
.fanart{
  color:var(--ink-soft); font-size:12.5px; line-height:1.55;
  margin:20px 0 0; padding:12px 14px;
  background:var(--field); border:1px solid var(--line); border-radius:3px;
}

/* las fotos ya vienen sobre fondo oscuro: el marco claro de Veta
   las cortaba en seco. Aca el borde apenas se insinua. */
.visor img,.card .mat{background:var(--paper-2); border-color:var(--line)}
.visor img{border:1px solid var(--line); border-radius:3px}
.visor-cap{
  font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  margin:10px 0 0; text-align:center;
}

/* el ahorro del pack, en el acento */
.pack-p em{
  font-style:normal; color:var(--acento); font-size:.62em;
  letter-spacing:.02em; margin-left:8px;
}
.cross{
  color:var(--acento); font-size:13.5px; margin:16px 0 0;
}

/* En Veta el fondo era claro y el swatch negro se recortaba solo.
   Aca la pagina es oscura: sin este borde el negro es invisible. */
.sw{border:1px solid rgba(255,255,255,.20)}