/* Shared interior-page system. Header and footer come directly from Home. */
:root {
    --primary-500: #053ac0;
    --primary-400: #1051f2;
    --primary-300: #2c66f6;
    --primary-200: #5483f7;
    --primary-100: #7ea1f7;
    --secondary-500: #031445;
    --secondary-400: #071e63;
    --secondary-300: #0c287b;
    --secondary-200: #133495;
    --secondary-100: #314ea6;
    --success: #208a2d;
    --error: #9a1410;
    --text-body: 16px;
    --text-subtitle: 18px;
    --text-legal: 12px;
}
.new-site button:disabled, .new-site input:disabled { cursor: not-allowed; background: #f4f4f4; color: #b9bdc6; border-color: #eee; transform: none; }
.new-site .navigation-links [aria-current="page"] { color: var(--primary-500); }
.new-site main { min-height: 50vh; }
.section-block { padding-top: 140px; }
.section-block .section-heading h2 { text-transform: uppercase; }
.section-spacer { height: 150px; }
.page-hero { text-align: center; padding: 75px 24px 0; }
.page-hero :is(h1,.display-title) { font-size: clamp(44px, 4.7vw, 96px); line-height: 1.06; letter-spacing: -2px; max-width: 1200px; margin: 0 auto; text-wrap: balance; }
.page-hero > p { max-width: 760px; margin: 22px auto 0; font-size: 18px; }
.page-hero > .button, .page-hero > .button-row { margin-top: 32px; }
.page-hero > .eyebrow { color: white; background: var(--navy); margin-bottom: 45px; }
.about-hero-art { width: min(1080px, 100%); margin: 65px auto 0; }
.about-hero-art img { width: 100%; }
.about-benefits { padding-top: 100px; }
.split-story { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-top: 60px; }
.split-story > img { width: 100%; border-radius: 28px; }
.split-story h3 { font-size: 40px; margin-top: 18px; }
.split-story p { font-size: 18px; line-height: 1.7; margin-top: 20px; }
.split-story.reverse > div { grid-column: 2; grid-row: 1; }
.split-story.reverse > img { grid-column: 1; grid-row: 1; }
.page-nosotros .faq { padding-bottom: 110px; }
.download-section { padding: 105px 24px 90px; text-align: center; background: linear-gradient(white, #eff5fd); }
.download-section h2 { font-size: clamp(40px, 4vw, 72px); }
.download-section > p { margin: 18px auto 0; }
.download-qr { display: block; width: 152px; margin: 32px auto 0; }
.download-qr img { width: 100%; }
.download-section .store-links { margin-top: 22px; }
.enterprise-hero :is(h1,.display-title) { font-size: clamp(38px, 4vw, 76px); text-transform: uppercase; }
.enterprise-hero > p { max-width: 700px; }
.corporate-hero-art { max-width: 860px; margin: 60px auto 0; }
.corporate-hero-art img { width: 100%; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 850px; margin: 42px auto 0; gap: 18px; }
.stat { padding: 20px 12px; background: #f4f4f6; border-radius: 14px; text-align: center; }
.stat strong { display: block; font-size: 34px; line-height: 1.15; color: var(--blue); }
.stat span { display: block; font-size: 12px; margin-top: 8px; color: var(--muted); }
.deployment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 850px; margin: auto; }
.deployment-card { padding: 35px; border-radius: 22px; background: #eef3f4; }
.deployment-card h3 { color: var(--blue); font-size: 20px; letter-spacing: 0; }
.deployment-card > p { margin-top: 16px; color: var(--muted); }
.deployment-card > .button { margin-top: 24px; }
.deployment-card .plan-features li { margin-top: 12px; }
.infrastructure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1068px; margin: auto; }
.infrastructure-image { position: relative; }
.infrastructure-image > img { width: 100%; border-radius: 20px; aspect-ratio: 1.1; object-fit: cover; }
.infrastructure-image .eyebrow { position: absolute; left: 14px; top: 14px; background: white; font-size: 12px; }
.infrastructure-grid h3 { font-size: 24px; margin: 18px 6px 0; }
.infrastructure-grid p { margin: 12px 6px 0; font-size: 16px; }
.architecture > .eyebrow { background: var(--blue); color: white; }
.architecture > h2 { font-size: 22px; letter-spacing: 0; color: var(--blue); margin: 12px 0 26px; }
.architecture-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 25px; align-items: stretch; }
.architecture-grid > a { display: flex; align-items: center; background: #060815; border-radius: 18px; overflow: hidden; }
.architecture-grid img { width: 100%; }
.architecture-grid > div { padding: 25px; border: 1px solid var(--line); border-radius: 18px; }
.architecture-grid h3 { font-size: 22px; }
.architecture-grid article { padding-top: 22px; }
.architecture-grid h4 { margin: 0 0 8px; color: var(--blue); font-size: 16px; }
.architecture-grid p { font-size: 13px; }
.page-corporativo .trust { margin-top: 145px; }
.referral-hero { padding-top: 36px; padding-bottom: 55px; background: linear-gradient(165deg, #297eff, #5fc8e3); }
.referral-hero h1 { text-transform: uppercase; font-size: clamp(38px, 4vw, 72px); }
.referral-hero > p { font-size: 18px; }
.referral-requirement { max-width: 385px; padding: 13px 24px; text-align: left; border-radius: 40px; background: #ffffffed; margin: 32px auto 0; font-size: 12px; }
.referral-requirement p { font-size: 11px; color: var(--muted); }
.referral-overview { padding-top: 40px; }
.referral-overview .section-heading { margin-bottom: 30px; }
.referral-steps { list-style: none; padding: 0; max-width: 1100px; margin: auto; display: grid; gap: 18px; }
.referral-steps > li { display: grid; grid-template-columns: 44px 200px 1fr; align-items: center; gap: 24px; border: 1px solid var(--line); border-radius: 15px; padding: 20px; }
.step-number { width: 42px; height: 42px; border-radius: 50%; background: #f4f4f6; display: grid; place-items: center; }
.referral-steps img { width: 100%; border-radius: 12px; }
.referral-steps h3 { font-size: 24px; }
.referral-steps p { font-size: 15px; margin-top: 10px; }
.referral-banner { position: relative; isolation: isolate; width: min(1132px, calc(100% - 64px)); margin: 140px auto 0; color: white; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.referral-banner::before { content: ''; position: absolute; inset: 33px 0 0; background: #092884; border-radius: 30px; z-index: -1; }
.referral-banner > div:first-child { align-self: end; }
.referral-banner img { width: min(408px, 100%); margin: auto; }
.referral-banner > div:last-child { padding: 35px; }
.referral-banner h2 { font-size: clamp(32px, 3vw, 50px); }
.referral-banner p { margin-top: 18px; }
.referral-banner .button-row { justify-content: flex-start; margin-top: 25px; }
.referral-banner .button { font-size: 12px; padding-inline: 16px; }
.commission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.commission-grid .deployment-card { padding: 30px 24px; }
.commission-price { color: var(--blue) !important; display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; }
.commission-price strong { font-size: 44px; letter-spacing: -1px; }
.commission-price span { font-size: 14px; font-weight: 700; }
.commission-grid .plan-features li { font-size: 13px; }
.contact-channels { max-width: 970px; margin: 75px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.contact-channels > * { padding: 24px 18px; background: #f5f5f6; border-radius: 16px; }
.contact-channels h2 { font-size: 32px; color: var(--blue); letter-spacing: -.5px; }
.contact-channels p { font-size: 16px; overflow-wrap: anywhere; }
.contact-hero > .contact-intro { max-width: 720px; text-align: left; margin-top: 60px; }
.contact-form-wrap { width: min(710px, calc(100% - 48px)); margin: 130px auto; scroll-margin-top: 35px; }
.contact-form { display: grid; gap: 26px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.contact-form label { font-size: 16px; font-weight: 700; display: block; }
.contact-form input, .contact-form textarea { display: block; width: 100%; padding: 12px 2px; border: 0; border-bottom: 2px solid #999; border-radius: 0; background: white; font: 400 18px/1.5 Arial, sans-serif; color: var(--ink); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #959ba6; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 2px var(--blue); }
.contact-form :is(input,textarea):user-invalid { border-color: var(--error); }
.contact-form .button { justify-self: start; border: none; }
.lead-form-status { font-size: 16px; line-height: 1.5; }
.faq-band { background: #f3f3f4; padding: 80px 24px 90px; }
.faq-band .faq { padding-top: 0; }
.faq-band .faq details { background: white; }
.contact-assistance { width: min(780px, calc(100% - 48px)); margin: 150px auto; padding: 38px; background: #f3f3f4; border-radius: 24px; }
.assistance-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: white; font-weight: 700; font-size: 46px; }
.contact-assistance h2 { font-size: 38px; margin-top: 26px; }
.contact-assistance .button-row { justify-content: flex-start; margin-top: 24px; }
.latest-posts > h2, .all-posts > h2 { text-align: center; }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 45px; max-width: 1080px; margin: 55px auto 0; }
.post-picture { position: relative; }
.post-picture img { width: 100%; aspect-ratio: 1.65; object-fit: cover; border-radius: 16px; }
.post-picture .eyebrow { position: absolute; right: 12px; bottom: 12px; background: #d6ccfb; font-size: 12px; }
.post-card h2, .post-row h2 { font-size: 25px; letter-spacing: -.5px; margin-top: 20px; }
.post-card p, .post-row p { font-size: 16px; margin-top: 18px; }
.post-card:hover h2, .post-row:hover h2 { color: var(--primary-500); }
.post-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
.post-filters button { border: 1px solid transparent; }
.post-filters button.is-active { background: var(--navy); color: white; }
.post-list { max-width: 950px; margin: 55px auto 0; display: grid; gap: 34px; }
.post-row { display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 25px; }
.post-row > img { width: 100%; border-radius: 15px; }
.post-row h2 { margin-top: 0; }
.article-shell { width: min(1050px, calc(100% - 64px)); margin: 85px auto 120px; }
.article-shell > img { width: 100%; border-radius: 28px; }
.article-meta { margin: 28px 35px 15px; }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; align-items: center; }
.blog-article-meta .icon { display: none; }
.blog-card-cat { border-radius: 999px; padding: 5px 14px; background: #d6ccfb; font-weight: 700; }
.article-shell > h1 { font-size: clamp(34px, 3.6vw, 60px); line-height: 1.12; letter-spacing: -1.5px; margin: 0 35px; }
.article-body { margin: 25px 35px 0; font-size: 18px; line-height: 1.85; overflow-wrap: anywhere; }
.article-body h2 { font-size: 32px; letter-spacing: -.5px; margin: 40px 0 18px; line-height: 1.2; }
.article-body h3 { font-size: 24px; margin: 28px 0 14px; }
.article-body p, .article-body li { margin-bottom: 18px; }
.article-body ul, .article-body ol { list-style: revert; padding-left: 25px; }
.article-body a { color: var(--primary-500); text-decoration: underline; text-underline-offset: 3px; }
.article-body blockquote { margin: 30px 0; padding: 24px; border-left: 4px solid var(--blue); background: #f4f6fa; border-radius: 10px; }
.article-body .blog-cta { display: none; }
.article-shell .closing { background: #f3f3f5; border-radius: 26px; padding: 40px; margin: 60px 35px 0; }
.article-shell .closing h2 { font-size: 46px; }
.article-body table, .help-article table, .content-page table { border-collapse: collapse; width: 100%; }
.article-body td, .article-body th, .help-article td, .help-article th, .content-page td, .content-page th { border: 1px solid var(--line); padding: 13px; text-align: left; font-size: 15px; }
.blog-table-wrap, .ayuda-table-wrap { overflow-x: auto; }
.help-index { width: min(1200px, calc(100% - 64px)); margin: 70px auto 110px; }
.kb-hero { text-align: center; }
.kb-hero h1 { font-size: clamp(40px, 4.5vw, 72px); line-height: 1.1; letter-spacing: -1.5px; }
.kb-hero > p { margin-top: 22px; }
.kb-search-wrap { max-width: 800px; margin: 35px auto; }
.kb-search-wrap input { width: 100%; font: inherit; border: 1.5px solid #c7cad1; padding: 18px 24px; border-radius: 999px; background: white; }
.kb-search-wrap input:focus { border-color: var(--blue); }
.cat-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 35px 0 65px; }
.cat-chip { border-radius: 999px; background: #f3f3f6; padding: 9px 16px; font-size: 13px; }
.cat-chip:hover { background: #e7edfc; color: var(--primary-500); }
.cat-count { font-size: 11px; margin-left: 8px; }
.kb-category-section { margin-top: 50px; }
.kb-category-header, .kb-category-section > h2 { font-size: 28px; margin-bottom: 20px; letter-spacing: -.5px; }
.kb-cards-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kb-category-header { display: flex; align-items: baseline; gap: 16px; }
.kb-category-header .cat-badge { font-size: 13px; color: var(--muted); }
.kb-card-icon, .kb-card-arrow { display: none; }
.kb-card-body p { margin-top: 12px; }
.kb-card { display: flex; flex-direction: column; gap: 12px; background: #f5f5f7; padding: 25px; border-radius: 17px; }
.kb-card:hover { background: #edf2fc; }
.kb-card h3 { font-size: 20px; }
.kb-card p { color: var(--muted); font-size: 14px; }
.kb-card .card-icon { display: none; }
.kb-card .card-meta, .kb-card small { font-size: 12px; }
.kb-no-results { text-align: center; padding: 45px; }
.help-article { width: min(1050px, calc(100% - 64px)); margin: 65px auto 100px; overflow-wrap: anywhere; }
.ayuda-breadcrumb { color: var(--muted); font-size: 13px; margin-bottom: 35px; }
.ayuda-breadcrumb a { color: var(--primary-500); }
.ayuda-content { font-size: 17px; line-height: 1.8; }
.ayuda-content h1 { font-size: clamp(36px, 3.5vw, 60px); line-height: 1.12; letter-spacing: -1px; }
.ayuda-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 20px 0 45px; }
.ayuda-meta .icon { width: 16px; }
.ayuda-content h2 { font-size: 30px; letter-spacing: -.5px; line-height: 1.2; margin: 38px 0 20px; }
.ayuda-content h3 { font-size: 24px; margin: 30px 0 18px; }
.ayuda-content p { margin: 14px 0; }
.ayuda-content ul, .ayuda-content ol { list-style: revert; padding-left: 28px; }
.ayuda-content li { margin: 12px 0; }
.ayuda-content a { color: var(--primary-500); text-decoration: underline; }
.ayuda-content .ayuda-img { max-height: 800px; object-fit: contain; margin: 25px auto; border-radius: 10px; }
.ayuda-content video, .ayuda-content iframe { max-width: 100%; }
.ayuda-note { background: #eff5fd; border-radius: 16px; padding: 24px; margin: 25px 0; }
.ayuda-related { padding: 28px; background: #f4f4f6; border-radius: 20px; margin-top: 45px; }
.ayuda-related h3 { margin-top: 0; }
.ayuda-related .icon { display: none; }
.ayuda-cta { text-align: center; background: #f3f3f5; padding: 35px; border-radius: 22px; margin-top: 45px; }
.ayuda-cta a { display: inline-flex; gap: 8px; align-items: center; padding: 12px 20px; border-radius: 999px; background: var(--blue); color: white; text-decoration: none; font-size: 14px; margin: 10px 5px 0; }
.image-zoom-button { display: block; background: transparent; border: 0; padding: 0; max-width: 100%; margin: 25px auto; cursor: zoom-in; }
.image-zoom-button .ayuda-img { margin: 0; }
.image-dialog { width: min(1400px, 94vw); max-height: 94vh; padding: 40px 18px 18px; border: 0; border-radius: 20px; }
.image-dialog::backdrop { background: #031445b0; }
.image-dialog > img { max-height: calc(94vh - 65px); width: 100%; object-fit: contain; }
.content-page { margin-bottom: 110px; }
.content-page .hero-internal, .content-page .hero-corp, .content-page .hero-pro, .content-page > section:first-child { padding: 70px 24px; text-align: center; }
.content-page h1 { font-size: clamp(38px, 4vw, 72px); line-height: 1.12; letter-spacing: -1.5px; max-width: 1100px; margin: 0 auto; }
.content-page h2 { font-size: clamp(28px, 3vw, 48px); line-height: 1.15; margin: 30px 0 22px; letter-spacing: -.8px; }
.content-page h3 { font-size: 24px; margin: 15px 0; }
.content-page h4 { font-size: 20px; margin: 18px 0; }
.content-page p { line-height: 1.75; margin: 18px 0; }
.content-page .section-title { text-align: center; margin-bottom: 45px; }
.content-page section { padding: 55px 0; }
.content-page :is(.section-light,.bg-light,.cta-dark,.cta-final) { background: #f4f4f6; }
.content-page .btn, .content-page .btn-primary { display: inline-flex; align-items: center; gap: 10px; justify-content: center; background: var(--blue); color: white; padding: 12px 24px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.content-page .btn:hover { background: var(--primary-500); }
.content-page .btn-outline { background: white; color: var(--blue); border: 1px solid var(--blue); }
.content-page :is(.features-grid,.benefits-grid,.services-grid,.faq-grid,.cards-grid,.pricing-grid) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.content-page :is(.features-grid-dark,.pasos-grid) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.content-page :is(.feature-card-white,.paso) { padding: 30px; border-radius: 22px; background: #f3f3f5; }
.content-page .feature-icon, .content-page .paso-number { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--navy); font-weight: 700; }
.content-page .section-title-light, .content-page .center-cta, .content-page .clientes-subtitle, .content-page .cta-dark { text-align: center; }
.content-page .center-cta { margin-top: 35px; }
.content-page .edu-content { max-width: 950px; margin: auto; }
.content-page .edu-list li { margin: 16px 0; }
.content-page .mx-auto-400 { max-width: 400px; margin: auto; }
.content-page .mx-auto-450 { max-width: 450px; margin: auto; }
.content-page .logos-track { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 30px; margin-top: 40px; }
.content-page .logos-track img { width: 125px; height: 90px; object-fit: contain; }
.content-page :is(.feature-card,.benefit-card,.service-card,.faq-card,.pricing-card) { padding: 30px; border-radius: 22px; background: #f3f3f5; }
.content-page :is(.feature-card,.benefit-card,.service-card,.faq-card) > .icon { width: 35px; height: 35px; color: var(--navy); margin-bottom: 20px; }
.content-page .pricing-grid { grid-template-columns: repeat(4,1fr); align-items: stretch; }
.content-page .pricing-card { position: relative; display: flex; flex-direction: column; background: #eef3f4; }
.content-page .pricing-header h3 { color: #777d85; font-size: 20px; }
.content-page .plan-tagline { font-size: 13px; margin: 0; }
.content-page .price { color: var(--blue); font-size: clamp(28px, 2.8vw, 46px); font-weight: 700; }
.content-page .price > span { display: block; font-size: 14px; margin-top: 6px; }
.content-page .popular-badge { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); border-radius: 999px; background: var(--navy); color: white; font-size: 12px; padding: 6px 18px; }
.content-page .pricing-features { border-top: 1px solid #d8dee3; margin-top: 25px; padding-top: 16px; flex: 1; }
.content-page .pricing-features li { font-size: 14px; margin: 14px 0; padding-left: 22px; position: relative; }
.content-page .pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--primary-500); font-weight: 700; }
.content-page .pricing-features .feature-unavailable { color: #687080; }
.content-page .pricing-features .feature-unavailable::before { content: '×'; color: var(--error); }
.content-page .pricing-features .feature-empty { display: none; }
.content-page .pricing-cta { margin-top: 28px; }
.content-page :is(.legal-content,.privacy-content,.terms-content) { max-width: 1000px; margin: auto; padding: 45px 24px; }
.content-page .error-page, .content-page .error-code { text-align: center; }
.page-error .content-page { text-align: center; padding: 0 24px; }
.content-page .error-code { font-size: 100px; font-weight: 700; color: var(--blue); padding-top: 55px; }
.content-page .error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 25px; }
.content-page ul:not(.pricing-features ul) { padding-left: 22px; list-style: disc; }
.content-page img { max-height: 600px; object-fit: contain; margin: auto; }
.content-page .icon { display: inline-block; vertical-align: middle; }
.content-page a:not(.btn) { color: var(--primary-500); }
@media (max-width: 1100px) {
    .commission-grid, .content-page .pricing-grid { grid-template-columns: repeat(2,1fr); }
    .architecture-grid { grid-template-columns: 1.4fr 1fr; }
    .kb-cards-wrap { grid-template-columns: repeat(2,1fr); }
    .split-story { gap: 35px; }
}
@media (max-width: 760px) {
    .section-block { padding-top: 80px; }
    .section-spacer { height: 80px; }
    .page-hero { padding-top: 45px; }
    .page-hero :is(h1,.display-title) { font-size: 42px; letter-spacing: -1.3px; }
    .page-hero > p { font-size: 16px; }
    .page-hero > .eyebrow { margin-bottom: 28px; }
    .about-hero-art { margin-top: 40px; }
    .split-story { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
    .split-story.reverse > div, .split-story.reverse > img { grid-column: auto; grid-row: auto; }
    .split-story p { font-size: 16px; }
    .split-story h3 { font-size: 32px; }
    .download-section { padding: 70px 20px; }
    .stat-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
    .stat strong { font-size: 29px; }
    .deployment-grid, .infrastructure-grid, .architecture-grid { grid-template-columns: 1fr; }
    .infrastructure-grid { max-width: 430px; gap: 35px; }
    .architecture > h2 { line-height: 1.35; }
    .referral-hero { padding-bottom: 40px; }
    .referral-hero h1, .enterprise-hero :is(h1,.display-title) { font-size: 36px; }
    .referral-steps > li { grid-template-columns: 34px 1fr; gap: 15px; padding: 18px; }
    .step-number { width: 34px; height: 34px; }
    .referral-steps > li > img { width: 100%; max-width: 240px; }
    .referral-steps > li > div { grid-column: 1/-1; }
    .referral-steps h3 { font-size: 22px; }
    .referral-banner { width: calc(100% - 40px); grid-template-columns: 1fr; margin-top: 80px; }
    .referral-banner > div:last-child { padding: 25px 28px 35px; }
    .contact-channels { grid-template-columns: 1fr; max-width: 430px; gap: 16px; margin-top: 40px; }
    .contact-channels > * { padding: 22px; }
    .contact-channels h2 { font-size: 27px; }
    .contact-hero > .contact-intro { margin-top: 38px; }
    .contact-form-wrap { margin-block: 65px; }
    .contact-form .form-row { grid-template-columns: 1fr; gap: 25px; }
    .contact-form input, .contact-form textarea { font-size: 16px; }
    .faq-band { padding: 65px 0; }
    .contact-assistance { padding: 28px; margin-block: 80px; }
    .contact-assistance h2 { font-size: 30px; }
    .post-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 35px; }
    .post-row { grid-template-columns: 1fr; gap: 18px; }
    .post-row > img { max-height: 260px; object-fit: cover; }
    .post-card h2, .post-row h2 { font-size: 24px; }
    .article-shell { width: calc(100% - 40px); margin: 45px auto 65px; }
    .article-meta { margin: 25px 0 15px; }
    .article-shell > h1 { font-size: 35px; margin: 0; }
    .article-body { margin: 25px 0 0; font-size: 16px; }
    .article-body h2 { font-size: 27px; }
    .article-shell .closing { padding: 30px 22px; margin: 40px 0 0; }
    .article-shell .closing h2 { font-size: 34px; }
    .help-index, .help-article { width: calc(100% - 40px); margin: 45px auto 75px; }
    .kb-cards-wrap { grid-template-columns: 1fr; }
    .cat-nav { justify-content: flex-start; gap: 9px; }
    .cat-chip { font-size: 12px; }
    .ayuda-content { font-size: 16px; }
    .ayuda-content h1 { font-size: 34px; }
    .ayuda-content h2 { font-size: 27px; }
    .ayuda-related, .ayuda-cta { padding: 24px; }
    .content-page :is(.features-grid,.benefits-grid,.services-grid,.faq-grid,.cards-grid,.features-grid-dark,.pasos-grid) { grid-template-columns: 1fr; }
    .content-page .logos-track { grid-template-columns: repeat(3,1fr); gap: 20px; }
    .content-page .hero-internal, .content-page .hero-corp, .content-page .hero-pro, .content-page > section:first-child { padding: 40px 0; }
    .content-page h1 { font-size: 36px; }
    .content-page .pricing-card { padding: 26px; }
}
@media (max-width: 520px) {
    .commission-grid, .content-page .pricing-grid { grid-template-columns: 1fr; }
    .commission-grid { max-width: 400px; margin: auto; }
    .commission-grid .deployment-card { padding: 30px; }
}
@media print {
    .image-dialog, .download-dialog, .post-filters { display: none !important; }
    .section-block { padding-top: 30px; }
}

/* ==========================================================================
   V2 - Capa SEO sobre el diseno nuevo (2026-09-20). Se anexa a site.css en el build.
   Restaura los H1 y el contenido de la web original sin cambiar el lenguaje visual:
   reutiliza los tokens existentes (--ink, --muted, --navy, --line, --surface, --primary-500),
   espaciado en multiplos de 4 y pisos de legibilidad (nunca menos de 14px).
   ========================================================================== */
.u-upper { text-transform: uppercase; }
.display-title { font-weight: 700; }

/* H1 real (keyword de la web original) como linea de entrada bajo el titular de diseno */
.new-site .hero h1.seo-h1, .new-site .page-hero h1.seo-h1 {
    font-family: Arial, Helvetica, sans-serif; font-size: clamp(17px, 1.25vw, 22px); font-weight: 700;
    line-height: 1.35; letter-spacing: 0; text-transform: none; text-wrap: balance;
    max-width: 760px; margin: 16px auto 0; color: var(--ink);
}
.new-site .hero h1.seo-h1 { margin-top: 0; }
.new-site .hero h1.seo-h1 + .hero-subtitle { margin-top: 12px; max-width: 780px; }
.new-site .page-hero h1.seo-h1 + p { margin-top: 12px; }
.new-site .contact-hero h1.seo-h1 { margin-top: 20px; }

/* Bloques de contenido restaurado */
.plan-legend { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Dos notas compactas bajo los logos (contenido de la web original, sin titulares gigantes) */
.trust-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; max-width: 1080px; margin: 48px auto 0; text-align: left; }
.trust-note + .trust-note { padding-left: 56px; border-left: 1px solid var(--line); }
.trust-note h3 { font-size: clamp(18px, 1.35vw, 24px); letter-spacing: -.3px; }
.trust .trust-note p { margin-top: 12px; font-size: 16px; color: var(--muted); }
.benefits-more { max-width: 760px; margin-inline: auto; font-size: 15px; line-height: 1.6; color: var(--muted); }
.hero-subtitle, .plan-legend, .trust-note h3, .trust-note p, .benefits-more, .closing > p { text-wrap: balance; }
.rating-line { font-variant-numeric: tabular-nums; }
.rating-line span { color: var(--primary-400); letter-spacing: 2px; }
.prose-block { max-width: 860px; margin: 0 auto; font-size: 18px; line-height: 1.75; color: var(--muted); }
.prose-block p + p { margin-top: 20px; }
.benefit-grid.value-grid { grid-template-columns: repeat(4, 1fr); width: min(1240px, 100%); }
.about-cifras .stat-grid { margin-top: 0; }
.closing > .button-row { margin-top: 28px; }
/* Encabezados que en la web original eran H2: siguen siendo encabezado, con el aspecto de texto de apoyo */
.section-heading > .section-lead { max-width: 680px; margin: 18px auto 0; font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--muted); text-wrap: balance; }
.closing > .closing-lead { max-width: 680px; margin: 28px auto 0; font-size: clamp(18px, 1.35vw, 24px); letter-spacing: -.3px; text-wrap: balance; }
.closing > .closing-lead + p { margin-top: 8px; }
.page-nosotros .closing { padding-top: 48px; }
.blog-breadcrumb { margin: 0 35px 28px; }

@media (min-width: 1201px) {
    /* El boton de la flecha de Servicios mide 28px y el icono 15px: su aire derecho (6,5px) se sumaba a la
       separacion del menu. Se compensa para que Servicios -> Precios mida lo mismo que el resto. */
    .nav-dropdown-heading button { margin-right: -6.5px; }
    .new-site .hero h1.seo-h1, .new-site .page-hero h1.seo-h1 { font-size: max(17px, calc(22 * var(--du))); max-width: calc(980 * var(--du)); }
    .new-site .hero h1.seo-h1 + .hero-subtitle { max-width: calc(1000 * var(--du)); font-size: max(15px, calc(20.2 * var(--du))); }
    .plan-legend { font-size: max(14px, calc(18 * var(--du))); max-width: calc(980 * var(--du)); margin-top: calc(40 * var(--du)); }
    .trust-notes { max-width: calc(1280 * var(--du)); margin-top: calc(64 * var(--du)); gap: calc(32 * var(--du)) calc(72 * var(--du)); }
    .trust-note + .trust-note { padding-left: calc(72 * var(--du)); }
    .trust-note h3 { font-size: max(18px, calc(26 * var(--du))); }
    .trust .trust-note p { font-size: max(15px, calc(20.2 * var(--du))); }
    .benefits-more { font-size: max(14px, calc(18 * var(--du))); max-width: calc(980 * var(--du)); }
    .prose-block { font-size: max(16px, calc(20.2 * var(--du))); max-width: calc(1080 * var(--du)); }
    .benefit-grid.value-grid { width: calc(1430 * var(--du)); }
    .section-heading > .section-lead { font-size: max(15px, calc(20.2 * var(--du))); max-width: calc(900 * var(--du)); }
    .closing > .closing-lead { font-size: max(18px, calc(26 * var(--du))); max-width: calc(790 * var(--du)); }
}
@media (max-width: 1100px) {
    .benefit-grid.value-grid { grid-template-columns: repeat(2, 1fr); width: min(720px, 100%); }
}
@media (max-width: 760px) {
    .prose-block { font-size: 16px; }
    .trust-notes { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; text-align: center; }
    .trust-note + .trust-note { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--line); }
    .trust .trust-note p { font-size: 14px; }
    .plan-legend { font-size: 14px; margin-top: 24px; }
    .page-nosotros .closing { padding-top: 24px; }
    .blog-breadcrumb { margin: 0 0 24px; }
}
@media (max-width: 520px) {
    .benefit-grid.value-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   V2 - Movimiento ligero y seguro (2026-09-20). Se anexa a site.css en el build.
   Reglas: solo opacity/transform (CLS 0), 140-240 ms, una curva de entrada y una de salida,
   entradas orquestadas <= 400 ms en total y sin rebotes. Unico bucle: el carrusel de clientes (lento y pausable).
   "Reducir movimiento" ya lo cubre el bloque global de home.css (anula transition/animation);
   ademas todo lo de aqui vive dentro de prefers-reduced-motion: no-preference.
   Los candidatos a LCP (titular e imagen del hero) solo se desplazan: nunca parten de opacidad 0.
   ========================================================================== */
:root {
    --motion-snap: 140ms; --motion-quick: 180ms; --motion-smooth: 240ms;
    --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-in: cubic-bezier(.55, .06, .68, .19);
}

/* Carrusel de clientes (como en la web original): marquesina solo CSS.
   Los logos conservan EXACTAMENTE el tamano que tenian en la fila estatica del diseno: mismas reglas
   (tamano natural limitado por la celda de la grilla y por max-height) en cada punto de quiebre.
   Base = lista estatica centrada (tambien es lo que ve quien tiene "reducir movimiento");
   el desplazamiento se activa solo dentro de prefers-reduced-motion: no-preference. */
.brand-marquee { --brand-gap: 36px; --brand-max-h: 52px; --brand-cell: calc((min(1200px, 100vw - 64px) - 7 * var(--brand-gap)) / 8); container-type: inline-size; margin-top: 42px; }
@supports (width: 1cqw) { .brand-marquee { --brand-cell: calc((100cqw - 7 * var(--brand-gap)) / 8); } }
.brand-track { display: flex; align-items: center; justify-content: center; min-height: var(--brand-max-h); }
.brand-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--brand-gap); }
.brand-set[aria-hidden="true"] { display: none; }
.brand-set li { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--brand-cell); }
.brand-set img { width: auto; height: auto; max-width: var(--brand-cell); max-height: var(--brand-max-h); }
.brand-set .brand-crop { width: var(--brand-cell); aspect-ratio: 308 / 76; max-height: none; object-fit: cover; }
@media (max-width: 1250px) { .brand-marquee { --brand-gap: 25px; } }
@media (max-width: 900px) {
    .brand-marquee { --brand-gap: 30px; --brand-max-h: 45px; --brand-cell: 106px; }
    .brand-set li { width: auto; }
}
@media (max-width: 640px) { .brand-marquee { --brand-gap: 23px; --brand-max-h: 33px; --brand-cell: 68px; margin-top: 29px; } }
@media (max-width: 360px) { .brand-marquee { --brand-gap: 18px; --brand-cell: 59px; } }
@media (min-width: 1201px) { .brand-marquee { --brand-gap: calc(60 * var(--du)); --brand-max-h: calc(69 * var(--du)); --brand-cell: calc(121.5 * var(--du)); margin-top: calc(30 * var(--du)); } }

@media (prefers-reduced-motion: no-preference) {
    @keyframes v2-marquee { to { transform: translateX(-33.3333%); } }
    .brand-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
    .brand-track { justify-content: flex-start; width: max-content; animation: v2-marquee 42s linear infinite; }
    .brand-set, .brand-set[aria-hidden="true"] { display: flex; flex-wrap: nowrap; flex-shrink: 0; padding-right: var(--brand-gap); }
    .brand-marquee:hover .brand-track, .brand-marquee:focus-within .brand-track { animation-play-state: paused; }
    .brand-set img { transition: transform var(--motion-quick) var(--ease-out); }
    .brand-set img:hover { transform: scale(1.06); }

    @keyframes v2-rise-in { from { opacity: 0; transform: translateY(14px); } }
    @keyframes v2-rise { from { transform: translateY(14px); } }
    @keyframes v2-drop-in { from { opacity: 0; transform: translateY(-6px); } }
    @keyframes v2-pop-in { from { opacity: 0; transform: scale(.85); } }
    @keyframes v2-fade-in { from { opacity: 0; } }
    /* mismos valores que whatsappPulse de ACTUAL (style.css) */
    @keyframes whatsappPulse {
        0% { box-shadow: 0 4px 15px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .3); }
        70% { box-shadow: 0 4px 15px rgba(37, 211, 102, .35), 0 0 0 12px rgba(37, 211, 102, 0); }
        100% { box-shadow: 0 4px 15px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, 0); }
    }

    /* 1. Entrada del hero (solo CSS). "backwards" devuelve el control al estilo normal al terminar,
          asi los hover de botones siguen funcionando. */
    .hero > *, .page-hero > *, .kb-hero > *, .content-page > section:first-child .container > * {
        animation: v2-rise-in var(--motion-smooth) var(--ease-out) backwards;
    }
    .hero > .hero-headline, .hero > .hero-art, .page-hero > .display-title, .page-hero > h1:not(.seo-h1),
    .page-hero > [class$="-art"], .kb-hero > h1, .content-page > section:first-child .container > h1 { animation-name: v2-rise; }
    :is(.hero, .page-hero, .kb-hero) > :nth-child(2), .content-page > section:first-child .container > :nth-child(2) { animation-delay: 40ms; }
    :is(.hero, .page-hero, .kb-hero) > :nth-child(3), .content-page > section:first-child .container > :nth-child(3) { animation-delay: 80ms; }
    :is(.hero, .page-hero, .kb-hero) > :nth-child(4), .content-page > section:first-child .container > :nth-child(4) { animation-delay: 120ms; }
    :is(.hero, .page-hero, .kb-hero) > :nth-child(n+5) { animation-delay: 160ms; }

    /* 2. Revelado al hacer scroll (las clases las pone js/motion.js solo bajo el pliegue) */
    .reveal { opacity: 0; transform: translateY(16px); }
    .reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--motion-smooth) var(--ease-out), transform var(--motion-smooth) var(--ease-out); }
    .reveal-d1.is-visible { transition-delay: 40ms; }
    .reveal-d2.is-visible { transition-delay: 80ms; }
    .reveal-d3.is-visible { transition-delay: 120ms; }
    .reveal-d4.is-visible { transition-delay: 160ms; }

    /* 3. Menus, FAQ, dialogos y avisos: aparecen con una transicion corta */
    .services-navigation:not([hidden]) { animation: v2-drop-in var(--motion-snap) var(--ease-out); }
    .faq details[open] > p { animation: v2-drop-in var(--motion-quick) var(--ease-out); }
    .download-dialog[open], .image-dialog[open] { animation: v2-pop-in var(--motion-quick) var(--ease-out); }
    .download-dialog[open]::backdrop, .image-dialog[open]::backdrop { animation: v2-fade-in var(--motion-quick) var(--ease-out); }
    .cookie-banner { animation: v2-rise-in var(--motion-smooth) var(--ease-out) 300ms backwards; }
    .chat-whatsapp-float { animation: v2-pop-in var(--motion-smooth) var(--ease-out) 500ms backwards; }
    /* Ondas del boton de WhatsApp: el mismo pulso que tiene ACTUAL (2,5 s, anillo de 12px). Como en ACTUAL, solo en
       pantallas de mas de 768px y se detiene al pasar el puntero. Excepcion pedida por el usuario a "sin bucles". */
    @media (min-width: 769px) {
        .chat-whatsapp-float { animation: v2-pop-in var(--motion-smooth) var(--ease-out) 500ms backwards, whatsappPulse 2.5s 1s infinite; }
        .chat-whatsapp-float:hover { animation: none; }
    }
    .faq summary::after { transition: transform var(--motion-quick) var(--ease-out); }

    /* 4. Interaccion: pulsacion de botones, imagen del hero que acompana al puntero (js/motion.js)
          y subrayado que crece en el menu de escritorio */
    .button:active { transform: translateY(0) scale(.98); }
    .hero-art img, .about-hero-art img, .corporate-hero-art img { transition: transform var(--motion-smooth) var(--ease-out); }

    /* 5. Respuesta al puntero solo en tarjetas que son enlaces (y planes), nunca en tarjetas informativas */
    @media (hover: hover) {
        .service-card, .post-card, .post-row, .kb-card, .plan-card, a.contact-card, .contact-channels > a {
            transition: transform var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out);
        }
        .service-card:hover, .post-card:hover, .post-row:hover, .kb-card:hover, .contact-channels > a:hover { transform: translateY(-4px); }
        .plan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px color-mix(in srgb, var(--secondary-500) 9%, transparent); }
    }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1200px) {
    .site-navigation.is-open { animation: v2-drop-in var(--motion-quick) var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (min-width: 1201px) {
    .navigation-links a {
        background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 6px) / 0 2px;
        transition: color var(--motion-snap) var(--ease-out), background-size var(--motion-quick) var(--ease-out);
    }
    .navigation-links a:hover, .navigation-links a:focus-visible { background-size: 100% 2px; }
}
@media print {
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* Boton flotante de WhatsApp como en ACTUAL (pedido del usuario): logotipo solido -NUEVA lo habia dibujado en trazo- y
   mismo realce al pasar el puntero. Las ondas estan arriba, con el resto del movimiento. */
.chat-whatsapp-float .wa-logo { width: 32px; height: 32px; fill: currentColor; }
.chat-whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(37, 211, 102, .5); }
@media (max-width: 768px) { .chat-whatsapp-float .wa-logo { width: 26px; height: 26px; } }
/* Si el widget de Kommo esta activo (lo inyecta GTM) se apila encima del boton de WhatsApp, igual que en ACTUAL;
   esas reglas vivian en style.css, que las paginas nuevas ya no cargan. */
#crm_plugin, [id^="amojo"], [class*="amojo"], [class*="amo-button"], [class*="amo-social"], iframe[src*="kommo"], iframe[src*="amocrm"], div[data-kommo], .kommo-social-button {
    position: fixed !important; bottom: 94px !important; right: 24px !important; left: auto !important; z-index: 44 !important;
}
@media (max-width: 768px) {
    #crm_plugin, [id^="amojo"], [class*="amojo"], [class*="amo-button"], [class*="amo-social"], iframe[src*="kommo"], iframe[src*="amocrm"], div[data-kommo], .kommo-social-button {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important; right: 12px !important;
    }
}

/* ==========================================================================
   V2 - Centro de Ayuda (/ayuda/) alineado al lenguaje del diseno (2026-09-20). Se anexa a site.css.
   Mismo vocabulario que las maquetas: panel redondeado con degradado celeste (como "Descarga la app"),
   rotulo tipo pastilla, titular en Montserrat (como Blog y Contacto), filtros tipo pastilla (como el Blog),
   tarjetas con icono circular (como "Lo que tenemos para ti") y bloque de asistencia (como Contacto).
   Solo CSS sobre el marcado existente: no cambia textos, enlaces ni los ganchos del buscador (site.js).
   ========================================================================== */
.help-index { margin-top: 32px; }

/* Hero */
.kb-hero { padding: 64px 32px 44px; border-radius: 36px; background: linear-gradient(180deg, #eff5fd, white); }
.kb-hero > .eyebrow { margin-bottom: 24px; color: white; background: var(--navy); }
.kb-hero h1 { font-family: Montserrat, Arial, sans-serif; letter-spacing: -1px; }
.kb-hero > p { max-width: 720px; margin: 20px auto 0; font-size: 18px; color: var(--muted); text-wrap: balance; }

/* Buscador */
.kb-search-wrap { max-width: 760px; margin: 32px auto 0; }
.kb-search-wrap input {
    height: 60px; padding: 0 28px 0 60px; border: 1.5px solid var(--line); font-size: 16px; color: var(--ink);
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082579' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") no-repeat 24px center / 22px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--secondary-500) 7%, transparent);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.kb-search-wrap input::placeholder { color: var(--muted); }
.kb-search-wrap input:hover { border-color: var(--primary-100); }
.kb-search-wrap input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent), 0 12px 32px color-mix(in srgb, var(--secondary-500) 7%, transparent); }

/* Categorias (mismo patron que los filtros del Blog) */
.cat-nav { gap: 10px; max-width: 1000px; margin: 28px auto 0; }
.cat-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 8px 8px 16px;
    border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink);
    font-size: 14px; font-weight: 600; line-height: 1.2; transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.cat-count { min-width: 24px; margin-left: 0; padding: 3px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.cat-chip:hover, .cat-chip:focus-visible { background: var(--navy); border-color: var(--navy); color: white; }
.cat-chip:hover .cat-count, .cat-chip:focus-visible .cat-count { background: color-mix(in srgb, white 18%, transparent); color: white; }

/* Secciones por categoria */
.kb-category-section { margin-top: 72px; }
.kb-category-header { align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.kb-category-header h2 { margin: 0; font-size: clamp(26px, 2.2vw, 36px); line-height: 1.15; letter-spacing: -.6px; }
.kb-category-header .cat-badge { padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tarjetas de articulo */
.kb-cards-wrap { gap: 20px; }
.kb-card { position: relative; gap: 0; padding: 28px 28px 68px; border-radius: 22px; background: var(--surface); }
.kb-card-icon {
    display: block; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082579' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h9l5 5v13H5ZM14 3v6h5M9 13h6m-6 4h6'/%3E%3C/svg%3E") no-repeat center / 24px;
}
.kb-card h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.3px; }
.kb-card p { display: -webkit-box; overflow: hidden; margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.kb-card-arrow {
    display: block; position: absolute; right: 24px; bottom: 22px; width: 32px; height: 32px; border-radius: 50%;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082579' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 16px;
    transition: background-color .18s ease, transform .18s ease;
}
.kb-card:hover .kb-card-arrow, .kb-card:focus-visible .kb-card-arrow {
    background-color: var(--blue); transform: translateX(3px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.kb-card:hover h3 { color: var(--primary-500); }

/* Sin resultados y asistencia */
.kb-no-results { margin-top: 48px; padding: 40px 24px; border-radius: 22px; background: var(--surface); color: var(--muted); }
.kb-ticket { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 80px; padding: 36px 40px; border-radius: 28px; background: var(--surface); }
.kb-ticket p { font-size: clamp(22px, 2vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.5px; color: var(--ink); }
.kb-ticket a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 24px; border-radius: 999px;
    background: var(--blue); color: white; font-family: Montserrat, Arial, sans-serif; font-size: 14px; font-weight: 700;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.kb-ticket a:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--blue) 13%, transparent); }

@media (max-width: 760px) {
    .help-index { margin-top: 20px; }
    .kb-hero { padding: 40px 20px 28px; border-radius: 24px; }
    .kb-hero > .eyebrow { margin-bottom: 20px; }
    .kb-hero > p { font-size: 16px; }
    .kb-search-wrap { margin-top: 24px; }
    .kb-search-wrap input { height: 54px; padding-left: 52px; background-position: 20px center; }
    /* En movil las categorias van en una sola fila deslizable (11 filas apiladas empujaban el contenido) */
    .cat-nav {
        flex-wrap: nowrap; justify-content: flex-start; gap: 8px; max-width: none; margin: 20px -20px 0; padding: 4px 20px 8px;
        overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, black 86%, transparent); mask-image: linear-gradient(to right, black 86%, transparent);
    }
    .cat-nav::-webkit-scrollbar { display: none; }
    .cat-chip { flex: 0 0 auto; min-height: 38px; font-size: 13px; scroll-snap-align: start; }
    .kb-category-section { margin-top: 48px; }
    .kb-cards-wrap { gap: 14px; }
    .kb-card { padding: 24px 24px 64px; border-radius: 18px; }
    .kb-ticket { flex-direction: column; align-items: stretch; margin-top: 56px; padding: 28px 24px; border-radius: 22px; text-align: center; }
}

/* Imagen ampliada de los articulos: el dialogo se ajusta a la imagen en lugar de estirarla siempre a 1400px
   (medido: una captura de 169x101 se mostraba a 1318x781, borrosa). Las capturas grandes siguen usando todo el ancho. */
.image-dialog { width: fit-content; max-width: min(1400px, 94vw); }
.image-dialog > img { display: block; width: auto; max-width: 100%; min-width: min(560px, 80vw); margin-inline: auto; }

/* ==========================================================================
   V2 - Pie compacto de 3 columnas (2026-09-20). Se anexa a site.css.
   Medido antes: 696px de alto a 1440px, parrafo 20,7px y enlaces 26,8px (mas grandes que el cuerpo de la pagina).
   Ahora: marca y contacto | enlaces (Producto, Recursos, Empresa) | formulario de contacto, y barra inferior.
   Se conserva el fondo, el logo, el texto, la direccion, los telefonos, las redes y el copyright del diseno.
   Selectores con .new-site para imponerse a design.css, que se carga despues.
   ========================================================================== */
.new-site .site-footer { padding: 64px 0 32px; }
.new-site .site-footer > .container { display: grid; grid-template-columns: 1fr auto; align-items: center; width: min(1200px, calc(100% - 64px)); }
.new-site .site-footer .footer-grid { grid-column: 1 / -1; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(320px, 372px); gap: 48px 56px; align-items: start; }
.new-site .site-footer .footer-about > img { width: 190px; margin-top: 0; }
.new-site .site-footer .footer-about > p { max-width: 360px; margin-top: 20px; font-size: 15px; line-height: 1.6; }
.new-site .site-footer .footer-about address { margin-top: 16px; font-size: 14px; font-weight: 600; line-height: 1.7; }
.new-site .site-footer .footer-company { width: auto; margin-top: 16px; font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: var(--muted); }
/* Enlaces en 2 subcolumnas: Producto a la izquierda; Recursos y Empresa apilados a la derecha (sin partir rotulos) */
.new-site .site-footer .footer-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; align-items: start; }
.new-site .site-footer .footer-resources > :first-child { grid-row: span 2; }
.new-site .site-footer .footer-title { margin-bottom: 14px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.new-site .site-footer .footer-links li { margin-bottom: 6px; }
.new-site .site-footer .footer-links a, .new-site .site-footer .cookie-settings { display: inline-block; padding: 3px 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.new-site .site-footer .footer-links a:hover, .new-site .site-footer .cookie-settings:hover { color: var(--primary-500); text-decoration: underline; text-underline-offset: 3px; }
.new-site .site-footer .social-links, .new-site .site-footer .copyright { margin-top: 40px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
/* El boton flotante de WhatsApp (60px a 24px del borde) tapaba las redes en pantallas de 761 a 1400px: se reserva su
   hueco solo cuando el borde derecho del contenedor queda a menos de 104px del borde de la ventana. */
.new-site .site-footer .social-links { grid-column: 2; grid-row: 2; justify-content: flex-end; gap: 12px; padding-right: max(0px, calc(104px - (100vw - min(1200px, 100vw - 64px)) / 2)); }
.new-site .site-footer .social-links a { width: 40px; height: 40px; border-radius: 12px; }
.new-site .site-footer .copyright { grid-column: 1; grid-row: 2; align-self: stretch; display: flex; align-items: center; font-size: 13px; text-align: left; color: var(--muted); }

/* Tercera columna: formulario de contacto con el lenguaje del formulario nuevo de Contacto
   (rotulo en negrita + campo subrayado + boton primario), compacto y sobre tarjeta blanca. */
.new-site .site-footer .footer-contact { min-width: 0; }
.new-site .site-footer .footer-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 20px; border-radius: 20px; background: white; }
.new-site .site-footer .footer-form label { display: block; min-width: 0; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.new-site .site-footer .footer-form :is(.footer-form-wide, .footer-form-actions, .lead-form-status, .turnstile-container) { grid-column: 1 / -1; }
.new-site .site-footer .footer-form :is(input, textarea) { display: block; width: 100%; margin-top: 2px; padding: 7px 2px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; font: 400 15px/1.4 Arial, sans-serif; color: var(--ink); }
.new-site .site-footer .footer-form textarea { min-height: 56px; resize: vertical; }
.new-site .site-footer .footer-form :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--muted) 92%, white); opacity: 1; }
.new-site .site-footer .footer-form :is(input, textarea):focus { outline: none; border-color: var(--blue); box-shadow: 0 2px var(--blue); }
.new-site .site-footer .footer-form :is(input, textarea):user-invalid { border-color: var(--error); }
.new-site .site-footer .footer-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* script.js inserta aqui (antes del boton) el widget de Turnstile cuando el API lo activa: fila propia de 300px */
.new-site .site-footer .footer-form-actions .turnstile-container { flex: 0 0 100%; }
.new-site .site-footer .footer-form .button { flex: 0 0 auto; min-height: 40px; padding: 9px 24px; border: 0; font-size: 14px; cursor: pointer; }
.new-site .site-footer .footer-form .button:disabled { opacity: .6; cursor: progress; transform: none; }
.new-site .site-footer .footer-form-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.new-site .site-footer .footer-form-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.new-site .site-footer .footer-form-note a:hover { color: var(--primary-500); }
.new-site .site-footer .footer-form .lead-form-status { margin: 0; font-size: 14px; line-height: 1.4; }
.new-site .site-footer .footer-form .lead-form-status:empty { display: none; }

/* Tablet: marca y enlaces arriba; el formulario pasa a una banda de ancho completo con los 4 campos en una fila */
@media (max-width: 1100px) {
    .new-site .site-footer .footer-grid { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 40px 56px; }
    .new-site .site-footer .footer-resources { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .new-site .site-footer .footer-resources > :first-child { grid-row: auto; }
    .new-site .site-footer .footer-contact { grid-column: 1 / -1; }
    .new-site .site-footer .footer-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .new-site .site-footer .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .new-site .site-footer .footer-about { grid-column: auto; grid-row: auto; }
}
@media (max-width: 760px) {
    .new-site .site-footer .footer-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .new-site .site-footer { padding: 48px 0 28px; }
    .new-site .site-footer > .container { grid-template-columns: 1fr; width: calc(100% - 40px); }
    .new-site .site-footer .footer-about > img { width: 170px; }
    .new-site .site-footer .footer-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    /* como en escritorio: Producto a la izquierda y Recursos + Empresa apilados a la derecha (ahorra una fila de enlaces) */
    .new-site .site-footer .footer-resources > :first-child { grid-row: span 2; }
    .new-site .site-footer .footer-links a, .new-site .site-footer .cookie-settings { padding: 5px 0; }
    /* 16px en los campos: con menos, iOS hace zoom al enfocar. Relleno de 16px: caben los 300px de Turnstile. */
    .new-site .site-footer .footer-form { padding: 16px; gap: 14px 12px; }
    .new-site .site-footer .footer-form :is(input, textarea) { font-size: 16px; }
    .new-site .site-footer .footer-form .button { min-height: 44px; }
    .new-site .site-footer .social-links { grid-column: 1; grid-row: auto; justify-content: center; margin-top: 32px; padding-right: 0; }
    /* margen lateral: el copyright centrado no queda debajo del boton flotante de WhatsApp (48px a 12px del borde) */
    .new-site .site-footer .copyright { grid-column: 1; grid-row: auto; justify-content: center; margin-top: 0; padding: 16px 56px 0; border-top: 0; text-align: center; font-size: 12px; }
}
@media (max-width: 360px) {
    .new-site .site-footer .footer-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   V2 - Paginas heredadas de la web anterior (sin PSD): precios, servicios, facturacion, firma, plan pro,
   legales, 404, preguntas frecuentes y articulos de blog. Ajustes para que hablen el mismo lenguaje
   visual que las maquetas. Se anexa a site.css. Solo tokens existentes.
   ========================================================================== */

/* Tarjetas sobre bandas grises: en blanco (antes gris sobre gris, casi invisibles) */
.content-page :is(.section-light, .bg-light) :is(.feature-card, .benefit-card, .service-card, .faq-card, .pricing-card, .paso, .feature-card-white) { background: white; }

/* Icono dentro de un circulo, como en "Lo que tenemos para ti" de las maquetas */
.content-page :is(.feature-card, .benefit-card, .service-card, .faq-card) > .icon {
    box-sizing: border-box; display: block; width: 52px; height: 52px; padding: 13px; margin-bottom: 20px;
    border-radius: 50%; background: white; color: var(--navy);
}
.content-page :is(.section-light, .bg-light) :is(.feature-card, .benefit-card, .service-card, .faq-card) > .icon { background: var(--surface); }

/* Cierre de pagina: panel azul marino redondeado con boton blanco, como "Tu referido tambien gana" */
.content-page :is(.cta-dark, .cta-final) {
    width: min(1132px, calc(100% - 64px)); margin: 96px auto 0; padding: 64px 32px; border-radius: 30px;
    background: var(--navy); color: white; text-align: center;
}
.content-page :is(.cta-dark, .cta-final) h2 { margin-top: 0; color: white; text-wrap: balance; }
.content-page :is(.cta-dark, .cta-final) p { max-width: 640px; margin-inline: auto; color: color-mix(in srgb, white 88%, transparent); }
.content-page :is(.cta-dark, .cta-final) :is(.btn, .btn-primary) { margin-top: 8px; background: white; color: var(--navy); }
.content-page :is(.cta-dark, .cta-final) :is(.btn, .btn-primary):hover { background: var(--surface); }
.content-page :is(.cta-dark, .cta-final) a:not(.btn) { color: white; text-decoration: underline; text-underline-offset: 3px; }

/* Utilidades de la web anterior que habian quedado sin regla */
.content-page .text-center { text-align: center; }
.content-page .legal-updated { color: var(--muted); font-size: 14px; }

/* Articulos del blog: metadatos y "Articulos relacionados" con el mismo panel que la ayuda */
.blog-article-meta > span + span::before { content: "·"; margin-right: 12px; color: var(--muted); }
.blog-related { margin-top: 48px; padding: 28px; border-radius: 20px; background: var(--surface); }
.blog-related h3 { margin: 0 0 8px; }
.blog-related .icon { display: none; }
.article-body .blog-related ul { list-style: none; margin: 0; padding: 0; }
.article-body .blog-related li { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.article-body .blog-related li:first-child { border-top: 0; }

/* Llamado de ACTUAL al final de cada post (titulo + texto + enlaces a Precios y registro): NUEVA lo ocultaba con
   display:none. Vuelve a verse como aviso en linea, distinto del cierre gris de la maqueta que va debajo. */
.article-body .blog-cta {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 32px;
    margin-top: 32px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: white;
}
.article-body .blog-cta h3 { grid-column: 1; margin: 0; font-size: 22px; line-height: 1.25; }
.article-body .blog-cta p { grid-column: 1; margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.article-body .blog-cta a {
    grid-column: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 24px;
    border: 1px solid var(--blue); border-radius: 999px; background: white; color: var(--blue);
    font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.article-body .blog-cta a:first-of-type { grid-row: 1; background: var(--blue); color: white; }
.article-body .blog-cta a:last-of-type { grid-row: 2; }
.article-body .blog-cta a:hover { border-color: var(--primary-500); background: var(--primary-500); color: white; }
.article-body .blog-cta .icon { display: none; }
.blog-article-meta i { display: none; }
.blog-article td .si { color: color-mix(in srgb, var(--success) 82%, black); font-weight: 700; }
.blog-article td .no { color: var(--error); font-weight: 700; }

/* Tablas de articulos (blog y ayuda): cabecera con tinte y primera columna sin partir palabras */
:is(.article-body, .help-article, .content-page) th { background: var(--surface); font-weight: 700; color: var(--ink); }
:is(.article-body, .help-article, .content-page) :is(th, td) { overflow-wrap: normal; word-break: normal; vertical-align: top; }
:is(.article-body, .help-article) :is(th, td) > p { margin: 0; }
.help-article .ayuda-table { margin: 24px 0; }

/* Ayuda: video, aviso de imagen pendiente (clases de la web anterior que habian quedado sin regla) */
.ayuda-video-wrap { margin: 24px 0; }
.ayuda-content .ayuda-video { display: block; width: 100%; border: 1px solid var(--line); border-radius: 16px; background: var(--ink); }
.ayuda-content .img-placeholder { margin: 20px 0; padding: 16px 20px; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 15px; text-align: center; }

/* Utilidades de la web anterior sin regla en el CSS nuevo */
.content-page img.mx-auto-700 { display: block; width: min(700px, 100%); height: auto; margin-inline: auto; }
.content-page img.mx-auto-500 { display: block; width: min(500px, 100%); height: auto; margin-inline: auto; }
.content-page .mt-24 { margin-top: 24px; }
.content-page .mt-40 { margin-top: 40px; }
.content-page .text-muted-light { color: var(--muted); }
.content-page .edu-list-ordered { max-width: 800px; margin: 16px auto 20px; padding-left: 24px; list-style: decimal; line-height: 1.8; }
.content-page .edu-list-ordered li { margin-bottom: 10px; }
.content-page .pricing-features .feature-dash { display: none; }
/* Contraste AA medido en las tarjetas de plan heredadas: 4,41 y 4,45 sobre #eef3f4 (el minimo es 4,5) */
.content-page .price > span { color: var(--primary-500); }
.content-page .pricing-features .feature-unavailable { color: var(--muted); }

/* Rejilla de beneficios en 2 columnas (361-900px) con numero impar de tarjetas: la ultima ocupa la fila (Nosotros) */
@media (min-width: 361px) and (max-width: 900px) {
    .benefit-grid > :last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
}

/* Rejillas heredadas sin tarjeta huerfana. Medido: 4, 8 y 13 tarjetas en rejillas de 3 columnas dejaban una sola
   tarjeta en la ultima fila. Sin :has() el navegador conserva la rejilla original (degradacion segura). */
@media (min-width: 761px) and (max-width: 1100px) {
    .content-page :is(.features-grid, .benefits-grid, .services-grid, .cards-grid, .features-grid-dark, .faq-grid) { grid-template-columns: repeat(2, 1fr); }
    .content-page :is(.features-grid, .benefits-grid, .services-grid, .cards-grid, .features-grid-dark, .faq-grid) > :last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
}
@media (min-width: 1101px) {
    .content-page :is(.features-grid, .benefits-grid, .services-grid, .cards-grid, .features-grid-dark):has(> :nth-child(4):last-child),
    .content-page :is(.features-grid, .benefits-grid, .services-grid, .cards-grid, .features-grid-dark):has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); }
    .content-page :is(.features-grid, .benefits-grid, .services-grid, .cards-grid, .features-grid-dark):has(> :nth-child(4):last-child) h3,
    .content-page :is(.features-grid, .benefits-grid, .services-grid, .cards-grid, .features-grid-dark):has(> :nth-child(8):last-child) h3 { font-size: 20px; line-height: 1.25; }
    .content-page .faq-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
    .content-page :is(.features-grid, .benefits-grid, .services-grid, .cards-grid, .features-grid-dark, .faq-grid) > :last-child:nth-child(3n+1):not(:nth-child(4)):not(:only-child) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .content-page :is(.cta-dark, .cta-final) { width: calc(100% - 40px); margin-top: 64px; padding: 44px 24px; border-radius: 24px; }
    .blog-related { padding: 22px; }
    .article-body .blog-cta { grid-template-columns: 1fr; padding: 22px; }
    .article-body .blog-cta :is(a:first-of-type, a:last-of-type) { grid-column: 1; grid-row: auto; margin-top: 8px; }
}