/* ═══════════════════════════════════════════════════════════════
   Páginas interiores · Ayuntamiento de Moreruela de Tábara
   Se carga después de styles.css y reutiliza sus variables y
   componentes (cabecera, pie, botones, .estado…).
   Este archivo solo añade lo propio de las interiores.
   ═══════════════════════════════════════════════════════════════ */

/* ── Cabecera: la identidad enlaza a Inicio ───────────────────── */
.cabecera__inicio {
  display: flex;
  /* El escudo va a la izquierda del nombre. */
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  border-radius: 2px;
}
.cabecera__inicio:hover .cabecera__ayto { color: var(--teja-oscura); }

/* ── Menú móvil (details/summary, sin JavaScript) ─────────────── */
.menu-movil { display: none; }

@media (max-width: 720px) {
  .interior .nav-escritorio { display: none; }

  .interior .cabecera__marco {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
  }

  .menu-movil { display: block; position: relative; }

  .menu-movil__boton {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .55rem 1rem;
    border: 1.5px solid var(--tinta);
    border-radius: var(--radio);
    font-weight: 600;
    font-size: .9rem;
    background: var(--papel);
  }
  .menu-movil__boton::-webkit-details-marker { display: none; }
  .menu-movil__boton::after {
    content: '';
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
  }
  .menu-movil[open] .menu-movil__boton::after { transform: rotate(-135deg) translateY(-2px); }

  .menu-movil__nav {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 60;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    background: var(--papel);
    border: 1.5px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: 0 12px 28px rgba(44, 36, 27, .18);
    padding: .4rem;
  }

  .menu-movil__nav a,
  .menu-movil__nav .nav-pueblos__boton {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: .6rem .85rem;
    text-decoration: none;
    color: var(--tinta);
    font-weight: 500;
    font-size: .95rem;
    border-radius: 3px;
  }
  .menu-movil__nav a:hover,
  .menu-movil__nav .nav-pueblos__boton:hover { background: var(--crema-2); }
  .menu-movil__nav a[aria-current="page"] {
    font-weight: 700;
    color: var(--teja-oscura);
    background: var(--crema-2);
  }

  .menu-movil__planifica {
    margin-top: .3rem;
    border-top: 1px solid var(--linea);
    font-weight: 700;
  }
}

/* Página activa en el menú de escritorio */
.nav-escritorio a[aria-current="page"] {
  background: var(--crema-2);
  font-weight: 700;
}
.nav-escritorio .cabecera__cta[aria-current="page"] {
  background: var(--tinta);
  color: var(--crema);
}

/* ── Migas de pan ─────────────────────────────────────────────── */
.migas {
  border-bottom: 1px solid var(--linea);
  background: var(--crema);
}

.migas__lista {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: .55rem 1.25rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  font-size: .78rem;
  color: var(--tinta-suave);
}

.migas__lista li { display: flex; align-items: center; gap: .2rem; }
.migas__lista li + li::before {
  content: '›';
  color: var(--linea);
  padding-inline: .25rem;
}
.migas__lista a {
  color: inherit;
  text-decoration: none;
  /* Alto y ancho cómodos para el dedo sin engordar la línea de migas: con .35rem
     una miga corta como «Inicio» se quedaba en 42 px de ancho. */
  padding: .75rem .55rem;
  margin: -.4rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.migas__lista a:hover { color: var(--teja-oscura); text-decoration: underline; }
.migas__lista li[aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* ── Estructura de página ─────────────────────────────────────── */
.pagina {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 2.4rem 1.25rem 4.5rem;
}

.encabezado {
  max-width: 46rem;
  margin-bottom: 2.4rem;
}

.encabezado h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  font-weight: 540;
  font-variation-settings: 'opsz' 110;
  margin-bottom: .9rem;
}

.encabezado__entrada {
  font-size: 1.08rem;
  color: var(--tinta-suave);
}

.encabezado .estado { margin-top: .6rem; }

/* Anotación de comprobación */
.comprobado {
  font-size: .78rem;
  color: var(--tinta-suave);
  letter-spacing: .01em;
}

/* Dato práctico que conviene no perder de vista al leer en diagonal:
   dónde arranca un camino, dónde se aparca. */
.destacado {
  margin: 1.1rem 0;
  padding: .9rem 1.15rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.destacado strong { color: var(--tinta); }

/* ── Secciones dentro de página ───────────────────────────────── */
.seccion { margin-top: 3rem; }
.seccion > h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 560;
  border-bottom: 1.5px solid var(--tinta);
  padding-bottom: .55rem;
  margin-bottom: 1.2rem;
}
.seccion > h3 {
  font-size: 1.12rem;
  font-weight: 620;
  margin: 1.6rem 0 .5rem;
}
.seccion > p, .seccion > ul { max-width: 46rem; }

/* Los enlaces «Ficha completa →» ocupan ellos solos su párrafo: no son enlaces
   dentro de una frase, así que no les vale la exención de objetivo en línea de
   WCAG 2.5.8 y necesitan los 44 px de alto. */
.seccion p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.seccion ul.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.seccion ul.lista li {
  padding-left: 1.1rem;
  position: relative;
}
.seccion ul.lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: .34rem;
  height: .34rem;
  background: var(--teja);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ── Rejillas de tarjetas ─────────────────────────────────────── */
.rejilla-2, .rejilla-3 {
  display: grid;
  gap: 1.2rem;
}
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }

/* Tarjeta-enlace (reutiliza la base .tarjeta de styles.css) */
.tarjeta--enlace {
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.tarjeta--enlace:hover { border-color: var(--teja); }

.tarjeta__ir {
  margin-top: auto;
  padding-top: .5rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--teja-oscura);
}

/* ── Ficha patrimonial ────────────────────────────────────────── */
.ficha {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 2.6rem;
  align-items: start;
}

.ficha__datos {
  border-top: 1.5px solid var(--tinta);
  font-size: .9rem;
}

.ficha__datos > div {
  padding: .8rem 0;
  border-bottom: 1px solid var(--linea);
}

.ficha__datos dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--tinta-suave);
  margin-bottom: .25rem;
}
.ficha__datos dd { margin: 0; }
.ficha__datos dd + dd { margin-top: .3rem; }

.ficha__datos ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.ficha__datos a { color: var(--teja-oscura); }

/* Cronología */
.cronologia {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cronologia li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1.2rem;
  padding: .85rem 0;
  border-top: 1px solid var(--linea);
}
.cronologia li:last-child { border-bottom: 1px solid var(--linea); }
.cronologia .cuando {
  font-family: var(--serif);
  font-weight: 620;
  color: var(--teja);
  line-height: 1.3;
}
.cronologia .que { font-size: .95rem; color: var(--tinta-suave); }
.cronologia .que strong { color: var(--tinta); }

/* ── Conexión entre pueblos ───────────────────────────────────── */
.conexion-pueblo {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--papel);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease;
}
.conexion-pueblo:hover { border-color: var(--teja); }

/* La figura reserva una fila propia para el crédito: sin ella, el figcaption
   caía fuera de la tarjeta y el overflow:hidden lo recortaba. */
.conexion-pueblo figure {
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.conexion-pueblo img { width: 100%; height: 100%; object-fit: cover; }

.conexion-pueblo__cuerpo {
  padding: 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
}

.conexion-pueblo__rotulo {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--tinta-suave);
}

.conexion-pueblo__nombre {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 560;
  line-height: 1.15;
}

.conexion-pueblo__distancia {
  font-family: var(--serif);
  font-style: italic;
  color: var(--teja-oscura);
  font-size: .98rem;
}

.conexion-pueblo__ir { font-weight: 600; font-size: .9rem; color: var(--teja-oscura); }

/* ── Llamada a planificar ─────────────────────────────────────── */
.planifica-cta {
  margin-top: 3rem;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--crema-2);
  padding: 1.6rem 1.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.planifica-cta p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 520;
  max-width: 34rem;
}

/* Marcador del teléfono pendiente (nunca un enlace tel:) */
.telefono-marcador {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--teja-oscura);
  border: 1.5px solid rgba(163, 68, 31, .5);
  border-radius: 3px;
  padding: .1rem .45rem;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

/* ── Alrededores ──────────────────────────────────────────────────
   La página se lee por temas —el río, los monasterios, la fiesta— y el
   tiempo de coche queda como dato de servicio y como filtro. Cada
   excursión es una banda con foto, alternando el lado para que la
   lectura tenga ritmo y no parezca un catálogo de fichas. */

/* Filtro por tiempo: nace oculto y lo revela el JavaScript, de modo que
   sin él se ven las diez excursiones. */
.filtro {
  margin: 2.2rem 0 0;
  padding: 1rem 0;
  border-block: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.1rem;
}
.filtro[hidden] { display: none; }

.filtro__titulo {
  margin: 0;
  font-family: var(--sans);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--tinta-suave);
}

.filtro__grupo { display: flex; flex-wrap: wrap; gap: .45rem; }

.filtro__opcion {
  min-height: 44px;
  padding: .4rem 1rem;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 600;
  color: var(--tinta);
  background: transparent;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filtro__opcion:hover { border-color: var(--tinta-suave); }
.filtro__opcion[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--crema);
}

.filtro__recuento {
  margin: 0 0 0 auto;
  font-size: .84rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* ── Temas ───────────────────────────────────────────────────── */
.tema { margin-top: 3.4rem; }
.tema[hidden] { display: none; }
.tema > h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 560;
  border-bottom: 1.5px solid var(--tinta);
  padding-bottom: .55rem;
  margin-bottom: 1rem;
}
.tema__intro {
  max-width: 62ch;
  color: var(--tinta-suave);
  font-size: .98rem;
  margin: 0 0 2.2rem;
}

/* ── Excursión ───────────────────────────────────────────────── */
.excursion {
  display: grid;
  /* Columnas iguales: si no, la foto cambia de tamaño al cambiar de lado. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6rem 2.4rem;
  align-items: center;
  padding-bottom: 2.6rem;
}
.excursion[hidden] { display: none; }

/* La foto cambia de lado en las pares: el ritmo lo marca la alternancia,
   no una retícula de tarjetas iguales. */
.excursion:nth-of-type(even) .excursion__foto { order: 2; }

.excursion__foto { margin: 0; }

/* El monasterio lleva dos vistas: la cabecera y el refectorio, apiladas. */
.excursion__foto--par {
  display: grid;
  gap: .6rem;
}
.excursion__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
}

.excursion .excursion__min {
  font-family: var(--serif);
  font-weight: 620;
  font-size: 1.25rem;
  color: var(--teja);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin: 0 0 .15rem;
}

.excursion h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 620;
  margin: 0 0 .5rem;
}

.excursion__cuerpo p { font-size: 1rem; color: var(--tinta-suave); margin: 0 0 .7rem; max-width: 62ch; }
.excursion__cuerpo p:last-child { margin-bottom: 0; }

.excursion__cuerpo .excursion__meta {
  font-size: .86rem;
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
}
.excursion__meta strong { color: var(--tinta); font-weight: 600; }

/* «Para quién» y «Antes de ir» son dos avisos distintos: cada uno en su
   línea se escanea sin leer la frase entera. */
.excursion__campo { display: block; }
.excursion__campo + .excursion__campo { margin-top: .3rem; }

.vecinos__vacio {
  margin: 2rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
}
.vecinos__vacio[hidden] { display: none; }


/* ── Preguntas frecuentes ─────────────────────────────────────── */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 2.4rem;
}
.faq div { border-top: 1px solid var(--linea); padding-top: .9rem; }
.faq h3 { font-size: 1.02rem; font-weight: 620; margin: 0 0 .4rem; }
.faq p { font-size: .92rem; color: var(--tinta-suave); margin: 0; }

/* ── Pie interior ─────────────────────────────────────────────── */
.pie__marco--interior { grid-template-columns: 1fr 1fr 1.6fr; }

/* Rejilla de dos columnas: escudo a la izquierda, nombre y provincia a la derecha. */
.pie__inicio {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .9rem;
}
.pie__inicio:hover .pie__ayto { color: var(--teja-oscura); }

.pie__nav {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  align-items: flex-start;
}
.pie__nav a,
.pie__nav .nav-pueblos__boton {
  text-decoration: none;
  color: var(--tinta-suave);
  font-size: .88rem;
  padding: .7rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pie__nav a:hover,
.pie__nav .nav-pueblos__boton:hover { color: var(--teja-oscura); text-decoration: underline; }

.pie__titulo-columna {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--tinta-suave);
  margin: 0 0 .8rem;
}
.pie--interior .pie__columna p { font-size: .85rem; color: var(--tinta-suave); }

/* Foco visible también sobre fondos oscuros */
.bloque--tinta :focus-visible,
.pie--interior .pie__marco--interior :focus-visible { outline-color: var(--teja); }
.franja-esla :focus-visible { outline-color: var(--crema); }

/* ── Adaptación ───────────────────────────────────────────────── */
@media (max-width: 940px) {
  .rejilla-3 { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; gap: 2rem; }
  .faq { grid-template-columns: 1fr; }
  .pie__marco--interior { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pagina { padding: 1.8rem 1rem 3.5rem; }
  .seccion > h3 { font-size: 1.05rem; }
  .rejilla-2 { grid-template-columns: 1fr; }
  .conexion-pueblo { grid-template-columns: 1fr; }
  .conexion-pueblo img { aspect-ratio: 16 / 9; }
  .cronologia li { grid-template-columns: 1fr; gap: .25rem; }
  /* Una sola columna: la foto encabeza cada excursión y la alternancia de
     lados deja de tener sentido. */
  .excursion { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 2.2rem; }
  .excursion:nth-of-type(even) .excursion__foto { order: 0; }
  .filtro__recuento { margin-left: 0; width: 100%; }
  .migas__lista { padding-inline: 1rem; }
}

/* ── Columna centrada (páginas de los dos pueblos) ────────────── */
/* El contenido de estas páginas se lee en una sola columna, centrada
   dentro del ancho de la página en lugar de alineada a la izquierda. */
.columna-centrada {
  max-width: 46rem;
  margin-inline: auto;
}
.columna-centrada .encabezado { max-width: none; }

/* ── Móviles estrechos · 320-480 px ───────────────────────────────
   Complementa al tramo de 720 px; nada de esto afecta a anchos
   mayores. */
@media (max-width: 480px) {
  .pagina { padding: 1.6rem .85rem 3rem; }
  .migas__lista { padding-inline: .85rem; }

  /* A 320 px la cabecera envuelve y el panel del menú, anclado al
     botón, se salía por la izquierda de la pantalla. Se ancla al
     ancho de la cabecera. */
  .menu-movil { position: static; }
  .menu-movil__nav {
    left: .85rem;
    right: .85rem;
    min-width: 0;
  }

  .conexion-pueblo__cuerpo { padding: 1.2rem 1.1rem; }

  /* En pantalla pequeña la letra de servicio no baja de 14 px. */
  .excursion { padding-bottom: 2rem; }
  .excursion__cuerpo p { font-size: .95rem; }
  .excursion .excursion__min { font-size: 1.15rem; }
  .excursion__cuerpo .excursion__meta { font-size: .88rem; }
  .filtro { gap: .5rem .8rem; }
  .filtro__opcion { padding: .4rem .85rem; font-size: .84rem; }
}

/* ── Carrusel de fotos (páginas de los dos pueblos) ───────────────
   Sin JavaScript las diapositivas quedan apiladas, cada una con su
   crédito; .carrusel--activo lo añade el script y es lo que convierte
   la pila en carrusel. */
.carrusel { margin: 0 0 .6rem; }

.carrusel__pista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}

.carrusel__diapo { margin: 0; }
/* Sin pie de foto, la imagen llena el marco del carrusel. */
.carrusel__diapo figure { margin: 0; }
.carrusel__diapo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
}
/* Modo carrusel */
.carrusel--activo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
}
.carrusel--activo .carrusel__pista {
  display: flex;
  gap: 0;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.carrusel--activo .carrusel__diapo {
  flex: 0 0 100%;
  min-width: 0;
}
.carrusel--activo .carrusel__diapo img { border-radius: 0; }

.carrusel__controles {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: .6rem;
  pointer-events: none;
}

.carrusel__flecha {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  cursor: pointer;
}
.carrusel__flecha:hover { background: var(--papel); }

/* Los puntos van sobre el borde inferior de la foto. */
.carrusel__puntos {
  position: absolute;
  left: 50%;
  bottom: .55rem;
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  gap: .15rem;
  padding: .15rem .3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 78%, transparent);
}

/* El punto se ve pequeño (lo dibuja el ::before), pero el botón ocupa 44 px para
   que se pueda pulsar con el pulgar sin acertar en un círculo de 22 px. */
.carrusel__punto {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
}
.carrusel__punto::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tinta) 35%, transparent);
  border: 1px solid var(--papel);
  transition: background-color .15s ease;
}
.carrusel__punto--activo::before { background: var(--teja); }

@media (prefers-reduced-motion: reduce) {
  .carrusel--activo .carrusel__pista { transition: none; }
}

@media (max-width: 480px) {
  /* Solo se reduce el tipo: el control mantiene los 44 px mínimos de objetivo
     táctil, que es justo donde más falta hacen. */
  .carrusel__flecha { font-size: 1.3rem; }
}

/* ── Marcador de dato pendiente ───────────────────────────────────
   Solo aparece en las páginas legales, mientras el Ayuntamiento no haya
   aportado sus datos. Se pinta con el rojo teja del sitio y en versalitas para
   que sea imposible confundirlo con contenido real. El generador impide
   publicar mientras quede uno: ver la comprobación de `URL_BASE` en
   scripts/generar-paginas.mjs. */
.pendiente {
  background: none;
  color: var(--teja-oscura);
  border: 1px dashed var(--teja);
  border-radius: var(--radio);
  padding: .05em .4em;
  font-family: var(--sans);
  font-size: .82em;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: normal;
}

/* ── Página de créditos fotográficos ─────────────────────────── */
.creditos__lista {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
}
.creditos__lista li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
}
.creditos__lista li:first-child { border-top: 1px solid var(--linea); }

.creditos__que {
  display: block;
  font-weight: 600;
}
.creditos__quien {
  display: block;
  margin-top: .15rem;
  font-size: .88rem;
  color: var(--tinta-suave);
}
.creditos__quien a { color: inherit; }