/* Product page: "Paso 3 de 12 de la ruta…" (Hipertexto_Seo, product/routes.phtml). Sizes in px. */
.hpt-product-routes {
    display: grid;
    gap: 10px;
    margin: 18px 0 8px;
}

.hpt-product-route {
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    background: linear-gradient(120deg, #fff8e1, #fff 70%);
    border: 1px solid #f0dc9a;
    border-left: 4px solid #d5a400;
    color: #1f2933;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s ease;
}

.hpt-product-route:hover,
.hpt-product-route:focus-visible {
    color: #1f2933;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(122, 93, 0, .14);
}

.hpt-product-route__eyebrow {
    color: #a5351d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hpt-product-route__name {
    color: #022d53;
    font-size: 16px;
    font-weight: 700;
}