/* enviarpalletaalemania.com · capa de catálogo técnico sobre cabitrans/ui.
   Brief: «Alemania industrial por zonas, tipo catálogo técnico: tipografía
   técnica, líneas finas, iconografía de carga y mapas discretos.» */

:root {
  --cat-linea: color-mix(in srgb, var(--c-primario) 16%, transparent);
  --cat-linea-fuerte: color-mix(in srgb, var(--c-primario) 32%, transparent);
}

/* 1 · Antetítulos: referencia de catálogo, en mono y con su marca de margen. */
.rd-antetitulo {
  font-family: var(--f-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.rd-antetitulo::before {
  content: "";
  width: 1.6em;
  height: 2px;
  background: var(--c-acento);
  flex: 0 0 auto;
}

/* 2 · Todo lo que es un DATO va en mono y con cifras tabulares. */
.rd-cifra, .rd-num, .rd-precio__total, .rd-precio__fila, .rd-tabla td, .rd-tabla th,
.rd-formato__dibujo, .rd-cota, .rd-heroe__dato strong, .rd-paso::before {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.rd-cifra { letter-spacing: -.02em; }

/* 3 · Líneas finas en vez de sombras: una ficha impresa no tiene relieve. */
.rd-tarjeta, .rd-formato, .rd-sector, .rd-servicio, .rd-paso, .rd-comparador__col,
.rd-cifra-item, .rd-propuesta__punto, .rd-faq, .rd-precio, .rd-mapa__panel {
  box-shadow: none;
  border: 1px solid var(--cat-linea);
  background: var(--c-superficie);
}
.rd-comparador__col--destacada { border-color: var(--c-acento); border-width: 2px; }
.rd-tarjeta--enlazada:hover, .rd-tarjeta--enlazada:focus-within {
  border-color: var(--cat-linea-fuerte);
  box-shadow: inset 3px 0 0 var(--c-acento);
}
.rd-tarjeta--plana { background: transparent; }

/* 4 · Tablas de ficha técnica: cabecera en mono, filas con pauta fina. */
.rd-tabla th {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .74rem;
  border-bottom: 2px solid var(--cat-linea-fuerte);
}
.rd-tabla td, .rd-tabla th { border-color: var(--cat-linea); }
.rd-tabla tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--c-primario) 3%, transparent); }

/* 5 · El número del paso, como una cota de plano. */
.rd-paso { position: relative; }
.rd-paso::before { color: var(--c-acento); letter-spacing: 0; }

/* 6 · Héroe de foto: velo más cerrado por la izquierda para que el titular
   blanco y el botón amarillo lean a 360 px (la foto trae cielo claro). */
.rd-heroe--foto .rd-heroe__velo {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--c-oscuro) 88%, transparent) 0%,
    color-mix(in srgb, var(--c-oscuro) 72%, transparent) 52%,
    color-mix(in srgb, var(--c-oscuro) 42%, transparent) 100%);
}

/* 7 · Secciones separadas por pauta, no por aire vacío. */
.rd-seccion + .rd-seccion:not(.rd-seccion--oscura):not(.rd-seccion--superficie) {
  border-top: 1px solid var(--cat-linea);
}

/* 8 · Mapa discreto, como pide el brief. */
.rd-mapa-tierra { opacity: .9; }
.rd-mapa__etiqueta { font-family: var(--f-mono); letter-spacing: .02em; }

/* 9 · El héroe de foto va sobre oscuro: el botón principal en amarillo señal
   (el grafito del primario desaparecía contra la foto). El secundario se queda
   fantasma, para que haya una sola acción fuerte por pantalla. */
.rd-heroe--foto .rd-heroe__acciones .rd-boton--primario {
  background: var(--c-acento);
  border-color: var(--c-acento);
  color: var(--c-oscuro);
}
.rd-heroe--foto .rd-heroe__acciones .rd-boton--primario:hover {
  background: color-mix(in srgb, var(--c-acento) 86%, #fff);
  border-color: color-mix(in srgb, var(--c-acento) 86%, #fff);
}

/* 10 · Entre 1000 y 1200 px la cabecera de esta web no cabe: el logotipo es
   largo («Pallet a Alemania») y el menú lleva seis entradas. Se aprieta el
   logotipo, el menú y el botón en vez de esconder un enlace. */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .rd-logo { font-size: 1.02rem; }
  .rd-nav__enlace { padding-inline: calc(var(--u) * 1.25); font-size: .86rem; }
  .rd-cabecera__cta { padding-inline: calc(var(--u) * 3.5); }
}