/* ==========================================================================
   Rutas y Sendas · Ficha de ruta · experiencia de lectura
   Se carga solo en /rutas/{slug}/ (is_singular('ruta')), después de ficha.css. Usa solo los tokens del sistema aprobado.
   Todo va acotado a body.rys-ficha-ruta: la Home y el resto de plantillas no cambian.
   Origen: REDISENO_FICHA/ficha-lectura.css (propuesta aprobada), con los ajustes de la implementación:
   H4 de 20 px en móvil, tabla de variantes sin columna de estado, índice tras la introducción y el aviso,
   preguntas sin insignia de estado y anclajes compensados con la barra de administración.
   ========================================================================== */

body.rys-ficha-ruta {
  --lectura-ancho: 42rem;                                   /* ≈ 72 caracteres por línea */
  --lectura-cuerpo: clamp(1.0625rem, .9rem + .35vw, 1.125rem); /* 17 px (móvil) → 18 px (escritorio) */
  --ancla-margen: 5.5rem;                                   /* cabecera fija (≈ 69 px) más aire */
}
body.rys-ficha-ruta [id] { scroll-margin-top: var(--ancla-margen); } /* los anclajes no quedan bajo la cabecera fija */
body.rys-ficha-ruta.admin-bar { --ancla-margen: calc(5.5rem + 32px); }
@media (max-width: 782px) { body.rys-ficha-ruta.admin-bar { --ancla-margen: calc(5.5rem + 46px); } }

/* ---------- 1 · Cabecera fija: compacta desde el principio (solo fichas) ---------- */
body.rys-ficha-ruta .cabecera { background: #fff; }
@media (min-width: 900px) {
  body.rys-ficha-ruta .cabecera .cabecera__interior { flex-direction: row; justify-content: space-between; padding: .4rem 0; }
  body.rys-ficha-ruta .cabecera .marca__nombre { font-size: 2rem; }
  body.rys-ficha-ruta .cabecera .marca__sub { display: none; }
  body.rys-ficha-ruta .cabecera .menu { width: auto; margin: 0; border: 0; }
  body.rys-ficha-ruta .cabecera .menu ul { gap: 2rem; }
  body.rys-ficha-ruta .cabecera { box-shadow: 0 6px 20px -14px rgba(0,0,0,.4); }
}
@media (max-width: 899px) {
  body.rys-ficha-ruta .cabecera .marca__sub { display: none; }
  body.rys-ficha-ruta .cabecera .cabecera__interior { padding-top: .6rem; }
}

/* ---------- 2 · Hero de ficha ---------- */
body.rys-ficha-ruta .hero--ficha h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.12; } /* 32 → 52 px */
/* Con foto: altura acotada para que el título entre en la primera pantalla */
body.rys-ficha-ruta .hero--ficha .hero__imagen { width: 100%; aspect-ratio: auto; height: clamp(15rem, 28vw, 25rem); }
body.rys-ficha-ruta .hero--ficha .hero__tarjeta { margin-top: -5rem; }
/* Sin foto: sin bloque vacío; la tarjeta se apoya sobre el fondo de helechos aprobado */
body.rys-ficha-ruta .hero--ficha:has(.hero__imagen--vacia) {
  background: var(--crema) url("../img/deco-hojas.svg") center / 640px repeat;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
body.rys-ficha-ruta .hero--ficha .hero__imagen--vacia { display: none; }
body.rys-ficha-ruta .hero--ficha:has(.hero__imagen--vacia) .hero__tarjeta { margin-top: 0; }
@media (max-width: 899px) {
  body.rys-ficha-ruta .hero--ficha .hero__imagen { aspect-ratio: 16 / 9; height: auto; }
  body.rys-ficha-ruta .hero--ficha .hero__tarjeta { margin-top: -3rem; }
}

/* ---------- 3 · Texto de lectura: escala tipográfica y ritmo ---------- */
body.rys-ficha-ruta .lectura { font-size: var(--lectura-cuerpo); line-height: 1.75; }
body.rys-ficha-ruta .lectura > p, body.rys-ficha-ruta .lectura > ul, body.rys-ficha-ruta .lectura > ol,
body.rys-ficha-ruta .lectura > h3, body.rys-ficha-ruta .lectura > h4, body.rys-ficha-ruta .lectura > .notas-cifras { max-width: var(--lectura-ancho); }
body.rys-ficha-ruta .lectura p { margin: 0 0 1.25rem; }
body.rys-ficha-ruta .lectura p a { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* H2 de la sección: 29 → 38 px */
body.rys-ficha-ruta .lectura h2 { font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.375rem); line-height: 1.12; margin-bottom: 1rem; }

/* H3 = apartado principal (el cuerpo cuelga de un único H2): 26 → 28 px, filete terracota y mucho aire */
body.rys-ficha-ruta .lectura h3 {
  position: relative; font-size: clamp(1.625rem, 1.4rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.2;
  margin: clamp(3rem, 6vw, 4.25rem) 0 1rem; padding-top: 1.35rem; color: var(--tinta); text-wrap: balance;
}
body.rys-ficha-ruta .lectura h3::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 2px; background: var(--terracota); }
body.rys-ficha-ruta .lectura h2 + h3 { margin-top: 1.75rem; }

/* H4 = tramo o subapartado: 20 → 21 px, otra familia (sans) y filete lateral para que no parezca un párrafo */
body.rys-ficha-ruta .lectura h4 {
  font: 700 clamp(1.25rem, 1.1rem + .3vw, 1.3125rem)/1.3 var(--f-texto); color: var(--bosque-oscuro);
  margin: 2.25rem 0 .6rem; padding-left: .85rem; border-left: 3px solid var(--salvia); text-wrap: balance;
}
body.rys-ficha-ruta .lectura h3 + h4 { margin-top: 1.5rem; }

/* El aviso de cierre conserva exactamente su diseño actual (referencia visual) */
body.rys-ficha-ruta .lectura .aviso { max-width: none; margin: 2rem 0 .5rem; }
body.rys-ficha-ruta .lectura .aviso h3 { font-size: 1.5rem; margin: 1.75rem 0 .5rem; padding: 0; }
body.rys-ficha-ruta .lectura .aviso h3::before { content: none; }
body.rys-ficha-ruta .lectura .aviso p:last-child { margin-bottom: 0; }

/* ---------- 4 · Resumen práctico: tarjetas informativas (grupo con clase «resumen-practico») ---------- */
body.rys-ficha-ruta .lectura .resumen-practico { margin: 1.5rem 0 0; }
body.rys-ficha-ruta .lectura .resumen-practico > .wp-block-group__inner-container,
body.rys-ficha-ruta .lectura .resumen-practico:not(:has(> .wp-block-group__inner-container)) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem;
}
body.rys-ficha-ruta .lectura .resumen-practico p {
  margin: 0; padding: 1.1rem 1.25rem 1.2rem; background: #fff; border-top: 3px solid var(--salvia);
  box-shadow: var(--sombra); font-size: .97rem; line-height: 1.6;
}
body.rys-ficha-ruta .lectura .resumen-practico p strong:first-child {
  display: block; margin-bottom: .35rem; font: 700 .72rem/1.3 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-texto);
}

/* ---------- 5 · Comparativa de variantes (bloque Tabla con clase «tabla-variantes») ----------
   Cuatro columnas: configuración y fuente, distancia, duración y desnivel. El estado de cada cifra no se muestra al público. */
body.rys-ficha-ruta .lectura .tabla-variantes { margin: 1.75rem 0 1.5rem; max-width: none; }
body.rys-ficha-ruta .tabla-variantes table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; box-shadow: var(--sombra); font-size: .95rem; line-height: 1.5; }
body.rys-ficha-ruta .tabla-variantes figcaption { margin: .75rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--piedra); text-align: left; }
body.rys-ficha-ruta .tabla-variantes th:nth-child(1) { width: 31%; }
body.rys-ficha-ruta .tabla-variantes th:nth-child(2) { width: 20%; }
body.rys-ficha-ruta .tabla-variantes th:nth-child(3) { width: 21%; }
body.rys-ficha-ruta .tabla-variantes th:nth-child(4) { width: 28%; }
body.rys-ficha-ruta .tabla-variantes thead, body.rys-ficha-ruta .tabla-variantes tfoot { border: 0; } /* sin el filete oscuro del CSS de bloques */
body.rys-ficha-ruta .tabla-variantes thead th {
  padding: .85rem 1rem; background: var(--crema); border: 0; border-bottom: 2px solid var(--salvia); text-align: left;
  font: 700 .7rem/1.3 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-texto);
}
body.rys-ficha-ruta .tabla-variantes td { padding: .95rem 1rem; border: 0; border-top: 1px solid var(--linea); vertical-align: top; overflow-wrap: break-word; hyphens: manual; }
body.rys-ficha-ruta .tabla-variantes td:first-child strong { display: block; font: 600 1.2rem/1.2 var(--f-titular); color: var(--tinta); margin-bottom: .2rem; }
body.rys-ficha-ruta .tabla-variantes td:first-child em { font-style: normal; font-size: .85rem; color: var(--piedra); }
body.rys-ficha-ruta .tabla-variantes tbody tr:last-child td { background: #fbfaf6; }   /* itinerario ampliado: distinto del tramo de la garganta */
body.rys-ficha-ruta .tabla-variantes .sd { color: var(--piedra); font-style: italic; }
@media (max-width: 760px) {
  body.rys-ficha-ruta .tabla-variantes table, body.rys-ficha-ruta .tabla-variantes tbody,
  body.rys-ficha-ruta .tabla-variantes tr, body.rys-ficha-ruta .tabla-variantes td { display: block; width: auto; }
  body.rys-ficha-ruta .tabla-variantes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.rys-ficha-ruta .tabla-variantes table { background: none; box-shadow: none; }
  body.rys-ficha-ruta .tabla-variantes tr { background: #fff; box-shadow: var(--sombra); margin-bottom: 1rem; border-top: 3px solid var(--salvia); }
  body.rys-ficha-ruta .tabla-variantes td { border-top: 0; padding: .55rem 1rem; display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; }
  body.rys-ficha-ruta .tabla-variantes td:first-child { display: block; padding-top: 1rem; border-bottom: 1px dashed var(--salvia); }
  body.rys-ficha-ruta .tabla-variantes td:nth-child(2)::before { content: "Distancia"; }
  body.rys-ficha-ruta .tabla-variantes td:nth-child(3)::before { content: "Duración"; }
  body.rys-ficha-ruta .tabla-variantes td:nth-child(4)::before { content: "Desnivel"; }
  body.rys-ficha-ruta .tabla-variantes td::before { font: 700 .68rem/1.6 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-texto); }
  body.rys-ficha-ruta .tabla-variantes td:first-child::before { content: none; }
}
body.rys-ficha-ruta .lectura .notas-cifras { margin: 1.5rem 0; padding-left: 1.1rem; border-left: 3px solid var(--salvia); }
body.rys-ficha-ruta .lectura .notas-cifras p { font-size: .97rem; line-height: 1.65; color: var(--piedra); }
body.rys-ficha-ruta .lectura .notas-cifras p:last-child { margin-bottom: 0; }
body.rys-ficha-ruta .lectura .notas-cifras strong { color: var(--tinta); }
/* Nota solo para editores (vista con ?rys_ver_pendientes=1): estado interno de las cifras de la tabla */
body.rys-ficha-ruta .nota-editor { max-width: var(--lectura-ancho); margin: 1rem 0 0; padding: .6rem .9rem; border: 1px dashed var(--terracota); background: rgba(184,113,79,.06); font-size: .85rem; line-height: 1.5; color: var(--piedra); }

/* ---------- 6 · Recursos de cartografía externos (lista con clase «recursos») ---------- */
body.rys-ficha-ruta .lectura ul.recursos { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
body.rys-ficha-ruta .recursos li { margin: 0; }
body.rys-ficha-ruta .recursos a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .65rem 1rem;
  background: #fff; border: 1px solid var(--linea); border-left: 3px solid var(--salvia); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .97rem; line-height: 1.4;
}
body.rys-ficha-ruta .recursos a::after { content: "↗"; flex: none; color: var(--terracota-texto); font-weight: 700; }
body.rys-ficha-ruta .recursos a:hover { border-left-color: var(--terracota); color: var(--terracota-texto); }

/* ---------- 7 · Índice del apartado (tras la introducción y el aviso): abierto en escritorio, plegado en móvil ---------- */
body.rys-ficha-ruta .indice-apartado { max-width: var(--lectura-ancho); margin: 2rem 0 0; background: var(--crema); border-left: 3px solid var(--terracota); }
body.rys-ficha-ruta .indice-apartado summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .5rem 1.25rem; cursor: pointer; list-style: none;
  font: 700 .72rem/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-texto);
}
body.rys-ficha-ruta .indice-apartado summary::-webkit-details-marker { display: none; }
body.rys-ficha-ruta .indice-apartado summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
body.rys-ficha-ruta .indice-apartado details[open] > summary::after { transform: rotate(-135deg); }
body.rys-ficha-ruta .indice-apartado ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0 1.25rem .75rem; font-size: .92rem; line-height: 1.4; }
body.rys-ficha-ruta .indice-apartado li { margin: 0; }
body.rys-ficha-ruta .indice-apartado a { display: inline-flex; align-items: center; min-height: 36px; color: var(--tinta); }
@media (max-width: 899px) {
  body.rys-ficha-ruta .indice-apartado ol { display: block; padding-bottom: .5rem; }
  body.rys-ficha-ruta .indice-apartado li + li { border-top: 1px solid var(--linea); }
  body.rys-ficha-ruta .indice-apartado a { display: flex; min-height: 44px; }
}

/* Párrafo destacado (grupo o párrafo con clase «destacado»): un recordatorio clave por apartado, sin abusar */
body.rys-ficha-ruta .lectura .destacado { max-width: var(--lectura-ancho); padding: 1rem 1.25rem; background: var(--crema); border-left: 3px solid var(--bosque); }
body.rys-ficha-ruta .lectura .destacado:last-child, body.rys-ficha-ruta .lectura p.destacado { margin-bottom: 1.25rem; }

/* ---------- 8 · Resto de secciones: ritmo y legibilidad ---------- */
body.rys-ficha-ruta .encabezado h2.manuscrita { text-wrap: balance; }
body.rys-ficha-ruta .dos-columnas .lista-check li { line-height: 1.6; }
body.rys-ficha-ruta .faq details p { max-width: var(--lectura-ancho); line-height: 1.7; }
/* Preguntas: el estado interno de cada respuesta no se muestra como etiqueta (las advertencias van dentro de la respuesta) */
body.rys-ficha-ruta .faq summary .insignia--pend { display: none; }

/* ---------- 9 · Enlaces útiles de la logística: etiqueta y enlace alineados, objetivo táctil ≥ 44 px ---------- */
body.rys-ficha-ruta .enlaces-utiles li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .25rem .9rem; align-items: center; }
body.rys-ficha-ruta .enlaces-utiles li .insignia { justify-self: start; }
body.rys-ficha-ruta .enlaces-utiles a { display: inline-block; padding: .5rem 0; line-height: 1.4; }
@media (max-width: 560px) { body.rys-ficha-ruta .enlaces-utiles li { grid-template-columns: 1fr; } }