/* ═══════════════════════════════════════════════════════════════════════
   MITOS DEL JOKER — Gabinete de curiosidades
   Sistema BYQ « We Consult ». Tomado tal cual: la autoridad tranquila
   apoyada en un verde profundo como superficie dominante, la jerarquía
   editorial de peso ligero con titulares que no gritan, la etiqueta
   discreta como único elemento de taxonomía, el ritmo amplio entre
   secciones y el acento cálido que aparece poco y por eso pesa.
   Adaptado: el pliego fija la paleta —verde de museo, latón, hueso
   polvoriento y un reflejo de vidrio al 8 %— y las familias Baskerville y
   Lato. Las tarjetas del sistema pasan a ser vitrinas con marco de latón de
   1 px y sombra interior de cristal, y el reflejo se dibuja con un degradado
   porque el proyecto no admite archivos gráficos.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --verde:#1F3A32; --verde-alto:#26463C; --verde-hondo:#172C26;
  --laton:#A98C4B; --laton-40:rgba(169,140,75,.40); --laton-20:rgba(169,140,75,.20);
  --hueso:#EFE7D8;
  --hueso-72:rgba(239,231,216,.72);
  --hueso-48:rgba(239,231,216,.48);
  --hueso-16:rgba(239,231,216,.16);
  --vidrio:rgba(255,255,255,.08);
  --display:Baskerville,"Libre Baskerville","Baskerville Old Face","Times New Roman",Georgia,serif;
  --cuerpo:Lato,"Segoe UI",Candara,"Trebuchet MS",sans-serif;
  --t-caption:12px; --t-body-sm:14px; --t-body:17px; --t-body-lg:21px;
  --t-h-sm:24px; --t-h:34px; --t-h-lg:46px; --t-display:60px;
  --s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-24:24px;--s-32:32px;--s-40:40px;
  --s-48:48px;--s-64:64px;--s-80:80px;--s-120:120px;--s-160:160px;
  --pagina:1320px;
  --d:300ms; --e:ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--verde);color:var(--hueso);font-family:var(--cuerpo);
  font-size:var(--t-body);line-height:1.65;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--laton);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.01em}
h1{font-size:var(--t-display);line-height:1.08}
h2{font-size:var(--t-h-lg);line-height:1.14}
h3{font-size:var(--t-h-sm);line-height:1.25}
p{margin:0 0 var(--s-20,20px)}
p:last-child{margin-bottom:0}
@media(max-width:991px){h1{font-size:var(--t-h-lg)}h2{font-size:var(--t-h)}}
@media(max-width:479px){h1{font-size:var(--t-h)}h2{font-size:var(--t-h-sm)}}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:28px}
@media(max-width:767px){.marco{padding-inline:18px}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rotulo{display:block;font-family:var(--display);font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;color:var(--laton)}

/* ═══ Entradas ════════════════════════════════════════════════════════ */
.js-on .revelar{opacity:0;transform:translateY(10px);
  transition:opacity 500ms var(--e),transform 500ms var(--e)}
.js-on .revelar.visto{opacity:1;transform:none}
.filete{height:1px;background:var(--laton-40);transform-origin:left}
.js-on .filete{transform:scaleX(0);transition:transform 600ms var(--e)}
.js-on .filete.visto{transform:scaleX(1)}

/* ═══ Vitrina: marco de latón y reflejo de cristal ══════════════════
   El brillo es un degradado, no una imagen. */
.vitrina{position:relative;border:1px solid var(--laton-40);background:var(--verde-alto);
  padding:var(--s-40);overflow:hidden;
  box-shadow:inset 0 1px 0 var(--vidrio),inset 0 -22px 44px rgba(0,0,0,.18)}
.vitrina::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,var(--vidrio) 0 18%,transparent 18% 52%,
    rgba(255,255,255,.05) 52% 60%,transparent 60%)}
.vitrina>*{position:relative}
.vitrina.grande{padding:var(--s-64)}
@media(max-width:767px){.vitrina,.vitrina.grande{padding:var(--s-24)}}

/* Etiqueta museística de tres líneas */
.cartela{margin-top:var(--s-24);border-top:1px solid var(--laton-40);padding-top:var(--s-16);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-8) var(--s-16);
  font-size:var(--t-body-sm);line-height:1.6}
.cartela dt{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.14em;
  text-transform:uppercase;color:var(--laton);padding-top:2px}
.cartela dd{margin:0;color:var(--hueso-72)}

/* ═══ BLOQUE 3.0 — Placa de entrada a la sala ═══════════════════════ */
.placa-sala{border-bottom:1px solid var(--laton-40);background:var(--verde-hondo)}
.placa-sala .marco{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-16) var(--s-32);
  padding-block:var(--s-24)}
.placa-sala .nombre-sala{font-family:var(--display);font-size:var(--t-h-sm);
  text-decoration:none;margin-right:auto}
.placa-sala .nombre-sala small{display:block;font-family:var(--cuerpo);font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;color:var(--laton);margin-top:var(--s-4)}
.placa-sala nav{display:flex;flex-wrap:wrap;gap:var(--s-24)}
.placa-sala nav a{font-size:var(--t-body-sm);text-decoration:none;color:var(--hueso-72);
  border-bottom:1px solid transparent;transition:color var(--d) var(--e),border-color var(--d) var(--e)}
.placa-sala nav a:hover{color:var(--hueso);border-bottom-color:var(--laton)}
.edad{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.14em;
  border:1px solid var(--laton-40);padding:4px 10px;color:var(--laton)}

/* ═══ Secciones ═════════════════════════════════════════════════════ */
.sala{padding-block:var(--s-120)}
.sala.corta{padding-block:var(--s-80)}
.sala.hondo{background:var(--verde-hondo)}
.sala h2{margin-top:var(--s-16)}
.intro{margin-top:var(--s-24);max-width:70ch;color:var(--hueso-72)}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;margin-top:var(--s-32)}

/* ═══ BLOQUE 4.0 — Vitrina central ══════════════════════════════════ */
.central{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s-40);align-items:start}
@media(max-width:991px){.central{grid-template-columns:1fr}}
.vecinas-sombra{display:grid;gap:var(--s-24)}
.caja-sombra{border:1px solid var(--laton-20);background:rgba(255,255,255,.03);
  padding:var(--s-24);box-shadow:inset 0 1px 0 var(--vidrio)}
.caja-sombra b{font-family:var(--display);display:block;font-size:var(--t-body-lg)}
.caja-sombra span{display:block;margin-top:var(--s-8);font-size:var(--t-body-sm);
  line-height:1.6;color:var(--hueso-48)}

/* ═══ BLOQUE 5.0 — Leyenda de estados ═══════════════════════════════ */
.leyenda{display:flex;flex-wrap:wrap;gap:var(--s-16);margin-top:var(--s-40)}
.chapa{border:1px solid var(--laton-40);background:var(--laton-20);padding:var(--s-12) var(--s-16);
  font-family:var(--display);font-size:var(--t-body-sm);letter-spacing:.06em}
.chapa span{display:block;margin-top:var(--s-4);font-family:var(--cuerpo);
  font-size:var(--t-caption);letter-spacing:0;color:var(--hueso-72);text-transform:none}

/* ═══ BLOQUES 8.0–13.0 — Sala de vitrinas ═══════════════════════════ */
.expuestas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--s-32);margin-top:var(--s-48);align-items:start}
.expuestas .vitrina:nth-child(2n){margin-top:var(--s-32)}
@media(max-width:767px){.expuestas .vitrina{margin-top:0!important}}
.num-exp{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.14em;
  text-transform:uppercase;color:var(--laton)}
.objeto{display:grid;place-items:center;min-height:132px;margin-block:var(--s-24);
  border:1px solid var(--laton-20);background:rgba(0,0,0,.12)}
.objeto .glifo{font-family:var(--display);font-size:52px;line-height:1;color:var(--laton)}
.objeto.serie{grid-auto-flow:column;gap:var(--s-12);padding:var(--s-16)}
.objeto.serie i{width:16px;height:44px;background:var(--laton-40);display:block}
.objeto.serie i.desplazada{transform:translateY(12px);background:var(--laton)}

/* ═══ BLOQUE 14.0 — Vitrina de demo ═════════════════════════════════ */
.fallo{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.6;color:var(--hueso-48)}

/* ═══ BLOQUE 16.0/20.0 — Salas contiguas y catálogo ═════════════════ */
.catalogo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s-24);margin-top:var(--s-48)}
.ficha-cat{border:1px solid var(--laton-20);background:var(--verde-alto);padding:var(--s-32);
  text-decoration:none;display:block;box-shadow:inset 0 1px 0 var(--vidrio);
  transition:border-color var(--d) var(--e)}
.ficha-cat:hover{border-color:var(--laton)}
.ficha-cat .n{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.14em;
  text-transform:uppercase;color:var(--laton)}
.ficha-cat h3{margin-top:var(--s-12)}
.ficha-cat p{margin-top:var(--s-12);font-size:var(--t-body-sm);line-height:1.6;
  color:var(--hueso-48)}

/* ═══ BLOQUE 17.0 — Dos paneles ═════════════════════════════════════ */
.paneles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-32);margin-top:var(--s-48)}
@media(max-width:767px){.paneles{grid-template-columns:1fr}}
.panel-museo ul{list-style:none;margin:var(--s-24) 0 0;padding:0}
.panel-museo li{padding-block:var(--s-12);border-top:1px solid var(--laton-20);
  font-size:var(--t-body);line-height:1.6;color:var(--hueso-72)}

/* ═══ BLOQUE 18.0 — Cédula del conservador ══════════════════════════ */
.cedula{margin-top:var(--s-40);max-width:74ch}
.cedula dl{margin:var(--s-24) 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-24)}
.cedula dt{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.14em;
  text-transform:uppercase;color:var(--laton)}
.cedula dd{margin:var(--s-4) 0 0;font-size:var(--t-body);color:var(--hueso-72)}

/* ═══ BLOQUE 19.0 — Sala tranquila ══════════════════════════════════ */
.tranquila ul{list-style:none;margin:var(--s-24) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-24)}
.tranquila li b{display:block;font-family:var(--display);font-size:var(--t-body-lg)}
.tranquila li span{display:block;margin-top:var(--s-8);font-size:var(--t-body-sm);
  line-height:1.6;color:var(--hueso-48)}

/* ═══ BLOQUE 22.0 — Preguntas del visitante ═════════════════════════ */
.consultas{margin-top:var(--s-48);border-top:1px solid var(--laton-40)}
.consulta{border-bottom:1px solid var(--laton-20)}
.consulta .tirador{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-24);background:none;border:0;padding:var(--s-24) 0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:var(--t-body-lg);color:inherit}
.llave{width:16px;height:16px;flex:none;border:1px solid var(--laton);position:relative}
.llave::before,.llave::after{content:"";position:absolute;background:var(--laton)}
.llave::before{left:3px;right:3px;top:7px;height:1px}
.llave::after{top:3px;bottom:3px;left:7px;width:1px;transition:transform var(--d) var(--e)}
.tirador[aria-expanded="true"] .llave::after{transform:scaleY(0)}
.cuerpo-q{max-height:0;overflow:hidden;transition:max-height var(--d) var(--e)}
.cuerpo-q.abierto{max-height:480px}
.cuerpo-q:not(.abierto) .dentro{visibility:hidden}
.dentro{padding-bottom:var(--s-32);max-width:70ch;color:var(--hueso-72)}

/* ═══ Acción, aviso y divulgación ═══════════════════════════════════ */
.cta{display:inline-flex;align-items:center;gap:var(--s-12);border:1px solid var(--laton);
  color:var(--laton);padding:13px 24px;font-family:var(--display);font-size:var(--t-body-sm);
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:background var(--d) var(--e),color var(--d) var(--e)}
.cta:hover{background:var(--laton);color:var(--verde-hondo)}
.chevron{display:inline-block;width:6px;height:6px;flex:none;
  border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}
.aviso{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.12em;
  text-transform:uppercase;color:var(--hueso-48)}
.divulgacion{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.6;
  color:var(--hueso-48);max-width:78ch}
.enlace{color:var(--laton);text-decoration:underline;text-underline-offset:3px}

/* ═══ BLOQUE 23.0 — Salida del museo ════════════════════════════════ */
.pie-sitio{background:var(--verde-hondo);border-top:1px solid var(--laton-40);
  padding-block:var(--s-80)}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-64)}
@media(max-width:767px){.pie-cols{grid-template-columns:1fr;gap:var(--s-32)}}
.pie-marca{font-family:var(--display);font-size:var(--t-h)}
.pie-nota{margin-top:var(--s-12);font-size:var(--t-body-sm);line-height:1.6;color:var(--laton)}
.pie-sitio nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-12) var(--s-24)}
.pie-sitio nav a{font-size:var(--t-body-sm);color:var(--hueso-48);text-decoration:none;
  transition:color var(--d) var(--e)}
.pie-sitio nav a:hover{color:var(--laton)}
.legal{margin-top:var(--s-24);font-size:var(--t-caption);line-height:1.8;
  color:var(--hueso-48);max-width:96ch}