/* Miles Tested · las páginas de sitio v1 (maqueta, 29 oct 2026): subcategoría, About, Contact, 404, búsqueda, autor y legal.
   Va después de articulo.css (de ahí vienen .artcab, .migas, .autor, .ad, .boton-amz, --borde, --tono-*) y, en la subcategoría, de
   categoria.css (.cat-cab, .cat-grid, el lateral). Solo valores de DISENO.md: colores del :root de site.css y los tonos suaves;
   tamaños 12 14 16 18 20 24 30 38 48; radios 6 12 999 px. Road, Rail y Sea no escriben texto: la letra sobre ellos va en tinta. */

/* ── Piezas comunes ─────────────────────────────────────────────────────────────────────────── */
.pg-banda-in--sola { padding-top: 24px; padding-bottom: 40px; }
.pg-pill { display: inline-block; background: var(--air); color: #FFFFFF; border-radius: 999px; padding: 6px 16px; font: 700 14px/1.4 var(--cuerpo); }
.pg-fecha { margin-top: 16px; font: 400 14px/1.4 var(--cuerpo); color: var(--gris); }
.pg-h2 { font: 900 30px/1.15 var(--display); letter-spacing: -0.01em; color: var(--tinta); }
.pg-intro { margin-top: 8px; font: 400 18px/1.5 var(--cuerpo); color: var(--gris); max-width: 52ch; }
.pg-texto p { max-width: 62ch; margin-top: 16px; line-height: 1.65; }
.pg-texto .pg-h2 + p { margin-top: 12px; }
.pg-texto a { text-underline-offset: 4px; }
.boton:focus-visible { outline-color: var(--tinta); }

/* La línea de metro horizontal con estaciones (About: las cuatro líneas; subcategoría: las otras paradas). Cada estación es una columna;
   su tramo de línea sale del círculo y llega al siguiente. En el móvil, la misma línea en vertical. */
.mh { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mh li { position: relative; padding: 48px 20px 0 0; }
.mh li::before { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 8px; background: var(--c); }
.mh li:first-child::before { left: 16px; border-radius: 999px 0 0 999px; }
.mh li:last-child::before { right: 20px; border-radius: 0 999px 999px 0; }
.mh li:only-child::before { border-radius: 999px; }
.mh-est { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 999px; background: #FFFFFF; border: 8px solid var(--c); z-index: 1; }
.mh-a { font: 800 20px/1.2 var(--display); color: var(--tinta); text-decoration: none; text-underline-offset: 4px; text-decoration-color: var(--air); text-decoration-thickness: 2px; }
.mh-a:hover, .mh-a:focus-visible { text-decoration: underline; }
.mh-t { margin-top: 8px; font: 400 16px/1.5 var(--cuerpo); color: var(--tinta); }
.mh-e { margin-top: 10px; font: 700 16px/1.4 var(--cuerpo); }
.mh-e a { text-underline-offset: 4px; }

/* El buscador grande (404 y búsqueda) */
.bus { margin-top: 16px; }
.bus-l { display: block; font: 700 14px/1.3 var(--cuerpo); margin-bottom: 8px; }
.bus-fila { display: flex; gap: 12px; max-width: 640px; }
.bus-in { flex: 1 1 auto; min-width: 0; min-height: 52px; font: 400 18px/1.3 var(--cuerpo); color: var(--tinta); background: #FFFFFF; border: 1px solid #8A9099; border-radius: 6px; padding: 12px 14px; }
.bus-in:focus { border-color: var(--air); box-shadow: 0 0 0 3px rgba(0, 71, 255, 0.25); }
.bus-b { min-height: 52px; border: 0; cursor: pointer; font-size: 16px; }
.bus-caja { margin-top: 8px; }

/* Las cuatro líneas como pastillas de color */
.pl { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pl-a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 10px; border-radius: 999px; background: var(--c); color: var(--txt); font: 700 16px/1 var(--cuerpo); text-decoration: none; }
.pl-a:hover { filter: brightness(0.92); }
.pl-a:focus-visible { outline-color: var(--tinta); }
.pl-ico { width: 28px; height: 28px; border-radius: 999px; background: #FFFFFF; color: var(--c); display: grid; place-items: center; flex: none; }
.pl-ico .ico { width: 16px; height: 16px; }

/* El aviso de afiliado de Amazon */
.afil { background: var(--tono-road); border-radius: 12px; padding: 24px; }
.afil-t { font: 900 24px/1.2 var(--display); }
.afil p { max-width: 60ch; margin-top: 10px; font-size: 16px; line-height: 1.55; }
.afil .afil-t { margin-top: 0; }
.afil .afil-ley { font-weight: 700; }
.afil a { text-underline-offset: 4px; }

/* La fila de resultados (búsqueda y autor): la del panel de salidas, en lista */
.pg-res { padding-top: 40px; }
.rs-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.rs { display: flex; gap: 20px; align-items: center; padding: 12px 20px 12px 12px; background: var(--niebla); border: 1px solid var(--borde); border-radius: 12px; text-decoration: none; color: var(--tinta); }
.rs--texto { padding-left: 20px; }
.rs-foto { flex: none; width: 144px; display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #FFFFFF; }
.rs-foto { position: relative; }
.rs-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-sec { display: flex; align-items: center; gap: 8px; font: 700 14px/1.4 var(--cuerpo); color: var(--gris); }
.rs-t { font: 800 20px/1.25 var(--display); text-underline-offset: 4px; text-decoration-color: var(--air); text-decoration-thickness: 2px; }
.rs-ext { font: 400 16px/1.45 var(--cuerpo); color: var(--gris); }
.rs-f { font: 400 14px/1.4 var(--cuerpo); color: var(--gris); }
.rs-fl { flex: none; width: 24px; font: 700 20px/1 var(--cuerpo); color: var(--air); text-align: right; }
.rs:hover, .rs:focus-visible { border-color: var(--air); }
.rs:hover .rs-t, .rs:focus-visible .rs-t { text-decoration: underline; }
mark.rs-m { background: none; color: inherit; box-shadow: inset 0 -0.4em 0 rgba(0, 71, 255, 0.18); }

/* ── Subcategoría ───────────────────────────────────────────────────────────────────────────── */
.cat-cab--baja { min-height: 240px; }
.cat-cab--baja .cat-cab-foto { object-position: 50% 45%; }
.cat-cab--baja .cat-caja { width: 520px; margin: 24px 28px; padding-bottom: 20px; }
.cat-h1--sub { font-size: 48px; line-height: 1.05; white-space: normal; }
.sub-main { min-width: 0; }
.sub-linea { list-style: none; margin: 0; padding: 0; }
.sub-est { position: relative; padding: 0 0 20px 60px; --cy: 48px; }
.sub-est:first-child { --cy: 40px; }
.sub-est:last-child { padding-bottom: 0; }
.sub-est::before { content: ""; position: absolute; left: 12px; width: 8px; top: var(--cy); bottom: -48px; background: var(--c); }
.sub-est:last-child::before { display: none; }
.sub-punto { position: absolute; left: 0; top: calc(var(--cy) - 16px); width: 32px; height: 32px; border-radius: 999px; background: #FFFFFF; border: 8px solid var(--c); z-index: 1; }
.pilar { background: var(--niebla); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.pilar-foto { display: block; aspect-ratio: 2 / 1; background: #FFFFFF; }
.pilar-foto img { width: 100%; height: 100%; object-fit: cover; }
.pilar-txt { padding: 24px; }
.pilar-k { display: inline-block; background: var(--c); color: #FFFFFF; border-radius: 999px; padding: 4px 14px; font: 700 14px/1.4 var(--cuerpo); }
.pilar-t { margin-top: 12px; font: 900 30px/1.15 var(--display); letter-spacing: -0.01em; }
.pilar-t a { color: var(--tinta); text-decoration: none; text-underline-offset: 4px; text-decoration-color: var(--air); text-decoration-thickness: 2px; }
.pilar-t a:hover, .pilar-t a:focus-visible { text-decoration: underline; }
.pilar-p { margin-top: 12px; max-width: 56ch; font: 400 18px/1.5 var(--cuerpo); color: var(--tinta); }
.pilar-b { margin-top: 20px; }
.sub-nodo { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 12px 16px 12px 12px; background: var(--niebla); border: 1px solid var(--borde); border-radius: 12px; text-decoration: none; color: var(--tinta); }
.sub-foto { flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #FFFFFF; }
.sub-foto { position: relative; }
.sub-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sub-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sub-nt { font: 800 20px/1.25 var(--display); text-underline-offset: 4px; text-decoration-color: var(--air); text-decoration-thickness: 2px; }
.sub-nf { margin-top: 4px; font: 400 14px/1.4 var(--cuerpo); color: var(--gris); }
.sub-fl { flex: none; width: 24px; font: 700 20px/1 var(--cuerpo); color: var(--air); text-align: right; }
.sub-nodo:hover, .sub-nodo:focus-visible { border-color: var(--air); }
.sub-nodo:hover .sub-nt, .sub-nodo:focus-visible .sub-nt { text-decoration: underline; }
.paradas { margin-top: 64px; }
.paradas-h { font: 900 30px/1.15 var(--display); letter-spacing: -0.01em; }

/* ── About ──────────────────────────────────────────────────────────────────────────────────── */
.pg-retrato { justify-self: end; width: 224px; height: 224px; border-radius: 999px; background: var(--air); border: 8px solid #FFFFFF; box-shadow: 0 16px 32px -20px rgba(18, 20, 23, 0.4); display: grid; place-items: center; color: #FFFFFF; }
.pg-retrato span { font: 900 48px/1 var(--display); }
.pg-historia { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; padding-top: 56px; align-items: start; }
.pg-cita { background: var(--tono-air); border-radius: 12px; padding: 24px; }
.pg-cita-t { font: 700 14px/1.4 var(--cuerpo); color: var(--gris); }
.pg-cita-p { margin-top: 8px; font: 900 24px/1.2 var(--display); }
.pg-cita-a { margin-top: 20px; }
.pg-eleccion { margin-top: 64px; }
.crit { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.crit-i { background: #FFFFFF; border: 1px solid var(--borde); border-radius: 12px; padding: 20px; }
.crit-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--air); color: #FFFFFF; font: 900 18px/1 var(--display); }
.crit-t { margin-top: 12px; font: 800 20px/1.25 var(--display); }
.crit-i p { margin-top: 8px; font: 400 16px/1.5 var(--cuerpo); }
.pg-cubre { margin-top: 64px; background: var(--niebla); padding: 56px 0 64px; }
.pg-cierre { margin-top: 56px; padding-bottom: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.pg-correo p { max-width: 50ch; margin-top: 12px; line-height: 1.55; }
.pg-correo .pg-h2 { font-size: 24px; }
.pg-correo .boton { margin-top: 4px; }

/* ── Contact ────────────────────────────────────────────────────────────────────────────────── */
.pg-contacto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; padding-top: 48px; align-items: start; }
.forma { background: var(--niebla); border: 1px solid var(--borde); border-radius: 12px; padding: 28px; }
.forma .pg-h2 { font-size: 24px; }
.cp { display: grid; gap: 6px; margin-top: 16px; }
.cp label { font: 700 16px/1.3 var(--cuerpo); }
.cp input, .cp select, .cp textarea { width: 100%; min-height: 48px; font: 400 16px/1.4 var(--cuerpo); color: var(--tinta); background: #FFFFFF; border: 1px solid #8A9099; border-radius: 6px; padding: 12px 14px; }
.cp textarea { min-height: 144px; resize: vertical; }
.cp input:focus, .cp select:focus, .cp textarea:focus { border-color: var(--air); box-shadow: 0 0 0 3px rgba(0, 71, 255, 0.25); }
.cp input:user-invalid, .cp textarea:user-invalid { border-color: var(--road); }
.forma-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.forma-pie .boton { border: 0; cursor: pointer; min-height: 52px; }
.forma-estado { background: var(--tono-rail); border-radius: 6px; padding: 8px 12px; font: 700 14px/1.4 var(--cuerpo); }
.corr { background: var(--tono-air); border-radius: 12px; padding: 28px; }
.corr-cab { display: flex; align-items: center; gap: 14px; }
.corr-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--air); color: #FFFFFF; }
.corr-ico .ico { width: 18px; height: 18px; }
.corr-t { margin-top: 0; font: 900 24px/1.2 var(--display); }
.corr p, .corr ul { margin-top: 12px; font: 400 16px/1.55 var(--cuerpo); }
.corr ul { padding-left: 24px; }
.corr li { margin-top: 6px; }
.corr li::marker { color: var(--air); }

/* ── Texto legal ────────────────────────────────────────────────────────────────────────────── */
.pg-legal { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; padding-top: 48px; align-items: start; }
.pg-texto--legal section + section { margin-top: 40px; }
.pg-texto--legal .pg-h2 { font-size: 24px; }
.pg-texto--legal section { scroll-margin-top: 110px; }
.pg-ley { padding: 16px 20px; background: var(--tono-air); border-radius: 12px; font-weight: 700; }
.pg-lado { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 24px; }
.pg-ind, .pg-otros { background: var(--niebla); border: 1px solid var(--borde); border-radius: 12px; padding: 20px; }
.pg-ind-t { font: 800 18px/1.3 var(--display); }
.pg-ind ol, .pg-otros ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font: 400 16px/1.4 var(--cuerpo); }
.pg-ind a, .pg-otros a { text-underline-offset: 4px; }

/* ── 404 ────────────────────────────────────────────────────────────────────────────────────── */
.p404-cab { padding-top: 24px; }
.sena { display: flex; align-items: center; gap: 32px; margin-top: 16px; background: var(--tinta); color: #FFFFFF; border-radius: 12px; padding: 32px 40px; }
.sena-puerta { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 136px; height: 136px; border-radius: 12px; background: var(--air); }
.sena-k { font: 700 14px/1 var(--cuerpo); letter-spacing: 0.1em; text-transform: uppercase; }
.sena-n { font: 900 48px/1 var(--display); }
.sena-h { font: 900 48px/1.05 var(--display); letter-spacing: -0.02em; }
.sena-p { margin-top: 10px; max-width: 40ch; font: 400 20px/1.4 var(--cuerpo); }
.p404-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; margin-top: 40px; align-items: center; }
.ilus { margin: 0; }
.ilus-svg { display: block; width: 100%; height: auto; }
.ilus-fondo { fill: var(--niebla); }
.ilus-linea { fill: none; stroke: var(--air); stroke-width: 14; stroke-linecap: round; }
.ilus-est { fill: #FFFFFF; stroke: var(--air); stroke-width: 8; }
.ilus-corte { fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ilus-barrera rect { fill: var(--road); }
.ilus-barrera path { fill: none; stroke: var(--tinta); stroke-width: 5; }
.ilus-vacia { fill: none; stroke: #8A9099; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 22; }
.ilus-hueco { fill: #FFFFFF; stroke: var(--gris); stroke-width: 6; stroke-dasharray: 10 8; }
.ilus-q { font: 900 30px var(--display); fill: var(--gris); }
.ilus-et { font: 700 16px var(--cuerpo); fill: var(--tinta); }
.ilus-et--vacia { fill: var(--gris); }
.p404-lado .pg-h2 { font-size: 24px; }
.p404-t { margin-top: 24px; font: 700 16px/1.3 var(--cuerpo); }

/* ── Búsqueda sin resultados ─────────────────────────────────────────────────────────────────── */
.vacio-sug { list-style: none; margin: 16px 0 40px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.vacio-sug a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--borde); border-radius: 999px; background: var(--niebla); color: var(--air); font: 700 16px/1 var(--cuerpo); text-decoration: none; }
.vacio-sug a:hover { border-color: var(--air); }
.vacio-h { font-size: 24px; }

/* ── Autor ──────────────────────────────────────────────────────────────────────────────────── */
.aut-cab { padding-top: 24px; }
.aut-caja { display: flex; align-items: center; gap: 32px; margin-top: 16px; background: var(--tono-air); border-radius: 12px; padding: 32px; }
.aut-foto { flex: none; display: grid; place-items: center; width: 144px; height: 144px; border-radius: 999px; background: var(--air); border: 8px solid #FFFFFF; color: #FFFFFF; font: 900 48px/1 var(--display); }
.aut-k { font: 700 14px/1.4 var(--cuerpo); color: var(--gris); }
.aut-h { font: 900 48px/1.05 var(--display); letter-spacing: -0.02em; }
.aut-r { margin-top: 4px; font: 700 16px/1.3 var(--cuerpo); }
.aut-txt p:not(.aut-k):not(.aut-r) { max-width: 60ch; margin-top: 12px; font-size: 16px; line-height: 1.55; }
.aut-lh { margin-bottom: 24px; }

/* ── Tableta y móvil ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1179px) {
  .crit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .pg-historia, .pg-contacto, .pg-legal, .p404-grid, .pg-cierre { grid-template-columns: minmax(0, 1fr); }
  .pg-lado { position: static; }
  .pg-historia { gap: 32px; padding-top: 40px; }
}
@media (max-width: 719px) {
  .pg-retrato { justify-self: start; width: 144px; height: 144px; margin-top: 24px; }
  .crit { grid-template-columns: minmax(0, 1fr); }
  .pg-h2 { font-size: 24px; }
  .pilar-t { font-size: 24px; }
  .paradas-h { font-size: 24px; }
  .pilar-p { font-size: 16px; }
  .pilar-txt { padding: 16px; }
  /* La línea de metro horizontal pasa a vertical. */
  .mh { grid-auto-flow: row; grid-auto-columns: auto; margin-top: 28px; }
  .mh li { padding: 0 0 28px 56px; }
  .mh li:last-child { padding-bottom: 0; }
  .mh li::before, .mh li:first-child::before, .mh li:last-child::before { left: 12px; right: auto; top: 16px; bottom: -16px; width: 8px; height: auto; border-radius: 0; }
  .mh li:last-child::before { display: none; }
  /* La subcategoría: la línea y las estaciones, más pegadas al borde. */
  .sub-est { padding-left: 48px; }
  .sub-est::before { left: 8px; }
  .sub-punto { width: 28px; height: 28px; border-width: 7px; top: calc(var(--cy) - 14px); }
  .sub-nodo { gap: 12px; padding-right: 12px; }
  .sub-foto { width: 72px; }
  .sub-nt { font-size: 18px; }
  .sub-fl { display: none; }
  .cat-cab--baja .cat-caja { width: auto; margin: 0; }
  .cat-cab--baja { min-height: 0; }
  /* Búsqueda, autor y 404 */
  .rs { gap: 12px; padding-right: 12px; }
  .rs-foto { width: 96px; }
  .rs-fl { display: none; }
  .rs-t { font-size: 18px; }
  .rs-ext { font-size: 14px; }
  .sena { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
  .sena-puerta { width: 104px; height: 104px; }
  .sena-h { font-size: 38px; }
  .sena-p { font-size: 18px; }
  .p404-grid { margin-top: 24px; gap: 28px; }
  .bus-fila { flex-direction: column; }
  .bus-b { width: 100%; }
  .aut-caja { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; }
  .aut-foto { width: 112px; height: 112px; }
  .aut-h { font-size: 38px; }
  .forma { padding: 20px; }
  .corr { padding: 20px; }
  .ilus-et { display: none; }
}