/* Risk and Rule — componentes.
   tokens.css va aparte y se copia tal cual; aquí solo lo que no cubre.
   Las medidas salen de riskandrule/reference/Risk and Rule Portal.dc.html, que
   es la fuente de verdad: ante duda, se mide allí y se copia el número. */

/* Las bandas a sangre usan 100vw, que incluye el ancho de la barra de scroll.
   `clip` recorta ese sobrante sin crear un contenedor de scroll: no hay barra
   horizontal y no se rompe el `position:sticky` del resumen. */
html, body{ overflow-x: clip; }

/* --- cabecera ------------------------------------------------------------ */

.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:26px 0; border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand__name{ font-family:var(--font-display); font-size:26px; letter-spacing:-0.01em; }
.brand__tag{ font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); }
.masthead nav{ display:flex; align-items:center; gap:28px; font-size:15px; }
.masthead .btn{ padding:13px 20px; font-size:15px; }
.lang{ font-size:14px; color:var(--body); }

/* --- franja de publicación ------------------------------------------------
   No es un banner: no crece, no lleva imagen y no se cierra. */

/* A sangre de verdad.
   La guía dice que las bandas van a sangre; el `margin:0 -56px` de la
   referencia solo llega al borde cuando la ventana mide exactamente los
   1180 px del lienzo del diseño. En una pantalla más ancha se quedaba a
   cincuenta píxeles del borde y parecía un descuadre.
   La fórmula lleva el elemento al borde de la ventana (funciona porque .wrap
   está centrado) y el padding vuelve a alinear el texto con la columna. */
.a-sangre{
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));
}

.strip{
  background:var(--ink); color:var(--paper);
  margin-inline: calc(50% - 50vw);
  padding: 13px max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.strip p{ font-size:15px; color:#DBDBDB; margin:0; }
.strip b{ color:var(--paper); font-weight:400; }
.strip .btn{ padding:11px 18px; font-size:14px; }

/* --- patrocinadores -------------------------------------------------------
   Remote OK los pone arriba a la derecha. La guía no contempla el componente,
   así que se construye con sus reglas: hairline, sin fondo, sin radio, y
   fuera del cupo de azul y de ámbar, que están comprometidos. */

.sponsors{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid var(--rule);
}
.sponsors__label{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mute); margin-right:6px;
}
.sponsor{
  border:1px solid var(--rule); padding:8px 12px; font-size:14px;
  color:var(--body); min-height:36px; display:inline-flex; align-items:center;
}
.sponsor:hover{ border-color:var(--ink); color:var(--ink); }
.sponsor--free{ color:var(--mute); border-style:dashed; }

/* --- fila de título ------------------------------------------------------- */

.titlerow{
  padding:30px 0 18px; display:flex; align-items:end;
  justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.titlerow h1{ font-size:34px; line-height:1.1; margin:0 0 8px; }
.titlerow p{ font-size:16px; line-height:1.55; max-width:620px; margin:0; }
.search{
  border:1px solid var(--ink); background:var(--paper);
  padding:13px 15px; font-size:16px; width:300px; min-height:var(--tap);
}

/* --- fila de orden -------------------------------------------------------- */

.sortrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
  padding:11px 0;
}
.sortrow__group{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.eyebrow{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); }
.sort{
  font-size:15px; background:none; border:0; padding:0 0 2px;
  color:var(--body); border-bottom:2px solid transparent; cursor:pointer;
}
.sort[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--primary); }
.sortrow__right{ display:flex; align-items:baseline; gap:16px; }
/* Ámbar: dato que cambia, nunca acción. Este es uno de sus tres usos. */
.fresh{ font-size:14px; color:var(--amber); }
.count{ font-size:14px; color:var(--mute); }

/* --- facetas -------------------------------------------------------------- */

.board{ padding:26px 0 10px; }
.facet{ margin-bottom:30px; }
.facet__title{
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute);
  padding-bottom:8px; border-bottom:1px solid var(--rule); margin-bottom:6px;
}
.facet__item{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  width:100%; padding:7px 0; font-size:15px; background:none; border:0;
  color:var(--body); cursor:pointer; text-align:left;
}
.facet__item[aria-pressed="true"]{ color:var(--ink); }
.facet__item span:last-child{ font-size:13px; color:var(--mute); }
.hook{ border:1px solid var(--rule); padding:18px; }
.hook p{ font-size:15px; line-height:1.55; margin:0 0 12px; }

/* --- tablón --------------------------------------------------------------- */

.list{ border-top:1px solid var(--ink); }
.row{ position:relative; }
.row__head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.row__tags{ display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.row__nopay{ font-size:13px; color:var(--mute); text-align:right; }
.row:focus-within{ background:var(--hover); }
.empty{ padding:40px 0; font-size:17px; color:var(--body); }
.boardfoot{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 0 0; flex-wrap:wrap;
}
.boardfoot .btn--ghost{ padding:13px 20px; font-size:15px; }
.boardfoot p{ font-size:14px; color:var(--mute); margin:0; }

/* Paginación: enlaces de verdad, no botones con JavaScript. Cada página tiene
   su URL y se puede compartir, y funciona con el JS apagado.
   Va en fila propia, con el recuento centrado entre los dos extremos, para que
   el botón de avanzar no quede flotando en medio de la nota de actualización. */
.paginacion{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--rule); padding-top:22px; margin-top:22px;
}
.paginacion .count{ white-space:nowrap; }
.paginacion .btn--ghost{ padding:13px 20px; font-size:15px; }

/* El buscador es su propio formulario; que no rompa la alineación de la fila. */
.buscador{ margin:0; }

@media (max-width:768px){
  .paginacion{ width:100%; justify-content:space-between; }
  .paginacion .btn--ghost{ flex:1; text-align:center; }
}

/* --- banda de opinión ------------------------------------------------------
   Máximo una por pantalla. */

.band{
  margin-block: 70px 0;
  margin-inline: calc(50% - 50vw);
  padding: 64px max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.band h2{ font-size:36px; line-height:1.12; color:var(--paper); text-wrap:balance; }
.band p{ font-size:18px; line-height:1.62; color:#DBDBDB; margin:0 0 20px; }
.band__foot{ display:flex; align-items:baseline; gap:24px; flex-wrap:wrap; }
.band .link-action{ color:var(--paper); }
.band .fresh{ color:var(--amber-on-ink); font-size:15px; }

/* --- sueldos y cita -------------------------------------------------------- */

.twocol{
  padding:56px 0; display:grid; grid-template-columns:1fr 1fr; gap:56px;
  align-items:start; border-bottom:1px solid var(--rule);
}
.paytable div{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--rule);
}
.paytable span:first-child{ font-size:16px; color:var(--body); }
.paytable span:last-child{ font-family:var(--font-display); font-size:18px; }
.note{ font-size:14px; color:var(--mute); margin-top:14px; }
.quote{ border-left:1px solid var(--rule); padding-left:44px; }
.quote blockquote{
  font-family:var(--font-editorial); font-size:28px; line-height:1.35;
  margin:0 0 20px; color:var(--ink);
}
.quote cite{ font-size:15px; color:var(--body); font-style:normal; }

/* --- cierre y pie ---------------------------------------------------------- */

.closer{
  padding:52px 0; display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.closer p{
  font-family:var(--font-display); font-size:28px; max-width:600px;
  color:var(--ink); margin:0; text-wrap:pretty;
}
.foot{ border-top:1px solid var(--ink); padding:30px 0 44px; display:grid; gap:22px; }
.foot__top{ display:flex; align-items:baseline; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.foot__name{ font-family:var(--font-display); font-size:20px; }
.foot__links{ display:flex; gap:26px; font-size:15px; flex-wrap:wrap; }
.foot__bottom{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:32px; flex-wrap:wrap; border-top:1px solid var(--rule); padding-top:18px;
}
.foot__bottom span{ font-size:14px; color:var(--mute); }

/* --- ficha de oferta -------------------------------------------------------- */

.detail{ padding:34px 0 72px; }
.back{ font-size:15px; color:var(--body); display:inline-block; margin-bottom:30px; }
.detail__grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start; }
.detail h1{ font-size:42px; line-height:1.08; margin:0 0 14px; text-wrap:balance; }
.detail__meta{ font-size:18px; color:var(--body); margin:0 0 34px; }
.detail__meta a{ border-bottom:1px solid var(--rule); }
.detail h2{ font-size:22px; margin:0 0 12px; }
.detail p{ font-size:17px; line-height:1.62; margin:0 0 26px; text-wrap:pretty; }
.deflist{ border-top:1px solid var(--rule); margin-bottom:26px; }
.deflist div{ font-size:17px; line-height:1.55; color:var(--body); padding:12px 0; border-bottom:1px solid var(--rule); }
/* El fondo no es decoración: sin él, cualquier solape con lo que hay debajo
   mezcla los dos textos y no se lee ninguno. Pasó con el presupuesto pegajoso
   deslizándose sobre la tarjeta de la renovación. */
.apply{ border:1px solid var(--ink); background:var(--paper); padding:26px; margin-bottom:24px; }
.apply__pay{ font-family:var(--font-display); font-size:34px; line-height:1; margin-bottom:22px; }
.apply__pay--none{ font-size:20px; color:var(--body); }
.apply .btn{ width:100%; text-align:center; display:block; }
.apply p{ font-size:14px; line-height:1.6; margin:12px 0 0; }
/* El logotipo dentro del tile: 8 px de aire por lado y sin recortar, que es lo
   que manda la guía. `object-fit:contain` deja respirar los apaisados en vez de
   estirarlos, y el fondo del tile hace de papel. */
.tile__logo{ max-width:36px; max-height:36px; object-fit:contain; display:block; }
/* El mismo cuadrado, alineado con la línea de empresa de la ficha. */
.tile--meta{ width:34px; height:34px; margin-right:10px; vertical-align:middle; }
.tile--meta .tile__logo{ max-width:22px; max-height:22px; }

/* --- aviso de la comunidad --------------------------------------------------
   Todo con piezas que ya existen: filete, botón fantasma, enlace de acción y
   radios nativos con el azul de la casa. Cero color nuevo, cero radios. */

.aviso{ border-top:1px solid var(--rule); padding-top:18px; margin-bottom:24px; }
.aviso__pregunta{ font-size:15px; color:var(--body); margin:0 0 12px; }
.aviso__rapido{ margin-bottom:12px; }
.aviso__rapido .btn--ghost{ width:100%; text-align:center; padding:12px; font-size:15px; }
.aviso__detalle summary{ cursor:pointer; font-size:15px; list-style:none; }
.aviso__detalle summary::-webkit-details-marker{ display:none; }
.aviso__detalle form{ margin-top:14px; }
.aviso__motivos{ display:grid; gap:2px; margin-bottom:16px; }
.aviso__motivos label{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  font-size:15px; color:var(--body); cursor:pointer; min-height:var(--tap);
}
.aviso__motivos input{ width:18px; height:18px; accent-color:var(--primary); margin:0; flex:0 0 auto; }
.aviso .field{ margin-bottom:14px; }
.aviso .btn{ width:100%; text-align:center; }

/* Captación de empleadores en la ficha. Vive fuera de `.apply` porque en móvil
   esa caja es la barra fija y esconde sus párrafos. */
.captacion{ font-size:14px; line-height:1.6; margin:0 0 24px; }
.sidecard{ border:1px solid var(--rule); padding:24px; }
.sidecard dl{ display:grid; gap:10px; font-size:15px; color:var(--body); margin:0; }
.sidecard dl > div{ display:flex; justify-content:space-between; gap:16px; }
.sidecard dt{ margin:0; }
.sidecard dd{ margin:0; color:var(--ink); text-align:right; }

/* --- formulario de publicación ---------------------------------------------
   Campo obligatorio: borde en tinta. Opcional: borde en regla. El error no
   pinta nada de rojo — el mensaje aparece en la nota, bajo el campo. */

.grupo{ border:0; padding:0; margin:0 0 40px; }
.grupo legend{ padding:0 0 8px; border-bottom:1px solid var(--rule); width:100%; margin-bottom:20px; }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
.campo{ min-width:0; margin-bottom:20px; }
.campos .campo{ margin-bottom:0; }
.nota{ font-size:14px; line-height:1.5; color:var(--mute); margin:7px 0 0; }
[aria-invalid="true"]{ border-color:var(--ink); border-width:2px; }
[aria-invalid="true"] + .nota{ color:var(--body); }
textarea.field{ resize:vertical; line-height:1.6; }

input[type="range"]{
  width:100%; height:var(--tap); accent-color:var(--primary);
  background:transparent; margin:0;
}

.addons{ border-top:1px solid var(--rule); }
.addon{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--rule); cursor:pointer;
  min-height:var(--tap);
}
.addon:hover{ background:var(--hover); }
.addon input{ width:18px; height:18px; accent-color:var(--primary); margin:0; }
.addon__label{ display:block; font-size:16px; color:var(--ink); }
.addon__claim{ display:block; font-size:14px; color:var(--mute); margin-top:2px; }
.addon__precio{ font-family:var(--font-display); font-size:17px; white-space:nowrap; }

/* --- resumen del presupuesto ------------------------------------------------ */

/* Pegajoso el aside entero, no solo el primer recuadro. Cuando lo era solo el
   presupuesto, se deslizaba por encima de la tarjeta que tiene debajo y los dos
   textos se superponían: es el fallo del «scroll bloqueado en Cómo funciona».
   Moviéndose como un bloque, nada se pisa. Si el aside es más alto que la
   ventana, `sticky` simplemente no lo mueve, que es el comportamiento correcto. */
.detail__grid > aside{ position:sticky; top:24px; }
.lineas{ border-top:1px solid var(--rule); margin-bottom:0; }
.lineas div{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--rule); font-size:15px; color:var(--body);
}
.lineas div span:last-child{ color:var(--ink); white-space:nowrap; }
.total{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:16px 0 4px; font-family:var(--font-display); font-size:24px;
}
.total span:first-child{ font-family:var(--font-body); font-size:15px; color:var(--body); }
.tachado{ font-size:16px; color:var(--mute); text-decoration:line-through; margin-bottom:4px; }
.resumen .btn{ margin-top:18px; }
.deflist--corta div{ font-size:15px; padding:10px 0; }
.deflist--corta b{ font-weight:600; color:var(--ink); }

@media (max-width:768px){
  .campos{ grid-template-columns:1fr; }
  .detail__grid > aside{ position:static; }
  /* En móvil el presupuesto no es una barra fija: se lee entero antes de pagar. */
  .detail .apply.resumen{
    position:static; border:1px solid var(--ink); padding:22px;
    display:block; margin-bottom:24px;
  }
  .detail .apply.resumen .btn{ width:100%; }
  .detail .apply.resumen p{ display:block; }
  .detail .apply.resumen .apply__label{ display:block; }
}

/* --- ajustes de caja -------------------------------------------------------
   La fila es un <a> y sus hijos son <span>: hay que devolverles el display. */

.row > span:nth-child(2){ display:block; min-width:0; }
.row__meta{ display:block; }
.row__side{ display:block; text-align:right; }
.row__pay,.row__date,.row__nopay{ display:block; }
.detail .chip{ margin-bottom:18px; }
.solo-movil-bloque{ display:none; }
.sheetbar{ display:none; }

/* --- móvil ------------------------------------------------------------------
   390 px es la referencia y se diseña primero: es el 70 % del uso real. */

.mobilebar{ display:none; }

@media (max-width:768px){
  .masthead{ padding:14px 0; }
  .masthead nav a:not(.btn){ display:none; }   /* bajan al pie, sin hamburguesa */
  .brand__tag{ display:none; }
  .brand__name{ font-size:22px; }
  .masthead .btn{ padding:13px 15px; font-size:15px; min-height:var(--tap); }

  /* Franja compacta: una línea, algo más de aire para que no se pegue a la
     cabecera, y la llamada a la acción visible con su filete azul. */
  .strip{
    padding:16px var(--gutter-mobile);
    flex-wrap:nowrap; gap:12px; align-items:center;
  }
  .strip p{ font-size:15px; }
  .solo-escritorio{ display:none !important; }
  .solo-movil-bloque{ display:block; }
  .sponsor .solo-movil-bloque{ display:inline; }
  .sponsors{ padding:12px 0; }
  .strip .link-action{
    color:var(--paper); font-size:15px; white-space:nowrap;
    border-bottom-width:2px; padding-bottom:2px;
  }

  .sponsors{ overflow-x:auto; flex-wrap:nowrap; }

  .titlerow{ padding:24px 0 26px; display:block; }
  .titlerow h1{ font-size:40px; line-height:1.08; margin-bottom:12px; }
  .titlerow p{ font-size:17px; line-height:1.6; margin-bottom:20px; }
  .search{ width:100%; padding:15px 16px; font-size:17px; }

  /* La única fila con scroll horizontal permitido en todo el proyecto. */
  .mobilebar{
    display:flex; gap:8px; overflow-x:auto; padding:14px 0 2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .mobilebar::-webkit-scrollbar{ display:none; }
  .mobilebar button{
    border:1px solid var(--rule); background:var(--paper); color:var(--ink);
    padding:12px 14px; font-size:15px; white-space:nowrap;
    min-height:var(--tap); cursor:pointer;
  }
  .mobilebar button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

  .sortrow{ padding:12px 0 8px; }
  .sortrow__group .eyebrow{ display:none; }
  .fresh,.count{ font-size:15px; }

  /* Objetivos táctiles de 48 px sin deformar el diseño: el área de toque se
     agranda con un pseudoelemento invisible centrado en el texto, así el
     subrayado azul sigue pegado a la palabra en vez de irse al fondo de una
     caja de 48 px. Solo se aplica donde no hay otro pulsable a menos de 48 px. */
  .sort, .link-action, .brand{ position:relative; }
  .sort::after, .link-action::after, .brand::after{
    content:''; position:absolute; left:0; right:0; top:50%;
    height:var(--tap); transform:translateY(-50%);
  }

  /* En el pie los enlaces sí se apilan: son la navegación en móvil y ahí
     ampliar el área de toque los solaparía entre sí. */
  .foot__links{ flex-direction:column; gap:0; width:100%; }
  .foot__links a{
    display:flex; align-items:center; min-height:var(--tap);
    border-bottom:1px solid var(--rule); font-size:17px;
  }
  .foot__links a:last-child{ border-bottom:0; }
  .foot__top{ display:block; }
  .foot__name{ display:block; margin-bottom:14px; }

  .row{ padding:16px 0; border-top:1px solid var(--rule); border-bottom:0; }
  .list{ border-top:0; }
  /* Sin tile de empresa: no cabe sin robarle ancho al título. */
  .row .tile{ display:none; }
  .row__title{ font-size:24px; line-height:1.15; }
  .row__meta{ font-size:17px; margin-top:5px; }
  .row__tags{ display:none; }
  .row__side{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:10px; }
  .row__pay{ font-size:17px; text-align:left; }
  .row__date,.row__nopay{ font-size:14px; text-align:left; }

  .band{
    margin-block:34px 0; margin-inline: calc(50% - 50vw);
    padding:34px var(--gutter-mobile);
    grid-template-columns:1fr; gap:14px;
  }
  .strip{ padding:12px var(--gutter-mobile); }
  .band h2{ font-size:30px; line-height:1.14; }
  .band p{ font-size:17px; }
  .twocol{ grid-template-columns:1fr; gap:34px; padding:34px 0; }
  .quote{ border-left:0; border-top:1px solid var(--rule); padding:34px 0 0; }
  .quote blockquote{ font-size:26px; }
  .closer{ padding:34px 0; }
  .closer p{ font-size:26px; }

  .detail{ padding:24px 0 96px; }
  .detail__grid{ grid-template-columns:1fr; gap:34px; }
  .detail h1{ font-size:34px; line-height:1.1; }

  /* Barra de acción fija abajo, sobre un hairline en tinta. */
  .apply{
    position:fixed; left:0; right:0; bottom:0; z-index:20;
    border:0; border-top:1px solid var(--ink); background:var(--paper);
    padding:14px var(--gutter-mobile); margin:0;
    display:flex; align-items:center; gap:14px;
  }
  .apply__label{ display:none; }
  .apply__pay{ font-size:20px; margin:0; flex:1; }
  .apply__pay--none{ font-size:15px; color:var(--body); }
  .apply .btn{ width:auto; flex:0 0 auto; }
  .apply p{ display:none; }

  /* Hoja de filtros: pantalla propia, no un desplegable.
     La barra de acción va fija abajo sobre un hairline en tinta. */
  body.filtros-abiertos{ overflow:hidden; }
  body.filtros-abiertos .board__facets{
    display:block; position:fixed; inset:0; z-index:30;
    background:var(--paper); overflow-y:auto;
    padding:22px var(--gutter-mobile) 96px;
  }
  body.filtros-abiertos .hook{ display:none; }
  body.filtros-abiertos .facet__title{ font-size:14px; }
  body.filtros-abiertos .facet__item{
    padding:13px 0; font-size:17px; min-height:var(--tap);
    border-bottom:1px solid var(--rule);
  }
  body.filtros-abiertos .facet__item span:last-child{ font-size:15px; }
  body.filtros-abiertos .sheetbar{
    display:flex; gap:12px;
    position:fixed; left:0; right:0; bottom:0; z-index:31;
    background:var(--paper); border-top:1px solid var(--ink);
    padding:14px var(--gutter-mobile);
  }
  .sheetbar .btn{ flex:2; text-align:center; padding:15px; font-size:17px; }
  .sheetbar .btn--ghost{ flex:1; }
}

/* --- ofertas de pago ---------------------------------------------------------
   Lo destacado se marca con un fondo plano y un filete en tinta, no con color:
   el azul es acción y el ámbar es dato, y ninguno de los dos está libre. Remote
   OK usa amarillo; aquí eso rompería el sistema. */

.row--destacada{
  background:var(--field);
  border-left:2px solid var(--ink);
  padding-left:16px;
}
.row--destacada:hover{ background:var(--hover); }

.tag--fijada{
  border-color:var(--ink); color:var(--ink);
  text-transform:uppercase; letter-spacing:0.08em; font-size:11px;
}

@media (max-width:768px){
  .row--destacada{ padding-left:12px; }
}

/* Orden con una sola opción: texto, no botón. */
.sort--fijo{ color:var(--ink); border-bottom:2px solid var(--primary); cursor:default; }

/* Dato que solo cabe en móvil. */
.solo-movil{ display:none; }
@media (max-width:768px){ .solo-movil{ display:inline; } }

/* Chips de filtro activos en la barra móvil. */
.chip-activo{
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  padding:12px 14px; font-size:15px; white-space:nowrap;
  min-height:var(--tap); display:inline-flex; align-items:center;
}
.mobilebar a{
  border:1px solid var(--rule); padding:12px 14px; font-size:15px;
  white-space:nowrap; min-height:var(--tap); display:inline-flex; align-items:center;
}

@media (max-width:768px){
  /* La hoja necesita un título; las facetas ya se pintan dentro. */
  body.filtros-abiertos .board__facets::before{
    content:'Filtros';
    display:block; font-family:var(--font-display); font-size:30px;
    line-height:1.1; margin-bottom:20px;
  }
}

/* --- publicar: pasos y política editorial ---------------------------------- */

.pasos{
  list-style:none; padding:0; margin:0 0 30px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border-top:1px solid var(--ink);
}
.pasos li{
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
  padding:16px 16px 18px; font-size:15px; line-height:1.5; color:var(--body);
}
.pasos li:last-child{ border-right:0; }
.pasos b{
  display:block; font-family:var(--font-display); font-size:20px;
  color:var(--ink); font-weight:400; margin-bottom:6px;
}

.wash{ background:var(--primary-wash); padding:22px 24px; margin:0 0 34px; }
.wash .eyebrow{ color:var(--primary); margin-bottom:12px; }
.wash ul{ margin:0; padding-left:18px; font-size:15px; line-height:1.7; color:var(--body); }

@media (max-width:768px){
  .pasos{ grid-template-columns:1fr; }
  .pasos li{ border-right:0; }
}

/* --- mínimos tipográficos de la guía ----------------------------------------
   §4: nada por debajo de 13 px en escritorio ni de 14 px en móvil, y en móvil
   las etiquetas, eyebrows y chips suben a 14. Estaban en 11 y 12. */

@media (max-width:768px){
  .label, .eyebrow, .facet__title, .chip, .flag-new,
  .addon__claim, .nota, .row__date, .row__nopay, .count, .sponsors__label{
    font-size:14px;
  }
  .tag{ font-size:14px; }
  .brand__tag{ font-size:14px; }
}

/* --- enmienda consciente a la guía: contraste ------------------------------
   `--mute` (#9F9F9F sobre papel) da ~2,5:1. Para fechas y recuentos —metadatos
   redundantes— es defendible. Para las etiquetas y las notas de un formulario
   de compra, que hay que leer para completarla, está muy por debajo del 4,5:1
   de WCAG AA. Pasan a `--body` (6,8:1). A 12-14 px el cambio es casi invisible
   y pasa la auditoría que un cliente de cumplimiento sí va a hacer.
   Anotado en RISKANDRULE.md. `--mute` se queda para fechas, recuentos y captions. */

.label{ color:var(--body); }
.nota{ color:var(--body); }
.addon__claim{ color:var(--body); }

/* --- ofertas relacionadas en la ficha --------------------------------------
   La ficha es página de aterrizaje y terminaba en fondo de saco. */
.relacionadas{ margin-top:56px; }
.relacionadas .eyebrow{ margin-bottom:14px; }
@media (max-width:768px){ .relacionadas{ margin-top:34px; } }

/* --- estados de formulario: error, aviso y éxito ---------------------------
   Sin rojo ni verde, que la guía prohíbe. La distinción tiene que sobrevivir a
   un daltónico y a una pantalla en blanco y negro, así que no se juega con el
   color sino con el peso, el filete y la posición:

   · error   → tinta (17:1) y peso 600, sustituyendo a la nota de ayuda, con el
               campo ya marcado por el borde de 2 px de [aria-invalid].
   · aviso   → cuerpo normal con filete de 2 px a la izquierda. Ni urgente ni
               invisible: algo que saber, no algo que arreglar.
   · éxito   → el wash azul que ya significa «información de la casa».

   Los mensajes, además, están redactados en imperativo: se reconocen como
   errores por lo que dicen, no por cómo se pintan. */

.nota--error{ color:var(--ink); font-weight:600; }
/* El resumen de errores existe siempre en el markup —si apareciera y
   desapareciera del árbol, `aria-live` no anunciaría nada— pero vacío no ocupa. */
.nota:empty{ display:none; }
.nota--aviso{
  color:var(--body); border-left:2px solid var(--ink);
  padding-left:10px; margin:16px 0;
}
.nota--exito{ background:var(--primary-wash); color:var(--ink); padding:14px 16px; margin:16px 0; }

/* El resumen de errores vive en el aside, pegado al botón de pagar: los campos
   están en la otra columna y, con el 422 del servidor, el usuario está abajo
   mientras los errores se pintan arriba. Sin esto no ve ninguno. */
.resumen .nota--error{ margin-top:14px; }