/* ==========================================================================
   Rutas y Sendas · Ficha de ruta · componentes de la plantilla dinámica
   Se carga solo en /rutas/{slug}/ después de los estilos del sistema aprobado y usa sus mismos tokens.
   Nada aquí redefine colores, tipografías ni componentes aprobados.
   ========================================================================== */

/* ---------- Dato y estado ---------- */
.insignia {
  display: inline-block; font: 700 .62rem/1.35 var(--f-texto); letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .5rem; border: 1px solid currentColor; color: var(--terracota-texto); background: #fff;
}
.insignia--ok { color: var(--bosque); }
.insignia--pend { color: var(--piedra); }
/* Solo se ve en la vista de editor con ?rys_ver_pendientes=1 */
.dato-pendiente { border-bottom: 2px dashed var(--terracota); background: rgba(184,113,79,.08); padding: 0 .15em; }
.cinta-editor { background: var(--tinta); color: #fff; font-size: .82rem; line-height: 1.5; padding: .55rem 0; }
.cinta-editor a { color: var(--salvia); }
.cinta-editor strong { color: var(--salvia); }

/* ---------- Hero de ficha (reutiliza .hero) ---------- */
.hero--ficha h1 { text-wrap: balance; }
.hero--ficha .hero__texto { font-size: 1.1rem; }
.hero__lugar { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem; margin: 0 0 .5rem; }
.hero__lugar a, .hero__lugar span { color: var(--terracota-texto); text-decoration: none; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; display: inline-block; padding: .25rem 0; border-bottom: 1px solid transparent; }
.hero__lugar a:hover { border-color: currentColor; }
.hero__lugar span { cursor: default; }
.hero__lugar > * + *::before { content: "·"; margin-right: .9rem; color: var(--terracota); display: inline-block; }
.hero__credito { position: absolute; right: .75rem; top: .6rem; margin: 0; font-size: .7rem; color: #fff; background: rgba(37,53,44,.6); padding: .2rem .5rem; }

/* ---------- Ficha técnica (componente nuevo) ---------- */
.ficha-tecnica { position: relative; background: var(--crema); padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.1rem, 3vw, 2.25rem) 1.1rem; margin-top: clamp(2rem, 5vw, 3rem); box-shadow: var(--sombra); }
.ficha-tecnica::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--linea); pointer-events: none; }
.ficha-tecnica__titulo { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1rem; }
.ficha-tecnica__titulo h2 { font-size: 2.1rem; color: var(--tinta); }
.ficha-tecnica__rejilla { position: relative; display: grid; grid-template-columns: repeat(var(--celdas, 6), 1fr); list-style: none; }
.ficha-tecnica__celda { padding: .9rem .75rem; text-align: center; border-left: 1px dashed var(--salvia); }
.ficha-tecnica__celda:first-child { border-left: 0; }
.ficha-tecnica__etiqueta { margin: 0 0 .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-texto); }
.ficha-tecnica__valor { margin: 0; font-family: var(--f-titular); font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; color: var(--tinta); overflow-wrap: anywhere; }
.ficha-tecnica__unidad { font-family: var(--f-texto); font-size: .8rem; font-weight: 600; color: var(--piedra); margin-left: .15rem; }
.ficha-tecnica__pie { position: relative; margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linea); font-size: .82rem; color: var(--piedra); display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.ficha-tecnica__pie span { margin: 0; }

.epoca { position: relative; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.epoca h3 { font: 700 .7rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-texto); margin-bottom: .6rem; }
.epoca ol { list-style: none; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.epoca li { text-align: center; font-size: .75rem; font-weight: 700; padding: .45rem 0; background: #fff; color: var(--piedra); border: 1px solid var(--linea); }
.epoca li.si { background: var(--bosque); color: #fff; border-color: var(--bosque); }
.epoca li.si::after { content: " ✓"; font-size: .65rem; }

/* ---------- Índice de la ficha ---------- */
.indice-ficha { margin-top: 2rem; }
.indice-ficha h2 { font: 700 .72rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-texto); margin-bottom: .6rem; text-align: center; }
.indice-ficha ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.indice-ficha a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border: 1px solid var(--salvia);
  text-decoration: none; color: var(--tinta); font-size: .85rem; font-weight: 600; background: #fff;
}
.indice-ficha a:hover { border-color: var(--terracota); color: var(--terracota-texto); }

/* ---------- Texto editorial de lectura ---------- */
.lectura { font-size: 1.0625rem; }
.lectura h2 { font-family: var(--f-titular); font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.lectura h3 { font-family: var(--f-titular); font-size: 1.5rem; margin: 1.75rem 0 .5rem; }
.lectura p { color: var(--tinta); }
.lectura .antetitulo { font-size: 1.8rem; color: var(--terracota-texto); margin: 0 0 .2rem; line-height: 1.1; }
.cabecera-seccion { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.cabecera-seccion h2 { font-family: var(--f-titular); font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--tinta); text-wrap: balance; }
.cabecera-seccion .antetitulo { font-size: 1.8rem; color: var(--terracota-texto); margin: 0 0 .2rem; line-height: 1.1; }
.cabecera-seccion p:not(.antetitulo) { color: var(--piedra); max-width: 40rem; margin-top: .5rem; }

/* ---------- Mapa de la ruta (componente nuevo; presentación, sin Leaflet) ---------- */
.mapa-ruta { background: #fff; box-shadow: var(--sombra); }
.mapa-ruta__barra { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--linea); background: var(--crema); }
.mapa-ruta__capas { border: 0; padding: 0; margin: 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.mapa-ruta__capas legend { float: left; margin-right: .6rem; font: 700 .7rem/44px var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-texto); padding: 0; }
.mapa-ruta__capas label { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .85rem; border: 1px solid var(--salvia); background: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; }
.mapa-ruta__capas input { accent-color: var(--bosque); }
.mapa-ruta__capas label:has(input:checked) { border-color: var(--bosque); box-shadow: inset 0 0 0 1px var(--bosque); }
.mapa-ruta__lienzo {
  position: relative; aspect-ratio: 16 / 8; min-height: 280px; overflow: hidden; background-color: #ece6d6;
  background-image:
    repeating-radial-gradient(ellipse at 28% 62%, transparent 0 34px, rgba(163,150,124,.3) 34px 35px),
    repeating-radial-gradient(ellipse at 74% 36%, transparent 0 46px, rgba(163,150,124,.24) 46px 47px),
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
}
.mapa-ruta__lienzo svg.guia-ruta { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-ruta__pin { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.mapa-ruta__pin span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--terracota); color: #fff; font: 700 .85rem var(--f-texto); box-shadow: 0 0 0 5px rgba(184,113,79,.25), 0 2px 6px rgba(0,0,0,.25); }
.mapa-ruta__pin--b span { background: var(--bosque); box-shadow: 0 0 0 5px rgba(49,92,74,.25), 0 2px 6px rgba(0,0,0,.25); }
.mapa-ruta__etiqueta { position: absolute; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: #fff; padding: .15rem .45rem; box-shadow: var(--sombra); color: var(--tinta); white-space: nowrap; }
.mapa-ruta__controles { position: absolute; right: .75rem; top: .75rem; display: grid; gap: 4px; }
.mapa-ruta__controles button { width: 44px; height: 44px; border: 1px solid var(--linea); background: #fff; font: 600 1.3rem var(--f-texto); color: var(--tinta); cursor: pointer; }
.mapa-ruta__controles button:hover { background: var(--crema); }
.mapa-ruta__sello { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); text-align: center; border: 2px solid var(--terracota-texto); color: var(--terracota-texto); background: rgba(255,255,255,.85); padding: .7rem 1.1rem; font: 700 .72rem/1.4 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; max-width: min(80%, 24rem); }
.mapa-ruta__sello strong { display: block; font: 600 1.7rem/1 var(--f-manuscrita); letter-spacing: 0; text-transform: none; }
.mapa-ruta__atribucion { position: absolute; left: 0; bottom: 0; margin: 0; padding: .2rem .5rem; font-size: .68rem; line-height: 1.3; background: rgba(255,255,255,.85); color: var(--piedra); }
.mapa-ruta__pie { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; padding: 1rem; }
.mapa-ruta__pie p { margin: 0; font-size: .85rem; color: var(--piedra); flex: 1 1 18rem; }

.perfil { padding: 1rem 1rem 1.25rem; border-top: 1px solid var(--linea); }
.perfil h3 { font-family: var(--f-manuscrita); font-size: 1.7rem; margin-bottom: .25rem; }
.perfil__grafico { position: relative; height: 150px; background: linear-gradient(var(--crema), #fff); border-left: 1px solid var(--salvia); border-bottom: 1px solid var(--salvia); }
.perfil__grafico svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.perfil__ejes { display: flex; justify-content: space-between; font-size: .75rem; color: var(--piedra); margin-top: .25rem; }

/* ---------- Inicio, final y regreso (billetes) ---------- */
.billetes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
.billete { display: grid; grid-template-columns: 5.5rem 1fr; background: #fff; box-shadow: var(--sombra); position: relative; }
.billete::before, .billete::after { content: ""; position: absolute; left: 5.5rem; width: 18px; height: 18px; border-radius: 50%; background: var(--crema); margin-left: -9px; }
.billete::before { top: -9px; }
.billete::after { bottom: -9px; }
.billete__talon { display: grid; place-content: center; text-align: center; background: var(--bosque); color: #fff; border-right: 2px dashed rgba(255,255,255,.6); padding: 1rem .5rem; }
.billete--final .billete__talon { background: var(--terracota-texto); }
.billete__letra { font: 700 3rem/1 var(--f-manuscrita); }
.billete__rotulo { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.billete__cuerpo { padding: 1.25rem 1.4rem 1.4rem; min-width: 0; }
.billete__cuerpo h3 { font-family: var(--f-titular); font-size: 1.7rem; margin-bottom: .35rem; overflow-wrap: anywhere; }
.billete__cuerpo p { margin: 0 0 .35rem; color: var(--piedra); font-size: .95rem; }
.billete__coord { font-variant-numeric: tabular-nums; font-size: .88rem; }
.regreso { margin-top: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.25rem 1.4rem; background: #fff; border-left: 3px solid var(--terracota); box-shadow: var(--sombra); }
.regreso svg { width: 34px; height: 34px; fill: none; stroke: var(--terracota-texto); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.regreso h3 { font-family: var(--f-titular); font-size: 1.4rem; margin-bottom: .25rem; }
.regreso p { margin: 0; color: var(--piedra); }

/* ---------- Acceso y logística ---------- */
.logistica { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.logistica__item { background: #fff; padding: 1.4rem 1.4rem 1.5rem; border-top: 3px solid var(--salvia); box-shadow: var(--sombra); }
.logistica__item svg { width: 36px; height: 36px; fill: none; stroke: var(--bosque); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .6rem; }
.logistica__item h3 { font-family: var(--f-titular); font-size: 1.5rem; margin-bottom: .4rem; }
.logistica__item p { margin: 0; color: var(--piedra); font-size: .97rem; }

/* ---------- Avisos: restricciones y seguridad (componente nuevo) ---------- */
.aviso { background: #fff; padding: 1.4rem 1.5rem 1.5rem; box-shadow: var(--sombra); border-left: 4px solid var(--salvia); }
.aviso + .aviso { margin-top: clamp(1.25rem, 3vw, 2rem); }
.aviso--seguridad { border-left-color: var(--terracota); background: #fffaf5; }
.aviso__cabecera { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.aviso__cabecera svg { flex: none; width: 38px; height: 38px; fill: none; stroke: var(--terracota-texto); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aviso--acceso .aviso__cabecera svg { stroke: var(--bosque); }
.aviso__cabecera h2, .aviso__cabecera h3 { font-family: var(--f-titular); font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.1; }
.aviso__nota { margin: 0 0 1rem; font-size: .9rem; font-weight: 700; color: var(--terracota-texto); }
.aviso__lista { list-style: none; display: grid; gap: 1rem; }
.aviso__lista li { padding-top: 1rem; border-top: 1px dashed var(--salvia); }
.aviso__lista li:first-child { padding-top: 0; border-top: 0; }
.aviso__meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-bottom: .35rem; }
.aviso__lista p { margin: 0 0 .35rem; }
.aviso__fuente { font-size: .85rem; color: var(--piedra); }
.aviso__fuente a { color: var(--bosque); }

/* ---------- Listas prácticas ---------- */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.dos-columnas h3 { font-family: var(--f-titular); font-size: 1.6rem; margin-bottom: .75rem; }
.lista-check { list-style: none; display: grid; gap: .6rem; }
.lista-check li { position: relative; padding-left: 1.9rem; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--bosque); font-weight: 800; }

/* ---------- Fuentes y revisión ---------- */
.fuentes { border-top: 1px solid var(--linea); padding-top: 1.5rem; font-size: .92rem; color: var(--piedra); }
.fuentes h2 { font: 700 .75rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-texto); margin-bottom: .75rem; }
.fuentes ul { margin: 0 0 1rem 1.1rem; }
.fuentes li { margin-bottom: .25rem; }
.fuentes .revision { margin: 0; font-weight: 700; color: var(--tinta); }

/* ---------- Anchura de sección de lectura ---------- */
.seccion--compacta { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.seccion--blanca { background: #fff; }

/* ---------- Galería de ficha (reutiliza .galeria / .polaroid) ---------- */
.galeria--ficha { grid-template-columns: repeat(4, 1fr); padding: 1rem .5rem; }
.galeria--ficha .polaroid { margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .ficha-tecnica__rejilla { grid-template-columns: repeat(3, 1fr); }
  .ficha-tecnica__celda:nth-child(4) { border-left: 0; }
  .ficha-tecnica__celda:nth-child(n+4) { border-top: 1px dashed var(--salvia); }
  .galeria--ficha { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .billetes, .dos-columnas { grid-template-columns: 1fr; }
  .logistica { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .mapa-ruta__lienzo { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .ficha-tecnica__rejilla { grid-template-columns: repeat(2, 1fr); }
  .ficha-tecnica__celda:nth-child(odd) { border-left: 0; }
  .ficha-tecnica__celda:nth-child(4) { border-left: 1px dashed var(--salvia); }
  .ficha-tecnica__celda:nth-child(n+3) { border-top: 1px dashed var(--salvia); }
  .epoca ol { grid-template-columns: repeat(6, 1fr); }
  .galeria--ficha { grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; padding-inline: 0; }
  .galeria--ficha .polaroid { padding: 8px 8px 0; }
  .galeria--ficha .polaroid figcaption { font-size: 1.05rem; }
  .billete { grid-template-columns: 4rem 1fr; }
  .billete::before, .billete::after { left: 4rem; }
  .billete__letra { font-size: 2.3rem; }
  .billete__cuerpo { padding: 1rem; }
  .mapa-ruta__lienzo { aspect-ratio: 1 / 1; min-height: 0; }
  .mapa-ruta__sello { font-size: .62rem; padding: .5rem .7rem; }
  .regreso { grid-template-columns: 1fr; }
  .aviso { padding: 1.1rem 1rem 1.2rem; }
  .hero__credito { display: none; }
}

/* ---------- Ajustes de la plantilla dinámica ---------- */
.hero__imagen--vacia { aspect-ratio: 16 / 7; background: var(--arena); }
.hero__imagen picture { display: contents; }
.lectura :where(img) { max-width: 100%; height: auto; }
.lectura :where(ul, ol) { margin: 0 0 1rem 1.25rem; }
.dos-columnas--una { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
.billetes--uno { grid-template-columns: minmax(0, 36rem); justify-content: center; }
.galeria--ficha .polaroid figcaption { display: flex; flex-direction: column; gap: .1rem; }
.galeria--ficha .polaroid .credito { font: 400 .7rem/1.3 var(--f-texto); color: var(--piedra); letter-spacing: 0; }
.mapa-ruta__lienzo--trazado { aspect-ratio: 2 / 1; min-height: 0; }
@media (max-width: 899px) { .mapa-ruta__lienzo--trazado { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) { .mapa-ruta__lienzo--trazado { aspect-ratio: 1 / 1; } }
.mapa-ruta__lienzo--trazado svg.guia-ruta { height: 100%; }
.mapa-ruta__imagen img { display: block; width: 100%; height: auto; }
.perfil__grafico svg path { vector-effect: non-scaling-stroke; }
.enlaces-utiles { max-width: 46rem; margin: clamp(1.5rem, 4vw, 2.25rem) auto 0; }
.enlaces-utiles h3 { font-family: var(--f-titular); font-size: 1.5rem; margin-bottom: .6rem; }
.enlaces-utiles ul { list-style: none; display: grid; gap: .5rem; }
.enlaces-utiles a { color: var(--bosque); }
.relacionados { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); max-width: 900px; margin-inline: auto; }
.enlaces-termino { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.fuentes__aviso { margin: .75rem 0 0; }
.faq .encabezado p { margin-top: .5rem; }

/* ---------- Etapas de una travesía ---------- */
.etapas { list-style: none; display: grid; gap: 1rem; counter-reset: etapa; }
.etapa { display: grid; grid-template-columns: 4rem 1fr; background: #fff; box-shadow: var(--sombra); border-left: 3px solid var(--bosque); }
.etapa__numero { display: grid; place-content: center; font-size: 2.4rem; line-height: 1; color: var(--terracota-texto); background: var(--crema); }
.etapa__cuerpo { padding: 1rem 1.25rem 1.1rem; min-width: 0; }
.etapa__cuerpo h3 { font-family: var(--f-titular); font-size: 1.5rem; margin-bottom: .2rem; }
.etapa__tramo { margin: 0 0 .15rem; font-weight: 700; }
.etapa__datos { margin: 0 0 .4rem; color: var(--terracota-texto); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.etapa__cuerpo p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .etapa { grid-template-columns: 3rem 1fr; } .etapa__numero { font-size: 1.9rem; } }
.ficha-tecnica__valor--texto { font-size: clamp(1.2rem, 1.7vw, 1.5rem); overflow-wrap: normal; hyphens: auto; }
.hero--ficha { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }