/* Cuba Despierta · Tradiciones (views/tradiciones.php). Se carga solo en /cultura/tradiciones.
   Paleta de site.css; animaciones comunes de redesign.css (kenburns, fadeup, lineup, data-reveal).
   Pestañas del almanaque, frase que rota y repetición de la cadena de fichas: js/tradiciones.js. */
.tz { --bone: #f7f2e7; --pip: #161616; }

/* ---------- 1. Cabecera con fichas de dominó ---------- */
.th { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 4rem) 0 5rem; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.th-media { position: absolute; inset: 0; z-index: -2; }
.th-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; transform-origin: 55% 55%; }
html.js .th-media img { animation: kenburns 26s var(--ease-out) both, hx-drift 46s ease-in-out 26s infinite alternate; }
.th::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,14,14,.93) 0%, rgba(14,14,14,.72) 42%, rgba(14,14,14,.15) 80%), linear-gradient(to top, rgba(14,14,14,.9) 0%, rgba(14,14,14,0) 50%); }
@media (max-width: 767px) { .th::before { background: linear-gradient(to top, rgba(14,14,14,.96) 0%, rgba(14,14,14,.72) 55%, rgba(14,14,14,.5) 100%); } }
.th-in { position: relative; width: 100%; }
.th-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.th-title { margin-top: 1.2rem; font-size: clamp(2.8rem, .9rem + 6.8vw, 6.8rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.th-title .serif { color: var(--brand-light); font-size: 1.08em; text-transform: none; }
.th-vive { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); font-weight: 700; }
.th-word { position: relative; display: inline-block; min-width: 8ch; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.th-word span { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15em; color: var(--brand-light); line-height: 1.1; white-space: nowrap; transition: transform .55s var(--ease-out), opacity .4s; }
.th-word span.is-out { transform: translate3d(0, -110%, 0); opacity: 0; }
.th-word span.is-in { transform: translate3d(0, 110%, 0); opacity: 0; transition: none; }
.th-lead { margin-top: 1.2rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.th-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* Cadena de fichas: cada una gira sobre su esquina inferior derecha y se apoya en la siguiente; la última cae del todo */
.th-dominoes { position: absolute; right: clamp(1.5rem, 6vw, 6rem); bottom: clamp(2.5rem, 6vw, 5rem); display: flex; align-items: flex-end; gap: 26px; padding: 0 .5rem 10px; cursor: pointer; }
.th-dominoes::after { content: ''; position: absolute; left: -2rem; right: -4rem; bottom: 0; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); z-index: -1; }
@media (max-width: 1023px) { .th-dominoes { display: none; } }
.th-tile { width: 44px; height: auto; transform-origin: 100% 100%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.th-tile .t-bg { fill: var(--bone); stroke: #d8cdb6; stroke-width: 1.5; }
.th-tile .t-ln { stroke: #bdb09a; stroke-width: 2; }
.th-tile .t-pip { fill: var(--pip); }
.th-tile:first-child .t-pip { fill: var(--brand); }
html.js .th-dominoes.is-run .th-tile { animation: tz-lean .32s cubic-bezier(.5, 0, .9, .4) forwards; animation-delay: calc(var(--i) * 140ms + 300ms); }
html.js .th-dominoes.is-run .th-tile:last-child { animation-name: tz-down; animation-duration: .5s; }
@keyframes tz-lean { to { transform: rotate(18deg); } }
@keyframes tz-down { 60% { transform: rotate(84deg); } 80% { transform: rotate(78deg); } to { transform: rotate(82deg); } }

/* ---------- 2. Almanaque ---------- */
.ta { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); }
.ta-note { max-width: 22rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
html:not(.js) .ta-note { display: none; }
.ta-tabs { position: relative; display: flex; gap: .5rem; overflow-x: auto; padding: .9rem .2rem 1rem; margin-bottom: 1.5rem; scrollbar-width: thin; scroll-snap-type: x proximity; }
html:not(.js) .ta-tabs { display: none; }
.ta-tab { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-width: 74px; min-height: 76px; padding: .7rem .8rem; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font: inherit; cursor: pointer; scroll-snap-align: start; transition: background-color .3s, color .3s, border-color .3s, transform .45s var(--ease-out); }
/* Arriba, las dos «anillas» del almanaque */
.ta-tab::before { content: ''; position: absolute; top: -6px; left: 50%; width: 30px; height: 10px; translate: -50% 0; background: radial-gradient(circle at 5px 5px, var(--ink) 3px, transparent 3.5px), radial-gradient(circle at 25px 5px, var(--ink) 3px, transparent 3.5px); }
.ta-tab.is-always { min-width: 120px; }
.ta-m { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ta-dots { display: flex; gap: 4px; }
.ta-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.ta-tab.is-empty .ta-m { color: #767676; }
.ta-hoy { position: absolute; top: -10px; right: -8px; padding: .15rem .4rem; background: var(--brand); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
html.js .ta-tab.is-today .ta-hoy { animation: tz-bob 2.4s ease-in-out infinite; }
@keyframes tz-bob { 50% { transform: translateY(-3px) rotate(4deg); } }
.ta-tab:hover { border-color: var(--ink); transform: translateY(-3px); }
.ta-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-3px); }
.ta-tab[aria-selected="true"] .ta-m { color: #fff; }
.ta-tab[aria-selected="true"] .ta-dots i { background: var(--brand-light); }
.ta-tab:focus-visible, .ta-panel:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
html.js .ta-panel[data-tz-hidden] { display: none; }
html:not(.js) .ta-panel + .ta-panel { margin-top: 2.5rem; }
.ta-ph { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); }
.ta-ph em { font-family: inherit; font-size: .45em; color: var(--brand-dark); vertical-align: middle; }
.ta-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ta-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.ta-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
html.js .ta-panel:not([data-tz-hidden]) .ta-item { animation: fadeup .6s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); }
/* El día, como media ficha de dominó */
.ta-day { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--bone); border: 1px solid #d8cdb6; border-radius: 6px; box-shadow: 0 6px 12px -8px rgba(0,0,0,.4), inset 0 -3px 0 rgba(0,0,0,.06); font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); transition: background-color .3s, color .3s, transform .45s var(--ease-out); }
.ta-item:hover .ta-day { background: var(--brand); border-color: var(--brand); color: #fff; transform: rotate(-6deg); }
.ta-n { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: -.005em; }
.ta-t { margin-top: .45rem; font-size: 15px; line-height: 1.65; color: var(--muted); }
.ta-go { margin-top: .7rem; 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; }
.ta-go svg { transition: transform .45s var(--ease-out); }
.ta-go:hover svg { transform: translateX(5px); }
.ta-empty { padding: 2rem 0; max-width: 36rem; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- 3. Crónicas: carteles de fiesta ---------- */
.tc { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--ink-900); color: #fff; scroll-margin-top: var(--hdr-h); overflow: hidden; }
.tc-note { font-size: 14px; color: #bdbdbd; }
.tc-note b { font-size: 1.6rem; font-weight: 900; color: #fff; }
.tc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 2rem; }
@media (min-width: 760px) { .tc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc-list.is-solo { grid-template-columns: minmax(0, 1fr); } }
.tc-card { display: flex; flex-direction: column; color: #fff; text-decoration: none; transform: rotate(var(--tilt, 0deg)); transition: transform .7s var(--ease-out); }
.tc-card:hover, .tc-card:focus-visible { transform: rotate(0) translateY(-6px); }
.tc-card:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 6px; }
.tc-poster { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 10px solid var(--bone); box-shadow: 0 40px 60px -30px rgba(0,0,0,.8); }
.tc-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tc-card:hover .tc-poster img { transform: scale(1.06); }
.tc-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,14,14,.92) 0%, rgba(14,14,14,.35) 45%, rgba(14,14,14,0) 70%); }
.tc-over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: .4rem; padding: clamp(1.2rem, 1rem + 1.5vw, 2.2rem); }
.tc-k { align-self: flex-start; padding: .3rem .6rem; background: var(--brand); font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.tc-t { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 1.3rem + 2.6vw, 4rem); line-height: .98; letter-spacing: -.015em; text-shadow: 0 4px 20px rgba(0,0,0,.5); }
.tc-p { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #e5e5e5; }
/* Entrada troquelada: borde perforado y línea de corte */
.tc-stub { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 1.5rem; margin: 0 1.2rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--bone); color: var(--ink); -webkit-mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) 0 0 / 22px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) 0 0 / 22px 100% repeat-x; transition: transform .7s var(--ease-out); }
.tc-card:hover .tc-stub { transform: translateY(6px) rotate(.6deg); }
.tc-adm { grid-row: span 2; display: flex; flex-direction: column; align-items: center; padding-right: 1.4rem; border-right: 2px dashed #c9bda6; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tc-adm b { font-size: 1.3rem; letter-spacing: 0; color: var(--brand-dark); }
.tc-d { font-size: 14.5px; line-height: 1.55; color: #3d3d3d; }
.tc-go { display: inline-flex; align-items: center; gap: .4rem; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); }
.tc-go svg { transition: transform .45s var(--ease-out); }
.tc-card:hover .tc-go svg { transform: translateX(5px); }
@media (min-width: 900px) {
  .tc-list.is-solo .tc-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  .tc-list.is-solo .tc-stub { margin: 0 0 0 -2rem; grid-template-columns: minmax(0, 1fr); padding: 2rem 2rem 2rem 2.4rem; -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) 0 0 / 100% 22px repeat-y; mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) 0 0 / 100% 22px repeat-y; }
  .tc-list.is-solo .tc-adm { grid-row: auto; flex-direction: row; gap: .8rem; align-items: baseline; padding: 0 0 1rem; border-right: 0; border-bottom: 2px dashed #c9bda6; }
  .tc-list.is-solo .tc-d { font-size: 16px; }
}

/* ---------- 4. Cierre: otros temas ---------- */
.tx { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.tx ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .tx ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tx ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tx a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1.2rem; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; transition: border-color .3s, color .3s, transform .5s var(--ease-out); }
.tx-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); }
.tx-n { flex: 1; }
.tx a > svg { color: var(--brand); transition: transform .45s var(--ease-out); }
.tx a:hover { border-color: var(--ink); color: var(--brand-dark); transform: translateY(-3px); }
.tx a:hover .tx-ico { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.tx a:hover > svg { transform: translateX(5px); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .th-dominoes.is-run .th-tile, html.js .ta-tab.is-today .ta-hoy, html.js .ta-panel:not([data-tz-hidden]) .ta-item { animation: none; }
  .th-word span, .ta-tab, .ta-day, .tc-card, .tc-stub, .tc-poster img, .tx a { transition: none; }
}

/* ---------- Archivo (views/_cat_archivo.php): carteles de fiesta en fondo oscuro ---------- */
.arc.is-tradiciones { --arc-accent: #f5c542; --arc-rot: -1deg; }
.arc.is-tradiciones .arc-n { color: #161616; }
.arc.is-tradiciones .arc-body { border-top: 2px dashed rgba(255,255,255,.3); }