/* ============================================================
   Sitioideal — Diseño «Paseo» (plazas y centros comerciales) · paso 7.z.56a
   Va encima de sitio.css. Moderno y claro, con la señalética de una plaza: fondo gris muy claro, el color del negocio
   en los letreros y el acento en las flechas, las letras del directorio y el punto de «Usted está aquí». Letra
   geométrica para los títulos (Red Hat Display) y su pareja para el texto (Red Hat Text).
   La portada lleva el tótem del directorio (la foto arriba y los grupos con su letra y cuántos negocios tienen); el
   directorio, cada negocio como un local de la plaza con su letrero («Local 12 · Planta alta») y su aparador (la foto o
   su inicial); los locales en renta, «En renta» en la esquina y el precio al mes. La galería, fotos redondeadas con su
   pie en una etiqueta de señalética. Cada título lleva abajo una barra con su flecha.
   Los textos usan el color principal oscurecido para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/paseo/
   ============================================================ */

.diseno-paseo {
    --pa-titulo: "Red Hat Display", "Manrope", system-ui, sans-serif;
    --pa-letra: "Red Hat Text", "Inter", system-ui, sans-serif;
    --pa-piso: color-mix(in srgb, var(--c-fondo) 40%, #F3F6F6);                     /* el piso claro de la plaza */
    --pa-piso-2: color-mix(in srgb, var(--c-primario) 7%, #EEF3F3);
    --pa-blanco: #FFFFFF;
    --pa-tinta: color-mix(in srgb, var(--c-primario) 20%, #121A1C);
    --pa-tinta-suave: color-mix(in srgb, var(--pa-tinta) 74%, transparent);
    --pa-principal: color-mix(in srgb, var(--c-primario) 88%, #000);
    --pa-principal-oscuro: color-mix(in srgb, var(--pa-principal) 70%, #000);
    --pa-acento: var(--c-acento);
    --pa-acento-texto: color-mix(in srgb, var(--c-acento) 64%, #2A0E06);            /* el acento, para leerse en lo claro */
    --pa-suave: color-mix(in srgb, var(--c-primario) 10%, #FFFFFF);
    --pa-linea: color-mix(in srgb, var(--pa-tinta) 12%, transparent);
    --pa-linea-fuerte: color-mix(in srgb, var(--pa-tinta) 24%, transparent);
    --pa-sombra: 0 18px 36px -26px rgba(10, 35, 40, .5), 0 1px 2px rgba(10, 35, 40, .06);
    --pa-radio: 16px;

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

    background: var(--pa-piso);
    font-family: var(--pa-letra);
    font-size: 1.04rem;
}

/* 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-paseo {
        --pa-principal: oklch(from var(--c-primario) min(l, .48) c h);
        --pa-tinta: oklch(from color-mix(in srgb, var(--c-primario) 20%, #121A1C) min(l, .25) c h);
        --pa-acento-texto: oklch(from var(--c-acento) min(l, .48) c h);   /* .48: también sobre el fondo alterno (galería) */
    }
}

/* Títulos geométricos */
.diseno-paseo h1,
.diseno-paseo h2,
.diseno-paseo h3,
.diseno-paseo h4,
.diseno-paseo .logo__nombre,
.diseno-paseo .especial__titulo,
.diseno-paseo .equipo__titulo,
.diseno-paseo .persona__nombre,
.diseno-paseo .promocion__titulo,
.diseno-paseo .servicio__nombre,
.diseno-paseo .sucursal__nombre,
.diseno-paseo .redes__titulo {
    font-family: var(--pa-titulo);
    font-stretch: normal;
    font-weight: 800;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

/* ---------- Encabezado: el piso claro ---------- */
.diseno-paseo .encabezado {
    border-bottom: 1px solid var(--pa-linea);
    background: color-mix(in srgb, var(--pa-piso) 92%, transparent);
    backdrop-filter: saturate(1.1) blur(10px);
}
.diseno-paseo .logo__nombre { color: var(--pa-tinta); font-size: 1.45rem; }
.diseno-paseo .menu a { color: var(--pa-tinta); font-size: .95rem; font-weight: 600; }
.diseno-paseo .menu a:hover { color: var(--pa-principal); }

/* ---------- Botones: redondeados, como letreros ---------- */
.diseno-paseo .boton {
    border-radius: 12px;
    font-family: var(--pa-titulo);
    font-size: 1.02rem;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: 0;
}
.diseno-paseo .boton--principal { border: 0; background: var(--pa-principal); color: #FFFFFF; box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--pa-principal) 80%, transparent); }
.diseno-paseo .boton--principal:hover { background: var(--pa-principal-oscuro); }
.diseno-paseo .boton--secundario { border: 1.5px solid var(--pa-linea-fuerte); background: var(--pa-blanco); color: var(--pa-tinta); }
.diseno-paseo .boton--secundario:hover { border-color: var(--pa-principal); color: var(--pa-principal); }
.diseno-paseo .boton-chico { border-radius: 10px; }

/* ---------- Portada: el pasillo de la plaza con su tótem ---------- */
.pa-portada {
    position: relative;
    padding-top: clamp(36px, 5vw, 72px);
    overflow: hidden;
    background:
        linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--c-primario) 6%, transparent) 62%),
        linear-gradient(180deg, var(--pa-piso), color-mix(in srgb, var(--pa-suave) 60%, var(--pa-piso)));
    color: var(--pa-tinta);
}
/* Las baldosas del pasillo, en perspectiva (solo adorno) */
.pa-portada::before {
    content: "";
    position: absolute;
    right: -20%;
    bottom: 0;
    left: -20%;
    height: 38%;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-primario) 10%, transparent) 0 1.5px, transparent 1.5px 90px),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--c-primario) 10%, transparent) 0 1.5px, transparent 1.5px 34px);
    transform: perspective(420px) rotateX(48deg);
    transform-origin: bottom;
    pointer-events: none;
}
.pa-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 36px;
    padding-bottom: clamp(48px, 6vw, 84px);
}
@media (min-width: 900px) {
    .pa-portada__rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 56px; }
}

/* El giro en un letrero de señalética con su flecha */
.pa-giro {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 7px 16px 7px 8px;
    border-radius: 10px;
    background: var(--pa-principal);
    color: #FFFFFF;
    font-family: var(--pa-titulo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.pa-giro .icono { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 7px; background: var(--pa-acento); color: var(--c-sobre-acento); stroke-width: 2.6; box-sizing: border-box; }
.pa-portada__nombre {
    margin: 0 0 16px;
    color: var(--pa-tinta);
    font-size: clamp(2.8rem, 1.4rem + 4.2vw, 5rem);
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
    line-height: .98;
    overflow-wrap: anywhere;
}
.pa-portada__nombre--medio { font-size: clamp(2.5rem, 1.3rem + 3.5vw, 4.2rem); }
.pa-portada__nombre--largo { font-size: clamp(2.1rem, 1.1rem + 2.8vw, 3.5rem); }
.pa-portada__eslogan {
    max-width: 42ch;
    margin: 0 0 26px;
    color: var(--pa-tinta-suave);
    font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem);
    line-height: 1.55;
}
.pa-portada__botones { margin-bottom: 22px; }
.diseno-paseo .estado-ahora--claro { border-color: var(--pa-linea-fuerte); border-radius: 10px; background: var(--pa-blanco); box-shadow: none; }

/* El tótem del directorio */
.pa-portada__visual { position: relative; justify-self: center; width: min(100%, 400px); }
/* 7.z.56b: en las laptops (de 1180 a 1589 px), el tótem se recorre a la izquierda para que el botón flotante de «Promociones»
   (abajo a la derecha) no tape sus renglones */
@media (min-width: 1180px) and (max-width: 1589.98px) {
    .pa-portada__visual {
        --pa-libre: max(0px, calc((1590px - 100vw) / 2));
        justify-self: end;
        width: min(400px, calc(100% - var(--pa-libre)));
        margin-right: var(--pa-libre);
    }
}
.pa-totem {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 14px 18px;
    border-radius: 22px 22px 8px 8px;
    background: var(--pa-tinta);
    color: #FFFFFF;
    box-shadow: 0 30px 50px -30px rgba(10, 30, 35, .8), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
/* La base del tótem, en el piso */
.pa-totem::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -14px;
    left: 18%;
    height: 14px;
    border-radius: 0 0 8px 8px;
    background: color-mix(in srgb, var(--pa-tinta) 80%, #000);
}
.pa-totem__foto { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 12px; background: var(--pa-principal); }
.pa-totem__foto picture,
.pa-totem__foto picture img { display: block; width: 100%; height: 100%; }
.pa-totem__foto picture img { object-fit: cover; }
.pa-totem__foto > .marca-ia--foto { top: 10px; bottom: auto; }
.pa-totem__foto--inicial { display: grid; place-items: center; }
.pa-totem__inicial { color: #FFFFFF; font-family: var(--pa-titulo); font-size: clamp(4.5rem, 3rem + 4vw, 7rem); font-weight: 900; line-height: 1; }
.pa-totem__titulo {
    margin: 16px 6px 8px;
    color: var(--pa-acento);
    font-family: var(--pa-titulo);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.pa-totem__lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pa-totem__lista a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
}
.pa-totem__lista a:hover { background: rgba(255, 255, 255, .14); }
.pa-totem__letra {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--pa-acento);
    color: var(--c-sobre-acento);
    font-family: var(--pa-titulo);
    font-weight: 800;
}
.pa-totem__lista li:nth-child(even) .pa-totem__letra { background: #FFFFFF; color: var(--pa-tinta); }
.pa-totem__grupo { flex: 1; min-width: 0; font-size: .96rem; line-height: 1.25; overflow-wrap: anywhere; }
.pa-totem__cuenta { flex: none; color: rgba(255, 255, 255, .7); font-family: var(--pa-titulo); font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-totem__aqui {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 6px 0;
    color: rgba(255, 255, 255, .86);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* El punto de «Usted está aquí», que late */
.pa-pin { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pa-acento); }
.pa-pin::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid var(--pa-acento);
    border-radius: 50%;
    opacity: 0;
    animation: pa-latir 2s ease-out infinite;
}
@keyframes pa-latir {
    0%   { opacity: .9; transform: scale(.5); }
    100% { opacity: 0; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
    .pa-pin::after { animation: none; opacity: .5; }
}

@media (max-width: 899.98px) {
    .pa-portada__visual { width: min(100%, 380px); }
}
@media (max-width: 599.98px) {
    .pa-portada__visual { width: min(100%, 340px); }
}

/* ---------- Títulos de sección: con su barra y su flecha ---------- */
.diseno-paseo .seccion h2 {
    color: var(--pa-tinta);
    font-size: clamp(2.2rem, 1.6rem + 1.9vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.04;
}
.diseno-paseo .seccion h2::after {
    content: "";
    display: block;
    width: 74px;
    height: 8px;
    margin-top: 14px;
    border-radius: 999px;
    background:
        linear-gradient(135deg, transparent 50%, var(--pa-piso) 50%) right 8px top 0 / 8px 4px no-repeat,
        linear-gradient(45deg, transparent 50%, var(--pa-piso) 50%) right 8px bottom 0 / 8px 4px no-repeat,
        var(--pa-acento);
}
.diseno-paseo .seccion--alterna h2::after {
    background:
        linear-gradient(135deg, transparent 50%, var(--pa-piso-2) 50%) right 8px top 0 / 8px 4px no-repeat,
        linear-gradient(45deg, transparent 50%, var(--pa-piso-2) 50%) right 8px bottom 0 / 8px 4px no-repeat,
        var(--pa-acento);
}
.diseno-paseo .seccion [style*="text-align: center"] h2::after,
.diseno-paseo .seccion .centrado h2::after { margin-inline: auto; }

.pa-cabeza { margin-bottom: 28px; }
.pa-cabeza h2 { margin: 0 !important; }
.pa-antetitulo {
    margin: 0 0 6px;
    color: var(--pa-acento-texto);
    font-family: var(--pa-titulo);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ---------- Directorio: cada negocio, un local de la plaza ---------- */
.diseno-paseo .catalogo__indice a {
    border: 1.5px solid var(--pa-linea-fuerte);
    border-radius: 10px;
    background: var(--pa-blanco);
    color: var(--pa-tinta);
    font-weight: 600;
    white-space: nowrap;
}
.diseno-paseo .catalogo__indice a:hover { border-color: var(--pa-principal); color: var(--pa-principal); }

.pa-grupo + .pa-grupo { margin-top: 54px; }
.pa-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    color: var(--pa-tinta);
    font-size: clamp(1.45rem, 1.25rem + .7vw, 1.85rem);
    line-height: 1.15;
}
.pa-grupo__letra {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--pa-acento);
    color: var(--c-sobre-acento);
    font-size: 1.25rem;
}
.pa-grupo:nth-of-type(even) .pa-grupo__letra { background: var(--pa-tinta); color: #FFFFFF; }
.pa-grupo__nombre .icono { flex: none; width: 26px; height: 26px; color: var(--pa-principal); stroke-width: 1.8; }
.pa-grupo__descripcion { max-width: 64ch; margin: 0 0 4px 52px; color: var(--pa-tinta-suave); }

.pa-locales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 1000px) {
    .pa-locales { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.pa-local {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pa-linea);
    border-radius: var(--pa-radio);
    background: var(--pa-blanco);
    box-shadow: var(--pa-sombra);
    color: var(--pa-tinta);
}
.pa-local--visitado { border-color: color-mix(in srgb, var(--c-acento) 60%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-acento) 45%, transparent), var(--pa-sombra); }

/* El letrero del local: dónde está */
.pa-local__letrero {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 8px 12px;
    background: var(--pa-principal);
    color: #FFFFFF;
    font-family: var(--pa-titulo);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.pa-local__letrero .icono { flex: none; width: 15px; height: 15px; color: var(--pa-acento); }
.pa-local--renta .pa-local__letrero { background: var(--pa-tinta); }

.pa-local__aparador { position: relative; }
.pa-local__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pa-suave); }
.pa-local__foto img { width: 100%; height: 100%; object-fit: cover; }
/* La nota de IA arriba (abajo va «El más visitado»); en los locales en renta, abajo (arriba va la banda «En renta») */
.pa-local__foto > .marca-ia--foto { top: 8px; bottom: auto; }
.pa-local--renta .pa-local__foto > .marca-ia--foto { top: auto; bottom: 8px; }
.pa-local--renta.pa-local--visitado .pa-local__foto > .marca-ia--foto { bottom: 42px; }
/* Sin foto: la inicial del negocio en un aparador de color */
.pa-local__foto--inicial { display: grid; place-items: center; }
.pa-local__foto--inicial span { font-family: var(--pa-titulo); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 900; line-height: 1; }
.pa-local__foto--1 { background: color-mix(in srgb, var(--c-primario) 14%, #FFFFFF); color: var(--pa-principal); }
.pa-local__foto--2 { background: color-mix(in srgb, var(--c-acento) 20%, #FFFFFF); color: var(--pa-acento-texto); }
.pa-local__foto--3 { background: color-mix(in srgb, var(--pa-tinta) 9%, #FFFFFF); color: var(--pa-tinta); }

/* «En renta» en la esquina */
.pa-local__renta {
    position: absolute;
    top: 14px;
    right: -34px;
    z-index: 2;
    width: 136px;
    padding: 5px 0;
    background: var(--pa-acento);
    color: var(--c-sobre-acento);
    font-family: var(--pa-titulo);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(35deg);
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .4);
}
/* «El más visitado» */
.pa-local__visitado {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    padding: 5px 11px 5px 8px;
    border-radius: 999px;
    background: var(--pa-blanco);
    color: var(--pa-tinta);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45);
    box-sizing: border-box;
}
.pa-local__visitado .icono { flex: none; width: 14px; height: 14px; color: var(--pa-acento); fill: currentColor; }

.pa-local__cuerpo { flex: 1; padding: 14px 16px 0; }
.pa-local__nombre { margin: 0 0 4px; color: var(--pa-tinta); font-size: 1.22rem; font-weight: 800; line-height: 1.18; overflow-wrap: anywhere; }
.pa-local__descripcion { margin: 0; color: var(--pa-tinta-suave); font-size: .94rem; line-height: 1.45; }
.pa-local__nota { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--pa-principal); font-size: .86rem; font-weight: 700; }
.pa-local__nota .icono { flex: none; width: 15px; height: 15px; }
.pa-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 10px 0 0; color: var(--pa-tinta); line-height: 1.1; }
.pa-precio small { color: var(--pa-tinta-suave); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pa-precio strong { font-family: var(--pa-titulo); font-size: 1.45rem; font-weight: 900; white-space: nowrap; font-variant-numeric: lining-nums; }
.pa-precio span { color: var(--pa-tinta-suave); font-size: .88rem; font-weight: 600; }
.diseno-paseo .pa-local .ficha-ver { margin-top: 10px; color: var(--pa-principal); }

.pa-informes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 12px 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--pa-suave);
    color: var(--pa-principal);
    font-family: var(--pa-titulo);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.pa-informes .icono { flex: none; width: 17px; height: 17px; }
.pa-informes:hover { background: var(--pa-principal); color: #FFFFFF; }

@media (max-width: 599.98px) {
    .pa-local__cuerpo { padding: 12px 12px 0; }
    .pa-local__nombre { font-size: 1.06rem; }
    .pa-local__descripcion { font-size: .86rem; }
    .pa-local__letrero { padding: 7px 9px; font-size: .7rem; }
    .pa-informes { margin: 12px 8px 8px; font-size: .84rem; }
    .pa-informes span { overflow: hidden; text-overflow: ellipsis; }
    .pa-grupo__descripcion { margin-left: 0; }
}

/* ---------- Galería: fotos redondeadas con su etiqueta de señalética ---------- */
.pa-fotos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 1000px) {
    .pa-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.pa-foto--grande { grid-column: span 2; }
.galeria__mas > .pa-fotos { margin-top: 20px; }

.diseno-paseo .pa-foto__enlace {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: var(--pa-radio);
    background: var(--pa-suave);
    color: var(--pa-tinta);
    text-decoration: none;
    box-shadow: var(--pa-sombra);
}
.diseno-paseo .pa-foto__enlace img { aspect-ratio: auto; transform: none; }
.pa-foto__imagen { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; overflow: hidden; }   /* el ancho fijo: junto a la grande, la altura del renglón no la ensancha */
.pa-foto--grande .pa-foto__imagen { aspect-ratio: auto; min-height: 100%; }
.pa-foto__imagen img { width: 100%; height: 100%; object-fit: cover; transition: scale .35s ease; }
.pa-foto__enlace:hover .pa-foto__imagen img { scale: 1.04; }
/* La nota de IA arriba de la foto, lejos de la etiqueta */
.pa-foto__imagen > .marca-ia--foto { top: 10px; bottom: auto; }
.pa-foto__pie {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--pa-blanco);
    color: var(--pa-tinta);
    font-family: var(--pa-titulo);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .4);
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
@media (max-width: 599.98px) {
    .pa-foto__pie { bottom: 7px; left: 7px; max-width: calc(100% - 14px); padding: 4px 8px; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pa-foto__imagen img { transition: none; }
    .pa-foto__enlace:hover .pa-foto__imagen img { scale: none; }
}
.diseno-paseo .galeria__ver-mas { border-radius: 10px; }

/* ---------- Lo demás: tarjetas redondeadas ---------- */
.diseno-paseo .testimonio,
.diseno-paseo .promocion,
.diseno-paseo .pregunta,
.diseno-paseo .contacto__item,
.diseno-paseo .sucursal,
.diseno-paseo .especial__punto,
.diseno-paseo .persona,
.diseno-paseo .servicio,
.diseno-paseo .destacado-tarjeta { border-color: var(--pa-linea); border-radius: var(--pa-radio); box-shadow: var(--pa-sombra); }
.diseno-paseo .promocion__foto { border-radius: 12px; }
.diseno-paseo .promocion__hoy { border-radius: 8px; background: var(--c-acento); color: var(--c-sobre-acento); }
.diseno-paseo .testimonio > .icono { color: var(--pa-acento); opacity: .4; }
.diseno-paseo .testimonio__iniciales,
.diseno-paseo .contacto__icono,
.diseno-paseo .especial__marca,
.diseno-paseo .persona__foto--iniciales,
.diseno-paseo .pregunta__signo { background: var(--pa-suave); color: var(--pa-principal); }
.diseno-paseo .nosotros__foto img { border-radius: var(--pa-radio); box-shadow: var(--pa-sombra); }
.diseno-paseo .nosotros__desde { border: 1px solid var(--pa-linea); border-radius: 10px; background: var(--pa-blanco); color: var(--pa-tinta); }
.diseno-paseo .nosotros__desde strong,
.diseno-paseo .nosotros__desde .icono { color: var(--pa-principal); }
.diseno-paseo .mapa { border: 1px solid var(--pa-linea); border-radius: var(--pa-radio); box-shadow: var(--pa-sombra); }
.diseno-paseo .red { border-color: var(--pa-linea-fuerte); border-radius: 10px; }
.diseno-paseo .red:hover { background: var(--pa-piso-2); }

/* El horario en una tarjeta, con el día de hoy marcado */
.diseno-paseo .horario__tabla { overflow: hidden; border: 1px solid var(--pa-linea); border-collapse: separate; border-spacing: 0; border-radius: var(--pa-radio); background: var(--pa-blanco); }
.diseno-paseo .horario__tabla th,
.diseno-paseo .horario__tabla td { padding-inline: 18px; border-bottom-color: var(--pa-linea); }
.diseno-paseo .horario__tabla td { font-variant-numeric: tabular-nums; }
.diseno-paseo .horario__tabla tr:last-child th,
.diseno-paseo .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-paseo .horario__hoy th,
.diseno-paseo .horario__hoy td { background: var(--pa-piso-2); }
.diseno-paseo .horario__etiqueta { border-radius: 6px; background: var(--pa-principal); color: #FFFFFF; }

/* ---------- Pie oscuro con la franja del acento, y barra del celular ---------- */
.diseno-paseo .pie { border-top: 6px solid var(--pa-acento); background: var(--pa-tinta); color: rgba(255, 255, 255, .84); }
.diseno-paseo .barra-acciones { background: color-mix(in srgb, var(--pa-piso) 96%, transparent); backdrop-filter: blur(10px); }
.diseno-paseo .barra-acciones__boton--principal { border-radius: 12px; font-weight: 700; }