/* The frame of a customer's site: menu, call to action and footer
   (negocios.site_frame). Loaded by the business page and by every other page
   of the customer's site, which carry different stylesheets: the page sets the
   root font to 10px and carries Bootstrap, the blog keeps 16px, has no
   Bootstrap and paints --primary in ConectaPages' blue. So this file depends
   on none of them: sizes in px (what the page drew in rem), its own colours,
   its own font. */

:root {
    --bp-primary: #0da170;
    --bp-primary-dark: #065f46;
    --bp-primary-light: #4de7b7;
    --bp-gray-200: #cdd3e1;
    --bp-gray-400: #555f7d;
    --bp-gray-900: #0a0f1a;
}
.bp-nav, .bp-footer, .bp-frame-cta {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* ===== Menu ===== */
.bp-nav {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bp-gray-200);
}
.bp-nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 6px 10px;
    display: flex; align-items: center; gap: 8px;
}
.bp-nav-brand {
    font-weight: 700; font-size: clamp(12px, 2vw, 14px); color: var(--bp-gray-900);
    text-decoration: none; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; flex-shrink: 1; min-width: 0;
}
.bp-nav-links {
    display: flex; gap: 6px; list-style: none; margin: 0; padding: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-shrink: 0;
}
.bp-nav-links::-webkit-scrollbar { display: none; }
.bp-nav-links a {
    text-decoration: none; color: var(--bp-gray-400); font-size: clamp(11px, 1.5vw, 12px);
    font-weight: 500; white-space: nowrap; padding: 3px 0;
    transition: color 0.2s ease;
}
.bp-nav-links a:hover, .bp-nav-links a:active { color: var(--bp-primary); }
.bp-nav-edit {
    margin-left: auto; flex-shrink: 0; white-space: nowrap;
    padding: 3px 7.5px; border: 1px solid var(--bp-gray-200); border-radius: 999px;
    color: var(--bp-gray-900); font-size: 9px; font-weight: 600; text-decoration: none;
}
.bp-nav-edit:hover { border-color: var(--bp-primary); color: var(--bp-primary); }
.bp-nav-inner:has(.bp-nav-edit) .bp-nav-links { flex-shrink: 1; min-width: 0; }
@media (max-width: 767px) {
    .bp-nav-edit { font-size: 8px; padding: 2.5px 6px; }
    /* The name on its own line, the links below in a row that scrolls
       sideways: on one line the links squeezed the name to "Adelcio ...". */
    .bp-nav-inner { flex-wrap: wrap; row-gap: 2px; padding-bottom: 2px; }
    .bp-nav-brand { flex: 1 1 auto; }
    .bp-nav-edit { order: 2; }
    .bp-nav-links, .bp-nav-inner:has(.bp-nav-edit) .bp-nav-links {
        order: 3; flex: 1 1 100%; min-width: 0; gap: 2px; margin: 0 -4px;
    }
    .bp-nav-links a { display: block; padding: 5.5px 6px; font-size: 13px; }
}
@media (min-width: 768px) {
    .bp-nav-inner { padding: 7px 15px; gap: 12px; }
    .bp-nav-brand { flex-shrink: 0; }
    .bp-nav-links { gap: 12px; overflow: visible; }
}

/* Clear of the notch, at every width: on the page this always won over the
   side padding above, and still does. */
@supports (padding: env(safe-area-inset-bottom)) {
    .bp-nav-inner { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
}

/* ===== Call to action ===== */
.bento-action-text {
    text-wrap: balance;
    margin: 0 0 12px; color: var(--muted, #6b6b70); max-width: 42ch;
    font-size: clamp(9.5px, 1.6vw, 10.5px);
}
.bt-icon { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.bt-text { display: flex; flex-direction: column; text-align: left; }
.bt-text .fw-bold { font-weight: 700; }
.btn-primary-custom {
    /* What Bootstrap's .btn gives the page, for the pages without it. */
    font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none;
    vertical-align: middle; cursor: pointer; user-select: none;
    font-size: clamp(12px, 2vw, 14px);
    background: linear-gradient(135deg, var(--bp-primary), var(--bp-primary-dark));
    color: #fff; border: none; border-radius: 50px;
    transition: all 0.3s ease; padding: 6px 12px;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 14px rgba(13,161,112,0.3); min-height: 44px;
}
.btn-primary-custom:hover {
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,161,112,0.4); color: #fff;
}
@media (min-width: 600px) {
    .bt-icon { width: 24px; height: 24px; }
    .btn-primary-custom { padding: 8px 18px; gap: 10px; }
}

/* The card the call to action sits in, on the pages other than the business
   page, which lays it out in its own grid. */
.bp-frame-cta {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    max-width: 760px; margin: 32px auto; padding: 24px 16px;
    background: #fff; border: 1px solid var(--bp-gray-200); border-radius: 16px;
}
.bp-frame-cta .bento-action-text { font-size: 15px; }

/* ===== Footer ===== */
.bp-footer {
    background: var(--bp-gray-900); color: var(--bp-gray-200);
    padding: 15px 0; margin-top: 5px; font-size: 12px; line-height: 1.5;
}
.bp-footer p { margin: 0; font-size: 11px; }
.bp-footer-inner {
    max-width: 1300px; margin: 0 auto; padding: 0 7.5px;
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.bp-footer-credit {
    display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px;
}
.bp-footer-credit p { color: #6c757d; }
.bp-footer-quiet { color: rgba(255,255,255,0.5); text-decoration: underline; }
.bp-footer-brand { color: #fff; text-decoration: none; }
.bp-footer a { transition: all 0.3s ease; }
.bp-footer a:hover { color: var(--bp-primary-light); text-decoration: underline; }
@media (min-width: 768px) {
    .bp-footer-inner { flex-direction: row; justify-content: space-between; gap: 0; text-align: left; }
    .bp-footer-credit { flex-direction: row; justify-content: flex-end; }
}