/* Cuba Despierta · De 1492 a 1867 (views/colonia.php). Se carga solo en /historia/1492-1867.
   Paleta de site.css más el pergamino oscuro y la tinta dorada de la carta náutica, el papel de los folios y el lacre.
   Animaciones comunes de redesign.css (fadeup, lineup, data-reveal). La carabela navega con SVG (animateMotion). */
.wz { --gold: #c9a24c; --gold-light: #e6c97a; --parch: #f2e8d2; --parch-dark: #e2d3b2; --ink-old: #2b2118; --wax: #8e1c1c; }

/* ---------- 1. Cabecera: la carta náutica ---------- */
.wh { 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 70% 80% at 75% 45%, #3a2a1a, transparent 70%), radial-gradient(circle at 10% 90%, #2a1d12, transparent 60%), #160f0a; }
.wh::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(22,15,10,.92) 0%, rgba(22,15,10,.7) 38%, rgba(22,15,10,0) 70%); }
@media (max-width: 767px) { .wh::before { background: linear-gradient(to top, rgba(22,15,10,.96) 0%, rgba(22,15,10,.75) 55%, rgba(22,15,10,.35) 100%); } }
.wh-chart { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.wh-rumbos { fill: none; stroke: var(--gold); stroke-width: .8; opacity: .3; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
html.js .wh-rumbos { animation: wz-draw 2.6s ease-in-out .3s both; }
@keyframes wz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.wh-rose { transform-box: fill-box; transform-origin: center; }
html.js .wh-rose { animation: wz-rose 2.4s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes wz-rose { from { rotate: -140deg; scale: .55; opacity: 0; } to { rotate: 0deg; scale: 1; opacity: 1; } }
.wh-rose circle { fill: none; stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wh-rose polygon { fill: var(--gold); stroke: var(--gold-light); stroke-width: .8; vector-effect: non-scaling-stroke; }
.wh-rose polygon.is-minor { fill: rgba(201,162,76,.25); }
.wh-rose text { fill: var(--gold-light); font-family: var(--serif); font-style: italic; font-size: 34px; text-anchor: middle; }
.wh-cuba { opacity: 1; }
html.js .wh-cuba { animation: wz-in 1.6s ease 1.4s both; }
.wh-ruta { fill: none; stroke: var(--gold-light); stroke-width: 1.6; stroke-dasharray: 3 9; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; }
html.js .wh-ruta { animation: wz-in 1.2s ease 1s both; }
@keyframes wz-in { from { opacity: 0; } }
.wh-ship path { fill: #e9d9b0; stroke: #2b2118; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wh-ship .is-sail { fill: #f7ecd2; }
.wh-in { position: relative; width: 100%; }
.wh-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.wh-num { font-family: var(--serif); font-style: italic; font-size: 1.6rem; letter-spacing: 0; color: var(--gold-light); }
.wh-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; }
.wh-title .serif { color: var(--gold-light); font-size: 1.06em; text-transform: none; }
.wh-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e6dccb; }
.wh-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 2. Folios con sello de lacre ---------- */
.wf { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); overflow-x: clip; }
.wf-note { max-width: 24rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.wf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4rem, 3rem + 3vw, 6rem); }
.wf-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
@media (min-width: 900px) {
  .wf-item { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
  .wf-item:nth-child(even) .wf-doc { order: 2; }
}
/* El folio: papel con pliegue central y bordes gastados */
.wf-doc { position: relative; display: flex; flex-direction: column; gap: .9rem; width: 100%; max-width: 460px; margin-inline: auto; padding: 1.6rem 1.6rem 2.2rem; color: var(--ink-old); text-decoration: none;
  background: linear-gradient(90deg, transparent 49.6%, rgba(90,60,20,.12) 50%, transparent 50.4%), radial-gradient(circle at 85% 12%, rgba(120,80,30,.12) 0 14%, transparent 34%), linear-gradient(var(--parch), var(--parch-dark));
  box-shadow: 0 30px 44px -30px rgba(0,0,0,.6), inset 0 0 36px rgba(120,80,30,.16); rotate: -1deg; transition: rotate .6s var(--ease-out), translate .6s var(--ease-out); }
.wf-item:nth-child(even) .wf-doc { rotate: 1deg; }
.wf-doc:hover { rotate: 0deg; translate: 0 -5px; }
.wf-doc:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.wf-head { display: flex; justify-content: space-between; padding-bottom: .5rem; border-bottom: 1px solid rgba(43,33,24,.45); font-family: var(--serif); font-style: italic; font-size: 15px; }
.wf-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(43,33,24,.5); }
.wf-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.5) contrast(1.05); transition: filter .8s, transform 1.4s var(--ease-out); }
.wf-doc:hover .wf-img img { filter: sepia(.15); transform: scale(1.04); }
.wf-t { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
/* El sello de lacre: gota irregular con iniciales, cae al aparecer el folio */
.wf-seal { position: absolute; right: -14px; bottom: -18px; display: flex; align-items: center; justify-content: center; width: 78px; height: 74px; border-radius: 52% 48% 46% 54% / 50% 56% 44% 50%; background: radial-gradient(circle at 35% 30%, #c0392b, var(--wax) 55%, #5a0f0f); box-shadow: 0 8px 14px -6px rgba(0,0,0,.6), inset 0 -4px 8px rgba(0,0,0,.35); transition: transform .5s cubic-bezier(.2,1.6,.4,1) .7s, opacity .3s ease .7s; }
@media (max-width: 520px) { .wf-seal { right: -6px; } }
.wf-seal span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,220,200,.35); font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: rgba(255,225,210,.85); text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
html.js .wf-item[data-reveal]:not(.is-in) .wf-seal { transform: scale(2) rotate(-25deg); opacity: 0; }
.wf-body { display: flex; flex-direction: column; gap: 1.1rem; max-width: 36rem; }
.wf-h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.wf-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); }
.wf-h a:hover { background-size: 100% 2px; }
.wf-d { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.wf-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); }
.wf-pts li { position: relative; padding-left: 1.5rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.wf-pts li::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--wax); }
.wf-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; }
.wf-go svg { transition: transform .45s var(--ease-out); }
.wf-go:hover svg { transform: translateX(5px); }
.wf-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- Archivo (views/_cat_archivo.php): folios pequeños ---------- */
.arc.is-colonia { --arc-card: var(--parch); --arc-ink: var(--ink-old); --arc-line: var(--parch-dark); --arc-accent: var(--wax); --arc-rot: -1deg; --arc-img-filter: sepia(.5); --arc-t-font: var(--serif); --arc-t-style: italic; --arc-t-weight: 400; --arc-t-size: 1.15rem; }

/* ---------- 3. Bitácora ---------- */
.wb { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: #ebe2cf; scroll-margin-top: var(--hdr-h); }
.wb-book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (min-width: 1000px) { .wb-book { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.wb-siglo { padding: 1.4rem 1.4rem 1.2rem; background: var(--parch); border-left: 3px double rgba(142,28,28,.5); box-shadow: 0 20px 30px -24px rgba(0,0,0,.45); }
.wb-h { display: flex; flex-direction: column; gap: .15rem; padding-bottom: .8rem; margin-bottom: .4rem; border-bottom: 2px solid var(--ink-old); }
.wb-h b { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-old); }
.wb-h span { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--wax); }
.wb-siglo ol { list-style: none; margin: 0; padding: 0; }
/* Cada asiento se «escribe» de izquierda a derecha, uno tras otro */
.wb-siglo li { clip-path: inset(0); transition: clip-path .9s cubic-bezier(.5,0,.3,1); transition-delay: calc(.2s + var(--n) * 90ms); }
html.js .wb-siglo[data-reveal]:not(.is-in) li { clip-path: inset(0 100% 0 0); }
.wb-siglo a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); grid-template-areas: 'y f' 'y t'; column-gap: .6rem; padding: .55rem 0; color: var(--ink-old); text-decoration: none; border-bottom: 1px dotted rgba(43,33,24,.25); }
.wb-y { grid-area: y; font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.2; color: var(--wax); }
.wb-f { grid-area: f; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7a6a55; }
.wb-t { grid-area: t; font-size: 14.5px; line-height: 1.45; }
.wb-siglo a:hover .wb-t { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.wb-siglo a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wb-more { margin-top: 2.4rem; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .wh-rumbos, html.js .wh-rose, html.js .wh-cuba, html.js .wh-ruta { animation: none; }
  .wh-ship { display: none; }
  .wf-doc, .wf-img img, .wf-seal, .wb-siglo li { transition: none; }
  html.js .wf-item[data-reveal]:not(.is-in) .wf-seal { transform: none; opacity: 1; }
  html.js .wb-siglo[data-reveal]:not(.is-in) li { clip-path: none; }
}