/* ============================================================
   Polish layer — motion, typography and layout refinements.
   Loaded AFTER design-system.css (and after the inline styles on the homes).
   Principles: specific transition properties, ease-out for entrances,
   responses under 300ms, hover gated to real pointers, reduced-motion = fades only.
   ============================================================ */

:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: #D2E3FC; color: var(--navy-900); }

/* ---------- Typography ---------- */
h1, h2 { letter-spacing: -0.022em; text-wrap: balance; }
h3, h4 { letter-spacing: -0.012em; text-wrap: balance; }
p, li { text-wrap: pretty; }
.plan-price, .stat, .roi-result, td, th { font-variant-numeric: tabular-nums; }
.section-title { max-width: 22ch; }
.section-title:where(.wide) { max-width: 30ch; }
@media (min-width: 720px) { .section-title { max-width: 26ch; } }
.section-subtitle { text-wrap: balance; }

/* ---------- Header: border instead of shadow, calmer weight ---------- */
.site-header { box-shadow: none; border-bottom: 1px solid var(--gray-200); background: rgba(255,255,255,0.98); }
.nav-links a:not(.btn-outline) { position: relative; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
    .nav-links a:not(.btn-outline):hover { color: var(--accent-600); }
}
.nav-links a[aria-current="page"]:not(.btn-outline) { color: var(--navy-900); }
.nav-links a[aria-current="page"]:not(.btn-outline)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--accent-600);
}

/* ---------- Buttons: responsive press, no transition:all ---------- */
.btn-primary, .btn-secondary, .btn-outline, button.btn-primary {
    transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
    will-change: transform;
}
.btn-primary:active, .btn-secondary:active, .btn-outline:active, .roi-calculator button:active, .pricing-switch button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { transform: none; box-shadow: 0 8px 20px rgba(26, 115, 232, 0.28); }
    .btn-primary:hover:active { transform: scale(0.97); }
}
.btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 2px 6px rgba(26, 115, 232, 0.18); }

/* ---------- Cards: lift only on real hover, only the properties that change ---------- */
.card, .service-card, .media-card, .related-card, .city-card, .city-link, .process-card, .method-item {
    transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease;
}
.card:hover, .service-card:hover, .city-card:hover { transform: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
    .card:hover, .service-card:hover, .media-card:hover, .related-card:hover, .city-card:hover, .city-link:hover {
        transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #AECBFA;
    }
}
.card:active, .related-card:active, .media-card:active { transform: scale(0.99); }

/* Media zoom — decorative, slow ease-out, hover only */
.media-card .media img, .related-card img { transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .media-card:hover .media img, .related-card:hover img { transform: scale(1.035); }
}

/* Whole-card links for blog cards: the title link stretches over the card */
.media-card, .related-card { position: relative; }
.media-card .post-title a::after, .related-card h4 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* ---------- Blog index: featured first post ---------- */
@media (min-width: 900px) {
    .blog-grid > .media-card:first-child {
        grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
    }
    .blog-grid > .media-card:first-child .media { height: 100%; min-height: 320px; }
    .blog-grid > .media-card:first-child .body { padding: var(--space-12); display: flex; flex-direction: column; justify-content: center; }
    .blog-grid > .media-card:first-child .post-title { font-size: 1.7rem; letter-spacing: -0.02em; }
    .blog-grid > .media-card:first-child .post-excerpt { font-size: 1.05rem; }
}

/* ---------- Mobile navigation drawer ---------- */
@media (max-width: 1200px) {
    .nav-links {
        transition: transform 280ms var(--ease-drawer), visibility 0s linear 280ms;
        visibility: hidden;
        border-top: 1px solid var(--gray-200);
    }
    .nav-links[data-open="true"] { visibility: visible; transition: transform 280ms var(--ease-drawer), visibility 0s linear 0s; }
    .nav-links a:not(.btn-outline) { font-size: 1.15rem; padding: 0.85rem 0; border-bottom: 1px solid var(--gray-200); }
    .nav-links a[aria-current="page"]:not(.btn-outline)::after { display: none; }
}
.nav-toggle { border-radius: 10px; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.nav-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .nav-toggle:hover { background: var(--sand-50); } }

/* ---------- FAQ / details ---------- */
details { transition: border-color 200ms ease, background-color 200ms ease; }
details[open] { border-color: #AECBFA; background: #F6FAFE; }
summary { min-height: 44px; border-radius: 8px; }
summary .chevron { transition: transform 220ms var(--ease-out); color: var(--accent-600); }
@media (hover: hover) and (pointer: fine) { summary:hover { color: var(--accent-600); } }

/* ---------- Forms (shared inputs) ---------- */
input, textarea, select { font: inherit; }
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--accent-600); box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.22); }

/* ---------- Section rhythm ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.page-header { padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.25rem, 5vw, 3.5rem); }
.page-header h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.page-header p { text-wrap: balance; }

/* ---------- Article: readable measure + sticky table of contents ---------- */
.article-content { max-width: 68ch; }
.article-content > p:first-child { font-size: 1.12rem; color: var(--gray-900); }
.article-content a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-content blockquote { border-left: 3px solid var(--accent-500); margin: 1.5em 0; padding: 0.25em 0 0.25em 1.25em; color: var(--gray-900); }
.article-hero-img img { aspect-ratio: 16 / 9; object-fit: cover; }
.article-toc a { transition: color 160ms ease, padding-left 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .article-toc a:hover { padding-left: 4px; } }
@media (min-width: 1180px) {
    .article-body-wrap { max-width: 1080px; display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 56px; align-items: start; }
    .article-body-wrap > .article-toc { grid-column: 1; grid-row: 1 / span 12; position: sticky; top: 96px; margin-bottom: 0; max-height: calc(100vh - 128px); overflow-y: auto; }
    .article-body-wrap > .article-content, .article-body-wrap > .article-cta { grid-column: 2; }
    .article-header .container, .article-hero-img { max-width: 1080px; }
    .article-header .container > *:not(.article-byline) { max-width: 760px; }
    .article-hero-img { padding: 0 var(--space-6); }
}

/* ---------- Reveal on scroll (JS adds .js to <html>; content stays visible without JS) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms);
}

/* ---------- Footer ---------- */
.footer a { transition: color 160ms ease; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(189, 193, 198, 0.4); }

/* ---------- WhatsApp float ---------- */
.whatsapp-float { transition: transform 200ms var(--ease-out), box-shadow 200ms ease; }
.whatsapp-float:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .whatsapp-float:hover { transform: scale(1.06); } }
@media (max-width: 480px) { .whatsapp-float { bottom: 16px; right: 16px; width: 52px; height: 52px; } }

/* ---------- Reduced motion: keep comprehension (fades), drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal] { transform: none; }
    .js [data-reveal].is-in { transition: opacity 200ms linear; transition-delay: 0ms; }
    .media-card:hover .media img, .related-card:hover img { transform: none; }
    .card:hover, .media-card:hover, .related-card:hover, .city-link:hover { transform: none; }
    @media (max-width: 860px) {
        .nav-links { transform: none; opacity: 0; transition: opacity 150ms linear, visibility 0s linear 150ms; }
        .nav-links[data-open="true"] { opacity: 1; transition: opacity 150ms linear, visibility 0s; }
    }
}

/* ---- Sub-page breadcrumb (sector/city pages) ---- */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; font-size: 0.85rem; color: var(--gray-500); margin-bottom: var(--space-4); }
.crumbs a { color: var(--gray-500); text-decoration: none; transition: color 150ms var(--ease-out); }
.crumbs span[aria-hidden] { opacity: 0.5; }
.crumbs [aria-current] { color: var(--navy-900); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--accent-600); } }
.hero-band .btn-primary { margin-top: var(--space-2); }
.container > .section h2:first-child, .container.section > h2:first-child { margin-top: 0; }
.container > .section ul:not(.benefits-list), .container.section ul:not(.benefits-list) { padding-left: 1.2rem; display: grid; gap: var(--space-2); color: var(--gray-700); }

/* ---- Sub-page content: left-aligned headings, readable measure ---- */
.container > .section > .section-title, .container.section > .section-title { margin-left: 0; margin-right: 0; max-width: 28ch; text-align: left; }
.container > .section > p, .container.section > p, .container > .section .badge p { max-width: 68ch; }
.container > .section > .faq-item, .container.section > .faq-item { max-width: 820px; }
.grid-2 .page-img { max-width: 100%; }
@media (hover: hover) and (pointer: fine) { .faq-item { transition: border-color 160ms var(--ease-out); } .faq-item:hover { border-color: #BDC1C6; } }

/* ---- Forms (contact, audit, checklist) ---- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.two-col > div > h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin-bottom: var(--space-6); text-wrap: balance; }
.form-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-md); }
.form-card h2 { font-size: 1.4rem; margin-bottom: var(--space-4); }
.form-lead { margin-bottom: var(--space-6); color: var(--gray-500); }
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--navy-900); margin-bottom: 0.35rem; }
.form-group small { display: block; margin-top: 0.35rem; color: var(--gray-500); font-size: 0.85rem; }
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea { width: 100%; }
.form-group textarea { resize: vertical; min-height: 7rem; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-block { width: 100%; }
.form-note { background: #E8F0FE; border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-bottom: var(--space-4); font-size: 0.95rem; }
.form-note[hidden] { display: none; }
.form-msg { margin-top: var(--space-4); padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.95rem; }
.form-msg.ok { background: #E7F4EA; color: #1E5B34; }
.form-msg.err { background: #FCE8E6; color: #A50E0E; }
.form-foot { font-size: 0.82rem; color: var(--gray-500); text-align: center; margin: var(--space-4) 0 0; }
.contact-list { margin: 0; display: grid; }
.contact-list > div { padding: var(--space-4) 0; border-top: 1px solid var(--gray-200); }
.contact-list > div:last-child { border-bottom: 1px solid var(--gray-200); }
.contact-list dt { font-size: 0.82rem; font-weight: 600; text-transform: none; color: var(--gray-500); margin-bottom: 0.2rem; }
.contact-list dd { margin: 0; font-size: 1.1rem; font-weight: 500; color: var(--navy-900); }
.contact-list a { color: var(--navy-900); text-decoration: none; border-bottom: 1px solid var(--gray-200); transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .contact-list a:hover { color: var(--accent-600); border-color: var(--accent-600); } }
.benefit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5, 1.25rem); counter-reset: ben; }
.benefit-list li { position: relative; padding-left: 2.75rem; counter-increment: ben; display: grid; gap: 0.2rem; }
.benefit-list li::before { content: counter(ben); position: absolute; left: 0; top: 0.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #E8F0FE; color: var(--accent-600); font-weight: 700; font-size: 0.9rem; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.benefit-list strong { color: var(--navy-900); }
.benefit-list span { color: var(--gray-700); }
.benefits-list strong { color: var(--navy-900); font-weight: 600; }

/* ---- Legal / long-form pages ---- */
.prose { text-wrap: pretty; }
.prose h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); margin-bottom: var(--space-4); text-wrap: balance; }
.prose h2 { padding-top: var(--space-4); border-top: 1px solid var(--gray-200); }
.prose h2:first-of-type { border-top: 0; }

/* ---- Header fit: single line, ≤ 72px tall on desktop ---- */
.logo a { white-space: nowrap; font-size: 1.2rem; }
.header-inner { flex-wrap: nowrap; }
.nav-links { gap: clamp(1rem, 1.5vw, 1.5rem); }
.nav-links a { white-space: nowrap; font-size: 0.95rem; }
.nav-links .btn-outline { padding: 0.5rem 1.1rem; }
.lang-switcher { margin-left: 0; }
@media (max-width: 1200px) { .nav-links a { font-size: 1.15rem; } }
@media (max-width: 1200px) { .nav-links .btn-outline { display: flex; justify-content: center; } }