/* ============================================================
   QRdescubre Platform — site.css
   Vanilla CSS 2026 · Mobile-first
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------ */
:root {
  /* ============================================================
     PALETA DE MUNICIPIOS Y PUNTOS — VALORES EXACTOS del theme.css real
     en producción (acebo.qrdescubre.com / qrdescubre.com/portal/css/theme.css)
     ============================================================ */
  --verde:          #d5993e;    /* dorado intenso (botones, bordes, hover) */
  --verde-claro:    #dba95b;    /* dorado claro (gradient top, fondos suaves) */
  --verde-dark:     #c89540;    /* dorado oscuro (borders fuertes, focus) */
  /* Gradient definido con var(): theme.php puede sobreescribir --verde/--verde-claro
     para una entidad con branding propio y el gradient se reconstruye solo. */
  --verde-gradient: linear-gradient(180deg, var(--verde-claro), var(--verde));
  --verde-suave:    #fcf7f0;    /* crema fondo (sin cambios) */
  --texto-sobre-primario: #212529;  /* texto oscuro sobre el dorado (producción) */

  /* Aliases semánticos para el código */
  --color-primario: var(--verde);
  --color-suave:    var(--verde-suave);
  --color-medio:    #dec786;

  --footer-bg:      linear-gradient(180deg, #111110 0%, #2a2724 100%);

  --negro:          #0d0d0b;
  --gris-oscuro:    #1c1c1a;
  --gris:           #484844;
  --gris-medio:     #7a7a74;
  --gris-claro:     #f2f1ee;
  --gris-borde:     #deded8;
  --blanco:         #ffffff;

  --fuente-titulo:  'Playfair Display', Georgia, serif;
  --fuente-cuerpo:  'Inter', system-ui, -apple-system, sans-serif;

  --escala-xs:   clamp(0.7rem,  1.4vw, 0.8rem);
  --escala-sm:   clamp(0.85rem, 2vw,   0.95rem);
  --escala-base: clamp(1rem,    2.4vw, 1.1rem);
  --escala-md:   clamp(1.1rem,  3vw,   1.3rem);
  --escala-lg:   clamp(1.35rem, 3.5vw, 1.75rem);
  --escala-xl:   clamp(1.7rem,  5vw,   2.4rem);
  --escala-xxl:  clamp(2.2rem,  7vw,   3.8rem);

  --espacio-xs:  0.35rem;
  --espacio-sm:  0.75rem;
  --espacio-md:  1.25rem;
  --espacio-lg:  2rem;
  --espacio-xl:  3.5rem;
  --espacio-xxl: 6rem;

  --max-ancho:  1160px;
  --radio:      0.625rem;
  --radio-lg:   1.25rem;
  --radio-xl:   2rem;

  --sombra-sm:  0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.05);
  --sombra:     0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --sombra-lg:  0 10px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.07);
  --sombra-xl:  0 20px 60px rgba(0,0,0,0.20), 0 6px 20px rgba(0,0,0,0.08);
  --sombra-verde: 0 4px 20px rgba(124,177,86,0.40);

  --nav-altura: 56px;
  --transicion: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   2. RESET MÍNIMO
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--escala-base);
  line-height: 1.68;
  color: var(--gris-oscuro);
  background: var(--blanco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   3. UTILIDADES
   ------------------------------------------------------------ */
.qrd-container {
  width: 100%;
  max-width: var(--max-ancho);
  margin-inline: auto;
  padding-inline: var(--espacio-md);
}

.qrd-section-title {
  font-family: var(--fuente-titulo);
  font-size: var(--escala-lg);
  color: var(--negro);
  margin-bottom: var(--espacio-lg);
  position: relative;
  padding-bottom: var(--espacio-sm);
}
.qrd-section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 2.75rem;
  height: 3px;
  background: var(--verde-gradient);
  border-radius: 3px;
}

.qrd-prose {
  font-size: var(--escala-base);
  line-height: 1.85;
  color: var(--gris);
  max-width: 70ch;
  padding-block: var(--espacio-xl);
}
.qrd-prose p + p { margin-top: 1.2em; }

.qrd-link {
  color: var(--verde-dark);
  font-weight: 600;
  border-bottom: 1.5px solid var(--verde);
  transition: color var(--transicion);
}
.qrd-link:hover { color: var(--verde); }

/* ------------------------------------------------------------
   4. NAVBAR — verde sólido con transición
   ------------------------------------------------------------ */
.qrd-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-altura);
  background: var(--verde-gradient);
  transition: background var(--transicion), box-shadow var(--transicion);
}

.qrd-nav.is-scrolled {
  background: var(--verde-dark);
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

/* TODO el frontend que NO es comarca (municipios, puntos, fichas, galería,
   servicios, agenda…): el gradiente de marca pasa a ser el dorado exacto de
   acebo.qrdescubre.com (crema abajo → dorado arriba). Es UNA sola variable que
   alimenta a la vez el navbar y los botones (.qrd-opcion / .qrd-btn--primario),
   así todo combina automáticamente. Las comarcas conservan su verde. */
body:not(.page-comarca-portada):not(.page-comarca-contenido) {
  --verde-gradient: linear-gradient(0deg, #ECDBAB, #EDB956);
}

.qrd-nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--espacio-md);
  gap: var(--espacio-sm);
}

.qrd-nav__brand {
  font-family: var(--fuente-cuerpo);
  font-size: var(--escala-xs);
  color: rgba(33,37,41,0.72);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qrd-nav__brand::after {
  content: '/';
  margin-inline: var(--espacio-sm);
  opacity: 0.4;
}

.qrd-nav__title {
  font-family: var(--fuente-titulo);
  font-size: var(--escala-md);
  color: #212529;
  font-weight: 700;
}

/* ------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------ */
/* Sin keyframes: el efecto Ken Burns se hace con transitions
   para que se interpole suavemente durante todo el ciclo de vida
   de la slide (incluido el crossfade). Cada slide tiene un "from"
   (cuando NO está activa) y un "to" (cuando is-active) según data-fx. */

.qrd-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  /* sin max-height en móvil: la foto cubre la pantalla entera */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .qrd-hero {
    min-height: 480px;
    max-height: 900px;
  }
}

.qrd-hero__video { position: absolute; inset: 0; }
.qrd-hero__video iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;                       /* oculto hasta que el vídeo carga (onload) */
  transition: opacity 0.6s ease;
}
/* El vídeo solo se revela cuando ha cargado; si falla, queda la imagen de respaldo. */
.qrd-hero__video.is-ready iframe { opacity: 1; }
/* Capa de imagen de respaldo, justo debajo del vídeo. */
.qrd-hero__fallback { z-index: 0; }

.qrd-hero__slider,
.qrd-hero__imagen { position: absolute; inset: 0; }

.qrd-hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.45, 0, 0.15, 1);
  will-change: opacity;
}
.qrd-hero__slide.is-active { opacity: 1; }

/* Imágenes: transición LARGA del transform → Ken Burns suave sin animación CSS */
.qrd-hero__slide img,
.qrd-hero__imagen img,
.qrd-poi-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
  transition: transform 9s cubic-bezier(0.25, 0.10, 0.25, 1);
  transform: scale(1.08); /* estado por defecto: pequeño zoom inicial */
}

/* Estado de cada efecto cuando NO está activa la slide (punto de partida del paneo/zoom) */
.qrd-hero__slide[data-fx="zoom-in"]   img { transform: scale(1.00); }
.qrd-hero__slide[data-fx="zoom-out"]  img { transform: scale(1.20); }
.qrd-hero__slide[data-fx="pan-left"]  img { transform: scale(1.18) translate(4%, 0); }
.qrd-hero__slide[data-fx="pan-right"] img { transform: scale(1.18) translate(-4%, 0); }
.qrd-hero__slide[data-fx="pan-up"]    img { transform: scale(1.18) translate(0, 4%); }
.qrd-hero__slide[data-fx="pan-diag"]  img { transform: scale(1.18) translate(-3%, 3%); }

/* Estado cuando la slide ESTÁ activa: destino del transform → el navegador interpola */
.qrd-hero__slide[data-fx="zoom-in"].is-active   img { transform: scale(1.18); }
.qrd-hero__slide[data-fx="zoom-out"].is-active  img { transform: scale(1.00); }
.qrd-hero__slide[data-fx="pan-left"].is-active  img { transform: scale(1.18) translate(-4%, 0); }
.qrd-hero__slide[data-fx="pan-right"].is-active img { transform: scale(1.18) translate(4%, 0); }
.qrd-hero__slide[data-fx="pan-up"].is-active    img { transform: scale(1.18) translate(0, -4%); }
.qrd-hero__slide[data-fx="pan-diag"].is-active  img { transform: scale(1.10) translate(3%, -3%); }

/* Degradado fuerte hacia abajo donde va el título */
.qrd-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.02) 30%,
    rgba(0,0,0,0.15) 55%,
    rgba(0,0,0,0.62) 80%,
    rgba(0,0,0,0.82) 100%
  );
  z-index: 1;
}

.qrd-hero__content {
  position: relative; z-index: 2;
  padding: var(--espacio-xl) var(--espacio-md);
  padding-top: calc(var(--nav-altura) + var(--espacio-xl));
  color: var(--blanco);
  width: 100%;
}

.qrd-hero__title {
  font-size: var(--escala-xxl);
  color: var(--blanco);
  text-shadow: 0 2px 20px rgba(0,0,0,0.45);
  line-height: 1.05;
}

.qrd-hero__desc,
.qrd-hero__comarca {
  font-size: var(--escala-sm);
  opacity: 0.88;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: var(--espacio-sm);
}

/* ── Banner (16:9) — modo app, debajo del navbar ── */
.qrd-hero--banner {
  height: auto;
  min-height: unset;
  max-height: unset;
  aspect-ratio: 16 / 9;
  margin-top: var(--nav-altura);
}

/* En banner el overlay es solo un fade en los bordes superior e inferior */
.qrd-hero--banner .qrd-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.22) 0%,
    transparent      30%,
    transparent      60%,
    rgba(0,0,0,0.30) 100%
  );
}

/* Card que arranca justo al final del banner (sin tapar slider/video) */
.qrd-page-card {
  position: relative;
  z-index: 2;
  margin-top: 0;
  border-radius: 22px 22px 0 0;
  background: var(--blanco);
  padding: var(--espacio-md) var(--espacio-md) 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
}

.qrd-page-card__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--gris-borde);
  margin: 0 auto var(--espacio-md);
}

.qrd-page-card__escudo {
  display: block;
  max-height: 90px;
  width: auto;
  margin: 0 auto var(--espacio-sm, 8px);
  object-fit: contain;
}

.qrd-page-card__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--escala-xl);
  color: var(--negro);
  line-height: 1.1;
  margin-bottom: 4px;
}

.qrd-muni-header__escudo {
  display: block;
  max-height: 80px;
  width: auto;
  margin: 0 0 .6em 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

.qrd-page-card__comarca {
  font-size: var(--escala-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--verde-dark);
  margin-bottom: var(--espacio-md);
}

.qrd-page-card__desc {
  font-size: var(--escala-base);
  line-height: 1.72;
  color: var(--gris);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--espacio-md);
  padding-bottom: var(--espacio-md);
  border-bottom: 1px solid var(--gris-borde);
}

/* ── Dots del slider ── */
.qrd-hero__dots {
  position: absolute;
  bottom: var(--espacio-md);
  right: var(--espacio-md);
  z-index: 3;
  display: flex;
  gap: 7px;
  align-items: center;
}
.qrd-hero__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transicion), transform var(--transicion);
}
.qrd-hero__dot.is-active {
  background: var(--verde-claro);
  transform: scale(1.45);
}

/* Municipio / Punto header (no full-height) */
.qrd-muni-header {
  position: relative;
  height: 55svh;
  min-height: 280px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: var(--nav-altura);
}

@media (min-width: 768px) {
  .qrd-muni-header {
    height: 50svh;
    max-height: 520px;
  }
}
.qrd-muni-header__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.qrd-muni-header__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.75) 100%);
  z-index: 1;
}
.qrd-muni-header__content {
  position: relative; z-index: 2;
  padding: var(--espacio-lg) var(--espacio-md);
  color: var(--blanco);
  width: 100%;
}
.qrd-muni-header__content h1 {
  font-size: var(--escala-xl);
  color: var(--blanco);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.qrd-poi-tipo {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-size: var(--escala-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--verde-gradient);
  color: var(--negro);
  padding: 4px var(--espacio-sm);
  border-radius: 2rem;
  margin-bottom: var(--espacio-sm);
}

.qrd-poi-hero { position: absolute; inset: 0; }

/* ------------------------------------------------------------
   6. INTRO — fondo verde suave para dar carácter
   ------------------------------------------------------------ */
.qrd-intro {
  padding-block: var(--espacio-xl);
  background: var(--verde-suave);
  border-bottom: 1px solid rgba(124,177,86,0.20);
}

.qrd-intro p {
  font-size: var(--escala-md);
  line-height: 1.8;
  color: var(--gris);
}

/* ------------------------------------------------------------
   7. OPCIONES — botones verdes, identidad fuerte
   ------------------------------------------------------------ */
.qrd-opciones {
  padding-block: var(--espacio-lg);
  background: var(--gris-claro);
}

.qrd-opciones__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--espacio-sm);
}

.qrd-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-xs);
  padding: var(--espacio-md) var(--espacio-sm);
  background: var(--verde-gradient);
  color: var(--negro);
  border-radius: var(--radio-lg);
  font-weight: 700;
  font-size: var(--escala-sm);
  text-align: center;
  min-height: 76px;
  box-shadow: var(--sombra-verde);
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
  position: relative;
  overflow: hidden;
}

.qrd-opcion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transicion);
}

.qrd-opcion:hover,
.qrd-opcion:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 28px rgba(124,177,86,0.55);
  filter: brightness(1.06);
}

.qrd-opcion.is-active {
  background: var(--verde-dark);
  color: var(--blanco);
  box-shadow: 0 4px 16px rgba(93,138,60,0.5);
}

.qrd-opcion__texto {
  position: relative; z-index: 1;
  line-height: 1.3;
}

/* Variante secundaria (fichas internas) */
.qrd-opciones--secundario { background: var(--blanco); }

.qrd-opciones--secundario .qrd-opcion {
  background: var(--blanco);
  color: var(--verde-dark);
  border: 2px solid var(--verde);
  box-shadow: none;
}
.qrd-opciones--secundario .qrd-opcion:hover {
  background: var(--verde-gradient);
  color: var(--negro);
  border-color: transparent;
  box-shadow: var(--sombra-verde);
}
.qrd-opciones--secundario .qrd-opcion.is-active {
  background: var(--verde);
  color: var(--blanco);
  border-color: transparent;
}

/* ------------------------------------------------------------
   8. BOTONES
   ------------------------------------------------------------ */
.qrd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-xs);
  padding: 0.7em var(--espacio-lg);
  border-radius: 2rem;
  font-weight: 600;
  font-size: var(--escala-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
}

.qrd-btn--primario {
  background: var(--verde-gradient);
  color: var(--negro);
  box-shadow: var(--sombra-verde);
}
.qrd-btn--primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,177,86,0.5);
  filter: brightness(1.06);
}

.qrd-btn--secundario {
  background: transparent;
  color: var(--verde-dark);
  border: 2px solid var(--verde);
}
.qrd-btn--secundario:hover {
  background: var(--verde);
  color: var(--blanco);
}

.qrd-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-sm);
  padding-block: var(--espacio-xl);
}

/* ------------------------------------------------------------
   9. CARDS DE POI
   ------------------------------------------------------------ */
.qrd-pois {
  padding-block: var(--espacio-xxl);
  background: var(--blanco);
}

.qrd-pois__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--espacio-md);
}

.qrd-poi-card {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--gris-borde);
}
.qrd-poi-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-xl);
  border-color: transparent;
}

.qrd-poi-card__imagen {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.qrd-poi-card__imagen img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}
.qrd-poi-card:hover .qrd-poi-card__imagen img {
  transform: scale(1.07);
}

.qrd-poi-card__body {
  padding: var(--espacio-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid var(--verde-claro);
}

.qrd-poi-card__tipo {
  font-size: var(--escala-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--verde-dark);
}

.qrd-poi-card__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--escala-md);
  line-height: 1.2;
  margin-top: 2px;
}

.qrd-poi-card__desc {
  font-size: var(--escala-sm);
  color: var(--gris-medio);
  line-height: 1.5;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qrd-poi-card[data-cat].is-hidden { display: none; }

/* ------------------------------------------------------------
   10. FILTROS DE CATEGORÍA
   ------------------------------------------------------------ */
.qrd-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs);
  margin-bottom: var(--espacio-lg);
}

.qrd-filtro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.35em var(--espacio-md);
  border-radius: 2rem;
  border: 2px solid var(--verde);
  background: var(--blanco);
  color: var(--verde-dark);
  font-size: var(--escala-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.qrd-filtro:hover {
  background: var(--verde-suave);
}
.qrd-filtro.is-active {
  background: var(--verde-gradient);
  border-color: transparent;
  color: var(--negro);
  box-shadow: var(--sombra-verde);
}

.qrd-filtro__count {
  font-size: 0.75em;
  opacity: 0.7;
}

/* ------------------------------------------------------------
   11. MAPA LEAFLET
   ------------------------------------------------------------ */
.qrd-mapa-section {
  padding-block: var(--espacio-xxl);
  background: var(--gris-claro);
}

.qrd-mapa {
  width: 100%;
  height: 55svh;
  min-height: 320px;
  border-radius: var(--radio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
}

/* ------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------ */
.qrd-footer {
  background: var(--footer-bg);
  padding: var(--espacio-xl) var(--espacio-md);
  border-top: 4px solid transparent;
  border-image: var(--verde-gradient) 1;
}

.qrd-footer__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--espacio-xl);
}
.qrd-footer__logos img {
  height: 44px; width: auto;
  transition: opacity var(--transicion);
}
.qrd-footer__logos img:hover { opacity: .85; }

/* ------------------------------------------------------------
   13. PAGE HEADER
   ------------------------------------------------------------ */
.qrd-page-header {
  padding-top: calc(var(--nav-altura) + var(--espacio-xl));
  padding-bottom: var(--espacio-lg);
  background: var(--verde);
  color: var(--blanco);
}
.qrd-page-header h1 {
  font-size: var(--escala-xl);
  color: var(--blanco);
}

/* ------------------------------------------------------------
   14. MAIN
   ------------------------------------------------------------ */
.qrd-main { min-height: 50svh; }

.page-comarca-contenido .qrd-main,
.page-municipio-nqr .qrd-main,
.page-punto-qr .qrd-main { padding-top: 0; }

/* ------------------------------------------------------------
   15. 404
   ------------------------------------------------------------ */
.qrd-404 {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 80svh; gap: var(--espacio-md);
  text-align: center; padding: var(--espacio-xl);
}
.qrd-404 h1 {
  font-size: clamp(5rem, 20vw, 10rem);
  color: var(--verde); line-height: 1;
}

/* ------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .qrd-opciones__grid { grid-template-columns: repeat(2, 1fr); }
  .qrd-pois__grid     { grid-template-columns: 1fr; }
  .qrd-hero           { max-height: 100svh; }
  .qrd-acciones       { flex-direction: column; }
  .qrd-btn            { width: 100%; justify-content: center; }
}

@media (min-width: 600px) {
  .qrd-opciones__grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (min-width: 768px) {
  .qrd-intro p { font-size: var(--escala-lg); }
  .qrd-mapa    { height: 60svh; }
}

@media (min-width: 1024px) {
  .qrd-pois__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------
   17. ANIMACIONES — scroll reveal
   ------------------------------------------------------------ */
.qrd-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.qrd-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.qrd-fade-in:nth-child(2) { transition-delay: 0.08s; }
.qrd-fade-in:nth-child(3) { transition-delay: 0.16s; }
.qrd-fade-in:nth-child(4) { transition-delay: 0.24s; }
.qrd-fade-in:nth-child(5) { transition-delay: 0.32s; }
.qrd-fade-in:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .qrd-fade-in { opacity: 1; transform: none; transition: none; }
  .qrd-hero__slide { transition: none; }
  .qrd-hero__slide.is-active img { animation: none; }
  .qrd-poi-card { transition: none; }
}

/* ------------------------------------------------------------
   18. PORTADA PUNTO — vídeo, grid de fotos
   ------------------------------------------------------------ */
.qrd-poi-video { position: absolute; inset: 0; }
.qrd-poi-video iframe {
  width: 100%; height: 100%;
  object-fit: cover;
}

.qrd-poi-grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  overflow: hidden;
}
.qrd-poi-grid__item {
  overflow: hidden;
  cursor: zoom-in;
}
.qrd-poi-grid__item--main { grid-row: 1 / -1; }
.qrd-poi-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.55s ease, opacity 0.5s ease;
}
.qrd-poi-grid__item:hover img { transform: scale(1.04); }
.qrd-poi-grid__item:nth-child(n+6) { display: none; }
.qrd-poi-grid__item:nth-child(2):last-child,
.qrd-poi-grid__item:nth-child(3):last-child { grid-row: 1 / -1; }

.qrd-poi-grid__ver-todas {
  position: absolute;
  bottom: var(--espacio-md); right: var(--espacio-md);
  z-index: 5;
  background: rgba(255,255,255,0.92);
  color: var(--negro);
  font-size: var(--escala-xs);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radio);
  border: none;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--transicion);
}
.qrd-poi-grid__ver-todas:hover { background: var(--blanco); }

/* ------------------------------------------------------------
   19. CUERPO RICO — párrafos con fotos intercaladas
   ------------------------------------------------------------ */
.qrd-cuerpo {
  padding: var(--espacio-xxl) 0;
  background: var(--blanco);
}
.qrd-cuerpo .qrd-container { max-width: 74ch; }

.qrd-cuerpo p {
  font-size: var(--escala-base);
  line-height: 1.85;
  color: var(--gris-oscuro);
  margin-bottom: 1.4em;
}
.qrd-cuerpo h2 {
  font-family: var(--fuente-titulo);
  font-size: var(--escala-lg);
  color: var(--negro);
  margin: 2em 0 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--gris-borde);
}
.qrd-cuerpo h3 {
  font-size: var(--escala-md);
  font-weight: 700;
  color: var(--negro);
  margin: 1.6em 0 0.5em;
}
.qrd-cuerpo img {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--radio-lg);
  margin: 2em auto;
  box-shadow: var(--sombra-lg);
  cursor: zoom-in;
}
.qrd-cuerpo ul, .qrd-cuerpo ol {
  padding-left: 1.6em;
  margin-bottom: 1.4em;
}
.qrd-cuerpo li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}
.qrd-cuerpo blockquote {
  border-left: 4px solid var(--verde);
  margin: 2em 0;
  padding: var(--espacio-md) var(--espacio-lg);
  background: var(--verde-suave);
  border-radius: 0 var(--radio-lg) var(--radio-lg) 0;
  font-style: italic;
  color: var(--gris);
  font-size: var(--escala-md);
}

.qrd-intro--small p {
  font-size: var(--escala-sm);
  color: var(--gris-medio);
  font-style: italic;
}

/* ------------------------------------------------------------
   20. CARGA DE IMÁGENES — shimmer + fade-in
   ------------------------------------------------------------ */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.qrd-poi-card__imagen img,
.qrd-poi-grid__item img,
.qrd-cuerpo img,
.qrd-carousel__item img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.qrd-poi-card__imagen img.is-loaded,
.qrd-poi-grid__item img.is-loaded,
.qrd-cuerpo img.is-loaded,
.qrd-carousel__item img.is-loaded { opacity: 1; }

.qrd-poi-card__imagen:has(img:not(.is-loaded)),
.qrd-carousel__item:has(img:not(.is-loaded)) {
  background: linear-gradient(90deg, #dcefd0 25%, #ecf7e4 50%, #dcefd0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
.qrd-poi-grid__item:has(img:not(.is-loaded)) {
  background: linear-gradient(90deg, #1a1a18 25%, #252522 50%, #1a1a18 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* ------------------------------------------------------------
   21. LIGHTBOX
   ------------------------------------------------------------ */
.qrd-lb {
  display: none; position: fixed; inset: 0;
  z-index: 9000;
  align-items: center; justify-content: center;
}
.qrd-lb.is-open { display: flex; }

.qrd-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(8px);
  animation: lbFadeIn 0.25s ease;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }

.qrd-lb__stage {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  max-width: min(92vw, 1240px);
  max-height: 90svh;
  animation: lbSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes lbSlideUp {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.qrd-lb__figure {
  margin: 0; display: flex;
  flex-direction: column; align-items: center; gap: 12px;
}

.qrd-lb__img {
  max-width: 100vw;
  max-height: 100svh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  display: block;
}
.qrd-lb__img.is-loaded { opacity: 1; }

.qrd-lb__caption {
  color: rgba(255,255,255,0.6);
  font-size: var(--escala-sm);
  text-align: center;
  min-height: 1.3em;
  max-width: 60ch;
}

.qrd-lb__close {
  position: fixed; top: 16px; right: 16px; z-index: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--transicion);
}
.qrd-lb__close:hover { background: rgba(255,255,255,0.15); }

.qrd-lb__prev,
.qrd-lb__next {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 54px; height: 72px; border: none;
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.9);
  font-size: 2.4rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background var(--transicion);
}
.qrd-lb__prev { left: 0;  border-radius: 0 var(--radio-lg) var(--radio-lg) 0; }
.qrd-lb__next { right: 0; border-radius: var(--radio-lg) 0 0 var(--radio-lg); }
.qrd-lb__prev:hover,
.qrd-lb__next:hover { background: rgba(124,177,86,0.35); }

.qrd-lb__counter {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.45);
  font-size: var(--escala-xs);
  letter-spacing: 0.12em;
}

/* Botón ▶ Play / ❚❚ Pausa del modo carrusel automático */
.qrd-lb__play {
  position: fixed; bottom: 16px; right: 16px; z-index: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--transicion), transform var(--transicion);
}
.qrd-lb__play:hover     { background: var(--verde); border-color: var(--verde); }
.qrd-lb.is-playing .qrd-lb__play {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}

/* Cuando hay carrusel automático activo: barra de progreso sutil debajo del contador */
.qrd-lb.is-playing .qrd-lb__counter::after {
  content: '';
  display: block;
  margin: 6px auto 0;
  width: 60px; height: 2px;
  background: rgba(255,255,255,0.2);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

/* ------------------------------------------------------------
   22. CARRUSEL HORIZONTAL (galería de punto)
   ------------------------------------------------------------ */
.qrd-galeria-section {
  padding: var(--espacio-xxl) 0;
  background: var(--verde-suave);
}

.qrd-carousel { position: relative; }

.qrd-carousel__track {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 4px var(--espacio-sm);
}
.qrd-carousel__track::-webkit-scrollbar { display: none; }

.qrd-carousel__item {
  flex: 0 0 calc(50% - 6px);
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-lg);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicion);
}
.qrd-carousel__item:hover { box-shadow: var(--sombra-lg); }
.qrd-carousel__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease, opacity 0.6s ease;
}
.qrd-carousel__item:hover img { transform: scale(1.05); }

@media (min-width: 600px) {
  .qrd-carousel__item { flex: 0 0 calc(33.333% - 8px); }
}
@media (min-width: 900px) {
  .qrd-carousel__item { flex: 0 0 calc(25% - 9px); }
}

.qrd-carousel__btn {
  position: absolute;
  top: calc(50% - 0.75rem);
  transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  background: var(--blanco);
  color: var(--verde-dark);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow var(--transicion), transform var(--transicion), background var(--transicion), color var(--transicion);
}
.qrd-carousel__btn:hover {
  background: var(--verde);
  color: var(--blanco);
  box-shadow: var(--sombra-verde);
  transform: translateY(-50%) scale(1.1);
}
.qrd-carousel__btn--prev { left: -18px; }
.qrd-carousel__btn--next { right: -18px; }

@media (prefers-reduced-motion: reduce) {
  .qrd-carousel__item img { transition: opacity 0.5s ease; }
  .qrd-lb__img            { transition: opacity 0.3s ease; }
  .qrd-lb__stage          { animation: none; }
  .qrd-lb__backdrop       { animation: none; }
}

/* ════════════════════════════════════════════════════════════
 * BLOQUES CMS (Fase 5) — Estilos para cada tipo de bloque
 * ════════════════════════════════════════════════════════════ */

.qrd-bloques-wrapper {
  padding: 0;
}

.qrd-bloque {
  margin: 0;
  padding: 1.5em 0;
}

.qrd-bloque--texto .qrd-container {
  font-size: 1.05em;
  line-height: 1.7;
  color: #333;
}

.qrd-bloque--imagen {
  padding: 0;
  background: transparent;
}
.qrd-bloque--imagen .qrd-figura {
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 var(--espacio-md);
  text-align: center;
}
.qrd-bloque--imagen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  cursor: zoom-in;
}
.qrd-bloque--imagen figcaption {
  padding: 0.7em 1em 0;
  font-style: italic;
  color: #888;
  font-size: 0.88em;
  text-align: center;
}

.qrd-bloque--galeria {
  background: transparent;
  padding: 1em 0 2em;
}

.qrd-bloque--video {
  padding: 1em 0;
}
.qrd-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  max-width: 1000px;
  margin: 0 auto;
}
.qrd-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.qrd-bloque--audio {
  background: transparent;
  padding: 1em 0;
}
.qrd-bloque--audio .qrd-container {
  max-width: 720px;
  background: #f8f8f6;
  border-radius: 14px;
  padding: 1.1em 1.2em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.qrd-audio__titulo {
  font-weight: 600;
  margin-bottom: 0.6em;
  color: var(--verde-dark, #c89540);
  font-size: 0.95em;
  letter-spacing: 0.01em;
}
.qrd-bloque--audio audio {
  width: 100%;
  height: 38px;
}

.qrd-bloque--mapa .qrd-mapa {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.qrd-bloque--gpx {
  background: transparent;
  padding: 1.5em 0;
}

.qrd-bloque--cita {
  background: transparent;
  padding: 2em 0;
}
.qrd-cita {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 1em 2em 1em 2.5em;
  font-family: var(--fuente-titulo, Georgia, serif);
  font-style: italic;
  font-size: 1.35em;
  line-height: 1.5;
  color: #2a2a2a;
}
.qrd-cita::before {
  content: '\201C';                    /* comilla curva tipográfica */
  position: absolute;
  top: -0.05em; left: 0;
  font-size: 4em;
  line-height: 1;
  color: var(--verde, #edb956);
  opacity: 0.45;
  font-style: normal;
  pointer-events: none;
}
.qrd-cita cite {
  display: block;
  margin-top: 0.8em;
  font-size: 0.7em;
  font-style: normal;
  font-family: var(--fuente-base, inherit);
  color: #999;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.qrd-cita cite::before {
  content: '— ';
}

.qrd-bloque--cta {
  background: var(--verde, #1565c0);
  color: white;
  padding: 2em 0;
  text-align: center;
}
.qrd-bloque--cta .qrd-btn {
  background: white;
  color: var(--verde, #1565c0);
  font-weight: 600;
  padding: 0.8em 1.6em;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}
.qrd-bloque--cta .qrd-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.qrd-bloque--tabla {
  padding: 1.5em 0;
}
.qrd-tabla {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.qrd-tabla th {
  background: var(--verde, #1565c0);
  color: white;
  padding: 0.75em 1em;
  text-align: left;
  font-weight: 600;
}
.qrd-tabla td {
  padding: 0.75em 1em;
  border-bottom: 1px solid #eee;
}
.qrd-tabla tr:nth-child(even) td {
  background: #f9f9f9;
}

.qrd-bloque--separador {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #ccc, transparent);
}

.qrd-bloque--embed {
  padding: 1em 0;
}

/* ════════════════════════════════════════════════════
 * MUNICIPIO QR — adaptaciones para replicar producción
 * ════════════════════════════════════════════════════ */

/* Hero con vídeo Vimeo/YouTube — siempre 16:9 horizontal */
.qrd-hero--video {
  position: relative;
  width: 100%;
  height: auto !important;            /* anula el 100svh del .qrd-hero general */
  max-height: none !important;
  min-height: 0 !important;
  background: #000;
  overflow: hidden;
  display: block !important;
  padding-top: var(--nav-altura, 56px); /* deja sitio al navbar */
}
.qrd-hero--video .qrd-hero__video {
  position: relative !important;
  inset: auto !important;
  padding-bottom: 56.25%;              /* 16:9 ratio fijo (horizontal) */
  height: 0 !important;
  width: 100%;
}
.qrd-hero--video .qrd-hero__video iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  object-fit: contain;                 /* NO recorta, mantiene el vídeo horizontal completo */
  pointer-events: auto !important;
}

/* Texto bienvenida grande tras el vídeo */
.qrd-bienvenida {
  padding: 2em 0 1em;
}
.qrd-bienvenida__texto {
  font-size: 1.05em;
  line-height: 1.75;
  color: #333;
  max-width: 1170px;
  margin: 0 auto;
  text-align: justify;
}

/* Iconos en los botones del menú */
.qrd-opcion__icono {
  font-size: 1.4em;
  margin-right: 0.4em;
}

/* ════════════════════════════════════════════════
 * ENTRADILLA con "leer más"
 * ════════════════════════════════════════════════ */
.qrd-leer-mas {
  white-space: nowrap;
  font-weight: 600;
  margin-left: 0.3em;
}

/* ════════════════════════════════════════════════
 * FICHA EXTENDIDA
 * ════════════════════════════════════════════════ */
.qrd-ficha-header {
  padding-top: calc(var(--nav-altura, 56px) + 1.5em);
  padding-bottom: 1.5em;
  background: var(--verde-gradient);
  border-bottom: 3px solid var(--verde-dark);
}
.qrd-ficha-header__tipo {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--verde-dark, #b88438);
  margin-bottom: 0.5em;
}
.qrd-ficha-header__titulo {
  font-size: var(--escala-xl);
  color: var(--negro);
  margin-bottom: 0.5em;
}
.qrd-ficha-header__back {
  margin-top: 1em;
}
.page-ficha-extendida .qrd-main {
  padding-top: 1em;
}

/* ════════════════════════════════════════════════
 * SWITCH DE IDIOMAS en navbar
 * ════════════════════════════════════════════════ */
.qrd-nav__lang {
  margin-left: auto;
  display: flex;
  gap: 0.3em;
  align-items: center;
}
.qrd-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  background: rgba(0,0,0,0.10);
  color: rgba(33,37,41,0.85);
  font-size: 0.85em;
  font-weight: 600;
  transition: all 0.2s;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.qrd-lang-btn:hover {
  background: rgba(0,0,0,0.18);
  color: #212529;
}
.qrd-lang-btn.is-active {
  background: #212529;
  color: #fff;
  border-color: #212529;
}
.qrd-lang-btn__flag { font-size: 1em; }
.qrd-lang-btn__code { font-size: 0.85em; }

@media (max-width: 540px) {
  .qrd-lang-btn__code { display: none; }
  .qrd-lang-btn { padding: 0.3em 0.4em; }
}

/* ════════════════════════════════════════════════
 * CAROUSEL DOTS (indicadores estilo FlexSlider)
 * ════════════════════════════════════════════════ */
.qrd-carousel { position: relative; }
.qrd-carousel__dots {
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5em;
  z-index: 5;
}
.qrd-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}
.qrd-carousel__dot.is-active {
  background: rgba(255,255,255,1);
  transform: scale(1.3);
}
.qrd-carousel__dot:hover { background: rgba(255,255,255,0.5); }

/* ════════════════════════════════════════════════════════════
   SCROLL-REVEAL — los bloques de la ficha aparecen suavemente
   según entran al viewport (estilo iOS / Pinterest)
   ════════════════════════════════════════════════════════════ */
.qrd-bloque {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.qrd-bloque.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger sutil cuando hay varios bloques cerca: cada uno entra ~80ms después */
.qrd-bloque.is-visible + .qrd-bloque {
  transition-delay: 0.08s;
}
.qrd-bloque.is-visible + .qrd-bloque + .qrd-bloque {
  transition-delay: 0.14s;
}

/* La imagen dentro del bloque imagen también respira al entrar */
.qrd-bloque--imagen img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.qrd-bloque--imagen:not(.is-visible) img {
  transform: scale(0.98);
}
.qrd-bloque--imagen.is-visible img {
  transform: scale(1);
}

/* Respeta a quienes piden menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .qrd-bloque,
  .qrd-bloque--imagen img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────
   Servicios (Guía de Servicios) — estilo tabla striped
   replica el patrón de producción: bloques por sección con
   tabla compacta nombre + teléfono, datos extras debajo.
   ────────────────────────────────────────────────────────── */
.qrd-servicios { padding: 1.2em 0 4em; }
.qrd-srv-seccion {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  margin-bottom: 1.4em;
}
.qrd-srv-seccion__head {
  background: var(--color-primario, #7cb156);
  color: #fff;
  padding: .65em 1em;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.qrd-srv-tabla { width: 100%; border-collapse: collapse; }
.qrd-srv-tabla tr { transition: background .15s; }
.qrd-srv-tabla tr:nth-child(odd)  { background: #fafafa; }
.qrd-srv-tabla tr:nth-child(even) { background: #fff; }
.qrd-srv-tabla tr:hover           { background: rgba(124,177,86,.08); }
.qrd-srv-tabla td {
  padding: .65em .9em;
  vertical-align: top;
  border-top: 1px solid rgba(0,0,0,.05);
  font-size: .95em;
}
.qrd-srv-tabla td:first-child {
  font-weight: 600; color: #2a2a2a;
  width: 50%;
}
.qrd-srv-tabla td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.qrd-srv-tabla a { color: var(--color-primario, #7cb156); text-decoration: none; font-weight: 500; }
.qrd-srv-tabla a:hover { text-decoration: underline; }
.qrd-srv-extra {
  display: block; font-weight: 400;
  font-size: .82em; color: #777; margin-top: .15em;
}
.qrd-srv-extra__icon { opacity: .55; margin-right: .3em; }

[data-theme="dark"] .qrd-srv-seccion             { background: #1a1a1a; }
[data-theme="dark"] .qrd-srv-tabla tr:nth-child(odd)  { background: #161616; }
[data-theme="dark"] .qrd-srv-tabla tr:nth-child(even) { background: #1a1a1a; }
[data-theme="dark"] .qrd-srv-tabla td            { color: #ddd; border-color: #2a2a2a; }
[data-theme="dark"] .qrd-srv-tabla td:first-child{ color: #eee; }
[data-theme="dark"] .qrd-srv-extra               { color: #aaa; }

/* ──────────────────────────────────────────────────────────
   Agenda (actividades del municipio) — tarjetas con imagen,
   fecha pill, título y descripción corta.
   ────────────────────────────────────────────────────────── */
.qrd-agenda { padding: 1em 0 4em; }
.qrd-agenda__seccion { margin-bottom: 2em; }
.qrd-agenda__seccion h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 1em;
  padding-bottom: .6em;
  border-bottom: 2px solid var(--color-primario, #7cb156);
  color: var(--color-primario, #7cb156);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.qrd-actividad {
  display: block;
  background: #fff;
  border-radius: 14px;
  margin-bottom: .9em;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  transition: transform .2s cubic-bezier(0.16,1,0.3,1), box-shadow .2s;
}
.qrd-actividad:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.qrd-actividad__imagen { width: 100%; aspect-ratio: 16/9; background: #eee; overflow: hidden; }
.qrd-actividad__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qrd-actividad__body { padding: 1em 1.1em; }
.qrd-actividad__fecha {
  display: inline-block;
  background: var(--color-primario, #7cb156);
  color: #fff;
  padding: .2em .7em;
  border-radius: 999px;
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: .5em;
}
.qrd-actividad__titulo {
  margin: 0 0 .3em;
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.25;
  color: #222;
}
.qrd-actividad__lugar { font-size: .9em; color: #666; margin: .2em 0; }
.qrd-actividad__desc  { font-size: .9em; color: #555; margin: .5em 0 0; }

[data-theme="dark"] .qrd-actividad         { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="dark"] .qrd-actividad__titulo { color: #eee; }
[data-theme="dark"] .qrd-actividad__lugar,
[data-theme="dark"] .qrd-actividad__desc   { color: #bbb; }

/* ──────────────────────────────────────────────────────────
   Plantilla EIA (Elemento de Interés Ampliado)
   Layout estilo producción: hero limpio (sin overlay) + título
   + audio + bloques + CTA cómo llegar.
   ────────────────────────────────────────────────────────── */
.page-punto--eia .qrd-hero__overlay { display: none; }

.qrd-eia-header { padding: 1.5em 0 .4em; }
.qrd-eia-titulo {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 700;
  color: var(--negro, #1a1a1a);
  line-height: 1.15;
  margin: 0 0 .6em;
}
.qrd-eia-audio        { margin: 0 0 .6em; }
.qrd-eia-audio audio  { width: 100%; max-width: 480px; height: 36px; }

/* Si NO hay hero (sin slider ni vídeo ni imagen) el main quedaría
   tapado por el navbar fixed → empujarlo. */
.page-punto--eia:not(:has(.qrd-hero)) .qrd-main { padding-top: var(--nav-altura, 56px); }

/* Anchors / saltos de scroll: el navbar fixed no debe tapar el destino. */
html { scroll-padding-top: calc(var(--nav-altura, 56px) + 8px); }

/* ──────────────────────────────────────────────────────────
   Página actividad (detalle de una actividad de la agenda)
   ────────────────────────────────────────────────────────── */
.qrd-actividad-hero {
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 60vh;
  overflow: hidden;
  background: #111;
}
.qrd-actividad-hero img { width: 100%; height: 100%; object-fit: cover; }
.qrd-actividad-page { padding: 1.5em 0 4em; }
.qrd-actividad-page__fecha {
  display: inline-block;
  background: var(--color-primario, #7cb156);
  color: #fff;
  padding: .35em 1em;
  border-radius: 999px;
  font-size: .9em;
  font-weight: 600;
  margin-bottom: 1em;
}
.qrd-actividad-page__titulo {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  margin: 0 0 .6em;
  line-height: 1.15;
  color: #222;
}
.qrd-actividad-page__meta { color: #666; margin: .3em 0; }
.qrd-actividad-page__desc {
  margin-top: 1.5em;
  font-size: 1.05em;
  line-height: 1.7;
  color: #333;
  white-space: pre-line;
}

/* ──────────────────────────────────────────────────────────
   Galería (página /galeria) + lightbox propio del front
   ────────────────────────────────────────────────────────── */
.qrd-galeria-header {
  padding-top: calc(var(--nav-altura, 56px) + 1.5em);
  padding-bottom: 1.5em;
  background: var(--verde-claro, #fcf7f0);
  border-bottom: 3px solid var(--verde, #edb956);
}
.qrd-galeria-header__tipo {
  font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--verde-dark, #d5993e); margin-bottom: 0.5em;
}
.qrd-galeria-header__titulo { font-size: var(--escala-xl); color: var(--negro); margin-bottom: 0.5em; }

.qrd-galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5em;
  padding: 1em 0;
}
.qrd-galeria-grid__item {
  display: block; position: relative; overflow: hidden;
  border-radius: 6px; aspect-ratio: 4/3;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: zoom-in;
  background: none; border: 0; padding: 0; width: 100%;
}
.qrd-galeria-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.qrd-galeria-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.qrd-galeria-grid__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white; padding: 0.5em; margin: 0;
  font-size: 0.85em;
}

/* Lightbox del front (galería pública) */
.qrd-lb { position: fixed; inset: 0; z-index: 9999; display: none; }
.qrd-lb.is-open { display: flex; align-items: center; justify-content: center; }
.qrd-lb__bg { position: absolute; inset: 0; background: rgba(0,0,0,0.95); }
.qrd-lb__stage {
  position: relative; inset: auto;
  max-width: none; max-height: none; width: 100vw; height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4em 5em 5em; box-sizing: border-box; pointer-events: none;
}
.qrd-lb__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5); border-radius: 4px;
}
.qrd-lb__caption {
  margin-top: 1em; color: #fff; font-size: 1em; text-align: center;
  max-width: 80%; line-height: 1.4; text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.qrd-lb__close, .qrd-lb__prev, .qrd-lb__next {
  position: absolute; background: rgba(255,255,255,0.15); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.qrd-lb__close:hover, .qrd-lb__prev:hover, .qrd-lb__next:hover {
  background: rgba(255,255,255,0.3); transform: scale(1.08);
}
.qrd-lb__close { top: 1em; right: 1em; width: 44px; height: 44px; font-size: 1.4em; }
.qrd-lb__prev, .qrd-lb__next {
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; font-size: 2.5em; line-height: 1;
}
.qrd-lb__prev { left: 1em; }
.qrd-lb__next { right: 1em; }
.qrd-lb__prev:hover, .qrd-lb__next:hover { transform: translateY(-50%) scale(1.08); }
.qrd-lb__bar {
  position: absolute; bottom: 1em; left: 50%; transform: translateX(-50%);
  display: flex; gap: .8em; align-items: center;
  background: rgba(0,0,0,0.6); padding: .5em 1em; border-radius: 28px;
  color: #fff;
}
.qrd-lb__bar button {
  background: transparent; color: #fff; border: 0; cursor: pointer;
  font-size: 1.2em; padding: .2em .5em; border-radius: 4px;
}
.qrd-lb__bar button:hover { background: rgba(255,255,255,0.2); }
.qrd-lb__counter { font-size: .9em; min-width: 4em; text-align: center; }
@media (max-width: 600px) {
  .qrd-lb__stage { padding: 4em 1em 5em; }
  .qrd-lb__prev, .qrd-lb__next { width: 40px; height: 40px; font-size: 1.8em; }
}

/* ──────────────────────────────────────────────────────────
   Info ruta (página de datos GPX de un sendero)
   ────────────────────────────────────────────────────────── */
.qrd-info-ruta { padding: 1em 0 4em; }
.qrd-info-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8em;
  margin-bottom: 1.6em;
}
.qrd-info-stat {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 1em .9em;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.qrd-info-stat__icon  { font-size: 1.6em; line-height: 1; opacity: .9; }
.qrd-info-stat__value { font-size: 1.4em; font-weight: 700; color: #222; margin: .2em 0 .1em; line-height: 1.1; }
.qrd-info-stat__label { font-size: .8em; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.qrd-info-profile {
  background: #fff;
  border-radius: 12px;
  padding: 1em;
  margin-bottom: 1.4em;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}
.qrd-info-profile h3 {
  margin: 0 0 .6em;
  font-family: 'Playfair Display', serif;
  font-size: 1.1em;
  color: var(--color-primario, #7cb156);
}
.qrd-profile-svg { width: 100%; height: auto; display: block; }
.qrd-info-actions {
  display: flex; gap: .6em; flex-wrap: wrap;
  justify-content: center;
  margin: 1.5em 0;
}
.qrd-info-actions .qrd-btn { min-width: 160px; }

/* ──────────────────────────────────────────────────────────
   Municipio nQR (portada estilo mini-ficha)
   ────────────────────────────────────────────────────────── */
.qrd-muni-header { position:relative; min-height:280px; display:flex; align-items:flex-end; overflow:hidden; }
.qrd-muni-header__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.qrd-muni-header__content {
  position:relative; z-index:2; padding:1.4em 1.2em;
  color:#fff;
}
.qrd-muni-header__content h1 {
  font-family:'Playfair Display', serif; font-size:clamp(1.8rem, 5vw, 2.8rem);
  margin:0; line-height:1.05; text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.qrd-muni-header__comarca { margin:.2em 0 0; opacity:.92; text-shadow:0 1px 4px rgba(0,0,0,.5); font-size:.95em; }
.qrd-intro { padding:1.4em 0 .4em; }
.qrd-intro p { font-size:1.02em; line-height:1.65; color:#333; margin:0; }
.qrd-poi-grupo { margin-top:1.6em; }
.qrd-poi-grupo h3 {
  font-size:.9em; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-primario, #7cb156);
  margin:0 0 .8em;
  padding-bottom:.4em; border-bottom:2px solid var(--color-primario, #7cb156);
}
.qrd-marcadores { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.7em; }
.qrd-marcador {
  display:flex; align-items:center; gap:.7em;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:10px; padding:.6em .75em;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s;
}
.qrd-marcador:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.qrd-marcador__icono { width:32px; height:32px; flex:0 0 32px; object-fit:contain; }
.qrd-marcador__info  { min-width:0; }
.qrd-marcador__nombre {
  font-weight:600; font-size:.95em; color:#222; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.qrd-marcador__tipo  { font-size:.74em; color:#888; text-transform:uppercase; letter-spacing:.04em; }
.qrd-aviso-info {
  background:#fef8ed; border:1px solid #f3e0a8;
  border-radius:10px; padding:.9em 1em; margin:1.2em 0 1em;
  color:#5b4a1a; font-size:.92em; line-height:1.5;
}

/* ──────────────────────────────────────────────────────────
   Tracking (visor de track GPX fullscreen)
   ────────────────────────────────────────────────────────── */
.qrd-track-page { display: flex; flex-direction: column; height: 100vh; margin: 0; }
.qrd-track-head {
  display: flex; align-items: center; gap: .6em;
  padding: .55em .9em;
  background: var(--color-primario, #7cb156);
  color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
  z-index: 1000;
}
.qrd-track-head a {
  display: inline-flex; align-items: center; gap: .35em;
  color: #fff; text-decoration: none; padding: .35em .7em;
  border-radius: 999px; background: rgba(0,0,0,.18);
  font-size: .9em; font-weight: 500;
  transition: background .2s;
}
.qrd-track-head a:hover { background: rgba(0,0,0,.32); }
.qrd-track-head__title {
  flex: 1; min-width: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.05em; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qrd-track-head__actions { display: flex; gap: .4em; }
.qrd-track-head__actions a { background: rgba(255,255,255,.18); }
.qrd-track-head__actions a:hover { background: rgba(255,255,255,.32); }
.qrd-track-map { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
#qrd-map { flex: 1; min-height: 0; position: relative; }
#elev-strip {
  width: 100%; height: 140px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 -1px 6px rgba(0,0,0,.12);
  z-index: 800;
}
#elev-strip .leaflet-elevation-container,
#elev-strip .background,
#elev-strip svg { width: 100% !important; height: 100% !important; }
.elevation-control .area { fill: var(--color-primario, #7cb156); fill-opacity: .25; }
.elevation-control .axis path, .elevation-control .axis line { stroke: #888; }
.leaflet-control-locate a { font-size: 1.2em !important; }