/* Cuba Despierta · Personalidades (views/personalidades.php). Se carga solo en /cultura/personalidades.
   Paleta de site.css más dos tonos de museo: la pared y el latón de las placas.
   Animaciones comunes de redesign.css (kenburns, fadeup, lineup, data-reveal). Linterna: js/personalidades.js. */
.pz { --wall: #eee8de; --wall-line: #d9cfbf; --brass: #c9a24c; --brass-dark: #8f6c22; --wood: #2a1c12; }

/* ---------- 1. Cabecera: sala de museo con linterna ---------- */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 72%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 45%; }
.ph { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 4rem) 0 5rem; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.ph-media { position: absolute; inset: 0; z-index: -2; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: sepia(.25) contrast(1.05); transform-origin: 60% 40%; }
html.js .ph-media img { animation: kenburns 26s var(--ease-out) both; }
/* La linterna: un círculo de luz cálida sobre la sala en penumbra; el texto queda siempre legible a la izquierda */
.ph-dark { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,14,14,.94) 0%, rgba(14,14,14,.72) 40%, rgba(14,14,14,0) 72%),
    radial-gradient(circle min(34vw, 360px) at var(--mx) var(--my), rgba(255,226,170,.12) 0%, rgba(14,14,14,.1) 35%, rgba(14,14,14,.86) 100%); }
html.js .ph:not(.is-follow) { animation: pz-sweep 16s ease-in-out infinite alternate; }
@keyframes pz-sweep { 0% { --mx: 62%; --my: 35%; } 50% { --mx: 82%; --my: 55%; } 100% { --mx: 70%; --my: 30%; } }
@media (max-width: 767px) { .ph-dark { background: linear-gradient(to top, rgba(14,14,14,.96) 0%, rgba(14,14,14,.75) 55%, rgba(14,14,14,.45) 100%); } }
.ph-in { position: relative; width: 100%; }
.ph-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.ph-title { margin-top: 1.2rem; font-size: clamp(2.6rem, .8rem + 6.6vw, 6.6rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.ph-title .serif { color: var(--brand-light); font-size: 1.08em; text-transform: none; }
.ph-huella { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); font-weight: 700; }
.ph-word { position: relative; display: inline-block; min-width: 9ch; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.ph-word span { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15em; color: var(--brass); line-height: 1.1; white-space: nowrap; transition: transform .55s var(--ease-out), opacity .4s; }
.ph-word span.is-out { transform: translate3d(0, -110%, 0); opacity: 0; }
.ph-word span.is-in { transform: translate3d(0, 110%, 0); opacity: 0; transition: none; }
.ph-lead { margin-top: 1.2rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.ph-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
/* Placa de latón de la sala */
.ph-plate { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; gap: .3rem; max-width: 17rem; padding: 1rem 1.2rem; background: linear-gradient(145deg, #e8cd86, var(--brass) 45%, #a9812f); color: #2b1d08; box-shadow: 0 18px 30px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.5); text-align: center; }
.ph-plate span { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.ph-plate b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.25rem; line-height: 1.1; }
@media (max-width: 1023px) { .ph-plate { display: none; } }

/* ---------- 2. La galería: retratos enmarcados ---------- */
.pg { position: relative; padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--wall); scroll-margin-top: var(--hdr-h); overflow-x: clip; }
/* Moldura de la pared, de donde «cuelgan» los cuadros */
.pg::before { content: ''; position: absolute; left: 0; right: 0; top: clamp(9rem, 7rem + 6vw, 12rem); height: 6px; background: linear-gradient(var(--wall-line), #cbbfac); box-shadow: 0 2px 0 rgba(255,255,255,.6); }
.pg-note { max-width: 22rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.pg-wall { position: relative; list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem 2.5rem; }
@media (min-width: 700px) { .pg-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pg-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pg-wall.is-few { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; } }
.pg-card { display: flex; flex-direction: column; align-items: center; height: 100%; color: var(--ink); text-decoration: none; text-align: center; }
.pg-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 8px; }
.pg-frame { position: relative; display: block; width: 100%; padding: clamp(10px, 1.6vw, 16px); background: linear-gradient(145deg, #4a3423, var(--wood) 55%, #140d07); box-shadow: 0 34px 50px -28px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 5px rgba(0,0,0,.25); transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.pg-mat { position: relative; display: block; padding: clamp(12px, 3.2%, 26px); background: #f7f3eb; box-shadow: inset 0 2px 6px rgba(0,0,0,.18); }
.pg-mat img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: sepia(.12) saturate(.95); transition: filter .7s var(--ease-out); }
.pg-wall.is-few .pg-item:first-child .pg-mat img { aspect-ratio: 5 / 4; }
/* Haz de luz del foco: se enciende al pasar por encima y una vez al aparecer el cuadro */
.pg-beam { position: absolute; left: 50%; bottom: 60%; width: 130%; height: 120%; translate: -50% 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(255,236,190,.65), rgba(255,236,190,.15) 45%, transparent 70%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity .6s ease; mix-blend-mode: screen; }
.pg-card:hover .pg-frame, .pg-card:focus-visible .pg-frame { transform: translateY(-8px) rotate(-.4deg); box-shadow: 0 50px 60px -30px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 5px rgba(0,0,0,.25); }
.pg-card:hover .pg-beam, .pg-card:focus-visible .pg-beam { opacity: 1; }
.pg-card:hover .pg-mat img { filter: none; }
html.js .pg-item.is-in .pg-beam { animation: pz-flicker 1.6s ease .4s both; }
@keyframes pz-flicker { 0% { opacity: 0; } 15% { opacity: .9; } 22% { opacity: .2; } 32% { opacity: 1; } 100% { opacity: 0; } }
.pg-plaque { position: relative; z-index: 1; margin-top: -1rem; display: inline-flex; flex-direction: column; gap: .2rem; padding: .7rem 1.4rem; background: linear-gradient(145deg, #ecd393, var(--brass) 50%, #a8802e); color: #2b1d08; box-shadow: 0 10px 18px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .7s var(--ease-out); }
.pg-plaque b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 1.15rem + .7vw, 1.8rem); line-height: 1.05; }
.pg-plaque span { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #4a3610; }
.pg-card:hover .pg-plaque { transform: translateY(-8px); }
.pg-body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: .9rem; margin-top: 1.2rem; max-width: 30rem; }
.pg-d { font-size: 15px; line-height: 1.65; color: var(--muted); }
.pg-go { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; padding-bottom: .2rem; border-bottom: 2px solid var(--brand); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); }
.pg-go svg { transition: transform .45s var(--ease-out); }
.pg-card:hover .pg-go svg { transform: translateX(5px); }
/* Marco vacío: invita a proponer una personalidad */
.pg-empty .pg-frame { background: transparent; box-shadow: none; border: 2px dashed #b9ad99; }
.pg-empty .pg-mat { display: grid; place-items: center; aspect-ratio: 4 / 5; background: rgba(255,255,255,.35); box-shadow: none; }
.pg-q { font-family: var(--serif); font-style: italic; font-size: clamp(5rem, 3rem + 6vw, 8rem); line-height: 1; color: #b9ad99; transition: color .4s, transform .7s var(--ease-out); }
.pg-empty:hover .pg-q { color: var(--brand); transform: rotate(-10deg) scale(1.08); }
.pg-empty:hover .pg-frame { border-color: var(--brand); }
.pg-empty .pg-plaque { background: var(--ink-900); color: #fff; }
.pg-empty .pg-plaque span { color: var(--brand-light); }

/* ---------- 3. Vidas en el tiempo ---------- */
.pv { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--ink-900); color: #fff; scroll-margin-top: var(--hdr-h); }
.pv-note { max-width: 24rem; font-size: 15px; line-height: 1.6; color: #c9c9c9; }
.pv-chart { --lab: 0rem; position: relative; }
@media (min-width: 760px) { .pv-chart { --lab: 13rem; } }
.pv-axis { position: relative; height: 1.6rem; margin-left: var(--lab); border-bottom: 1px solid rgba(255,255,255,.25); }
.pv-axis span { position: absolute; bottom: .4rem; translate: -50% 0; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #9a9a9a; }
.pv-axis span:first-child { translate: 0 0; }
@media (max-width: 759px) { .pv-axis span:nth-child(even) { display: none; } }
.pv-plot { position: relative; padding-top: 2.6rem; }
.pv-hito { position: absolute; top: 0; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * var(--x) / 100); border-left: 1px dashed rgba(255,255,255,.28); pointer-events: none; }
.pv-hito i { position: absolute; top: .5rem; left: .4rem; white-space: nowrap; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-light); }
.pv-hito em { font-style: normal; }
@media (max-width: 759px) { .pv-hito em { display: none; } }
.pv-rows { position: relative; list-style: none; margin: 0; padding: 0; }
.pv-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; align-items: center; padding-block: .8rem; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (min-width: 760px) { .pv-row { grid-template-columns: var(--lab) minmax(0, 1fr); gap: 0; } }
.pv-label { display: flex; flex-direction: column; gap: .1rem; padding-right: 1rem; color: #fff; text-decoration: none; }
.pv-label b { font-size: 15px; font-weight: 800; line-height: 1.2; transition: color .25s; }
.pv-label span { font-size: 12px; font-weight: 700; color: #9a9a9a; font-variant-numeric: tabular-nums; }
.pv-label:hover b, .pv-label:focus-visible b { color: var(--brand-light); }
.pv-label:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.pv-track { position: relative; display: block; height: 16px; }
.pv-bar { position: absolute; top: 0; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-light)); box-shadow: 0 0 18px -4px rgba(255,90,71,.6); transform-origin: left; transition: transform 1.3s var(--ease-out); transition-delay: calc(var(--i, 0) * 160ms + 200ms); }
.pv-bar.is-alive { background: linear-gradient(90deg, var(--brand), var(--brand-light) 80%, rgba(255,90,71,.15)); }
.pv-bar::before, .pv-bar::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff; translate: 0 -50%; }
.pv-bar::before { left: -4px; }
.pv-bar::after { right: -4px; }
.pv-bar.is-alive::after { display: none; }
.pv-row:hover .pv-bar { filter: brightness(1.15); }
html.js .pv-chart[data-reveal]:not(.is-in) .pv-bar { transform: scaleX(0); }

/* ---------- 4. También en la galería ---------- */
.pa { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.pa-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .pa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pa-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pa-card { display: flex; align-items: center; gap: 1.2rem; height: 100%; padding: 1rem 1.2rem 1rem 1rem; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .3s, transform .5s var(--ease-out), box-shadow .5s; }
.pa-card:hover, .pa-card:focus-visible { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(0,0,0,.45); }
.pa-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pa-medal { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--brass), 0 0 0 6px var(--soft); transition: box-shadow .4s, transform .6s var(--ease-out); }
.pa-medal img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5); transition: filter .5s; }
.pa-card:hover .pa-medal { box-shadow: 0 0 0 3px var(--brand), 0 0 0 6px var(--brand-tint); transform: rotate(-6deg); }
.pa-card:hover .pa-medal img { filter: none; }
.pa-txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pa-c { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-dark); }
.pa-n { font-size: 16px; font-weight: 800; line-height: 1.25; }
.pa-go { display: inline-flex; align-items: center; gap: .35rem; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-go svg { transition: transform .45s var(--ease-out); }
.pa-card:hover .pa-go { color: var(--brand-dark); }
.pa-card:hover .pa-go svg { transform: translateX(5px); }

/* ---------- 5. Cierre: otros temas ---------- */
.pc { padding-block: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--line); }
.pc ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .pc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pc ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pc a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1.2rem; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; transition: border-color .3s, color .3s, transform .5s var(--ease-out); }
.pc-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: var(--soft); color: var(--brand-dark); transition: background-color .35s, color .35s, transform .5s var(--ease-out); }
.pc-n { flex: 1; }
.pc a > svg { color: var(--brand); transition: transform .45s var(--ease-out); }
.pc a:hover { border-color: var(--ink); color: var(--brand-dark); transform: translateY(-3px); }
.pc a:hover .pc-ico { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.pc a:hover > svg { transform: translateX(5px); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .ph:not(.is-follow), html.js .pg-item.is-in .pg-beam { animation: none; }
  .ph-word span, .pg-frame, .pg-plaque, .pg-q, .pa-card, .pa-medal, .pc a, .pv-bar { transition: none; }
  html.js .pv-chart[data-reveal]:not(.is-in) .pv-bar { transform: none; }
}

/* ---------- Archivo (views/_cat_archivo.php): retratos con marco dorado ---------- */
.arc.is-personalidades { --arc-accent: var(--brass-dark); --arc-t-font: var(--serif); --arc-t-style: italic; --arc-t-weight: 400; --arc-t-size: 1.15rem; }
.arc.is-personalidades .arc-img { border: 6px solid var(--brass); box-shadow: inset 0 0 0 2px var(--brass-dark); }
.arc.is-personalidades .arc-n { background: var(--brass-dark); }