/* Cuba Despierta · Guerras de independencia (views/independencia.php). Se carga solo en /historia/independencia.
   Paleta de site.css más el papel de las proclamas, la cuerda de la mecha y su brasa.
   Animaciones comunes de redesign.css (kenburns, fadeup, lineup, data-reveal). Sin JS propio. */
.ez { --paper: #efe4c8; --paper-dark: #dccba3; --ink-old: #2a2118; --rope: #b89a6a; --ember: #ff8a3d; }

/* ---------- 1. Cabecera: contador de años y mecha ---------- */
@property --yr { syntax: '<integer>'; inherits: false; initial-value: 1898; }
@property --fuse { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
.eh { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 4rem) 0 7rem; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.eh-media { position: absolute; inset: 0; z-index: -2; }
.eh-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform-origin: 50% 35%; filter: sepia(.35) contrast(1.05); }
html.js .eh-media img { animation: kenburns 26s var(--ease-out) both, hx-drift 46s ease-in-out 26s infinite alternate; }
.eh::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,14,14,.94) 0%, rgba(14,14,14,.72) 45%, rgba(14,14,14,.3) 85%), linear-gradient(to top, rgba(14,14,14,.92) 0%, rgba(14,14,14,0) 50%); }
@media (max-width: 767px) { .eh::before { background: linear-gradient(to top, rgba(14,14,14,.96) 0%, rgba(14,14,14,.74) 55%, rgba(14,14,14,.5) 100%); } }
.eh-in { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: end; }
@media (min-width: 1024px) { .eh-in { grid-template-columns: minmax(0, 1fr) auto; } }
.eh-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.eh-num { font-family: var(--serif); font-style: italic; font-size: 1.6rem; letter-spacing: 0; color: var(--brand-light); }
.eh-title { margin-top: 1.2rem; font-size: clamp(2.3rem, .5rem + 6vw, 6.2rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.eh-title .serif { color: var(--brand-light); font-size: 1.06em; text-transform: none; }
.eh-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.eh-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
/* El contador: de 1868 a 1898 mientras arde la mecha */
.eh-years { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
@media (min-width: 1024px) { .eh-years { align-items: flex-end; text-align: right; } }
.eh-from { font-size: 12px; font-weight: 800; letter-spacing: .22em; color: #bdbdbd; }
.eh-from::after { content: ' →'; color: var(--brand-light); }
.eh-count { font-size: clamp(4rem, 2rem + 8vw, 9rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 2px #fff; }
.eh-count::after { counter-reset: yr var(--yr); content: counter(yr); }
html.js .eh-count { animation: ez-years 3.2s cubic-bezier(.25,.1,.25,1) .7s both; }
@keyframes ez-years { from { --yr: 1868; } to { --yr: 1898; } }
.eh-cap { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--brand-light); }
/* La mecha: cuerda trenzada que se quema de izquierda a derecha con una brasa en la punta */
.eh-fuse { position: absolute; left: 0; right: 0; bottom: 2.2rem; height: 4px; margin-inline: clamp(1rem, 4vw, 3rem); background: repeating-linear-gradient(90deg, var(--rope) 0 7px, #8c7350 7px 9px); border-radius: 2px; }
html.js .eh-fuse { animation: ez-fuse 3.2s cubic-bezier(.25,.1,.25,1) .7s both; }
@keyframes ez-fuse { from { --fuse: 0%; } to { --fuse: 100%; } }
.eh-burn { position: absolute; left: 0; top: -1px; bottom: -1px; width: var(--fuse); background: linear-gradient(90deg, #2a1d14, #4a2a1a 80%, var(--brand)); border-radius: 2px; }
.eh-spark { position: absolute; top: 50%; left: var(--fuse); width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff3c4 0 20%, var(--ember) 45%, transparent 70%); box-shadow: 0 0 18px 6px rgba(255,138,61,.55); }
html.js .eh-spark { animation: ez-spark .18s steps(2, jump-none) infinite; }
@keyframes ez-spark { 50% { scale: 1.35; opacity: .8; } }
.eh-y0, .eh-y1 { position: absolute; top: 12px; font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #9a9a9a; }
.eh-y0 { left: 0; } .eh-y1 { right: 0; }

/* ---------- 2. Proclamas ---------- */
.ep { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); overflow-x: clip; }
.ep-note { max-width: 24rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4rem, 3rem + 3vw, 6rem); }
.ep-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
@media (min-width: 900px) {
  .ep-item { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
  .ep-item:nth-child(even) .ep-sheet { order: 2; }
}
/* El pliego: papel envejecido, clavos arriba, encabezado tipográfico de proclama */
.ep-sheet { position: relative; display: flex; flex-direction: column; align-items: center; gap: .8rem; width: 100%; max-width: 460px; margin-inline: auto; padding: 1.8rem 1.6rem 1.6rem; color: var(--ink-old); text-align: center; text-decoration: none;
  background: radial-gradient(circle at 12% 18%, rgba(120,90,40,.12) 0 18%, transparent 40%), radial-gradient(circle at 88% 82%, rgba(120,90,40,.14) 0 16%, transparent 38%), linear-gradient(var(--paper), var(--paper-dark));
  box-shadow: 0 30px 44px -30px rgba(0,0,0,.6), inset 0 0 40px rgba(120,90,40,.18); rotate: -1.2deg; transform-origin: top center; clip-path: inset(0); transition: clip-path 1.4s cubic-bezier(.6,.05,.3,1) .3s, rotate .6s var(--ease-out), translate .6s var(--ease-out); }
.ep-item:nth-child(even) .ep-sheet { rotate: 1.2deg; }
html.js .ep-item[data-reveal]:not(.is-in) .ep-sheet { clip-path: inset(0 0 100% 0); }
.ep-sheet:hover { rotate: 0deg; translate: 0 -5px; }
.ep-sheet:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.ep-nail { position: absolute; top: .7rem; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8d8d8, #6f6f6f 60%, #3a3a3a); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.ep-nail.is-l { left: .8rem; } .ep-nail.is-r { right: .8rem; }
.ep-head { display: flex; justify-content: space-between; width: 100%; padding-bottom: .5rem; border-bottom: 2px solid var(--ink-old); font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.ep-cubanos { font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.ep-img { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--ink-old); }
.ep-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.55) contrast(1.05); transition: filter .8s, transform 1.4s var(--ease-out); }
.ep-sheet:hover .ep-img img { filter: sepia(.15); transform: scale(1.04); }
.ep-t { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; }
.ep-sign { padding-top: .5rem; border-top: 1px solid rgba(42,33,24,.4); font-family: var(--serif); font-style: italic; font-size: 14px; }
.ep-body { display: flex; flex-direction: column; gap: 1.1rem; max-width: 36rem; }
.ep-h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ep-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); }
.ep-h a:hover { background-size: 100% 2px; }
.ep-d { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.ep-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); }
.ep-pts li { position: relative; padding-left: 1.5rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ep-pts li::before { content: '★'; position: absolute; left: 0; top: 0; font-size: 12px; color: var(--brand); }
.ep-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; }
.ep-go svg { transition: transform .45s var(--ease-out); }
.ep-go:hover svg { transform: translateX(5px); }
.ep-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- Archivo (views/_cat_archivo.php): pliegos pequeños ---------- */
.arc.is-independencia { --arc-card: var(--paper); --arc-ink: var(--ink-old); --arc-rot: -1deg; --arc-img-filter: sepia(.5); --arc-line: var(--paper-dark); }

/* ---------- 3. Treinta años de lucha ---------- */
.el { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--ink-900); color: #fff; scroll-margin-top: var(--hdr-h); }
.el .kicker-light, .el .h-display .serif { color: var(--brand-light); }
.el-note { max-width: 26rem; font-size: 15px; line-height: 1.6; color: #c9c9c9; }
.el-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem 1.6rem; }
@media (min-width: 700px) { .el-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .el-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); } .el-st { min-height: 5.2rem; justify-content: flex-end; } }
.el-st { display: flex; flex-direction: column; gap: .2rem; padding-bottom: .9rem; border-bottom: 3px solid var(--brand); }
.el-st b { font-size: 15px; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.el-st span { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--brand-light); }
.el-hitos { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; }
.el-hitos::before { content: ''; position: absolute; left: 5px; top: .6rem; bottom: .6rem; width: 1px; background: rgba(255,255,255,.18); }
.el-hitos li { transition: opacity .5s ease, transform .6s var(--ease-out); transition-delay: calc(.2s + var(--n) * 45ms); }
html.js .el-stage[data-reveal]:not(.is-in) .el-hitos li { opacity: 0; transform: translateX(-10px); }
.el-hitos a { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .7rem 0 .7rem 1.4rem; color: #fff; text-decoration: none; }
.el-hitos a::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 11px; height: 11px; border-radius: 50%; background: var(--ink-900); border: 2px solid var(--brand); transition: background-color .3s, scale .3s var(--ease-out); }
.el-f { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.el-t { font-size: 14px; line-height: 1.4; }
.el-hitos a:hover .el-t { color: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }
.el-hitos a:hover::before { background: var(--brand); scale: 1.2; }
.el-hitos a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.el-more { margin-top: 2.6rem; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .eh-count, html.js .eh-fuse, html.js .eh-spark { animation: none; }
  .ep-sheet, .ep-img img, .el-hitos li { transition: none; }
  html.js .ep-item[data-reveal]:not(.is-in) .ep-sheet { clip-path: inset(0); }
  html.js .el-stage[data-reveal]:not(.is-in) .el-hitos li { opacity: 1; transform: none; }
}