/* ============================================================
   Sitioideal — Diseño «Forja» (herrerías, soldadura y estructuras metálicas) · paso 7.z.53a
   Va encima de sitio.css. Rudo y fuerte, como taller de herrería: fondo de acero oscuro con su veta cepillada,
   remaches en las esquinas, el color del acento encendido como brasa (aclarado para leerse en lo oscuro), títulos en
   letra condensada (Big Shoulders Display) y texto en Public Sans.
   La foto de portada va en un marco de metal con sus remaches y una escuadra soldada, con chispas de soldadura que saltan
   de la esquina; al pie de la portada, un barandal forjado. Cada título lleva abajo su cordón de soldadura. Los trabajos son
   placas de acero con su número troquelado y el precio grabado; la galería, cuadros con marco de metal.
   El pie lleva arriba el mismo barandal.
   HTML propio: app/vistas/sitio/disenos/forja/
   ============================================================ */

.diseno-forja {
    --fj-titulo: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
    --fj-letra: "Public Sans", "Archivo", system-ui, sans-serif;
    --fj-negro: #16181B;
    --fj-acero: #1E2125;
    --fj-placa: #2A2E33;
    --fj-placa-2: #343940;
    --fj-hierro: #3A4046;
    --fj-blanco: #EEF0F2;
    --fj-gris: rgba(238, 240, 242, .74);
    --fj-brasa: color-mix(in srgb, var(--c-acento) 70%, #FFFFFF);   /* el acento encendido, para leerse en lo oscuro */
    --fj-tinta: #16181B;                                              /* texto sobre la brasa */
    --fj-linea: rgba(238, 240, 242, .1);
    --fj-linea-fuerte: rgba(238, 240, 242, .22);
    /* El metal del marco: acero pulido con sus reflejos */
    --fj-metal: linear-gradient(135deg, #7E878E 0%, #C9CFD3 24%, #6E777E 48%, #B4BBC0 72%, #5A6269 100%);
    /* La veta cepillada del acero */
    --fj-veta: repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
    --fj-sombra: 0 26px 44px -28px rgba(0, 0, 0, .9);
    /* El barandal forjado: barrotes con su punta de lanza, dos travesaños y un anillo entre barrote y barrote */
    --fj-barandal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Cpath d='M20 0l5 11h-3v89h-4V11h-3z'/%3E%3Crect y='22' width='40' height='4'/%3E%3Crect y='90' width='40' height='6'/%3E%3Ccircle cx='0' cy='58' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3Ccircle cx='40' cy='58' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");

    /* Superficies (sitio.css) */
    --s-fondo: var(--fj-negro);
    --s-alterna: var(--fj-acero);
    --s-tarjeta: var(--fj-placa);
    --s-tarjeta-alterna: var(--fj-placa);
    --s-encabezado: var(--fj-negro);
    --s-claro: rgba(255, 255, 255, .07);
    --s-texto: var(--fj-blanco);
    --s-titulo: var(--fj-blanco);
    --s-linea: var(--fj-linea);
    --s-linea-fuerte: var(--fj-linea-fuerte);
    --s-tinte: var(--fj-negro);
    --barra-principal: #1FA855;

    background: var(--fj-negro);
    color: var(--fj-blanco);
    font-family: var(--fj-letra);
    font-size: 1.04rem;
}

/* Donde el navegador puede, la brasa se aclara solo lo necesario */
@supports (color: oklch(from red l c h)) {
    .diseno-forja { --fj-brasa: oklch(from var(--c-acento) max(l, .8) c h); }
}

/* Títulos condensados, en mayúsculas */
.diseno-forja h1,
.diseno-forja h2,
.diseno-forja h3,
.diseno-forja h4,
.diseno-forja .logo__nombre,
.diseno-forja .especial__titulo,
.diseno-forja .equipo__titulo,
.diseno-forja .persona__nombre,
.diseno-forja .promocion__titulo,
.diseno-forja .servicio__nombre,
.diseno-forja .sucursal__nombre,
.diseno-forja .redes__titulo,
.diseno-forja .horario__tabla th {
    font-family: var(--fj-titulo);
    font-stretch: normal;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* ---------- Encabezado: acero con su veta ---------- */
.diseno-forja .encabezado {
    border-bottom: 2px solid var(--fj-hierro);
    background: var(--fj-veta), color-mix(in srgb, var(--fj-negro) 94%, transparent);
    backdrop-filter: blur(10px);
}
.diseno-forja .logo:has(.logo__imagen),
.diseno-forja .logo:has(svg) { padding: 5px 10px; border-radius: 3px; background: var(--fj-blanco); }
.diseno-forja .logo__nombre { color: var(--fj-blanco); font-size: 1.6rem; }
.diseno-forja .menu a { color: var(--fj-gris); font-family: var(--fj-titulo); font-size: 1.08rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.diseno-forja .menu a:hover { color: var(--fj-brasa); }

/* ---------- Botones: la brasa, a escuadra ---------- */
.diseno-forja .boton {
    border-radius: 3px;
    font-family: var(--fj-titulo);
    font-size: 1.15rem;
    font-stretch: normal;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.diseno-forja .boton--principal { border: 0; background: var(--fj-brasa); color: var(--fj-tinta); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 12px 26px -12px color-mix(in srgb, var(--fj-brasa) 70%, transparent); }
.diseno-forja .boton--principal:hover { filter: brightness(1.07); }
.diseno-forja .boton--secundario { border: 2px solid var(--fj-linea-fuerte); background: rgba(255, 255, 255, .04); color: var(--fj-blanco); }
.diseno-forja .boton--secundario:hover { border-color: var(--fj-brasa); color: var(--fj-brasa); }

/* El remache: cabeza redonda de metal con su brillo */
.fj-remache {
    position: absolute;
    z-index: 3;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #F4F6F7 0 14%, #A9B1B7 32%, #535B62 76%, #2A2F34 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
    pointer-events: none;
}
.fj-remache--1 { top: 10px; left: 10px; }
.fj-remache--2 { top: 10px; right: 10px; }
.fj-remache--3 { bottom: 10px; left: 10px; }
.fj-remache--4 { bottom: 10px; right: 10px; }

/* ---------- Portada: el marco de metal, las chispas y el barandal ---------- */
.fj-portada {
    position: relative;
    padding-top: clamp(40px, 6vw, 84px);
    overflow: hidden;
    background:
        radial-gradient(50% 60% at 78% 40%, color-mix(in srgb, var(--c-acento) 18%, transparent), transparent 70%),
        var(--fj-veta),
        linear-gradient(180deg, var(--fj-acero), var(--fj-negro));
}
.fj-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 44px;
    padding-bottom: 130px;   /* lugar para el barandal */
}
@media (min-width: 900px) {
    .fj-portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 60px; }
}

/* La placa de acero con el giro troquelado */
.fj-placa-giro {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    max-width: 100%;
    margin: 0 0 22px;
    padding: 9px 34px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    background: var(--fj-veta), linear-gradient(180deg, #3B4148, #2B3035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 20px -12px rgba(0, 0, 0, .8);
    color: var(--fj-blanco);
    font-family: var(--fj-titulo);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .15);   /* troquelado */
    text-transform: uppercase;
    box-sizing: border-box;
}
.fj-placa-giro > .fj-remache { top: 50%; width: 10px; height: 10px; margin-top: -5px; }
.fj-placa-giro > .fj-remache:first-child { left: 12px; }
.fj-placa-giro > .fj-remache:last-child { right: 12px; }
.fj-placa-giro__desde { color: var(--fj-brasa); }
.fj-placa-giro__desde::before { content: "·"; margin-right: 14px; color: var(--fj-gris); }

.fj-portada__nombre {
    margin: 0 0 18px;
    color: var(--fj-blanco);
    font-size: clamp(3.2rem, 1.6rem + 5vw, 6.2rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
}
.fj-portada__nombre--medio { font-size: clamp(2.8rem, 1.4rem + 4.2vw, 5.2rem); }
.fj-portada__nombre--largo { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.3rem); }
.fj-portada__eslogan { max-width: 40ch; margin: 0 0 28px; color: var(--fj-gris); font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.55; }
.fj-portada__botones { margin-bottom: 22px; }
.diseno-forja .fj-portada__estado { border: 1px solid var(--fj-linea-fuerte); border-radius: 3px; background: rgba(0, 0, 0, .3); color: var(--fj-blanco); box-shadow: none; }
.diseno-forja .estado-ahora--abierto .estado-ahora__punto { background: #3DDC6E; }

.fj-portada__visual { position: relative; justify-self: center; width: min(100%, 520px); }
.fj-marco {
    position: relative;
    padding: 18px;
    border-radius: 4px;
    background: var(--fj-metal);
    box-shadow: var(--fj-sombra), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.fj-marco picture { display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.fj-marco picture img { width: 100%; height: 100%; object-fit: cover; }
/* La nota de IA arriba de la foto, lejos de las chispas */
.fj-marco > .marca-ia--foto { top: 30px; bottom: auto; }
.fj-marco--inicial::before {
    content: "";
    display: block;
    aspect-ratio: 5 / 4;
    border-radius: 2px;
    background: var(--fj-veta), linear-gradient(160deg, #3B4148, #24282C);
}
.fj-marco__inicial {
    position: absolute;
    inset: 18px;
    display: grid;
    place-items: center;
    color: var(--fj-brasa);
    font-family: var(--fj-titulo);
    font-size: clamp(6rem, 4rem + 6vw, 10rem);
    font-weight: 900;
    text-shadow: 0 -2px 0 rgba(0, 0, 0, .6), 0 2px 0 rgba(255, 255, 255, .12);
}
/* La escuadra de acero (pintada del color del negocio) en la esquina de arriba, con sus marcas de medida */
.fj-escuadra {
    position: absolute;
    top: -16px;
    left: -16px;
    z-index: 2;
    width: 104px;
    height: 104px;
    border-top: 12px solid var(--fj-brasa);
    border-left: 12px solid var(--fj-brasa);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
    pointer-events: none;
}
.fj-escuadra::before,
.fj-escuadra::after {   /* las marcas de medida de cada brazo */
    content: "";
    position: absolute;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .5) 0 1px, transparent 1px 8px);
}
.fj-escuadra::before { top: -12px; left: 4px; width: 88px; height: 5px; }
.fj-escuadra::after { top: 4px; left: -12px; width: 5px; height: 88px; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .5) 0 1px, transparent 1px 8px); }

/* Las chispas que saltan de la esquina de abajo */
.fj-chispas { position: absolute; right: 8%; bottom: 6%; z-index: 4; width: 0; height: 0; pointer-events: none; }
.fj-chispas i {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FFE3A3;
    box-shadow: 0 0 6px 2px rgba(255, 170, 60, .85), 0 0 14px 4px rgba(255, 120, 30, .35);
    opacity: 0;
    animation: fj-chispa 1.6s ease-out infinite;
}
.fj-chispas i:nth-child(1) { --x: 70px; --y: -60px; animation-delay: 0s; }
.fj-chispas i:nth-child(2) { --x: 96px; --y: -18px; animation-delay: .2s; }
.fj-chispas i:nth-child(3) { --x: 40px; --y: -92px; animation-delay: .45s; }
.fj-chispas i:nth-child(4) { --x: 110px; --y: 30px; animation-delay: .7s; }
.fj-chispas i:nth-child(5) { --x: 58px; --y: 44px; animation-delay: .95s; }
.fj-chispas i:nth-child(6) { --x: -20px; --y: -70px; animation-delay: 1.1s; }
.fj-chispas i:nth-child(7) { --x: 84px; --y: -100px; animation-delay: 1.3s; }
.fj-chispas i:nth-child(8) { --x: 20px; --y: 70px; animation-delay: .55s; }
@keyframes fj-chispa {
    0%   { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); }
}
@media (prefers-reduced-motion: reduce) {
    .fj-chispas i { animation: none; opacity: .9; transform: translate(calc(var(--x) * .5), calc(var(--y) * .5)); }
}

/* El barandal forjado al pie de la portada */
.fj-barandal {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 96px;
    background: linear-gradient(180deg, #4A5158, #2F3439);
    -webkit-mask: var(--fj-barandal) 0 100% / 40px 96px repeat-x;
    mask: var(--fj-barandal) 0 100% / 40px 96px repeat-x;
    pointer-events: none;
}

@media (max-width: 899.98px) {
    .fj-portada__visual { width: min(100%, 460px); }
}
@media (max-width: 599.98px) {
    .fj-portada__rejilla { padding-bottom: 96px; }
    .fj-barandal { height: 72px; -webkit-mask-size: 30px 72px; mask-size: 30px 72px; }
    .fj-marco { padding: 13px; }
    .fj-chispas { right: 6%; }
}

/* ---------- Títulos de sección: con su cordón de soldadura ---------- */
.diseno-forja .seccion h2 {
    color: var(--fj-blanco);
    font-size: clamp(2.3rem, 1.7rem + 2vw, 3.4rem);
    font-weight: 900;
    line-height: .98;
}
.diseno-forja .seccion h2::after {
    content: "";
    display: block;
    width: 132px;
    height: 10px;
    margin-top: 14px;
    background: radial-gradient(circle at 50% 50%, var(--fj-brasa) 0 3px, color-mix(in srgb, var(--fj-brasa) 45%, transparent) 4px, transparent 5px) 0 0 / 8px 10px repeat-x;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--fj-brasa) 60%, transparent));
}
.fj-cabeza { margin-bottom: 28px; }
.fj-cabeza h2 { margin: 0 !important; }
.fj-antetitulo {
    margin: 0 0 6px;
    color: var(--fj-brasa);
    font-family: var(--fj-titulo);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---------- Trabajos: placas de acero ---------- */
.diseno-forja .catalogo__indice a {
    border: 2px solid var(--fj-linea-fuerte);
    border-radius: 3px;
    background: rgba(255, 255, 255, .04);
    color: var(--fj-blanco);
    font-family: var(--fj-titulo);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.diseno-forja .catalogo__indice a:hover { border-color: var(--fj-brasa); color: var(--fj-brasa); }

.fj-grupo + .fj-grupo { margin-top: 56px; }
.fj-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 6px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--fj-hierro);
    color: var(--fj-blanco);
    font-size: clamp(1.7rem, 1.4rem + .9vw, 2.2rem);
    line-height: 1;
}
.fj-grupo__nombre .icono {
    flex: none;
    width: 46px;
    height: 46px;
    padding: 9px;
    border-radius: 3px;
    background: var(--fj-placa-2);
    color: var(--fj-brasa);
    stroke-width: 1.8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    box-sizing: border-box;
}
.fj-grupo__descripcion { max-width: 64ch; margin: 8px 0 0; color: var(--fj-gris); }

.fj-placas {
    display: grid;
    gap: 26px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .fj-placas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .fj-placas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fj-placa {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    background: var(--fj-veta), linear-gradient(180deg, var(--fj-placa-2), var(--fj-placa));
    box-shadow: var(--fj-sombra), inset 0 1px 0 rgba(255, 255, 255, .08);
    color: var(--fj-blanco);
}
.fj-placa--destacada { border-color: color-mix(in srgb, var(--fj-brasa) 55%, transparent); box-shadow: var(--fj-sombra), 0 0 0 1px color-mix(in srgb, var(--fj-brasa) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }

.fj-placa__marco { position: relative; margin: 26px 26px 0; }
.fj-placa__foto {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 6px solid transparent;
    border-radius: 3px;
    background: var(--fj-metal) border-box;
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .8);
}
.fj-placa__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.fj-placa__foto > .marca-ia--foto { z-index: 2; }
/* Sin foto: el dibujo de su grupo sobre la lámina */
.fj-placa__foto--dibujo {
    display: grid;
    place-items: center;
    background: var(--fj-veta), linear-gradient(160deg, #3B4148, #262A2E) padding-box, var(--fj-metal) border-box;
    color: var(--fj-brasa);
}
.fj-placa__foto--dibujo .icono { width: 74px; height: 74px; stroke-width: 1.4; opacity: .9; }

/* El número troquelado y «El más pedido» */
.fj-placa__numero {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 4px 9px 3px;
    border-radius: 2px;
    background: rgba(22, 24, 27, .85);
    color: var(--fj-blanco);
    font-family: var(--fj-titulo);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.fj-placa__destacado {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 4px;
    border-radius: 2px;
    background: var(--fj-brasa);
    color: var(--fj-tinta);
    font-family: var(--fj-titulo);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.fj-placa__destacado .icono { width: 15px; height: 15px; stroke-width: 2.4; }

.fj-placa__cuerpo { flex: 1; padding: 18px 26px 0; }
.fj-placa__nombre { margin: 0 0 6px; color: var(--fj-blanco); font-size: 1.6rem; line-height: 1; overflow-wrap: anywhere; }
.fj-placa__descripcion { margin: 0; color: var(--fj-gris); font-size: .98rem; line-height: 1.55; }
.fj-placa__nota {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 5px 10px 5px 8px;
    border: 1px solid var(--fj-linea-fuerte);
    border-radius: 2px;
    color: var(--fj-blanco);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.3;
    box-sizing: border-box;
}
.fj-placa__nota .icono { flex: none; width: 17px; height: 17px; color: var(--fj-brasa); }
.diseno-forja .fj-placa .ficha-ver { margin-top: 10px; color: var(--fj-brasa); }

.fj-placa__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 26px 26px;
    padding-top: 14px;
    border-top: 2px dashed var(--fj-linea-fuerte);
}
.fj-placa__pie--sin-precio { justify-content: flex-start; }
.fj-precio { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1; }
.fj-precio small { color: var(--fj-gris); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.fj-precio strong {
    color: var(--fj-brasa);
    font-family: var(--fj-titulo);
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: .02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);   /* grabado */
}
.fj-cotizar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px 9px;
    border-radius: 3px;
    background: var(--fj-brasa);
    color: var(--fj-tinta);
    font-family: var(--fj-titulo);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.fj-cotizar .icono { width: 17px; height: 17px; }
.fj-cotizar:hover { filter: brightness(1.08); }

/* ---------- Galería: cuadros con marco de metal ---------- */
.fj-cuadros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 700px) {
    .fj-cuadros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .fj-cuadro--grande { grid-column: span 2; grid-row: span 2; }
    .fj-cuadro--ancha-pc { grid-column: span 2; }
    .fj-cuadro--franja-pc { grid-column: span 3; }
}
@media (max-width: 699.98px) {
    .fj-cuadro--grande,
    .fj-cuadro--ancha-cel { grid-column: span 2; }
}
.galeria__mas > .fj-cuadros { margin-top: 18px; }

.diseno-forja .fj-cuadro__enlace {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    overflow: visible;
    border-radius: 4px;
    background: var(--fj-metal);
    box-shadow: var(--fj-sombra), inset 0 0 0 1px rgba(255, 255, 255, .22);
    color: var(--fj-blanco);
    text-decoration: none;
    box-sizing: border-box;
}
.fj-cuadro__foto { position: relative; flex: 1; display: block; min-height: 0; overflow: hidden; border-radius: 2px; aspect-ratio: 1; }
.fj-cuadro--grande .fj-cuadro__foto,
.fj-cuadro--ancha-pc .fj-cuadro__foto,
.fj-cuadro--franja-pc .fj-cuadro__foto { aspect-ratio: auto; }
@media (min-width: 700px) {
    .fj-cuadro--ancha-pc .fj-cuadro__foto { aspect-ratio: 2 / 1; }
    .fj-cuadro--franja-pc .fj-cuadro__foto { aspect-ratio: 3 / 1; }
}
@media (max-width: 699.98px) {
    .fj-cuadro--grande .fj-cuadro__foto,
    .fj-cuadro--ancha-cel .fj-cuadro__foto { aspect-ratio: 2 / 1; }
}
.diseno-forja .fj-cuadro__foto img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: scale .4s ease; transform: none; }
.fj-cuadro__enlace:hover .fj-cuadro__foto img { scale: 1.04; }
.fj-cuadro__enlace > .fj-remache { width: 9px; height: 9px; }
.fj-cuadro__enlace > .fj-remache--1 { top: 2px; left: 2px; }
.fj-cuadro__enlace > .fj-remache--2 { top: 2px; right: 2px; }
.fj-cuadro__pie {
    margin-top: 10px;
    padding: 5px 10px 4px;
    border-radius: 2px;
    background: var(--fj-acero);
    color: var(--fj-blanco);
    font-family: var(--fj-titulo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
    .diseno-forja .fj-cuadro__foto img { transition: none; }
    .fj-cuadro__enlace:hover .fj-cuadro__foto img { scale: none; }
}
.diseno-forja .galeria__ver-mas,
.diseno-forja .boton-chico { border: 0; border-radius: 3px; background: rgba(238, 240, 242, .1); color: var(--fj-blanco); }
.diseno-forja .boton-chico--principal { background: var(--fj-brasa); color: var(--fj-tinta); }
.diseno-forja .boton-chico--principal:hover { background: var(--fj-brasa); filter: brightness(1.08); }

/* ---------- Lo demás: placas de acero ---------- */
.diseno-forja .testimonio,
.diseno-forja .promocion,
.diseno-forja .pregunta,
.diseno-forja .contacto__item,
.diseno-forja .sucursal,
.diseno-forja .especial__punto,
.diseno-forja .persona,
.diseno-forja .servicio,
.diseno-forja .destacado-tarjeta { border-color: rgba(255, 255, 255, .08); border-radius: 4px; background: var(--fj-veta), var(--fj-placa); box-shadow: var(--fj-sombra); }
.diseno-forja .promocion { border-top: 4px solid var(--fj-brasa); }
.diseno-forja .promocion__titulo { color: var(--fj-blanco); font-size: 1.6rem; }
.diseno-forja .promocion__foto { border-radius: 2px; }
.diseno-forja .promocion__hoy { border-radius: 2px; background: var(--fj-brasa); color: var(--fj-tinta); }
.diseno-forja .promocion__dias { background: rgba(255, 255, 255, .08); color: var(--fj-blanco); }
.diseno-forja .servicio__precio strong,
.diseno-forja .platillo__precio { color: var(--fj-brasa); }
.diseno-forja .testimonio > .icono { color: var(--fj-brasa); opacity: .35; }
.diseno-forja .testimonio__autor { border-top-color: var(--fj-linea); }
.diseno-forja .estrella { color: rgba(238, 240, 242, .22); }
.diseno-forja .estrella--llena { color: #F2B632; }
.diseno-forja .testimonio__iniciales,
.diseno-forja .contacto__icono,
.diseno-forja .especial__marca,
.diseno-forja .persona__foto--iniciales { border-radius: 3px; background: var(--fj-brasa); color: var(--fj-tinta); }
.diseno-forja .persona__foto { border-radius: 3px; }
.diseno-forja .pregunta__titulo:hover { color: var(--fj-brasa); }
.diseno-forja .pregunta__signo { border-radius: 3px; background: rgba(255, 255, 255, .08); }
/* La foto de Nosotros en su marco de metal */
.diseno-forja .nosotros__foto img { border: 12px solid transparent; border-radius: 4px; background: var(--fj-metal) border-box; box-shadow: var(--fj-sombra); }
.diseno-forja .nosotros__desde { border: 1px solid var(--fj-linea-fuerte); border-radius: 3px; background: rgba(255, 255, 255, .05); color: var(--fj-blanco); }
.diseno-forja .nosotros__desde strong,
.diseno-forja .nosotros__desde .icono { color: var(--fj-brasa); }
.diseno-forja .mapa { border: 1px solid var(--fj-linea-fuerte); border-radius: 4px; box-shadow: var(--fj-sombra); }
.diseno-forja .red { border-color: var(--fj-linea-fuerte); border-radius: 3px; color: var(--fj-blanco); }
.diseno-forja .red:hover { background: rgba(255, 255, 255, .06); }

/* El horario en una placa, con el día de hoy encendido */
.diseno-forja .horario__tabla { overflow: hidden; border: 1px solid var(--fj-linea-fuerte); border-collapse: separate; border-spacing: 0; border-radius: 4px; background: var(--fj-placa); }
.diseno-forja .horario__tabla th,
.diseno-forja .horario__tabla td { padding-inline: 18px; border-bottom-color: var(--fj-linea); }
.diseno-forja .horario__tabla th { font-size: 1.15rem; }
.diseno-forja .horario__tabla td { font-variant-numeric: tabular-nums; }
.diseno-forja .horario__tabla tr:last-child th,
.diseno-forja .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-forja .horario__hoy th,
.diseno-forja .horario__hoy td { background: color-mix(in srgb, var(--c-acento) 16%, transparent); color: var(--fj-brasa); }
.diseno-forja .horario__hoy th { box-shadow: inset 5px 0 0 var(--fj-brasa); }
.diseno-forja .horario__etiqueta { border-radius: 2px; background: var(--fj-brasa); color: var(--fj-tinta); }
.diseno-forja .estado-ahora--claro { border-radius: 3px; }

/* ---------- Pie con su barandal y barra del celular ---------- */
.diseno-forja .pie { position: relative; margin-top: 70px; border-top: 0; background: var(--fj-veta), var(--fj-acero); color: var(--fj-gris); }
.diseno-forja .pie::before {
    content: "";
    position: absolute;
    top: -64px;
    right: 0;
    left: 0;
    height: 64px;
    background: var(--fj-hierro);
    -webkit-mask: var(--fj-barandal) 0 100% / 26px 64px repeat-x;
    mask: var(--fj-barandal) 0 100% / 26px 64px repeat-x;
    pointer-events: none;
}
.diseno-forja .barra-acciones { background: color-mix(in srgb, var(--fj-acero) 96%, transparent); backdrop-filter: blur(10px); }
.diseno-forja .barra-acciones__boton--principal { border-radius: 3px; font-family: var(--fj-titulo); font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }