/* Cuba Despierta · República 1902–1958 (views/republica.php). Se carga solo en /historia/republica-1902-1958.
   Paleta de site.css más el oro viejo y el latón del art déco habanero (Bacardí, López Serrano, el Capitolio).
   Animaciones comunes de redesign.css (fadeup, lineup, data-reveal). El dial del ascensor lo mueve js/republica.js. */
.yz { --gold: #c9a24c; --gold-light: #e8cd86; --brass: #b08a45; --deco-ink: #12100e; --cream: #f1ebdf; }

/* ---------- 1. Cabecera: abanico y rascacielos ---------- */
.yh { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 4rem) 0 5rem; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 70% at 75% 100%, #2a1a12, transparent 70%), var(--deco-ink); }
.yh::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(18,16,14,.95) 0%, rgba(18,16,14,.75) 36%, rgba(18,16,14,0) 66%); }
@media (max-width: 767px) { .yh::before { background: linear-gradient(to top, rgba(18,16,14,.97) 0%, rgba(18,16,14,.8) 55%, rgba(18,16,14,.35) 100%); } }
/* El abanico: rayos alternos de oro y rojo que se despliegan desde el pie del rascacielos y giran muy despacio */
.yh-sun { position: absolute; z-index: -3; left: 75%; bottom: 0; width: min(1500px, 190vw); aspect-ratio: 1; translate: -50% 50%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(201,162,76,.2) 0 2.5deg, transparent 2.5deg 7.5deg, rgba(220,52,35,.14) 7.5deg 10deg, transparent 10deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 12%, rgba(0,0,0,.6) 36%, transparent 68%); mask: radial-gradient(circle, #000 12%, rgba(0,0,0,.6) 36%, transparent 68%); }
html.js .yh-sun { animation: yz-fan 2.4s cubic-bezier(.2,.8,.2,1) .1s both, yz-spin 160s linear 2.5s infinite; }
@keyframes yz-fan { from { scale: .2; rotate: -60deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes yz-spin { to { rotate: 360deg; } }
@media (max-width: 767px) { .yh-sun { left: 70%; } }
.yh-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
/* En móvil el dibujo ocupa la mitad alta de la cabecera, para que el rascacielos quepa entero sobre el texto */
@media (max-width: 767px) { .yh-art { inset: var(--hdr-h) 0 auto; height: 52%; } }
.yh-arc, .yh-tower, .yh-ribs { fill: none; stroke: var(--gold); vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.yh-arc { stroke-width: 1; opacity: .45; }
.yh-arc.is-2 { opacity: .3; } .yh-arc.is-3 { opacity: .18; }
.yh-tower { stroke: var(--gold-light); stroke-width: 1.6; fill: rgba(18,16,14,.55); }
.yh-ribs { stroke-width: .8; opacity: .55; }
html.js .yh-arc { animation: yz-draw 1.8s ease-in-out .3s both; }
html.js .yh-arc.is-2 { animation-delay: .5s; } html.js .yh-arc.is-3 { animation-delay: .7s; }
html.js .yh-tower { animation: yz-draw 2.8s cubic-bezier(.6,0,.3,1) .6s both, yz-fill 1.2s ease 2.8s both; }
html.js .yh-ribs { animation: yz-draw 2s ease-in-out 1.8s both; }
@keyframes yz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes yz-fill { from { fill: rgba(18,16,14,0); } }
.yh-in { position: relative; width: 100%; }
.yh-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.yh-num { font-family: var(--serif); font-style: italic; font-size: 1.6rem; letter-spacing: 0; color: var(--gold-light); }
.yh-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; }
.yh-title .serif { color: var(--gold-light); font-size: 1.06em; text-transform: none; letter-spacing: -.02em; }
/* Tres filetes art déco de largo decreciente que se tienden bajo el título */
.yh-rule { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 5px; }
.yh-rule i { display: block; height: 2px; background: var(--gold); transform-origin: left; }
.yh-rule i:nth-child(1) { width: 160px; } .yh-rule i:nth-child(2) { width: 112px; background: var(--brand); } .yh-rule i:nth-child(3) { width: 64px; }
html.js .yh-rule i { animation: yz-rule 1s var(--ease-out) both; animation-delay: calc(.9s + var(--i, 0) * .15s); }
.yh-rule i:nth-child(2) { --i: 1; } .yh-rule i:nth-child(3) { --i: 2; }
@keyframes yz-rule { from { transform: scaleX(0); } }
.yh-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e4ddd2; }
.yh-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 2. Carteles con marco dorado ---------- */
.yc { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); overflow-x: clip; }
.yc-note { max-width: 24rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.yc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4rem, 3rem + 3vw, 6rem); }
.yc-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
@media (min-width: 900px) {
  .yc-item { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
  .yc-item:nth-child(even) .yc-poster { order: 2; }
}
/* El cartel: fondo negro, esquinas achaflanadas y doble filete dorado que se dibuja al aparecer */
.yc-poster { --cut: 18px; position: relative; display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 440px; margin-inline: auto; padding: 1.7rem 1.7rem 1.5rem; color: #fff; text-decoration: none; background: var(--deco-ink);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: translate .6s var(--ease-out); }
.yc-poster::before, .yc-poster::after { content: ''; position: absolute; pointer-events: none; border: 1px solid var(--gold); clip-path: inset(0); transition: clip-path 1.1s cubic-bezier(.6,0,.3,1) .2s; }
.yc-poster::before { inset: 8px; }
.yc-poster::after { inset: 13px; border-color: rgba(201,162,76,.45); transition-delay: .4s; }
html.js .yc-item[data-reveal]:not(.is-in) .yc-poster::before { clip-path: inset(0 50% 100% 50%); }
html.js .yc-item[data-reveal]:not(.is-in) .yc-poster::after { clip-path: inset(100% 50% 0 50%); }
.yc-poster:hover { translate: 0 -5px; }
.yc-poster:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.yc-head { position: relative; display: flex; justify-content: space-between; gap: 1rem; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); }
.yc-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 50% 50% 0 0 / 22% 22% 0 0; clip-path: inset(0); transition: clip-path 1.2s cubic-bezier(.6,0,.3,1) .3s; }
html.js .yc-item[data-reveal]:not(.is-in) .yc-img { clip-path: inset(100% 0 0 0); }
.yc-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); transition: filter .8s, transform 1.4s var(--ease-out); }
.yc-poster:hover .yc-img img { filter: none; transform: scale(1.04); }
/* Rayos art déco sobre la foto, que se abren desde el pie del arco */
.yc-rays { position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(232,205,134,.22) 0 1.5deg, transparent 1.5deg 9deg); mix-blend-mode: screen;
  -webkit-mask: linear-gradient(to top, #000 0%, transparent 85%); mask: linear-gradient(to top, #000 0%, transparent 85%); transition: opacity .6s; }
.yc-poster:hover .yc-rays { opacity: 0; }
.yc-t { position: relative; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--gold-light); text-align: center; }
.yc-foot { position: relative; align-self: center; padding-top: .6rem; border-top: 1px solid rgba(201,162,76,.5); font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #a89d8c; }
.yc-body { display: flex; flex-direction: column; gap: 1.1rem; max-width: 36rem; }
.yc-h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.yc-h a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease-out); }
.yc-h a:hover { background-size: 100% 2px; }
.yc-d { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.yc-pts { list-style: none; margin: .2rem 0 0; padding: 1rem 0 0; display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid var(--line); }
.yc-pts li { position: relative; padding-left: 1.5rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.yc-pts li::before { content: ''; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--gold); rotate: 45deg; }
.yc-go { margin-top: .4rem; align-self: flex-start; 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); text-decoration: none; }
.yc-go svg { transition: transform .45s var(--ease-out); }
.yc-go:hover svg { transform: translateX(5px); }
.yc-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- Archivo (views/_cat_archivo.php): carteles pequeños ---------- */
.arc.is-republica { --arc-card: var(--deco-ink); --arc-ink: #fff; --arc-muted: #b8ad9c; --arc-line: var(--gold); --arc-accent: var(--gold-light); --arc-img-filter: grayscale(.35); --arc-t-font: var(--serif); --arc-t-style: italic; --arc-t-weight: 400; --arc-t-size: 1.2rem; }
.arc.is-republica .arc-card { outline: 1px solid rgba(201,162,76,.5); outline-offset: -6px; }

/* ---------- 3. Piso a piso: el ascensor ---------- */
.ya { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--cream); scroll-margin-top: var(--hdr-h); }
.ya-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1000px) { .ya-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 4rem; align-items: start; } }
/* El dial de latón: fijo al bajar en escritorio; la aguja gira hasta la planta visible (--p de 0 a --max) */
.ya-dial { display: none; }
@media (min-width: 1000px) { .ya-dial { position: sticky; top: calc(var(--hdr-h) + 2rem); display: block; padding: 1.4rem 1.2rem 1.2rem; background: var(--deco-ink); border: 1px solid var(--brass); border-radius: 120px 120px 6px 6px; box-shadow: inset 0 0 0 5px var(--deco-ink), inset 0 0 0 6px rgba(201,162,76,.45), 0 24px 40px -26px rgba(0,0,0,.6); } }
.ya-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.ya-arc { fill: none; stroke: var(--brass); stroke-width: 2; }
.ya-dial line { stroke: var(--gold-light); stroke-width: 2; }
.ya-dial text { fill: var(--gold-light); font-family: var(--serif); font-style: italic; font-size: 15px; text-anchor: middle; }
.ya-dial .ya-needle { stroke: var(--brand-light); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 110px 112px; rotate: calc(-90deg + var(--p) * 180deg / var(--max)); transition: rotate .9s cubic-bezier(.3,1.5,.5,1); }
.ya-hub { fill: var(--brass); stroke: var(--gold-light); stroke-width: 1.5; }
.ya-now { margin-top: .8rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; color: #fff; }
.ya-now b { font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); }
.ya-now span { font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.25; }
.ya-pisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.4rem; }
.ya-piso { scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.ya-h { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 2px solid var(--deco-ink); }
.ya-num { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--brass); font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--deco-ink); background: #fff; transition: background-color .4s, color .4s; }
.ya-piso.is-active .ya-num { background: var(--brand); border-color: var(--brand); color: #fff; }
.ya-h b { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; color: var(--deco-ink); }
.ya-y { margin-left: auto; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--brand-dark); }
/* Las puertas de latón del ascensor se abren al llegar a la planta */
.ya-hall { position: relative; overflow: hidden; }
.ya-hall::before, .ya-hall::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 50.5%; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 14px), linear-gradient(90deg, #8d6d33, #d8b874 45%, #a5823f); transition: translate 1.1s cubic-bezier(.7,0,.25,1) .25s; }
.ya-hall::before { left: 0; translate: -101% 0; }
.ya-hall::after { right: 0; translate: 101% 0; }
html.js .ya-piso[data-reveal]:not(.is-in) .ya-hall::before, html.js .ya-piso[data-reveal]:not(.is-in) .ya-hall::after { translate: 0 0; }
.ya-hall ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ya-hall ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.ya-hall a { display: flex; flex-direction: column; gap: .2rem; padding: .75rem 0; color: var(--deco-ink); text-decoration: none; border-bottom: 1px solid rgba(18,16,14,.14); }
.ya-f { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #7d6d55; }
.ya-t { font-size: 15px; line-height: 1.45; }
.ya-hall a:hover .ya-t { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.ya-hall a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ya-more { margin-top: 2.6rem; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .yh-sun, html.js .yh-arc, html.js .yh-tower, html.js .yh-ribs, html.js .yh-rule i { animation: none; }
  .yc-poster, .yc-poster::before, .yc-poster::after, .yc-img, .yc-img img, .ya-dial .ya-needle, .ya-hall::before, .ya-hall::after { transition: none; }
  html.js .yc-item[data-reveal]:not(.is-in) .yc-poster::before, html.js .yc-item[data-reveal]:not(.is-in) .yc-poster::after, html.js .yc-item[data-reveal]:not(.is-in) .yc-img { clip-path: none; }
  html.js .ya-piso[data-reveal]:not(.is-in) .ya-hall::before { translate: -101% 0; }
  html.js .ya-piso[data-reveal]:not(.is-in) .ya-hall::after { translate: 101% 0; }
}