/* ==========================================================================
   Caporales de Lugano — hoja de estilos
   Paleta inspirada en el archivo fotográfico: rojos y ocres de los trajes,
   papel envejecido, y los colores de la bandera whipala/boliviana como acento.
   ========================================================================== */

:root {
  --bg: #f6efe2;
  --bg-paper: #efe4cf;
  --ink: #2b1c14;
  --ink-soft: #5a4636;
  --maroon: #7a1f24;
  --maroon-deep: #4e1116;
  --gold: #c8922f;
  --gold-light: #e3b768;
  --line: rgba(43, 28, 20, 0.14);
  --shadow: 0 18px 40px -18px rgba(43, 20, 12, 0.45);
  --radius: 4px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--maroon-deep); margin: 0 0 0.5em; }

a { color: inherit; }

p { margin: 0 0 1em; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

strong { color: var(--ink); }

/* subtle paper grain */
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 500;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------- header ---------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: linear-gradient(to bottom, rgba(20,10,7,0.55), rgba(20,10,7,0));
  padding-block: 18px;
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(16px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: var(--serif); font-weight: 700; font-size: 1.15rem;
  color: #fff; letter-spacing: 0.02em; text-transform: uppercase;
}
.brand em { font-style: normal; color: var(--gold-light); }

.header-controls { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08); cursor: pointer; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span { width: 18px; height: 2px; background: #fff; border-radius: 2px; }

/* ---------------------------------- reproductor de audio ---------------------------------- */
.audio-player {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: 2px solid #fff4de; border-radius: 100px; padding: 6px 16px 6px 6px;
  max-width: min(62vw, 320px); box-shadow: 0 5px 16px rgba(20,9,6,0.4);
}
.ap-btn {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--maroon-deep); color: #fdf6ea; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s; box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}
.ap-btn:hover { transform: scale(1.08); }
.ap-btn.ap-next { width: 32px; height: 32px; background: rgba(78,17,22,0.8); font-size: 1rem; }
/* pulso invitando al clic mientras la música todavía no arrancó */
.audio-player:not(.is-playing) .ap-play { animation: ap-pulse-ring 1.8s ease-out infinite; }
@keyframes ap-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(122,31,36,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(122,31,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(122,31,36,0); }
}
.ap-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.ap-title {
  font-size: 0.86rem; font-weight: 700; color: var(--maroon-deep); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* ecualizador animado: solo se mueve mientras suena la música */
.ap-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 14px; flex: none; }
.ap-eq span { width: 3px; height: 4px; background: var(--maroon-deep); border-radius: 1px; opacity: 0.4; }
.audio-player.is-playing .ap-eq span {
  opacity: 1; animation: ap-bounce 0.9s ease-in-out infinite;
}
.audio-player.is-playing .ap-eq span:nth-child(1) { animation-delay: 0s; }
.audio-player.is-playing .ap-eq span:nth-child(2) { animation-delay: 0.2s; }
.audio-player.is-playing .ap-eq span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ap-bounce { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .audio-player:not(.is-playing) .ap-play { animation: none; }
  .audio-player.is-playing .ap-eq span { animation: none; opacity: 1; height: 9px; }
}
@media (max-width: 620px) {
  .audio-player { max-width: 54vw; padding: 5px 12px 5px 5px; }
}
@media (max-width: 420px) {
  .ap-title { display: none; }
}

/* ---------------------------------- timeline side nav ---------------------------------- */
.tl-nav {
  position: fixed; top: 0; right: -320px; width: 300px; height: 100vh; z-index: 400;
  background: var(--maroon-deep); color: #f3e9d8; overflow-y: auto;
  transition: right 0.35s ease; box-shadow: -20px 0 40px rgba(0,0,0,0.3);
  padding: 90px 0 40px;
}
.tl-nav.open { right: 0; }
.tl-nav-inner { display: flex; flex-direction: column; padding-inline: 28px; }
.tl-nav-title {
  font-family: var(--serif); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold-light); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
/* acordeón por década: el nombre de la década es un link directo al primer
   capítulo de ese tramo; el botón chevron, aparte, solo despliega la lista
   de capítulos sin navegar. */
.tl-decade { border-bottom: 1px solid rgba(255,255,255,0.12); }
.tl-decade-head { display: flex; align-items: stretch; }
.tl-decade-link {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 13px 0; text-decoration: none;
  font-family: var(--serif); font-weight: 700; font-size: 1rem; color: #fdf6ea;
  letter-spacing: 0.02em;
}
.tl-decade-link:hover, .tl-decade-link.active { color: var(--gold-light); }
.tl-decade-count {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: rgba(243,233,216,0.55);
  border: 1px solid rgba(243,233,216,0.3); border-radius: 100px; padding: 1px 8px; flex: none;
}
.tl-decade-toggle {
  flex: none; width: 38px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tl-decade-chevron {
  width: 9px; height: 9px; border-right: 1.6px solid var(--gold-light);
  border-bottom: 1.6px solid var(--gold-light); transform: rotate(45deg);
  transition: transform 0.25s ease; margin-top: -3px;
}
.tl-decade.is-open .tl-decade-chevron { transform: rotate(225deg); margin-top: 3px; }
/* truco de grid-rows para animar alto automático: el contenido real va en
   un único hijo (.tl-decade-links-inner) que ocupa la única fila del grid */
.tl-decade-links {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease;
}
.tl-decade.is-open .tl-decade-links { grid-template-rows: 1fr; }
.tl-decade-links-inner { overflow: hidden; min-height: 0; }

.tl-nav-link {
  display: block; padding: 9px 0 9px 24px; font-size: 0.9rem; color: rgba(243,233,216,0.75);
  text-decoration: none; border-top: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s, padding-left 0.2s;
}
.tl-decade-links .tl-nav-link:first-child { border-top: none; }
.tl-nav-link:hover, .tl-nav-link.active { color: #fff; padding-left: 28px; }
.tl-nav-link.active { color: var(--gold-light); font-weight: 600; }

/* ---------------------------------- hero ---------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate;
}
.hero-mosaic {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(6, 1fr); gap: 3px; z-index: -2; filter: saturate(0.85) contrast(1.05);
}
.hero-cell { overflow: hidden; }
.hero-cell img { filter: sepia(0.25) brightness(0.75); transform: scale(1.03); }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20,9,6,0.96) 5%, rgba(20,9,6,0.55) 55%, rgba(30,14,10,0.35) 100%);
}
.hero-content {
  position: relative; max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: 0 clamp(16px, 5vw, 40px) 90px; color: #fdf6ea;
}
.hero-kicker {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold-light);
  margin-bottom: 18px; font-weight: 600; display: flex; align-items: center; gap: 9px;
}

/* ---------------------------------- bandera argentina (referencia visual) ---------------------------------- */
.ar-flag {
  display: inline-block; flex: none; width: 22px; height: 14px; border-radius: 2px;
  background: linear-gradient(to bottom,
    #74acdf 0 33.3%, #f6f1e0 33.3% 66.6%, #74acdf 66.6% 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  position: relative;
}
.ar-flag::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: #f2b134; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(122,31,36,0.25);
}
.brand .ar-flag { margin-right: 9px; vertical-align: -2px; }
.footer-flag {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 0.82rem; letter-spacing: 0.04em; color: var(--gold-light); margin-bottom: 10px;
  text-transform: uppercase; font-weight: 600;
}

/* ---------------------------------- insignia 50º aniversario ---------------------------------- */
.anniversary-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 8px 18px 8px 8px; border-radius: 100px;
  background: rgba(253,246,234,0.08); border: 1px solid var(--gold-light);
}
.ab-stripe {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--gold-light); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 0.85rem; color: var(--gold-light);
}
.ab-stripe::before { content: "50"; }
.ab-text {
  font-family: var(--serif); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--gold-light); white-space: nowrap;
}
.hero h1 {
  color: #fdf6ea; font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.05; margin-bottom: 22px;
  font-weight: 700; max-width: 15ch;
}
.hero h1 span { color: var(--gold-light); font-style: italic; }
.hero-sub { max-width: 46ch; color: rgba(253,246,234,0.85); font-size: 1.08rem; margin-bottom: 30px; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--maroon-deep); background: var(--gold-light); font-weight: 600;
  padding: 13px 26px; border-radius: 100px; font-size: 0.95rem; letter-spacing: 0.01em;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.4); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
/* segundo botón de la home: salto directo al segmento del 50 aniversario */
.hero-cta.hero-cta-alt {
  background: rgba(253,246,234,0.08); color: var(--gold-light);
  border: 1.5px solid var(--gold-light); padding: 11.5px 24px;
}
.hero-cta.hero-cta-alt:hover { background: var(--gold-light); color: var(--maroon-deep); }

/* ---------------------------------- intro band ---------------------------------- */
.intro-band {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(60px, 10vw, 100px) clamp(20px, 6vw, 40px);
}
.intro-band-inner {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 6vw, 70px); align-items: center;
}
.intro-band-text p {
  font-family: var(--serif); font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.6;
  color: var(--ink); font-weight: 500; margin: 0 0 18px; text-align: left;
}
.intro-band-text p:last-child { margin-bottom: 0; }

/* recuadro de resumen, pensado tanto para el lector que escanea como para
   motores de IA que buscan una respuesta autocontenida */
.summary-box {
  display: block; max-width: 760px; margin: 0 auto; padding: 26px 28px;
  background: var(--bg-paper); border-left: 4px solid var(--maroon);
  font-family: var(--serif); font-style: italic; color: var(--ink);
  font-size: 1.05rem; line-height: 1.65;
}
.summary-kicker {
  font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--maroon); margin: 0 0 10px;
}
.summary-box p:not(.summary-kicker) { margin: 0; }
.summary-box strong { color: var(--maroon); font-style: normal; }
@media (max-width: 640px) { .summary-box { margin: 0 20px; } }

/* mapa fileteado: cartela clara tipo pergamino, con guarda de filete doble en
   maroon y un mapa esquemático de la Ciudad de Buenos Aires en su interior */
.map-card {
  position: relative; padding: 22px 20px 16px;
  border: 3px solid var(--maroon);
  background: #f8f1e1;
  box-shadow: 0 22px 48px -20px rgba(43,20,12,0.3);
}
.map-card::before {
  content: ""; position: absolute; inset: 7px; border: 1.5px solid var(--maroon);
  opacity: 0.55; pointer-events: none;
}
.map-svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.map-caption {
  text-align: center; font-family: var(--serif); font-style: italic; color: var(--maroon);
  font-size: 0.88rem; letter-spacing: 0.02em; margin: 8px 0 2px; position: relative; z-index: 1;
}

@media (max-width: 860px) {
  .intro-band-inner { grid-template-columns: 1fr; }
  .intro-band p { text-align: center; }
  .map-card { max-width: 420px; margin: 0 auto; }
}

/* ---------------------------------- línea de tiempo horizontal (debajo del hero) ---------------------------------- */
.timeline-overview {
  padding: 34px 0 28px; background: var(--bg-paper);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.to-hint {
  text-align: center; font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  font-size: 0.85rem; margin: 0 20px 16px;
}
.to-scroller {
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}
.to-scroller::-webkit-scrollbar { height: 5px; }
.to-scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.to-track {
  display: flex; align-items: flex-start; gap: 24px; position: relative;
  padding: 8px 28px 10px; width: max-content;
}
/* la línea es el látigo de cuero trenzado del traje de caporal: tira
   trenzada, con el lazo de la muñeca a la izquierda y la punta a la derecha */
.to-line {
  position: absolute; left: 44px; right: 44px; top: 30px; height: 7px; z-index: 0;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      112deg,
      #e0b262 0px, #e0b262 5px,
      #a97a34 5px, #a97a34 8px,
      #c99a4a 8px, #c99a4a 13px,
      #8a621f 13px, #8a621f 16px
    );
  box-shadow: 0 1px 0 rgba(43,20,12,0.35), inset 0 1px 1px rgba(255,255,255,0.25);
}
.to-line::before {
  /* lazo de la muñeca */
  content: ""; position: absolute; left: -22px; top: 50%; width: 18px; height: 18px;
  border: 3.5px solid #8a621f; border-right-color: transparent; border-radius: 50%;
  transform: translateY(-50%) rotate(-20deg);
}
.to-line::after {
  /* punta trenzada, afinándose */
  content: ""; position: absolute; right: -20px; top: 50%; width: 0; height: 0;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  border-left: 20px solid #8a621f; transform: translateY(-50%);
}
.to-node {
  display: flex; flex-direction: column; align-items: center; gap: 9px; flex: none;
  width: 82px; text-decoration: none; scroll-snap-align: start; position: relative; z-index: 1;
  padding-top: 26px;
}
/* los puntos de la línea de tiempo son cascabeles (como los del traje de
   caporal): esfera metálica con una rendija y el agujerito típico abajo */
.to-dot {
  position: absolute; top: 24px; width: 17px; height: 17px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff6df 0%, #f6dfa1 18%, var(--gold-light) 45%, var(--gold) 72%, #9c6a1e 100%);
  box-shadow: 0 1px 3px rgba(43,20,12,0.45), inset 0 -3px 4px rgba(43,20,12,0.35),
              inset 0 2px 2px rgba(255,255,255,0.5);
  transition: transform 0.2s;
  transform-origin: 50% -4px;
}
.to-dot::before {
  /* la rendija del cascabel */
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 28%; height: 1.4px;
  background: rgba(78,17,22,0.75); border-radius: 1px;
}
.to-dot::after {
  /* el agujerito */
  content: ""; position: absolute; left: 50%; bottom: 18%; width: 2.2px; height: 2.2px;
  background: rgba(78,17,22,0.8); border-radius: 50%; transform: translateX(-50%);
}
.to-node .to-label { margin-top: 18px; }
.to-node:hover .to-dot, .to-node.active .to-dot {
  animation: cascabel-jingle 0.5s ease;
}
.to-node.active .to-dot {
  background:
    radial-gradient(circle at 34% 28%, #fff6df 0%, #fbe6ae 18%, var(--gold-light) 42%, var(--maroon) 85%, var(--maroon-deep) 100%);
}
@keyframes cascabel-jingle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-18deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-9deg); }
  80% { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .to-node:hover .to-dot, .to-node.active .to-dot { animation: none; }
}
.to-label {
  font-family: var(--sans); font-size: 0.72rem; color: var(--ink-soft); text-align: center;
  line-height: 1.25;
}
.to-node:hover .to-label, .to-node.active .to-label { color: var(--maroon); font-weight: 700; }
.to-decade-marker { flex: none; display: flex; align-items: flex-start; padding-top: 30px; }
.to-decade-marker span {
  font-family: var(--serif); font-weight: 700; font-size: 0.78rem; color: var(--maroon);
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  border-bottom: 2px solid var(--gold); padding-bottom: 5px;
}

/* ---------------------------------- timeline spine ---------------------------------- */
/* un guiño al fileteado porteño: doble filete con un rombo central, en vez de
   una línea lisa, marcando el paso del prólogo a la línea de tiempo */
.timeline-spine {
  max-width: 420px; margin: 0 auto; height: 14px;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 14'%3E%3Cline x1='0' y1='4' x2='180' y2='4' stroke='%23c8922f' stroke-width='1.5'/%3E%3Cline x1='240' y1='4' x2='420' y2='4' stroke='%23c8922f' stroke-width='1.5'/%3E%3Cline x1='0' y1='10' x2='170' y2='10' stroke='%23c8922f' stroke-width='1' opacity='0.6'/%3E%3Cline x1='250' y1='10' x2='420' y2='10' stroke='%23c8922f' stroke-width='1' opacity='0.6'/%3E%3Crect x='203' y='0' width='14' height='14' fill='%23c8922f' transform='rotate(45 210 7)'/%3E%3C/svg%3E");
}

/* ---------------------------------- chapter sections ---------------------------------- */
.chapter {
  position: relative; padding: clamp(50px, 8vw, 90px) clamp(16px, 5vw, 40px) calc(clamp(50px, 8vw, 90px) + 14px);
  border-bottom: none;
}
/* filete final de cada capítulo: la misma guarda con rombo central de más
   arriba, repetida como cierre de cada tramo de la historia */
.chapter::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 14'%3E%3Cline x1='0' y1='7' x2='180' y2='7' stroke='%23c8922f' stroke-width='1' opacity='0.55'/%3E%3Cline x1='240' y1='7' x2='420' y2='7' stroke='%23c8922f' stroke-width='1' opacity='0.55'/%3E%3Crect x='204' y='2' width='10' height='10' fill='none' stroke='%23c8922f' stroke-width='1' opacity='0.7' transform='rotate(45 209 7)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.chapter.section-highlight::after, .chapter.section-closing::after { display: none; }
.chapter-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(280px, 0.85fr) 1.15fr; gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.chapter:nth-child(even) .chapter-inner { grid-template-columns: 1.15fr minmax(280px, 0.85fr); }
.chapter:nth-child(even) .chapter-text { order: 2; }
.chapter:nth-child(even) .chapter-media { order: 1; }

.chapter-text { position: sticky; top: 100px; }

.era-tag {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--maroon); font-weight: 700; margin-bottom: 14px;
  padding: 5px 12px; border: 1px solid var(--maroon); border-radius: 100px;
}
.era-tag::before, .era-tag::after {
  content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--maroon);
  transform: rotate(45deg); flex: none;
}
.section-highlight .era-tag::before, .section-highlight .era-tag::after { background: var(--gold-light); }
.chapter h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; margin-bottom: 18px; }
.chapter-text p { max-width: 52ch; }

.chapter.section-highlight {
  background: linear-gradient(135deg, var(--maroon-deep), var(--maroon));
  border-radius: 18px; margin: clamp(30px, 6vw, 60px) auto; max-width: calc(var(--maxw) + 40px);
  border-bottom: none;
}
.section-highlight .era-tag { color: var(--gold-light); border-color: var(--gold-light); }
.section-highlight h2, .section-highlight p { color: #fdf6ea; }
.section-highlight strong { color: var(--gold-light); }
.section-highlight em { color: var(--gold-light); }

.chapter.section-closing { border-bottom: none; }
.closing-quote {
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink);
  border-left: 3px solid var(--gold); padding-left: 18px; margin-top: 20px;
}
.closing-signoff {
  font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--maroon);
  margin-top: 22px; letter-spacing: 0.01em;
}
.closing-signoff strong { color: var(--maroon-deep); }

/* lista numerada de padrinos, con números en un medallón dorado */
.padrinos-list { list-style: none; margin: 16px 0; padding: 0; counter-reset: padrino; }
.padrinos-list li {
  position: relative; padding: 4px 0 4px 38px; margin-bottom: 8px; color: var(--ink-soft);
  counter-increment: padrino;
}
.padrinos-list li::before {
  content: counter(padrino); position: absolute; left: 0; top: 2px; width: 24px; height: 24px;
  border: 1.5px solid var(--gold); border-radius: 50%; color: var(--maroon);
  font-family: var(--serif); font-weight: 700; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}

.doc-note {
  font-size: 0.92rem; font-style: italic; color: var(--ink-soft);
  border-left: 2px solid var(--gold); padding-left: 14px; margin-top: 16px;
}
.section-highlight .doc-note { border-left-color: var(--gold-light); }

/* capítulos sin fotografías: una sola columna, texto centrado en una franja
   angosta para que no se sienta "vacío" al lado de los capítulos con carrusel.
   De fondo, un lienzo con el perfil porteño (el Obelisco y su skyline) muy
   filtrado, a modo de textura de archivo cuando no hay una foto propia del
   lugar o del año. */
.chapter.text-only { position: relative; overflow: hidden; }
.chapter.text-only .chapter-inner { grid-template-columns: 1fr; max-width: 720px; position: relative; z-index: 1; }
.chapter.text-only .chapter-text { position: static; text-align: left; }
.chapter.text-only:nth-child(even) .chapter-text { order: initial; }

.chapter.text-only::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cg fill='%234e1116'%3E%3Crect x='0' y='140' width='40' height='60'/%3E%3Crect x='40' y='110' width='35' height='90'/%3E%3Crect x='75' y='150' width='50' height='50'/%3E%3Crect x='125' y='95' width='30' height='105'/%3E%3Crect x='155' y='130' width='45' height='70'/%3E%3Crect x='200' y='65' width='25' height='135'/%3E%3Crect x='225' y='120' width='40' height='80'/%3E%3Crect x='265' y='150' width='55' height='50'/%3E%3Crect x='320' y='105' width='35' height='95'/%3E%3Crect x='355' y='135' width='28' height='65'/%3E%3Cpolygon points='386,40 404,40 398,20 392,20'/%3E%3Crect x='388' y='40' width='14' height='160'/%3E%3Crect x='402' y='135' width='28' height='65'/%3E%3Crect x='430' y='110' width='40' height='90'/%3E%3Crect x='475' y='150' width='50' height='50'/%3E%3Crect x='530' y='80' width='30' height='120'/%3E%3Crect x='565' y='130' width='45' height='70'/%3E%3Crect x='615' y='100' width='35' height='100'/%3E%3Crect x='655' y='145' width='60' height='55'/%3E%3Crect x='720' y='120' width='40' height='80'/%3E%3Crect x='765' y='150' width='35' height='50'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: bottom center; background-size: cover;
  opacity: 0.1; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 35%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, black 35%, transparent 100%);
}
.chapter.text-only.section-closing::before { opacity: 0.14; }

/* ---------------------------------- galleries ---------------------------------- */
.gallery {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.gallery.cols-1 { grid-template-columns: 1fr; }
.gallery.cols-3 { grid-template-columns: repeat(2, 1fr); }
.gallery.cols-3 .gallery-item:first-child { grid-column: span 2; aspect-ratio: 16/9; }
.gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }

.gallery-item {
  margin: 0; overflow: hidden; border-radius: var(--radius); cursor: zoom-in;
  aspect-ratio: 4/5; box-shadow: var(--shadow); background: #d8cbb0;
  border: 6px solid #fffaf0; outline: 1px solid var(--line);
  position: relative;
}
.gallery-item::after {
  content: ""; position: absolute; inset: 0; background: rgba(122,31,36,0);
  transition: background 0.25s; z-index: 2;
}
.gallery-item:hover::after { background: rgba(122,31,36,0.12); }
/* rulos de fileteado en las cuatro esquinas de cada fotografía del sitio */
.gallery-item::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23c8922f' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='0.8'%3E%3Cpath d='M6,40 C6,18 18,6 40,6'/%3E%3Cpath d='M6,26 C6,15 15,6 26,6'/%3E%3Ccircle cx='6' cy='6' r='2.4' fill='%23c8922f' stroke='none'/%3E%3Cpath d='M194,40 C194,18 182,6 160,6'/%3E%3Cpath d='M194,26 C194,15 185,6 174,6'/%3E%3Ccircle cx='194' cy='6' r='2.4' fill='%23c8922f' stroke='none'/%3E%3Cpath d='M6,160 C6,182 18,194 40,194'/%3E%3Cpath d='M6,174 C6,185 15,194 26,194'/%3E%3Ccircle cx='6' cy='194' r='2.4' fill='%23c8922f' stroke='none'/%3E%3Cpath d='M194,160 C194,182 182,194 160,194'/%3E%3Cpath d='M194,174 C194,185 185,194 174,194'/%3E%3Ccircle cx='194' cy='194' r='2.4' fill='%23c8922f' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.section-highlight .gallery-item::before { opacity: 0.85; filter: brightness(1.3); }
.gallery-item img { transition: transform 0.5s ease; filter: sepia(0.12) contrast(1.03); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:nth-child(3n+1) { transform: rotate(-1.1deg); }
.gallery-item:nth-child(3n+2) { transform: rotate(0.8deg); }
.gallery-item:nth-child(3n) { transform: rotate(-0.4deg); }

.section-highlight .gallery-item { border-color: #fdf6ea; }

/* ---------------------------------- carrusel dinámico ---------------------------------- */
.single-photo .gallery-item { aspect-ratio: 4/5; max-width: 420px; margin-inline: auto; }
/* foto única apaisada: se ve entera, con su propia proporción */
.single-photo.photo-natural .gallery-item { aspect-ratio: auto; max-width: 560px; }
.single-photo.photo-natural .gallery-item img { height: auto; }

.carousel {
  position: relative; aspect-ratio: 4/5; max-width: 460px; margin-inline: auto;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 6px solid #fffaf0; outline: 1px solid var(--line); background: #d8cbb0;
}
.carousel-track { position: relative; width: 100%; height: 100%; }
.carousel-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease; cursor: zoom-in;
}
.carousel-slide.is-active { opacity: 1; visibility: visible; }
.carousel-slide img { filter: sepia(0.12) contrast(1.03); }

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,9,6,0.45); color: #fdf6ea; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.carousel:hover .carousel-arrow, .carousel:focus-within .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { background: rgba(20,9,6,0.7); }
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }

.carousel-dots {
  position: absolute; bottom: 10px; left: 8px; right: 8px; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 6px;
}
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(253,246,234,0.5); transition: background 0.2s, transform 0.2s;
}
.carousel-dot.is-active { background: #fdf6ea; transform: scale(1.25); }
.section-highlight .carousel-dot { background: rgba(253,246,234,0.35); }
.section-highlight .carousel-dot.is-active { background: var(--gold-light); }

/* video de una sección: mismo marco "de foto" (borde crema), sin adornos */
.video-frame {
  position: relative; max-width: 460px; margin: 14px auto 0; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 6px solid #fffaf0; outline: 1px solid var(--line); background: #000;
}
.video-frame video { display: block; width: 100%; max-height: 500px; }

/* el video del segmento, en formato ancho (16:9) */
.video-frame.video-frame-wide { max-width: 900px; margin: 4px auto 0; }
.video-frame.video-frame-wide video { aspect-ratio: 16 / 9; max-height: none; background: #000; }

/* capítulo apilado (reencuentro de los 50 años): título → álbum apaisado →
   primer párrafo → video 1 → video 2 → último párrafo, todo en una columna */
.chapter.chapter-stack .chapter-inner {
  grid-template-columns: 1fr; max-width: 900px; gap: clamp(22px, 3.5vw, 38px);
}
.chapter.chapter-stack .chapter-inner > * { order: 0; }
.chapter.chapter-stack .chapter-text { position: static; }
.chapter-stack .stack-head { text-align: center; }
.chapter-stack .stack-head h2 { margin-bottom: 0; }
.chapter-stack .stack-head p { max-width: 64ch; margin: 18px auto 0; }
.chapter-stack .stack-text p { max-width: 64ch; margin-inline: auto; }
.chapter-stack .stack-text p:last-child { margin-bottom: 0; }
/* álbum apaisado: cada foto se ve completa (contain) sobre su propio fondo desenfocado */
.chapter-stack .carousel { aspect-ratio: 3 / 2; max-width: 900px; background: #1c0f08; }
/* aspect-ratio: auto, porque .gallery-item trae 4/5 y haría la lámina más alta que el marco */
.chapter-stack .carousel-slide { overflow: hidden; aspect-ratio: auto; }
/* álbum apaisado sin adornos: sin rulos de fileteado en las esquinas y sin la
   leve inclinación que tienen las fotos del resto del sitio */
.chapter-stack .carousel .carousel-slide { transform: none; }
.chapter-stack .carousel .carousel-slide::before { content: none; }
.chapter-stack .carousel-slide img { position: relative; object-fit: contain; z-index: 0; }
.slide-bg {
  position: absolute; inset: -14%; background-size: cover; background-position: center;
  filter: blur(18px) brightness(0.72) saturate(1.1); pointer-events: none;
}
.chapter-stack .video-frame { margin: 0 auto; }
/* álbum grande: contador "n / total" y flechas siempre visibles (también en el celular) */
.carousel-counter {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 4px 13px; border-radius: 100px; background: rgba(20,9,6,0.62); color: #fdf6ea;
  font-size: 0.8rem; letter-spacing: 0.06em; pointer-events: none;
}
.carousel[data-large] .carousel-arrow { opacity: 1; }

/* ---------------------------------- roster ---------------------------------- */
.roster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.roster h4 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--maroon);
  margin-bottom: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.roster ul { list-style: none; margin: 0; padding: 0; }
.roster li {
  font-size: 0.92rem; color: var(--ink-soft); padding: 5px 0; border-bottom: 1px dotted var(--line);
}

/* ---------------------------------- album cta ---------------------------------- */
.album {
  text-align: center; padding: clamp(70px, 10vw, 120px) 20px; background: var(--bg-paper);
}
.album-inner { max-width: 620px; margin: 0 auto; }
.album p { max-width: 44ch; margin-inline: auto; }
.album-toggle {
  margin-top: 24px; border: none; cursor: pointer; background: var(--maroon);
  color: #fdf6ea; font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  padding: 15px 32px; border-radius: 100px; transition: background 0.2s, transform 0.2s;
}
.album-toggle:hover { background: var(--maroon-deep); transform: translateY(-2px); }

/* ---------------------------------- cierre fileteado porteño ----------------------------------
   El fileteado acá no es una placa flotante: ES el fondo de todo el módulo final
   (guardas, filetes y rulos ocupando el lienzo completo de la sección), con el
   texto apoyado directamente sobre esa superficie. */
.fileteado-finale {
  position: relative; overflow: hidden;
  padding: clamp(50px, 9vw, 100px) clamp(20px, 6vw, 60px);
  display: flex; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 15%, #33190f 0%, #170b06 55%, #0c0503 100%);
  border-top: 3px solid var(--gold-light);
  border-bottom: 3px solid var(--gold-light);
}
/* filete doble corriendo pegado a los bordes superior e inferior de todo el módulo */
.fileteado-finale::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1.5px solid var(--gold-light); opacity: 0.55;
}
/* Sin textura de fondo ni marco: el módulo final queda con el degradado
   liso de .fileteado-finale (arriba) y el texto apoyado directamente
   sobre esa superficie. */
.ff-wrap { position: relative; z-index: 1; max-width: 840px; width: 92%; margin: 0 auto; text-align: center; }

/* composición tipo cartel de fileteado: bloque de título a la izquierda +
   panel de datos ("50 años...") a la derecha, separados por un filete
   vertical — como en el cartel de referencia, pero en la paleta del sitio
   (guinda / dorado / crema) y sin las botas ni el sombrero. */
.ff-plaque {
  max-width: 780px; display: flex; align-items: center; justify-content: center;
  gap: clamp(22px, 4vw, 46px); text-align: center;
}
.ff-plaque-main {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; flex: 1 1 auto; min-width: 0; margin: 0 auto; padding: 10px;
}
.ff-plaque-divider {
  align-self: stretch; width: 3px; min-height: 190px; flex: 0 0 auto;
  background: linear-gradient(to bottom, transparent, var(--gold-light) 12%, var(--gold-light) 88%, transparent);
  opacity: 0.7;
}
.ff-plaque-stats {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto; width: clamp(150px, 26vw, 210px);
}
/* fila arqueada "AUTÉNTICOS", flanqueada por rulos, como el texto curvo
   sobre el título en el cartel de referencia */
.ff-arch-row {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 2px;
}
.ff-arch { width: clamp(200px, 42vw, 300px); line-height: 0; }
.ff-arch svg { width: 100%; height: auto; display: block; }
.ff-flourish {
  width: 34px; height: 16px; flex: 0 0 auto;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cpath d='M2,14 C18,14 20,4 34,4 C44,4 44,14 54,14' stroke='%23e3b768' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='54' cy='14' r='3' fill='%23e3b768'/%3E%3Ccircle cx='2' cy='14' r='2' fill='%23e3b768'/%3E%3C/svg%3E");
}
.ff-flourish-r { transform: scaleX(-1); }
/* "de" en tamaño chico entre CAPORALES y LUGANO, como en el cartel */
.ff-de {
  display: inline-block; font-size: 0.4em; vertical-align: 0.28em; letter-spacing: 0.06em;
}
/* "LUGANO" con franjas horizontales en la paleta del sitio (guinda / crema /
   dorado), evocando el efecto de bandera a rayas del cartel de referencia
   pero con los propios colores de la identidad del sitio */
.ff-lugano {
  display: inline-block; line-height: 0.74;
  background: linear-gradient(to bottom, #e3b768 0%, #e3b768 32%, #fdf6ea 32%, #fdf6ea 64%, #c8922f 64%, #c8922f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* .sr-only: oculta visualmente sin quitar el contenido del árbol de
   accesibilidad ni del texto indexable */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* número grande "50" del panel de datos, con el mismo tratamiento de letra
   pintada que el resto del cartel */
.ff-stat-number {
  font-family: 'Alfa Slab One', 'Rye', var(--serif); font-weight: 400;
  font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1; color: var(--gold-light);
  margin: 0 0 6px;
  text-shadow:
    1px 1px 0 #fff4de, 2px 2px 0 var(--maroon), 3px 3px 0 var(--maroon),
    4px 4px 0 rgba(0,0,0,0.5);
}
.ff-script {
  font-family: 'Great Vibes', cursive; font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  color: var(--gold-light); margin: 8px 0 0; line-height: 1;
}
@media (max-width: 620px) {
  .ff-plaque { flex-direction: column; }
  .ff-plaque-divider { width: 130px; height: 3px; min-height: 0; margin: 8px 0;
    background: linear-gradient(to right, transparent, var(--gold-light) 12%, var(--gold-light) 88%, transparent); }
  .ff-plaque-stats { width: 100%; }
}
/* placa/cartel: marco doble (guinda + filete dorado) que enmarca todo el
   conjunto de título y panel de datos, como el borde del cartel de
   referencia, con rulos de fileteado en las cuatro esquinas internas */
.ff-board {
  position: relative; padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 40px);
  border: 3px solid var(--maroon-deep); border-radius: 14px;
  background: radial-gradient(ellipse at 50% 20%, #3a1c10 0%, #1c0f08 65%, #100804 100%);
}
.ff-board::before {
  content: ""; position: absolute; inset: 8px; border: 1.5px solid var(--gold-light);
  border-radius: 9px; opacity: 0.6; pointer-events: none;
}
.ff-board-corner {
  position: absolute; width: 60px; height: 60px; pointer-events: none; z-index: 1;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M12,108 C12,55 45,18 105,13' stroke='%237a1f24' stroke-width='8' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M12,108 C12,55 45,18 105,13' stroke='%23e3b768' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M26,100 C30,65 52,38 92,28' stroke='%237a1f24' stroke-width='6' fill='none' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M26,100 C30,65 52,38 92,28' stroke='%23e3b768' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18,90 Q6,70 22,54' stroke='%237a1f24' stroke-width='6' fill='none' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M18,90 Q6,70 22,54' stroke='%23e3b768' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cg transform='translate(105,13)'%3E%3Cellipse rx='5' ry='2.4' fill='%23c0392b' opacity='0.85'/%3E%3Cellipse rx='5' ry='2.4' fill='%23c0392b' opacity='0.85' transform='rotate(60)'/%3E%3Cellipse rx='5' ry='2.4' fill='%23c0392b' opacity='0.85' transform='rotate(120)'/%3E%3Ccircle r='4' fill='%23e3b768'/%3E%3Ccircle r='2' fill='%2374acdf'/%3E%3C/g%3E%3Ccircle cx='92' cy='28' r='5' fill='%23e3b768'/%3E%3Ccircle cx='92' cy='28' r='2' fill='%2374acdf'/%3E%3C/svg%3E");
}
.ff-bc-tl { top: 12px; left: 12px; }
.ff-bc-tr { top: 12px; right: 12px; transform: scaleX(-1); }
.ff-bc-bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.ff-bc-br { bottom: 12px; right: 12px; transform: scale(-1, -1); }
@media (max-width: 480px) { .ff-board-corner { width: 42px; height: 42px; } }

.fileteado-corner {
  position: absolute; width: 130px; height: 130px; pointer-events: none; z-index: 1;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M12,108 C12,55 45,18 105,13' stroke='%237a1f24' stroke-width='8' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M12,108 C12,55 45,18 105,13' stroke='%23e3b768' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M26,100 C30,65 52,38 92,28' stroke='%237a1f24' stroke-width='6' fill='none' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M26,100 C30,65 52,38 92,28' stroke='%23e3b768' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18,90 Q6,70 22,54' stroke='%237a1f24' stroke-width='6' fill='none' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M18,90 Q6,70 22,54' stroke='%23e3b768' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cg transform='translate(105,13)'%3E%3Cellipse rx='5' ry='2.4' fill='%23c0392b' opacity='0.85'/%3E%3Cellipse rx='5' ry='2.4' fill='%23c0392b' opacity='0.85' transform='rotate(60)'/%3E%3Cellipse rx='5' ry='2.4' fill='%23c0392b' opacity='0.85' transform='rotate(120)'/%3E%3Ccircle r='4' fill='%23e3b768'/%3E%3Ccircle r='2' fill='%2374acdf'/%3E%3C/g%3E%3Ccircle cx='92' cy='28' r='5' fill='%23e3b768'/%3E%3Ccircle cx='92' cy='28' r='2' fill='%2374acdf'/%3E%3C/svg%3E");
}
.corner-tl { top: 16px; left: 16px; }
.corner-tr { top: 16px; right: 16px; transform: scaleX(-1); }
.corner-bl { bottom: 16px; left: 16px; transform: scaleY(-1); }
.corner-br { bottom: 16px; right: 16px; transform: scale(-1, -1); }

.fileteado-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; color: var(--gold-light);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 600;
  margin-bottom: 22px;
}
.fileteado-divider {
  width: 130px; height: 12px; margin: 18px auto;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 12'%3E%3Cline x1='0' y1='6' x2='48' y2='6' stroke='%23e3b768' stroke-width='2'/%3E%3Cline x1='82' y1='6' x2='130' y2='6' stroke='%23e3b768' stroke-width='2'/%3E%3Ccircle cx='65' cy='6' r='5.5' fill='none' stroke='%23e3b768' stroke-width='2'/%3E%3Ccircle cx='65' cy='6' r='1.6' fill='%23e3b768'/%3E%3C/svg%3E");
}
/* variante en tono maroon, para usar sobre fondos claros (álbum) */
.fileteado-divider-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 12'%3E%3Cline x1='0' y1='6' x2='48' y2='6' stroke='%237a1f24' stroke-width='2'/%3E%3Cline x1='82' y1='6' x2='130' y2='6' stroke='%237a1f24' stroke-width='2'/%3E%3Ccircle cx='65' cy='6' r='5.5' fill='none' stroke='%237a1f24' stroke-width='2'/%3E%3Ccircle cx='65' cy='6' r='1.6' fill='%237a1f24'/%3E%3C/svg%3E");
}
/* misma letra "pintada" que el título grande, en tamaño menor pero
   destacada con su propio sombreado en capas */
.fileteado-sub {
  font-family: 'Rye', var(--serif); font-weight: 400; font-size: clamp(1.2rem, 4vw, 1.7rem);
  color: var(--gold-light); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px;
  text-shadow:
    1px 1px 0 #fff4de, 1.5px 1.5px 0 var(--maroon), 2px 2px 0 var(--maroon),
    2.5px 2.5px 0 rgba(0,0,0,0.5);
}
/* letra "pintada" de cartel, como en un fileteado tradicional: la tipografía
   Rye (gruesa, de serifs anchos) simulando el trazo pincelado, con varias
   capas de sombra de color para el efecto 3D típico de la técnica */
.fileteado-title {
  font-family: 'Alfa Slab One', 'Rye', var(--serif); font-weight: 400; font-size: clamp(2.3rem, 9.5vw, 3.8rem);
  line-height: 1.15; color: var(--gold-light); margin: 8px 0 0; text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow:
    1px 1px 0 #fff4de, 2px 2px 0 var(--maroon), 3px 3px 0 var(--maroon),
    4px 4px 0 rgba(0,0,0,0.5);
}
/* "50 años de existencia": línea destacada en letra pintada, mismo tratamiento
   de sombreado en capas que el título grande, tamaño intermedio */
.fileteado-anniversary {
  font-family: 'Alfa Slab One', 'Rye', var(--serif); font-weight: 400;
  font-size: clamp(1rem, 3.2vw, 1.3rem); line-height: 1.25; color: var(--gold-light);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px;
  text-shadow:
    1px 1px 0 #fff4de, 1.5px 1.5px 0 var(--maroon), 2px 2px 0 var(--maroon),
    2.5px 2.5px 0 rgba(0,0,0,0.5);
}
/* "en devoción al Señor de Laguna": línea de acompañamiento, más discreta */
.fileteado-devotion {
  font-family: var(--serif); font-style: italic; font-weight: 600; line-height: 1.35;
  font-size: clamp(0.8rem, 2.3vw, 0.95rem); color: #fdf6ea; opacity: 0.88;
  letter-spacing: 0.02em; margin: 0 0 14px;
}
.fileteado-years {
  font-family: var(--serif); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.2rem); color: #fdf6ea;
  letter-spacing: 0.14em; margin: 0; display: flex; align-items: center; justify-content: center;
  gap: 9px;
}

/* rulos chicos, apenas insinuados, en las esquinas superiores del hero */
.hero-corner {
  width: 64px; height: 64px; opacity: 0.5; z-index: 3;
}
.hero .corner-tl.hero-corner { top: 90px; left: 12px; }
.hero .corner-tr.hero-corner { top: 90px; right: 12px; }

@media (max-width: 480px) {
  .fileteado-corner { width: 78px; height: 78px; }
  .hero-corner { width: 42px; height: 42px; }
}

/* ---------------------------------- glosario y preguntas frecuentes ---------------------------------- */
.reference-band {
  padding: clamp(50px, 8vw, 90px) clamp(16px, 5vw, 40px);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.reference-band-alt { background: var(--bg-paper); }
.reference-inner { max-width: 760px; margin: 0 auto; }
.reference-inner h2 { margin-bottom: 24px; }

.glossary { display: grid; gap: 22px; margin: 0; }
.glossary-item dt {
  font-family: var(--serif); font-weight: 700; color: var(--maroon); font-size: 1.08rem;
  margin-bottom: 5px;
}
.glossary-item dd { margin: 0; color: var(--ink-soft); line-height: 1.65; max-width: 62ch; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fffaf0; border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px;
}
.faq-item summary {
  font-family: var(--serif); font-weight: 700; color: var(--ink); cursor: pointer;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--maroon); font-size: 1.3rem; flex: none; line-height: 1;
  font-family: var(--sans);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: 14px 0 0; color: var(--ink-soft); line-height: 1.65; }

/* elenco: la tabla larga de nombres se pliega en <details> para no cortar
   la lectura en celular */
.roster-details summary {
  cursor: pointer; font-family: var(--sans); font-weight: 600; color: var(--maroon);
  margin-bottom: 4px;
}

/* ---------------------------------- footer ---------------------------------- */
.site-footer {
  background: var(--maroon-deep); color: rgba(253,246,234,0.75);
  text-align: center; padding: 46px 20px 56px; font-size: 0.9rem;
}
.site-footer p { color: rgba(253,246,234,0.75); max-width: 50ch; margin: 0 auto 14px; }
.footer-contact a {
  color: var(--gold-light); text-decoration: none; font-weight: 600; letter-spacing: 0.02em;
}
.footer-contact a:hover { text-decoration: underline; }
.footer-copyright { font-size: 0.78rem; color: rgba(253,246,234,0.55); margin-bottom: 18px !important; }
.footer-source-note { font-size: 0.8rem; color: rgba(253,246,234,0.55); font-style: italic; }
.back-top { text-decoration: none; color: var(--gold-light); font-weight: 600; }

/* ---------------------------------- lightbox ---------------------------------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(12, 6, 4, 0.94); z-index: 1000;
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lb-img {
  max-width: min(90vw, 1100px); max-height: 82vh; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.6); border: 6px solid #fffaf0;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
  color: #fdf6ea; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.lb-close { top: 22px; right: 22px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.1rem; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.18); }
.lb-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(253,246,234,0.75); font-size: 0.85rem; letter-spacing: 0.05em;
}

/* ---------------------------------- reveal animation ----------------------------------
   Progressive enhancement: el contenido es visible por defecto (sin JS, o si algo falla).
   Solo se oculta antes de animar cuando <html> tiene la clase has-js (añadida por un
   script inline en el <head>) y aun así el JS principal siempre agrega is-visible. */
.has-js .chapter-text, .has-js .chapter-media, .has-js .gallery-item:not(.carousel-slide) {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.chapter.is-visible .chapter-text, .chapter.is-visible .chapter-media { opacity: 1; transform: translateY(0); }
.chapter.is-visible .gallery-item:not(.carousel-slide) { opacity: 1; transform: none; }
.chapter.is-visible .gallery-item:not(.carousel-slide):nth-child(3n+1) { transform: rotate(-1.1deg); }
.chapter.is-visible .gallery-item:not(.carousel-slide):nth-child(3n+2) { transform: rotate(0.8deg); }
.chapter.is-visible .gallery-item:not(.carousel-slide):nth-child(3n) { transform: rotate(-0.4deg); }
.gallery-item:not(.carousel-slide):nth-child(1) { transition-delay: 0.05s; }
.gallery-item:not(.carousel-slide):nth-child(2) { transition-delay: 0.15s; }
.gallery-item:not(.carousel-slide):nth-child(3) { transition-delay: 0.25s; }
.gallery-item:not(.carousel-slide):nth-child(4) { transition-delay: 0.35s; }
.gallery-item:not(.carousel-slide):nth-child(5) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .chapter-text, .chapter-media, .gallery-item:not(.carousel-slide) { opacity: 1 !important; transform: none !important; transition: none !important; }
  .carousel-slide { transition: none !important; }
}

/* ---------------------------------- responsive ---------------------------------- */
@media (max-width: 860px) {
  .chapter-inner { grid-template-columns: 1fr !important; }
  .chapter:nth-child(even) .chapter-text,
  .chapter:nth-child(even) .chapter-media { order: initial; }
  .chapter-text { position: static; }
  .roster { grid-template-columns: 1fr; }
  .lb-prev, .lb-next { width: 42px; height: 42px; }
}

@media (max-width: 480px) {
  .gallery.cols-3, .gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-mosaic { grid-template-columns: repeat(4, 1fr); }
  .tl-nav { width: 86vw; right: -86vw; }
}