/* ==========================================================================
   CMS Chema — Tema PROFESIONAL
   Se carga ENCIMA de site.css, solo cuando el tema profesional está activo.
   Regla de oro: aquí no se modifica nada del tema clásico; solo se añade.
   Medidas en rem con base 10px; paleta y fuente heredadas de site.css.
   ========================================================================== */

/* --- Bloques: el ritmo vertical de toda la portada ------------------------ */
.pro-seccion { padding: 6.4rem 0; background: var(--blanco); }
.pro-seccion--claro { background: var(--gris-50); }
.pro-seccion--oscuro { background: var(--gris-900); color: var(--blanco); }

.pro-seccion__cabecera { text-align: center; max-width: 68rem; margin: 0 auto 4rem; }
.pro-seccion__titulo {
    font-size: 3.2rem; line-height: 1.2; color: var(--gris-900); font-weight: 700;
    letter-spacing: -0.03rem;
}
.pro-seccion__titulo--claro { color: var(--blanco); }
.pro-seccion__titulo::after {
    content: ""; display: block; width: 6rem; height: 0.4rem; margin: 1.6rem auto 0;
    background: var(--primario); border-radius: 0.2rem;
}
.pro-seccion__bajada { font-size: 1.7rem; color: var(--gris-500); margin-top: 1.4rem; line-height: 1.6; }
.pro-seccion__pie { text-align: center; margin-top: 4rem; }

/* --- Botón del tema ------------------------------------------------------- */
.boton-pro {
    display: inline-block; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05rem;
    text-transform: uppercase; color: var(--blanco); background: var(--primario);
    border: 0.2rem solid var(--primario); border-radius: 3rem; padding: 1.3rem 3.2rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.boton-pro:hover { background: var(--primario-mas-oscuro); border-color: var(--primario-mas-oscuro); transform: translateY(-0.2rem); }
.boton-pro--claro { background: transparent; color: var(--blanco); }
.boton-pro--claro:hover { background: var(--primario); border-color: var(--primario); }

/* --- Accesos por área ----------------------------------------------------- */
.accesos-pro__lista {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 2.4rem;
}
.acceso-pro {
    position: relative; display: block; background: var(--blanco);
    border: 0.1rem solid var(--gris-200); border-radius: 1rem; padding: 3.2rem 2.4rem 2.8rem;
    text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.acceso-pro:hover {
    border-color: var(--primario); transform: translateY(-0.4rem);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.1);
}
.acceso-pro__icono {
    display: flex; align-items: center; justify-content: center;
    width: 9rem; height: 9rem; margin: 0 auto 1.8rem; border-radius: 50%;
    background: var(--primario); border: 0.3rem solid #ffd9bd;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.acceso-pro:hover .acceso-pro__icono {
    background: var(--primario-mas-oscuro); border-color: var(--primario); transform: scale(1.05);
}
.acceso-pro__icono img { width: 5rem; height: 5rem; object-fit: contain; }
.acceso-pro__nombre {
    display: block; font-size: 1.9rem; font-weight: 700; color: var(--gris-900);
    text-transform: uppercase; letter-spacing: 0.05rem;
}
.acceso-pro:hover .acceso-pro__nombre { color: var(--primario); }
.acceso-pro__texto { display: block; font-size: 1.45rem; color: var(--gris-500); margin-top: 0.8rem; line-height: 1.5; }
.acceso-pro__flecha {
    position: absolute; right: 1.8rem; bottom: 1.2rem;
    font-size: 2.6rem; line-height: 1; color: var(--gris-300);
}
.acceso-pro:hover .acceso-pro__flecha { color: var(--primario); }

/* --- Tarjetas de producto -------------------------------------------------- */
.productos-pro__rejilla {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 2.4rem;
}
.productos-pro__rejilla--cuatro { grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }

.tarjeta-producto {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 1rem;
    overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tarjeta-producto:hover {
    border-color: var(--primario); transform: translateY(-0.4rem);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.1);
}
.tarjeta-producto__enlace { display: flex; flex-direction: column; height: 100%; padding: 2rem; }
.tarjeta-producto__imagen {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 18rem; margin-bottom: 1.6rem;
}
.tarjeta-producto__imagen img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tarjeta-producto__nuevo {
    position: absolute; top: 0; right: 0;
    font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08rem;
    color: var(--blanco); background: var(--primario); border-radius: 0.3rem; padding: 0.3rem 0.9rem;
}
.tarjeta-producto__nombre {
    font-size: 1.6rem; font-weight: 700; color: var(--gris-900); line-height: 1.3;
    text-transform: uppercase;
}
.tarjeta-producto:hover .tarjeta-producto__nombre { color: var(--primario); }
.tarjeta-producto__lema { font-size: 1.4rem; color: var(--gris-500); margin-top: 0.6rem; line-height: 1.5; }

/* --- Segmentos -------------------------------------------------------------- */
.segmentos-pro__lista {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2rem;
}
.segmento-pro {
    display: flex; flex-direction: column; gap: 0.8rem;
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 1rem;
    border-top: 0.5rem solid var(--primario); padding: 2.8rem 2.2rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.segmento-pro:hover { transform: translateY(-0.4rem); box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.1); }
.segmento-pro--ferreteria { border-top-color: #ff710a; }
.segmento-pro--construccion { border-top-color: #e35f00; }
.segmento-pro--industria-y-mineria { border-top-color: #993300; }
.segmento-pro--maestros { border-top-color: #f7ac6d; }
.segmento-pro--hogar { border-top-color: #2b2b2b; }
.segmento-pro__nombre { font-size: 1.8rem; font-weight: 700; color: var(--gris-900); }
.segmento-pro:hover .segmento-pro__nombre { color: var(--primario); }
.segmento-pro__texto { font-size: 1.4rem; color: var(--gris-500); line-height: 1.6; flex: 1 1 auto; }
.segmento-pro__total {
    font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08rem;
    color: var(--primario);
}

/* --- Cobertura nacional ------------------------------------------------------ */
.cobertura-pro__inner {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 4.8rem; align-items: center;
}
.cobertura-pro__bajada { font-size: 1.6rem; line-height: 1.7; color: #e6e6e6; margin-top: 1.6rem; max-width: 52rem; }
.pro-seccion--oscuro .pro-seccion__cabecera { text-align: left; margin-left: 0; }
.cobertura-pro__cifras { display: flex; gap: 4rem; margin: 3.2rem 0; flex-wrap: wrap; }
.cobertura-pro__cifra dt {
    font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.08rem; color: #b5b5b5;
}
.cobertura-pro__cifra dd {
    font-size: 4rem; font-weight: 700; line-height: 1.1; color: var(--primario); margin-top: 0.4rem;
}
.cobertura-pro__cadenas { text-align: center; }
.cobertura-pro__rotulo {
    font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.1rem;
    color: #b5b5b5; margin-bottom: 1.6rem;
}
.cobertura-pro__logos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.6rem; align-items: center;
}
.cobertura-pro__logos img {
    max-width: 100%; max-height: 4.4rem; object-fit: contain;
    background: var(--blanco); border-radius: 0.6rem; padding: 0.8rem 1.2rem;
}

/* --- Noticias ----------------------------------------------------------------- */
.noticias-pro__lista {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2.4rem;
}
.tarjeta-noticia {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 1rem;
    overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tarjeta-noticia:hover {
    border-color: var(--primario); transform: translateY(-0.4rem);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.1);
}
.tarjeta-noticia__enlace { display: flex; flex-direction: column; height: 100%; }
.tarjeta-noticia__imagen { display: block; height: 20rem; overflow: hidden; background: var(--gris-100); }
.tarjeta-noticia__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tarjeta-noticia:hover .tarjeta-noticia__imagen img { transform: scale(1.05); }
.tarjeta-noticia__cuerpo { display: block; padding: 2.2rem; }
.tarjeta-noticia__fecha {
    display: block; font-size: 1.25rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08rem; color: var(--primario); margin-bottom: 0.8rem;
}
.tarjeta-noticia__titulo { font-size: 1.8rem; font-weight: 700; color: var(--gris-900); line-height: 1.35; }
.tarjeta-noticia:hover .tarjeta-noticia__titulo { color: var(--primario); }
.tarjeta-noticia__resumen { font-size: 1.45rem; color: var(--gris-500); margin-top: 0.8rem; line-height: 1.6; }

/* --- Marcas -------------------------------------------------------------------- */
.marcas-pro__lista {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 2rem;
}
.marca-pro {
    display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center;
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 1rem;
    padding: 2.8rem 2rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.marca-pro:hover {
    border-color: var(--primario); transform: translateY(-0.4rem);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.1);
}
.marca-pro__logo { display: flex; align-items: center; justify-content: center; height: 7rem; }
.marca-pro__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marca-pro__texto { font-size: 1.35rem; color: var(--gris-500); line-height: 1.6; }

/* --- Pie de página profesional --------------------------------------------------- */
.pie-pro { background: var(--gris-900); color: var(--gris-300); margin-top: 0; }
.pie-pro__columnas {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 4rem;
    padding: 5.6rem 1.6rem 4.8rem;
}
.pie-pro__logo { width: 15rem; height: auto; }
.pie-pro__lema { font-size: 1.45rem; line-height: 1.7; margin-top: 1.6rem; }
.pie-pro__redes { display: flex; gap: 1.6rem; margin-top: 2rem; list-style: none; }
.pie-pro__redes a { font-size: 1.35rem; color: var(--gris-300); border-bottom: 0.1rem solid transparent; }
.pie-pro__redes a:hover { color: var(--primario); border-bottom-color: var(--primario); }

.pie-pro__titulo {
    font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1rem;
    color: var(--blanco); margin-bottom: 1.8rem;
}
.pie-pro__enlaces, .pie-pro__contacto { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.pie-pro__enlaces a { font-size: 1.45rem; color: var(--gris-300); }
.pie-pro__enlaces a:hover { color: var(--primario); }
.pie-pro__contacto li { font-size: 1.45rem; }
.pie-pro__contacto a { color: var(--blanco); font-weight: 700; }
.pie-pro__contacto a:hover { color: var(--primario); }
.pie-pro__rotulo {
    display: block; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08rem;
    color: var(--gris-500); margin-bottom: 0.2rem;
}
.pie-pro__libro {
    display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 2.4rem;
    font-size: 1.35rem; font-weight: 700; color: var(--blanco);
    border: 0.1rem solid var(--gris-500); border-radius: 0.6rem; padding: 1rem 1.6rem;
}
.pie-pro__libro:hover { border-color: var(--primario); color: var(--primario); }
.pie-pro__libro-icono { flex: 0 0 auto; }

.pie-pro__legal { background: #1f1f1f; padding: 1.8rem 0; }
.pie-pro__legal-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
    font-size: 1.3rem;
}
.pie-pro__legal-enlaces { display: flex; gap: 2.4rem; list-style: none; flex-wrap: wrap; }
.pie-pro__legal-enlaces a { color: var(--gris-300); }
.pie-pro__legal-enlaces a:hover { color: var(--primario); }

/* --- Adaptación a pantallas pequeñas ----------------------------------------------- */
@media (max-width: 64rem) {
    .bloque { padding: 4.8rem 0; }
    .pro-seccion__titulo { font-size: 2.6rem; }
    .pro-seccion__bajada { font-size: 1.55rem; }
    .cobertura-pro__inner { grid-template-columns: 1fr; gap: 3.2rem; }
    .cobertura-pro__cifras { gap: 2.4rem; }
    .cobertura-pro__cifra dd { font-size: 3.2rem; }
    .pie-pro__columnas { grid-template-columns: 1fr 1fr; gap: 3.2rem; padding: 4rem 1.6rem 3.2rem; }
}

@media (max-width: 40rem) {
    .bloque { padding: 4rem 0; }
    .pro-seccion__titulo { font-size: 2.2rem; }
    .productos-pro__rejilla, .productos-pro__rejilla--cuatro { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.6rem; }
    .tarjeta-producto__enlace { padding: 1.4rem; }
    .tarjeta-producto__imagen { height: 12rem; }
    .tarjeta-producto__nombre { font-size: 1.4rem; }
    .pie-pro__columnas { grid-template-columns: 1fr; }
    .pie-pro__legal-inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   PÁGINAS INTERIORES — acabado del tema profesional
   Mismo lenguaje que la portada: tarjetas con borde suave, levantar al pasar
   el ratón, naranja solo donde aporta, y aire entre bloques.
   Todo son añadidos sobre site.css: en tema clásico nada de esto se carga.
   ========================================================================== */

/* --- Catálogo: pestañas de área ------------------------------------------- */
.area-tabs { gap: 1.2rem; margin: 3.2rem 0 2.4rem; }
.area-tab {
    border-radius: 3rem; font-weight: 700; letter-spacing: 0.03rem;
    border: 0.2rem solid var(--primario); padding: 1.2rem 2rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.area-tab:hover { transform: translateY(-0.2rem); }

/* --- Catálogo: barra de filtros -------------------------------------------- */
.filtros {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 0.8rem;
    padding: 1.4rem 2rem; box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.04);
}
.filtros__conteo { font-weight: 700; color: var(--gris-700); }
.filtros__orden select {
    border-radius: 0.6rem; border: 0.1rem solid var(--gris-300); padding: 0.7rem 1.2rem;
    font-family: inherit; font-size: 1.45rem; background: var(--blanco);
}

/* --- Catálogo: barra lateral de categorías --------------------------------- */
.sidebar-cat {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 0.8rem;
    padding: 2rem 1.8rem; align-self: start;
}
.sidebar-cat__titulo {
    font-size: 1.7rem; letter-spacing: 0.05rem; padding-bottom: 1rem;
    border-bottom: 0.2rem solid var(--primario);
}
.sidebar-cat a { border-radius: 0.4rem; transition: background 0.15s ease, color 0.15s ease; }
.sidebar-cat a:hover { background: var(--gris-50); }

/* --- Catálogo: filas de producto como tarjetas ------------------------------ */
.lista-prod { display: flex; flex-direction: column; gap: 1.6rem; }
.prod-row {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 0.8rem;
    padding: 1.8rem 2rem; border-bottom: 0.1rem solid var(--gris-200);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.prod-row:hover {
    border-color: var(--primario); transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08);
}
.prod-row__img {
    background: var(--gris-50); border-radius: 0.6rem; padding: 0.8rem;
}
.prod-row__nombre { letter-spacing: 0.02rem; }
.prod-row__acciones a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: 0.1rem solid var(--gris-200); border-radius: 2rem; padding: 0.5rem 1.2rem;
    font-size: 1.2rem; transition: border-color 0.2s ease, background 0.2s ease;
}
.prod-row__acciones a:hover { border-color: var(--primario); background: #fff6ef; }

/* --- Paginación ------------------------------------------------------------- */
.paginacion a, .paginacion span {
    border-radius: 0.6rem; min-width: 4rem; padding: 0.9rem 1.2rem;
    border: 0.1rem solid var(--gris-200); background: var(--blanco);
}
.paginacion a:hover { border-color: var(--primario); color: var(--primario); }
.paginacion .activo { background: var(--primario); border-color: var(--primario); color: var(--blanco); }

/* --- Ficha de producto -------------------------------------------------------- */
.ficha__caja {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 1rem;
    padding: 3.2rem; box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.05);
}
.ficha__media { background: var(--gris-50); border-radius: 0.8rem; padding: 2.4rem; }
.ficha__nombre { letter-spacing: -0.02rem; }
.ficha__sub { color: var(--gris-500); }
.ficha__desc { line-height: 1.75; color: var(--gris-700); }
.ficha__pdf {
    border-radius: 0.6rem; border: 0.1rem solid var(--gris-200); padding: 1rem 1.4rem;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.ficha__pdf:hover { border-color: var(--primario); background: #fff6ef; transform: translateY(-0.2rem); }
.ficha__volver {
    display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700;
    color: var(--gris-500); margin-bottom: 1.6rem;
}
.ficha__volver:hover { color: var(--primario); }
.ficha__donde, .ficha__ferreterias {
    background: var(--gris-50); border-radius: 0.8rem; padding: 2rem;
}
.relacionado {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 0.8rem;
    padding: 1.4rem; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.relacionado:hover {
    border-color: var(--primario); transform: translateY(-0.3rem);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08);
}
.ficha__relacionados-titulo, .noticias__sub {
    font-size: 2.2rem; color: var(--gris-900); padding-bottom: 0.8rem; margin-bottom: 2rem;
    border-bottom: 0.2rem solid var(--primario); display: inline-block;
}

/* --- Noticias (listado y detalle) ------------------------------------------------ */
.noticia-fila {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 0.8rem;
    padding: 1.8rem; margin-bottom: 1.6rem;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.noticia-fila:hover {
    border-color: var(--primario); transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08);
}
.noticia-destacada { border-radius: 0.8rem; overflow: hidden; }
.noticia-destacada__titulo { font-size: 1.8rem; line-height: 1.35; }
.noticia-detalle__img { border-radius: 0.8rem; margin: 2.4rem 0; }

/* --- Páginas institucionales ------------------------------------------------------ */
.institucional { padding: 4.8rem 0 6.4rem; }
.institucional__titulo {
    font-size: 3.2rem; letter-spacing: -0.03rem; color: var(--gris-900); margin-bottom: 2.4rem;
}
.institucional__titulo::after {
    content: ""; display: block; width: 6rem; height: 0.4rem; margin-top: 1.4rem;
    background: var(--primario); border-radius: 0.2rem;
}
.institucional__cuerpo-texto { font-size: 1.6rem; line-height: 1.8; color: var(--gris-700); }
.institucional__meta { color: var(--gris-500); font-size: 1.4rem; }

/* El índice lateral y las fichas de las páginas de empresa, con el mismo aire. */
.institucional__cuerpo .bloque {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 0.8rem;
    padding: 2.8rem; margin-bottom: 2rem;
}

/* --- Formularios públicos (contacto, empleo, reclamaciones) ------------------------- */
.campo input, .campo select, .campo textarea {
    border-radius: 0.6rem; border: 0.1rem solid var(--gris-300); padding: 1.1rem 1.4rem;
    font-family: inherit; font-size: 1.5rem; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--primario); box-shadow: 0 0 0 0.3rem rgba(255, 113, 10, 0.15); outline: none;
}
.boton-chema {
    border-radius: 3rem; padding: 1.3rem 3.2rem; letter-spacing: 0.05rem;
    transition: background 0.2s ease, transform 0.2s ease;
}
.boton-chema:hover { transform: translateY(-0.2rem); }
.libro__bloque {
    background: var(--blanco); border: 0.1rem solid var(--gris-200); border-radius: 0.8rem;
    padding: 2.4rem; margin-bottom: 2rem;
}

@media (max-width: 64rem) {
    .institucional { padding: 3.2rem 0 4.8rem; }
    .institucional__titulo { font-size: 2.6rem; }
    .ficha__caja { padding: 2rem; }
    .ficha__media { padding: 1.6rem; }
}

/* --- Cabecera de las páginas interiores ------------------------------------ */
.pro-encabezado {
    background: var(--gris-50); border-bottom: 0.1rem solid var(--gris-200);
    padding: 3.2rem 0 2.8rem;
}
.pro-encabezado__titulo {
    font-size: 3.2rem; font-weight: 700; color: var(--gris-900); line-height: 1.2;
    letter-spacing: -0.03rem; margin-top: 1rem;
}
.pro-encabezado__bajada { font-size: 1.6rem; color: var(--gris-500); margin-top: 0.8rem; max-width: 70rem; line-height: 1.6; }

.pro-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; list-style: none; }
.pro-migas__paso { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; color: var(--gris-500); }
.pro-migas__paso + .pro-migas__paso::before { content: "›"; color: var(--gris-300); }
.pro-migas a { color: var(--gris-500); }
.pro-migas a:hover { color: var(--primario); }
.pro-migas [aria-current="page"] { color: var(--gris-900); font-weight: 700; }

@media (max-width: 64rem) {
    .pro-encabezado { padding: 2.4rem 0 2rem; }
    .pro-encabezado__titulo { font-size: 2.4rem; }
}

/* --- Tarjetas de producto relacionado: encuadre visible ---------------------
   El borde gris claro sobre fondo blanco casi no se distinguía y la foto
   quedaba suelta dentro de la tarjeta. Ahora la imagen tiene su propia caja
   con fondo, igual que en la portada, y el marco de la tarjeta se ve. */
.relacionado {
    border: 0.15rem solid var(--gris-300);
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.07);
    padding: 1.6rem 1.2rem;
    justify-content: flex-start;
}
.relacionado__img {
    /* Las fotos del catálogo llevan su propio fondo blanco: si la caja fuera
       gris se vería un rectángulo blanco dentro del marco, compitiendo con él.
       El encuadre lo da el borde de la tarjeta, y nada más. */
    width: 100%;
    background: var(--blanco);
    border-radius: 0.6rem;
    margin-bottom: 0.4rem;
}
/* Sin max-width, una foto apaisada se salía de la tarjeta. */
.relacionado__img img { max-width: 100%; max-height: 14rem; height: auto; }
.relacionado__nombre { line-height: 1.3; }

/* El carril de relacionados lleva overflow-x: auto y, por regla del CSS, eso
   obliga a recortar también en vertical. Al levantarse la tarjeta sobre el
   ratón, su borde superior quedaba fuera del recorte y desaparecía. Con este
   respiro caben el desplazamiento y la sombra. */
.relacionados__pista { padding: 1rem 0.4rem; }