/* Miles Tested · la categoría raíz v1 (maqueta, 29 oct 2026): «panel de salidas» (concepto 3 de Codex). Va después de articulo.css
   (de ahí vienen .migas, .ad, .autor, .boton-amz, .sr). 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 (el título de la cabecera, 72 px, es una excepción anotada en DISENO.md); radios 6 12 999 px.
   Road, Rail y Sea no escriben texto: la letra de la caja de la fila usa --txt (blanco sobre Air, tinta sobre los otros tres). */
.cat-cab { position: relative; margin-top: 24px; border-radius: 12px; overflow: hidden; min-height: 340px; background: var(--niebla); display: flex; align-items: flex-start; }
.cat-cab-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.cat-caja { position: relative; margin: 28px; width: 420px; max-width: calc(100% - 56px); background: #FFFFFF; border-radius: 12px; padding: 20px 24px 24px; box-shadow: 0 16px 32px -20px rgba(18, 20, 23, 0.4); }
.cat-caja .migas ol { font-size: 14px; }
.cat-caja .migas [aria-current] { color: var(--tinta); }
.cat-linea { display: inline-block; margin-top: 16px; background: var(--c); color: var(--txt); border-radius: 999px; padding: 4px 14px; font: 700 14px/1.4 var(--cuerpo); }
.cat-h1 { margin-top: 8px; font: 900 72px/1 var(--display); letter-spacing: -0.02em; color: var(--tinta); white-space: nowrap; }
.cat-frase { margin-top: 10px; font: 400 20px/1.35 var(--cuerpo); color: var(--tinta); }

.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 304px; column-gap: 32px; margin-top: 32px; align-items: start; }

/* Una fila por subcategoría: foto con su nombre · el pilar · los nodos */
.cat-filas { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fila { display: grid; grid-template-columns: 224px minmax(0, 1fr) 304px; background: var(--niebla); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; min-height: 232px; }
.fila-izq { position: relative; min-height: 200px; }
.fila-img { position: absolute; inset: 0; display: block; }
.fila-img img { width: 100%; height: 100%; object-fit: cover; }
.fila-nombre { position: absolute; left: 0; top: 0; max-width: calc(100% - 8px); margin: 0; background: var(--c); border-radius: 0 0 12px 0; padding: 12px 18px 14px 16px; font: 900 24px/1.1 var(--display); letter-spacing: -0.01em; }
.fila-nombre a { color: var(--txt); text-decoration: none; }
.fila-nombre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fila-nombre a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.fila-pilar { padding: 20px; align-self: center; min-width: 0; }
.fila-t { font: 800 24px/1.2 var(--display); }
.fila-t a { color: var(--tinta); text-decoration: none; text-underline-offset: 4px; text-decoration-color: var(--air); text-decoration-thickness: 2px; }
.fila-t a:hover, .fila-t a:focus-visible { text-decoration: underline; }
.fila-p { margin-top: 10px; font: 400 16px/1.45 var(--cuerpo); color: var(--gris); }
.fila-nodos { list-style: none; margin: 0; padding: 4px 16px 4px 16px; border-left: 1px solid var(--borde); display: flex; flex-direction: column; justify-content: center; }
.fila-nodos li + li { border-top: 1px solid var(--borde); }
.nodo { display: flex; gap: 12px; align-items: center; padding: 10px 0; text-decoration: none; color: var(--tinta); }
.nodo-foto { display: block; flex: none; width: 72px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #FFFFFF; }
.nodo-foto img { width: 100%; height: 100%; object-fit: cover; }
.nodo-t { flex: 1 1 auto; min-width: 0; font: 700 16px/1.3 var(--cuerpo); text-underline-offset: 4px; text-decoration-color: var(--air); text-decoration-thickness: 2px; }
.nodo-fl { flex: none; width: 20px; font: 700 20px/1 var(--cuerpo); color: var(--air); text-align: right; }
.nodo:hover .nodo-t, .nodo:focus-visible .nodo-t { text-decoration: underline; }
.nodo-todas { padding: 10px 0 8px; }
.nodo-todas a { font: 700 16px/1.3 var(--cuerpo); color: var(--air); text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.nodo-todas a:hover, .nodo-todas a:focus-visible { text-decoration: underline; }

/* El lateral: sigue al bajar (categoria.js lo suelta si es más alto que la pantalla) */

.cat-lado { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1180px) { .cat-lado.no-fija { position: static; } }
.cat-fit, .cat-card { background: var(--niebla); border: 1px solid var(--borde); border-radius: 12px; padding: 20px; }
.cat-fit-t, .cat-card-t { font: 900 24px/1.2 var(--display); color: var(--tinta); }
.cat-fit-p { margin: 4px 0 14px; font: 400 14px/1.4 var(--cuerpo); color: var(--tinta); }
.cat-fit .campo { margin-bottom: 10px; gap: 4px; }
.cat-fit .campo label, .cat-fit .medidas legend { font: 700 14px/1.3 var(--cuerpo); }
.cat-fit select, .cat-fit input[type="number"] { min-height: 44px; font-size: 16px; padding: 8px 10px; }
.cat-fit .tres { gap: 8px; }
.cat-fit .tres .campo { margin-bottom: 0; }
.cat-fit .fit-boton { min-height: 48px; margin-top: 12px; font-size: 16px; }
.cat-fit .res { margin-top: 12px; padding: 12px; gap: 10px; min-height: 0; align-items: flex-start; }
.cat-fit .res-ico { width: 32px; height: 32px; }
.cat-fit .res-t { font-size: 18px; }
.cat-fit .res-d { font-size: 14px; line-height: 1.4; }
.cat-card-foto { display: block; margin-top: 12px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--niebla); }
.cat-card-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-card-p { margin: 12px 0 14px; font: 400 14px/1.45 var(--cuerpo); color: var(--tinta); }
.cat-card .boton-amz { width: 100%; }

.cat-pie { margin-top: 48px; padding-bottom: 8px; }

/* Tableta: el lateral pasa debajo; «Will it fit?» y la tarjeta lado a lado, el anuncio al final */
@media (max-width: 1179px) {
  .cat-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .cat-lado { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  .cat-fit { order: 1; }
  .cat-card { order: 2; }
  .cat-lado .ad { order: 3; grid-column: 1 / -1; }
}
@media (max-width: 959px) {
  .fila { grid-template-columns: 200px minmax(0, 1fr); }
  .fila-nodos { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--borde); padding: 4px 20px; }
}

/* Móvil: una columna. La caja del título va DEBAJO de la foto; cada fila: foto con su nombre, el pilar y los nodos apilados;
   el lateral al final, con «Will it fit?» antes que el anuncio. */
@media (max-width: 719px) {
  .cat-cab { display: block; min-height: 0; margin-top: 16px; overflow: hidden; border: 1px solid var(--borde); background: #FFFFFF; }
  .cat-cab-foto { position: relative; display: block; inset: auto; height: 200px; object-position: 50% 30%; }
  .cat-caja { margin: 0; width: auto; max-width: none; border-radius: 0; box-shadow: none; padding: 16px 16px 20px; }
  .cat-h1 { font-size: 48px; }
  .cat-frase { font-size: 18px; }
  .cat-grid { margin-top: 24px; }
  .fila { grid-template-columns: minmax(0, 1fr); }
  .fila-izq { min-height: 0; aspect-ratio: 16 / 9; }
  .fila-pilar { padding: 16px 16px 8px; }
  .fila-nodos { padding: 4px 16px; }
  .cat-lado { display: flex; }
  .cat-lado .ad { min-height: 200px; }
}