/* ==========================================================
   Falla Illes Canàries – Trafalgar
   Capa de diseño 2026. Se carga DESPUÉS de bootstrap.min.css
   y modern-business.css: no modifica ninguno de los dos.
   Colores corporativos tomados de img/fondo.jpg:
   pizarra de fondo y el oro de las chispas.
   ========================================================== */

:root {
  --tf-fons: #313139;          /* pizarra del fondo */
  --tf-fosc: #24242b;          /* cabecera y pie */
  --tf-superficie: #3a3a44;    /* tarjetas y menús */
  --tf-brasa: #f2b01e;         /* oro de las chispas: color principal */
  --tf-espurna: #ffe94a;       /* amarillo del centro de la chispa, solo detalles */
  --tf-roig: #e0502f;          /* rojo de las letras FALLA */
  --tf-text: #e9e9ef;
  --tf-text2: #a9a9b8;
  --tf-linia: rgba(255, 255, 255, .13);
  --tf-serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  --tf-sans: "Instrument Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */

html, body { height: auto; min-height: 100%; }

/* bootstrap.min.css trae añadido "* { font-family: 'Lato' }" sin cargar Lato,
   así que muchos navegadores acababan mostrando Times. Se anula aquí. */
* { font-family: inherit; }

body {
  padding-top: 0;
  /* Capa pizarra al 80 % sobre fondo.jpg para que el texto destaque.
     Cambia .8 (las dos veces) para más o menos fondo: 0 = fondo tal cual, 1 = liso. */
  background:
    linear-gradient(rgba(49, 49, 57, .8), rgba(49, 49, 57, .8)),
    var(--tf-fons) url(../img/fondo.jpg) repeat;
  color: var(--tf-text);
  font-family: var(--tf-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Los <br><br><br>… que compensaban la antigua barra fija ya no hacen falta */
body > br,
body > .container > br,
.navbar > .container > br { display: none; }

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--tf-serif);
  color: #fff;
  font-weight: 600;
  line-height: 1.15;
}
h2 { font-size: 30px; }
h3 { font-size: 23px; }
h4 { font-size: 18px; }

/* bootstrap.min.css trae párrafos gris claro a 18px y enlaces que cambian
   de tamaño al pasar el ratón: se normalizan */
p { max-width: 68ch; color: inherit; font-size: inherit; }
a:hover, a:focus { font-size: inherit; }
a .fa { color: inherit; }
[align="center"] > p, .text-center p { margin-left: auto; margin-right: auto; }

a { color: var(--tf-brasa); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--tf-espurna); }
a:focus-visible, button:focus-visible, video:focus-visible {
  outline: 3px solid var(--tf-espurna);
  outline-offset: 2px;
}

hr { border-top-color: var(--tf-linia); margin: 40px 0; }

img.img-responsive { margin-left: auto; margin-right: auto; }

/* ---------- Cabecera: estandarte ---------- */

.navbar.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--tf-fosc);
  border-bottom: 3px solid var(--tf-brasa);
  min-height: 0;
  z-index: 1030;
  transition: box-shadow .2s ease;
}
.navbar.tf-stuck { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }

.navbar > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.navbar > .container::before,
.navbar > .container::after { display: none; }

.tf-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  color: #fff;
  text-decoration: none;
}
.tf-brand:hover, .tf-brand:focus { color: #fff; text-decoration: none; }

.tf-medalla {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--tf-brasa);
  overflow: hidden;
}
.tf-medalla img { width: auto; height: 44px; max-width: none; }

.tf-nom { display: flex; flex-direction: column; line-height: 1; }
.tf-nom-falla {
  font-family: var(--tf-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--tf-brasa);
  margin-bottom: 4px;
}
.tf-nom-trafalgar {
  font-family: var(--tf-serif);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #fff;
}

.navbar-header { margin: 0 !important; }
.navbar-inverse .navbar-toggle {
  margin: 0;
  border-color: rgba(255, 255, 255, .35);
  border-radius: 4px;
  padding: 11px 10px;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus { background: rgba(255, 255, 255, .1); }

.navbar-collapse {
  flex-basis: 100%;
  border-top: 1px solid rgba(242, 176, 30, .3) !important;
  box-shadow: none !important;
  margin: 0 -15px !important;
}

.navbar-inverse .navbar-nav > li > a {
  font-family: var(--tf-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #dcdce4;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: var(--tf-brasa);
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--tf-brasa);
}

.dropdown-menu {
  border: 0;
  border-radius: 0 0 6px 6px;
  padding: 8px 0;
  background: var(--tf-superficie);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  border-top: 3px solid var(--tf-brasa);
}
.dropdown-menu > li > a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--tf-text);
  padding: 9px 20px;
  white-space: normal;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--tf-brasa);
}
.dropdown-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tf-text2);
  padding: 12px 20px 4px;
}
.dropdown-menu img { width: 34px; margin: 0; border-radius: 2px; }

/* Móvil */
@media (max-width: 767px) {
  .navbar-nav { margin: 6px -15px 12px; }
  .navbar-inverse .navbar-nav > li > a { padding: 12px 20px; font-size: 14px; }
  .navbar-inverse .navbar-nav .open .dropdown-menu { background: rgba(0, 0, 0, .22); border: 0; box-shadow: none; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #cfcfd8; padding: 10px 20px 10px 34px; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover { color: var(--tf-brasa); background: transparent; }
  .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-header { color: var(--tf-text2); padding-left: 34px; }
  .navbar-inverse .navbar-nav > .active > a { box-shadow: inset 3px 0 0 var(--tf-brasa); }
}

/* Escritorio: escudo centrado arriba, menú centrado debajo.
   Al hacer scroll el escudo se recoge y solo queda el menú. */
@media (min-width: 768px) {
  .navbar > .container { justify-content: center; }
  .tf-brand { padding: 22px 0 18px; gap: 20px; }
  .tf-medalla img { height: 76px; }
  .tf-medalla { width: 92px; height: 92px; box-shadow: 0 0 0 3px var(--tf-brasa), 0 0 0 7px var(--tf-fosc), 0 0 0 8px rgba(242, 176, 30, .5); }
  .tf-nom-falla { font-size: 19px; margin-bottom: 6px; }
  .tf-nom-trafalgar { font-size: 46px; }
  .navbar-header { display: none; }
  .navbar-collapse { margin: 0 !important; }
  .navbar-nav.navbar-right {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 !important;
  }
  .navbar-nav > li { float: none; }
  .navbar-nav > li > a { padding: 16px 14px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-inverse .navbar-nav > li > a { padding: 13px 9px; font-size: 12px; letter-spacing: .03em; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-inverse .navbar-nav > li > a { padding: 16px 10px; font-size: 12.5px; letter-spacing: .04em; }
}

/* ---------- Títulos de página ---------- */

.page-header {
  border: 0;
  margin: 56px 0 28px;
  padding: 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: .015em;
  color: #fff;
}
.page-header::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  background: var(--tf-brasa);
}
.page-header[align="center"]::after,
[align="center"] > .page-header::after { margin-left: auto; margin-right: auto; }
.page-header[align="center"] { font-size: 32px; margin-top: 8px; }

@media (max-width: 767px) {
  .page-header { font-size: 31px; margin-top: 36px; }
  .page-header[align="center"] { font-size: 25px; }
  h2 { font-size: 25px; }
}

/* ---------- Paginación por décadas ---------- */

.pagination { margin: 0 0 8px; border-radius: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pagination > li > a,
.pagination > li > span {
  float: none;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 4px !important;
  min-width: 52px;
  padding: 8px 12px;
  font-family: var(--tf-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--tf-text);
  background: transparent;
}
.pagination > li > a:hover,
.pagination > li > a:focus { background: rgba(255, 255, 255, .08); color: var(--tf-brasa); }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
  background: var(--tf-brasa);
  color: var(--tf-fosc);
}

/* ---------- Fotos de archivo (historia, llibrets, fallas) ---------- */

.img-portfolio { margin-bottom: 40px; }
.img-portfolio h2 { font-size: 21px; margin-top: 16px; }
.panel { border: 0; box-shadow: none; background: transparent; margin-bottom: 0; }

.img-portfolio img,
.panel-thumbnail img {
  background: #fff;
  padding: 6px;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .7);
}
img[data-target=".modal-profile-lg"] { cursor: zoom-in; }
.img-portfolio img { max-width: min(100%, 460px); }
.img-hover:hover { opacity: 1; }

/* Quadre d'honor: las cuatro fotos al mismo tamaño, aunque el archivo sea más pequeño */
img[src*="chonor/"] {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: #fff;
  padding: 6px;
  border-radius: 2px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .7);
}

.row > [class*="col-md-"] > h3:first-child { margin-top: 6px; }

/* ---------- Visor de fotos (lo crea trafalgar.js) ---------- */

#tf-visor .modal-dialog { width: auto; max-width: 980px; margin: 24px auto; padding: 0 12px; }
#tf-visor .modal-content { display: block; width: 100%; background: transparent; border: 0; box-shadow: none; }
#tf-visor .modal-body { position: relative; padding: 0; text-align: center; width: 100%; float: none; display: block; }
#tf-visor img { display: block; margin: 0 auto; max-height: calc(100vh - 110px); width: auto; max-width: 100%; background: #fff; padding: 6px; }
#tf-visor .tf-visor-tancar {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  border: 1px solid var(--tf-brasa);
  border-radius: 4px;
  background: var(--tf-fosc);
  color: var(--tf-brasa);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}
#tf-visor .tf-visor-tancar:hover { background: var(--tf-brasa); color: var(--tf-fosc); }
.modal-backdrop.in { opacity: .88; background: #15151a; }

/* ---------- Pestañas (recompensas) ---------- */

.nav-tabs { border-bottom: 2px solid var(--tf-linia); margin-bottom: 24px; }
.nav-tabs > li > a,
.nav-tabs.nav-justified > li > a {
  border: 0 !important;
  border-radius: 0;
  margin: 0 0 -2px;
  font-weight: 600;
  letter-spacing: .05em;
  font-size: 14px;
  color: var(--tf-text2);
}
.nav-tabs > li > a:hover { background: rgba(255, 255, 255, .06); color: var(--tf-brasa); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs.nav-justified > .active > a {
  color: var(--tf-brasa);
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--tf-brasa);
}
.tab-content .row { padding: 8px 0; border-bottom: 1px solid var(--tf-linia); }
.tab-content h4 { font-family: var(--tf-sans); font-weight: 600; font-size: 15px; margin: 6px 0; color: #fff; }
.tab-content p { margin: 6px 0; }

/* ---------- Documentos PDF (Apunta't, llibret) ---------- */

a.view-pdf {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  padding: 14px 18px;
  border: 1px solid var(--tf-linia);
  border-left: 4px solid var(--tf-brasa);
  border-radius: 4px;
  background: var(--tf-superficie);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
a.view-pdf::before {
  content: "\f1c1";               /* fa-file-pdf-o */
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 22px;
  color: var(--tf-brasa);
}
a.view-pdf:hover, a.view-pdf:focus { background: #44444f; color: #fff; }

.iframe-container { position: relative; height: 80vh; padding: 0 !important; }
.iframe-container iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
#myModal .modal-dialog { width: auto; max-width: 1000px; margin: 24px auto; padding: 0 12px; }

/* ---------- Contacto ---------- */

iframe[src*="google.com/maps"] {
  border: 1px solid var(--tf-linia) !important;
  border-radius: 4px;
  max-height: 70vh;
}
.fa-2x { font-size: 1.6em; }
@media (max-width: 991px) {
  iframe[src*="google.com/maps"] { height: 380px; margin-bottom: 24px; }
}

/* ---------- Carrusel de portada ---------- */

#myCarousel { background: var(--tf-fosc); }
#myCarousel .item img { width: 100%; }
#myCarousel .carousel-control {
  background: none !important;
  width: 10%;
  opacity: .75;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
#myCarousel .carousel-control:hover { opacity: 1; }
#myCarousel .carousel-indicators { bottom: 12px; margin-bottom: 0; }
#myCarousel .carousel-indicators li,
#myCarousel .carousel-indicators .active {
  width: 28px;
  height: 3px;
  margin: 0 3px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .55);
}
#myCarousel .carousel-indicators .active { background: var(--tf-brasa); }

/* ---------- Portada: llibret y palmarès ---------- */

.tf-llibret { display: flex; justify-content: center; margin: 48px 0 8px; }
.tf-llibret a.view-pdf { font-size: 16px; letter-spacing: .03em; }
.tf-llibret-accio { margin-left: auto; padding-left: 16px; font-weight: 500; font-size: 14px; color: var(--tf-brasa); white-space: nowrap; }

.tf-palmares { margin: 40px 0 16px; }
.tf-palmares > h2 {
  text-align: center;
  font-size: 36px;
  margin: 0 0 36px;
}
.tf-premi { margin-bottom: 36px; }
.tf-premi-any {
  display: block;
  font-family: var(--tf-serif);
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  color: var(--tf-brasa);
  margin: 0 0 6px;
}
.tf-premi h3 {
  font-family: var(--tf-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tf-text);
  margin: 0 0 16px;
  min-height: 2.8em;
}
.tf-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.tf-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 992px) {
  .tf-premi { border-left: 1px solid var(--tf-linia); padding-left: 24px; }
  .tf-premi:first-child { border-left: 0; padding-left: 15px; }
}
@media (max-width: 767px) {
  .tf-palmares > h2 { font-size: 27px; }
  .tf-premi-any { font-size: 48px; }
  .tf-premi h3 { min-height: 0; }
}

/* ---------- Pie ---------- */

.tf-etiquetes {
  text-align: center;
  font-family: var(--tf-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--tf-text2);
  margin: 8px auto 32px;
}

footer.tf-peu {
  margin: 0;
  padding: 36px 0 28px;
  background: var(--tf-fosc);
  box-shadow: 0 0 0 100vmax var(--tf-fosc);
  clip-path: inset(0 -100vmax);
  border-top: 3px solid var(--tf-brasa);
  color: var(--tf-text2);
  font-size: 15px;
}
.tf-peu-graella {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}
.tf-peu-id { display: flex; align-items: center; gap: 16px; }
.tf-peu-id img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--tf-brasa);
}
.tf-peu-id p { margin: 0; }
.tf-peu-nom { font-family: var(--tf-serif); font-size: 18px; color: #fff; font-weight: 600; margin-bottom: 4px !important; }
.tf-xarxes { display: flex; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.tf-xarxes a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--tf-brasa);
  border: 1px solid var(--tf-linia);
  background: var(--tf-superficie);
  font-size: 18px;
  text-decoration: none;
}
.tf-xarxes a:hover, .tf-xarxes a:focus { color: var(--tf-fosc); background: var(--tf-brasa); border-color: var(--tf-brasa); }
.tf-credit img { max-height: 44px; width: auto; }

@media (max-width: 767px) {
  .tf-peu-graella { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tf-peu-id { flex-direction: column; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .carousel-inner > .item { transition: none !important; }
}

/* ==========================================================
   Línia del temps (historia.html, historia_c.html, historia_i.html)
   ========================================================== */

.tf-historia-cap { max-width: 760px; }
.tf-historia-intro { font-size: 18px; color: var(--tf-text); margin-bottom: 18px; }
.tf-apartats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; color: var(--tf-text2); }
.tf-apartats ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tf-apartats a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--tf-linia);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tf-text);
  text-decoration: none;
}
.tf-apartats a:hover, .tf-apartats a:focus { border-color: var(--tf-brasa); color: var(--tf-brasa); }

/* Barra de décadas, pegada bajo el menú */
.tf-decades {
  position: -webkit-sticky;
  position: sticky;
  top: var(--tf-nav-visible, 0px);
  z-index: 20;
  margin: 32px -15px 8px;
  padding: 10px 15px;
  background: rgba(36, 36, 43, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tf-linia);
}
.tf-decades ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.tf-decades a {
  display: block;
  min-width: 50px;
  padding: 4px 10px;
  border-radius: 4px;
  text-align: center;
  font-family: var(--tf-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--tf-text);
  text-decoration: none;
}
.tf-decades a:hover, .tf-decades a:focus { background: rgba(255, 255, 255, .08); color: var(--tf-brasa); }
.tf-decades a.actiu { background: var(--tf-brasa); color: var(--tf-fosc); }

/* La línea vertical y cada exercici */
.tf-linia { position: relative; padding: 8px 0 24px; }
.tf-decada { scroll-margin-top: calc(var(--tf-nav-visible, 0px) + 70px); }
.tf-decada > h2 {
  position: relative;
  margin: 48px 0 24px;
  padding-left: 170px;
  font-size: 30px;
  color: var(--tf-brasa);
}

.tf-ex {
  --col-any: 150px;
  position: relative;
  display: grid;
  grid-template-columns: var(--col-any) auto 1fr;
  gap: 0 28px;
  align-items: start;
  padding: 0 0 40px;
  scroll-margin-top: calc(var(--tf-nav-visible, 0px) + 70px);
}
/* línea */
.tf-ex::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--col-any);
  width: 2px;
  margin-left: 13px;
  background: linear-gradient(var(--tf-brasa), rgba(242, 176, 30, .35));
}
/* chispa en la línea */
.tf-ex::after {
  content: "";
  position: absolute;
  top: 14px;
  left: var(--col-any);
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--tf-espurna);
  box-shadow: 0 0 0 3px var(--tf-fons), 0 0 12px 3px rgba(242, 176, 30, .75);
}

.tf-ex-any {
  margin: 0;
  text-align: right;
  font-family: var(--tf-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}
.tf-ex-any span {
  display: block;
  margin-top: 6px;
  font-family: var(--tf-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tf-text2);
}

/* Las tres miniaturas: falla major, fallera major i president, infantils.
   La altura es fija y el ancho se adapta a cada foto: no se recorta nada
   (los nombres van dentro de la imagen). */
.tf-ex-fotos {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-left: 28px;
}
.tf-ex-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 230px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: zoom-in;
}
.tf-ex-marc {
  display: block;
  padding: 5px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .75);
}
.tf-ex-marc img {
  display: block;
  height: 170px;
  width: auto;
  min-width: 110px;
  max-width: 220px;
  object-fit: contain;
  background: #fff;
}
.tf-ex-etiqueta {
  max-width: 150px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tf-text2);
}
.tf-ex-mini:hover .tf-ex-marc,
.tf-ex-mini:focus-visible .tf-ex-marc { box-shadow: 0 0 0 3px var(--tf-brasa), 0 12px 28px -12px rgba(0, 0, 0, .75); }
.tf-ex-mini:hover .tf-ex-etiqueta,
.tf-ex-mini:focus-visible .tf-ex-etiqueta { color: var(--tf-brasa); }

.tf-ex-text { grid-column: 3; min-width: 0; }
.tf-ex-lemes { margin: 4px 0 0; }
.tf-ex-lemes dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-brasa);
  margin-top: 14px;
}
.tf-ex-lemes dt:first-child { margin-top: 0; }
.tf-ex-lemes dd {
  margin: 2px 0 0;
  font-family: var(--tf-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  max-width: 30ch;
}
.tf-ex-mes { margin: 16px 0 0; }
.tf-ex-mes button {
  padding: 6px 12px;
  border: 1px solid var(--tf-linia);
  border-radius: 4px;
  background: transparent;
  color: var(--tf-text);
  font-size: 13px;
  font-weight: 600;
}
.tf-ex-mes button:hover, .tf-ex-mes button:focus { border-color: var(--tf-brasa); color: var(--tf-brasa); }

/* Pantallas medianas: las fotos arriba y los lemas debajo */
@media (max-width: 1199px) {
  .tf-ex { grid-template-columns: var(--col-any) 1fr; }
  .tf-ex-text { grid-column: 2; margin: 18px 0 0 28px; }
  .tf-ex-lemes dd { max-width: 44ch; }
}

/* Móvil: línea a la izquierda, año arriba, fotos y lemas debajo */
@media (max-width: 767px) {
  .tf-decades { margin-left: -15px; margin-right: -15px; }
  .tf-decades a { min-width: 40px; font-size: 18px; padding: 4px 6px; }
  .tf-decada > h2 { padding-left: 34px; font-size: 25px; }
  .tf-ex {
    --col-any: 0px;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 0 34px 34px;
  }
  .tf-ex::before { left: 0; margin-left: 5px; }
  .tf-ex::after { left: 0; margin-left: 0; top: 10px; }
  .tf-ex-any { text-align: left; font-size: 32px; display: flex; align-items: baseline; gap: 10px; }
  .tf-ex-any span { display: inline; margin: 0; }
  .tf-ex-fotos { grid-column: 1; margin: 0; gap: 10px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .tf-ex-mini { flex: none; }
  .tf-ex-marc { padding: 3px; }
  .tf-ex-marc img { height: 118px; min-width: 80px; max-width: 170px; }
  .tf-ex-etiqueta { max-width: 110px; font-size: 11px; }
  .tf-ex-text { grid-column: 1; margin: 4px 0 0; }
  .tf-ex-lemes dd { font-size: 18px; }
}

/* Visor en modo galería */
#tf-visor .tf-visor-marc { position: relative; display: flex; align-items: center; justify-content: center; }
#tf-visor .tf-visor-fletxa {
  display: none;
  flex: none;
  width: 48px;
  height: 64px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 52px;
  line-height: 1;
  opacity: .8;
}
#tf-visor .tf-visor-fletxa:hover, #tf-visor .tf-visor-fletxa:focus { opacity: 1; color: var(--tf-brasa); }
#tf-visor.tf-visor-galeria .tf-visor-fletxa { display: block; }
#tf-visor.tf-visor-galeria .tf-visor-marc img { max-height: calc(100vh - 210px); }
#tf-visor .tf-visor-peu { margin: 12px auto 0; color: #fff; font-size: 15px; font-weight: 500; max-width: none; }
#tf-visor .tf-visor-peu:empty { display: none; }
#tf-visor .tf-visor-compte { margin-left: 12px; color: var(--tf-text2); font-weight: 400; }
#tf-visor .tf-visor-miniatures { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
#tf-visor .tf-visor-miniatures:empty { display: none; }
#tf-visor .tf-visor-miniatures button {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  background: transparent;
  opacity: .6;
}
#tf-visor .tf-visor-miniatures button.actiu,
#tf-visor .tf-visor-miniatures button:hover { opacity: 1; border-color: var(--tf-brasa); }
#tf-visor .tf-visor-miniatures img { display: block; width: 44px; height: 56px; object-fit: cover; padding: 0; background: #fff; }
@media (max-width: 767px) {
  #tf-visor .tf-visor-fletxa { width: 34px; font-size: 40px; }
  #tf-visor.tf-visor-galeria .tf-visor-marc img { max-height: calc(100vh - 230px); max-width: calc(100% - 68px); }
  #tf-visor .tf-visor-miniatures img { width: 34px; height: 44px; }
}

/* ---------- Portada: cuenta atrás para las Fallas ---------- */

.tf-compte[hidden] { display: none; }
.tf-compte {
  margin: 56px auto 8px;
  text-align: center;
}
.tf-compte-dies {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: none;
}
.tf-compte-num {
  font-family: var(--tf-serif);
  font-size: 136px;
  font-weight: 500;
  line-height: .95;
  color: var(--tf-brasa);
  text-shadow: 0 0 28px rgba(242, 176, 30, .35);
  font-variant-numeric: lining-nums;
}
.tf-compte-num:empty { display: none; }
.tf-compte-text {
  margin-top: 6px;
  font-family: var(--tf-serif);
  font-size: 30px;
  font-weight: 500;
  color: #fff;
}
.tf-compte-falles .tf-compte-text { font-size: 44px; color: var(--tf-brasa); }
.tf-compte-peu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin: 12px auto 0;
  max-width: none;
  font-size: 15px;
  color: var(--tf-text2);
}
.tf-compte-rellotge {
  font-variant-numeric: tabular-nums;
  color: var(--tf-text);
}
.tf-compte-rellotge:empty { display: none; }
@media (max-width: 767px) {
  .tf-compte { margin-top: 40px; }
  .tf-compte-num { font-size: 96px; }
  .tf-compte-text { font-size: 23px; }
  .tf-compte-falles .tf-compte-text { font-size: 32px; }
}