/* File: assets/css/style.css | Artifact v1.3 */

@layer reset, base, layout, components, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body, h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
    img, svg { display: block; max-width: 100%; }
    button, input, select, textarea { font: inherit; }
}

@layer base {
    :root {
        --primary: #164c84; --primary-dark: #0b2948; --accent: #35b779; --accent-text: #082f21;
        --light-site-bg: #f5f8fb; --light-surface: #fff; --light-text: #17212b;
        --site-bg: var(--light-site-bg); --surface: var(--light-surface); --text: var(--light-text);
        --link: var(--primary);
        --muted: #5d6977; --line: #d8e0e8; --soft: color-mix(in srgb, var(--primary) 8%, var(--surface));
        --danger: #9a2e2e; --success: #146b43; --shadow: 0 18px 55px rgb(20 33 48 / .10);
        --radius-sm: .65rem; --radius: 1rem; --radius-lg: 1.6rem; --wrap: 74rem; --measure: 47rem;
        color-scheme: light;
    }
    :root[data-theme="dark"] { --site-bg: #0f151b; --surface: #17212a; --text: #edf3f7; --muted: #adbac5; --line: #33434f; --soft: #1d2b35; --link: color-mix(in srgb, var(--primary) 35%, white); --shadow: 0 20px 55px rgb(0 0 0 / .3); color-scheme: dark; }
    @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --site-bg: #0f151b; --surface: #17212a; --text: #edf3f7; --muted: #adbac5; --line: #33434f; --soft: #1d2b35; --link: color-mix(in srgb, var(--primary) 35%, white); --shadow: 0 20px 55px rgb(0 0 0 / .3); color-scheme: dark; } }
    html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--site-bg); color: var(--text); }
    body { min-width: 20rem; min-height: 100vh; background: var(--site-bg); line-height: 1.65; text-rendering: optimizeLegibility; }
    h1, h2, h3 { font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
    h1 { font-size: clamp(2.35rem, 7vw, 4.8rem); }
    h2 { font-size: clamp(1.65rem, 4vw, 2.55rem); }
    h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
    a { color: var(--link); text-underline-offset: .18em; }
    a:hover { text-decoration-thickness: .14em; }
    :focus-visible { outline: .2rem solid var(--accent); outline-offset: .2rem; border-radius: .2rem; }
    ::selection { background: var(--accent); color: var(--accent-text); }
}

@layer layout {
    .wrap { width: min(calc(100% - 2rem), var(--wrap)); margin-inline: auto; }
    .section, .content-shell { padding-block: clamp(3.5rem, 8vw, 7rem); }
    .content-shell > .prose, .content-shell > .empty-state { margin-inline: auto; }
    .topbar { color: #fff; background: var(--primary-dark); font-size: .78rem; }
    .topbar__inner { min-height: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .topbar a { color: #fff; }
    .site-header { position: sticky; z-index: 20; top: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
    .nav-wrap { min-height: 4.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .desktop-nav { display: none; align-items: center; gap: clamp(.85rem, 2vw, 1.6rem); }
    .desktop-nav a { color: var(--text); font-weight: 720; text-decoration: none; font-size: .92rem; }
    .desktop-nav a[aria-current="page"] { color: var(--link); }
    .nav-actions { display: flex; align-items: center; gap: .45rem; }
    .mobile-menu { padding: 1rem; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow); }
    .mobile-menu a { display: block; padding: .75rem; color: var(--text); border-bottom: 1px solid var(--line); font-weight: 750; text-decoration: none; }
    .mobile-search { width: 100%; padding: .75rem; color: var(--text); background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 800; text-align: left; cursor: pointer; }
    .hero { overflow: hidden; color: #fff; background: linear-gradient(130deg, var(--primary-dark), var(--primary)); }
    .hero__grid { min-height: clamp(32rem, 75vh, 44rem); padding-block: clamp(4rem, 10vw, 8rem); display: grid; align-items: center; gap: 2rem; }
    .hero h1 { max-width: 14ch; }
    .hero .lead { max-width: 42rem; color: rgb(255 255 255 / .88); }
    .page-hero, .article-hero { padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--soft); border-bottom: 1px solid var(--line); }
    .page-hero .wrap, .article-hero__inner { max-width: 62rem; }
    .page-hero--accent { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
    .article-layout { display: grid; gap: 2.5rem; align-items: start; padding-block: clamp(3rem, 7vw, 6rem); }
    .prose { width: 100%; max-width: var(--measure); font-size: clamp(1rem, 1.5vw, 1.1rem); }
    .prose > * + * { margin-top: 1.2em; }
    .prose h2 { margin-top: 2.25em; scroll-margin-top: 7rem; }
    .prose h3 { margin-top: 1.8em; scroll-margin-top: 7rem; }
    .prose ul, .prose ol { padding-left: 1.4rem; }
    .prose li + li { margin-top: .5rem; }
    .prose blockquote { margin-inline: 0; padding: 1.2rem 1.4rem; background: var(--soft); border-left: .3rem solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; }
    .prose pre { overflow: auto; padding: 1rem; color: #f5f7fa; background: #17212b; border-radius: var(--radius); }
    .prose code { font-size: .9em; }
    .footer-grid { padding-block: 4rem; display: grid; gap: 2.5rem; }
    .footer-grid nav { display: flex; flex-direction: column; align-items: start; gap: .5rem; }
    .footer-grid h2 { margin-bottom: .4rem; font-size: 1rem; letter-spacing: 0; }
    .footer-grid a { color: var(--muted); }
    .footer-bottom { padding-block: 1.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
    .site-footer { background: var(--surface); }
}

@layer components {
    .skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .7rem 1rem; color: #fff; background: var(--primary-dark); transform: translateY(-160%); }
    .skip-link:focus { transform: none; }
    .brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); font-weight: 850; text-decoration: none; letter-spacing: -.03em; }
    .brand__mark { width: 2.35rem; aspect-ratio: 1; display: grid; place-items: center; color: var(--accent-text); background: var(--accent); border-radius: 50%; font-size: 1.25rem; }
    .brand__text { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
    .icon-button, .menu-toggle { min-width: 2.65rem; min-height: 2.65rem; display: inline-grid; place-items: center; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
    .menu-toggle { width: 4.8rem; display: grid; grid-template-columns: 1fr .7rem; align-content: center; column-gap: .25rem; border-radius: 999px; font-size: .78rem; }
    .menu-toggle span { grid-row: 1 / span 2; }
    .menu-toggle i { width: .7rem; border-top: 1.5px solid; }
    .button { min-height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .72rem 1.1rem; color: #fff; background: var(--primary); border: 2px solid transparent; border-radius: 999px; font-weight: 800; text-decoration: none; cursor: pointer; }
    .button:hover { filter: brightness(.92); text-decoration: none; }
    .button--quiet { color: var(--text); background: var(--surface); border-color: var(--line); }
    .text-link { color: inherit; font-weight: 750; }
    .eyebrow { margin-bottom: .8rem; color: var(--link); font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
    .hero .eyebrow { color: var(--accent); }
    .lead { margin-top: 1.2rem; max-width: 48rem; color: var(--muted); font-size: clamp(1.12rem, 2.4vw, 1.4rem); line-height: 1.5; }
    .hero .lead { color: rgb(255 255 255 / .88); }
    .hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
    .hero__actions .button { color: var(--accent-text); background: var(--accent); }
    .hero__trust { padding: 1.5rem; color: var(--text); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
    .hero__trust strong { color: var(--link); font-size: 1.2rem; }
    .hero__trust ul { margin-top: 1rem; padding-left: 1.2rem; }
    .page-meta { margin-top: 1rem; color: var(--muted); font-size: .9rem; }
    .breadcrumb { background: var(--surface); border-bottom: 1px solid var(--line); font-size: .82rem; }
    .breadcrumb ol { min-height: 2.7rem; padding: 0; display: flex; align-items: center; gap: .5rem; list-style: none; overflow: hidden; white-space: nowrap; }
    .breadcrumb li { overflow: hidden; text-overflow: ellipsis; }
    .breadcrumb li + li::before { margin-right: .5rem; content: '/'; color: var(--muted); }
    .toc { max-height: calc(100vh - 7rem); overflow: auto; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
    .toc ol { margin-top: .7rem; padding: 0; list-style: none; font-size: .87rem; }
    .toc li + li { margin-top: .55rem; }
    .toc li[data-level="3"] { padding-left: .8rem; }
    .toc a { color: var(--muted); text-decoration: none; }
    .toc a.is-active { color: var(--link); font-weight: 800; }
    .anchor-link { margin-left: .45rem; color: var(--muted); font-size: .75em; text-decoration: none; opacity: 0; }
    h2:hover .anchor-link, h3:hover .anchor-link, .anchor-link:focus { opacity: 1; }
    .article-grid, .offer-grid { display: grid; gap: 1rem; }
    .article-card, .offer-card { padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 28px rgb(20 33 48 / .05); }
    .article-card h2, .article-card h3 { margin-top: .9rem; }
    .article-card h2 { font-size: 1.45rem; }
    .article-card p { margin-top: .8rem; color: var(--muted); }
    .article-card a { color: var(--text); }
    .badge { display: inline-flex; width: fit-content; padding: .25rem .65rem; color: var(--primary-dark); background: color-mix(in srgb, var(--accent) 55%, white); border-radius: 999px; font-size: .74rem; font-weight: 850; }
    .meta-row { margin-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .8rem; }
    .section-heading { margin-bottom: 1.5rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
    .section-heading .eyebrow { margin-bottom: .5rem; }
    .content-note, .empty-state { margin-block: clamp(3rem, 7vw, 6rem); padding: clamp(1.5rem, 5vw, 3rem); max-width: 52rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
    .content-note p:last-child, .empty-state p { margin-top: .8rem; color: var(--muted); }
    .table-scroll { width: 100%; overflow-x: auto; margin-block: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
    .prose .table-scroll { max-width: 100%; margin-inline: 0; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
    table { width: 100%; min-width: 42rem; border-collapse: collapse; background: var(--surface); font-size: .9rem; }
    caption { padding: .8rem; color: var(--muted); text-align: left; font-size: .78rem; }
    th, td { padding: .8rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
    thead th { color: #fff; background: var(--primary-dark); border: 0; }
    tbody th small { display: block; color: var(--muted); font-weight: 500; }
    .product-disclaimer, .ad-disclosure, .callout { margin-top: 2rem; padding: 1.15rem 1.3rem; background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius); font-size: .9rem; }
    .ad-disclosure { margin: 0 0 2rem; }
    .ad-disclosure--after { margin: 2rem 0 0; }
    .product-disclaimer p, .ad-disclosure p, .callout p { margin-top: .45rem; }
    .author-box { margin-top: 3rem; padding: 1.4rem; display: flex; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
    .author-box__avatar { flex: 0 0 3rem; width: 3rem; height: 3rem; display: grid; place-items: center; color: var(--accent-text); background: var(--accent); border-radius: 50%; font-weight: 900; }
    .author-box h2 { font-size: 1.25rem; }
    .author-box p:not(.eyebrow) { margin-top: .45rem; color: var(--muted); }
    .faq-block { margin-top: 3rem; }
    .faq-block details { margin-top: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
    .faq-block summary { padding: 1rem 3rem 1rem 1rem; position: relative; font-weight: 800; cursor: pointer; }
    .faq-block summary::after { position: absolute; right: 1rem; content: '+'; color: var(--link); font-size: 1.4rem; }
    .faq-block details[open] summary::after { content: '−'; }
    .faq-block details div { padding: 0 1rem 1rem; color: var(--muted); }
    .compare-filters { margin-block: 2rem; padding: 1rem; display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
    .compare-filters label, .contact-form > label { display: grid; gap: .35rem; font-weight: 750; }
    input, select, textarea { width: 100%; padding: .72rem .8rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
    textarea { resize: vertical; }
    .offer-card[hidden] { display: none; }
    .offer-card h2 { margin-top: .8rem; font-size: 1.45rem; }
    .offer-card__head p, .offer-card__meta { color: var(--muted); }
    .offer-facts { margin-block: 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .offer-facts div { padding: .7rem; background: var(--soft); border-radius: var(--radius-sm); }
    .offer-facts dt { color: var(--muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; }
    .offer-facts dd { font-weight: 850; }
    .check-list { padding-left: 1.2rem; }
    .offer-card .button { width: 100%; margin-top: 1.2rem; }
    .offer-card__meta { margin-top: .8rem; font-size: .75rem; }
    .partner-comparison { margin-top: clamp(3rem, 7vw, 6rem); padding-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--line); }
    .partner-grid { display: grid; gap: 1rem; }
    .partner-card { padding: clamp(1.25rem, 3vw, 1.8rem); position: relative; display: flex; flex-direction: column; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 28px rgb(20 33 48 / .05); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; cursor: pointer; }
    .partner-card:hover { transform: translateY(-.2rem); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: 0 14px 34px rgb(20 33 48 / .11); }
    .partner-card:focus-within { outline: .2rem solid var(--accent); outline-offset: .2rem; }
    .partner-card h3 { margin-top: .8rem; }
    .partner-card p { margin-top: .7rem; color: var(--muted); }
    .partner-card .button { width: 100%; margin-top: 1.25rem; }
    .partner-card .button::after { position: absolute; inset: 0; content: ""; border-radius: var(--radius-lg); }
    .partner-disclosure { margin-top: 1rem; color: var(--muted); font-size: .82rem; }
    .prose table a[href^="/vai/confronto-"] { min-height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; padding: .5rem .8rem; color: #fff; background: var(--primary); border-radius: 999px; font-weight: 800; text-decoration: none; white-space: nowrap; }
    .prose table a[href^="/vai/confronto-"]:hover { filter: brightness(.92); }
    .contact-layout { padding-block: clamp(3rem, 8vw, 7rem); display: grid; gap: 2rem; align-items: start; }
    .contact-layout > div > p { margin-block: 1rem; color: var(--muted); }
    .contact-form { padding: clamp(1.25rem, 4vw, 2rem); display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
    .check-field { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 500 !important; }
    .check-field input { width: 1.2rem; margin-top: .25rem; }
    .hp { position: absolute !important; left: -10000px !important; }
    .form-notice { padding: 1rem; border-radius: var(--radius-sm); }
    .form-notice.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
    .form-notice.success { color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
    .legal-strip { padding-block: 1.5rem; color: #fff; background: var(--primary-dark); font-size: .84rem; }
    .legal-strip p { margin-top: .35rem; color: rgb(255 255 255 / .82); }
    .footer-disclosure { padding-block: 1rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .82rem; }
    .search-dialog { width: min(calc(100% - 1.5rem), 44rem); max-height: 82vh; padding: 1.2rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
    .search-dialog::backdrop { background: rgb(8 16 24 / .72); backdrop-filter: blur(4px); }
    .search-dialog__top { display: flex; justify-content: space-between; gap: 1rem; }
    .search-field { display: block; margin-top: 1rem; }
    .search-field input { font-size: 1.1rem; }
    .search-hint { margin-top: .6rem; color: var(--muted); font-size: .8rem; }
    .search-results { margin-top: 1rem; display: grid; gap: .5rem; }
    .search-result { padding: .8rem; display: grid; color: var(--text); background: var(--soft); border-radius: var(--radius-sm); text-decoration: none; }
    .search-result small, .search-result span { color: var(--muted); }
    .back-to-top { position: fixed; z-index: 15; right: 1rem; bottom: 1rem; width: 3rem; height: 3rem; color: #fff; background: var(--primary); border: 0; border-radius: 50%; box-shadow: var(--shadow); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(1rem); transition: .2s ease; }
    .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
    .not-found { min-height: 65vh; display: grid; place-items: center; text-align: center; }
    .not-found .lead { margin-inline: auto; }
    .not-found div > div { margin-top: 1.5rem; display: flex; justify-content: center; gap: .7rem; }
    .error-code { color: var(--accent); font-size: clamp(4rem, 15vw, 9rem); font-weight: 950; line-height: .9; }
}

@layer utilities {
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
    body.is-locked { overflow: hidden; }
    [hidden] { display: none !important; }
}

@media (min-width: 42rem) {
    .article-grid, .offer-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-grid { grid-template-columns: repeat(3, 1fr); }
    .compare-filters { grid-template-columns: repeat(2, 1fr); align-items: end; }
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (min-width: 64rem) {
    .desktop-nav { display: flex; }
    .menu-toggle { display: none; }
    .hero__grid { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .7fr); }
    .article-layout { grid-template-columns: 15rem minmax(0, var(--measure)); justify-content: center; }
    .toc { position: sticky; top: 6.2rem; }
    .article-grid { grid-template-columns: repeat(3, 1fr); }
    .compare-filters { grid-template-columns: repeat(3, 1fr) auto; }
    .contact-layout { grid-template-columns: .8fr 1.2fr; }
}
@media (max-width: 30rem) {
    .topbar__inner a { display: none; }
    .brand__text { max-width: 10.5rem; font-size: .86rem; }
    .nav-actions { gap: .2rem; }
    .icon-button { min-width: 2.35rem; min-height: 2.35rem; }
    .menu-toggle { width: 4.2rem; min-height: 2.35rem; }
}
@media (max-width: 40rem) {
    .nav-actions [data-search-open] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
    .topbar, .site-header, .site-footer, .legal-strip, .back-to-top, .toc, .hero__actions { display: none !important; }
    :root { --site-bg: #fff; --surface: #fff; --text: #000; --muted: #333; --line: #aaa; }
    a { color: #000; text-decoration: underline; }
}