/* V32 · navegación histórica congruente, puerta inmersiva y 20 videos */
.history-gateway {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 132px) max(22px, calc((100vw - 1180px) / 2));
  background:
    linear-gradient(180deg, rgba(7,6,5,.96), rgba(17,11,8,.97)),
    url('../ornaments/32_memoria-guerrero.svg') center 24% / min(920px, 92vw) auto no-repeat;
  color: #fff1cf;
}
.history-gateway::before,
.history-gateway::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.history-gateway::before {
  background: url('../ornaments/32_memoria-guerrero.svg') center / 760px 380px repeat;
  color: #d6a64f;
  opacity: .055;
}
.history-gateway::after {
  background:
    radial-gradient(circle at 10% 25%, rgba(9,143,136,.13), transparent 28%),
    radial-gradient(circle at 88% 72%, rgba(190,52,62,.12), transparent 30%);
}
.history-gateway-intro { max-width: 980px; margin: 0 auto 44px; text-align: center; }
.history-gateway-intro h2 {
  max-width: 980px;
  margin: 16px auto 22px;
  color: #fff1cf;
  font-size: clamp(50px, 7vw, 96px);
  line-height: .92;
}
.history-gateway-intro p {
  max-width: 780px;
  margin: 0 auto;
  color: rgba(255,241,207,.76);
  font-size: clamp(16px,1.6vw,20px);
  line-height: 1.75;
}
.history-portals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-width: 1120px; margin: 0 auto; }
.history-portal {
  --portal-accent: #d29e42;
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px,4vw,48px);
  overflow: hidden;
  border: 1px solid rgba(238,212,148,.2);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(25,18,13,.9), rgba(8,7,6,.97));
  color: #fff1cf;
  text-decoration: none;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.history-portal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--portal-pattern) right 16px top 16px / 260px auto no-repeat;
  opacity: .16;
  filter: saturate(.78);
}
.history-portal::after { content:''; position:absolute; inset:auto 0 0; height:4px; background:var(--portal-accent); opacity:.82; }
.history-portal:hover, .history-portal:focus-visible { transform: translateY(-3px); border-color: rgba(238,212,148,.48); background: linear-gradient(155deg, rgba(37,25,16,.94), rgba(8,7,6,.99)); }
.history-portal > * { position: relative; z-index: 1; }
.history-portal[data-story="diablos-negros"] { --portal-accent:#d64334; --portal-pattern:url('../ornaments/25_diablos-negros.svg'); }
.history-portal[data-story="diablo-de-teloloapan"] { --portal-accent:#e2383f; --portal-pattern:url('../ornaments/25_diablo-teloloapan.svg'); }
.history-portal[data-story="ritual-de-sangre"] { --portal-accent:#a2bc3d; --portal-pattern:url('../ornaments/25_ritual-zitlala.svg'); }
.history-portal[data-story="porrazo-de-tigres"] { --portal-accent:#0c9f99; --portal-pattern:url('../ornaments/25_porrazos.svg'); }
.history-portal-index { color: var(--portal-accent); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.history-portal h3 { margin: 17px 0 8px; color: #fff1cf; font-size: clamp(42px,4.4vw,68px); line-height: .9; }
.history-portal p { margin: 0 0 28px; color: rgba(255,241,207,.68); font-size: 15px; }
.history-portal b { display:flex; justify-content:space-between; gap:16px; align-items:center; color:#fff1cf; font-size:12px; letter-spacing:.04em; }
.history-portal b span { color:var(--portal-accent); font-size:22px; }
.history-gateway-note { max-width:820px; margin:30px auto 0; color:rgba(255,241,207,.55); text-align:center; font-size:12px; line-height:1.65; }

.documentary-section { align-items: start; }
.documentary-guidance { margin-top: 14px; color: rgba(255,243,216,.54) !important; font-size: 12px; }
.documentary-actions { display:grid; grid-template-columns:1fr; gap:8px; min-width:min(100%,420px); }
.artisan-video-button {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:76px;
  padding:12px 15px 12px 12px;
  border:1px solid rgba(239,213,151,.24);
  border-radius:16px;
  background:
    linear-gradient(100deg, rgba(255,255,255,.035), transparent),
    rgba(255,245,220,.025);
  color:#fff1cf;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.artisan-video-button:hover, .artisan-video-button:focus-visible { transform:translateX(3px); border-color:rgba(239,213,151,.56); background:rgba(255,245,220,.055); }
.artisan-video-icon { width:48px; height:48px; display:grid; place-items:center; color:var(--accent,#c89a45); }
.artisan-video-icon svg { width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.5; }
.artisan-video-icon .play-fill { fill:currentColor; stroke:none; }
.artisan-video-copy { display:grid; gap:4px; min-width:0; }
.artisan-video-copy small { color:var(--accent,#c89a45); font-size:9px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.artisan-video-copy b { color:#fff1cf; font-size:12px; line-height:1.4; }
.artisan-video-arrow { color:rgba(255,241,207,.5); font-size:18px; }

.lightbox-frame { position:relative; }
.lightbox-frame iframe, .lightbox-frame video { width:100%; height:100%; border:0; background:#000; }
.lightbox-frame video { display:none; object-fit:contain; }
.media-lightbox.shows-direct-video .lightbox-frame iframe { display:none; }
.media-lightbox.shows-direct-video .lightbox-frame video { display:block; }

@media (max-width: 820px) {
  .history-portals { grid-template-columns:1fr; }
  .history-portal { min-height:250px; }
  .history-gateway-intro h2 { font-size:clamp(44px,12vw,66px); }
}
@media (max-width: 560px) {
  .history-gateway { padding-inline:12px; }
  .history-portal { border-radius:16px; padding:26px 22px; }
  .history-portal h3 { font-size:42px; }
  .artisan-video-button { grid-template-columns:42px minmax(0,1fr) auto; padding:10px; min-height:70px; }
  .artisan-video-icon, .artisan-video-icon svg { width:40px; height:40px; }
}