/* Cuba Despierta · Fotografías históricas (views/fotos.php). Se carga solo en /descubre-cuba/fotografias-historicas.
   Paleta de site.css más la luz roja de seguridad del cuarto oscuro, el papel fotográfico y la película.
   Animaciones comunes de redesign.css (kenburns, fadeup, lineup, data-reveal). Sin JS propio. */
.fz { --safelight: #7a0f0a; --print: #fbf8f1; --card: #fffdf6; --card-line: #cfe0ef; --film: #141110; --hole: #e9e2d2;
      --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Courier New', monospace; }

/* ---------- 1. Cabecera: flash y revelado ---------- */
.fh { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 4rem) 0 5rem; background: #0c0606; color: #fff; overflow: hidden; isolation: isolate; }
.fh-media { position: absolute; inset: 0; z-index: -3; }
.fh-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; transform-origin: 55% 45%; filter: sepia(.35) contrast(1.05); }
/* La imagen aparece en el papel: de blanco quemado a la copia final */
html.js .fh-media img { animation: fz-develop 4.2s cubic-bezier(.3,.1,.3,1) .45s both, kenburns 26s var(--ease-out) both, hx-drift 46s ease-in-out 26s infinite alternate; }
@keyframes fz-develop { from { filter: grayscale(1) brightness(3.2) contrast(.12); } 60% { filter: grayscale(.6) brightness(1.3) contrast(.7) sepia(.2); } to { filter: sepia(.35) contrast(1.05); } }
/* Luz roja de seguridad y oscuridad para el texto */
.fh::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 70% 60% at 85% 10%, rgba(200,30,20,.35), transparent 65%), linear-gradient(90deg, rgba(12,6,6,.95) 0%, rgba(12,6,6,.72) 45%, rgba(12,6,6,.2) 85%), linear-gradient(to top, rgba(12,6,6,.9) 0%, rgba(12,6,6,0) 50%); }
@media (max-width: 767px) { .fh::before { background: radial-gradient(ellipse 90% 50% at 80% 0%, rgba(200,30,20,.35), transparent 65%), linear-gradient(to top, rgba(12,6,6,.96) 0%, rgba(12,6,6,.74) 55%, rgba(12,6,6,.5) 100%); } }
.fh-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
html.js .fh-flash { animation: fz-flash .9s ease-out .25s both; }
@keyframes fz-flash { 0% { opacity: 0; } 12% { opacity: .92; } 100% { opacity: 0; } }
.fh-in { position: relative; width: 100%; }
.fh-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.fh-rec { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px #ff3b30; }
html.js .fh-rec { animation: fz-blink 1.6s steps(2, jump-none) infinite; }
@keyframes fz-blink { 50% { opacity: .2; } }
.fh-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; }
.fh-title .serif { color: #ff9a8a; font-size: 1.08em; text-transform: none; }
.fh-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e6dcdc; }
.fh-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 2. Colgadas a secar ---------- */
.fp { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); overflow-x: clip; }
.fp-note { max-width: 22rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.fp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4rem, 3rem + 3vw, 6rem); }
.fp-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 900px) {
  .fp-item { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
  .fp-item:nth-child(even) .fp-hang { order: 2; }
}
.fp-hang { position: relative; padding-top: 34px; }
/* El hilo, con su leve comba */
.fp-wire { position: absolute; top: 0; left: -3rem; right: -3rem; height: 40px; border-bottom: 2px solid #5b524a; border-radius: 0 0 50% 50% / 0 0 26px 26px; }
.fp-print { position: relative; display: block; width: 86%; max-width: 420px; margin-inline: auto; padding: 14px 14px 18px; background: var(--print); color: var(--ink); text-decoration: none; box-shadow: 0 26px 36px -26px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.05); transform-origin: 50% -14px; }
html.js .fp-print { animation: fz-sway 6s ease-in-out infinite alternate; }
@keyframes fz-sway { from { transform: rotate(calc(var(--sw) * 1.6deg)); } to { transform: rotate(calc(var(--sw) * -1.2deg)); } }
.fp-print:hover { animation-play-state: paused; }
.fp-print:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
/* La pinza de madera */
.fp-pin { position: absolute; top: -26px; left: 50%; z-index: 1; width: 16px; height: 44px; translate: -50% 0; border-radius: 3px; background: linear-gradient(90deg, #c49a64 0 46%, #8a6638 46% 54%, #c49a64 54%); box-shadow: 0 4px 6px -2px rgba(0,0,0,.4); }
.fp-pin::after { content: ''; position: absolute; left: -3px; right: -3px; top: 16px; height: 5px; border-radius: 2px; background: #9aa0a6; }
.fp-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.fp-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) contrast(1.05); transition: filter 3.2s cubic-bezier(.3,.1,.3,1) .5s, transform 1.4s var(--ease-out); }
html.js .fp-item[data-reveal]:not(.is-in) .fp-img img { filter: grayscale(1) brightness(3) contrast(.12); }
.fp-print:hover .fp-img img { transform: scale(1.05); filter: sepia(.1) contrast(1.08); transition-delay: 0s; transition-duration: 1.4s, 1.4s; }
.fp-cap { display: block; margin-top: .8rem; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.35; color: #4a443d; }
.fp-body { display: flex; flex-direction: column; gap: 1.1rem; max-width: 36rem; }
/* Ficha de archivo: cartulina rayada con renglón rojo */
.fp-card { margin: 0 0 .5rem; padding: .9rem 1.1rem .7rem; background: var(--card) repeating-linear-gradient(to bottom, transparent 0 29px, var(--card-line) 29px 30px); background-position: 0 6px; border-top: 3px solid #d0453c; box-shadow: 0 14px 24px -18px rgba(0,0,0,.45); font-family: var(--mono); rotate: -.6deg; }
.fp-card > div { display: flex; gap: .8rem; align-items: baseline; min-height: 30px; }
.fp-card dt { flex: none; width: 5.5rem; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8a8072; }
.fp-card dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fp-t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.fp-t 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); }
.fp-t a:hover { background-size: 100% 2px; }
.fp-d { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.fp-pts { list-style: none; margin: .2rem 0 0; padding: 1.1rem 0 0; display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid var(--line); }
.fp-pts li { position: relative; padding-left: 1.7rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.fp-pts li::before { content: ''; position: absolute; left: 0; top: .3em; width: 14px; height: 11px; border: 2px solid var(--ink); border-radius: 2px; }
.fp-pts li::after { content: ''; position: absolute; left: 4px; top: calc(.3em + 3px); width: 6px; height: 5px; border-radius: 50%; background: var(--brand); }
.fp-pts strong { color: var(--ink); }
.fp-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; }
.fp-go svg { transition: transform .45s var(--ease-out); }
.fp-go:hover svg { transform: translateX(5px); }
.fp-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- 2b. El tendedero: copias pequeñas ---------- */
.fa { padding-block: 0 clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); overflow-x: clip; }
.fh + .fa { padding-top: clamp(4rem, 3rem + 4vw, 7rem); }
.fa-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.4rem 1.8rem; }
@media (min-width: 560px) { .fa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fa-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fa-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Cada fila lleva su hilo: un trazo en la parte de arriba de cada copia que se une con el de la vecina */
.fa-item { position: relative; padding-top: 30px; }
.fa-item::before { content: ''; position: absolute; top: 8px; left: -1rem; right: -1rem; height: 2px; background: #5b524a; }
.fa-print { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 10px 10px 14px; background: var(--print); color: var(--ink); text-decoration: none; box-shadow: 0 20px 28px -22px rgba(0,0,0,.55); transform-origin: 50% -14px; }
html.js .fa-print { animation: fz-sway 7s ease-in-out infinite alternate; }
.fa-print:hover { animation-play-state: paused; }
.fa-print:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.fa-print .fp-pin { top: -30px; height: 38px; width: 14px; }
.fa-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.fa-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) contrast(1.05); transition: filter 2.6s cubic-bezier(.3,.1,.3,1) .4s, transform 1.2s var(--ease-out); }
html.js .fa-item[data-reveal]:not(.is-in) .fa-img img { filter: grayscale(1) brightness(3) contrast(.12); }
.fa-print:hover .fa-img img { transform: scale(1.05); }
.fa-t { font-size: 14.5px; font-weight: 800; line-height: 1.35; }
.fa-p { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: #4a443d; }

/* ---------- 3. Tira de negativos ---------- */
.fn { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: #1a0d0c; color: #fff; scroll-margin-top: var(--hdr-h); overflow: hidden; }
.fn .kicker-light, .fn .h-display .serif { color: #ff9a8a; }
.fn-note { max-width: 26rem; font-size: 15px; line-height: 1.6; color: #d6c9c7; }
.fn-strip { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #5b3c38 transparent; padding-bottom: .6rem; }
html.js .fn-strip[data-reveal] { opacity: 1; transform: none; }
/* La película, con sus perforaciones arriba y abajo */
.fn-frames { list-style: none; margin: 0 auto; padding: 34px max(1rem, calc((100vw - 1240px) / 2 + 2rem)); display: flex; gap: 14px; width: max-content; background-color: var(--film); background-image: repeating-linear-gradient(90deg, transparent 0 9px, var(--hole) 9px 21px, transparent 21px 32px), repeating-linear-gradient(90deg, transparent 0 9px, var(--hole) 9px 21px, transparent 21px 32px); background-size: 100% 10px, 100% 10px; background-position: 0 12px, 0 calc(100% - 12px); background-repeat: no-repeat; }
.fn-frame { position: relative; flex: none; display: flex; flex-direction: column; gap: .4rem; width: clamp(210px, 17vw, 250px); aspect-ratio: 4 / 3.4; padding: 1.1rem 1.1rem 1rem; background: #f3eee4; color: #161616; outline: none; filter: invert(1) sepia(.55) saturate(1.6) hue-rotate(-12deg); transition: filter .6s var(--ease-out), opacity .6s ease, transform .8s var(--ease-out); transition-delay: 0s, calc(.15s + var(--i) * 140ms), calc(.15s + var(--i) * 140ms); cursor: default; }
html.js .fn-strip[data-reveal]:not(.is-in) .fn-frame { opacity: 0; transform: translateX(40px); }
/* En positivo al pasar el ratón o al enfocar con el teclado */
.fn-frame:hover, .fn-frame:focus-visible { filter: none; }
.fn-frame:focus-visible { box-shadow: 0 0 0 3px #ff9a8a; }
.fn-num { position: absolute; top: .55rem; right: .7rem; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #0d4f88; }
.fn-y { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.fn-frame.is-cuba .fn-y { color: var(--brand); }
.fn-h { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.2; }
.fn-t { font-size: 13px; line-height: 1.5; color: #3d3d3d; }
.fn-more { margin-top: 2.4rem; }

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

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .fh-media img, html.js .fh-flash, html.js .fh-rec, html.js .fp-print { animation: none; }
  .fp-img img, .fn-frame, .fx a { transition: none; }
  html.js .fp-item[data-reveal]:not(.is-in) .fp-img img { filter: sepia(.3) contrast(1.05); }
  html.js .fn-strip[data-reveal]:not(.is-in) .fn-frame { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .fa-print { animation: none; }
  .fa-img img { transition: none; }
  html.js .fa-item[data-reveal]:not(.is-in) .fa-img img { filter: sepia(.3) contrast(1.05); }
}