/* ═══════════════════════════════════════════════════════════════
   Web turística · Ayuntamiento de Moreruela de Tábara (Zamora)
   Dirección visual: «tierra y luz castellana»
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/public-sans-latin-var.woff2') format('woff2');
}

:root {
  /* Paleta tierra: piedra, cereal, teja */
  --crema: #f6f1e6;
  --crema-2: #eee6d4;
  --papel: #fbf8f1;
  --piedra: #d9cdb4;
  --linea: #cfc2a6;
  --tinta: #2c241b;
  --tinta-suave: #5d5344;
  --teja: #a3441f;
  --teja-oscura: #7c3115;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', 'Segoe UI', system-ui, sans-serif;

  --ancho: 1120px;
  --radio: 4px;
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height: auto neutraliza el alto que el navegador deduce de los atributos
   width/height del <img> (puestos para reservar espacio y evitar saltos de
   maquetación); sin él ese alto fijo anularía los aspect-ratio del diseño. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 560;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teja-oscura); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--teja);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--teja); color: var(--crema); }

.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: var(--crema);
  padding: .75rem 1.25rem;
  z-index: 100;
}
.salto:focus { left: 0; }


/* ── Cabecera ─────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.cabecera__marco {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: .65rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cabecera__sello { margin: 0; display: flex; flex-direction: column; gap: .1rem; }

.cabecera__ayto {
  font-family: var(--serif);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.15;
  letter-spacing: .01em;
}

.cabecera__prov {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinta-suave);
}

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}

.cabecera__nav a,
.cabecera__nav .nav-pueblos__boton {
  text-decoration: none;
  color: var(--tinta);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .55rem .7rem;
  border-radius: var(--radio);
  transition: background-color .15s ease, color .15s ease;
}
.cabecera__nav a:hover,
.cabecera__nav .nav-pueblos__boton:hover { background: var(--crema-2); }

.cabecera__nav .cabecera__cta {
  border: 1.5px solid var(--tinta);
  margin-left: .35rem;
}
.cabecera__nav .cabecera__cta:hover {
  background: var(--tinta);
  color: var(--crema);
}

/* ── Hero · collage ilustrado ─────────────────────────────────── */
.hero {
  padding: 1.6rem 1.25rem 0;
  overflow: hidden;
}

.hero__lienzo {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  aspect-ratio: 1600 / 1000;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__ruta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* Bloques de papel de color */
.b-bloque--azul   { fill: #31445a; }
.b-bloque--oliva  { fill: #4c5834; }
.b-bloque--dorado { fill: #c9973b; }

/* Grabados generados (tinta sobre papel, integrados por multiplicación) */
.hero__grabado {
  position: absolute;
  mix-blend-mode: multiply;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
  height: auto;
}

.hero__grabado--paisaje { left: 60.5%; bottom: .5%; width: 39%; }
.hero__grabado--colinas { left: 70%;   top: 54%;   width: 17.5%; }
.hero__grabado--encina  { left: 45.7%; top: 33%;   width: 8.5%; }
.hero__grabado--iglesia { left: 39%;   top: 75.5%; width: 10.5%; }

.hero__texto {
  position: absolute;
  left: 3.5%;
  top: 6%;
  width: 41%;
  z-index: 2;
}

.hero__pre {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--teja-oscura);
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.hero__linea {
  display: inline-block;
  width: 2.4rem;
  height: 1px;
  background: var(--teja);
  opacity: .6;
  flex-shrink: 0;
}

.hero__titulo {
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 520;
  font-variation-settings: 'opsz' 130;
  letter-spacing: -.01em;
  text-wrap: nowrap;
}

.hero__conector {
  font-style: italic;
  font-weight: 380;
  color: var(--teja);
  padding-right: .08em;
}

.hero__entrada {
  font-size: clamp(.92rem, 1.35vw, 1.08rem);
  color: var(--tinta-suave);
  margin-top: 1.1rem;
  max-width: 34rem;
}

.hero__acciones {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Fotografías enmarcadas como copias sobre papel */
.hero__foto {
  position: absolute;
  margin: 0;
  z-index: 1;
  background: #fbf8f1;
  padding: .55rem;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(44, 36, 27, .22);
}

.hero__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1px;
}

.hero__foto--1 {
  left: 53%;
  top: 6%;
  width: 42.5%;
  --rot: -1.1deg;
  transform: rotate(var(--rot));
}

.hero__foto--2 {
  left: 6.5%;
  top: 60%;
  width: 34%;
  --rot: 1.3deg;
  transform: rotate(var(--rot));
}

/* Etiquetas 01 / 02 */
.hero__etiqueta {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  width: max-content;
}

.hero__num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 620;
  color: var(--teja);
  line-height: 1;
}

.hero__lugar {
  font-family: var(--serif);
  font-size: clamp(.9rem, 1.3vw, 1.08rem);
  font-weight: 560;
  line-height: 1.22;
  color: var(--tinta);
}

.hero__etiqueta--1 {
  right: calc(100% + 1.1rem);
  top: 2%;
  align-items: flex-end;
  text-align: right;
  border-right: 2px solid var(--tinta);
  padding-right: .85rem;
}

.hero__etiqueta--2 {
  left: calc(100% + 1.1rem);
  top: 6%;
  align-items: flex-start;
  border-left: 2px solid var(--tinta);
  padding-left: .85rem;
}

.hero__conexion { display: none; }

/* Animaciones del collage (solo si no se prefiere movimiento reducido) */
@media (prefers-reduced-motion: no-preference) {
  .hero__grabado {
    opacity: 0;
    animation: hero-grabado 1.2s ease forwards;
  }
  .hero__grabado--paisaje { animation-delay: .55s; }
  .hero__grabado--colinas { animation-delay: .8s; }
  .hero__grabado--encina  { animation-delay: 1.05s; }
  .hero__grabado--iglesia { animation-delay: 1.3s; }

  .b-ruta-rev {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hero-trazar 2.2s ease-in-out 1.5s forwards;
  }

  .b-hito { opacity: 0; animation: hero-aparecer .5s ease forwards; }
  .b-hito--1 { animation-delay: 1.4s; }
  .b-hito--2 { animation-delay: 3.5s; }

  .b-bloques rect {
    opacity: 0;
    animation: hero-aparecer .9s ease forwards;
  }
  .b-bloque--azul   { animation-delay: .15s; }
  .b-bloque--oliva  { animation-delay: .3s; }
  .b-bloque--dorado { animation-delay: .45s; }

  .hero__foto {
    opacity: 0;
    animation: hero-foto .9s cubic-bezier(.2, .7, .3, 1) forwards;
  }
  .hero__foto--1 { animation-delay: .35s; }
  .hero__foto--2 { animation-delay: .6s; }

  .hero__etiqueta { opacity: 0; animation: hero-aparecer .8s ease forwards; }
  .hero__etiqueta--1 { animation-delay: .9s; }
  .hero__etiqueta--2 { animation-delay: 1.15s; }
}

@keyframes hero-trazar {
  to { stroke-dashoffset: 0; }
}
@keyframes hero-aparecer {
  to { opacity: 1; }
}
@keyframes hero-grabado {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: .9; transform: translateY(0); }
}
@keyframes hero-foto {
  from { opacity: 0; transform: translateY(18px) rotate(var(--rot, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.6rem;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: var(--radio);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--teja);
  color: #fff;
  border: 1.5px solid var(--teja);
}
.boton--primario:hover { background: var(--teja-oscura); border-color: var(--teja-oscura); }

.boton--secundario {
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid var(--tinta);
}
.boton--secundario:hover { background: var(--tinta); color: var(--crema); }

/* Botón de contacto por WhatsApp: relleno en tinta para no competir con el
   primario en teja, con la burbuja avisando de que se abre una conversación. */
.boton--whatsapp {
  gap: .6rem;
  background: var(--tinta);
  color: var(--crema);
  border: 1.5px solid var(--tinta);
  box-shadow: 0 1px 0 rgba(44, 36, 27, .18);
}
.boton--whatsapp:hover {
  background: var(--teja-oscura);
  border-color: var(--teja-oscura);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44, 36, 27, .22);
}
.boton--whatsapp:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(44, 36, 27, .18); }

.boton__burbuja {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}
.boton__burbuja svg { width: 100%; height: 100%; }
/* Anillo que se expande de vez en cuando, como el aviso de un mensaje nuevo */
.boton__burbuja::before {
  content: '';
  position: absolute;
  inset: -.15rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: burbuja-aviso 3.4s ease-out infinite;
}
.boton--whatsapp:hover .boton__burbuja { animation: burbuja-saludo .5s ease-in-out; }

@keyframes burbuja-aviso {
  0%   { transform: scale(.7); opacity: 0; }
  12%  { opacity: .55; }
  40%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes burbuja-saludo {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-9deg); }
  65%      { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .boton--whatsapp:hover { transform: none; }
  .boton__burbuja::before { animation: none; }
  .boton--whatsapp:hover .boton__burbuja { animation: none; }
}

/* ── Franja de visitas principales ────────────────────────────── */
.visitas {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 2.6rem 1.25rem 0;
}

.visitas__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1.5px solid var(--tinta);
}

.visitas__item {
  border-left: 1px solid var(--linea);
  display: flex;
}
.visitas__item:first-child { border-left: none; }

.visitas__enlace {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  min-height: 48px;
  padding: 1.25rem 1.1rem 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: background-color .18s ease;
}
.visitas__enlace:hover { background: var(--crema-2); }

.visitas__icono {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--teja);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s ease;
}
.visitas__enlace:hover .visitas__icono { stroke: var(--teja-oscura); }

.visitas__pie {
  margin-top: auto;
  padding-top: .45rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
}

.visitas__nombre {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.25;
  text-decoration: underline 1.5px;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease;
}
.visitas__enlace:hover .visitas__nombre,
.visitas__enlace:focus-visible .visitas__nombre {
  text-decoration-color: var(--teja);
}

.visitas__lugar {
  font-size: .82rem;
  color: var(--tinta-suave);
  line-height: 1.4;
}

/* ── Bloques ──────────────────────────────────────────────────── */
.bloque {
  padding: 4.2rem 1.25rem;
}

.bloque > * {
  max-width: var(--ancho);
  margin-inline: auto;
}

.bloque--crema2 { background: var(--crema-2); }

.bloque--tinta {
  background: var(--tinta);
  color: var(--crema);
}
.bloque--tinta a { color: var(--crema); }

.bloque__cabecera {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: .9rem;
  margin-bottom: 2.2rem;
}

.bloque__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 380;
  font-size: 1.1rem;
  color: var(--teja);
  margin: 0;
}
.bloque--tinta .bloque__num { color: #d98d63; }

.bloque__cabecera h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 540;
  font-variation-settings: 'opsz' 90;
}

.bloque__cuerpo--dos {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 3.2rem;
  align-items: start;
}

.parrafo--destacado {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 480;
  line-height: 1.4;
  color: var(--tinta);
  margin-bottom: 1.4rem;
}

/* Sección El municipio: texto breve y fotografía lateral */
.municipio__apunte {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--teja-oscura);
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
  margin-top: 1.4rem;
  max-width: 34rem;
}

.municipio__foto {
  margin: 0;
}
.municipio__foto img {
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
}
/* Foto de formato vertical: se encuadra alta para no decapitar la torre. */
.municipio__foto--alta { object-position: center 30%; }

.panorama { margin: 2.6rem auto 0; }
.panorama img {
  width: 100%;
  border-radius: var(--radio);
}

/* ── Los dos pueblos ──────────────────────────────────────────── */
/* SIN USO desde 2026-08-20: la sección 02 de la portada se retiró y su
   contenido vive ahora en el diálogo (.dialogo-pueblos). Se conserva a la
   espera de revisión; ver docs/decisiones-2026-08-20.md. */
.pueblos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.pueblo {
  border: 1px solid rgba(246, 241, 230, .28);
  border-radius: var(--radio);
  padding: 1.9rem 1.8rem;
  display: flex;
  flex-direction: column;
}

.pueblo__nombre {
  font-size: 1.55rem;
  font-weight: 540;
  font-variation-settings: 'opsz' 80;
}

.pueblo__rol {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #d98d63;
  font-weight: 600;
  margin: .5rem 0 1.1rem;
}

.pueblo__lista {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  font-size: .95rem;
  color: rgba(246, 241, 230, .88);
}

.pueblo__lista li {
  padding-left: 1.1rem;
  position: relative;
}
.pueblo__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: .38rem;
  height: .38rem;
  background: var(--teja);
  border-radius: 1px;
  transform: rotate(45deg);
}

.pueblo__enlace {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 1.5px solid #d98d63;
  padding: .35rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pueblo__enlace:hover { color: #d98d63; }

/* ── Tarjetas «qué ver» ───────────────────────────────────────── */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tarjeta__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--piedra);
}

.tarjeta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.tarjeta:hover .tarjeta__media img { transform: scale(1.04); }

.tarjeta__media--tipografica {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(44, 36, 27, .05) 14px 15px),
    var(--crema-2);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 420;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
  color: var(--tinta-suave);
}

.tarjeta__cuerpo {
  padding: 1.15rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}

.tarjeta__cuerpo h3 {
  font-size: 1.18rem;
  font-weight: 580;
}

.tarjeta__cuerpo p { font-size: .88rem; color: var(--tinta-suave); }
/* El enlace final de cada tarjeta queda pegado al fondo del cuerpo */
.tarjeta__cuerpo > p:last-child:has(> a) { margin-top: auto; padding-top: .4rem; }

/* Estado de acceso de cada recurso: anotación editorial, no etiqueta de color */
.estado {
  align-self: flex-start;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 480;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--teja-oscura);
}
.tarjeta__cuerpo .estado { font-size: .84rem; color: var(--teja-oscura); }

/* ── Franja del Esla ──────────────────────────────────────────── */
.franja-esla {
  margin: 2.6rem auto 0;
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  display: grid;
}

.franja-esla img,
.franja-esla__texto { grid-area: 1 / 1; }

.franja-esla img {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
}

.franja-esla__texto {
  align-self: end;
  padding: 5rem 2.2rem 1.8rem;
  background: linear-gradient(to top, rgba(24, 18, 12, .88) 0%, rgba(24, 18, 12, .55) 55%, transparent 100%);
  color: var(--crema);
  max-width: 100%;
}

.franja-esla__texto h3 {
  font-size: 1.5rem;
  font-weight: 540;
  margin-bottom: .6rem;
}

.franja-esla__texto p {
  max-width: 46rem;
  font-size: .95rem;
  color: rgba(246, 241, 230, .92);
}

.franja-esla__enlace { color: var(--crema); }

/* ── Alrededores ──────────────────────────────────────────────── */
.alrededores {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.2rem;
  align-items: start;
}

.alrededores__foto { margin: 0; }
.alrededores__foto img { border-radius: var(--radio); }

.alrededores__intro {
  font-size: .95rem;
  color: var(--tinta-suave);
  margin-bottom: 1.3rem;
}

.alrededores__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.alrededores__lista li {
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  padding: .68rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .95rem;
}
.alrededores__lista li:first-child { border-top: 1.5px solid var(--tinta); }

.alrededores__min {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--teja);
  min-width: 4.2rem;
  text-align: right;
  flex-shrink: 0;
}

/* ── Información / contacto ───────────────────────────────────── */
.informacion {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.informacion__lema {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 480;
  line-height: 1.3;
  margin-bottom: 1.2rem;
}

.informacion__numero {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 4.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: #d98d63;
  border: 1.5px solid rgba(217, 141, 99, .55);
  border-radius: var(--radio);
  padding: 1rem 1.4rem;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-bottom: 1rem;
}

.informacion__aclaracion {
  font-size: .88rem;
  color: rgba(246, 241, 230, .78);
  max-width: 34rem;
}

.informacion__servicios h3 {
  font-size: 1.2rem;
  font-weight: 560;
  margin-bottom: .9rem;
}

.informacion__servicios ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.informacion__servicios li {
  padding: .6rem 0;
  border-bottom: 1px solid rgba(246, 241, 230, .22);
  font-size: .95rem;
}
.informacion__servicios li:first-child { border-top: 1.5px solid rgba(246, 241, 230, .45); }


/* ── Pie ──────────────────────────────────────────────────────── */
.pie {
  background: var(--crema);
  border-top: 1.5px solid var(--tinta);
  padding: 3rem 1.25rem 2rem;
}

/* Dos bloques desde que los créditos tienen página propia: la firma a la
   izquierda y las secciones a la derecha. */
.pie__marco {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.4rem 4rem;
  align-items: start;
}

.pie__ayto {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: .4rem;
}

.pie__prov {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinta-suave);
}

.pie__columna h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--tinta-suave);
  margin-bottom: .8rem;
}

.pie__columna p { font-size: .85rem; color: var(--tinta-suave); }

.pie__creditos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .78rem;
  color: var(--tinta-suave);
}

.pie__cierre {
  max-width: var(--ancho);
  margin: 2.4rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-size: .74rem;
  color: var(--tinta-suave);
}

/* ── Revelado al hacer scroll ─────────────────────────────────── */
.revela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.revela.revela--visto {
  opacity: 1;
  transform: none;
}

/* ── Movimiento reducido ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tarjeta:hover .tarjeta__media img { transform: none; }
  .revela { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Hero apilado en pantallas estrechas ──────────────────────── */
@media (max-width: 900px) {
  .hero { padding-top: 2rem; }

  .hero__lienzo {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }

  .hero__fondo,
  .hero__ruta,
  .hero__grabado { display: none; }

  .hero__texto {
    position: static;
    width: 100%;
    max-width: 36rem;
    text-align: center;
    order: 0;
  }

  .hero__pre { justify-content: center; }
  .hero__linea { display: none; }

  .hero__titulo {
    text-wrap: balance;
    white-space: normal;
    font-size: clamp(1.9rem, 6.2vw, 2.7rem);
  }

  .hero__entrada { margin-inline: auto; }
  .hero__acciones { justify-content: center; margin-bottom: .8rem; }

  .hero__foto {
    position: static;
    width: min(92vw, 30rem);
  }
  .hero__foto--1 { order: 1; }
  .hero__foto--2 { order: 3; }

  .hero__etiqueta {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: .6rem;
    border: none;
    border-left: 2px solid var(--tinta);
    padding: 0 0 0 .7rem;
    margin: .7rem 0 0 .1rem;
    text-align: left;
    width: auto;
  }

  .hero__conexion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    order: 2;
    margin: -.2rem auto;
  }
  .hero__conexion svg { width: 54px; height: auto; }
  /* aspect-ratio explícito: con `height: auto` el navegador deduce el alto de
     los atributos width/height del <img>, pero ese cálculo llega tarde cuando la
     imagen se decodifica en asíncrono, y provoca un salto de maquetación
     intermitente (CLS de hasta 0,286 medido en móvil). Declararlo aquí reserva
     el hueco desde el primer layout. */
  .hero__conexion-img {
    width: 72px;
    height: auto;
    aspect-ratio: 380 / 390;
    mix-blend-mode: multiply;
    opacity: .9;
    align-self: flex-end;
  }
  .hero__conexion-img--iglesia {
    width: 84px;
    aspect-ratio: 400 / 410;
    align-self: flex-start;
  }
}

/* ── Adaptación a pantallas medianas ──────────────────────────── */
@media (max-width: 940px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .visitas__lista { grid-template-columns: repeat(2, 1fr); }
  .visitas__item:nth-child(odd) { border-left: none; }
  .visitas__item:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .bloque__cuerpo--dos,
  .alrededores,
  .informacion { grid-template-columns: 1fr; gap: 1.8rem; }
  .pie__marco { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ── Móvil ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body { font-size: 1rem; }

  /* En móvil la cabecera deja de ser pegajosa: ocupaba demasiada pantalla */
  .cabecera { position: static; }
  html { scroll-padding-top: 1rem; }
  .cabecera__marco { padding: .8rem 1rem; flex-direction: column; align-items: flex-start; gap: .6rem; }
  .cabecera__sello { align-items: flex-start; text-align: left; }
  .cabecera__nav { gap: .1rem; }
  .cabecera__nav a { padding: .68rem .6rem; font-size: .84rem; }
  .cabecera__nav .cabecera__cta { margin-left: .1rem; }

  .hero { padding-top: 2.4rem; }
  .hero__pre { letter-spacing: .16em; }


  .bloque { padding: 3rem 1rem; }
  .pueblos { grid-template-columns: 1fr; }
  .pueblo { padding: 1.5rem 1.3rem; }
  .tarjetas { grid-template-columns: 1fr; }

  .franja-esla__texto { padding: 4rem 1.2rem 1.4rem; }

  .alrededores__min { min-width: 3.4rem; }

  .visitas { padding-inline: 1rem; }
  .visitas__lista { grid-template-columns: 1fr; }
  .visitas__item { border-left: none; }
  .visitas__item:nth-child(n+2) { border-top: 1px solid var(--linea); }
  .visitas__enlace { padding: 1rem .2rem 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Diálogo de los dos pueblos
   Disparador en la cabecera, el menú móvil y el pie; el contenido
   vive una sola vez por página en un <dialog> nativo.
   ═══════════════════════════════════════════════════════════════ */

/* Sin JavaScript se ven los dos enlaces; con JavaScript, el botón. */
.nav-pueblos { display: contents; }
.nav-pueblos__enlaces { display: contents; }
.nav-pueblos__enlaces[hidden] { display: none; }
.nav-pueblos__boton[hidden] { display: none; }

/* Especificidad 0: si el botón lleva además .boton, mandan los estilos de .boton. */
:where(.nav-pueblos__boton) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.dialogo-pueblos {
  width: min(58rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  overflow: auto;
}
.dialogo-pueblos::backdrop { background: rgba(44, 36, 27, .55); }

.dialogo-pueblos__marco { padding: 1.6rem clamp(1.1rem, 3vw, 2rem) 1.8rem; }

.dialogo-pueblos__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1.5px solid var(--tinta);
  padding-bottom: .7rem;
  margin-bottom: 1.4rem;
}

.dialogo-pueblos__titulo {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 560;
  margin: 0;
}

.dialogo-pueblos__cerrar {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--tinta);
  background: none;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
}
.dialogo-pueblos__cerrar:hover { background: var(--crema-2); }

.dialogo-pueblos__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pueblo-tarjeta {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: var(--crema);
  overflow: hidden;
}

.pueblo-tarjeta img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--linea);
}

.pueblo-tarjeta__nombre {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: .5rem 1rem 0;
}

.pueblo-tarjeta__descripcion {
  margin: 0 1rem;
  font-size: .92rem;
  color: var(--tinta-suave);
}

.pueblo-tarjeta__figura { margin: 0; }
.pueblo-tarjeta .boton { margin: .5rem 1rem 1rem; }

@media (max-width: 720px) {
  .dialogo-pueblos__lista { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .dialogo-pueblos[open] { animation: dialogo-entra .22s ease both; }
  @keyframes dialogo-entra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* Crédito del collage de portada (fotografías y viñetas generadas) */
.hero__credito {
  max-width: var(--ancho);
  margin: .6rem auto 0;
  padding-inline: 1.25rem;
}

/* El número de la portada enlaza a WhatsApp conservando su color */
.informacion__whatsapp { color: inherit; }

/* ── Móviles estrechos · 320-480 px ───────────────────────────────
   Único tramo que el sitio no cubría: por debajo de 720 px no había
   ningún ajuste. Todo lo que sigue vive dentro de max-width: 480px,
   así que el render de tablet y escritorio queda intacto. */
@media (max-width: 480px) {
  /* Se recupera ancho de línea: 1rem de margen es mucho a 320 px. */
  .cabecera__marco,
  .hero,
  .bloque,
  .visitas { padding-inline: .85rem; }

  /* Rótulo secundario por encima de los 12 px legibles. */
  .cabecera__prov { font-size: .76rem; }

  /* Cada entrada del menú alcanza el objetivo táctil de 44 px. */
  .cabecera__nav { gap: .2rem .05rem; }
  .cabecera__nav a,
  .cabecera__nav .nav-pueblos__boton {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem .55rem;
  }
  .cabecera__nav .cabecera__cta { margin-left: 0; }
}


/* ── Escudo municipal ─────────────────────────────────────────────
   Acompaña al nombre del Ayuntamiento en la cabecera y en el pie. La
   imagen es decorativa: el nombre va en texto al lado. */
.cabecera__sello,
.cabecera__inicio {
  flex-direction: row;
  align-items: center;
  gap: .6rem;
}

/* El enlace de vuelta al inicio hereda su alto del escudo, que en pantallas
   estrechas baja a 38 px. Se le fija el mínimo táctil sin agrandar la imagen. */
.cabecera__inicio { min-height: 44px; }

.cabecera__escudo {
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

/* Escudo a la izquierda; el nombre y la provincia, apilados a su derecha. */
.pie__firma {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .9rem;
}
.pie--interior .pie__firma { display: block; }
.pie__inicio {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .9rem;
}
.pie__escudo { grid-row: 1 / span 2; }

.pie__escudo {
  height: 78px;
  width: auto;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .cabecera__escudo { height: 38px; }
  .pie__escudo { height: 62px; }
}

/* Navegación del pie de la portada: mismo trato que en las interiores,
   sin subrayados que compitan con la firma. */
.pie__creditos a,
.pie__creditos .nav-pueblos__boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: .88rem;
}
.pie__creditos a:hover,
.pie__creditos .nav-pueblos__boton:hover {
  color: var(--teja-oscura);
  text-decoration: underline;
}
.pie__creditos { gap: 0; }

.pie__cierre {
  max-width: var(--ancho);
  margin: 2.4rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea);
  font-size: .78rem;
  color: var(--tinta-suave);
}
.pie__cierre a { color: inherit; }

@media (max-width: 720px) {
  .pie__marco { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* Cambio de idioma, en la esquina superior derecha de la cabecera. */
.cabecera__idioma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .6rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tinta-suave);
  text-decoration: none;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cabecera__idioma:hover {
  color: var(--crema);
  background: var(--tinta);
  border-color: var(--tinta);
}