/* Cuba Despierta · Monumentos (views/monumentos.php). Se carga solo en /descubre-cuba/monumentos.
   Paleta de site.css más la piedra de los pedestales y el bronce de las placas.
   Animaciones comunes de redesign.css (kenburns, fadeup, lineup, data-reveal). Sin JS propio. */
.oz { --stone: #d9d4c9; --stone-dark: #a9a294; --bronze: #a87a3d; --bronze-light: #d7a965; --facade: #e9e3d6; }

/* ---------- 1. Cabecera con luz de amanecer ---------- */
@property --sun-y { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
.oh { 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; }
.oh-media { position: absolute; inset: 0; z-index: -3; }
.oh-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform-origin: 60% 40%; }
html.js .oh-media img { animation: kenburns 26s var(--ease-out) both, hx-drift 46s ease-in-out 26s infinite alternate; }
.oh::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,14,14,.93) 0%, rgba(14,14,14,.68) 45%, rgba(14,14,14,.12) 85%), linear-gradient(to top, rgba(14,14,14,.9) 0%, rgba(14,14,14,0) 50%); }
/* La luz del amanecer sube desde abajo y se queda dorando la fachada */
.oh-sun { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 70% var(--sun-y), rgba(255,196,120,.45), rgba(255,140,80,.12) 45%, transparent 70%); mix-blend-mode: soft-light; }
html.js .oh-sun { animation: oz-sun 3.5s var(--ease-out) .3s both; }
@keyframes oz-sun { from { --sun-y: 120%; opacity: 0; } to { --sun-y: 30%; opacity: 1; } }
@media (max-width: 767px) { .oh::before { background: linear-gradient(to top, rgba(14,14,14,.96) 0%, rgba(14,14,14,.72) 55%, rgba(14,14,14,.5) 100%); } }
.oh-in { position: relative; width: 100%; }
.oh-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.oh-title { margin-top: 1.2rem; font-size: clamp(2.6rem, .8rem + 6.4vw, 6.6rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.oh-title .serif { color: var(--bronze-light); font-size: 1.08em; text-transform: none; }
.oh-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.oh-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 2. En su pedestal ---------- */
.op { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); }
.op-note { max-width: 22rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.op-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem 2.5rem; }
@media (min-width: 700px) { .op-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .op-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .op-list.is-solo { grid-template-columns: minmax(0, 1fr); } }
.op-card { display: flex; flex-direction: column; align-items: center; height: 100%; color: var(--ink); text-decoration: none; text-align: center; }
.op-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
/* La pieza: foto con forma de arco sobre un pedestal de piedra */
.op-arch { display: block; width: 86%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; box-shadow: 0 26px 40px -26px rgba(0,0,0,.6); }
.op-arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .8s; filter: saturate(.9); }
.op-card:hover .op-arch img { transform: scale(1.06); filter: saturate(1.1); }
.op-base { position: relative; display: flex; justify-content: center; width: 100%; padding: 1.1rem 1rem 1.3rem; background: linear-gradient(var(--stone), var(--stone-dark)); box-shadow: inset 0 6px 0 rgba(255,255,255,.35), 0 18px 26px -18px rgba(0,0,0,.5); }
.op-base::before { content: ''; position: absolute; left: 4%; right: 4%; top: -10px; height: 10px; background: var(--stone); box-shadow: inset 0 3px 0 rgba(255,255,255,.4); }
.op-plaque { display: inline-flex; flex-direction: column; gap: .2rem; padding: .7rem 1.2rem; background: linear-gradient(145deg, var(--bronze-light), var(--bronze) 55%, #7a5524); color: #2a1a06; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 10px -6px rgba(0,0,0,.5); transition: transform .5s var(--ease-out); }
.op-plaque b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.05; }
.op-plaque span { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #3d2a0c; }
.op-card:hover .op-plaque { transform: translateY(-3px); }
.op-body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: .9rem; margin-top: 1.3rem; max-width: 32rem; }
.op-d { font-size: 15px; line-height: 1.65; color: var(--muted); }
.op-go { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; padding-bottom: .15rem; border-bottom: 2px solid var(--brand); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); }
.op-go svg { transition: transform .45s var(--ease-out); }
.op-card:hover .op-go svg { transform: translateX(5px); }
@media (min-width: 900px) {
  .op-list.is-solo .op-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 4rem; align-items: end; text-align: left; }
  .op-list.is-solo .op-arch { grid-column: 1; grid-row: 1; width: 80%; justify-self: center; }
  .op-list.is-solo .op-base { grid-column: 1; grid-row: 2; }
  .op-list.is-solo .op-body { grid-column: 2; grid-row: 1 / 3; align-self: center; align-items: flex-start; margin: 0; }
  .op-list.is-solo .op-d { font-size: 17px; }
}
.op-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- 3. Alturas de Cuba ---------- */
.oa { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--ink-900); color: #fff; scroll-margin-top: var(--hdr-h); overflow: hidden; }
.oa .kicker-light, .oa .h-display .serif { color: var(--bronze-light); }
.oa-note { max-width: 26rem; font-size: 15px; line-height: 1.6; color: #c9c9c9; }
.oa-chart { position: relative; height: clamp(340px, 52vh, 500px); margin: 1rem 0 6rem 3rem; border-bottom: 2px solid rgba(255,255,255,.4); }
.oa-grid span { position: absolute; left: -3rem; right: 0; bottom: calc(var(--m) / var(--max) * 100%); height: 0; border-top: 1px dashed rgba(255,255,255,.12); font-size: 10.5px; font-weight: 700; color: #8a8a8a; line-height: 0; font-variant-numeric: tabular-nums; }
.oa-row { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0 0 0 1rem; display: flex; align-items: flex-end; gap: clamp(.6rem, 2vw, 2rem); }
.oa-item { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.oa-person { flex: 0 0 14px; }
.oa-link { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: calc(var(--m) / var(--max) * 100%); color: #fff; text-decoration: none; }
.oa-link:focus-visible { outline: 2px solid var(--bronze-light); outline-offset: 4px; }
.oa-shape { display: block; width: 62%; height: 100%; background: var(--facade); transform-origin: bottom; transition: transform 1.3s var(--ease-out), filter .3s; transition-delay: calc(var(--i, 0) * 140ms + 200ms); }
.oa-person .oa-shape { width: 8px; height: calc(var(--m) / var(--max) * 100%); min-height: 6px; border-radius: 4px 4px 0 0; background: var(--brand-light); }
/* Rascacielos: rejilla de ventanas */
.oa-shape.is-torre { background: linear-gradient(90deg, transparent 0 18%, rgba(14,14,14,.35) 18% 26%, transparent 26% 46%, rgba(14,14,14,.35) 46% 54%, transparent 54% 74%, rgba(14,14,14,.35) 74% 82%, transparent 82%), repeating-linear-gradient(to bottom, var(--facade) 0 10px, #cfc8b8 10px 12px); }
/* Capitolio: cuerpo y cúpula redondeada */
.oa-shape.is-cupula { width: 50%; border-radius: 50% 50% 0 0 / 22% 22% 0 0; background: linear-gradient(to bottom, var(--bronze-light) 0 8%, var(--facade) 8%); }
/* Bacardí: torre escalonada */
.oa-shape.is-escalonado { width: 80%; clip-path: polygon(40% 0, 60% 0, 60% 12%, 72% 12%, 72% 30%, 86% 30%, 86% 100%, 14% 100%, 14% 30%, 28% 30%, 28% 12%, 40% 12%); background: linear-gradient(to bottom, #b7472f, #e3c5a0 45%, var(--facade)); }
/* Estatua: figura estrecha dorada */
.oa-shape.is-estatua { width: 22%; border-radius: 40% 40% 6px 6px / 14% 14% 6px 6px; background: linear-gradient(to bottom, var(--bronze-light), var(--bronze)); }
.oa-link:hover .oa-shape { filter: brightness(1.15); }
html.js .oa-chart[data-reveal]:not(.is-in) .oa-shape { transform: scaleY(0); }
.oa-label { position: absolute; top: calc(100% + .7rem); left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .15rem; width: max-content; max-width: 9rem; text-align: center; }
.oa-label b { font-size: 12px; font-weight: 800; line-height: 1.2; }
.oa-label span { font-size: 11px; font-weight: 700; color: var(--bronze-light); }
.oa-link:hover .oa-label b { color: var(--bronze-light); }
@media (max-width: 639px) {
  .oa-chart { margin: 1rem 0 7.5rem 2.4rem; }
  .oa-row { gap: .35rem; }
  .oa-label { width: 100%; max-width: none; }
  .oa-label b { font-size: 9.5px; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .oa-label span { font-size: 9.5px; }
}

/* ---------- 4. Sigue descubriendo ---------- */
.ox { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.ox ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 560px) { .ox ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ox ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ox ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ox a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .3s, transform .5s var(--ease-out); }
.ox-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); }
.ox-txt { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.ox-n { font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.ox-c { font-size: 12px; color: var(--muted); }
.ox a > svg { color: var(--brand); transition: transform .45s var(--ease-out); }
.ox a:hover { border-color: var(--ink); transform: translateY(-3px); }
.ox a:hover .ox-ico { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.ox a:hover > svg { transform: translateX(5px); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .oh-sun { animation: none; }
  .op-arch img, .op-plaque, .oa-shape, .ox a { transition: none; }
  html.js .oa-chart[data-reveal]:not(.is-in) .oa-shape { transform: none; }
}

/* ---------- Archivo (views/_cat_archivo.php): placas de bronce ---------- */
.arc.is-monumentos { --arc-accent: var(--bronze); --arc-t-font: var(--serif); --arc-t-style: italic; --arc-t-weight: 400; --arc-t-size: 1.15rem; }
.arc.is-monumentos .arc-img { border-radius: 999px 999px 0 0; }
.arc.is-monumentos .arc-n { background: linear-gradient(145deg, var(--bronze-light), var(--bronze) 55%, #7a5524); color: #2a1a06; }