/*
Theme Name: The Hiking Tribe
Theme URI: https://thehikingtribe.com/
Author: Alfredo Ramses
Description: El tema propio de The Hiking Tribe, hecho desde cero (oct 2026): la página es la subida, del inicio del sendero a la cumbre. NO se edita esta hoja: sale de la maqueta (blogs/hiking/theme/maqueta-desde-cero/assets/site.css) con exportar_tema.py.
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 8.1
License: Propietaria
Text Domain: thehikingtribe
*/
/* las letras, alojadas en el tema (bajar_fuentes.py) */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/big-shoulders-display-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/big-shoulders-display-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/big-shoulders-display-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/big-shoulders-display-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/big-shoulders-display-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/big-shoulders-display-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-serif-4-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/source-serif-4-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* The Hiking Tribe — maqueta desde cero (5 oct 2026). La idea: la hoja del mapa topográfico.
   Colores de un mapa de campo: papel, tinta del bosque, curvas de nivel marrones, agua azul
   y el naranja de las marcas del sendero. */
:root {
  --papel: #F4F5EF;
  --papel-2: #E9ECE2;
  --bosque: #DCE8D2;
  --curva: #A8703F;
  --curva-honda: #7A4D2B;
  --agua: #2D77B3;
  --agua-clara: #CFE2EF;
  --blaze: #F2581C;
  --blaze-texto: #B23E0E;
  --tinta: #1D2420;
  --tinta-2: #4E5953;
  --linea: #CDD3C8;
  --noche: #101A16;
  --noche-2: #1B2A23;
  --laton: #CBA56A;
  --laton-hondo: #7C5A26;
  --curva-clara: #DDC2A6;
  --curva-palida: #EEE1D2;
  --blaze-palido: #FBD3BF;

  --f-cartel: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Source Serif 4", Georgia, serif;
  --f-dato: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --r: 4px;
  --ancho: 1240px;
  --cab-alto: 72px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--cab-alto) + 12px); }
/* 🪤 5 oct 2026: unos 290 artículos viejos traen en su propio <style> reglas para `body` (flex centrado,
   padding de 20 px, fondo blanco, otra letra). Con el Newsmag pasaban; aquí ponían el pie y el artículo
   uno al lado del otro. `html body` gana a `body` sin !important (ninguna de ellas lo lleva: censado),
   y se reponen justo las 10 propiedades que tocan. */
html body { margin: 0; padding: 0; display: block; min-height: 0; justify-content: normal; align-items: normal;
  box-sizing: border-box; background-color: var(--papel); color: var(--tinta); font-family: var(--f-texto); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1061px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blaze-texto); }
:focus-visible { outline: 3px solid var(--blaze); outline-offset: 2px; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--papel); padding: 8px 14px; z-index: 50; }
.saltar:focus { left: 8px; top: 8px; }
.ico { width: 18px; height: 18px; flex: none; }
h1, h2, h3 { text-wrap: balance; }

/* ───────────────────────────── la marca del sendero (blaze): el punto de cada título */
.blaze {
  display: inline-block; width: 10px; height: 22px; border-radius: 2px;
  background: var(--blaze); flex: none;
}

/* ───────────────────────────── cabecera */
.cab {
  position: sticky; top: 0; z-index: 30;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cab-in {
  max-width: var(--ancho); margin: 0 auto; height: var(--cab-alto);
  padding: 0 16px; display: flex; align-items: center; gap: 14px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); margin-right: auto; }
.marca:hover { color: var(--tinta); }
.logo { width: 50px; height: 50px; display: block; overflow: visible; }
.cab .logo { margin-top: -6px; }
/* el cairn se apila al llegar y la piedra de arriba se balancea al pasar el ratón */
.logo-cairn .pd, .logo-cairn .tope { transform-box: fill-box; transform-origin: 50% 100%; }
.cab .logo-cairn .pd2, .cab .logo-cairn .pd3, .cab .logo-cairn .pd4,
.pie.visto .logo-cairn .pd2, .pie.visto .logo-cairn .pd3, .pie.visto .logo-cairn .pd4 { animation: apila .55s cubic-bezier(.2, .75, .3, 1) both; }
.logo-cairn .pd2 { animation-delay: .15s !important; }
.logo-cairn .pd3 { animation-delay: .38s !important; }
.logo-cairn .pd4 { animation-delay: .62s !important; }
.js .pie:not(.visto) .logo-cairn .pd2, .js .pie:not(.visto) .logo-cairn .pd3, .js .pie:not(.visto) .logo-cairn .pd4 { opacity: 0; }
@keyframes apila { from { transform: translateY(-18px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.logo-cairn.salta .pd2, .logo-cairn.salta .pd3, .logo-cairn.salta .pd4 { animation: salta .5s cubic-bezier(.3, .7, .4, 1) both; }
.logo-cairn.salta .pd2 { animation-delay: 0s !important; }
.logo-cairn.salta .pd3 { animation-delay: .07s !important; }
.logo-cairn.salta .pd4 { animation-delay: .14s !important; }
.logo-cairn.salta .tope { animation: equilibrio .9s ease-in-out .45s; }
@keyframes salta { 0% { transform: none; } 40% { transform: translateY(-7px); } 100% { transform: none; } }
@keyframes equilibrio { 0% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.marca-txt {
  font-family: var(--f-cartel); font-weight: 800; font-size: 30px; line-height: .88;
  text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
}
.marca-the { display: block; font-size: 15px; font-weight: 700; letter-spacing: .16em; color: var(--blaze-texto); }
.menu { display: none; }
.menu-b {
  background: none; border: 0; color: var(--tinta); position: relative; display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--f-cartel); font-weight: 700; font-size: 18px; text-transform: uppercase;
  letter-spacing: .04em; text-decoration: none; padding: 6px 2px; cursor: pointer;
}
.altimetro {
  display: none; align-items: center; gap: 6px; font-family: var(--f-dato); font-size: 13px; color: var(--tinta-2);
  border: 1px solid var(--linea); border-radius: 999px; padding: 4px 10px 4px 8px;
}
.alt-perfil { width: 44px; height: 14px; }
.alt-linea { fill: none; stroke: var(--curva); stroke-width: 1.6; stroke-linejoin: round; }
.alt-punto { fill: var(--blaze); }
.alt-n { color: var(--tinta); min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.cab-boton {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--tinta);
  border-radius: var(--r); cursor: pointer;
}
.cab-boton:hover { background: var(--papel-2); color: var(--tinta); }
.menu-b .ico { width: 16px; height: 16px; transition: transform .2s; }
.menu-b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--blaze); border-radius: 2px; transform: scaleX(0); transition: transform .2s; }
.menu-b:hover::after, .menu-b[aria-expanded="true"]::after { transform: scaleX(1); }
.menu-b[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* el megamenú (5 oct 2026) */
.mm { position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-bottom: 1px solid var(--linea);
      box-shadow: 0 18px 32px rgb(29 36 32 / .12); animation: aparece .25s ease; }
.mm[hidden] { display: none; }
.mm-in { max-width: var(--ancho); margin: 0 auto; padding: 26px 16px 30px; display: grid;
         grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1.35fr); gap: 34px; align-items: start; }
.mm-intro { position: relative; overflow: hidden; background: var(--papel-2); border-radius: var(--r); padding: 20px 20px 18px; display: flex; flex-direction: column; }
.mm-ilus { width: calc(100% + 16px); max-width: none; margin: 4px -8px 0; aspect-ratio: 4 / 3; object-fit: contain; }
.mm-curvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-intro > :not(canvas) { position: relative; }
.mm-nombre { margin: 0; font-family: var(--f-cartel); font-weight: 800; font-size: 46px; line-height: .9; text-transform: uppercase; }
.mm-lema { margin: 8px 0 0; color: var(--tinta-2); font-size: 15px; line-height: 1.45; }
.mm-todo, .mm-col-t, .movil-todo { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--f-cartel); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; color: var(--blaze-texto); text-decoration: none; }
.mm-todo .ico, .mm-col-t .ico, .movil-todo .ico { width: 16px; height: 16px; }
.mm-subs { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.mm-subs li { break-inside: avoid; }
.mm-subs a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.mm-subs .blaze { width: 5px; height: 14px; opacity: 0; transform: scaleY(.4); transition: opacity .2s, transform .2s; }
.mm-subs a:hover .blaze, .mm-subs a:focus-visible .blaze { opacity: 1; transform: none; }
.mm-t { margin: 0 0 10px; font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.mm-arts-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mm-art { text-decoration: none; display: grid; align-content: start; gap: 8px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.mm-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.mm-in--mas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm-col-t { margin-top: 0; font-size: 22px; }
.mm-col ul { list-style: none; margin: 8px 0 0; padding: 0; }
.mm-col li a { display: block; padding: 6px 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-size: 15px; }

/* el buscador de la lupa: un panel como los del megamenú (5 oct 2026) */
.mm--buscar .mm-in--buscar { display: block; max-width: 900px; padding-top: 30px; }
.busca-t { display: block; font-family: var(--f-cartel); font-weight: 800; font-size: clamp(30px, 5vw, 44px); line-height: .95; text-transform: uppercase; margin-bottom: 14px; }
.busca-caja { display: flex; align-items: center; gap: 10px; border: 2px solid var(--tinta); border-radius: var(--r); background: #fff; padding: 4px 4px 4px 14px; }
.busca-caja > .ico { width: 22px; height: 22px; color: var(--tinta-2); }
.busca-caja input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--f-texto); font-size: 19px; color: var(--tinta); padding: 10px 0; }
.busca-caja input::-webkit-search-cancel-button { cursor: pointer; }
.busca-caja:focus-within { border-color: var(--blaze-texto); box-shadow: 0 0 0 3px rgb(242 88 28 / .18); }
.busca-ir { border: 0; border-radius: 3px; background: var(--tinta); color: var(--papel); font-family: var(--f-cartel); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 18px; cursor: pointer; }
.busca-ir:hover { background: var(--blaze-texto); }
.busca-res { margin-top: 14px; }
.busca-res:empty { display: none; }
.busca-res ul { list-style: none; margin: 0; padding: 0; }
.busca-res li a { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.3; }
.busca-res li a:hover, .busca-res li a.foco { color: var(--blaze-texto); }
.busca-res li b { font-weight: inherit; }
.busca-res li span { flex: none; font-family: var(--f-dato); font-size: 12px; font-weight: 500; color: var(--tinta-2); }
.busca-res mark { background: var(--blaze-palido); color: inherit; padding: 0 1px; border-radius: 2px; }
.busca-todo { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--f-cartel); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; color: var(--blaze-texto); text-decoration: none; }
.busca-nada { margin: 0; color: var(--tinta-2); }
.busca-ideas { display: grid; gap: 18px; margin-top: 22px; }
.busca-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-dato); font-size: 13px; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 12px; cursor: pointer; text-decoration: none; }
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip .blaze { width: 4px; height: 11px; }
@media (min-width: 760px) { .busca-ideas { grid-template-columns: 1fr 1.4fr; gap: 30px; } }

/* el menú del teléfono: un acordeón */
.movil { border-top: 1px solid var(--linea); padding: 4px 16px 16px; max-height: calc(100vh - var(--cab-alto)); overflow-y: auto; }
.movil[hidden] { display: none; }
.movil-r { border-bottom: 1px solid var(--papel-2); }
.movil-r summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-family: var(--f-cartel); font-weight: 700; font-size: 21px; text-transform: uppercase; padding: 11px 0; }
.movil-r summary::-webkit-details-marker { display: none; }
.movil-r summary .ico { transition: transform .2s; }
.movil-r[open] summary .ico { transform: rotate(180deg); }
.movil-r ul { list-style: none; margin: 0; padding: 0 0 4px 14px; border-left: 3px solid var(--blaze); }
.movil-r li a { display: block; padding: 7px 0; text-decoration: none; font-size: 16px; }
.movil-todo { margin: 6px 0 14px; }

@media (min-width: 1100px) {
  :root { --cab-alto: 84px; }
  .cab .logo { width: 64px; height: 64px; }
  .cab .marca-txt { font-size: 38px; }
  .cab .marca-the { font-size: 17px; }
  .menu { display: flex; align-items: center; gap: 18px; }
  .cab-menu { display: none; }
  .altimetro { display: flex; }
}

/* ───────────────────────────── la hoja del mapa (portada) */
.hoja {
  max-width: var(--ancho); margin: 0 auto; padding: 22px 16px 8px;
  display: grid; gap: 22px;
}
.hoja h1 {
  font-family: var(--f-cartel); font-weight: 800; text-transform: uppercase;
  font-size: clamp(42px, 9.5vw, 76px); line-height: .88; letter-spacing: .005em; margin: 0;
}
.h1-2 { display: block; color: var(--curva-honda); }
.lede { font-size: 18px; line-height: 1.5; margin: 16px 0 0; max-width: 34em; color: var(--tinta-2); }
.paradas-t { font-family: var(--f-cartel); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; margin: 22px 0 8px; }
.paradas-t span { font-family: var(--f-dato); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinta-2); }
.paradas { display: flex; flex-wrap: wrap; gap: 8px; }
.parada {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--f-cartel); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta); background: var(--papel); border: 1.5px solid var(--tinta); border-radius: var(--r);
  padding: 7px 12px 6px 10px; transition: background .2s, color .2s;
}
.parada .blaze { width: 6px; height: 14px; }
.parada:hover { background: var(--papel-2); }
.parada[aria-selected="true"] { background: var(--tinta); color: var(--papel); }
.ficha { margin-top: 14px; border-top: 2px solid var(--tinta); padding-top: 12px; }
.ficha-lema { margin: 0 0 8px; font-size: 15px; color: var(--tinta-2); }
.ficha-lema b { font-family: var(--f-cartel); font-size: 19px; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta); }
.ficha-l, .lista-arts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ficha-l a, .lista-arts a { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; text-decoration: none; font-size: 15px; line-height: 1.35; font-weight: 600; }
.ficha-l img, .lista-arts img { width: 80px; height: 60px; object-fit: cover; border-radius: 3px; }
.ficha-todo, .zona-ramas a {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--f-cartel); font-weight: 700;
  font-size: 17px; text-transform: uppercase; letter-spacing: .04em; color: var(--blaze-texto); text-decoration: none;
}
.ficha-todo .ico, .zona-ramas .ico { width: 16px; height: 16px; transition: transform .2s; }
.ficha-todo:hover .ico, .zona-ramas a:hover .ico { transform: translateX(3px); }
.ficha.cambia { animation: aparece .35s ease; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mapa { margin: 0; background: var(--papel); border: 1.5px solid var(--tinta); border-radius: var(--r); overflow: hidden; }
.mapa-collar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px; font-family: var(--f-dato); font-size: 11.5px; color: var(--tinta-2); letter-spacing: .02em;
}
.mapa-collar--arriba { border-bottom: 1px solid var(--tinta); text-transform: uppercase; }
.mapa-collar--arriba span:first-child { color: var(--tinta); font-weight: 500; }
.mapa-collar--abajo { border-top: 1px solid var(--tinta); }
.mapa-lienzo { position: relative; aspect-ratio: 4 / 3; background: var(--bosque); cursor: crosshair; touch-action: pan-y; }
.mapa-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lectura {
  position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(14px, -50%);
  background: var(--tinta); color: var(--papel); font-family: var(--f-dato); font-size: 12px; line-height: 1.3;
  padding: 5px 8px; border-radius: 3px; display: grid; white-space: nowrap;
}
.lectura b { font-weight: 500; font-size: 14px; color: #FFB48F; }
.lectura[hidden] { display: none; }
.mapa-pista {
  position: absolute; left: 10px; top: 10px; margin: 0; max-width: calc(100% - 20px);
  font-family: var(--f-dato); font-size: 11.5px; background: rgb(244 245 239 / .92); color: var(--tinta);
  padding: 4px 8px; border-radius: 3px; transition: opacity .4s;
}
.mapa-pista.fuera { opacity: 0; }
.escala { display: inline-flex; height: 7px; border: 1px solid var(--tinta); }
.escala i { width: 18px; height: 100%; }
.escala i:nth-child(odd) { background: var(--tinta); }
.leyenda { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.ley { display: inline-flex; align-items: center; gap: 5px; }
.ley::before { content: ""; width: 18px; height: 0; border-top: 2px solid; }
.ley-curva::before { border-color: var(--curva); }
.ley-sendero::before { border-color: var(--blaze); border-top-style: dashed; }
.ley-agua::before { border-color: var(--agua); }
.noche {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-dato); font-size: 12px; cursor: pointer;
  background: var(--tinta); color: var(--papel); border: 0; border-radius: 999px; padding: 5px 12px 5px 9px;
}
.noche .ico { width: 15px; height: 15px; }
.noche-sol { display: none; }
.noche[aria-pressed="true"] { background: var(--blaze); color: var(--tinta); }
.noche[aria-pressed="true"] .noche-sol { display: inline; }
.noche[aria-pressed="true"] .noche-luna { display: none; }
.mapa.de-noche .mapa-lienzo { background: var(--noche); cursor: none; }
.hoja-paradas .paradas-t { margin-top: 0; }
@media (min-width: 1024px) {
  .hoja { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "cab mapa" "paradas mapa"; grid-template-rows: auto 1fr;
          align-items: start; padding-top: 30px; column-gap: 36px; row-gap: 22px; }
  .hoja-cab { grid-area: cab; padding-top: 6px; }
  .hoja-paradas { grid-area: paradas; }
  .mapa { grid-area: mapa; position: sticky; top: calc(var(--cab-alto) + 46px); }
}

/* ───────────────────────────── secciones */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 46px 16px 8px; }
.sec-cab { margin-bottom: 18px; }
.sec-cab h2, .mas-c h2 {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--f-cartel); font-weight: 800; text-transform: uppercase;
  font-size: clamp(32px, 6vw, 46px); line-height: .95; letter-spacing: .01em;
}
.sec-sub { margin: 8px 0 0; color: var(--tinta-2); font-size: 16px; max-width: 46em; }
.meta { font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); margin: 0 0 6px; }
.meta a { color: var(--blaze-texto); text-decoration: none; }

/* el registro */
.registro-in { display: grid; gap: 22px; }
.reg-1 { display: grid; gap: 12px; }
.reg-1-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.reg-1 h3 { margin: 0; font-family: var(--f-cartel); font-weight: 800; font-size: clamp(28px, 5vw, 38px); line-height: 1; text-transform: uppercase; }
.reg-1 h3 a { text-decoration: none; }
.reg-l { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.reg-fila {
  display: grid; grid-template-columns: 1fr 80px; grid-template-areas: "fecha foto" "titulo foto" "rama foto";
  column-gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.reg-fila time { grid-area: fecha; font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.reg-fila-t { grid-area: titulo; font-weight: 600; font-size: 16px; line-height: 1.3; text-decoration: none; }
.reg-fila-r { grid-area: rama; font-family: var(--f-dato); font-size: 12px; color: var(--blaze-texto); text-decoration: none; margin-top: 4px; }
.reg-fila img { grid-area: foto; width: 80px; height: 60px; object-fit: cover; border-radius: 3px; align-self: center; }
@media (min-width: 900px) {
  .registro-in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 34px; }
  .reg-fila { grid-template-columns: 96px 1fr 96px; grid-template-areas: "fecha titulo foto" "fecha rama foto"; }
  .reg-fila img { width: 96px; height: 72px; }
}

/* la mochila */
.mochila-in { display: grid; gap: 18px; }
.pack { width: min(100%, 470px); margin: 0 auto; overflow: visible; }
.pk-espalda { fill: none; stroke: var(--tinta-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.pk-espalda-t, .pk-dentro { font-family: var(--f-dato); font-size: 11px; fill: var(--tinta-2); letter-spacing: .04em; }
.pk-dentro { fill: var(--curva-honda); font-weight: 500; pointer-events: none; }
.z-fondo { transition: fill .2s; }
.pk-arriba { fill: var(--bosque); }
.pk-nucleo { fill: var(--curva-clara); }
.pk-nucleo-2 { fill: var(--curva-palida); }
.pk-fondo { fill: var(--agua-clara); }
.zona:hover .z-fondo, .zona.activa .z-fondo, .zona:focus-visible .z-fondo { fill: var(--blaze-palido); }
.pk-corte { fill: none; stroke: var(--tinta); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .55; pointer-events: none; }
.pk-silueta { fill: none; stroke: var(--tinta); stroke-width: 2.6; transition: stroke .2s; }
.zona.activa .pk-silueta, .zona:hover .pk-silueta { stroke: var(--blaze-texto); }
.pk-vent { stroke: var(--tinta-2); stroke-width: 1.4; stroke-linecap: round; }
.pk-tapa { fill: var(--papel-2); }
.pk-cremallera { fill: none; stroke: var(--tinta-2); stroke-width: 1.2; stroke-dasharray: 2 3; }
.pk-bolsillo { fill-opacity: .9; }
.pk-bolsillo-malla { fill: url(#pk-malla); stroke: none; pointer-events: none; }
.pk-baston { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; transition: stroke .2s; }
.zona.activa .pk-baston, .zona:hover .pk-baston { stroke: var(--blaze-texto); }
.pk-correa { stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; }
.z-guia { fill: none; stroke: var(--tinta-2); stroke-width: 1; transition: stroke .2s; }
.z-et { font-family: var(--f-dato); font-size: 13px; fill: var(--tinta); transition: fill .2s; }
.zona.activa .z-et, .zona:hover .z-et { fill: var(--blaze-texto); font-weight: 500; }
.zona.activa .z-guia, .zona:hover .z-guia { stroke: var(--blaze-texto); stroke-width: 1.6; }
.zona { cursor: pointer; outline: none; }
.z-forma { fill: var(--papel); stroke: var(--tinta); stroke-width: 2.2; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.z-trazo { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; transition: stroke .2s; }
.z-grueso { stroke-width: 4; }
.z-linea { fill: none; stroke: var(--tinta-2); stroke-width: 1.6; stroke-linecap: round; }
.z-hueco { fill: none; stroke: var(--tinta-2); stroke-width: 1.6; stroke-dasharray: 5 4; transition: stroke .2s, fill .2s; }
.z-malla { fill: var(--papel-2); stroke-dasharray: 3 3; }
.z-txt { font-family: var(--f-dato); font-size: 12px; fill: var(--tinta-2); }
.zona:hover .z-forma, .zona:focus-visible .z-forma, .zona.activa .z-forma { fill: var(--blaze-palido); stroke: var(--blaze-texto); }
.zona:hover .z-trazo, .zona.activa .z-trazo, .zona:focus-visible .z-trazo { stroke: var(--blaze-texto); }
.zona:hover .z-hueco, .zona.activa .z-hueco { stroke: var(--blaze-texto); fill: rgb(242 88 28 / .10); }
.zonas-btn, .regiones-btn { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.zonas-btn button, .regiones-btn button {
  font-family: var(--f-dato); font-size: 12.5px; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea); border-radius: 999px; padding: 5px 11px; cursor: pointer;
}
.zonas-btn button[aria-selected="true"], .regiones-btn button[aria-selected="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.zona-ficha h3, .region-ficha h3 { margin: 0; font-family: var(--f-cartel); font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 1; }
.region-ficha h3 a { text-decoration: none; }
.zona-nota { margin: 4px 0 14px; color: var(--tinta-2); }
.zona-ramas { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; }
@media (min-width: 900px) {
  .mochila-in { grid-template-columns: 440px 1fr; gap: 48px; align-items: center; }
}

/* la lámina de la mochila (ilustración generada con Codex) y sus puntos */
.mochila { overflow-x: clip; }
.lamina { position: relative; margin: 0 auto; width: min(100%, 470px); }
.lamina img { width: 100%; height: auto; }
.punto {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--papel);
  cursor: pointer; padding: 0; display: grid; place-items: center; box-shadow: 0 0 0 4px rgb(244 245 239 / .55);
}
.punto::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blaze); transition: transform .2s; }
.punto span {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-family: var(--f-dato); font-size: 12px; background: var(--tinta); color: var(--papel);
  padding: 4px 9px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.punto--izq span { left: auto; right: calc(100% + 8px); }
.punto:hover span, .punto:focus-visible span, .punto.activa span { opacity: 1; }
.punto.activa { background: var(--blaze); border-color: var(--tinta); }
.punto.activa::before { background: var(--papel); transform: scale(.7); }

/* el calzado: una escalera */
.escalera-marco { position: relative; }
.escalera {
  list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; align-items: start;
}
.escalon { scroll-snap-align: start; padding-top: calc(var(--i) * 0px); }
.esc-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.esc-foto { display: block; border-bottom: 5px solid var(--curva); padding-bottom: 6px; }
.esc-alto { margin: 10px 0 0; font-family: var(--f-dato); font-size: 12px; color: var(--curva-honda); display: flex; align-items: center; gap: 6px; }
.esc-alto::before { content: ""; width: 22px; height: 2px; background: var(--curva); }
.escalon h3 { margin: 2px 0 6px; font-family: var(--f-cartel); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }
.escalon h3 a { text-decoration: none; }
.esc-t { display: block; font-weight: 600; line-height: 1.3; text-decoration: none; }
.esc-mas { display: block; font-size: 14px; line-height: 1.35; margin-top: 8px; color: var(--tinta-2); text-decoration: none; }
.desliza-pista { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 8px 0 0; font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.desliza-pista .ico { width: 15px; height: 15px; }
.calzado-mas { margin: 16px 0 0; font-size: 15px; color: var(--tinta-2); }
.calzado-mas a { color: var(--blaze-texto); }
@media (min-width: 900px) {
  .escalera { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; gap: 18px; align-items: end; }
  .escalon { padding-top: calc((4 - var(--i)) * 34px); }
  .desliza-pista { display: none; }
}

/* la regla de distancias (logarítmica: 1 hora → 6 meses) */
.regla-eje {
  position: relative; height: 34px; margin: 8px 0 34px; border-bottom: 2px solid var(--tinta);
  font-family: var(--f-dato); font-size: 11.5px; color: var(--tinta-2);
}
.eje-n { position: absolute; left: var(--x); top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap; }
.eje-n::after { content: ""; position: absolute; left: 50%; top: -12px; width: 2px; height: 9px; background: var(--tinta); }
.eje-n:first-child { transform: none; } .eje-n:first-child::after { left: 0; }
.eje-n:nth-child(5) { transform: translateX(-100%); } .eje-n:nth-child(5)::after { left: auto; right: 0; }
.eje-tramo { position: absolute; left: var(--a); width: calc(var(--b) - var(--a)); bottom: -5px; height: 8px; background: var(--blaze); border-radius: 2px; font-style: normal; }
.eje-tramo b { position: absolute; left: 0; bottom: calc(100% + 5px); font-weight: 500; color: var(--tinta); white-space: nowrap; font-size: 11.5px; }
.eje-tramo:last-of-type b { left: auto; right: 0; }
.regla-l { display: grid; gap: 22px; margin-top: 20px; }
.tramo { border-top: 4px solid var(--blaze); padding-top: 10px; }
.tramo-cuanto { margin: 0; font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.tramo h3, .estilo h3, .mundo-c h3 { margin: 2px 0 8px; font-family: var(--f-cartel); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }
.tramo h3 a, .estilo h3 a, .mundo-c h3 a { text-decoration: none; }
.tramo ul, .estilo ul, .mundo-c ul, .region-ficha ul, .mas-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tramo li a, .estilo li a, .mundo-c li a, .region-ficha li a, .mas-c li a { text-decoration: none; font-size: 15.5px; line-height: 1.35; }
.tramo li a:hover, .estilo li a:hover, .mundo-c li a:hover, .region-ficha li a:hover, .mas-c li a:hover { text-decoration: underline; }
@media (max-width: 699px) { .eje-n:nth-child(2), .eje-n:nth-child(4) { display: none; } .eje-tramo b { display: none; } }
.estilos { display: grid; gap: 18px; margin-top: 30px; padding: 20px; background: var(--papel-2); border-radius: var(--r); }
.estilos-t { margin: 0; font-family: var(--f-cartel); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.estilo h3 span { font-family: var(--f-dato); font-size: 12px; font-weight: 500; text-transform: none; color: var(--tinta-2); margin-left: 6px; }
@media (min-width: 900px) {
  .regla-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .estilos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .estilos-t { grid-column: 1 / -1; }
}

/* dónde */
.donde-in { display: grid; gap: 18px; }
.usa { width: 100%; height: auto; }
.region path { fill: var(--bosque); stroke: var(--papel); stroke-width: 1.2; transition: fill .2s; }
.region { cursor: pointer; outline: none; }
.region:nth-child(2n) path { fill: #CFDDC3; }
.region:hover path, .region.activa path, .region:focus-visible path { fill: var(--blaze); }
.region-ficha { min-height: 168px; }
.region-ficha h3 { margin-bottom: 10px; }
.mundo { display: grid; gap: 22px; margin-top: 26px; }
@media (min-width: 900px) {
  .donde-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 34px; }
  .mundo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* el manual */
.manual-in { display: grid; gap: 24px; }
.manual-col { background: var(--papel); border: 1.5px solid var(--tinta); border-radius: var(--r); padding: 16px 18px; }
.manual-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--f-cartel); font-weight: 800; font-size: 28px; text-transform: uppercase; }
.manual-col h3 .ico { width: 24px; height: 24px; color: var(--blaze-texto); }
.manual-col ul { list-style: none; margin: 0; padding: 0; }
.manual-col li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--linea); }
.manual-col li a { font-weight: 600; text-decoration: none; line-height: 1.3; }
.manual-col li span { font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
@media (min-width: 900px) { .manual-in { grid-template-columns: 1fr 1fr; gap: 30px; } }

/* más allá */
.mas { display: grid; gap: 26px; padding-bottom: 60px; }
.mas-c h2 { font-size: 30px; margin-bottom: 10px; }
.mas-c h2 a { text-decoration: none; }
@media (min-width: 900px) { .mas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ───────────────────────────── el pie: la cumbre */
.pie { position: relative; background: var(--noche); color: #E6EBE3; overflow: hidden; padding-bottom: calc(24px + var(--pie-anuncio, 0px)); }
.pie-curvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pie-cumbre, .pie-in, .pie-copy { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.pie-cumbre { display: flex; align-items: center; gap: 22px; padding-top: 46px; padding-bottom: 30px; flex-wrap: wrap; }
.placa { width: 172px; height: 172px; flex: none; }
.placa-t { font-family: var(--f-dato); font-size: 13px; font-weight: 500; letter-spacing: .14em; fill: var(--laton-hondo); }
.placa-n { font-family: var(--f-dato); font-size: 13px; font-weight: 500; letter-spacing: .04em; fill: var(--laton-hondo); }
.pie-llegaste { margin: 0; font-family: var(--f-cartel); font-weight: 800; font-size: clamp(40px, 8vw, 64px); text-transform: uppercase; line-height: .9; color: #fff; }
.pie-llegaste span { color: #FFB48F; }
.pie-sub { margin: 8px 0 0; max-width: 30em; color: #BFC9C0; }
.pie-in { display: grid; gap: 26px; padding-top: 26px; border-top: 1px solid #2E3E36; }
.pie .marca, .pie .marca:hover { color: #fff; }
.pie .marca-the { color: #BFC9C0; }
.logo--pie { --tinta: #E6EBE3; --papel: var(--noche); }
.pie-marca p { color: #BFC9C0; font-size: 15px; max-width: 30em; }
.pie-aviso { font-size: 13.5px !important; }
.pie-col { display: grid; align-content: start; gap: 6px; }
.pie-col p { margin: 0 0 4px; font-family: var(--f-cartel); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.pie-col a { color: #D3DBD1; text-decoration: none; font-size: 15px; }
.pie-col a:hover { color: #FFB48F; text-decoration: underline; }
.pie-copy { padding-top: 26px; font-family: var(--f-dato); font-size: 12px; color: #93A097; }
@media (min-width: 900px) { .pie-in { grid-template-columns: 2fr 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ═════════════════════════════ la plantilla del artículo (5 oct 2026) */
.art-pagina { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.art-cuerpo-marco { display: grid; gap: 40px; }
.art-col { min-width: 0; }
.art-cab { padding-top: 24px; }
.migas { font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 6px; }
.migas a { color: var(--blaze-texto); text-decoration: none; }
.art-cab h1 { margin: 12px 0 0; font-family: var(--f-cartel); font-weight: 800; text-transform: uppercase;
  font-size: clamp(36px, 7vw, 60px); line-height: .92; letter-spacing: .005em; }
.art-entradilla { margin: 14px 0 0; font-size: 19px; line-height: 1.5; color: var(--tinta-2); max-width: 40em; }
.art-meta { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 0; border-top: 2px solid var(--tinta); }
.art-meta p { margin: 0; font-size: 15px; line-height: 1.35; }
.art-meta a { font-weight: 600; text-decoration: none; }
.art-meta span { font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.art-autor-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.art-foto { margin: 6px 0 0; }
.art-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }

.art-cuerpo { font-size: 17.5px; line-height: 1.72; max-width: 760px; padding-top: 8px; }
.art-cuerpo > p, .art-cuerpo li { color: #26302B; }
.art-cuerpo p { margin: 0 0 1.15em; }
.art-cuerpo a { color: var(--blaze-texto); text-decoration-thickness: 1px; }
.art-cuerpo h2 { font-family: var(--f-cartel); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 5vw, 38px);
  line-height: .98; margin: 1.9em 0 .55em; scroll-margin-top: calc(var(--cab-alto) + 52px); display: flex; gap: 12px; align-items: flex-start; }
.art-cuerpo h2::before { content: ""; flex: none; width: 9px; height: .8em; margin-top: .06em; border-radius: 2px; background: var(--blaze); }
.art-cuerpo h2 strong, .art-cuerpo h3 strong { font-weight: inherit; }
.art-cuerpo h3 { font-family: var(--f-texto); font-weight: 700; font-size: 22px; line-height: 1.3; margin: 1.6em 0 .5em; }
.art-cuerpo h4 { font-size: 19px; margin: 1.3em 0 .4em; }
.art-cuerpo ul, .art-cuerpo ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.art-cuerpo li { margin: .35em 0; }
.art-cuerpo ul li::marker { color: var(--blaze); }
.art-cuerpo figure { margin: 1.6em 0; }
.art-cuerpo figure img { border-radius: var(--r); }
.art-cuerpo figcaption { font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); margin-top: 8px; }
.art-cuerpo blockquote { margin: 1.6em 0; padding: 0 0 0 44px; position: relative; font-size: 20px; font-style: italic; color: var(--tinta); }
.art-cuerpo blockquote::before { content: "\201C"; position: absolute; left: 0; top: -.25em; font-family: var(--f-cartel); font-size: 76px; line-height: 1; color: var(--blaze); font-style: normal; }
.art-cuerpo table:not(.mfm-compare table) { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.4em 0; }
.art-cuerpo > table th, .art-cuerpo > figure table th { text-align: left; background: var(--tinta); color: var(--papel); padding: 10px 12px; font-family: var(--f-dato); font-size: 12px; font-weight: 500; }
.art-cuerpo > table td, .art-cuerpo > figure table td { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.art-cuerpo .wp-block-table { overflow-x: auto; }

.autor-caja { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; margin: 2.6em 0 0; padding: 20px; background: var(--papel-2); border-radius: var(--r); }
.autor-caja img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.autor-caja p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tinta-2); }
.autor-caja .autor-n { margin-bottom: 4px; font-family: var(--f-cartel); font-weight: 800; font-size: 24px; text-transform: uppercase; }
.autor-caja .autor-n a { color: var(--tinta); text-decoration: none; }
.fin-sendero { display: flex; align-items: center; gap: 18px; margin: 2.2em 0 0; padding: 18px 0; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linea); }
.fin-sendero .placa { width: 96px; height: 96px; }
.fin-t { margin: 0; font-family: var(--f-cartel); font-weight: 800; font-size: 32px; line-height: .95; text-transform: uppercase; }
.fin-s { margin: 4px 0 0 !important; font-size: 15.5px; color: var(--tinta-2); }

/* la ruta: el perfil del artículo, con el caminante */
.ruta { display: none; }
.ruta-caja { border: 1.5px solid var(--tinta); border-radius: var(--r); padding: 14px 16px 12px; background: var(--papel); }
.ruta-t { margin: 0 0 8px; font-family: var(--f-cartel); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.ruta-perfil { width: 100%; height: 90px; display: block; overflow: visible; }
.rp-relleno { fill: var(--bosque); }
.rp-linea { fill: none; stroke: var(--curva); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.rp-andado { fill: none; stroke: var(--blaze); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rp-punto { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rp-punto.hecho { fill: var(--blaze); }
.rp-yo { fill: var(--blaze); stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ruta-alt { margin: 6px 0 10px; font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.ruta-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); max-height: calc(100vh - var(--cab-alto) - 330px); overflow-y: auto; }
.ruta-l a { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-size: 14.5px; line-height: 1.3; color: var(--tinta-2); }
.ruta-l a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--tinta-2); transform: translateY(-1px); }
.ruta-l a.hecho::before { background: var(--blaze); border-color: var(--blaze); }
.ruta-l a[aria-current="true"] { color: var(--tinta); font-weight: 600; }
.ruta-l a[aria-current="true"]::before { width: 9px; height: 9px; background: var(--blaze); border-color: var(--tinta); }
/* el hueco del anuncio de la columna (Journey lo llena): en la maqueta, el rótulo; en el tema, vacío y sin ocupar
   hasta que llegue el anuncio. Mientras haya anuncio, la lista de paradas se acorta para que todo quepa fijo */
.ruta-anuncio:empty { display: none; }
.ruta-anuncio.td-main-sidebar:not(:empty):not([aria-hidden]) { height: auto; border: 0; display: block; }
.ruta-pega:has(.td-main-sidebar:not(:empty)) .ruta-l { max-height: max(120px, calc(100vh - var(--cab-alto) - 330px - 290px)); }
.ruta-anuncio { margin-top: 18px; height: 250px; border: 1px dashed var(--linea); border-radius: var(--r); display: grid; place-items: center; font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
@media (min-width: 1100px) {
  .art-cuerpo-marco { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
  .ruta { display: block; }
  .ruta-pega { position: sticky; top: calc(var(--cab-alto) + 20px); }
  .ruta-movil { display: none !important; }
}

/* la barra del teléfono */
.ruta-movil { position: fixed; left: 0; right: 0; top: var(--cab-alto); z-index: 25; display: flex; align-items: center; gap: 8px;
  padding: 7px 16px 9px; background: var(--papel); border-bottom: 1px solid var(--linea); font-family: var(--f-dato); font-size: 12px;
  transform: translateY(-110%); transition: transform .25s; pointer-events: none; }
.ruta-movil.ver { transform: none; }
.rm-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--blaze); flex: none; }
.rm-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); }
.rm-pct { color: var(--tinta-2); }
.rm-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--papel-2); }
.rm-barra b { display: block; height: 100%; width: 0; background: var(--blaze); }

/* sigue caminando y el registro */
.sigue-l { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sigue-c { display: grid; gap: 6px; text-decoration: none; }
.sigue-c img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.sigue-c .meta { margin: 4px 0 0; }
.sigue-t { font-weight: 600; font-size: 16px; line-height: 1.3; }
.com-form { display: grid; gap: 14px; max-width: 760px; }
.com-form label { display: grid; gap: 6px; font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.com-form textarea, .com-form input { font: inherit; font-family: var(--f-texto); font-size: 16px; color: var(--tinta); background: #fff;
  border: 1.5px solid var(--tinta); border-radius: var(--r); padding: 10px 12px; }
.com-form textarea:focus, .com-form input:focus { outline: none; border-color: var(--blaze-texto); box-shadow: 0 0 0 3px rgb(242 88 28 / .18); }
.com-fila { display: grid; gap: 14px; }
@media (min-width: 700px) { .com-fila { grid-template-columns: 1fr 1fr; } }
.boton { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--tinta); color: var(--papel); font-family: var(--f-cartel); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; padding: 11px 18px; }
.boton:hover { background: var(--blaze-texto); }
.comentarios { padding-bottom: 60px; }

/* ═════════════════════════════ lo que pidió Alfre al aprobar el artículo (5 oct 2026):
   volver arriba, la barra de anuncios de abajo, las tablas que no caben, Audible y el aviso del final */

/* volver arriba = bajar al inicio del sendero. El aro naranja es lo que llevas subido de la página.
   Se sube lo que tape la barra de anuncios de Mediavine/Journey (--pie-anuncio, lo mide site.js) */
.subir { position: fixed; right: 20px; bottom: calc(20px + var(--pie-anuncio, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease, bottom .25s ease; }
.subir.ve { opacity: 1; transform: none; pointer-events: auto; }
.subir svg { flex: none; display: block; width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 4px 14px rgb(16 26 22 / .28); }
.subir-fondo { fill: var(--noche); }
.subir-aro { fill: none; stroke: var(--blaze); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--subido, 0) 100;
  transform: rotate(-90deg); transform-origin: 28px 28px; }
.subir-flecha, .subir-flecha2 { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.subir-flecha2 { opacity: .35; }
.subir-rot { font-family: var(--f-dato); font-size: 12px; color: #fff; background: var(--noche); padding: 6px 10px; border-radius: var(--r);
  white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.subir:hover .subir-rot, .subir:focus-visible .subir-rot { opacity: 1; transform: none; }
.subir:hover .subir-flecha, .subir:focus-visible .subir-flecha { animation: subir-sube .8s ease-in-out infinite; }
@keyframes subir-sube { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.subir:focus-visible { outline: none; }
.subir:focus-visible svg { outline: 3px solid var(--blaze); outline-offset: 3px; }
@media (max-width: 767px) { .subir { right: 14px; } .subir svg { width: 48px; height: 48px; } .subir-rot { display: none; } }

/* las tablas que no caben: se deslizan Y LO DICEN (la regla del café): site.js las envuelve y SOLO si
   no caben enciende el rótulo, el riel, la sombra del lado escondido y un amago la primera vez */
.desliza { margin: 1.4em 0 1.5em; }
.tabla-caja { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--blaze) transparent; }
.art-cuerpo .tabla-caja > table { margin: 0; }
/* en el teléfono, toda tabla se desliza entera en vez de aplastarse (también las que traen su caja) */
@media (max-width: 767px) { .art-cuerpo .desliza-vista table { min-width: calc(var(--cols, 1) * 8rem); } }
.desliza-aviso { display: none; }
.desliza.puede .desliza-aviso { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.desliza-dice { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-dato); font-size: 12.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blaze-texto); }
.desliza-dice svg { width: 16px; height: 16px; }
@keyframes desliza-amaga { 0%, 100% { transform: none; } 45% { transform: translateX(5px); } }
.desliza.puede:not(.tocada) .desliza-dice svg { animation: desliza-amaga 1.4s ease-in-out infinite; }
.desliza.al-final .desliza-dice svg { transform: scaleX(-1); }
.desliza-riel { margin-left: auto; flex: none; width: 58px; height: 4px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.desliza-riel i { display: block; height: 100%; width: var(--tw, 50%); background: var(--blaze); transform: translateX(var(--tx, 0%)); }
.desliza-vista { position: relative; }
.desliza-vista::before, .desliza-vista::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 34px;
  pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.desliza-vista::before { left: 0; background: linear-gradient(to right, rgb(29 36 32 / .18), rgb(29 36 32 / 0)); }
.desliza-vista::after { right: 0; background: linear-gradient(to left, rgb(29 36 32 / .18), rgb(29 36 32 / 0)); }
.desliza.puede:not(.al-final) .desliza-vista::after, .desliza.puede.movida .desliza-vista::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .desliza-riel { display: none; } }

/* el banner de Audible, antes de las preguntas: la onda del audio es una cordillera y «suena» al pasar */
.audible { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px 22px; align-items: center; margin: 2.4em 0 1.4em; padding: 26px 26px 30px; background: var(--noche); border-radius: var(--r); }
.audible-onda { position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 62%; }
.audible-onda rect { fill: #263B30; transform-box: fill-box; transform-origin: 50% 100%; }
.audible:hover .audible-onda rect { animation: audible-suena .8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -97ms); }
@keyframes audible-suena { from { transform: scaleY(1); } to { transform: scaleY(.5); } }
.audible-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--laton); color: var(--noche); }
.audible-ic svg { width: 28px; height: 28px; }
.art-cuerpo .audible p { margin: 0; }
.audible-rot { font-family: var(--f-dato); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--laton); text-wrap: balance; }
.art-cuerpo .audible .audible-t { margin: 5px 0 7px; font-family: var(--f-cartel); font-weight: 800; font-size: 27px; line-height: 1;
  text-transform: uppercase; color: #fff; text-wrap: balance; }
.audible-p { font-size: 15px; line-height: 1.5; color: #BFC9C0; }
.audible-p strong { color: #fff; }
.art-cuerpo .audible .audible-gancho { margin-top: 8px; }
.art-cuerpo a.audible-b { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r); background: var(--blaze);
  color: var(--noche); font-family: var(--f-cartel); font-weight: 800; font-size: 20px; letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background .2s; }
.art-cuerpo a.audible-b:hover { background: #FF7A45; }
.audible-b svg { width: 18px; height: 18px; transition: transform .2s; }
.audible-b:hover svg { transform: translateX(3px); }
@media (max-width: 767px) {
  .audible { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 20px 26px; }
  .audible-ic { width: 44px; height: 44px; } .audible-ic svg { width: 22px; height: 22px; }
  .audible-rot { font-size: 11px; letter-spacing: .05em; }
  .art-cuerpo .audible .audible-t { font-size: 23px; }
  .art-cuerpo a.audible-b { grid-column: 1 / -1; justify-self: start; }
}

/* el aviso del final: el de riesgo y el de afiliado (Amazon lo exige), legibles y sin gritar */
.aviso { margin: 2.6em 0 0; padding-top: 16px; border-top: 1px solid var(--linea); }
.art-cuerpo .aviso p { margin: 0 0 .8em; font-size: 13px; line-height: 1.55; color: var(--tinta-2); }
.aviso strong { margin-right: 3px; font-family: var(--f-dato); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }

/* ═════════════════════════════ la plantilla de categoría (5 oct 2026)
   La rama es el inicio de un sendero: su lámina sobre curvas de nivel, el POSTE DE CRUCE con una tabla
   por subcategoría (la madera de los carteles de los parques: marrón con letra rebajada) y un tramo
   por subcategoría. La subcategoría suelta: su rejilla, paginada, y el poste con sus hermanas. */
.cat-cab { position: relative; overflow: hidden; background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.cat-curvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cat-cab-in { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 22px 16px 26px; display: grid; gap: 18px; align-items: center; }
.cat-rot { margin: 18px 0 0; font-family: var(--f-dato); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--curva-honda); }
.cat-cab h1 { margin: 4px 0 0; font-family: var(--f-cartel); font-weight: 800; text-transform: uppercase; font-size: clamp(42px, 9vw, 84px); line-height: .88; letter-spacing: .005em; }
.cat-desc { margin: 14px 0 0; max-width: 34em; font-size: 18px; line-height: 1.5; color: var(--tinta-2); }
.cat-ilus { width: 100%; max-width: 300px; height: auto; justify-self: center; }
@media (min-width: 600px) { .cat-ilus { max-width: 440px; } }
@media (min-width: 900px) {
  .cat-cab-in { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; padding: 26px 16px 30px; }
}

/* el poste de cruce */
.seccion--poste { padding-top: 40px; padding-bottom: 34px; }
.poste-t { margin: 0 0 16px; font-family: var(--f-dato); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); text-align: center; }
.poste-g { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); row-gap: 10px; column-gap: 0; }
.poste-palo { position: absolute; left: calc(50% - 9px); top: -12px; bottom: -16px; width: 18px; border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(0deg, #6A4223 0 9px, #714727 9px 11px); box-shadow: inset -4px 0 0 rgb(0 0 0 / .15); }
.tabla { position: relative; z-index: 1; grid-row: var(--fila); display: flex; align-items: center; min-height: 46px; min-width: 210px; max-width: 100%;
  padding: 9px 34px 9px 20px; font-family: var(--f-cartel); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--curva-palida); text-decoration: none; text-shadow: 0 1px 0 rgb(0 0 0 / .45);
  background: var(--curva-honda) repeating-linear-gradient(178deg, rgb(255 255 255 / 0) 0 6px, rgb(255 255 255 / .05) 6px 7px, rgb(0 0 0 / .05) 7px 9px);
  transition: transform .25s cubic-bezier(.3, .7, .4, 1.3), background-color .2s; }
.tabla--der { grid-column: 3; justify-self: start; margin-left: -4px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); transform-origin: 0 50%; }
.tabla--izq { grid-column: 1; justify-self: end; margin-right: -4px; padding: 9px 20px 9px 34px; clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%); transform-origin: 100% 50%; }
.tabla:hover, .tabla:focus-visible { background-color: var(--blaze-texto); color: #fff; }
.tabla--der:hover, .tabla--der:focus-visible { transform: rotate(-2.5deg); }
.tabla--izq:hover, .tabla--izq:focus-visible { transform: rotate(2.5deg); }
.tabla:focus-visible { outline: 3px solid var(--blaze); outline-offset: 3px; }
@media (max-width: 699px) {
  .poste-g { grid-template-columns: 18px minmax(0, 1fr); }
  .poste-palo { left: 0; }
  .tabla--der, .tabla--izq { grid-column: 2; grid-row: auto; justify-self: start; margin: 0 0 0 -4px; min-width: 0;
    padding: 9px 34px 9px 18px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); transform-origin: 0 50%; }
  .tabla--izq:hover, .tabla--izq:focus-visible { transform: rotate(-2.5deg); }
  .tabla { font-size: 19px; }
}

/* las sendas de la rama (una por subcategoría) */
.senda { scroll-margin-top: calc(var(--cab-alto) + 10px); }
.senda .sec-sub { max-width: 40em; }
.senda-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding-top: 18px; border-top: 2px solid var(--tinta); }
.senda-cab h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--f-cartel); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 42px); line-height: .95; }
.senda-todo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-dato); font-size: 13px; color: var(--blaze-texto); text-decoration: none; }
.senda-todo:hover { text-decoration: underline; }
.senda-todo .ico { width: 15px; height: 15px; transition: transform .2s; }
.senda-todo:hover .ico { transform: translateX(3px); }
.senda-g { display: grid; gap: 22px; margin-top: 18px; }
.senda-grande { display: grid; gap: 6px; text-decoration: none; }
.senda-grande img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.senda-grande .meta { margin: 6px 0 0; }
.senda-gt { font-family: var(--f-cartel); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; }
.senda-grande:hover .senda-gt, .senda-l a:hover .senda-lt, .tarjeta:hover .tarjeta-t { color: var(--blaze-texto); }
.senda-l { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.senda-l li + li { border-top: 1px solid var(--linea); }
.senda-l a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; text-decoration: none; }
.senda-l img { width: 112px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.senda-l .meta { display: block; margin: 0 0 4px; }
.senda-lt { font-weight: 600; font-size: 17px; line-height: 1.3; }
@media (min-width: 900px) {
  .senda-g { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; }
  .senda-l li:first-child a { padding-top: 0; }
}

/* la subcategoría: su rejilla y las páginas */
.lista-cat { padding-top: 34px; }
.rejilla { display: grid; gap: 30px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tarjeta { display: grid; gap: 6px; align-content: start; text-decoration: none; }
.tarjeta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.tarjeta .meta { margin: 6px 0 0; }
.tarjeta-t { font-weight: 600; font-size: 18px; line-height: 1.3; }
.paginas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea); }
.pag-n { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 8px; border: 1.5px solid var(--tinta); border-radius: var(--r);
  font-family: var(--f-dato); font-size: 14px; color: var(--tinta); text-decoration: none; }
.pag-n[aria-current] { background: var(--tinta); color: var(--papel); }
a.pag-n:hover { border-color: var(--blaze-texto); color: var(--blaze-texto); }
.pag-sig { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-family: var(--f-cartel); font-weight: 700; font-size: 19px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--blaze-texto); text-decoration: none; }
.pag-cat .pie { margin-top: 60px; }

/* ═════════════════════════════ las páginas de sitio (5 oct 2026)
   La misma banda que la categoría; en ella, el objeto de cada página: el PERMISO de los legales (una etiqueta
   de papel con su ojal, como las que se cuelgan de la mochila en los parques), la mesa de investigar del
   About, el retrato del autor y, en el 404, el «you are here» fuera del sendero. */
.pcab .cat-cab-in { min-height: 300px; }
.sola { max-width: 860px; }
.sola .art-cuerpo { max-width: none; }
.pag-sitio .pie { margin-top: 60px; }

/* el permiso */
.permiso { position: relative; justify-self: center; width: 230px; padding: 46px 22px 22px; background: #FBFAF4; color: var(--tinta);
  border: 1.5px solid var(--tinta); border-radius: 10px 10px var(--r) var(--r); transform: rotate(3deg);
  box-shadow: 0 10px 24px rgb(29 36 32 / .12); }
.permiso::before { content: ""; position: absolute; left: 50%; top: -64px; width: 2px; height: 82px; background: var(--curva-honda); transform: translateX(-50%) rotate(-6deg); transform-origin: 50% 100%; }
@media (max-width: 899px) { .permiso { width: 210px; margin-top: 30px; transform: rotate(2deg); } .permiso::before { top: -34px; height: 50px; } }
.permiso-ojal { position: absolute; left: 50%; top: 14px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: var(--papel-2); border: 4px solid var(--laton); box-shadow: inset 0 0 0 1.5px var(--laton-hondo); }
.permiso p { margin: 0; }
.permiso-a { font-family: var(--f-dato); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blaze-texto); text-align: center; }
.permiso-n { margin-top: 4px !important; font-family: var(--f-cartel); font-weight: 800; font-size: 76px; line-height: .9; text-align: center; }
.permiso-n span { font-size: 30px; color: var(--tinta-2); }
.permiso-t { margin-top: 10px !important; padding-top: 10px; border-top: 1.5px dashed var(--linea); font-family: var(--f-cartel); font-weight: 700; font-size: 21px;
  text-transform: uppercase; line-height: 1; text-align: center; }
.permiso-f { margin-top: 12px !important; font-family: var(--f-dato); font-size: 11px; line-height: 1.5; color: var(--tinta-2); text-align: center; }
.permiso-f b { font-weight: 500; color: var(--tinta); font-size: 12.5px; }

/* los legales: el texto y, al lado, el índice y los cuatro documentos */
.legal { display: grid; gap: 34px; }
.legal-cuerpo { font-size: 16.5px; }
.legal-cuerpo h2 { font-size: clamp(24px, 4vw, 30px); }
.legal-caja { display: grid; gap: 10px; align-content: start; }
.legal-t { margin: 8px 0 0; font-family: var(--f-dato); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.legal-indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.legal-indice a { display: block; padding: 7px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; line-height: 1.3; color: var(--tinta-2); text-decoration: none; }
.legal-indice a:hover { color: var(--blaze-texto); }
.legal-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.legal-docs a, .legal-docs span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--linea); border-radius: var(--r);
  font-family: var(--f-cartel); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta); text-decoration: none; }
.legal-docs b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--papel-2); font-family: var(--f-dato); font-weight: 500; font-size: 12px; }
.legal-docs a:hover { border-color: var(--blaze-texto); color: var(--blaze-texto); }
.legal-docs span[aria-current] { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.legal-docs span[aria-current] b { background: var(--blaze); color: var(--noche); }
@media (min-width: 1000px) {
  .legal { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
  .legal-caja { position: sticky; top: calc(var(--cab-alto) + 20px); max-height: calc(100vh - var(--cab-alto) - 40px); overflow-y: auto; }
}

/* el About: su tabla de números y el registro del Contact */
.sola .art-cuerpo table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 1.2em 0; }
.sola .art-cuerpo th { text-align: left; background: var(--tinta); color: var(--papel); padding: 9px 12px; font-family: var(--f-dato); font-size: 12px; font-weight: 500; }
.sola .art-cuerpo td { padding: 9px 12px; border-bottom: 1px solid var(--linea); }
.firmas { margin-top: 40px; padding: 26px 26px 24px; background: var(--noche); color: #D3DBD1; border-radius: var(--r); }
.firmas p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.55; }
.firmas .firmas-r { margin: 0; font-family: var(--f-dato); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--laton); }
.firmas h2 { margin: 4px 0 10px; font-family: var(--f-cartel); font-weight: 800; font-size: 40px; line-height: .95; text-transform: uppercase; color: #fff; }
.firmas-correo { display: inline-block; margin: 6px 0 16px; padding: 10px 16px; border: 1.5px dashed var(--laton); border-radius: var(--r);
  font-family: var(--f-dato); font-size: clamp(15px, 4.4vw, 22px); color: #FFB48F; text-decoration: none; overflow-wrap: anywhere; }
.firmas-correo:hover { background: var(--noche-2); color: #fff; }
.firmas .firmas-cierre { color: #BFC9C0; font-size: 15.5px; }
.firmas-form { display: grid; gap: 14px; margin: 4px 0 22px; padding-top: 20px; border-top: 1px solid #2E3E36; }
.firmas-form label { display: grid; gap: 6px; font-family: var(--f-dato); font-size: 12px; color: #BFC9C0; }
.firmas-fila { display: grid; gap: 14px; }
@media (min-width: 640px) { .firmas-fila { grid-template-columns: 1fr 1fr; } }
.firmas-form input, .firmas-form select, .firmas-form textarea { font: inherit; font-family: var(--f-texto); font-size: 16px; color: var(--tinta);
  background: var(--papel); border: 1.5px solid var(--papel); border-radius: var(--r); padding: 10px 12px; }
.firmas-form :focus { outline: none; border-color: var(--blaze); box-shadow: 0 0 0 3px rgb(242 88 28 / .3); }
.boton--firmas { background: var(--blaze); color: var(--noche); }
.boton--firmas:hover { background: #FF7A45; }

/* el autor */
.pretrato { justify-self: center; width: 240px; height: 240px; border-radius: 50%; object-fit: cover; border: 6px solid var(--papel); box-shadow: 0 0 0 2px var(--tinta); }
@media (min-width: 900px) { .pretrato { width: 300px; height: 300px; } }
.autor-bio p { font-size: 19px; line-height: 1.6; }

/* el 404: fuera del sendero */
.perdido { position: absolute; inset: 0; width: 100%; height: 100%; }
.perdido-senda { fill: none; stroke: var(--blaze); stroke-width: 3; stroke-dasharray: 9 7; stroke-linecap: round; opacity: .4; }
.cat-cab-in .perdido-aqui { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--f-dato); font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blaze-texto); }
.perdido-aqui i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--blaze-texto); }
.perdido-aqui i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--blaze-texto); animation: perdido-late 2.2s ease-out infinite; }
@keyframes perdido-late { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.perdido-cota { position: relative; justify-self: center; margin: 0; font-family: var(--f-cartel); font-weight: 800; font-size: clamp(96px, 20vw, 190px); line-height: .8;
  color: var(--curva-honda); text-align: center; }
.perdido-cota span { display: block; margin-top: 8px; font-family: var(--f-dato); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }

/* el buscador grande (404 y búsqueda) */
.pbusca { margin-top: 18px; max-width: 620px; }
.pbusca-l { display: block; margin-bottom: 6px; font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.pbusca-fila { display: flex; gap: 8px; }
.pbusca input { flex: 1; min-width: 0; font: inherit; font-size: 17px; color: var(--tinta); background: #fff; border: 1.5px solid var(--tinta); border-radius: var(--r); padding: 11px 14px; }
.pbusca input:focus { outline: none; border-color: var(--blaze-texto); box-shadow: 0 0 0 3px rgb(242 88 28 / .18); }
.pbusca .boton { flex: none; }
.rescate { padding-top: 34px; }
.rescate .pbusca { margin-top: 0; }
.rescate-t { margin: 0 0 14px; font-size: 18px; }
.atajos-l { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.atajos-l a { display: inline-block; padding: 7px 12px; border: 1.5px solid var(--tinta); border-radius: 999px; font-family: var(--f-cartel); font-weight: 700;
  font-size: 17px; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta); text-decoration: none; }
.atajos-l a:hover { background: var(--tinta); color: var(--papel); }
@media (max-width: 599px) { .pbusca-fila { flex-direction: column; } .pbusca .boton { justify-self: stretch; justify-content: center; } }

/* ═════════════════════════════ el tema de WordPress (5 oct 2026): lo que la maqueta no tenía
   La lista de comentarios del «Trail register» (la maqueta no tenía ninguno publicado), como las firmas de un
   cuaderno de sendero: nombre en cartel, fecha en dato, una raya entre firma y firma. */
.com-lista { list-style: none; margin: 0 0 30px; padding: 0; max-width: 760px; border-bottom: 1px solid var(--linea); }
.com-item { padding: 16px 0; border-top: 1px solid var(--linea); }
.com-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.com-meta strong { font-family: var(--f-cartel); font-weight: 800; font-size: 21px; text-transform: uppercase; }
.com-meta span { font-family: var(--f-dato); font-size: 12px; color: var(--tinta-2); }
.com-espera { margin: 0 0 6px; font-family: var(--f-dato); font-size: 12px; color: var(--blaze-texto); }
.com-texto p { margin: 0 0 10px; }
.com-texto p:last-child { margin-bottom: 0; }
.com-form p { margin: 0; }
/* el formulario de Fluent Forms del Contact, vestido como el dibujado (sobre la caja noche) */
.firmas-ff { margin: 4px 0 22px; padding-top: 20px; border-top: 1px solid #2E3E36; }
.firmas-ff .ff-el-input--label label { font-family: var(--f-dato); font-size: 12px; color: #BFC9C0; font-weight: 500; }
.firmas-ff .ff-el-form-control { font-family: var(--f-texto); font-size: 16px; color: var(--tinta); background: var(--papel); border: 1.5px solid var(--papel); border-radius: var(--r); }
.firmas-ff .ff-btn-submit { background: var(--blaze) !important; color: var(--noche) !important; border: 0; border-radius: var(--r); font-family: var(--f-cartel); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }