/* ============================================================
   Sitioideal — Diseño «Fachada» (arquitectura, interiorismo, centros y plazas comerciales) · paso 7.z.51a
   Va encima de sitio.css. Arquitectura mexicana moderna: fondo de concreto claro, muros lisos del color del
   negocio a lo Barragán (con un segundo muro del acento detrás y su sombra larga), celosía, líneas finas y
   esquinas rectas. Los títulos en letras anchas (Syne) y los textos en Urbanist.
   La foto de portada va en un vano recortado en el muro, con su derrame de sombra, y abajo la placa con el
   número de la calle; la línea del piso con «N.P.T. ±0.00». Cada sección lleva su marca de nivel («Nivel 01»,
   como en los planos: el triángulo sobre su línea). Los servicios o locales son el directorio de un edificio
   (cada grupo un piso con su número, cada servicio una ficha con su número y su nota) y la galería es un
   ventanal con sus marcos del color del muro. El pie lleva una franja de celosía.
   Los textos usan el color principal oscurecido para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/fachada/
   ============================================================ */

.diseno-fachada {
    --fa-titulo: "Syne", "Archivo", system-ui, sans-serif;
    --fa-letra: "Urbanist", "Archivo", system-ui, sans-serif;
    --fa-fondo: color-mix(in srgb, var(--c-fondo) 25%, #EEEAE3);        /* concreto claro */
    --fa-cal: color-mix(in srgb, var(--c-fondo) 20%, #F8F6F1);          /* muro encalado */
    --fa-blanco: #FFFFFF;
    --fa-tinta: color-mix(in srgb, var(--c-primario) 10%, #1D1B19);
    --fa-tinta-suave: color-mix(in srgb, var(--fa-tinta) 74%, transparent);
    --fa-muro: var(--c-primario);
    --fa-muro-oscuro: color-mix(in srgb, var(--c-primario) 62%, #000);
    --fa-muro-suave: color-mix(in srgb, var(--c-primario) 14%, #F4F1EC);
    --fa-principal: color-mix(in srgb, var(--c-primario) 85%, #000);
    --fa-linea: color-mix(in srgb, var(--fa-tinta) 15%, transparent);
    --fa-linea-fuerte: color-mix(in srgb, var(--fa-tinta) 32%, transparent);
    --fa-sombra: 0 22px 36px -28px rgba(29, 27, 25, .55), 0 1px 2px rgba(29, 27, 25, .06);
    /* El derrame: la sombra que deja el grosor del muro dentro de un vano */
    --fa-derrame: inset 14px 16px 0 rgba(0, 0, 0, .2), inset 15px 17px 18px rgba(0, 0, 0, .22);
    /* La marca de nivel de los planos: el triángulo sobre su línea (la usan los títulos) */
    --fa-marca: conic-gradient(from -30deg at 50% 100%, var(--fa-principal) 0 60deg, transparent 0) 6px 0 / 14px 12px no-repeat,
                linear-gradient(var(--fa-principal), var(--fa-principal)) 0 12px / 34px 1.5px no-repeat;

    /* Superficies (sitio.css) */
    --s-fondo: var(--fa-fondo);
    --s-alterna: var(--fa-cal);
    --s-tarjeta: var(--fa-blanco);
    --s-tarjeta-alterna: var(--fa-blanco);
    --s-encabezado: var(--fa-cal);
    --s-texto: var(--fa-tinta);
    --s-titulo: var(--fa-tinta);
    --s-linea: var(--fa-linea);
    --s-linea-fuerte: var(--fa-linea-fuerte);

    background: var(--fa-fondo);
    font-family: var(--fa-letra);
    font-size: 1.05rem;
}

/* Donde el navegador puede, cada color se ajusta solo lo necesario para leerse sobre lo claro */
@supports (color: oklch(from red l c h)) {
    .diseno-fachada {
        --fa-principal: oklch(from var(--c-primario) min(l, .45) c h);
        --fa-tinta: oklch(from color-mix(in srgb, var(--c-primario) 10%, #1D1B19) min(l, .25) c h);
        --fa-muro-oscuro: oklch(from var(--c-primario) min(l, .38) c h);
    }
}

/* Letras anchas en los títulos */
.diseno-fachada h1,
.diseno-fachada h2,
.diseno-fachada h3,
.diseno-fachada h4,
.diseno-fachada .logo__nombre,
.diseno-fachada .especial__titulo,
.diseno-fachada .equipo__titulo,
.diseno-fachada .persona__nombre,
.diseno-fachada .promocion__titulo,
.diseno-fachada .servicio__nombre,
.diseno-fachada .sucursal__nombre,
.diseno-fachada .redes__titulo {
    font-family: var(--fa-titulo);
    font-stretch: normal;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;   /* la Syne es muy ancha: si una palabra no cabe (celular angosto), que baje en vez de sacar la página de lado */
}

/* ---------- Encabezado: encalado, con doble línea como en los planos ---------- */
.diseno-fachada .encabezado {
    border-bottom: 1px solid var(--fa-linea-fuerte);
    background: color-mix(in srgb, var(--fa-cal) 94%, transparent);
    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--fa-cal) 94%, transparent), 0 4px 0 0 var(--fa-linea);
    backdrop-filter: saturate(1.1) blur(10px);
}
.diseno-fachada .logo__nombre { color: var(--fa-tinta); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.diseno-fachada .menu { column-gap: 24px; }
.diseno-fachada .menu a { color: var(--fa-tinta); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.diseno-fachada .menu a:hover { color: var(--fa-principal); }

/* ---------- Botones: rectos, como de obra fina ---------- */
.diseno-fachada .boton {
    border-radius: 0;
    font-family: var(--fa-letra);
    font-size: .95rem;
    font-stretch: normal;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.diseno-fachada .boton--principal {
    border: 0;
    background: var(--fa-principal);
    color: #FFFFFF;
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--c-acento) 85%, transparent);
}
.diseno-fachada .boton--principal:hover { box-shadow: 3px 3px 0 color-mix(in srgb, var(--c-acento) 85%, transparent); }
.diseno-fachada .boton--secundario { border: 1.5px solid var(--fa-tinta); background: transparent; color: var(--fa-tinta); }
.diseno-fachada .boton--secundario:hover { background: var(--fa-tinta); color: #FFFFFF; }
.diseno-fachada .boton:hover { transform: none; }
.diseno-fachada .boton-chico { border-radius: 0; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .diseno-fachada .boton { transition: none; }
}

/* ---------- Portada: el muro, el vano y la placa ---------- */
.fa-portada {
    position: relative;
    padding-top: clamp(40px, 6vw, 84px);
    overflow: hidden;
    background: linear-gradient(180deg, var(--fa-cal), var(--fa-fondo));
    color: var(--fa-tinta);
}
/* El piso: abajo de la línea, el concreto un poco más oscuro (solo adorno) */
.fa-portada::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 120px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--fa-tinta) 6%, var(--fa-fondo)), var(--fa-fondo));
    pointer-events: none;
}

.fa-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 44px;
    padding-bottom: 56px;
}

@media (min-width: 900px) {
    .fa-portada__rejilla { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: end; gap: 60px; }
    .fa-portada__texto { padding-bottom: 88px; }
}

/* La marca de nivel con «±0.00» y el giro */
.fa-nivel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 22px;
    color: var(--fa-principal);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}
.fa-nivel .icono { flex: none; width: 28px; height: 28px; stroke-width: 1.7; }
.fa-nivel__cota { padding-right: 12px; border-right: 1px solid var(--fa-linea-fuerte); color: var(--fa-tinta); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.fa-nivel__giro { overflow-wrap: anywhere; }

.fa-portada__nombre {
    margin: 0 0 20px;
    color: var(--fa-tinta);
    font-size: clamp(2.8rem, 1.2rem + 3.8vw, 4.4rem);   /* la Syne es muy ancha: así «Taquería» cabe en su columna sin que nombre_sitio.js la achique */
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .95;
    overflow-wrap: anywhere;
}
.fa-portada__nombre--medio { font-size: clamp(2.4rem, 1.1rem + 3.3vw, 3.8rem); }
.fa-portada__nombre--largo { font-size: clamp(2rem, 1rem + 2.7vw, 3.1rem); }

.fa-portada__eslogan {
    max-width: 38ch;
    margin: 0 0 30px;
    color: var(--fa-tinta-suave);
    font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem);
    line-height: 1.55;
}

.fa-portada__botones { gap: 18px 16px; }
.fa-portada__estado { margin-top: 28px; }
.diseno-fachada .estado-ahora--claro { border-radius: 0; border-color: var(--fa-linea-fuerte); background: var(--fa-blanco); box-shadow: none; }

/* El muro de color, el del acento detrás y la sombra larga */
.fa-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 470px);
    padding: 0 0 64px 22px;
    box-sizing: border-box;
}
/* La línea del piso donde se para el muro (a lo ancho de la pantalla) */
.fa-portada__visual::after {
    content: "";
    position: absolute;
    right: -100vw;
    bottom: 64px;
    left: -100vw;
    z-index: 0;
    height: 1.5px;
    background: var(--fa-linea-fuerte);
}

.fa-muro {
    position: relative;
    z-index: 2;
    padding: 14% 12% 20% 10%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .06)),
        var(--fa-muro);
    background-color: var(--fa-muro);
    box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .09);
}

.fa-muro-atras {
    position: absolute;
    bottom: 64px;
    left: 0;
    z-index: 1;
    width: 46%;
    height: 64%;
    background: linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 40%), var(--c-acento);
    background-color: var(--c-acento);
    translate: -8% 0;
}

.fa-sombra-larga {
    position: absolute;
    right: -38%;
    bottom: 40px;
    left: 40%;
    z-index: 0;
    height: 24px;
    background: linear-gradient(90deg, rgba(29, 27, 25, .2), rgba(29, 27, 25, 0));
    transform: skewX(-55deg);
    transform-origin: top left;
    pointer-events: none;
}

/* El vano: la foto recortada en el muro, con su derrame */
.fa-vano {
    position: relative;
    width: 74%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--fa-muro-oscuro);
}
.fa-vano::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: var(--fa-derrame); pointer-events: none; }
.fa-vano picture,
.fa-vano picture img { width: 100%; height: 100%; }
.fa-vano picture img { object-fit: cover; }
/* La nota de IA arriba de la foto, lejos de la placa (que va en la esquina de abajo) */
.fa-vano > .marca-ia--foto { top: 22px; bottom: auto; z-index: 2; }

/* Sin foto: la inicial, como letrero de lámina recortada */
.fa-vano--inicial {
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, color-mix(in srgb, var(--fa-muro) 30%, #FFFFFF), color-mix(in srgb, var(--fa-muro) 55%, #FFFFFF));
    background-color: color-mix(in srgb, var(--fa-muro) 42%, #FFFFFF);   /* el tono de en medio, abajo del degradado (para medir el contraste) */
}
.fa-vano__inicial { color: var(--fa-muro-oscuro); font-family: var(--fa-titulo); font-size: clamp(5rem, 3.4rem + 5vw, 8.5rem); font-weight: 800; line-height: .9; }

/* La celosía: bloques con su hueco redondo (los huecos dejan ver lo oscuro de adentro) */
.fa-celosia {
    position: absolute;
    top: 14%;
    right: 5%;
    width: 15%;
    height: 56%;
    background:
        radial-gradient(circle at 50% 50%, var(--fa-muro-oscuro) 0 31%, transparent 33%) 0 0 / 50% 22px,
        linear-gradient(90deg, color-mix(in srgb, var(--fa-muro-oscuro) 45%, transparent) 0 1px, transparent 1px) 0 0 / 50% 22px,
        linear-gradient(180deg, color-mix(in srgb, var(--fa-muro-oscuro) 45%, transparent) 0 1px, transparent 1px) 0 0 / 50% 22px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fa-muro-oscuro) 45%, transparent);
}

/* La placa con el número de la calle (o el horario), en la esquina del muro */
.fa-placa {
    position: absolute;
    bottom: 84px;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 116px;
    max-width: 62%;
    padding: 10px 16px 11px;
    border: 2px solid var(--fa-tinta);
    background: #FBFAF6;
    box-shadow: 6px 6px 0 rgba(29, 27, 25, .16);
    color: var(--fa-tinta);
    line-height: 1.1;
    text-decoration: none;
    box-sizing: border-box;
}
.fa-placa__numero { font-family: var(--fa-titulo); font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.fa-placa__dias { font-family: var(--fa-titulo); font-size: 1.05rem; font-weight: 800; }
.fa-placa__texto { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere; }
.fa-placa:hover { box-shadow: 3px 3px 0 rgba(29, 27, 25, .2); }

/* «N.P.T. ±0.00» junto a la línea del piso (solo adorno) */
.fa-piso {
    position: absolute;
    right: max(20px, calc((100% - 1120px) / 2));
    bottom: 128px;
    z-index: 1;
    color: var(--fa-tinta-suave);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    pointer-events: none;
}

@media (max-width: 899.98px) {
    .fa-portada__visual { width: min(100%, 400px); }
    .fa-piso { display: none; }
}

@media (max-width: 599.98px) {
    .fa-portada__visual { padding: 0 0 56px 14px; }
    .fa-portada__visual::after { bottom: 56px; }
    .fa-muro-atras { bottom: 56px; }
    .fa-placa { bottom: 72px; min-width: 96px; padding: 8px 12px 9px; }
    .fa-placa__numero { font-size: 1.8rem; }
    .fa-placa__texto { font-size: .66rem; }
    .fa-sombra-larga { bottom: 32px; }
}

/* ---------- Secciones: cada una es un nivel del edificio ---------- */
.diseno-fachada main { counter-reset: fa-nivel; }
.diseno-fachada .seccion { counter-increment: fa-nivel; padding-block: clamp(60px, 7.5vw, 100px); }

.diseno-fachada .seccion h2 {
    color: var(--fa-tinta);
    font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem);   /* «Promociones» cabe en un celular de 360 px */
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.04;
}

/* La marca de nivel arriba de cada título: «▼ Nivel 01» (en las secciones propias va en el antetítulo) */
.diseno-fachada .seccion h2::before,
.fa-antetitulo::before {
    content: "Nivel " counter(fa-nivel, decimal-leading-zero);
}
.diseno-fachada .seccion h2::before {
    display: block;
    width: max-content;
    margin-bottom: 14px;
    padding-left: 46px;
    background: var(--fa-marca);
    color: var(--fa-principal);
    font-family: var(--fa-letra);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2em;
    line-height: 1.2;
    text-transform: uppercase;
}
.diseno-fachada .fa-cabeza h2::before { content: none; }

.fa-cabeza { margin-bottom: 28px; }
.fa-cabeza h2 { margin: 0 !important; }

.fa-antetitulo {
    margin: 0 0 14px;
    padding-left: 46px;
    background: var(--fa-marca);
    color: var(--fa-principal);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2em;
    line-height: 1.2;
    text-transform: uppercase;
}
.fa-antetitulo::before { content: "Nivel " counter(fa-nivel, decimal-leading-zero) " · "; }

/* ---------- Servicios: el directorio del edificio ---------- */
.diseno-fachada .catalogo__indice a {
    border: 1.5px solid var(--fa-tinta);
    border-radius: 0;
    background: transparent;
    color: var(--fa-tinta);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.diseno-fachada .catalogo__indice a:hover { background: var(--fa-tinta); color: #FFFFFF; }

.fa-piso-directorio + .fa-piso-directorio { margin-top: 58px; }

.fa-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--fa-tinta);
    color: var(--fa-tinta);
    font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
    font-weight: 800;
    line-height: 1.1;
}
.fa-grupo__numero {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 46px;
    height: 46px;
    padding-inline: 6px;
    background: var(--fa-tinta);
    color: #FFFFFF;
    font-family: var(--fa-titulo);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-sizing: border-box;
}
.fa-grupo__nombre .icono { flex: none; width: 30px; height: 30px; color: var(--fa-principal); stroke-width: 1.7; }
.fa-grupo__nombre > span:last-child { overflow-wrap: anywhere; }
.fa-grupo__descripcion { max-width: 64ch; margin: 0 0 12px; color: var(--fa-tinta-suave); }

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

.fa-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fa-linea);
    border-top: 5px solid var(--fa-tinta);
    background: var(--fa-blanco);
    box-shadow: var(--fa-sombra);
    color: var(--fa-tinta);
}
.fa-ficha--destacada { border-top-color: var(--c-acento); }

/* La foto en su vano, con su derrame */
.fa-ficha__vano {
    position: relative;
    margin: 12px 12px 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--fa-muro-suave);
}
.fa-ficha__vano::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 9px 10px 0 rgba(0, 0, 0, .16), inset 10px 11px 12px rgba(0, 0, 0, .16); pointer-events: none; }
.fa-ficha__vano img { width: 100%; height: 100%; object-fit: cover; }
.fa-ficha__vano > .marca-ia--foto { z-index: 2; }
/* Sin foto: el dibujo de su grupo sobre la celosía del color del muro */
.fa-ficha__vano--dibujo {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fa-muro) 30%, #FFFFFF) 0 31%, transparent 33%) 0 0 / 26px 26px,
        var(--fa-muro-suave);
    color: var(--fa-principal);
}
.fa-ficha__vano--dibujo::after { box-shadow: inset 9px 10px 0 rgba(0, 0, 0, .08); }
.fa-ficha__vano--dibujo .icono { position: relative; z-index: 2; width: 72px; height: 72px; padding: 16px; background: var(--fa-blanco); stroke-width: 1.6; box-shadow: 5px 5px 0 color-mix(in srgb, var(--fa-tinta) 12%, transparent); box-sizing: border-box; }

/* El número de la ficha y «Destacado» */
.fa-ficha__numero {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    padding: 4px 9px 3px;
    border: 1.5px solid var(--fa-tinta);
    background: var(--fa-blanco);
    color: var(--fa-tinta);
    font-family: var(--fa-titulo);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.fa-ficha__destacado {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 5px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.fa-ficha__destacado .icono { width: 13px; height: 13px; fill: currentColor; }

.fa-ficha__cuerpo { flex: 1; padding: 16px 20px 0; }
.fa-ficha__nombre { margin: 0 0 6px; color: var(--fa-tinta); font-size: 1.3rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.fa-ficha__descripcion { margin: 0; color: var(--fa-tinta-suave); font-size: .98rem; line-height: 1.5; }
.fa-ficha__nota {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 5px 10px 5px 7px;
    border: 1px solid var(--fa-linea-fuerte);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.3;
    box-sizing: border-box;
}
.fa-ficha__nota .icono { flex: none; width: 18px; height: 18px; color: var(--fa-principal); }
.diseno-fachada .fa-ficha .ficha-ver { margin-top: 10px; color: var(--fa-principal); }

.fa-ficha__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 20px 20px;
    padding-top: 14px;
    border-top: 1px solid var(--fa-linea);
}

.fa-ficha__pie--sin-precio { justify-content: flex-start; }
.fa-precio { display: flex; flex-direction: column; margin: 0; color: var(--fa-tinta); line-height: 1.05; }
.fa-precio small { color: var(--fa-principal); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fa-precio strong { font-family: var(--fa-titulo); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }

.fa-informes {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--fa-principal);
    color: #FFFFFF;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.fa-informes .icono { width: 16px; height: 16px; }
.fa-informes:hover { background: var(--fa-tinta); }

/* ---------- Galería: el ventanal, con sus marcos del color del muro ---------- */
.fa-ventanal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--fa-muro);
    box-shadow: var(--fa-sombra);
}
@media (min-width: 700px) {
    .fa-ventanal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px; }
}
.galeria__mas > .fa-ventanal { margin-top: 18px; }
.fa-ventana--grande { grid-column: span 2; grid-row: span 2; }
/* Las que quedan solas en el último renglón se estiran a lo ancho (el ventanal queda completo) */
@media (min-width: 700px) {
    .fa-ventana--ancha-pc { grid-column: span 2; }
    .diseno-fachada .fa-ventana--ancha-pc .fa-ventana__enlace { aspect-ratio: 2 / 1; }
    .fa-ventana--franja-pc { grid-column: span 4; }
    .diseno-fachada .fa-ventana--franja-pc .fa-ventana__enlace { aspect-ratio: 4 / 1; }
}
@media (max-width: 699.98px) {
    .fa-ventana--ancha-cel { grid-column: span 2; }
    .diseno-fachada .fa-ventana--ancha-cel .fa-ventana__enlace { aspect-ratio: 2 / 1; }
}

.diseno-fachada .fa-ventana__enlace {
    position: relative;
    display: block;
    height: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    background: var(--fa-muro-oscuro);
    color: var(--fa-tinta);
}
.fa-ventana__enlace img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
.fa-ventana__enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 7px 8px 0 rgba(0, 0, 0, .2); pointer-events: none; }
.fa-ventana__enlace:hover img { scale: 1.04; }
.diseno-fachada .fa-ventana__enlace:focus-visible { outline: 3px solid var(--fa-tinta); outline-offset: -3px; }

.fa-ventana__pie {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
    padding: 5px 9px 4px;
    overflow: hidden;
    background: rgba(251, 250, 246, .94);
    color: var(--fa-tinta);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
}
/* La nota de IA arriba de la foto: abajo va el pie de la ventana */
.fa-ventana__enlace > .marca-ia--foto { top: 10px; bottom: auto; }

@media (prefers-reduced-motion: reduce) {
    .fa-ventana__enlace img { transition: none; }
    .fa-ventana__enlace:hover img { scale: none; }
}

@media (max-width: 599.98px) {
    .fa-ventana__pie { bottom: 7px; left: 7px; max-width: calc(100% - 14px); font-size: .64rem; }
    .fa-ventana__enlace > .marca-ia--foto { top: 7px; }
}

.diseno-fachada .galeria__ver-mas { border-radius: 0; }

/* ---------- Lo demás: tarjetas rectas, líneas finas ---------- */
.diseno-fachada .testimonio,
.diseno-fachada .promocion,
.diseno-fachada .pregunta,
.diseno-fachada .contacto__item,
.diseno-fachada .sucursal,
.diseno-fachada .especial__punto,
.diseno-fachada .persona,
.diseno-fachada .servicio,
.diseno-fachada .destacado-tarjeta { border-color: var(--fa-linea); border-radius: 0; box-shadow: var(--fa-sombra); }
.diseno-fachada .destacado-tarjeta { border-top: 5px solid var(--fa-tinta); }
.diseno-fachada .destacado-tarjeta__foto { border-radius: 0; }
.diseno-fachada .promocion__foto { border-radius: 0; }
.diseno-fachada .promocion__hoy { border-radius: 0; background: var(--c-acento); color: var(--c-sobre-acento); }
.diseno-fachada .testimonio__texto { font-size: 1.06rem; line-height: 1.6; }
.diseno-fachada .testimonio > .icono { color: var(--fa-principal); opacity: .3; }
.diseno-fachada .testimonio__iniciales,
.diseno-fachada .contacto__icono,
.diseno-fachada .especial__marca,
.diseno-fachada .persona__foto--iniciales,
.diseno-fachada .pregunta__signo { border-radius: 0; background: var(--fa-muro-suave); color: var(--fa-principal); }
.diseno-fachada .persona__foto { border-radius: 0; }
/* La foto de Nosotros en un vano del muro de color */
.diseno-fachada .nosotros__foto img { border: 12px solid var(--fa-muro); border-radius: 0; box-shadow: var(--fa-sombra); }
.diseno-fachada .nosotros__desde { border: 1px solid var(--fa-linea-fuerte); border-radius: 0; background: var(--fa-blanco); color: var(--fa-tinta); }
.diseno-fachada .nosotros__desde strong,
.diseno-fachada .nosotros__desde .icono { color: var(--fa-principal); }
.diseno-fachada .mapa { border: 1px solid var(--fa-linea-fuerte); border-radius: 0; box-shadow: var(--fa-sombra); }
.diseno-fachada .red { border-color: var(--fa-tinta); border-radius: 0; }
.diseno-fachada .red:hover { background: var(--fa-muro-suave); }

/* El horario como cuadro de un plano, con el día de hoy marcado */
.diseno-fachada .horario__tabla { overflow: hidden; border: 1px solid var(--fa-linea-fuerte); border-collapse: separate; border-spacing: 0; border-radius: 0; background: var(--fa-blanco); }
.diseno-fachada .horario__tabla th,
.diseno-fachada .horario__tabla td { padding-inline: 18px; border-bottom-color: var(--fa-linea); }
.diseno-fachada .horario__tabla th { font-weight: 700; }
.diseno-fachada .horario__tabla td { font-weight: 700; font-variant-numeric: tabular-nums; }
.diseno-fachada .horario__tabla tr:last-child th,
.diseno-fachada .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-fachada .horario__hoy th,
.diseno-fachada .horario__hoy td { background: var(--fa-muro-suave); }
.diseno-fachada .horario__hoy th { box-shadow: inset 5px 0 0 var(--fa-principal); }
.diseno-fachada .horario__etiqueta { border-radius: 0; background: var(--fa-principal); color: #FFFFFF; }

/* ---------- Pie con su franja de celosía y barra del celular ---------- */
.diseno-fachada .pie { position: relative; margin-top: 30px; border-top: 0; background: var(--fa-tinta); color: rgba(246, 243, 238, .86); }
.diseno-fachada .pie::before {
    content: "";
    position: absolute;
    top: -30px;
    right: 0;
    left: 0;
    height: 30px;
    background:
        radial-gradient(circle at 50% 50%, var(--fa-fondo) 0 30%, transparent 32%) 0 0 / 30px 30px,
        linear-gradient(90deg, color-mix(in srgb, var(--fa-fondo) 30%, transparent) 0 1px, transparent 1px) 0 0 / 30px 30px,
        var(--fa-tinta);
    pointer-events: none;
}
.diseno-fachada .barra-acciones { background: color-mix(in srgb, var(--fa-cal) 96%, transparent); backdrop-filter: blur(10px); }
.diseno-fachada .barra-acciones__boton { border-radius: 0; }
.diseno-fachada .barra-acciones__boton--principal { border-radius: 0; font-weight: 800; letter-spacing: .04em; }