/* Web pública. El mundo es el carné profesional: el permiso de conducir europeo y la tarjeta
   profesional. Lo que presta: el melocotón del policarbonato para los campos, la banda azul para
   la cabecera y las acciones, el verde menta del holograma para lo que el visitante tiene
   marcado, los campos con su icono y los carnés como forma de filtrar.
   Color plano, bordes finos, sin sombras. Escenario: un móvil a pleno sol en la obra o en la
   cabina, y por la noche en casa: fondo claro y contraste alto. */

@font-face {
  font-family: "Archivo";
  src: url("/estaticos/fuentes/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/estaticos/fuentes/jetbrains-mono.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --tinta: #1b1b1f;
  --tinta-2: #4b4952;
  --tinta-3: #6b6873;
  --fondo: #ffffff;
  --carne: #f2d5ce;
  --carne-claro: #faece8;
  --carne-borde: #ddb3a8;
  --carne-tinta: #6e3a2e;
  --azul: #1f3c8c;
  --azul-oscuro: #172e6c;
  --azul-claro: #e8edf8;
  --holo: #b9d9c9;
  --holo-fuerte: #7fbfa1;
  --holo-tinta: #0f4a33;
  --linea: #e7e3e1;
  --linea-fuerte: #cfc9c6;
  --error: #b42318;

  --texto: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --codigo: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --r: 6px;
  --hueco: 16px;
  --ancho: 1240px;
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1rem/1.55 var(--texto);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--holo);
  color: var(--holo-tinta);
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--linea-fuerte) transparent;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
fieldset {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

a {
  color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icono {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.icono--grande {
  width: 92px;
  height: 92px;
  stroke-width: 1.1;
}

.ficha__ref {
  font-family: var(--codigo);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.saltar {
  position: absolute;
  left: 8px;
  top: -52px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--tinta);
  color: #fff;
  z-index: 10;
}

.saltar:focus {
  top: 8px;
}

/* El icono que etiqueta un campo (sustituye a los números del carné): tinta melocotón, a la
   altura de la letra mayúscula de la etiqueta. */
.icono--rotulo {
  width: 1.3em;
  height: 1.3em;
  margin-right: 0.35em;
  vertical-align: -0.32em;
  color: var(--carne-tinta);
  stroke-width: 1.9;
}

.tenue {
  color: var(--tinta-3);
}

/* ——— La banda azul ——— */

.banda {
  background: var(--azul);
  color: #fff;
}

.banda__dentro {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 12px var(--hueco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
}

.marca__sello {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.85);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1rem;
  line-height: 1;
}

.marca__nombre {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.banda__menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.banda__menu > a:not(.boton) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--r);
  font-weight: 600;
}

.banda__menu > a:not(.boton):hover,
.banda__menu > a[aria-current="page"]:not(.boton) {
  background: rgb(255 255 255 / 0.12);
}

/* ——— Botones ——— */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--azul);
  border-radius: var(--r);
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--salida), border-color 160ms var(--salida);
}

.boton:hover {
  background: var(--azul-oscuro);
  border-color: var(--azul-oscuro);
}

.boton:disabled {
  cursor: not-allowed;
  background: var(--linea-fuerte);
  border-color: var(--linea-fuerte);
  color: var(--tinta-2);
}

.boton--grande {
  min-height: 52px;
  padding: 12px 24px;
  font-size: 1.08rem;
}

.enlace-boton {
  min-height: 44px;
  border: 0;
  background: none;
  padding: 6px 0;
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  font-weight: 600;
}

/* ——— Portada ——— */

.portada,
.ficha,
.hoja {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 28px var(--hueco) 56px;
}

.entrada {
  margin-bottom: 28px;
}

.entrada h1 {
  max-width: 900px;
}

h1 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.entrada__lema {
  margin-top: 12px;
  max-width: 64ch;
  color: var(--tinta-2);
  font-size: 1.06rem;
  text-wrap: pretty;
}

/* El buscador: el anverso del carné, con dos campos y el botón azul. */
.buscador {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 14px;
  background: var(--carne);
  border: 1px solid var(--carne-borde);
  border-radius: 12px;
}

@media (min-width: 720px) {
  .buscador {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
    align-items: end;
    padding: 16px;
  }
}

.buscador__campo {
  display: grid;
  gap: 6px;
}

.buscador__etiqueta {
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--carne-tinta);
}

.buscador input,
.buscador select {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--carne-borde);
  border-radius: 8px;
  background: #fff;
  font-size: 1.12rem;
  font-weight: 600;
}

.buscador input::placeholder {
  color: var(--tinta-3);
  font-weight: 500;
}

.buscador input:hover,
.buscador select:hover {
  border-color: var(--carne-tinta);
}

.buscador__boton {
  min-height: 56px;
  font-size: 1.1rem;
}

.confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
  color: var(--tinta-2);
  font-size: 0.95rem;
}

.confianza b {
  font-family: var(--codigo);
  font-weight: 500;
  color: var(--tinta);
}

/* En el móvil, los datos seguidos en una o dos líneas; desde 720 px, con un punto entre medias. */
.confianza {
  gap: 2px 14px;
  font-size: 0.88rem;
}

@media (min-width: 720px) {
  .confianza {
    gap: 4px 18px;
    font-size: 0.95rem;
  }
}

@media (min-width: 720px) {
  .confianza {
    flex-direction: row;
  }

  .confianza span + span::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 10px 0 -12px;
    border-radius: 50%;
    background: var(--carne-borde);
    vertical-align: middle;
  }
}

.tablero {
  display: grid;
  gap: 28px;
}

@media (min-width: 960px) {
  .tablero {
    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);
    align-items: start;
  }

  /* Fija sin barra propia: si la tarjeta no cabe en la pantalla, filtros.js le da un «top»
     negativo y baja con la página hasta que se ve su final; después se queda quieta. */
  .carne {
    position: sticky;
    top: var(--carne-top, 16px);
  }

}

/* El carné: la tarjeta de filtros. */
.carne {
  display: grid;
  gap: 18px;
  padding: 18px;
  background: var(--carne);
  border: 1px solid var(--carne-borde);
  border-radius: 10px;
}

.carne__todo > summary {
  list-style: none;
}

.carne__todo > summary::-webkit-details-marker {
  display: none;
}

.carne__cuerpo {
  display: grid;
  gap: 18px;
}

/* El botón «Filtros» solo existe en el móvil (más abajo); en escritorio, el título de la tarjeta
   y la tarjeta siempre abierta, sin nada que plegar. */
.carne__todo > summary.carne__boton {
  display: none;
}

.carne__titulos {
  display: block;
}

.carne__cabeza h2 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.3rem;
  line-height: 1.15;
}

.carne__cabeza p {
  margin-top: 4px;
  color: var(--carne-tinta);
  font-size: 0.95rem;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cuántos filtros hay puestos, en el botón «Filtros» del móvil: tinta, no menta. */
.filtros-puestos:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  margin-left: 2px;
  padding: 0 7px;
  border: 1.5px solid var(--tinta);
  border-radius: 3px;
  background: #fff;
  font-family: var(--codigo);
  font-size: 0.85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.marcados:not(:empty) {
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--holo);
  color: var(--holo-tinta);
  letter-spacing: 0.02em;
  text-transform: none;
}

.carne__campo legend,
.carne__campo .leyenda {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--carne-tinta);
}

.oficios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.oficio:first-child {
  grid-column: 1 / -1;
}

.oficio {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 12px;
  background: var(--carne-claro);
  border: 1px solid var(--carne-borde);
  border-radius: var(--r);
  cursor: pointer;
}

.oficio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.oficio__nombre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  font-stretch: 90%;
  white-space: nowrap;
}

.oficio__cuenta {
  font-family: var(--codigo);
  font-size: 0.85rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

/* Elegido: tinta y blanco, como un campo relleno del carné. El azul es de la banda y los botones. */
.oficio:has(input:checked) {
  background: #fff;
  border: 1.5px solid var(--tinta);
  padding: 8.5px 11.5px;
}

.oficio:has(input:checked) .oficio__nombre {
  font-weight: 800;
}

.oficio:has(input:checked) .oficio__cuenta {
  color: var(--tinta);
}

.oficio:has(input:focus-visible),
.celda:has(input:focus-visible),
.interruptor:has(input:focus-visible) {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* Los carnés, un bloque plegable por oficio. Cada carné es una fila con su nombre entero y cuántas
   ofertas lo piden; marcado, el holograma. Solo salen los que piden las ofertas de la página. */
.grupos-carnes {
  display: grid;
  gap: 4px;
}

.grupo-carnes {
  border: 1px solid var(--carne-borde);
  border-radius: var(--r);
  background: var(--carne-claro);
}

.grupo-carnes > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
}

.grupo-carnes > summary::-webkit-details-marker {
  display: none;
}

.grupo-carnes > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 4px 3px auto;
  border-right: 2px solid var(--carne-tinta);
  border-bottom: 2px solid var(--carne-tinta);
  transform: rotate(45deg);
  transition: transform 160ms var(--salida);
}

.grupo-carnes[open] > summary::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}

.grupo-carnes > summary:hover {
  color: var(--carne-tinta);
}

.grupo-carnes__nombre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.grupo-carnes__nombre .icono {
  color: var(--carne-tinta);
}

.grupo-carnes__marcados:not(:empty) {
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--holo);
  color: var(--holo-tinta);
  font-size: 0.8rem;
  font-weight: 700;
}

.grupo-carnes__lista {
  display: grid;
  gap: 4px;
  padding: 0 8px 8px;
}

.celda {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--carne-borde);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 140ms var(--salida), border-color 140ms var(--salida);
}

.celda input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.celda[hidden],
.grupo-carnes--vacio {
  display: none;
}

.celda__nombre {
  min-width: 0;
  font-weight: 600;
  line-height: 1.3;
}

.celda__cuenta {
  margin-left: auto;
  font-family: var(--codigo);
  font-size: 0.85rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.celda:hover {
  border-color: var(--carne-tinta);
}

/* Marcada: el holograma. */
.celda:has(input:checked) {
  background: var(--holo);
  border-color: var(--holo-fuerte);
}

.celda:has(input:checked) .celda__nombre,
.celda:has(input:checked) .celda__cuenta {
  color: var(--holo-tinta);
}

/* Marcada: la marca del holograma delante del nombre, dibujada. */
.celda:has(input:checked)::before {
  content: "";
  flex: none;
  width: 6px;
  height: 11px;
  margin: -3px 2px 0 3px;
  border-right: 2px solid var(--holo-tinta);
  border-bottom: 2px solid var(--holo-tinta);
  transform: rotate(45deg);
}

.carne__campo--select select,
.campo select,
.campo input,
.campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  background: #fff;
}

.carne__campo--select select {
  border-color: var(--carne-borde);
}

.interruptor {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
}

.interruptor input {
  appearance: none;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 12px;
  background: var(--carne-borde);
  position: relative;
  cursor: pointer;
  transition: background-color 160ms var(--salida);
}

.interruptor input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 180ms var(--salida);
}

.interruptor input:checked {
  background: var(--azul);
}

.interruptor input:checked::after {
  transform: translateX(16px);
}

/* ——— Resultados ——— */

.resultados__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tinta);
}

.resultados__cabeza h2 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.5rem;
}

#n-ofertas {
  font-variant-numeric: tabular-nums;
}

.resultados__filtro {
  color: var(--tinta-2);
  font-size: 0.95rem;
}

.ofertas {
  display: grid;
}

.oferta {
  /* 200 ofertas en la página: el navegador no maqueta ni pinta las que no se ven. */
  content-visibility: auto;
  contain-intrinsic-size: auto 190px;
  border-bottom: 1px solid var(--linea);
}

.oferta article {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 4px;
}

.oferta__titulo {
  font-weight: 750;
  font-stretch: 108%;
  font-size: 1.25rem;
  line-height: 1.3;
  text-wrap: pretty;
}

.oferta__titulo a {
  color: var(--tinta);
  text-decoration: none;
}

/* Toda la tarjeta lleva a la ficha, sin anidar enlaces; «Aplicar» queda por encima. */
.oferta__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.oferta:hover .oferta__titulo a {
  color: var(--azul);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Dónde y cuándo: lo segundo que se mira, en tinta y con su icono. Luego sueldo y contrato, que
   siguen en la misma línea si caben. */
.oferta__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

@media (min-width: 720px) {
  .oferta__info {
    gap: 4px 16px;
  }
}

.oferta__donde,
.oferta__condiciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.oferta__dato {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  line-height: 1.35;
}

.oferta__dato .icono,
.oferta__sueldo .icono {
  flex: none;
  align-self: center;
  color: var(--carne-tinta);
}

.oferta__dato--contrato {
  color: var(--tinta-2);
  font-weight: 550;
}

/* El sueldo, solo cuando lo hay: en un campo melocotón, en negrita. */
.oferta__sueldo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 7px;
  border: 1px solid var(--carne-borde);
  border-radius: 4px;
  background: var(--carne);
  font-weight: 800;
  font-stretch: 104%;
}

.oferta__carnes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--tinta-2);
}

/* Los sellos ocupan lo que deja el pictograma y se reparten en líneas a su lado, no debajo. */
.oferta__carnes {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.oferta__carnes .casillas-oferta {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

.oferta__carnes .oferta__sector {
  align-self: center;
}

/* La columna del pictograma, como en la tabla de categorías del permiso. */
.oferta__oficio {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--carne-borde);
  border-radius: 3px;
  background: var(--carne);
  color: var(--carne-tinta);
}

.casillas-oferta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.casilla {
  min-width: 42px;
  padding: 3px 7px;
  border: 1px solid var(--carne-borde);
  border-radius: 3px;
  background: var(--carne-claro);
  font-weight: 750;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  color: var(--carne-tinta);
}

.casilla.es-tuya {
  background: var(--holo);
  border-color: var(--holo-fuerte);
  color: var(--holo-tinta);
}

/* Abajo: carnés y fuente a la izquierda, «Aplicar» a la derecha (debajo, en el móvil estrecho). */
.oferta__base {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
}

.oferta__base-datos {
  display: grid;
  gap: 6px;
  min-width: 0;
}

@media (max-width: 719px) {
  .oferta__base {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "carnes carnes" "fuente acciones";
    align-items: end;
    gap: 8px 12px;
  }

  .oferta__base-datos {
    display: contents;
  }

  .oferta__carnes {
    grid-area: carnes;
  }

  .oferta__fuente {
    grid-area: fuente;
    align-self: center;
  }

  .oferta__acciones {
    grid-area: acciones;
  }
}

/* Desde 720 px, sellos y fuente en una sola fila, con «Aplicar» al final. */
@media (min-width: 720px) {
  .oferta__base {
    align-items: center;
  }

  .oferta__base-datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
  }
}

.oferta__fuente {
  color: var(--tinta-3);
  font-size: 0.88rem;
}

.oferta__empresa {
  color: var(--tinta-2);
  font-weight: 600;
}

.oferta__sector {
  color: var(--tinta-3);
  font-size: 0.95rem;
}

/* «Aplicar» va encima del enlace de toda la tarjeta. */
.boton--aplicar {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 8px 18px;
}

.vacio {
  padding: 28px 0 8px;
  display: grid;
  gap: 12px;
  justify-items: start;
}

.vacio h3 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.3rem;
}

.vacio p {
  color: var(--tinta-2);
  max-width: 56ch;
}

.vacio__ideas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vacio__ideas:empty {
  display: none;
}

.idea {
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.idea:hover {
  background: var(--carne-claro);
}

.idea b {
  font-family: var(--codigo);
  font-weight: 500;
  margin-left: 4px;
}

/* 404 */
.perdido {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.perdido h2 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.3rem;
}

.perdido__oficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
  gap: 8px;
}

.perdido__oficios li {
  display: flex;
}

.perdido__oficios a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--carne-borde);
  border-radius: 8px;
  background: var(--carne-claro);
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}

.perdido__oficios a:hover {
  border-color: var(--carne-tinta);
}

.perdido__oficios b {
  margin-left: auto;
  font-family: var(--codigo);
  font-weight: 500;
  color: var(--tinta-2);
}

/* ——— Ficha de la oferta ——— */

.ficha {
  max-width: 920px;
}

.migas {
  margin-bottom: 8px;
  font-size: 0.92rem;
  color: var(--tinta-3);
}

.migas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ficha__carne {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--carne);
  border: 1px solid var(--carne-borde);
  border-radius: 12px;
}

@media (min-width: 720px) {
  .ficha__carne {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
  }
}

.ficha__foto {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 96px;
  background: var(--carne-claro);
  border: 1px solid var(--carne-borde);
  border-radius: 6px;
  color: var(--carne-tinta);
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@media (min-width: 720px) {
  .ficha__foto {
    min-height: 168px;
  }
}

.ficha__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.ficha__campo--titulo,
.ficha__campo--ancho {
  grid-column: 1 / -1;
}

.ficha__campo dt {
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--carne-tinta);
}

.ficha__campo dd {
  margin-top: 2px;
  font-weight: 600;
}

.ficha__campo h1 {
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem);
}

.ficha__campo .casillas-oferta {
  margin-top: 4px;
}

.hechos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin-top: 16px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
}

.hechos > div {
  padding: 12px 14px;
  background: #fff;
}

@media (max-width: 560px) {
  .entrada__mas {
    display: none;
  }

  /* La primera pantalla del móvil tiene que llegar al botón «Filtros» y a la primera oferta. */
  .portada {
    padding-top: 20px;
  }

  .entrada h1 {
    font-size: 1.5rem;
    font-stretch: 104%;
  }

  .entrada__lema {
    margin-top: 8px;
    font-size: 0.98rem;
  }

  .buscador {
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
  }

  .buscador__campo {
    gap: 4px;
  }

  .hechos {
    grid-template-columns: 1fr 1fr;
  }

  .hechos > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.hechos dt {
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--carne-tinta);
}

.hechos dd {
  margin-top: 2px;
  font-weight: 700;
  font-size: 1.05rem;
}

.hechos > .hechos__sueldo {
  background: var(--carne);
}

.hechos__sueldo dd {
  font-weight: 800;
  font-size: 1.25rem;
  font-stretch: 104%;
}

.ficha__accion {
  margin: 22px 0 8px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.boton--aplicar-grande {
  min-height: 60px;
  padding: 14px 32px;
  font-size: 1.2rem;
}

.ficha__nota {
  color: var(--tinta-3);
  font-size: 0.9rem;
}

.ficha__texto {
  margin-top: 28px;
}

.ficha__texto h2,
.parecidas h2,
.hoja h2,
.condiciones h2 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.texto {
  max-width: 70ch;
  display: grid;
  gap: 12px;
}

.texto ul,
.texto ol {
  padding-left: 1.2em;
  list-style: disc;
  display: grid;
  gap: 4px;
}

.texto h3,
.texto h4 {
  font-size: 1.05rem;
  margin-top: 6px;
}

.ficha__origen {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  max-width: 70ch;
  color: var(--tinta-3);
  font-size: 0.9rem;
}

.parecidas {
  margin-top: 40px;
}

.ofertas--compactas .oferta article {
  padding: 14px 4px;
}

/* ——— Páginas de texto ——— */

.hoja {
  max-width: 760px;
  display: grid;
  gap: 14px;
}

.hoja h2 {
  margin-top: 18px;
  margin-bottom: 0;
}

.hoja p {
  max-width: 70ch;
}

.fuentes,
.pendientes {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
}

.fuente,
.pendientes > div {
  padding: 14px 16px;
  background: #fff;
}

.fuente {
  display: grid;
  gap: 8px;
  scroll-margin-top: 16px;
}

.fuente h3 {
  font-weight: 800;
  font-stretch: 108%;
  font-size: 1.05rem;
  line-height: 1.25;
}

.fuente > p {
  color: var(--tinta-2);
}

/* Licencia, cita, descarga y número: como los campos de la ficha, etiqueta pequeña encima. */
.fuente__datos {
  display: grid;
  gap: 8px 20px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--linea-fuerte);
}

@media (min-width: 720px) {
  .fuente__datos {
    grid-template-columns: 1.3fr 1.6fr 1fr 0.7fr;
  }
}

.fuente__datos dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.fuente__datos dd {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.pendientes dt {
  font-weight: 700;
}

.pendientes dd {
  color: var(--tinta-2);
}

/* ——— Pie ——— */

.pie {
  border-top: 1px solid var(--linea);
  background: var(--carne-claro);
}

.pie__dentro {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 28px var(--hueco) 36px;
  display: grid;
  gap: 12px;
  color: var(--tinta-2);
  font-size: 0.92rem;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pie__nota {
  color: var(--tinta-3);
  max-width: 80ch;
}

@media (max-width: 959px) {
  /* La tarjeta de filtros plegada: una fila con su título y cuántos filtros hay puestos. */
  .carne__todo > summary {
    cursor: pointer;
    position: relative;
    padding-right: 28px;
  }

  .carne__todo > summary::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--carne-tinta);
    border-bottom: 2px solid var(--carne-tinta);
    transform: rotate(45deg);
    transition: transform 160ms var(--salida);
  }

  .carne__todo.listo[open] > summary::after {
    transform: rotate(-135deg) translate(-3px, -3px);
  }

  /* La tarjeta llega abierta en el HTML (en escritorio va siempre abierta). En el móvil se pinta ya
     plegada hasta que filtros.js la pliega de verdad y le pone .listo: así la página no salta al
     cargar. Sin JavaScript los filtros no funcionan, así que no se pierde nada. */
  .carne__todo:not(.listo) > :not(summary) {
    display: none;
  }

  /* En el móvil la cabecera es el botón «Filtros», con cuántos hay puestos; el título sobra. */
  .carne__titulos {
    display: none;
  }

  .carne__todo > summary.carne__boton {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 800;
    font-stretch: 108%;
    font-size: 1.12rem;
  }

  .carne__todo[open] > .carne__cuerpo {
    margin-top: 14px;
  }

  .entrada {
    margin-bottom: 16px;
  }

  .tablero {
    gap: 18px;
  }

  .carne__boton .icono {
    width: 22px;
    height: 22px;
    color: var(--carne-tinta);
  }


  .ficha__accion > .boton {
    width: 100%;
  }

  .ficha__foto {
    min-height: 0;
    grid-auto-flow: column;
    justify-content: start;
    padding: 10px 12px;
  }

  .ficha__foto .icono--grande {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 560px) {
  .banda__menu > a.menu--ancho {
    display: none;
  }

  .banda__guardadas .banda__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .marca__nombre {
    font-size: 1.15rem;
  }

  .carne {
    padding: 14px;
  }

  .oficio .icono {
    display: none;
  }
}

/* ——— 0.4.0: el trabajador y el tráfico ——— */

/* Cabecera: «Guardadas» con su icono y cuántas hay (en melocotón: es lo que el visitante se lleva). */
.banda__guardadas {
  gap: 6px;
}

.banda__guardadas .icono {
  width: 1.15em;
  height: 1.15em;
}

.contador-guardadas {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--carne);
  color: var(--tinta);
  font: 500 0.8rem/20px var(--codigo);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Botón secundario: blanco con canto azul (azul = actuar). Pulsado («Guardada»): canto de tinta,
   que es el color de lo elegido. */
.boton--suave {
  background: #fff;
  color: var(--azul);
  border-color: var(--azul);
}

.boton--suave:hover {
  background: var(--azul-claro);
  border-color: var(--azul-oscuro);
}

.boton--suave[aria-pressed="true"] {
  color: var(--tinta);
  border-color: var(--tinta);
}

.boton--suave[aria-pressed="true"] .icono {
  fill: currentColor;
}

.enlace-icono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* La entrada de los listados: migas encima del h1 y, si hay, guía y canal de Telegram. */
.entrada .migas {
  margin: -10px 0 0;
}

.entrada__extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 6px 0 4px;
}

.entrada__extra a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
}

/* Tarjeta de filtros: «Recordar» y su nota, y en el móvil «Ver N ofertas» siempre abajo. */
.carne__nota {
  margin-top: -10px;
  color: var(--carne-tinta);
  font-size: 0.88rem;
}

.carne__ver {
  display: none;
}

@media (max-width: 959px) {
  .carne__todo[open] > .carne__ver {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 -14px -14px;
    padding: 10px 14px 14px;
    background: var(--carne);
    border-top: 1px solid var(--carne-borde);
    border-radius: 0 0 10px 10px;
  }

  .carne__ver .boton {
    width: 100%;
  }
}

/* Resultados: compartir la búsqueda y el aviso de nuevas. */
.resultados__compartir {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  flex-basis: 100%;
}

.nuevas {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-size: 0.95rem;
}

.nuevas b {
  font-weight: 800;
}

/* «Mostrando tus filtros guardados»: lo elegido va en tinta, como una oferta guardada. */
.recordados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 12px;
  padding: 8px 8px 8px 14px;
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  font-size: 0.95rem;
}

.recordados[hidden] {
  display: none;
}

.recordados__texto {
  flex: 1 1 16rem;
  margin: 0;
}

.recordados__texto b {
  font-weight: 800;
}

.recordados__boton {
  flex: none;
  min-height: 44px;
}

/* Los grupos del filtro de carnés dentro de la lista. «Los tienes todos» lleva el visto del
   holograma (menta = lo que el visitante tiene); «te falta uno», un cuadro melocotón vacío. */
.seccion {
  margin-top: 18px;
  padding: 12px 0 10px;
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--linea);
}

.ofertas > .seccion:first-child {
  margin-top: 0;
  border-top: 0;
}

.seccion__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  font-stretch: 108%;
}

.seccion__titulo::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--carne-borde);
  background: var(--carne-claro);
}

.seccion[data-grupo="todo"] .seccion__titulo::before {
  border-color: var(--holo-fuerte);
  background: var(--holo);
}

.seccion[data-grupo="todo"] .seccion__titulo {
  position: relative;
}

.seccion[data-grupo="todo"] .seccion__titulo::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 11px;
  margin-top: -7px;
  border: solid var(--holo-tinta);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.seccion[data-grupo="nada"] .seccion__titulo::before {
  display: none;
}

.seccion__cuenta {
  margin-left: auto;
  font: 500 0.9rem var(--codigo);
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.seccion--resto {
  margin-top: 0;
  padding: 16px 0;
  border: 0;
}

.seccion__boton {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  font-weight: 650;
}

/* Lo que se le dice a cada oferta: el carné que te falta y si es nueva desde tu última visita. */
.oferta__falta {
  flex-basis: 100%;
}

.oferta__falta span {
  display: inline-flex;
  padding: 3px 8px;
  border: 1px solid var(--carne-borde);
  border-radius: 3px;
  background: var(--carne-claro);
  color: var(--carne-tinta);
  font-size: 0.88rem;
  font-weight: 700;
}

.oferta__nueva {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

/* Guardar desde la lista: un botón cuadrado de 44 px junto a «Aplicar». */
.oferta__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.guardar-mini {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  background: #fff;
  color: var(--tinta-2);
  cursor: pointer;
  transition: border-color 160ms var(--salida), color 160ms var(--salida);
}

.guardar-mini:hover {
  border-color: var(--tinta-3);
  color: var(--tinta);
}

.guardar-mini[aria-pressed="true"] {
  border: 1.5px solid var(--tinta);
  color: var(--tinta);
}

.guardar-mini[aria-pressed="true"] .icono {
  fill: currentColor;
}

/* La ficha: Guardar, WhatsApp y Copiar enlace bajo «Aplicar». */
.ficha__acciones {
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, max-content));
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 559px) {
  .ficha__acciones {
    grid-template-columns: repeat(2, 1fr);
  }

  .ficha__acciones .boton:first-child {
    grid-column: 1 / -1;
  }

  .ficha__acciones .boton {
    padding: 8px 10px;
    white-space: nowrap;
  }
}

/* Los sellos de la ficha enlazan a las ofertas que piden ese carné: tinta del sello, subrayado
   en el canto, y 44 px de zona de toque sin agrandar el sello. */
.casilla a {
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--carne-borde);
  text-underline-offset: 0.2em;
}

.casilla a::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.casilla a:hover {
  text-decoration-color: currentColor;
}

.ficha__aviso {
  margin-top: 8px;
  color: var(--tinta-3);
  font-size: 0.88rem;
  max-width: 70ch;
}

/* «Aplicar» siempre a mano en el móvil: una barra fija abajo que se esconde mientras el botón
   grande de la ficha está a la vista (comun.js). Es lo único translúcido de la web. */
.barra-aplicar {
  display: none;
}

@media (max-width: 959px) {
  .barra-aplicar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 10px var(--hueco) calc(10px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.96);
    border-top: 1px solid var(--linea);
    transition: transform 220ms var(--salida);
  }

  .barra-aplicar .boton {
    width: 100%;
    min-height: 52px;
    padding: 10px 18px;
    font-size: 1.08rem;
  }

  .barra-aplicar--oculta {
    transform: translateY(105%);
  }

  .con-barra-aplicar .pie {
    padding-bottom: 76px;
  }
}

.parecidas__mas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
}

.parecidas__mas a:not(.boton) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Oferta retirada: el carné con el sello «Ya no está disponible», como uno anulado. */
.ficha__carne--caducada {
  background: var(--carne-claro);
}

.ficha__carne--caducada h1 {
  margin: 6px 0 8px;
  color: var(--tinta-2);
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.12;
  text-wrap: balance;
}

.caducada__sello {
  display: inline-flex;
  padding: 3px 9px;
  border: 1.5px solid var(--error);
  border-radius: 3px;
  color: var(--error);
  font-size: 0.82rem;
  font-weight: 700;
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.caducada__dato {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.caducada__dato .icono {
  color: var(--carne-tinta);
}

.caducada__texto {
  margin-top: 6px;
  color: var(--tinta-2);
  max-width: 60ch;
}

/* «Explora»: los listados vecinos, como las fichas por oficio de la 404. */
.explora {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  display: grid;
  gap: 24px;
}

.explora__bloque h2 {
  margin-bottom: 10px;
  font-size: 1.12rem;
  font-weight: 800;
  font-stretch: 112%;
}

.explora__bloque ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
}

.explora__bloque a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--carne-borde);
  border-radius: 8px;
  background: var(--carne-claro);
  color: var(--tinta);
  font-weight: 650;
  text-decoration: none;
}

.explora__bloque a:hover {
  border-color: var(--carne-tinta);
}

.explora__bloque b {
  margin-left: auto;
  font: 500 0.9rem var(--codigo);
  color: var(--tinta-2);
}

/* Páginas de cifras: sueldos, carnés y provincias. */
.hoja--ancha {
  max-width: 960px;
}

.cifras__oficio {
  margin-top: 18px;
}

.cifras__oficio h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cifras__oficio h2 .icono {
  width: 1.1em;
  height: 1.1em;
  color: var(--carne-tinta);
}

.cifras__nota {
  color: var(--tinta-3);
  font-size: 0.92rem;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tabla th,
.tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: baseline;
}

.tabla thead th {
  border-bottom: 2px solid var(--tinta);
  color: var(--carne-tinta);
  font-size: 0.74rem;
  font-weight: 700;
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabla td {
  font-variant-numeric: tabular-nums;
}

.tabla td b {
  font-weight: 800;
  font-stretch: 104%;
}

.tabla__total th,
.tabla__total td {
  background: var(--carne-claro);
}

.tabla__periodo th {
  padding-top: 18px;
  border-bottom: 1px solid var(--carne-borde);
  color: var(--carne-tinta);
  font-size: 0.82rem;
  font-weight: 700;
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabla tbody th a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 640px) {
  /* En el móvil cada fila es una ficha: el lugar arriba y sus tres datos con su etiqueta. */
  .tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabla tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--linea);
  }

  .tabla__total {
    background: var(--carne-claro);
  }

  .tabla__periodo {
    display: block;
    padding: 14px 0 6px;
    border-bottom: 1px solid var(--carne-borde);
  }

  .tabla th,
  .tabla td {
    padding: 0;
    border: 0;
    background: none;
  }

  .tabla tbody th {
    grid-column: 1 / -1;
    font-size: 1.05rem;
  }

  .tabla td::before {
    content: attr(data-etiqueta);
    display: block;
    color: var(--carne-tinta);
    font-size: 0.72rem;
    font-weight: 700;
    font-stretch: 87.5%;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .tabla td:last-child {
    grid-column: 1 / -1;
  }
}

.ranking {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.ranking__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
}

.ranking__nombre {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 650;
}

.ranking__cifra {
  color: var(--tinta-2);
  font-size: 0.92rem;
  white-space: nowrap;
}

.ranking__cifra b {
  font: 500 1.05rem var(--codigo);
  color: var(--tinta);
}

.ranking__barra {
  grid-column: 1 / -1;
  width: 100%;
  height: 8px;
  border-radius: 2px;
}

.ranking__fondo {
  fill: var(--carne-claro);
}

.ranking__lleno {
  fill: var(--carne-tinta);
}

.ranking__guia {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.95rem;
}

.guias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

.guias a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--carne-borde);
  border-radius: 8px;
  background: var(--carne-claro);
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}

.guias a:hover {
  border-color: var(--carne-tinta);
}

.guias .icono,
.ranking__guia .icono {
  color: var(--carne-tinta);
}

/* Guía de un carné: la fecha de revisión a la vista y las fuentes numeradas al final. */
.guia__revision {
  padding: 10px 14px;
  border: 1px solid var(--carne-borde);
  border-radius: 8px;
  background: var(--carne-claro);
  color: var(--carne-tinta);
  font-size: 0.92rem;
}

.guia__fuentes {
  display: grid;
  gap: 8px;
  padding-left: 1.4em;
  list-style: decimal;
}

.guia__fuentes li::marker {
  font-family: var(--codigo);
  color: var(--tinta-3);
}

/* Guardadas. */
.guardadas__lista {
  display: grid;
}

.guardada {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea);
}

.guardada__titulo {
  font-size: 1.12rem;
  font-weight: 750;
  font-stretch: 108%;
  line-height: 1.3;
  color: var(--tinta);
}

.guardada__dato {
  grid-column: 1;
  color: var(--tinta-2);
  font-size: 0.92rem;
}

.guardada__quitar {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.guardada--caducada .guardada__titulo {
  color: var(--tinta-3);
}

.borrar-guardado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.borrar-guardado__hecho {
  color: var(--tinta-2);
  font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ——— Dinero (0.5.0): publicidad, formación patrocinada y equipo con enlaces de afiliado. Neutro a
   propósito: ni melocotón (el mundo del carné), ni azul de acción en el marco, para que nada pagado
   se confunda con una oferta. Siempre con su marca («Publicidad», «Patrocinado», «Enlace de
   afiliado») en la etiqueta de los datos. ——— */
.marca-pago {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  color: var(--tinta-2);
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 87.5%;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

.publicidad {
  display: grid;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 10px;
  border: 1px solid var(--linea);
  border-radius: 8px;
}

.publicidad__marca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.85rem;
}

.publicidad__enlace {
  display: block;
  border-radius: 4px;
  overflow: hidden;
}

.publicidad__enlace img {
  display: block;
  width: 100%;
  height: auto;
}

.dinero {
  display: grid;
  gap: 12px;
}

.productos,
.academias,
.equipo__otros {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
}

@media (min-width: 720px) {
  .productos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.producto,
.academia {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 16px 6px;
  background: var(--fondo);
}

.producto__nombre,
.academia__nombre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  font-stretch: 108%;
}

.producto__para,
.academia__texto {
  margin: 0;
  color: var(--tinta-2);
}

.producto__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin: 0;
}

.academia__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
}

.academia__donde {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.academia__donde .icono {
  width: 1em;
  height: 1em;
  color: var(--carne-tinta);
}

.nota-afiliado {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--linea-fuerte);
  color: var(--tinta-2);
  font-size: 0.92rem;
}

.equipo__otros a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px;
  background: var(--fondo);
  font-weight: 650;
}

.equipo__otros a:hover {
  background: var(--carne-claro);
}

.equipo__otros .icono {
  width: 1.3em;
  height: 1.3em;
  color: var(--carne-tinta);
}

.formatos dt {
  font-weight: 800;
  font-stretch: 108%;
}

.formatos dd {
  margin: 4px 0 0;
  color: var(--tinta-2);
}

/* Listas sueltas de las páginas de texto (privacidad, anúnciate): con viñeta y aire entre puntos. */
.hoja > ul:not([class]) {
  display: grid;
  gap: 8px;
  max-width: 70ch;
  padding-left: 1.2em;
  list-style: disc;
}