.wr-how { padding-top: 2.25rem; background: var(--wr-color-paper) url("../../images/shared/textura-papel-marfil.png") repeat 0 0 / 512px 320px; }
body.web-resolvia:has(> main#contenido > .wr-how) {
    background: var(--wr-color-paper)
        url("../../images/shared/textura-papel-marfil.png")
        repeat 0 0 / 512px 320px;
}

body.web-resolvia:has(> main#contenido > .wr-how) > .wr-header,
body.web-resolvia:has(> main#contenido > .wr-how) > main#contenido > .wr-how {
    background: transparent;
}
.wr-how__heading { max-width: 52rem; text-align: center; }
.wr-how__eyebrow { margin: 0; color: var(--wr-color-gold); font-size: 1.55rem; }
.wr-how__heading h1 { margin: 0.15rem 0; font-size: clamp(3rem, 7vw, 4.75rem); font-weight: 400; line-height: 1; }
.wr-how__divider { position: relative; display: block; width: 13.5rem; height: 1px; margin: 0.7rem auto; background: linear-gradient(to right, var(--wr-color-line) calc(50% - .85rem), transparent calc(50% - .85rem), transparent calc(50% + .85rem), var(--wr-color-line) calc(50% + .85rem)); }
.wr-how__divider::after { position: absolute; top: 50%; left: 50%; color: var(--wr-color-gold); background: transparent; content: "✦"; font: 1rem/1 var(--wr-font-display); transform: translate(-50%, -50%); }
.wr-how__intro { max-width: 47rem; margin: 1rem auto 1.5rem; font-family: var(--wr-font-ui); font-size: 1.05rem; line-height: 1.55; }
.wr-how-video { padding: 2rem; border: 1px solid var(--wr-color-gold); border-radius: 1rem; box-shadow: var(--wr-shadow); }
.wr-how-video__player { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.wr-how-journey { padding-block: 1rem 1.25rem; }
.wr-how-steps { position: relative; display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.wr-how-steps::before { position: absolute; z-index: 1; top: 0; bottom: 0; left: 10.5rem; width: 1px; background: var(--wr-color-gold); content: ""; }
.wr-how-step { position: relative; display: grid; min-height: 6rem; grid-template-columns: 8.5rem 3rem 1fr; align-items: center; gap: 1.5rem; padding: 0.75rem 2.5rem; border: 1px solid var(--wr-color-line); border-radius: 1rem; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0.65rem 1.5rem rgba(14, 45, 77, 0.04); }
.wr-how-step__number { display: grid; width: 4.25rem; aspect-ratio: 1; place-items: center; margin-inline: auto; border: 2px solid var(--wr-color-gold); border-radius: 50%; color: var(--wr-color-gold); font-size: 2.75rem; line-height: 1; }
.wr-how-step__marker { position: relative; z-index: 2; display: grid; width: 3rem; aspect-ratio: 1; place-items: center; color: var(--wr-color-gold); background: transparent; font: 2.2rem/1 var(--wr-font-display); }
.wr-how-step__marker img { width: 3.75rem; max-width: none; height: 3.75rem; object-fit: contain; }
.wr-how-step__copy h2 { margin: 0; font-size: 1.65rem; font-weight: 400; line-height: 1.15; }
.wr-how-step__copy p { margin: 0.2rem 0 0; font-family: var(--wr-font-ui); font-size: 0.95rem; line-height: 1.35; }
.wr-how-journey__closing { position: relative; margin: 1.2rem 0 0; padding-top: 1rem; text-align: center; font-size: 1.35rem; }
.wr-how-journey__closing::before { position: absolute; top: 0; left: 50%; color: var(--wr-color-gold); background: transparent; content: "✦"; font: 1rem/1 var(--wr-font-display); transform: translateX(-50%); }
@media (max-width: 52rem) {
    .wr-how { padding-top: 1.75rem; }
    .wr-how-steps::before { left: 6.25rem; }
    .wr-how-step { grid-template-columns: 4.5rem 2rem 1fr; gap: 0.75rem; padding-inline: 1.25rem; }
    .wr-how-step__number { width: 3.5rem; font-size: 2.1rem; }
    .wr-how-step__marker { width: 2rem; font-size: 1.65rem; }
    .wr-how-step__marker img { width: 3rem; height: 3rem; }
}
@media (max-width: 36rem) {
    .wr-how { padding-top: 1.25rem; }
    .wr-how__eyebrow { font-size: 1.25rem; }
    .wr-how__heading h1 { font-size: 3rem; }
    .wr-how__intro { font-size: 0.95rem; }
    .wr-how-video { padding: 1.25rem; }
    .wr-how-steps::before { display: none; }
    .wr-how-step { grid-template-columns: 3.25rem 1fr; gap: 0.75rem; padding: 1rem; }
    .wr-how-step__number { width: 3rem; font-size: 1.8rem; }
    .wr-how-step__marker { display: none; }
    .wr-how-step__copy h2 { font-size: 1.35rem; }
}