/* La ficha de una obra (/ui/detalle-obra). El <style> de propuesta/obra.html sin la cabecera ni el
   pie, que pone ExperienceShell, más lo que la maqueta no tiene: la invitación sin sesión
   (.canje-texto), la obra que no se encuentra (.obra--vacia) y la lista de otras piezas. */

/* ---------- La obra: peana a la izquierda, cartela y canje a la derecha ---------- */
.obra { background: radial-gradient(60% 70% at 28% 0%, #222B4A 0%, var(--noche-profunda) 62%, #10131F 100%); padding-block: var(--e-l) var(--e-3xl); }
.ruta ol { list-style: none; margin: 0 0 var(--e-m); padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--t-secundario); color: var(--marfil-suave); }
.ruta li + li::before { content: "/"; margin-inline: 10px; color: var(--oro-apagado); }
.ruta a { color: var(--marfil); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ruta a:hover { text-decoration-thickness: 2px; }

.obra-rejilla { display: grid; grid-template-columns: 1fr 1.08fr; gap: var(--e-xxl); align-items: stretch; }
.escena { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: var(--e-s); }
.peana { position: relative; min-height: 420px; display: grid; justify-items: center; align-content: end;
  background: radial-gradient(34% 88% at 50% 0%, rgba(255,226,170,.24), rgba(255,226,170,.06) 55%, rgba(255,226,170,0) 78%); }
.peana::before { content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 8px; transform: translateX(-50%); background: #2A3253; border-radius: 0 0 8px 8px; box-shadow: 0 3px 14px rgba(255,226,170,.4); }
.peana svg { position: relative; z-index: 1; height: 420px; width: auto; margin-bottom: -6px; filter: drop-shadow(0 18px 14px rgba(0,0,0,.5)); }
/* La pieza en 3D (model-viewer) cuando la obra tiene su .glb: sin fondo propio, sobre la luz de la hornacina. peana-modelo.js apunta la
   cámara a la base de la pieza, que queda en el eje del lienzo: el lienzo mide el doble que el marco (.visor) y el marco recorta la mitad de
   abajo, así que su borde de abajo es el suelo y ahí empieza la peana. Los 2 px de menos dejan la pieza pisando la peana sin rendija. */
.peana .visor { position: relative; z-index: 1; width: 100%; height: 420px; margin-bottom: -2px; overflow: hidden; }
.peana model-viewer { display: block; width: 100%; height: 200%; background: transparent; --poster-color: transparent; --progress-bar-color: color-mix(in srgb, var(--oro) 70%, transparent); }
.visor [slot="poster"] { position: absolute; top: 0; left: 0; width: 100%; height: 50%; object-fit: contain; object-position: 50% 100%; }
/* El marco recorta el contorno propio del visor: el foco del teclado se dibuja dentro del marco. */
.visor:has(:focus-visible) { outline: 2px dashed var(--foco); outline-offset: -4px; }
.peana::after { content: ""; display: block; width: 48%; height: 84px; background: linear-gradient(180deg, #2C3456 0, #1F2642 12%, #151A2C 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oro) 45%, transparent), 0 22px 30px rgba(0,0,0,.5); }
.escena figcaption { text-align: center; font-size: var(--t-minimo); color: var(--marfil-suave); }

.columna { display: grid; gap: var(--e-m); align-content: start; }

/* Cartela de museo */
.cartela-museo { padding: 28px var(--e-xl) var(--e-m); display: grid; gap: 4px; }
.cartela-museo h1 { font-size: var(--t-titulo); }
.cartela-museo .autor { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: var(--t-sub); color: var(--tinta-suave); }
.cartela-museo .desc { color: var(--tinta-suave); margin-top: 4px; }
.cartela-museo dl { margin: var(--e-s) 0 0; display: grid; border-top: 2px solid var(--tinta); }
.cartela-museo dl > div { display: grid; grid-template-columns: 116px 1fr; gap: var(--e-m); padding-block: 7px; border-bottom: 1px dashed var(--arena-sombra); }
.cartela-museo dt { font-size: var(--t-secundario); color: var(--tinta-suave); padding-top: 1px; }
.cartela-museo dd { margin: 0; font-variant-numeric: lining-nums; }
.cartela-museo .codigo { white-space: nowrap; }
.cartela-museo .precio { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-m); padding-top: 6px; }
.cartela-museo .precio span { font-size: var(--t-secundario); color: var(--tinta-suave); }
.cartela-museo .precio b { font-family: var(--f-titulo); font-weight: 800; font-size: 1.75rem; font-variant-numeric: lining-nums tabular-nums; }

/* Bloque de canje */
.canje { padding: 20px var(--e-l); border: 1px solid color-mix(in srgb, var(--oro) 28%, transparent); border-radius: var(--r-ficha); background: color-mix(in srgb, var(--velo) 32%, transparent); display: grid; gap: 10px; }
.canje h2 { font-family: var(--f-cuerpo); font-size: var(--t-secundario); font-weight: 700; color: var(--marfil-suave); letter-spacing: .01em; }
.canje-texto { color: var(--marfil); }
.regla { position: relative; height: 16px; border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent); border-radius: 2px; background: color-mix(in srgb, var(--marfil) 6%, transparent); overflow: hidden; }
.regla .relleno { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--oro-apagado), var(--oro)); }
.regla::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), color-mix(in srgb, var(--velo) 55%, transparent) calc(100% / 6 - 1px) calc(100% / 6)); }
.regla-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--e-m); font-variant-numeric: lining-nums; }
.regla-pie span { color: var(--marfil-suave); }
.regla-pie strong { color: var(--marfil); font-family: var(--f-titulo); font-size: 1.25rem; }
.canje-accion { display: grid; grid-template-columns: auto 1fr; gap: var(--e-s) var(--e-l); align-items: center; margin-top: 6px; padding-left: 16px; }
.canje-accion .explica { display: grid; gap: 2px; justify-items: start; }
.canje-accion .explica p { font-size: var(--t-secundario); color: var(--marfil-suave); }
.canje-accion .boton { font-size: var(--t-secundario); padding-block: 6px; }
.canje-accion > .boton { justify-self: start; }
/* El .boton de arte-furtivo.css lleva interlineado 1,3 (por las páginas viejas); en la maqueta
   hereda el de la página (1,55) */
.obra .boton, .otras .boton { line-height: inherit; }
.lacre[aria-disabled="true"] { min-height: 56px; }
.lacre[aria-disabled="true"]:hover, .lacre[aria-disabled="true"]:active { transform: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marfil-suave) 35%, transparent); }
.lacre[aria-disabled="true"]:hover::before { transform: translateY(-50%) rotate(-7deg); }

/* ---------- El formulario de envío («Pedir el canje», 19-oct-2026) ----------
   Una ficha de papel bajo el bloque del canje. Los campos, la casilla y los errores son los de las páginas de
   cuenta (css/paginas/acceso.css, renglón de tinta), con el ámbito de .pedido porque esa hoja no se carga aquí. */
.pedido { padding: var(--e-l) var(--e-xl) var(--e-xl); display: grid; gap: var(--e-m); scroll-margin-top: 6rem; }
.pedido h2 { font-size: var(--t-seccion); }
.resumen-pedido { color: var(--tinta-suave); }
.resumen-pedido b { color: var(--tinta); font-variant-numeric: lining-nums; }
.aviso-canje { margin: 0; padding: var(--e-xs) var(--e-s); border-left: 3px solid var(--lacre); border-radius: var(--r-fino); background: #F3E2CF; color: var(--lacre); font-weight: 700; line-height: 1.4; }
.pedido .formulario { display: grid; gap: var(--e-m); }
.pedido .par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-m); }
.pedido .campo { position: relative; display: grid; gap: 6px; align-content: start; }
.pedido .campo label { font-weight: 700; font-size: var(--t-secundario); color: var(--tinta); }
.pedido .campo input {
  width: 100%; height: 52px; padding: 0 14px; margin: 0;
  font: 400 var(--t-cuerpo) var(--f-cuerpo); color: var(--tinta);
  background: rgba(255,251,240,.55); border: 1px solid var(--arena-sombra); border-bottom: 2px solid var(--tinta-suave);
  border-radius: var(--r-fino); appearance: none; -webkit-appearance: none;
}
.pedido .campo input:focus { outline: none; box-shadow: none; }
.pedido .campo:focus-within input { border-bottom: 3px solid var(--terracota-oscura); background-color: #F7EEDB; }
.pedido .campo:focus-within::before { content: ""; position: absolute; left: -22px; top: 50px; width: 10px; height: 10px; background: var(--terracota-oscura); transform: rotate(45deg); }
.pedido .campo--error input { border-color: var(--lacre); border-bottom: 3px solid var(--lacre); background-color: #F3E2CF; }
.pedido .error { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; margin: 0; color: var(--lacre); font-size: var(--t-secundario); line-height: 1.4; }
.pedido .error svg { width: 22px; height: 22px; margin-top: 1px; }
.pedido .error b { font-weight: 700; }
.pedido .casilla { display: grid; grid-template-columns: 26px 1fr; gap: var(--e-s); align-items: start; border-top: 1px solid var(--arena-oscura); padding-top: var(--e-m); }
.pedido .casilla input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 1px 0 0; border: 2px solid var(--tinta); border-radius: 2px; background: rgba(255,251,240,.6); cursor: pointer; box-shadow: none; }
.pedido .casilla input:checked { background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23E8D9B8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pedido .casilla input:focus-visible { outline: 2px dashed var(--terracota-oscura); outline-offset: 3px; }
.pedido .casilla label { font-size: var(--t-secundario); line-height: 1.5; color: var(--tinta); cursor: pointer; }
.pedido .enviar { display: grid; gap: var(--e-s); justify-items: start; padding-left: 16px; padding-top: var(--e-xs); }
.pedido .enviar .nota { font-size: .9375rem; color: var(--tinta-suave); margin-left: -16px; }

/* ---------- Cómo funciona el canje ---------- */
.como { padding-block: var(--e-3xl); }
.como h2 { font-size: var(--t-seccion); margin-bottom: var(--e-xl); }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-xl); }
.pasos li { position: relative; display: grid; gap: 6px; align-content: start; }
.pasos .num { font-family: var(--f-titulo); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--terracota-oscura); width: 44px; text-align: center; padding-bottom: 6px; border-bottom: 2px solid var(--terracota-oscura); margin-bottom: var(--e-xs); font-variant-numeric: lining-nums; }
.pasos li:not(:last-child)::before { content: ""; position: absolute; top: 17px; left: 60px; right: -12px; border-top: 2px dashed var(--arena-sombra); }
.pasos li:not(:last-child)::after { content: ""; position: absolute; top: 12px; right: -12px; width: 9px; height: 9px; border-top: 2px solid var(--tinta-suave); border-right: 2px solid var(--tinta-suave); transform: rotate(45deg); }
.pasos h3 { font-size: 1.375rem; }
.pasos p { color: var(--tinta-suave); font-size: var(--t-secundario); }

/* ---------- Otras piezas de la colección ---------- */
.otras { background: radial-gradient(60% 80% at 70% 0%, #222B4A 0%, var(--noche-profunda) 62%, #10131F 100%); padding-block: var(--e-3xl); }
.otras .marco { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--e-xxl); align-items: center; }
.otras .texto { display: grid; gap: var(--e-m); justify-items: start; }
.otras h2 { font-size: var(--t-seccion); }
.otras .texto .boton { margin-left: -2px; }
.otras-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-xl); }
.pieza { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: var(--e-m); align-items: stretch; }
.pieza .peana { min-height: 250px; background: radial-gradient(60% 75% at 50% 0%, rgba(255,226,170,.20), rgba(255,226,170,0) 75%); }
.pieza .peana::before { width: 40px; height: 6px; }
.pieza .peana svg { height: 160px; margin-bottom: -4px; }
.pieza .peana::after { width: 64%; height: 36px; }
.cartela { padding: var(--e-l); display: flex; flex-direction: column; gap: 4px; }
.cartela h3 { font-size: 1.375rem; }
.cartela h3 a { text-decoration: none; }
.cartela h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-ficha); }
.cartela h3 a:hover, .cartela h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; outline: none; }
/* Oro a propósito: la cartela es .ficha (su --foco es TerracotaOscura), pero este contorno cae fuera de ella, sobre la tela. */
.cartela:focus-within { outline: 2px dashed var(--oro); outline-offset: 5px; }
.cartela .autor { font-style: italic; color: var(--tinta-suave); }
.cartela .tecnica { font-size: var(--t-secundario); color: var(--tinta-suave); }
.cartela .fila { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-s); border-top: 1px solid var(--arena-oscura); padding-top: 10px; font-size: var(--t-secundario); font-variant-numeric: lining-nums; }
.cartela .fila b { font-family: var(--f-titulo); font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
/* Estado respecto al jugador: forma + texto, nunca solo color (como en la vitrina) */
.estado { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--t-secundario); font-weight: 700; color: var(--tinta); font-variant-numeric: lining-nums; }
.estado .marca { flex: none; width: 10px; height: 10px; margin-inline: 2px; transform: rotate(45deg); border: 2px solid var(--tinta); }
.estado--puede { color: var(--exito-tinta); }
.estado--puede .marca { background: var(--exito-tinta); border-color: var(--exito-tinta); }
.estado--agotada { color: var(--tinta-suave); font-weight: 500; font-style: italic; }
.estado--agotada .marca { transform: none; width: auto; height: auto; border: 0; font-style: normal; font-weight: 700; font-size: 1.125rem; line-height: 1; margin-inline: 1px 0; }
.pieza--agotada .peana { background: none; }
.pieza--agotada .peana::before { box-shadow: none; }
.pieza--agotada .peana svg { opacity: .42; filter: grayscale(.5) drop-shadow(0 12px 10px rgba(0,0,0,.45)); }

/* La obra no se encuentra */
.obra--vacia .cartela-museo { max-width: 40rem; gap: var(--e-s); justify-items: start; padding-block: var(--e-xl); }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 980px) {
  .obra-rejilla { grid-template-columns: 1fr; gap: var(--e-l); }
  .peana { min-height: 320px; }
  .peana svg { height: 240px; }
  .peana .visor { height: 340px; }
  .peana::after { height: 56px; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .pasos li:nth-child(2)::before, .pasos li:nth-child(2)::after { display: none; }
  .otras .marco { grid-template-columns: 1fr; gap: var(--e-l); }
}
@media (max-width: 640px) {
  .obra { padding-block: var(--e-m) var(--e-xxl); }
  .ruta ol { margin-bottom: var(--e-xs); }
  .obra-rejilla { gap: var(--e-m); }
  .columna { gap: var(--e-s); }
  .peana { min-height: 148px; }
  .peana svg { height: 118px; }
  .peana .visor { height: 300px; }
  .peana::after { width: 50%; height: 30px; }
  .escena { gap: 6px; }
  .cartela-museo { padding: var(--e-l) var(--e-l) var(--e-m); }
  .cartela-museo .autor { font-size: 1.1875rem; }
  .cartela-museo h1 { font-size: 2rem; }
  .cartela-museo dl > div { grid-template-columns: 92px 1fr; gap: var(--e-s); padding-block: 6px; }
  .cartela-museo dt { font-size: var(--t-minimo); padding-top: 3px; }
  .cartela-museo dd { font-size: 1.0625rem; line-height: 1.45; }
  .canje { padding: var(--e-m); }
  .canje-accion { grid-template-columns: 1fr; padding-left: 16px; }
  .pedido { padding: var(--e-l) var(--e-m) var(--e-l) calc(var(--e-m) + 8px); }
  .pedido .par { grid-template-columns: minmax(0, 1fr); }
  .como { padding-block: var(--e-xxl); }
  .como h2 { margin-bottom: var(--e-l); }
  .pasos { grid-template-columns: 1fr; gap: var(--e-l); }
  .pasos li { grid-template-columns: 44px 1fr; column-gap: var(--e-m); }
  .pasos li > :not(.num) { grid-column: 2; }
  .pasos .num { grid-row: 1 / span 2; align-self: start; }
  .pasos li:not(:last-child)::before { display: block !important; top: 48px; bottom: calc(-1 * var(--e-l) + 4px); left: 21px; right: auto; border-top: 0; border-left: 2px dashed var(--arena-sombra); }
  .pasos li:not(:last-child)::after { display: none; }
  .otras { padding-block: var(--e-xxl); }
  .otras-lista { gap: var(--e-l); }
  .pieza { grid-template-columns: 112px 1fr; gap: var(--e-s); }
  .pieza .peana { min-height: 210px; background: radial-gradient(60% 70% at 50% 0%, rgba(255,226,170,.20), rgba(255,226,170,0) 75%); }
  .pieza .peana svg { height: 128px; }
  .pieza .peana::after { width: 78%; height: 26px; }
  .cartela { padding: var(--e-m) var(--e-m) var(--e-m) 20px; }
  .cartela h3 { font-size: 1.25rem; }
  .cartela .autor, .cartela .tecnica { font-size: var(--t-secundario); line-height: 1.4; }
  .cartela .fila { flex-wrap: wrap; gap: 0 var(--e-s); }
}