/* Propuesta B — "Laca". Salón privado nocturno: laca de Olinalá, hoja de oro y grana cochinilla. */
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }
:root {
  --laca: #0E0B09;
  --laca-2: #18120F;
  --oro: #C8A04F;
  --oro-claro: #E6CC86;
  --grana: #8E1B2E;
  --grana-viva: #A82338;
  --marfil: #EEE4D0;
  --humo: #9A8E7D;
  --display: "Bodoni Moda", "Amiri", serif;
  --texto: "Jost", "Noto Naskh Arabic", sans-serif;
}
html[lang="ar"] { --display: "Amiri", serif; --texto: "Noto Naskh Arabic", serif; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--laca); color: var(--marfil); font-family: var(--texto); font-weight: 300; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
html[lang="ar"] body { font-weight: 400; font-size: 18px; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.05; }
em { font-style: italic; }
html[lang="ar"] em { font-style: normal; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--oro-claro); outline-offset: 4px; }
.ceja { font-size: .74rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--oro); margin: 0 0 1.4rem; }
html[lang="ar"] .ceja { letter-spacing: 0; font-size: .95rem; }

/* Barra */
.barra { position: fixed; inset: 0 0 auto; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.3rem 4vw; transition: background .5s; }
.barra.solida { background: rgba(14, 11, 9, .9); backdrop-filter: blur(10px); }
.marca { font-family: "Bodoni Moda", serif; font-size: 1.45rem; text-decoration: none; letter-spacing: .02em; color: var(--marfil); direction: ltr; }
.marca em { color: var(--oro-claro); }
.barra-link { justify-self: start; background: none; border: 0; color: var(--marfil); font: 400 .78rem var(--texto); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: .4rem 0; }
html[lang="ar"] .barra-link { letter-spacing: 0; font-size: .95rem; }
.barra-der { justify-self: end; display: flex; align-items: center; gap: 1.6rem; }
.barra-oficina { border-bottom: 1px solid var(--oro); }
.idiomas { display: flex; gap: .2rem; }
.idiomas button { background: none; border: 0; color: var(--humo); font: 500 .78rem var(--texto); padding: .3rem .45rem; cursor: pointer; }
.idiomas button[aria-pressed="true"] { color: var(--oro-claro); box-shadow: inset 0 -1px var(--oro-claro); }

/* Hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.escenario { position: absolute; left: 50%; top: 50%; width: max(100vw, 176.8vh); height: max(56.55vw, 100vh); transform: translate(-50%, -50%); }
.escenario-fondo { width: 100%; height: 100%; object-fit: cover; animation: penumbra 2.4s ease-out both; }
.escenario-obra { position: absolute; left: 48.8%; top: 35.5%; height: 22%; width: auto; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px #2a2118, 0 14px 30px rgba(0,0,0,.7); animation: aparece 2.6s .9s ease-out both; }
@keyframes penumbra { from { filter: brightness(.15); } to { filter: brightness(1); } }
@keyframes aparece { from { opacity: 0; filter: brightness(.2); } 60% { opacity: 1; } to { opacity: 1; filter: brightness(1.05) saturate(1.05); } }
.hero-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,11,9,.55) 0%, transparent 22%, transparent 55%, rgba(14,11,9,.92) 100%); }
.hero-texto { position: absolute; inset: auto 4vw 6vh; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 3rem; }
.hero-texto .ceja { grid-column: 1 / -1; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 6.4rem); max-width: 13ch; letter-spacing: -.01em; }
.hero h1 em { color: var(--oro-claro); display: block; }
html[lang="ar"] .hero h1 { line-height: 1.35; max-width: 16ch; }
.entrar { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
.entrar .flecha { font-size: 1.4rem; animation: baja 2.4s ease-in-out infinite; }
@keyframes baja { 50% { transform: translateY(8px); } }

.franja-oro { height: 18px; background: url(../assets/escenas/b-laca-oro.jpg) center / 420px; box-shadow: inset 0 1px 0 rgba(0,0,0,.6), inset 0 -1px 0 rgba(0,0,0,.6); }

/* Intro */
.intro { text-align: center; padding: 9rem 6vw 6rem; max-width: 52rem; margin: 0 auto; }
.intro h2 { font-size: clamp(3rem, 7vw, 6rem); color: var(--oro-claro); }
.intro-sub { font-size: 1.15rem; color: var(--marfil); opacity: .85; margin: 2rem auto 0; max-width: 38rem; }

/* Salas — la firma: oscuridad y un foco que sigue al visitante */
.sala { --x: 50%; --y: 50%; position: relative; min-height: 100vh; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 4vw; padding: 8rem 6vw; background: radial-gradient(ellipse at 30% 50%, #1d1612 0%, var(--laca) 70%); overflow: hidden; }
.sala:nth-child(even) { grid-template-columns: 1fr 1.2fr; background: radial-gradient(ellipse at 70% 50%, #1d1612 0%, var(--laca) 70%); }
.sala:nth-child(even) .sala-obra { order: 2; }
.sala + .sala { border-top: 1px solid rgba(200, 160, 79, .12); }
.sala-obra { position: relative; z-index: 0; display: flex; justify-content: center; }
.marco { padding: 11px; background: url(../assets/escenas/b-laca-oro.jpg) center / 260px; box-shadow: 0 40px 80px rgba(0,0,0,.75), 0 0 0 1px #000; }
.marco img { height: min(74vh, 760px); width: auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.foco { position: absolute; inset: 0; z-index: 1; pointer-events: none; --r: 0px; background: radial-gradient(circle at var(--x) var(--y), rgba(14,11,9,0) 0, rgba(14,11,9,0) var(--r), rgba(14,11,9,.93) calc(var(--r) * 2.1 + 1px)); transition: --r 1.6s cubic-bezier(.3,.6,.2,1), opacity 1.2s; }
.sala.visible .foco { --r: 11vmax; }
.sala.encendida .foco { opacity: 0; }
.sala-info { position: relative; z-index: 2; max-width: 30rem; }
.numeral { font-family: "Bodoni Moda", serif; font-style: italic; color: var(--oro); font-size: 1rem; margin: 0 0 1.2rem; }
.sala-info h2 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); font-style: italic; }
html[lang="ar"] .sala-info h2 { font-family: "Bodoni Moda", serif; }
.sala-trad { color: var(--oro-claro); font-family: var(--display); font-size: 1.35rem; margin: .5rem 0 1.6rem; }
.sala-datos { font-size: .85rem; letter-spacing: .08em; color: var(--humo); margin: 0 0 1.8rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(200,160,79,.25); }
.sala-texto { font-size: 1.05rem; }
.sala-texto .es { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 1.2rem; line-height: 1.55; margin: 0 0 .8rem; }
.sala-texto .tr { color: var(--humo); margin: 0; }
.sala-acciones { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-top: 2.2rem; }
.luces { position: absolute; z-index: 2; bottom: 2rem; inset-inline-start: 6vw; background: none; border: 1px solid rgba(200,160,79,.4); color: var(--oro); font: 400 .72rem var(--texto); letter-spacing: .2em; text-transform: uppercase; padding: .55rem .9rem; cursor: pointer; }
html[lang="ar"] .luces { letter-spacing: 0; font-size: .9rem; }
.luces[aria-pressed="true"] { background: var(--oro); color: var(--laca); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; font: 400 .8rem var(--texto); letter-spacing: .2em; text-transform: uppercase; padding: 1.05rem 1.8rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
html[lang="ar"] .boton { letter-spacing: 0; font-size: 1rem; }
.boton-grana { background: var(--grana); color: var(--marfil); border-color: var(--grana); }
.boton-grana:hover { background: var(--grana-viva); border-color: var(--grana-viva); }
.boton-linea { background: transparent; color: var(--marfil); border-color: rgba(238,228,208,.4); }
.boton-linea:hover { border-color: var(--oro-claro); color: var(--oro-claro); }
.enlace { background: none; border: 0; padding: 0; color: var(--oro-claro); font: 400 .95rem var(--texto); cursor: pointer; border-bottom: 1px solid currentColor; }
.boton-ancho { width: 100%; }
.boton.cargando { pointer-events: none; opacity: .8; }
.boton.cargando::after { content: ""; width: 1em; height: 1em; margin-inline-start: .7rem; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Manifiesto */
.manifiesto { text-align: center; padding: 10rem 8vw; background: var(--laca-2); }
.manifiesto blockquote { margin: 0 auto; max-width: 56rem; }
.cita-es { font-family: "Bodoni Moda", serif; font-style: italic; font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1.3; margin: 0 0 1.6rem; color: var(--marfil); }
.cita-trad { color: var(--humo); font-size: 1.1rem; margin: 0; }
.firma { margin-top: 3rem; color: var(--oro); letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; }
html[lang="ar"] .firma { letter-spacing: 0; font-size: 1rem; }

/* Oficina privada */
.oficina { display: grid; grid-template-columns: 1fr 1.3fr; min-height: 90vh; }
.oficina-textura { background: url(../assets/escenas/b-laca-oro.jpg) center / cover; min-height: 360px; }
.oficina-texto { padding: 8rem 6vw; align-self: center; }
.oficina h2 { font-size: clamp(2.4rem, 4.4vw, 4rem); max-width: 14ch; margin-bottom: 3rem; }
.servicios { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 3rem; margin: 0 0 3rem; }
.servicios dt { font-family: var(--display); font-style: italic; font-size: 1.35rem; color: var(--oro-claro); margin-bottom: .4rem; }
html[lang="ar"] .servicios dt { font-style: normal; }
.servicios dd { margin: 0; color: var(--marfil); opacity: .8; font-size: .98rem; }

/* Pie */
.pie { border-top: 1px solid rgba(200,160,79,.2); padding: 4rem 4vw; display: grid; gap: .6rem; justify-items: center; text-align: center; }
.pie p { margin: 0; color: var(--humo); }
.pie-demo { font-size: .78rem; color: var(--humo); opacity: .8; }

/* Panel de adquisición */
dialog { border: 0; padding: 0; color: var(--marfil); background: var(--laca-2); }
dialog::backdrop { background: rgba(5, 4, 3, .78); backdrop-filter: blur(3px); }
.panel { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100vh; max-height: none; width: min(560px, 100vw); overflow-y: auto; border-inline-start: 1px solid rgba(200,160,79,.35); }
html[dir="rtl"] .panel { inset: 0 auto 0 0; }
.panel[open] { animation: desliza .5s cubic-bezier(.2,.7,.2,1); }
@keyframes desliza { from { transform: translateX(100%); } }
html[dir="rtl"] .panel[open] { animation-name: desliza-rtl; }
@keyframes desliza-rtl { from { transform: translateX(-100%); } }
.panel-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 2.2rem 0; }
.panel-cabeza .ceja { margin: 0; }
.cerrar { background: none; border: 1px solid rgba(238,228,208,.3); color: var(--marfil); width: 2.4rem; height: 2.4rem; font-size: 1.3rem; cursor: pointer; }
.majlis .cerrar { position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 2; background: rgba(14,11,9,.7); }
#paForm, .pa-listo { padding: 1.6rem 2.2rem 2.4rem; display: grid; gap: 1.6rem; }
.pa-obra { display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; align-items: center; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(200,160,79,.2); }
.pa-obra img { width: 96px; height: 130px; object-fit: cover; box-shadow: 0 0 0 4px #3a2c1a; }
.pa-obra h2 { font-style: italic; font-size: 1.9rem; font-family: "Bodoni Moda", serif; }
.pa-obra p { margin: .2rem 0 0; color: var(--humo); font-size: .9rem; }
.pa-precio strong { color: var(--oro-claro); font-weight: 400; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1rem; min-width: 0; }
legend { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--oro-claro); margin-bottom: .8rem; padding: 0; }
html[lang="ar"] legend { font-style: normal; }
label > span { display: block; font-size: .78rem; letter-spacing: .06em; color: var(--humo); margin-bottom: .3rem; }
input, select, textarea { width: 100%; font: 400 1rem var(--texto); color: var(--marfil); background: transparent; border: 0; border-bottom: 1px solid rgba(238,228,208,.3); padding: .6rem 0; border-radius: 0; }
select option { background: var(--laca-2); }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--oro-claro); }
input[aria-invalid="true"] { border-bottom-color: #e0566c; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.camino { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 1px solid rgba(238,228,208,.18); cursor: pointer; transition: border-color .3s, background .3s; }
.camino:has(input:checked) { border-color: var(--oro); background: rgba(200,160,79,.07); }
.camino input { width: auto; accent-color: var(--oro); margin-top: .4rem; }
.camino strong { font-weight: 500; display: block; }
.camino small { color: var(--humo); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; }
.chips span { display: inline-block; margin: 0; padding: .55rem 1rem; border: 1px solid rgba(238,228,208,.25); font-size: .85rem; letter-spacing: 0; color: var(--marfil); }
.chips input:checked + span { border-color: var(--oro); color: var(--oro-claro); }
.chips input:focus-visible + span { outline: 1px solid var(--oro-claro); outline-offset: 3px; }
.pista { font-size: .82rem; color: var(--humo); border-inline-start: 2px solid var(--oro); padding-inline-start: .8rem; margin: 0; }
.error { color: #f08a9a; margin: 0; }
.pa-listo { text-align: center; justify-items: center; padding-top: 5rem; }
.sello { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--grana); color: var(--oro-claro); font-family: "Bodoni Moda", serif; font-style: italic; font-size: 1.8rem; box-shadow: 0 0 0 6px rgba(142,27,46,.25); animation: sello .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sello { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.pa-listo h3 { font-size: 2.2rem; font-style: italic; }
.pa-listo p { margin: 0; max-width: 26rem; }
.pa-ref strong { color: var(--oro-claro); font-weight: 400; letter-spacing: .1em; }

/* Majlis */
.majlis { width: min(1280px, 94vw); max-height: 94vh; background: var(--laca); overflow: hidden; }
.majlis[open] { animation: aparece-modal .5s ease-out; }
@keyframes aparece-modal { from { opacity: 0; } }
.majlis-escena { position: relative; }
.majlis-fondo { width: 100%; }
.majlis-obra { position: absolute; box-shadow: 0 0 0 4px #2a2118, 0 20px 40px rgba(0,0,0,.55); }
.majlis-pie { margin: 0; padding: 1rem 1.4rem; color: var(--humo); font-size: .9rem; }
.majlis-pie strong { color: var(--marfil); font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; font-size: 1.1rem; }


/* Salas de bronce — Perla Arroyo: sin marco; la foto sobre negro se funde con la sala */
.sala-bronce { background: radial-gradient(ellipse at 30% 50%, #0d0a08 0%, #000 70%); }
.sala-bronce:nth-child(even) { background: radial-gradient(ellipse at 70% 50%, #0d0a08 0%, #000 70%); }
.pedestal img { height: min(76vh, 780px); width: auto; aspect-ratio: 1; object-fit: cover; mix-blend-mode: lighten; }
.sala-bronce .numeral bdi[lang] { font-style: normal; letter-spacing: .08em; }
.intro-bronce { padding-top: 8rem; }
.intro-bronce .intro-sub { max-width: 44rem; }
.intro-tesis { color: var(--oro-claro); font-family: var(--display); font-style: italic; font-size: 1.3rem !important; }
.manifiesto-bronce { background: #000; }
.recintos-titulo { margin: 3.5rem 0 1rem; color: var(--oro); letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; }
html[lang="ar"] .recintos-titulo { letter-spacing: 0; font-size: .95rem; }
.recintos { list-style: none; padding: 0; margin: 0 auto; max-width: 52rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; color: var(--marfil); font-size: .95rem; }
.recintos li + li::before { content: "·"; color: var(--oro); margin-inline-end: 1.6rem; }
.proximamente { color: var(--oro-claro); font-family: var(--display); font-style: italic; font-size: 1.15rem; margin-top: 1.6rem; }

/* Visores: video 360° y ensayo */
.visor-video { width: min(1100px, 94vw); background: #000; }
.visor-video[open], .visor-ensayo[open] { animation: aparece-modal .5s ease-out; }
.visor-video-marco iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.visor .cerrar { position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 2; background: rgba(14,11,9,.7); }
.visor-ensayo { width: min(780px, 94vw); max-height: 90vh; background: var(--laca-2); }
.ensayo-cuerpo { padding: 4rem clamp(1.4rem, 5vw, 4rem) 3rem; max-height: 90vh; overflow-y: auto; }
.ensayo-cuerpo h2 { font-style: italic; font-size: clamp(2rem, 4vw, 3rem); color: var(--oro-claro); margin-bottom: .6rem; }
.ensayo-idioma { color: var(--humo); font-size: .85rem; margin: 0 0 2.2rem; }
.ensayo-texto { text-align: left; font-size: 1.05rem; line-height: 1.8; color: var(--marfil); }
.ensayo-texto h4 { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; font-size: 1.45rem; color: var(--oro-claro); margin: 2.4rem 0 .8rem; }
.ensayo-texto p { margin: 0 0 1.1rem; }
.ensayo-texto strong { color: var(--oro-claro); font-weight: 500; }

/* Responsivo */
@media (max-width: 900px) {
  .barra { grid-template-columns: auto 1fr; padding: 1rem 5vw; }
  .barra > .barra-link { display: none; }
  .barra-oficina { display: none; }
  .marca { font-size: 1.2rem; }
  .hero-texto { grid-template-columns: 1fr; inset: auto 6vw 5vh; }
  .entrar { display: none; }
  .escenario { width: max(100vw, 176.8vh); }
  .sala, .sala:nth-child(even) { grid-template-columns: 1fr; padding: 6rem 6vw 7rem; gap: 2.6rem; min-height: auto; }
  .sala:nth-child(even) .sala-obra { order: 0; }
  .marco img { height: auto; max-height: 64vh; }
  .pedestal img { height: auto; width: 100%; max-height: none; }
  .oficina { grid-template-columns: 1fr; }
  .oficina-textura { min-height: 200px; }
  .oficina-texto { padding: 5rem 6vw; }
  .servicios { grid-template-columns: 1fr; }
  .fila { grid-template-columns: 1fr; }
  #paForm, .pa-listo { padding: 1.4rem 1.4rem 2rem; }
  .panel-cabeza { padding: 1.2rem 1.4rem 0; }
}
@media (hover: none) { .sala.visible .foco { --r: 26vmax; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .foco { display: none; }
}