/* Ficha de obra, la misma en la ventana de la sala (template-parts/components/ficha.php, la rellena app.js) y en la
   página de cada obra (single-obra.php). Con los colores de la portada: tinta, humo, hueso y bronce; las fotos en el
   mismo marco oscuro que la sala.
   1) Arriba, a dos columnas: galería (foto con su número y tres miniaturas que acercan los detalles) | sala, título,
      entradilla, tres datos clave, panel de precio con el botón y garantías.
   2) La pieza: la historia | ficha técnica y exposiciones.
   3) De barro a bronce: las fases reales del proceso (template-parts/components/ficha-proceso.php).
   4) Obras vecinas y, en la página, más piezas de la sala. */

.fo{--fo-line:var(--ink-line);--fo-panel:#15110E;color:var(--bone)}
.fo-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,5vw,88px);align-items:start}

/* 1 · galería: el marco de la sala de la portada */
.fo-media{position:sticky;top:calc(var(--top-h) + 24px)}
.fo-main{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#17130F;box-shadow:0 0 0 1px rgba(239,230,214,.08),0 50px 90px -50px rgba(0,0,0,.95)}
.fo-main::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(0,0,0,.4)}
.fo-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.94);transform-origin:var(--ox,50%) var(--oy,40%);transition:transform 1s var(--ease)}
.fo-main.z img{transform:scale(2.3)}
.fo-no{position:absolute;left:16px;top:14px;z-index:1;color:rgba(239,230,214,.88);font-size:10.5px;letter-spacing:.14em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fo-tag{position:absolute;left:14px;bottom:14px;z-index:1;padding:6px 11px;border-radius:999px;background:rgba(14,12,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--bronze-hi);font-size:9.5px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.fo-main.z .fo-tag,.fo-main.lb .fo-tag{opacity:1;transform:none}
/* pasar de vista sin bajar a las miniaturas: flechas a los lados (visibles al pasar el ratón; siempre en táctil), contador
   abajo a la derecha y fundido mientras carga la foto siguiente */
.fo-main{touch-action:pan-y}
.fo-main img{transition:transform 1s var(--ease),opacity .35s}
.fo-main.ld img{opacity:.35}
.fo-arr{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:1px solid rgba(239,230,214,.18);border-radius:50%;background:rgba(14,12,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--bone);cursor:pointer;opacity:0;transition:opacity .3s,border-color .3s,color .3s}
.fo-arr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fo-pv{left:12px}
.fo-nx{right:12px}
.fo-main:hover .fo-arr,.fo-arr:focus-visible{opacity:1}
.fo-arr:hover,.fo-arr:focus-visible{border-color:var(--bronze-hi);color:var(--bronze-hi);outline:none}
.fo-ct{position:absolute;right:14px;bottom:14px;z-index:1;padding:6px 11px;border-radius:999px;background:rgba(14,12,10,.72);color:var(--bone);font-size:9.5px;letter-spacing:.12em}
.fo-ct:empty,.fo-main.one .fo-arr,.fo-main.one .fo-ct{display:none}
@media (hover:none){.fo-arr{opacity:1;width:40px;height:40px;margin-top:-20px}}
.fo-thumbs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));align-items:start;gap:12px;margin-top:12px}
.fo-th{display:block;padding:0;border:0;background:none;color:var(--mute);font:inherit;text-align:left;cursor:pointer}
.fo-th span{display:block;aspect-ratio:1;overflow:hidden;background:#17130F;box-shadow:0 0 0 1px rgba(239,230,214,.1);transition:box-shadow .3s}
.fo-th img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.8);transform-origin:var(--ox,50%) var(--oy,40%);transition:filter .3s}
.fo-th.det img{transform:scale(2.3)}
.fo-th small{display:block;margin-top:8px;font-size:9.5px;transition:color .3s}
.fo-th:hover img,.fo-th[aria-pressed="true"] img{filter:brightness(1)}
.fo-th:hover span{box-shadow:0 0 0 1px rgba(231,185,124,.5)}
.fo-th[aria-pressed="true"] span{box-shadow:0 0 0 1px var(--bronze-hi)}
.fo-th[aria-pressed="true"] small{color:var(--bone)}
.fo-th:focus-visible{outline:none}
.fo-th:focus-visible span{box-shadow:0 0 0 2px var(--bronze-hi)}

/* 1 · información */
.fo-k{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 20px;color:var(--bronze-hi);font-size:11px}
.fo-k span{color:var(--mute)}
.fo-t{margin:0;font-size:clamp(46px,4.8vw,80px);line-height:.95;color:var(--bone)}
.fo-lead{margin:20px 0 0;max-width:30em;font-family:var(--f-serif);font-style:italic;font-weight:300;font-size:clamp(21px,1.7vw,25px);line-height:1.35;color:rgba(239,230,214,.86)}
.fo-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:32px 0 0;border-top:1px solid var(--fo-line);border-bottom:1px solid var(--fo-line)}
.fo-keys div{padding:16px 0 16px 18px;border-left:1px solid var(--fo-line)}
.fo-keys div:first-child{padding-left:0;border-left:0}
.fo-keys dt{margin:0 0 7px;color:var(--mute);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.fo-keys dd{margin:0;font-family:var(--f-display);font-size:clamp(17px,1.4vw,21px);line-height:1.1;color:var(--bone)}
.fo-buy{position:relative;margin-top:26px;padding:24px 26px 26px;border:1px solid rgba(231,185,124,.24);border-radius:8px;background:radial-gradient(120% 140% at 100% 0%,rgba(194,138,78,.12),transparent 55%),var(--fo-panel)}
.fo-st{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:13.5px;color:var(--bone)}
.fo-pr{margin:0;color:var(--bronze-hi);font-size:clamp(34px,3vw,46px);line-height:1}
.fo-pn{margin:8px 0 0;color:var(--mute);font-size:12.5px}
.fo-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px}
.fo-scale{display:inline-flex;align-items:center;gap:8px;padding:4px 0;border:0;border-bottom:1px solid rgba(239,230,214,.3);background:none;color:var(--bone);font:inherit;font-size:14px;text-decoration:none;cursor:pointer;transition:color .3s,border-color .3s}
.fo-scale svg{flex:none;width:10px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.fo-scale:hover{color:var(--bronze-hi);border-color:var(--bronze-hi)}
.fo-scale:hover svg{transform:translateY(3px)}
.fo-gar{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.fo-gar li{display:flex;gap:12px;align-items:baseline;font-size:14px;color:var(--mute)}
.fo-gar li::before{content:"";flex:none;width:11px;height:6px;border-left:1.5px solid var(--bronze-hi);border-bottom:1.5px solid var(--bronze-hi);transform:translateY(-3px) rotate(-45deg)}

/* 2 · la pieza: historia | ficha técnica y exposiciones */
.fo-more{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:0 clamp(28px,5vw,88px);margin-top:clamp(64px,7vw,110px);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--fo-line)}
.fo-h{margin:0 0 20px;color:var(--bronze-hi);font-size:10.5px;font-weight:400}
.fo-text{max-width:620px}
.fo-text p{margin:0 0 18px;font-size:17px;line-height:1.78;color:rgba(239,230,214,.78)}
.fo-text p:first-child{font-size:19px;color:var(--bone)}
.fo-text p:first-child::first-letter{float:left;margin:7px 12px 0 0;font-family:var(--f-display);font-size:64px;line-height:.78;color:var(--bronze-hi)}
.fo-side{display:grid;gap:44px;align-content:start}
.fo-dl{margin:0;border-top:1px solid var(--fo-line)}
.fo-dl div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--fo-line)}
.fo-dl dt{margin:0;padding-top:3px;color:var(--mute);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.fo-dl dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--bone)}
/* ficha técnica desplegable: cerrada al abrir la obra; el rótulo es el botón y el + gira a × al abrirla */
.fo-acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:14px 0;border-top:1px solid var(--fo-line);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.fo-acc summary::-webkit-details-marker{display:none}
.fo-acc summary i{position:relative;flex:none;width:12px;height:12px;transition:transform .35s var(--ease)}
.fo-acc summary i::before,.fo-acc summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:currentColor}
.fo-acc summary i::after{transform:rotate(90deg)}
.fo-acc[open] summary i{transform:rotate(45deg)}
.fo-acc summary:hover{color:var(--bone)}
.fo-acc summary:focus-visible{outline:1px solid var(--bronze-hi);outline-offset:4px}
.fo-acc:not([open]) summary{border-bottom:1px solid var(--fo-line)}
.fo-acc[open] .fo-dl{animation:foAcc .45s var(--ease) both}
@keyframes foAcc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fo-ex{list-style:none;margin:0;padding:0;border-left:1px solid var(--fo-line)}
.fo-ex li{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:0 0 16px 20px;font-size:15px;line-height:1.4}
.fo-ex li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--bronze-hi);box-shadow:0 0 0 4px rgba(231,185,124,.12)}
.fo-ex li span{padding-top:2px;color:var(--mute);font-family:var(--f-mono);font-size:11px}
.fo-ex li b{font-weight:400;color:var(--bone)}

/* 3 · de barro a bronce */
.fo-proc{margin-top:clamp(64px,7vw,110px);padding:clamp(32px,3.6vw,56px);border:1px solid rgba(239,230,214,.08);border-radius:8px;background:radial-gradient(70% 120% at 0% 0%,rgba(194,138,78,.1),transparent 60%),var(--fo-panel)}
.fo-proc-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 40px;align-items:end;margin-bottom:clamp(28px,3vw,44px)}
.fo-st2{margin:0;font-size:clamp(32px,3.2vw,50px);line-height:1;color:var(--bone)}
.fo-proc-l{grid-column:1;margin:0;max-width:34em;color:var(--mute);font-size:15px;line-height:1.55}
.fo-proc-n{grid-column:2;grid-row:1/3;margin:0;text-align:right}
.fo-proc-n b{display:block;font-weight:400;font-size:clamp(56px,5vw,84px);line-height:.85;color:var(--bronze-hi)}
.fo-proc-n span{display:block;margin-top:8px;color:var(--mute);font-size:9.5px}
.fo-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.fo-steps li{position:relative;padding:22px 14px 0 0;border-top:1px solid rgba(239,230,214,.18)}
.fo-steps li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--bronze-hi);box-shadow:0 0 0 4px rgba(231,185,124,.14)}
.fo-steps span{display:block;color:var(--bronze-hi);font-size:10px}
.fo-steps b{display:block;margin-top:8px;font-family:var(--f-display);font-weight:400;font-size:clamp(15px,1.15vw,18px);line-height:1.15;color:var(--bone)}
.fo-steps small{display:block;margin-top:6px;color:var(--mute);font-size:9.5px}
.fo-link{display:inline-flex;gap:8px;margin-top:clamp(26px,2.6vw,36px);padding-bottom:3px;border-bottom:1px solid rgba(239,230,214,.3);color:var(--bone);font-size:14px;text-decoration:none;transition:color .3s,border-color .3s}
.fo-link:hover{color:var(--bronze-hi);border-color:var(--bronze-hi)}

/* 4 · obras vecinas */
.fo-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(48px,5vw,72px)}
.fo-nav a,.fo-nav button{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid rgba(239,230,214,.12);border-radius:6px;background:rgba(239,230,214,.03);color:var(--bone);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color .3s,background .3s}
.fo-nav>:last-child{flex-direction:row-reverse;text-align:right}
.fo-nav a:hover,.fo-nav button:hover{border-color:rgba(231,185,124,.5);background:rgba(231,185,124,.06)}
.fo-nav img{flex:none;width:56px;height:70px;object-fit:cover;filter:brightness(.92)}
.fo-nav small{display:block;margin-bottom:5px;color:var(--mute);font-size:9.5px}
.fo-nav b{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;line-height:1.1}

/* ---- en la ventana de la sala ---- */
.ficha{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.ficha::backdrop{background:var(--ink)}
.ficha[open] .f-wrap{animation:fIn .7s var(--ease) both}
@keyframes fIn{from{opacity:0;transform:translateY(14px)}}
/* a pantalla completa, como una página más de la web (no una ventana encima): fondo de tinta de borde a borde y el
   contenido al ancho de la web */
.f-wrap{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(60% 40% at 25% 0%,rgba(194,138,78,.09),transparent 70%),var(--ink);overflow:hidden}
.f-top{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:var(--top-h);padding:0 max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));border-bottom:1px solid rgba(239,230,214,.1);color:var(--mute);font-size:10.5px}
.f-top p{margin:0}
.f-top-t{color:var(--bone);text-align:center;letter-spacing:.14em}
.f-close{justify-self:end;display:inline-flex;align-items:center;gap:10px;padding:0 6px 0 14px;height:40px;border:1px solid rgba(239,230,214,.2);border-radius:999px;background:none;color:var(--bone);font-size:10.5px;cursor:pointer;transition:border-color .3s,color .3s}
.f-close span:first-child{order:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(239,230,214,.08);font-size:22px;line-height:1}
.f-close:hover{border-color:var(--bronze-hi);color:var(--bronze-hi)}
.f-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(28px,3.4vw,56px) max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut))) clamp(72px,8vw,120px);scrollbar-width:thin;scrollbar-color:rgba(239,230,214,.2) transparent}
.ficha .fo-media{top:0}
.f-scroll.sw .fo-in,.f-scroll.sw .fo-more{animation:fTxt .6s var(--ease) both}
@keyframes fTxt{from{opacity:0;transform:translateY(12px)}}

/* ---- en la página de cada obra ---- */
.fo-pg{position:relative;padding:clamp(24px,3vw,48px) 0 clamp(80px,9vw,140px);background:radial-gradient(60% 40% at 25% 0%,rgba(194,138,78,.09),transparent 70%)}
.fo-pg .op-crumb{margin-bottom:clamp(22px,2.6vw,36px)}
.fo-sala{margin-top:clamp(72px,8vw,120px);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--fo-line)}
.fo-sala .head{margin-bottom:36px}
.fo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,40px)}
.fo-card{display:block;color:var(--bone);text-decoration:none}
.fo-card:hover .wk-frame img{transform:scale(1.04);filter:brightness(1)}
.fo-card b{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--fo-line);font-family:var(--f-display);font-weight:400;font-size:clamp(20px,1.5vw,25px);line-height:1.05}
.fo-card small{display:block;margin-top:6px;color:var(--mute);font-size:10px}

@media (max-width:1100px){
  .fo-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
}
@media (max-width:900px){
  .fo-in,.fo-more{grid-template-columns:minmax(0,1fr)}
  .fo-media{position:relative;top:auto}
  .fo-side{margin-top:44px}
  .fo-proc-h{grid-template-columns:minmax(0,1fr)}
  .fo-proc-n{grid-column:1;grid-row:auto;text-align:left;display:flex;align-items:baseline;gap:12px}
  .fo-proc-n span{margin:0}
  .f-top{grid-template-columns:1fr auto}
  .f-top-t{display:none}
  .f-scroll{padding:18px 18px 40px}
  .fo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-cards>:nth-child(3){display:none}
}
@media (max-width:480px){
  .fo-thumbs{gap:8px}
  .fo-th small{display:none}
  .fo-keys dd{font-size:16px}
  .fo-keys div{padding-left:12px}
  .fo-buy{padding:20px 18px 22px}
  .fo-acts .btn{width:100%}
  .fo-proc{padding:26px 20px}
  .fo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-nav b{font-size:16px}
  .fo-dl div{grid-template-columns:96px minmax(0,1fr)}
}
/* móvil: los rótulos de la ficha, nunca por debajo de 11 px */
@media (max-width:760px){
  .fo-no,.fo-keys dt,.fo-h,.fo-dl dt,.fo-proc-n span,.fo-steps span,.fo-steps small,.fo-nav small,.fo-card small{font-size:11px}
}
/* «anterior / siguiente»: en el móvil, uno debajo de otro (en dos columnas no cabe el título junto a la foto) */
@media (max-width:480px){.fo-nav{grid-template-columns:minmax(0,1fr);gap:10px}}
@media (prefers-reduced-motion:reduce){.fo-acc[open] .fo-dl,.fo-acc summary i,.fo-main img,.ficha[open] .f-wrap,.f-scroll.sw .fo-in,.f-scroll.sw .fo-more{transition:none;animation:none}}