html { background: var(--bg); }
body { min-height: 100vh; background: color-mix(in srgb, var(--bg) 92%, #eef3f8); }
.page { width: 100%; max-width: none; margin: 0; padding: 0; }
.hero { overflow: visible; border: 0; border-radius: 0; background: color-mix(in srgb, #fff 88%, var(--bg)); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent); text-align: left; }
.cover { width: 100%; height: clamp(210px, 24vw, 340px); position: relative; background-size: cover; background-position: center; }
.cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,18,38,.02), rgba(7,18,38,.25)); }
.identity { width: min(1440px, calc(100% - 64px)); min-height: 170px; margin: 0 auto; padding: 30px 8px 34px 150px; position: relative; text-align: left; }
.identity.no-logo { padding-left: 8px; }
.hero:not(:has(.cover)) .identity { padding-top: 34px; }
.hero:not(:has(.cover)) .avatar { top: 24px; margin-top: 0; }
.avatar { width: 112px; height: 112px; margin: 0; position: absolute; left: 8px; top: -42px; border: 5px solid color-mix(in srgb, #fff 92%, var(--bg)); background-size: cover; background-position: center; box-shadow: 0 12px 30px rgba(7,18,38,.2); }
.identity h1 { max-width: 900px; margin: 0 0 8px; font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.035em; }
.lead { max-width: 760px; margin: 0; color: color-mix(in srgb, var(--text) 70%, transparent); font-size: 1rem; }
.full { max-width: 900px; margin: 15px 0 0; color: color-mix(in srgb, var(--text) 72%, transparent); font-size: .94rem; line-height: 1.7; text-align: left; }
.section { width: min(1440px, calc(100% - 64px)); margin: 56px auto 0; padding: 0; }
.section h2 { margin: 0 0 22px; font-size: clamp(1.55rem, 2.4vw, 2.15rem); line-height: 1.15; letter-spacing: -.03em; text-align: left; }
.catalog, body.template-vitrine .catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 24px); }
.card { min-width: 0; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--text) 11%, transparent); border-radius: 15px; background: color-mix(in srgb, #fff 91%, var(--bg)); box-shadow: 0 7px 22px color-mix(in srgb, var(--text) 7%, transparent); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 15px 34px color-mix(in srgb, var(--text) 13%, transparent); }
.card img, .placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card img { transition: transform .35s ease; }
.card:hover img { transform: scale(1.025); }
.placeholder { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--bg)), color-mix(in srgb, var(--accent) 4%, #fff)); }
.cardbody { display: block; padding: 16px 17px 18px; }
.tag { display: inline-flex; padding: 3px 7px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: .65rem; letter-spacing: .08em; }
.card h3 { margin: 9px 0 5px; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.015em; }
.cardbody p { margin: 0; color: color-mix(in srgb, var(--text) 64%, transparent); font-size: .82rem; line-height: 1.5; }
.price { display: block; margin-top: 13px; font-size: .98rem; }
.contacts { justify-content: flex-start; }
.contact { min-height: 46px; padding: 11px 18px; box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 20%, transparent); }
.footer { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(1440px, calc(100% - 64px)); margin: 50px auto 0; padding: 22px 0 0; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.page > .dbio-public-footer { margin-top: 56px!important; }
dialog { border-radius: 18px; background: color-mix(in srgb, #fff 94%, var(--bg)); }
body.template-vitrine .hero { text-align: left; }
body.template-vitrine .identity { padding-left: 150px; }
body.template-vitrine .identity.no-logo { padding-left: 8px; }
body.template-vitrine .avatar { margin-left: 0; }
body.template-vitrine .lead { margin-left: 0; }
body.template-minimalista .hero, body.template-minimalista .card { box-shadow: none; }
body.template-minimalista .cover { height: clamp(180px, 20vw, 280px); }
body.template-minimalista .card { border-radius: 8px; background: transparent; }
@media (max-width: 1120px) { .catalog, body.template-vitrine .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) {
    .cover { height: 220px; }
    .identity, body.template-vitrine .identity { width: calc(100% - 36px); min-height: 0; padding: 68px 0 28px; }
    .identity.no-logo, body.template-vitrine .identity.no-logo { padding-top: 26px; }
    .avatar { left: 0; top: -48px; width: 96px; height: 96px; }
    .identity h1 { font-size: clamp(1.8rem, 8vw, 2.45rem); }
    .section { width: calc(100% - 36px); margin-top: 42px; }
    .catalog, body.template-vitrine .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer { width: calc(100% - 36px); }
}
@media (max-width: 470px) {
    .cover { height: 180px; }
    .catalog, body.template-vitrine .catalog { grid-template-columns: 1fr; }
    .card img, .placeholder { aspect-ratio: 16 / 10; }
    .cardbody { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) { .card, .card img { transition: none; } }