/* ==========================================================================
   Pet Friendly
   -----------------------------------------------------------------------
   Hereda los tokens de home.css (--primary, --ink, --muted, --border...).
   Aquí solo se define lo propio de la sección: un acento verde que la
   distingue de Conócenos (azul) y de OSOLMA Ayuda (rosa) sin salirse de la
   identidad de la plataforma.

   Convención de nombres: todo empieza por .pf- y vive bajo .pf-page, para
   que estos estilos no puedan filtrarse a ninguna otra página.

   Índice
     1. Base y utilidades
     2. Hero
     3. Por qué existe la sección
     4. Categorías
     5. Directorio: filtros
     6. Directorio: fichas
     7. Código de convivencia
     8. Kit de salida
     9. Preguntas frecuentes
    10. Cierre y formulario de propuesta
    11. Responsive
    12. Preferencias de movimiento
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base y utilidades
   -------------------------------------------------------------------------- */
.pf-page {
    --pf-green: #0f9d63;
    --pf-green-dark: #0a7a4c;
    --pf-green-soft: #e7f7f0;
    --pf-amber: #b45309;
    --pf-radius: 20px;
    --pf-radius-sm: 14px;
    background: var(--bg);
}

/* El filtrado oculta fichas con el atributo [hidden]. Varios bloques de esta
   hoja usan display:flex o display:grid, que ganarían a la regla del
   navegador, así que se refuerza una sola vez para toda la sección. */
.pf-page [hidden] {
    display: none !important;
}

.pf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(15, 157, 99, 0.2);
    border-radius: 999px;
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.pf-badge-light {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

/* Botón secundario de la sección: mismo peso que .btn-primary-glow pero
   sin relleno, para que las dos llamadas no compitan. */
.btn-pf-ghost {
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-pf-ghost:hover,
.btn-pf-ghost:focus {
    border-color: var(--pf-green);
    color: var(--pf-green-dark);
    transform: translateY(-2px);
}

.btn-pf-light {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.35rem;
    border-radius: 12px;
    background: #ffffff;
    color: var(--pf-green-dark);
    font-weight: 900;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-pf-light:hover,
.btn-pf-light:focus {
    color: var(--pf-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(4, 40, 26, 0.24);
}

/* --------------------------------------------------------------------------
   2. Hero
   -----------------------------------------------------------------------
   Hero fotográfico. La imagen ocupa toda la sección y encima va un velo
   oscuro en degradado: el texto va en blanco y la fotografía conserva su
   color, en lugar de quedar lavada por un velo claro.

   El menú público de esta página (.business-nav) es una barra blanca sólida,
   no una cabecera transparente, así que el hero puede ser oscuro sin
   comprometer la legibilidad de la navegación.

   La fotografía tiene al sujeto (mujer y perro) en la mitad izquierda, así
   que el velo pesa a la izquierda y se abre hacia la derecha: el texto se
   apoya sobre la zona oscurecida y la terraza se sigue viendo.

   Los colores del texto viven en variables porque en móvil el reparto se
   invierte: allí la foto es una ventana superior y la copia baja a fondo
   claro, así que la misma tipografía vuelve a tinta oscura.
   -------------------------------------------------------------------------- */
.pf-hero {
    --pf-hero-ink: #ffffff;
    --pf-hero-text: rgba(255, 255, 255, 0.88);
    --pf-hero-chip: rgba(255, 255, 255, 0.92);
    --pf-hero-chip-icon: #5ee2a0;
    --pf-hero-accent-from: #5ee2a0;
    --pf-hero-accent-to: #9dc0ff;
    --pf-hero-badge-bg: rgba(255, 255, 255, 0.14);
    --pf-hero-badge-border: rgba(255, 255, 255, 0.34);
    --pf-hero-badge-ink: #ffffff;
    --pf-hero-ghost-bg: rgba(255, 255, 255, 0.12);
    --pf-hero-ghost-border: rgba(255, 255, 255, 0.42);
    --pf-hero-ghost-ink: #ffffff;
    --pf-hero-shadow: 0 2px 20px rgba(6, 12, 24, 0.35);

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(600px, 82vh, 780px);
    padding: 170px 0 2.75rem;
    overflow: hidden;
    /* Fondo oscuro de respaldo: si la foto tarda, no hay destello blanco
       debajo de un texto que ya es blanco. */
    background: #0d1526;
}

/* La foto va en z-index 0, no en negativo: .pf-hero abre contexto de apilado
   propio y cualquier hijo por debajo de 0 quedaría detrás de su fondo, es
   decir, invisible. El contenido se levanta con z-index 1. */
.pf-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pf-hero > .container {
    position: relative;
    z-index: 1;
}

.pf-hero-photo {
    display: block;
    width: 100%;
    height: 100%;
    /* El encuadre se corre a la izquierda: es donde están la mesa, la mujer
       y el perro. Centrado, en pantallas anchas se perdería el perro. */
    object-fit: cover;
    object-position: 32% 55%;
}

.pf-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        /* Velo lateral: sostiene el texto sobre la mitad izquierda y libera
           la derecha, donde la fotografía se ve entera. */
        linear-gradient(96deg,
            rgba(8, 14, 27, 0.92) 0%,
            rgba(8, 14, 27, 0.86) 30%,
            rgba(8, 14, 27, 0.66) 46%,
            rgba(8, 14, 27, 0.36) 60%,
            rgba(8, 14, 27, 0.12) 76%,
            rgba(8, 14, 27, 0.04) 100%),
        /* Base pareja: iguala el contraste en las zonas más claras de la
           fotografía (el piso de cantera y el cielo del fondo). */
        linear-gradient(180deg,
            rgba(8, 14, 27, 0.3) 0%,
            rgba(8, 14, 27, 0.18) 45%,
            rgba(8, 14, 27, 0.42) 100%);
}

.pf-hero-copy {
    position: relative;
    /* El titular es largo a propósito: se le deja ancho para que respire en
       dos o tres renglones en vez de apilarse en una columna estrecha. */
    max-width: 56rem;
}

.pf-hero-copy h1 {
    margin: 1rem 0 1.1rem;
    color: var(--pf-hero-ink);
    font-size: clamp(2.2rem, 4.4vw, 3.45rem);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -0.02em;
    text-wrap: balance;
    text-shadow: var(--pf-hero-shadow);
}

.pf-hero-accent {
    display: block;
    background: linear-gradient(120deg, var(--pf-hero-accent-from) 0%, var(--pf-hero-accent-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pf-hero-copy > p {
    max-width: 42rem;
    margin: 0 0 1.75rem;
    color: var(--pf-hero-text);
    font-size: 1.06rem;
    line-height: 1.7;
    text-shadow: var(--pf-hero-shadow);
}

/* La insignia y el botón fantasma se visten con las variables del hero para
   que el cambio a fondo claro en móvil sea una sola declaración. */
.pf-hero .pf-badge {
    border-color: var(--pf-hero-badge-border);
    background: var(--pf-hero-badge-bg);
    color: var(--pf-hero-badge-ink);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pf-hero .btn-pf-ghost {
    border-color: var(--pf-hero-ghost-border);
    background: var(--pf-hero-ghost-bg);
    color: var(--pf-hero-ghost-ink);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pf-hero .btn-pf-ghost:hover,
.pf-hero .btn-pf-ghost:focus-visible {
    border-color: var(--pf-hero-ghost-ink);
    background: rgba(255, 255, 255, 0.22);
    color: var(--pf-hero-ghost-ink);
}

.pf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.pf-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sobre fotografía, el gris de apoyo se queda corto: los apoyos del hero
   siguen el color del titular para no depender del velo. */
.pf-hero-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--pf-hero-chip);
    font-size: 0.86rem;
    font-weight: 800;
    text-shadow: var(--pf-hero-shadow);
}

.pf-hero-chips i {
    color: var(--pf-hero-chip-icon);
}

/* --- Tira de categorías al pie del hero --- */
.pf-hero-strip {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.9rem;
    margin-top: clamp(2rem, 5vw, 3.25rem);
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    /* Cristal esmerilado: la tira se apoya sobre la foto sin taparla del
       todo y sigue siendo legible sobre cualquier zona de la imagen. */
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.65);
}

.pf-hero-strip-total {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0.55rem 1.1rem 0.55rem 0.75rem;
    border-right: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pf-hero-strip-total span {
    display: block;
    color: var(--ink);
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

.pf-hero-strip-items {
    display: flex;
    flex: 1;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.pf-hero-strip-items::-webkit-scrollbar {
    display: none;
}

.pf-hero-strip-item {
    flex: 1;
    min-width: 158px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pf-hero-strip-item:hover,
.pf-hero-strip-item:focus-visible {
    border-color: color-mix(in srgb, var(--pf-accent) 35%, transparent);
    background: #ffffff;
    transform: translateY(-2px);
}

.pf-hero-strip-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pf-accent) 12%, #ffffff);
    color: var(--pf-accent);
    font-size: 0.85rem;
}

.pf-hero-strip-copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.pf-hero-strip-copy strong {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.25;
}

.pf-hero-strip-copy small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

/* --- Sello sobre la foto --- */
.pf-hero-tag {
    position: absolute;
    right: clamp(1.5rem, 4vw, 3.5rem);
    top: 30%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 30px -22px rgba(15, 23, 42, 0.8);
}

.pf-hero-tag i {
    color: var(--pf-green-dark);
    font-size: 1.05rem;
}

.pf-hero-tag span {
    display: grid;
    line-height: 1.15;
}

.pf-hero-tag strong {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 900;
}

.pf-hero-tag small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

@media (max-width: 1199.98px) {
    .pf-hero-tag {
        display: none;
    }
}

/* En pantallas medianas el velo tiene que cubrir más, porque el texto ocupa
   casi todo el ancho. */
@media (max-width: 991.98px) {
    .pf-hero {
        min-height: auto;
        padding: 140px 0 2.5rem;
    }

    .pf-hero-scrim {
        background:
            linear-gradient(96deg,
                rgba(8, 14, 27, 0.92) 0%,
                rgba(8, 14, 27, 0.84) 55%,
                rgba(8, 14, 27, 0.6) 80%,
                rgba(8, 14, 27, 0.4) 100%),
            linear-gradient(180deg,
                rgba(8, 14, 27, 0.3) 0%,
                rgba(8, 14, 27, 0.2) 45%,
                rgba(8, 14, 27, 0.45) 100%);
    }
}

/* En móvil el reparto lateral no cabe: la foto se ve arriba, a modo de
   ventana, y el texto baja a fondo claro. Sigue siendo la misma imagen, así
   que no hay descarga extra. */
@media (max-width: 767.98px) {
    .pf-hero {
        /* Aquí la copia ya no va sobre la foto, sino debajo y sobre fondo
           claro: la paleta del hero vuelve a tinta oscura. */
        --pf-hero-ink: var(--ink);
        --pf-hero-text: var(--text);
        --pf-hero-chip: var(--text);
        --pf-hero-chip-icon: var(--pf-green);
        --pf-hero-accent-from: var(--pf-green);
        --pf-hero-accent-to: var(--primary);
        --pf-hero-badge-bg: var(--pf-green-soft);
        --pf-hero-badge-border: rgba(15, 157, 99, 0.2);
        --pf-hero-badge-ink: var(--pf-green-dark);
        --pf-hero-ghost-bg: var(--surface);
        --pf-hero-ghost-border: var(--border-strong);
        --pf-hero-ghost-ink: var(--ink);
        --pf-hero-shadow: none;

        padding-top: min(64vw, 340px);
        background: var(--bg);
    }

    /* La foto deja de cubrir todo el hero y se convierte en una ventana
       superior: estirada a lo alto de una pantalla de móvil quedaba un
       primer plano sin contexto, y el texto perdía contraste. */
    .pf-hero-media {
        inset: 0 0 auto;
        height: min(64vw, 340px);
    }

    .pf-hero-photo {
        object-position: 38% 68%;
    }

    /* La ventana de la foto casi no necesita velo: solo lo justo para que su
       borde inferior se funda con el fondo claro de la copia. */
    .pf-hero-scrim {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0) 38%,
            rgba(245, 248, 252, 0.55) 82%,
            var(--bg) 100%);
    }

    .pf-hero .btn-pf-ghost:hover,
    .pf-hero .btn-pf-ghost:focus-visible {
        border-color: var(--pf-green);
        background: var(--surface);
        color: var(--pf-green-dark);
    }

    .pf-hero-strip {
        flex-direction: column;
        gap: 0.5rem;
    }

    .pf-hero-strip-total {
        padding: 0.35rem 0.5rem 0.7rem;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
    }

    .pf-hero-strip-total br {
        display: none;
    }

    .pf-hero-strip-item {
        flex: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-hero-strip-item {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   3. Por qué existe la sección
   -------------------------------------------------------------------------- */
.pf-promise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.pf-promise-card {
    padding: 1.7rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--pf-radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-promise-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.pf-promise-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    border-radius: 13px;
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
    font-size: 1.15rem;
}

.pf-promise-card h3 {
    margin: 0 0 0.6rem;
    color: var(--ink);
    font-size: 1.12rem;
    font-weight: 900;
}

.pf-promise-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   4. Categorías
   -------------------------------------------------------------------------- */
.pf-categories {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

.pf-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* Es un <button> porque su función es filtrar el directorio, no navegar. */
.pf-category-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--pf-radius);
    background: var(--surface);
    text-align: left;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pf-category-card:hover,
.pf-category-card:focus-visible {
    border-color: var(--pf-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.pf-category-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 14px;
    background: color-mix(in srgb, var(--pf-accent) 12%, #ffffff);
    color: var(--pf-accent);
    font-size: 1.2rem;
}

.pf-category-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.pf-category-copy strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
}

.pf-category-copy small {
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.5;
}

.pf-category-count {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    flex: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pf-accent) 12%, #ffffff);
    color: var(--pf-accent);
    font-size: 0.82rem;
    font-weight: 900;
}

/* --------------------------------------------------------------------------
   5. Directorio: filtros
   -------------------------------------------------------------------------- */
.pf-filters {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(180px, 210px);
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.pf-filter-search,
.pf-filter-city {
    position: relative;
    display: flex;
    align-items: center;
}

.pf-filter-search > i,
.pf-filter-city > i {
    position: absolute;
    color: var(--muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.pf-filter-search > i {
    left: 0.9rem;
}

.pf-filter-city > i {
    right: 0.9rem;
}

.pf-filters input,
.pf-filters select {
    width: 100%;
    padding: 0.7rem 0.9rem 0.7rem 2.35rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 600;
    appearance: none;
}

.pf-filters select {
    padding-left: 0.9rem;
    padding-right: 2.2rem;
}

.pf-filters input:focus,
.pf-filters select:focus {
    outline: none;
    border-color: var(--pf-green);
    box-shadow: 0 0 0 3px rgba(15, 157, 99, 0.16);
}

.pf-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}

.pf-chip {
    --pf-accent: var(--pf-green);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.pf-chip span {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.07);
    font-size: 0.75rem;
}

.pf-chip:hover {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
}

.pf-chip.is-active {
    border-color: var(--pf-accent);
    background: color-mix(in srgb, var(--pf-accent) 10%, #ffffff);
    color: var(--pf-accent);
}

.pf-chip.is-active span {
    background: color-mix(in srgb, var(--pf-accent) 18%, #ffffff);
}

.pf-results {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.pf-results::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--pf-green);
    box-shadow: 0 0 0 5px rgba(15, 157, 99, 0.1);
    vertical-align: 0.08em;
}

/* --------------------------------------------------------------------------
   6. Directorio: fichas
   -------------------------------------------------------------------------- */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.pf-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--pf-radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
}

.pf-card:hover {
    border-color: color-mix(in srgb, var(--pf-accent) 40%, var(--border));
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.pf-card.is-featured {
    border-color: color-mix(in srgb, var(--pf-accent) 35%, var(--border));
}

.pf-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(420px 200px at 50% 0%, color-mix(in srgb, var(--pf-accent) 16%, #ffffff), transparent 70%),
        var(--surface-soft);
}

.pf-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Marcador mientras no hay fotografía real: un espacio gráfico honesto es
   mejor que rellenar con una imagen de banco que no es del lugar. */
.pf-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: color-mix(in srgb, var(--pf-accent) 55%, #ffffff);
    font-size: 2.6rem;
}

.pf-card-placeholder small {
    padding: 0.28rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--pf-accent) 18%, #ffffff);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: color-mix(in srgb, var(--pf-accent) 70%, var(--ink));
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pf-card-chip,
.pf-card-star {
    position: absolute;
    top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
    backdrop-filter: blur(6px);
}

.pf-card-chip {
    left: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--pf-accent);
}

.pf-card-star {
    right: 0.75rem;
    background: var(--ink);
    color: #ffd479;
}

.pf-card-body {
    flex: 1;
    padding: 1.2rem 1.25rem 0.9rem;
}

.pf-card-body h3 {
    margin: 0 0 0.35rem;
    color: var(--ink);
    font-size: 1.12rem;
    font-weight: 900;
}

.pf-card-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.8rem;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.pf-card-location i {
    color: var(--pf-accent);
}

.pf-card-summary {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.62;
}

.pf-card-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-card-perks li {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 700;
}

.pf-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

/* El nivel de acceso es el dato decisivo de la ficha, así que se codifica
   por color además de por texto. */
.pf-access {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.pf-access.is-full {
    background: var(--green-soft);
    color: #15803d;
}

.pf-access.is-outdoor {
    background: var(--amber-soft);
    color: var(--amber);
}

.pf-access.is-limited {
    background: var(--surface-soft);
    color: var(--primary-dark);
}

.pf-card-size {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.79rem;
    font-weight: 700;
}

.pf-empty {
    padding: 3rem 1.5rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--pf-radius);
    background: var(--surface);
    text-align: center;
}

.pf-empty-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
    font-size: 1.25rem;
}

.pf-empty h3 {
    margin: 0 0 0.5rem;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 900;
}

.pf-empty p {
    max-width: 34rem;
    margin: 0 auto 1.25rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.pf-directory-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 44rem;
    margin: 2rem auto 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: left;
}

.pf-directory-note i {
    margin-top: 0.15rem;
    color: var(--primary);
}

/* --------------------------------------------------------------------------
   7. Código de convivencia
   -------------------------------------------------------------------------- */
.pf-etiquette {
    background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}

.pf-etiquette-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.pf-rule {
    position: relative;
    padding: 1.6rem 1.4rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--pf-radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.pf-rule-number {
    position: absolute;
    top: 0.4rem;
    right: 0.9rem;
    color: rgba(15, 23, 42, 0.06);
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1;
}

.pf-rule-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.9rem;
    border-radius: 12px;
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
}

.pf-rule h3 {
    margin: 0 0 0.5rem;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 900;
}

.pf-rule p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.62;
}

/* --------------------------------------------------------------------------
   8. Kit de salida
   -------------------------------------------------------------------------- */
.pf-kit-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: 28px;
    background:
        radial-gradient(700px 320px at 90% 0%, rgba(126, 224, 176, 0.22), transparent 62%),
        linear-gradient(135deg, #0b3f2b 0%, #0a2f4f 100%);
    color: #ffffff;
    box-shadow: var(--shadow-lg);
}

.pf-kit-copy h2 {
    margin: 1rem 0 0.85rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    line-height: 1.2;
}

.pf-kit-copy p {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.98rem;
    line-height: 1.7;
}

.pf-kit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-kit-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--pf-radius-sm);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.88rem;
    font-weight: 700;
}

.pf-kit-list span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.14);
    color: #7ee0b0;
}

/* --------------------------------------------------------------------------
   9. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.pf-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
}

.pf-faq-item {
    border: 1px solid var(--border);
    border-radius: var(--pf-radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.pf-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.pf-faq-item summary::-webkit-details-marker {
    display: none;
}

.pf-faq-item summary i {
    flex: none;
    color: var(--pf-green);
    transition: transform 0.25s ease;
}

.pf-faq-item[open] summary i {
    transform: rotate(180deg);
}

.pf-faq-item p {
    margin: 0;
    padding: 0 1.25rem 1.2rem;
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.68;
}

/* --------------------------------------------------------------------------
   10. Cierre
   -------------------------------------------------------------------------- */
.pf-cta-panel {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.pf-cta-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 1.1rem;
    border-radius: 18px;
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
    font-size: 1.4rem;
}

.pf-cta-panel h2 {
    margin: 0 0 0.85rem;
    color: var(--ink);
    font-size: clamp(1.45rem, 3vw, 1.95rem);
    font-weight: 900;
    line-height: 1.22;
}

.pf-cta-panel p {
    max-width: 36rem;
    margin: 0 auto 1.75rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.pf-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}


/* --------------------------------------------------------------------------
   10.1 Formulario de propuesta pet friendly
   -------------------------------------------------------------------------- */
.pf-cta {
    position: relative;
    /* `clip` y no `hidden`: los dos recortan, pero `hidden` convierte a la
       sección en un contenedor de desplazamiento y eso deja sin efecto el
       `position: sticky` de la tarjeta verde. */
    overflow: clip;
    background:
        radial-gradient(900px 360px at 8% 0%, rgba(15, 157, 99, 0.12), transparent 64%),
        linear-gradient(180deg, var(--bg) 0%, #ffffff 48%, #f4faf7 100%);
}

/* Las dos columnas se alinean arriba, no se estiran: la tarjeta verde mide lo
   que mide su contenido. Estirarla hasta la altura del formulario dejaba un
   vacío verde enorme y, sobre todo, impedía que `sticky` funcionara, porque un
   elemento tan alto como su contenedor no tiene recorrido por el que deslizar. */
.pf-application-grid {
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
}

.pf-cta .help-join-card,
.pf-cta .help-join-form-wrap {
    border-radius: 24px;
}

/* El acompañamiento pegajoso se declara más abajo, a partir de 992px: en una
   sola columna la tarjeta va antes del formulario y fijarla solo robaría
   pantalla mientras se escribe. */
.pf-cta .help-join-card {
    position: static;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(145deg, rgba(7, 42, 29, 0.94) 0%, rgba(13, 94, 61, 0.94) 54%, rgba(30, 64, 175, 0.9) 100%),
        #0f3f2c;
    color: #ffffff;
    box-shadow: 0 26px 70px rgba(7, 42, 29, 0.26);
}

.pf-cta .help-join-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 82%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 82%);
}

.pf-cta .help-join-card > * {
    position: relative;
    z-index: 1;
}

.pf-cta .pf-cta-icon {
    margin: 0 0 1.15rem;
    background: rgba(255, 255, 255, 0.14);
    color: #a7f3d0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.pf-cta .help-join-card h2 {
    max-width: 25rem;
    margin: 0 0 0.95rem;
    color: #ffffff;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 950;
    line-height: 1.12;
}

.pf-cta .help-join-card > p:not(.help-join-legal) {
    margin: 0 0 1.35rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.72;
}

.pf-cta .help-join-list {
    gap: 0.7rem;
    margin-top: 0;
}

.pf-cta .help-join-list li {
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.pf-cta .help-join-list i {
    color: #86efac;
}

.pf-cta .help-join-legal {
    margin-top: 0.15rem;
    border-color: rgba(167, 243, 208, 0.22);
    background: rgba(4, 120, 87, 0.2);
}

.pf-cta .help-join-form-wrap {
    position: relative;
    padding: clamp(1.1rem, 2.5vw, 1.55rem);
    border: 1px solid rgba(15, 157, 99, 0.14);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(15, 157, 99, 0.32), rgba(50, 85, 215, 0.22)) border-box;
    box-shadow: 0 24px 68px rgba(15, 23, 42, 0.12);
}

.pf-cta .help-form {
    display: block;
    padding: clamp(1.1rem, 2.4vw, 1.45rem);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
}

.pf-form-head {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(15, 157, 99, 0.14);
}

.pf-form-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    color: var(--pf-green-dark);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pf-form-head h3 {
    margin: 0 0 0.35rem;
    color: var(--ink);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 950;
    line-height: 1.2;
}

.pf-form-head p {
    max-width: 40rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.6;
}

.pf-cta .help-form-grid {
    gap: 1rem;
}

.pf-cta .help-field > span,
.pf-cta .help-needs legend {
    color: #102033;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.pf-cta .help-input,
.pf-cta .help-field textarea {
    border-color: rgba(15, 23, 42, 0.13);
    background: #fbfefd;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pf-cta .help-input:hover,
.pf-cta .help-field textarea:hover {
    border-color: rgba(15, 157, 99, 0.32);
}

.pf-cta .help-input:focus-within,
.pf-cta .help-field textarea:focus {
    border-color: rgba(15, 157, 99, 0.58);
    box-shadow: 0 0 0 4px rgba(15, 157, 99, 0.13);
}

.pf-cta .help-input > i:first-child {
    color: var(--pf-green);
}

.pf-cta .help-select-options {
    border-color: rgba(15, 157, 99, 0.18);
}

.pf-cta .help-select-option:hover,
.pf-cta .help-select-option:focus-visible,
.pf-cta .help-select-option.is-selected {
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
}

.pf-cta .help-select-option.is-selected::after {
    color: var(--pf-green);
}

.pf-cta .help-needs {
    margin: 1.35rem 0;
    padding: 1rem;
    border: 1px solid rgba(15, 157, 99, 0.12);
    border-radius: 16px;
    background: rgba(231, 247, 240, 0.42);
}

.pf-cta .help-needs-grid {
    gap: 0.55rem;
}

.pf-cta .help-need-chip span {
    border-color: rgba(15, 23, 42, 0.12);
    background: #ffffff;
}

.pf-cta .help-need-chip input:checked + span {
    border-color: rgba(15, 157, 99, 0.42);
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
}

.pf-cta .help-need-chip input:focus-visible + span {
    border-color: var(--pf-green);
    box-shadow: 0 0 0 4px rgba(15, 157, 99, 0.14);
}

.pf-cta .help-check {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #f8fbfa;
}

.pf-cta .help-check input {
    accent-color: var(--pf-green);
}

.pf-cta .help-check a {
    color: var(--pf-green-dark);
}

.pf-cta .help-form-submit {
    min-height: 52px;
    border: 0;
    background: linear-gradient(135deg, var(--pf-green) 0%, var(--primary) 100%);
    box-shadow: 0 18px 36px rgba(15, 157, 99, 0.26);
}

.pf-cta .help-form-submit:hover,
.pf-cta .help-form-submit:focus-visible {
    box-shadow: 0 22px 42px rgba(15, 157, 99, 0.32);
}

.pf-cta .help-form-secure {
    color: #667085;
}

/* Solo con dos columnas la tarjeta acompaña al formulario mientras se baja.
   `top` deja hueco para la cabecera fija del sitio. */
@media (min-width: 992px) {
    .pf-cta .help-join-card {
        position: sticky;
        top: 110px;
    }
}

@media (max-width: 991.98px) {
    .pf-application-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 575.98px) {
    .pf-cta .help-form-submit {
        width: 100%;
    }
}/* --------------------------------------------------------------------------
   10.2 Formulario por pasos
   --------------------------------------------------------------------------
   Todo lo de aquí es mejora progresiva: los elementos llegan con [hidden] y
   pet-friendly-form.js los revela. Sin JavaScript no se ve ninguno de estos
   bloques y el formulario queda como una sola columna larga, que funciona.
   -------------------------------------------------------------------------- */

/* --- Barra de avance --- */
.pf-progress {
    margin: 0 0 1.15rem;
}

.pf-progress-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.07);
}

.pf-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pf-green), var(--primary));
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-progress[data-complete="1"] .pf-progress-bar span {
    background: linear-gradient(90deg, var(--pf-green), var(--pf-green-dark));
}

.pf-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 750;
}

.pf-progress-label strong {
    color: var(--pf-green-dark);
    font-weight: 900;
}

/* --- Indicador de pasos --- */
.pf-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.pf-stepper-item button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.pf-stepper-item button:hover {
    border-color: color-mix(in srgb, var(--pf-green) 38%, var(--border));
}

.pf-stepper-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 900;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

/* El número y la palomita ocupan el mismo lugar: se alterna cuál se ve. */
.pf-stepper-mark i,
.pf-stepper-mark b {
    grid-area: 1 / 1;
}

.pf-stepper-mark i { display: none; }

.pf-stepper-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.pf-stepper-copy strong {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 900;
}

.pf-stepper-copy small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.pf-stepper-item.is-current button {
    border-color: color-mix(in srgb, var(--pf-green) 55%, transparent);
    background: linear-gradient(180deg, #ffffff, var(--pf-green-soft));
    box-shadow: 0 0 0 3px rgba(15, 157, 99, 0.12);
}

.pf-stepper-item.is-current .pf-stepper-mark {
    background: var(--pf-green);
    color: #ffffff;
}

.pf-stepper-item.is-done .pf-stepper-mark {
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
}

.pf-stepper-item.is-done .pf-stepper-mark i { display: block; }
.pf-stepper-item.is-done .pf-stepper-mark b { display: none; }

/* --- Paso --- */
.pf-step {
    animation: pf-step-in 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pf-step-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.pf-step-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1rem 0 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(50, 85, 215, 0.14);
    border-radius: 14px;
    background: rgba(50, 85, 215, 0.05);
    color: var(--muted);
    font-size: 0.83rem;
    font-weight: 650;
    line-height: 1.6;
}

.pf-step-note i {
    margin-top: 0.15rem;
    color: var(--primary);
}

.pf-step-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(220, 38, 38, 0.24);
    border-radius: 12px;
    background: var(--red-soft);
    color: #b91c1c;
    font-size: 0.85rem;
    font-weight: 800;
}

/* --- Estados de campo --- */
.pf-cta .help-field.is-field-invalid .help-input,
.pf-cta .help-field.is-field-invalid textarea {
    border-color: rgba(220, 38, 38, 0.45);
    background: #fffafa;
}

.pf-cta .help-field.is-field-valid .help-input {
    border-color: color-mix(in srgb, var(--pf-green) 38%, transparent);
}

/* Palomita discreta al completar un campo correctamente. No sustituye al
   texto: es un refuerzo, no la única señal. */
.pf-cta .help-field.is-field-valid > span::after {
    content: "\f00c";
    margin-left: 0.4rem;
    color: var(--pf-green);
    font-family: "Font Awesome 6 Free";
    font-size: 0.72rem;
    font-weight: 900;
}

.pf-cta .help-check.is-field-invalid span {
    color: #b91c1c;
}

/* --- Repaso final --- */
.pf-review {
    margin: 1.15rem 0 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 157, 99, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, var(--pf-green-soft));
}

.pf-review-head strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 900;
}

.pf-review-head i { color: var(--pf-green-dark); }

.pf-review-list {
    display: grid;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
}

.pf-review-row {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0.75rem;
    align-items: baseline;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
}

.pf-review-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pf-review-row dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.pf-review-row dd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 750;
    word-break: break-word;
}

.pf-review-edit {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pf-green-dark);
    font-size: 0.75rem;
    font-weight: 900;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Navegación y pie --- */
.pf-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.35rem;
}

.pf-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 850;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pf-nav-back:hover {
    border-color: var(--pf-green);
    color: var(--pf-green-dark);
}

/* La acción que hace avanzar ocupa el resto de la fila: es la que se busca. */
.pf-cta .pf-nav-next,
.pf-cta .help-form-submit {
    flex: 1;
    min-width: 200px;
    margin: 0;
}

.pf-form-foot {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.pf-cta .pf-form-foot .help-form-secure {
    margin: 0;
}

.pf-draft {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.pf-draft i { color: var(--pf-green-dark); }

.pf-draft button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: underline;
    cursor: pointer;
}

.pf-draft button:hover { color: #b91c1c; }

@media (max-width: 767.98px) {
    .pf-stepper {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
    }

    /* En una columna, los pasos que no son el actual se reducen a su marca y
       su título: la lista completa ocuparía media pantalla. */
    .pf-stepper-item:not(.is-current) .pf-stepper-copy small {
        display: none;
    }

    .pf-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pf-review-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-step { animation: none; }
    .pf-progress-bar span { transition: none; }
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* El hero fotográfico resuelve sus propias medidas en el bloque 2; aquí
       solo quedan las secciones que siguen usando rejilla de dos columnas. */
    .pf-kit-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-promise-grid,
    .pf-etiquette-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-filter-chips {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
    }

    .pf-chip {
        flex: none;
    }

    .pf-faq-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .pf-hero-actions .btn,
    .pf-cta-actions .btn {
        width: 100%;
    }

    .pf-promise-grid,
    .pf-etiquette-grid,
    .pf-kit-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   12. Preferencias de movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pf-page * {
        transition: none !important;
    }

    .pf-card:hover,
    .pf-category-card:hover,
    .pf-promise-card:hover {
        transform: none;
    }
}



/* --------------------------------------------------------------------------
   Directorio en actualizacion
   -------------------------------------------------------------------------- */
.pf-update-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid rgba(15, 157, 99, 0.18);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(231, 247, 240, 0.92), rgba(255, 255, 255, 0.96)),
        var(--surface);
    box-shadow: var(--shadow-md);
}

.pf-update-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 18px;
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
    font-size: 1.35rem;
}

.pf-update-copy h3,
.pf-update-modal-card h2 {
    margin: 0 0 0.65rem;
    color: var(--ink);
    font-weight: 950;
    line-height: 1.16;
}

.pf-update-copy h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

.pf-update-copy p,
.pf-update-modal-card p {
    margin: 0 0 0.85rem;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.68;
}

.pf-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.pf-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 44px;
    padding: 0.68rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pf-social-links a:hover,
.pf-social-links a:focus-visible {
    border-color: var(--pf-green);
    color: var(--pf-green-dark);
    box-shadow: 0 12px 24px rgba(15, 157, 99, 0.16);
    transform: translateY(-2px);
}

.pf-social-links i {
    font-size: 1.05rem;
}

.pf-social-links-centered {
    justify-content: center;
}

body.pf-modal-open {
    overflow: hidden;
}

.pf-update-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 1.2rem;
}

.pf-update-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(8px);
}

.pf-update-modal-card {
    position: relative;
    width: min(100%, 520px);
    padding: clamp(1.5rem, 4vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    text-align: center;
    animation: pf-modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-update-modal-card .pf-update-icon {
    margin: 0 auto 1rem;
}

.pf-update-modal-card h2 {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.pf-update-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.pf-update-modal-close:hover,
.pf-update-modal-close:focus-visible {
    border-color: var(--pf-green);
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
}

@keyframes pf-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
    .pf-update-panel {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .pf-update-panel .pf-update-icon {
        margin: 0 auto;
    }

    .pf-social-links {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-update-modal-card {
        animation: none;
    }
}

/* Ajuste fino del modal de actualizacion: entrada y salida con desvanecido. */
.pf-update-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.pf-update-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.pf-update-modal.is-closing {
    opacity: 0;
    pointer-events: none;
}

.pf-update-modal-backdrop {
    transition: backdrop-filter 0.24s ease, background 0.24s ease;
}

.pf-update-modal.is-closing .pf-update-modal-backdrop {
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0);
}

.pf-update-modal-card {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: none;
    transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-update-modal.is-visible .pf-update-modal-card {
    opacity: 1;
    transform: none;
}

.pf-update-modal.is-closing .pf-update-modal-card {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
}

.pf-update-continue {
    width: 100%;
    max-width: 240px;
    min-height: 48px;
    margin-top: 1.2rem;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pf-update-modal,
    .pf-update-modal-backdrop,
    .pf-update-modal-card {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   13. Guía CDMX: respuesta rápida, agrupación por categoría y ficha completa
   -----------------------------------------------------------------------
   Bloque añadido cuando el directorio pasó a ser la guía de 17 lugares de
   CDMX. Todo sigue bajo .pf-page y con el prefijo .pf-.
   -------------------------------------------------------------------------- */

/* --- Respuesta rápida --- */
.pf-quick {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    max-width: 62rem;
    margin: 0 auto 2.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--pf-green);
    border-radius: var(--pf-radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.pf-quick-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--pf-green-soft);
    color: var(--pf-green-dark);
    font-size: 0.95rem;
}

.pf-quick strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pf-quick p {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

/* --- Segunda fila de filtros --- */
.pf-filters-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.pf-filters-secondary .pf-filter-chips {
    justify-content: flex-start;
}

.pf-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pf-filter-reset:hover {
    border-color: var(--pf-green);
    color: var(--pf-green-dark);
}

/* --- Grupo por categoría --- */
.pf-group + .pf-group {
    margin-top: 3rem;
}

.pf-group-head {
    margin-bottom: 1.4rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.pf-group-head h2 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.4rem;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 900;
}

.pf-group-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-accent) 12%, #ffffff);
    color: var(--pf-accent);
    font-size: 0.95rem;
}

/* El número de lugares de la categoría, junto al título y no en otra línea. */
.pf-group-head h2 small {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.pf-group-head p {
    max-width: 58rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.65;
}

/* --- Ficha: espacio de la foto y condición --- */
.pf-card-placeholder {
    flex-direction: column;
    gap: 0.45rem;
    font-size: 2.2rem;
}

/* Deja claro que el hueco está reservado para una fotografía real y no es
   un error de carga. Se retira solo con poner 'photo' en el catálogo. */
.pf-card-placeholder small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pf-card-policy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.55;
}

.pf-card-policy i {
    margin-top: 0.15rem;
    color: var(--pf-accent);
}

.pf-card-policy strong {
    color: var(--ink);
    font-weight: 900;
}

/* --- Ficha: acciones --- */
.pf-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.1rem;
}

.pf-card-more,
.pf-card-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    font-size: 0.83rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pf-card-more {
    flex: 1;
    border: 1px solid var(--pf-accent);
    background: color-mix(in srgb, var(--pf-accent) 8%, #ffffff);
    color: var(--pf-accent);
}

.pf-card-more:hover {
    background: color-mix(in srgb, var(--pf-accent) 16%, #ffffff);
}

.pf-card-map {
    flex: none;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--muted);
}

.pf-card-map:hover {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
}

/* --- Detalle (dentro de la ficha y clonado en el panel) --- */
.pf-detail-list {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.pf-detail-list dt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.3rem;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pf-detail-list dt i {
    color: var(--pf-accent);
}

.pf-detail-list dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.65;
}

.pf-detail-source {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.4rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.pf-detail-source i {
    margin-top: 0.2rem;
    color: var(--pf-green-dark);
}

/* --- Pie del directorio --- */
.pf-directory-foot {
    display: grid;
    gap: 0.9rem;
    max-width: 46rem;
    margin: 2.5rem auto 0;
}

.pf-reviewed {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.pf-reviewed i {
    margin-top: 0.15rem;
    color: var(--pf-green-dark);
}

.pf-directory-note {
    margin: 0;
}

/* --- Panel lateral con la ficha completa --- */
.pf-sheet {
    position: fixed;
    inset: 0;
    z-index: 1200;
    --pf-accent: var(--pf-green);
}

body.pf-sheet-open {
    overflow: hidden;
}

.pf-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.pf-sheet.is-visible .pf-sheet-backdrop {
    opacity: 1;
}

.pf-sheet-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(440px, 100%);
    height: 100%;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--surface);
    box-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    transition: transform 0.24s ease;
}

.pf-sheet.is-visible .pf-sheet-panel {
    transform: translateX(0);
}

.pf-sheet-panel:focus {
    outline: none;
}

.pf-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--border);
}

.pf-sheet-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pf-accent) 12%, #ffffff);
    color: var(--pf-accent);
    font-size: 0.73rem;
    font-weight: 900;
}

.pf-sheet-head h2 {
    margin: 0 0 0.25rem;
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.3;
}

.pf-sheet-location {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.pf-sheet-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pf-sheet-close:hover {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
}

.pf-sheet-body {
    flex: 1;
}

.pf-sheet-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}

.pf-sheet-foot .btn {
    flex: 1;
    justify-content: center;
}

.pf-sheet-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.83rem;
    font-weight: 850;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pf-sheet-copy:hover {
    border-color: var(--pf-green);
    color: var(--pf-green-dark);
}

@media (max-width: 575.98px) {
    .pf-quick {
        flex-direction: column;
        gap: 0.6rem;
    }

    .pf-card-actions {
        flex-direction: column;
    }

    .pf-card-map {
        justify-content: center;
    }

    /* En móvil el panel sube desde abajo: llegar al aspa de una hoja lateral
       a pantalla completa es incómodo con una sola mano. */
    .pf-sheet-panel {
        top: auto;
        bottom: 0;
        width: 100%;
        height: min(88vh, 100%);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .pf-sheet.is-visible .pf-sheet-panel {
        transform: translateY(0);
    }

    .pf-sheet-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-sheet-copy {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-sheet-panel,
    .pf-sheet-backdrop {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   14. Barra de filtros pegada bajo el menú
   -----------------------------------------------------------------------
   La barra es sticky dentro del .container del directorio, así que su
   recorrido termina donde termina la sección: baja pegada mientras se
   recorren las fichas y se despega sola al llegar al pie del directorio.
   Fuera de la sección nunca aparece, porque no sale de su contenedor.

   'top' deja libre la altura del menú fijo ya reducido (.astravex-nav
   .is-scrolled mide 66px), que es el estado en el que siempre se encuentra
   cuando se ha bajado hasta el directorio.
   -------------------------------------------------------------------------- */
.pf-directory {
    --pf-sticky-top: 74px;
}

/* Testigo de 1px: cuando cruza el borde superior, el script sabe que la
   barra ya quedó pegada. Evita escuchar el scroll continuamente. */
.pf-filterbar-sentinel {
    display: block;
    height: 1px;
    margin-bottom: -1px;
}

.pf-filterbar {
    position: sticky;
    top: var(--pf-sticky-top);
    z-index: 30;
    /* El fondo tapa las fichas que pasan por debajo; los márgenes negativos
       lo extienden hasta el borde del contenedor para que no se vea una
       franja de contenido colándose por los lados. */
    margin: 0 -0.75rem;
    padding: 0.75rem 0.75rem 0.1rem;
    background: var(--bg);
    transition: box-shadow 0.2s ease;
}

.pf-filterbar.is-stuck {
    box-shadow: 0 16px 22px -20px rgba(15, 23, 42, 0.55);
}

/* Pegada ocupa pantalla, no papel: se comprime un poco para que sigan
   viéndose las fichas mientras se filtra. */
.pf-filterbar.is-stuck .pf-filters {
    padding: 0.6rem;
    margin-bottom: 0.7rem;
    box-shadow: var(--shadow-md);
}

.pf-filterbar.is-stuck .pf-filters-secondary {
    margin-bottom: 0.75rem;
}

@media (max-width: 991.98px) {
    .pf-directory {
        --pf-sticky-top: 70px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-filterbar {
        transition: none;
    }
}