/* Portada y «Nuestra historia». */
/* Intro */
#intro { max-height: none; padding-top: 26px; }
#intro .eti { color: var(--rojo); font-size: 1.2rem; }
#intro h1 { font-size: var(--t-xxl); line-height: 1.02; font-weight: 350; margin-top: 12px; font-variation-settings: "opsz" 72; }
#intro h1 em { font-style: italic; }
#intro .resumen { margin-top: 14px; color: var(--tinta-2); font-size: 1.05rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--tinta); color: var(--papel);
  border: 1px solid var(--tinta); border-radius: 3px;
  padding: 12px 22px 13px;
  font-family: var(--serif); font-size: 1.06rem;
  transition: transform .15s, background .2s;
  text-decoration: none;
}
.boton:hover { background: #3a3029; }
.boton:active { transform: scale(.98); }
.boton.claro { background: transparent; color: var(--tinta); }
.boton.claro:hover { background: rgba(42,35,30,.05); }
.enlace {
  background: none; border: 0; padding: 4px 0;
  font-family: var(--serif); font-size: 1.02rem;
  color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--frontera);
}
.enlace:hover { text-decoration-color: var(--tinta); }
.flecha { font-family: var(--serif); font-size: 1.1rem; line-height: 0; letter-spacing: 0; text-transform: none; }

/* Historia */
#historia { padding-top: 0; max-height: 58%; }
.progreso { position: sticky; top: 0; height: 2px; background: var(--linea); margin: 0 -22px 18px; z-index: 1; }
.progreso i { display: block; height: 100%; background: var(--rojo); transition: width .6s ease; }
.capitulo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-right: 44px; }
.capitulo-cab .eti:first-child { color: var(--rojo); }
#historia h2 { font-size: var(--t-xl); line-height: 1.08; margin-top: 10px; font-variation-settings: "opsz" 60; }
#historia .lugar-de { margin-top: 6px; font-style: italic; color: var(--tinta-2); }
#historia .texto { margin-top: 14px; }
#historia .texto p + p { margin-top: .8em; }
.historia-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.historia-nav .boton { flex: 1; max-width: 260px; }
.circulo {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1px solid var(--linea); background: transparent; display: grid; place-items: center;
}
.circulo:disabled { opacity: .3; cursor: default; }
.circulo svg { width: 16px; height: 16px; }
.fin-fechas { font-family: var(--serif); font-size: clamp(1.15rem, 4.6vw, 1.5rem); letter-spacing: .02em; font-variant-numeric: tabular-nums lining-nums; color: var(--rojo); margin-top: 8px; }
.fin-titulo { font-size: var(--t-xxl) !important; line-height: 1 !important; font-weight: 350 !important; margin-top: 14px !important; }

/* Piezas compartidas con la historia */
.lema { font-style: italic; font-size: var(--t-l); line-height: 1.25; color: var(--tinta); margin-top: 6px !important; }
.chips { display: flex; flex-wrap: wrap; margin-top: 14px; gap: 4px 16px; }
.chip {
  background: none; border: 0; padding: 2px 0;
  font-size: 1.08rem; font-style: italic; color: var(--tinta);
  text-decoration: underline; text-decoration-color: var(--frontera); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.chip:hover { text-decoration-color: var(--tinta); }
.chip.actual { color: var(--rojo); text-decoration-color: var(--rojo); }
.pie-foto { font-size: .92rem; font-style: italic; color: var(--tinta-2); margin-top: 8px !important; }