.relevo {
  background: var(--p-papel-secciones);
}

section[data-fondo].relevo.relevo { padding: 0 }

section[data-fondo].metodo.metodo:has(+ section.relevo) {
  padding-bottom: max(0px, calc(var(--p-relevo-junta) - var(--p-metodo-hueco-frase, 0px)));
}
section.relevo + section[data-fondo].areas.areas { padding-top: var(--p-relevo-junta) }

:root { --p-relevo-junta: clamp(52px, 8vh, 110px) }

.relevo-caja {
  border-radius: var(--p-radio-foto);

  padding: clamp(28px, 4.5vh, 56px) clamp(28px, 5vw, 88px);
}
.relevo-caja--gris {
  background: var(--p-metodo-caja-claro);
  color: var(--p-ink);
}

.relevo-caja--gris .relevo-apagado    { color: #7c7a78 }
.relevo-caja--gris .relevo-marcas li  { color: var(--p-areas-eti) }
.relevo-caja--gris .relevo-marcas::before { background: var(--p-linea-claras) }

.relevo-cuerpo {
  max-width: none;
  padding-inline: max(24px, calc((100% - var(--p-ancho-papel)) / 2));
  padding-inline: max(24px, round(calc((100% - var(--p-ancho-papel)) / 2), 1px));
}

.relevo-bloque {
  --e: clamp(0, calc(var(--fila-p, 1) * 2.4), 1);
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * 24px));
  transform: translateY(round(calc((1 - var(--e)) * 24px), 1px));
}

.relevo-titular {

  max-width: 48ch;

  font-size: clamp(26px, 2.9vw, 50px);
  font-weight: var(--p-peso-fino);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.relevo-apagado { color: #7c7a78 }

.relevo-marcas {
  position: relative;
  list-style: none;

  margin: clamp(20px, 3.5vh, 40px) 0 0;
  padding: clamp(16px, 2.6vh, 28px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 56px);
}

.relevo-marcas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #2b2b31;
  transform: scaleX(clamp(0, calc((var(--fila-p, 1) - .1) * 2.2), 1));
  transform-origin: left;
}

.relevo-marcas li {
  font-family: var(--p-font-ui);
  font-size: clamp(12px, .82vw, 13px);
  font-weight: var(--p-peso-claro);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8a8886;
}

@media (max-width: 700px) {
  .relevo-marcas { gap: 14px 26px }

  .relevo-titular { max-width: none; font-size: clamp(21px, 5.8vw, 26px) }

  .relevo-marcas { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .relevo-bloque { opacity: 1; transform: none }
  .relevo-marcas::before { transform: none }
}