@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/plus-jakarta-sans-latin.153fc85b7029.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { color-scheme: light; --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --shadow-e1: 0 1px 2px rgba(10,10,10,.08); --shadow-e2: 0 8px 24px rgba(10,10,10,.18); --radius-sm: 8px; --radius-icon: 12px; --radius-md: 14px; --radius-cta: 16px; --radius-lg: 20px; --radius-sheet: 24px; --radius-xl: 28px; --radius-full: 999px; --text-display-size: 40px; --text-display-line: 44px; --text-title-size: 28px; --text-title-line: 32px; --text-heading-size: 20px; --text-heading-line: 26px; --text-body-size: 16px; --text-body-line: 24px; --text-label-size: 14px; --text-label-line: 20px; --text-caption-size: 13px; --text-caption-line: 18px; --color-bg: #FFFFFF; --color-alt: #F4F4F2; --color-ink: #0A0A0A; --color-muted: #6B6B6B; --color-line: #E6E6E3; --color-green: #0B4D2C; --color-green-bg: #E3F0E8; --color-brand: #0B4D2C; --color-on-brand: #FFFFFF; --color-brand-tile: #E3F0E8; --color-lime: #C8FA4B; --color-on-lime: #0A0A0A; --color-novo-bg: #0A0A0A; --color-novo-fg: #C8FA4B; --color-warn-bg: #FDF1DC; --color-warn-fg: #8A5A00; --color-danger: #CE2C31; --color-danger-bg: #FDECEC; --color-skeleton: #E9E9E6; --color-skeleton-highlight: #F7F7F5; --color-star: #F5A524; --color-qr-bg: #FFFFFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --color-bg: #0A0A0A; --color-alt: #161616; --color-ink: #F4F4F2; --color-muted: #9A9A9A; --color-line: #2A2A2A; --color-green: #7BD88F; --color-green-bg: #12301F; --color-brand: #12301F; --color-on-brand: #F4F4F2; --color-brand-tile: #0B4D2C; --color-lime: #C8FA4B; --color-on-lime: #0A0A0A; --color-novo-bg: #C8FA4B; --color-novo-fg: #0A0A0A; --color-warn-bg: #2E2410; --color-warn-fg: #F5C46B; --color-danger: #EC5D5E; --color-danger-bg: #2A1213; --color-skeleton: #1C1C1C; --color-skeleton-highlight: #272727; --color-star: #F5A524; --color-qr-bg: #FFFFFF; } } :root[data-theme='dark'] { color-scheme: dark; --color-bg: #0A0A0A; --color-alt: #161616; --color-ink: #F4F4F2; --color-muted: #9A9A9A; --color-line: #2A2A2A; --color-green: #7BD88F; --color-green-bg: #12301F; --color-brand: #12301F; --color-on-brand: #F4F4F2; --color-brand-tile: #0B4D2C; --color-lime: #C8FA4B; --color-on-lime: #0A0A0A; --color-novo-bg: #C8FA4B; --color-novo-fg: #0A0A0A; --color-warn-bg: #2E2410; --color-warn-fg: #F5C46B; --color-danger: #EC5D5E; --color-danger-bg: #2A1213; --color-skeleton: #1C1C1C; --color-skeleton-highlight: #272727; --color-star: #F5A524; --color-qr-bg: #FFFFFF; } @media (max-width: 359.98px) { :root { --text-display-size: 34px; --text-display-line: 38px; --text-title-size: 24px; --text-title-line: 28px; --text-heading-size: 18px; --text-heading-line: 24px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(64px + 16px); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-family); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: 500; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; } a { color: inherit; } svg { flex-shrink: 0; } [hidden] { display: none !important; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -56px; padding: 12px 16px; border-radius: var(--radius-cta); background: var(--color-ink); color: var(--color-bg); font-weight: 700; text-decoration: none; z-index: 10; } .skip-link:focus-visible { top: 8px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 150ms !important; } } :root { --gutter: 16px; } @media (min-width: 360px) { :root { --gutter: 20px; } } @media (min-width: 768px) { :root { --gutter: 32px; } } .site-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); } .site-reading { max-width: 720px; } .site-main { flex: 1; padding-block: 24px 48px; } @media (min-width: 768px) { .site-main { padding-block: 40px 64px; } } .site-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .site-stack--tight { gap: 12px; } @media (min-width: 768px) { .site-stack > .ui-button { justify-self: start; } } .site-section { margin-top: 48px; } @media (min-width: 768px) { .site-section { margin-top: 64px; } } .site-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } @media (min-width: 768px) { .site-grid { gap: 24px; } } .site-header { position: sticky; top: 0; z-index: 5; background: var(--color-bg); border-bottom: 1px solid var(--color-line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; } .site-header__home { display: inline-flex; align-items: center; min-height: 48px; border-radius: var(--radius-sm); } .site-header__nav { display: flex; gap: 4px; } @media (min-width: 768px) { .site-header__nav { gap: 8px; } } .site-nav-link { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 12px; border-radius: var(--radius-full); text-decoration: none; white-space: nowrap; font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 700; } .site-nav-link[aria-current='page'] { background: var(--color-alt); } /* Atalhos do app (Início, Buscar) só no computador; a Ajuda sai do topo no compact (fica no rodapé). */ .site-nav-link--wide { display: none; } @media (min-width: 768px) { .site-nav-link--wide { display: inline-flex; } } @media (max-width: 359.98px) { .site-nav-link--roomy { display: none; } .site-nav-link { padding-inline: 8px; } } .site-logo { display: block; height: 32px; width: auto; } .site-logo__wordmark { fill: var(--color-ink); } .site-logo__smile { stroke: var(--color-green); } .site-footer { background: var(--color-alt); padding-block: 40px; } .site-footer__grid { display: grid; gap: 32px; } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr auto; align-items: start; } } .site-footer__links { display: grid; gap: 4px 24px; list-style: none; } @media (min-width: 768px) { .site-footer__links { grid-template-columns: repeat(2, auto); } } .site-footer__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 700; text-decoration: none; } .site-footer__link:hover, .site-nav-link:hover { text-decoration: underline; } .site-footer__contact { display: inline-flex; align-items: center; min-height: 44px; } .ui-text--display { font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: 800; letter-spacing: -0.02em; } .ui-text--title { font-size: var(--text-title-size); line-height: var(--text-title-line); font-weight: 800; letter-spacing: -0.02em; } .ui-text--heading { font-size: var(--text-heading-size); line-height: var(--text-heading-line); font-weight: 700; letter-spacing: -0.01em; } .ui-text--body { font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: 500; letter-spacing: 0; } .ui-text--label { font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 700; letter-spacing: 0; } .ui-text--caption { font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 500; letter-spacing: 0; } .ui-text--muted { color: var(--color-muted); } .ui-text--green { color: var(--color-green); } .ui-text--eyebrow { color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; } .ui-link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 24px; border: 1px solid transparent; border-radius: var(--radius-cta); text-decoration: none; cursor: pointer; font: inherit; font-size: 16px; line-height: 20px; font-weight: 700; transition: transform 150ms cubic-bezier(.2,0,0,1); } .ui-button:active { transform: scale(.98); } .ui-button--compact { min-height: 48px; padding-inline: 20px; } .ui-button--block { width: 100%; } .ui-button--primary { background: var(--color-lime); color: var(--color-on-lime); } .ui-button--secondary { background: var(--color-ink); color: var(--color-bg); } .ui-button--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line); } .ui-button--neutral { background: var(--color-alt); color: var(--color-ink); } .ui-button[aria-disabled='true'] { cursor: default; } .ui-button[aria-disabled='true']:active { transform: none; } .ui-actions { display: flex; flex-wrap: wrap; gap: 12px; } .ui-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 10px; justify-self: start; border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: 700; } .ui-badge--green { background: var(--color-green-bg); color: var(--color-green); } .ui-badge--novo { background: var(--color-novo-bg); color: var(--color-novo-fg); } .ui-badge--neutral { background: var(--color-bg); color: var(--color-ink); border: 1px solid var(--color-line); } .ui-badge--warn { background: var(--color-warn-bg); color: var(--color-warn-fg); } .ui-card { border-radius: var(--radius-xl); padding: 24px; background: var(--color-alt); color: var(--color-ink); } @media (min-width: 768px) { .ui-card { padding: 32px; } } .ui-card--compact { border-radius: var(--radius-lg); padding: 20px; } .ui-card--brand { background: var(--color-brand); color: var(--color-on-brand); } .ui-card--brand .ui-text--muted { color: var(--color-on-brand); opacity: .72; } .ui-card--lime { background: var(--color-lime); color: var(--color-on-lime); } .ui-card--outline { background: var(--color-bg); border: 1px solid var(--color-line); } .ui-card--raised { background: var(--color-bg); box-shadow: var(--shadow-e2); } .ui-icon { width: 20px; height: 20px; } .ui-icon--large { width: 24px; height: 24px; } .ui-icon-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-icon); background: var(--color-bg); color: var(--color-green); } .ui-card--brand .ui-icon-tile, .ui-card--brand .ui-badge--green { background: var(--color-brand-tile); color: var(--color-green); } .ui-icon-tile--round { border-radius: var(--radius-full); width: 64px; height: 64px; background: var(--color-alt); color: var(--color-ink); } .ui-feature-list { display: grid; gap: 16px; list-style: none; } .ui-feature { display: flex; gap: 12px; align-items: flex-start; } .ui-feature__body { display: grid; gap: 2px; padding-top: 2px; } .ui-steps { display: grid; gap: 16px; list-style: none; } @media (min-width: 768px) { .ui-steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; } } .ui-step { display: flex; gap: 12px; align-items: flex-start; } .ui-step__number { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-ink); color: var(--color-bg); font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 700; font-variant-numeric: tabular-nums; } .ui-step__body { display: grid; gap: 2px; padding-top: 4px; } .ui-list-group { list-style: none; border-radius: var(--radius-sheet); background: var(--color-alt); overflow: hidden; } .ui-list-item { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 12px 16px; } .ui-list-item + .ui-list-item { border-top: 1px solid var(--color-line); } .ui-list-item__icon { color: var(--color-green); display: inline-flex; } .ui-list-item__label { flex: 1; font-size: 15px; line-height: 20px; font-weight: 600; } .ui-list-item__value { color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); text-align: right; font-variant-numeric: tabular-nums; } .ui-faq { list-style: none; border-radius: var(--radius-sheet); background: var(--color-alt); overflow: hidden; } .ui-faq__item + .ui-faq__item { border-top: 1px solid var(--color-line); } .ui-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 15px; line-height: 20px; font-weight: 600; } .ui-faq__question::-webkit-details-marker { display: none; } .ui-faq__chevron { display: inline-flex; color: var(--color-muted); transition: transform 200ms cubic-bezier(.2,0,0,1); } details[open] > .ui-faq__question .ui-faq__chevron { transform: rotate(180deg); } .ui-faq__answer { display: grid; gap: 12px; padding: 0 16px 16px; color: var(--color-muted); } .ui-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-cta); } .ui-banner--warn { background: var(--color-warn-bg); color: var(--color-warn-fg); } .ui-banner--info { background: var(--color-alt); color: var(--color-ink); } .ui-banner--danger { background: var(--color-danger-bg); color: var(--color-ink); } .ui-banner--danger .ui-icon { color: var(--color-danger); } .ui-banner__body { display: grid; gap: 4px; } .ui-state { display: grid; justify-items: center; gap: 16px; text-align: center; padding-block: 48px; } .ui-state .ui-actions { justify-content: center; } .ui-skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-skeleton) 0%, var(--color-skeleton-highlight) 50%, var(--color-skeleton) 100%); background-size: 200% 100%; animation: ui-shimmer 1.2s linear infinite; } @keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* Rola na horizontal até a borda da tela (DESIGNSYSTEM §7). */ .ui-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; list-style: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .ui-chip { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 16px; white-space: nowrap; border-radius: var(--radius-full); border: 1px solid var(--color-line); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 600; } .ui-chip[aria-current='page'] { background: var(--color-lime); color: var(--color-on-lime); border-color: var(--color-lime); font-weight: 700; } .ui-store-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 16px; border-radius: var(--radius-cta); background: var(--color-ink); color: var(--color-bg); text-decoration: none; } .ui-store-badge__text { display: grid; } .ui-store-badge__status { font-size: var(--text-caption-size); line-height: var(--text-caption-line); opacity: .72; } .ui-store-badge__name { font-size: 16px; line-height: 20px; font-weight: 700; } .ui-form { display: grid; gap: 16px; } .ui-field { display: grid; gap: 6px; } .ui-field__label { color: var(--color-muted); font-size: 13px; line-height: 18px; font-weight: 600; } .ui-field__input { min-height: 56px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-alt); color: var(--color-ink); font: inherit; font-size: 16px; line-height: 24px; font-weight: 600; text-transform: uppercase; } .ui-field__input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .ui-field__optional { font-weight: 500; } .ui-field__input[aria-invalid='true'] { border-color: var(--color-danger); } .ui-field__error { color: var(--color-danger); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 700; } .ui-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .ui-price__from { color: var(--color-muted); text-decoration: line-through; font-size: var(--text-body-size); line-height: var(--text-body-line); font-variant-numeric: tabular-nums; } .ui-price__now { font-size: var(--text-title-size); line-height: var(--text-title-line); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ui-price__period { color: var(--color-muted); font-size: var(--text-body-size); line-height: var(--text-body-line); } .home-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; } @media (min-width: 1024px) { .home-hero { grid-template-columns: 1.1fr 1fr; gap: 48px; } } .home-hero__text { display: grid; gap: 20px; justify-items: start; } .home-hero__panel { width: 100%; display: grid; place-items: center; min-height: 320px; } .home-demo { width: 100%; max-width: 360px; display: grid; gap: 16px; } .home-demo__row { display: flex; align-items: center; gap: 12px; } .home-demo__avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--color-green-bg); color: var(--color-green); } .home-demo__action { display: flex; align-items: center; gap: 8px; color: var(--color-green); font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 700; } .home-audience { display: grid; gap: 24px; align-content: start; } .home-audience__head { display: grid; gap: 12px; justify-items: start; } .legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } @media (min-width: 1024px) { .legal-layout { grid-template-columns: 240px minmax(0, 720px); gap: 48px; align-items: start; } .legal-toc--inline { display: none; } } .legal-toc--aside { display: none; } @media (min-width: 1024px) { .legal-toc--aside { display: grid; gap: 12px; position: sticky; top: calc(64px + 24px); max-height: calc(100vh - 64px - 48px); overflow-y: auto; } } .legal-toc__list { display: grid; list-style: none; } .legal-toc__link { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 700; } .legal-toc__link:hover { color: var(--color-ink); } .legal-article { display: grid; gap: 24px; min-width: 0; } .legal-header { display: grid; gap: 8px; } .legal-content { display: grid; gap: 16px; } .legal-content h2 { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-line); font-size: var(--text-heading-size); line-height: var(--text-heading-line); font-weight: 700; letter-spacing: -0.01em; } .legal-content h3 { margin-top: 8px; font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: 700; } .legal-content ul, .legal-content ol { display: grid; gap: 8px; padding-left: 20px; } .legal-content strong { font-weight: 700; } .legal-content a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .legal-content table { display: block; overflow-x: auto; border-collapse: collapse; } .legal-content th, .legal-content td { padding: 8px 12px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; } .captcha-page { flex: 1; display: grid; place-items: center; padding: 24px 16px; } /* Até 360px o Turnstile (300px de largura) não cabe com a margem normal: margem menor. */ @media (max-width: 359.98px) { .captcha-page { padding-inline: 8px; } } .captcha-panel { width: 100%; max-width: 430px; display: grid; gap: 20px; justify-items: center; text-align: center; } .captcha-widget { display: grid; place-items: center; min-height: 65px; width: 100%; } .captcha-widget__placeholder { width: min(100%, 300px); height: 65px; } .captcha-status { width: 100%; } .profile-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } @media (min-width: 1024px) { .profile-layout { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; align-items: start; } .profile-aside { position: sticky; top: calc(64px + 24px); } } .profile-hero { display: grid; gap: 20px; } .profile-hero__identity { display: flex; gap: 16px; align-items: center; min-width: 0; } .profile-photo { flex-shrink: 0; width: 88px; height: 88px; border-radius: var(--radius-lg); object-fit: cover; background: var(--color-bg); } .profile-photo--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--color-novo-bg); color: var(--color-novo-fg); font-size: var(--text-title-size); line-height: var(--text-title-line); font-weight: 800; } .profile-badges { display: flex; flex-wrap: wrap; gap: 6px; } .profile-facts { display: grid; gap: 8px; list-style: none; } .profile-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 500; } .profile-fact strong { font-weight: 700; font-variant-numeric: tabular-nums; } .profile-star { display: inline-flex; color: var(--color-star); } .profile-star .ui-icon { fill: currentColor; } .profile-portfolio { display: grid; gap: 8px; list-style: none; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .profile-portfolio__item { display: grid; gap: 4px; } .profile-portfolio__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--color-alt); } .profile-portfolio__item figcaption { color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); } .profile-review { display: grid; gap: 8px; } .profile-review__head { display: flex; justify-content: space-between; gap: 12px; align-items: center; } .directory-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); } .directory-crumbs li + li::before { content: '›'; margin-right: 8px; } .directory-crumbs a { color: inherit; text-decoration: none; } .directory-crumbs a:hover { text-decoration: underline; } .directory-stats { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; } .directory-stats li { display: grid; gap: 2px; min-width: 128px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--color-alt); } .directory-stats strong { font-size: var(--text-heading-size); line-height: var(--text-heading-line); font-weight: 700; font-variant-numeric: tabular-nums; } .directory-stats span { color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); } .directory-grid { display: grid; gap: 12px; list-style: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .directory-card { display: grid; gap: 12px; height: 100%; align-content: start; } .directory-card__head { display: flex; gap: 12px; align-items: center; min-width: 0; } .directory-card__photo { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-bg); } .directory-card__name { color: inherit; text-decoration: none; } .directory-card__name:hover { text-decoration: underline; } .directory-card__facts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .directory-card__offer { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--color-line); } .directory-card__offer strong { flex-shrink: 0; font-weight: 700; } .directory-reviews { display: grid; gap: 12px; list-style: none; } .directory-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } .directory-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--color-line); border-radius: var(--radius-full); color: inherit; text-decoration: none; font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 700; } .directory-links a:hover { background: var(--color-alt); } .blog-list { display: grid; gap: 16px; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } @media (min-width: 768px) { .blog-list { gap: 24px; } } .blog-card { display: grid; gap: 12px; align-content: start; height: 100%; } .blog-card__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-alt); } .blog-card__title a { color: inherit; text-decoration: none; } .blog-card__title a:hover { text-decoration: underline; } .blog-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); } .blog-meta a { color: inherit; font-weight: 700; } .blog-cover { display: grid; gap: 8px; } .blog-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); background: var(--color-alt); } .blog-lead { font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-muted); } .blog-cta { display: grid; gap: 12px; justify-items: start; } .blog-faq { display: grid; gap: 20px; } .blog-faq h3 { font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: 700; } .blog-faq p { margin-top: 4px; } .blog-related { display: grid; gap: 12px; } .blog-credit { padding-top: 16px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); } .blog-credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; } .blog-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; } .blog-pagination a, .blog-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--color-line); color: inherit; text-decoration: none; font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 700; } .blog-pagination a:hover { background: var(--color-alt); } .blog-pagination [aria-current='page'] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); } .subscribe-methods { display: grid; gap: 12px; } .subscribe-actions { display: grid; gap: 12px; } .pix-qr { justify-self: center; display: grid; place-items: center; padding: 12px; border-radius: var(--radius-lg); background: var(--color-qr-bg); } .pix-qr img { display: block; width: 232px; height: 232px; image-rendering: pixelated; } .pix-code { width: 100%; min-height: 112px; resize: none; word-break: break-all; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-alt); color: var(--color-ink); font-family: inherit; font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 500; } .pix-code:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .quote-sheet { display: grid; gap: 24px; max-width: 720px; } .quote-provider { display: flex; gap: 16px; align-items: center; min-width: 0; } .quote-provider__text { display: grid; gap: 4px; min-width: 0; } .quote-amount { font-size: var(--text-title-size); line-height: var(--text-title-line); font-weight: 800; font-variant-numeric: tabular-nums; } @media print { .site-header, .site-footer, .skip-link, .quote-screen-only { display: none; } .quote-sheet { max-width: none; } } .qdoc-page { flex: 1; display: grid; justify-items: center; align-content: start; gap: 16px; padding: 16px var(--gutter) 48px; background: var(--color-alt); } .qdoc-toolbar { width: 100%; max-width: 210mm; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .qdoc-toolbar .site-logo { height: 28px; } .qdoc-toolbar__hint { max-width: 280px; } .qdoc-sheet { width: 100%; max-width: 210mm; display: grid; gap: 24px; padding: 24px 20px; border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-e1); } .qdoc-header { display: grid; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-line); } .qdoc-issuer { display: flex; gap: 16px; align-items: flex-start; min-width: 0; } .qdoc-issuer__text { display: grid; gap: 2px; min-width: 0; } .qdoc-logo { flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-alt); } .qdoc-logo--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--color-novo-bg); color: var(--color-novo-fg); font-size: var(--text-heading-size); line-height: var(--text-heading-line); font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .qdoc-meta { display: grid; grid-template-columns: auto auto; gap: 4px 16px; align-content: start; } .qdoc-meta dt { color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); } .qdoc-meta dd { margin: 0; font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 700; font-variant-numeric: tabular-nums; } .qdoc-block { display: grid; gap: 4px; } .qdoc-block p { white-space: pre-line; } .qdoc-items { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .qdoc-items th { padding: 8px; text-align: left; color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 700; border-bottom: 2px solid var(--color-ink); } .qdoc-items td { padding: 12px 8px; vertical-align: top; border-bottom: 1px solid var(--color-line); } .qdoc-items th:first-child, .qdoc-items td:first-child { padding-left: 0; } .qdoc-items th:last-child, .qdoc-items td:last-child { padding-right: 0; } .qdoc-num { text-align: right; white-space: nowrap; } .qdoc-items .qdoc-num { text-align: right; } .qdoc-col-detail { display: none; } .qdoc-item__detail { display: block; color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); } .qdoc-totals { justify-self: end; width: 100%; max-width: 320px; display: grid; gap: 8px; font-variant-numeric: tabular-nums; } .qdoc-totals div { display: flex; justify-content: space-between; gap: 16px; } .qdoc-totals dt { color: var(--color-muted); } .qdoc-totals dd { margin: 0; font-weight: 700; } .qdoc-totals .qdoc-totals__grand { padding-top: 12px; border-top: 2px solid var(--color-ink); font-size: var(--text-heading-size); line-height: var(--text-heading-line); font-weight: 800; } .qdoc-totals .qdoc-totals__grand dt { color: var(--color-ink); } .qdoc-totals .qdoc-totals__grand dd { font-weight: 800; } .qdoc-footer { padding-top: 16px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-caption-size); line-height: var(--text-caption-line); } @media print, (min-width: 768px) { .qdoc-header { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .qdoc-col-detail { display: table-cell; } .qdoc-item__detail { display: none; } } @media (min-width: 768px) { .qdoc-page { padding-top: 32px; gap: 24px; } .qdoc-sheet { padding: 48px; } } @media print { @page { size: A4; margin: 14mm; } body { background: var(--color-bg); } .qdoc-page { display: block; padding: 0; background: none; } .qdoc-toolbar { display: none; } .qdoc-sheet { max-width: none; padding: 0; border-radius: 0; box-shadow: none; } .qdoc-items thead { display: table-header-group; } .qdoc-items tr, .qdoc-totals, .qdoc-block, .qdoc-footer, .qdoc-header { break-inside: avoid; } .qdoc-issuer a { text-decoration: none; } }