/* Adaptación de tablet y celular. Desktop (>1100px) conserva sus reglas. */
@media (max-width: 1100px) {
    .exact-hero-page { --mobile-gutter: 24px; --mobile-content: min(960px, calc(100% - 2 * var(--mobile-gutter))); }
    html { scroll-padding-top: 108px; }
    body { -webkit-text-size-adjust: 100%; }
    #que-es .container, #funciones .container, #integraciones .container, #reportes .container,
    #pymes .container, #seguridad .container, #contacto .container,
    .footer-premium .footer-main, .footer-premium .footer-bottom { width: var(--mobile-content); margin-inline: auto; }
    #que-es, #funciones, #integraciones, #reportes.reports-premium,
    #pymes.pymes-premium, #seguridad.security-premium, #contacto.contact-premium { padding-block: 64px; }
    main .section-heading { min-width: 0; }
    main .section-heading h2 { line-height: 1.12; text-wrap: balance; }
    :is(#que-es, #funciones, #integraciones, #reportes, #pymes, #seguridad, #contacto) .section-heading > p:not(.eyebrow) { font-size: 16px; line-height: 1.65; }
    :is(#que-es, #funciones, #integraciones, #reportes, #pymes, #seguridad, #contacto) .section-heading .eyebrow { font-size: 11px; letter-spacing: 1.8px; line-height: 1.6; }
    main .button { min-height: 48px; max-width: 100%; }
    main figure img { max-width: 100%; height: auto; }
    .exact-hero-page.motion-ready .reveal { opacity: 1; transform: none; transition: none; }
    .exact-hero-page .feature-card, .exact-hero-page .ecosystem-core, .exact-hero-page .ecosystem-node { animation: none !important; }
    .motion-ready.exact-hero-page .feature-grid.is-visible .sales-bars > span { animation: none; }
    .exact-hero-page .hero-neon-lines path, .exact-hero-page .hero-exact::before,
    .exact-hero-page .login-button::before, .exact-hero-page .login-button::after { animation: none; }
    .exact-hero-page .login-button::after { opacity: 0; }

    /* Header: panel acotado al viewport y zonas táctiles cómodas. */
    .exact-hero-page .site-header, .exact-hero-page .site-header.is-scrolled { top: 12px; height: 72px; }
    .exact-hero-page .site-header .header-inner { width: var(--mobile-content); height: 72px; gap: 12px; padding-inline: 16px; }
    .site-header .header-actions { margin-left: auto; gap: 10px; }
    .site-header .header-login { min-height: 44px; font-size: 12px; padding-inline: 13px; }
    .site-header .menu-toggle { min-width: 44px; width: 44px; height: 44px; flex-shrink: 0; }
    .site-header .main-nav { top: calc(100% + 8px); width: 100%; padding: 12px 20px 20px; max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; }
    .site-header .main-nav > a:not(.button):not(.login-button) { min-height: 48px; padding-block: 12px; font-size: 14px; }
    .site-header .main-nav .nav-login, .site-header .main-nav .nav-contact { width: 100%; min-height: 48px; font-size: 14px; align-self: stretch; }
    body:not(.js-ready) .site-header .header-inner { height: auto; min-height: 72px; }
    body:not(.js-ready) .site-header .main-nav { width: 100%; max-height: none; height: auto; overflow: visible; }

    /* Hero: contenido primero, imagen completa en el flujo normal. */
    .hero-exact { min-height: 0; padding: 128px var(--mobile-gutter) 48px; }
    .hero-exact .hero-exact-copy { width: 100%; max-width: 960px; margin: 0 auto; padding: 0; }
    .hero-exact h1 { font-size: clamp(40px, 5.7vw, 60px); line-height: 1.08; text-wrap: balance; }
    .hero-exact .hero-exact-description { font-size: 16px; line-height: 1.6; margin-top: 20px; }
    .hero-exact .hero-exact-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(600px, 100%); gap: 14px; margin-top: 26px; }
    .hero-exact .hero-exact-buttons .button { width: 100%; min-height: 50px; font-size: 14px; padding: 14px 18px; gap: 10px; }
    .hero-exact .hero-exact-buttons .button > span { font-size: inherit; line-height: 1.4; }
    .hero-exact .hero-exact-art { position: relative; inset: auto; width: 100%; max-width: 920px; height: auto; min-height: 0; margin: 32px auto 0; }
    .hero-exact .hero-exact-image { width: 100%; height: auto; max-width: 100%; object-fit: contain; }
    .hero-exact .hero-neon-lines { opacity: .42; }

    /* Ecosistema: tres columnas de tarjetas, sin coordenadas absolutas. */
    #que-es .ecosystem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'reports purchases stock' 'commerce core sales' '. clients billing'; align-items: center; gap: 24px; width: min(880px, 100%); height: auto; margin: 32px auto 0; }
    #que-es .ecosystem::before { width: 100%; height: auto; inset: auto; left: 50%; top: 50%; }
    #que-es .ecosystem .ecosystem-node, #que-es .ecosystem .ecosystem-core { position: relative; inset: auto; transform: none; justify-self: center; align-self: center; margin: 0; }
    #que-es .ecosystem .ecosystem-node { width: 100%; max-width: 210px; height: auto; min-height: 132px; padding: 17px 12px; }
    #que-es .ecosystem .ecosystem-node > i { width: 46px; height: 46px; font-size: 25px; }
    #que-es .ecosystem .ecosystem-node h3 { font-size: 12px; line-height: 1.4; margin-top: 10px; min-height: 0; }
    #que-es .ecosystem .ecosystem-node[data-node='0'] { grid-area: purchases; }
    #que-es .ecosystem .ecosystem-node[data-node='1'] { grid-area: stock; }
    #que-es .ecosystem .ecosystem-node[data-node='2'] { grid-area: sales; }
    #que-es .ecosystem .ecosystem-node[data-node='3'] { grid-area: billing; }
    #que-es .ecosystem .ecosystem-node[data-node='4'] { grid-area: clients; }
    #que-es .ecosystem .ecosystem-node[data-node='5'] { grid-area: commerce; }
    #que-es .ecosystem .ecosystem-node[data-node='6'] { grid-area: reports; }
    #que-es .ecosystem .ecosystem-core { grid-area: core; width: 100%; max-width: 210px; min-height: 152px; padding: 18px 12px; }
    #que-es .ecosystem .ecosystem-core > .brand-symbol { width: 32px; height: 34px; -webkit-mask-size: 75px; mask-size: 75px; -webkit-mask-position: -22px -8px; mask-position: -22px -8px; }
    #que-es .ecosystem .ecosystem-core > b { font-size: 18px; margin-top: 12px; }
    #que-es .ecosystem .ecosystem-core > small { font-size: 10px; line-height: 1.5; }
    #que-es .ecosystem-canvas { opacity: .3; }
    #que-es .ecosystem-core::before { animation: none; }

    /* Funcionalidades: previews con espacio propio y tipografía legible. */
    #funciones .features-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    #funciones .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    #funciones .feature-grid > .feature-card { grid-column: auto; min-height: 0; padding: 20px; }
    #funciones .feature-card .feature-name { font-size: 16px; line-height: 1.35; }
    #funciones .feature-card .feature-subtitle { font-size: 12px; line-height: 1.5; }
    #funciones .feature-card .feature-icon { width: 40px; height: 42px; font-size: 25px; }
    #funciones .feature-card-header { gap: 10px; }
    #funciones .feature-preview { margin-top: 22px; }
    #funciones .preview-label, #funciones .preview-footnote { font-size: 12px; line-height: 1.5; }
    #funciones .preview-value { font-size: 29px; line-height: 1.25; }
    #funciones .preview-trend { font-size: 13px; }
    #funciones .preview-trend small { font-size: 10px; }
    #funciones .preview-period { position: static; display: inline-flex; gap: 5px; font-size: 11px; margin-bottom: 14px; }
    #funciones .sales-bars { height: 112px; margin-top: 20px; gap: 7px; }
    #funciones .sales-months { font-size: 9px; gap: 2px; }
    #funciones .feature-stock .feature-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(105px, .8fr); gap: 8px 12px; }
    #funciones .feature-stock .preview-label, #funciones .feature-stock .preview-value { grid-column: 1 / -1; }
    #funciones .stock-legend { grid-column: 1; grid-row: 3; font-size: 12px; margin-top: 10px; align-self: center; }
    #funciones .stock-cubes { grid-column: 2; grid-row: 3; position: relative; inset: auto; width: 100%; max-width: 150px; height: 145px; justify-self: end; }
    #funciones .stock-alert { grid-column: 1 / -1; position: relative; inset: auto; margin-top: 5px; font-size: 12px; padding: 12px; }
    #funciones .stock-alert small { font-size: 11px; }
    #funciones .feature-billing .feature-preview { display: grid; grid-template-columns: minmax(0, 1fr) 115px; align-items: center; gap: 6px 12px; }
    #funciones .feature-billing .preview-label, #funciones .feature-billing .preview-value, #funciones .feature-billing .preview-footnote { grid-column: 1; max-width: none; }
    #funciones .invoice-paper { grid-column: 2; grid-row: 1 / span 3; position: relative; inset: auto; width: 108px; height: 150px; padding: 10px; justify-self: center; transform: rotate(7deg); }
    #funciones .invoice-lines { height: 54px; }
    #funciones .commerce-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    #funciones .commerce-channels small { font-size: 12px; line-height: 1.5; white-space: normal; }
    #funciones .commerce-channels > span:last-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
    #funciones .feature-clients .preview-value, #funciones .feature-purchases .preview-value, #funciones .feature-cash .preview-value { font-size: 28px; }
    #funciones .feature-reports .feature-preview { gap: 18px; }
    #funciones .feature-example-note { text-align: center; font-size: 10px; line-height: 1.5; }

    /* Las gráficas grandes van debajo del contenido, completas y sin sangrías. */
    #integraciones .omni-layout, #pymes .pymes-layout, #seguridad .security-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'art'; gap: 36px; }
    #integraciones .section-heading, #pymes .section-heading, #seguridad .section-heading { padding: 0; margin: 0; max-width: none; }
    #integraciones .omni-visual, #pymes .pymes-product, #seguridad .security-product { width: 100%; max-width: 860px; justify-self: center; margin: 0; }
    #integraciones .omni-visual img, #pymes .pymes-product img, #seguridad .security-product img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
    #integraciones .omni-visual figcaption, #pymes .pymes-product figcaption { font-size: 10px; text-align: center; padding: 0; line-height: 1.5; margin-top: 12px; }
    #integraciones .omni-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(560px, 100%); gap: 14px; }
    #integraciones .omni-brands > span { min-width: 0; padding: 14px; gap: 12px; }
    #integraciones .omni-brands strong { font-size: 14px; white-space: normal; }
    #integraciones .omni-flow { max-width: 620px; margin-top: 24px; }
    #integraciones .omni-flow b { font-size: 13px; }
    #integraciones .text-link { min-height: 44px; font-size: 14px; margin-top: 24px; }
    #pymes .pymes-title-break { display: none; }
    #pymes .pymes-sectors { gap: 14px; max-width: 680px; }
    #pymes .pymes-sectors > div { min-height: 56px; padding: 14px; gap: 12px; }
    #pymes .pymes-sectors span { font-size: 14px; }

    /* Reportes: los indicadores dejan de flotar sobre el dispositivo. */
    #reportes .reports-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    #reportes .section-heading { padding: 0; max-width: none; }
    #reportes .report-title-break { display: none; }
    #reportes .report-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 720px; }
    #reportes .report-benefits b { font-size: 12px; }
    #reportes .report-product { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; height: auto; aspect-ratio: auto; margin: 0; }
    #reportes .report-connectors { display: none; }
    #reportes .report-metric { position: static; inset: auto; transform: none; min-width: 0; padding: 14px; gap: 10px; align-items: center; justify-content: center; }
    #reportes .report-metric-sales { grid-column: 1 / -1; }
    #reportes .report-metric > i { font-size: 22px; }
    #reportes .report-metric span { font-size: 11px; line-height: 1.4; }
    #reportes .report-metric strong { font-size: clamp(18px, 2.5vw, 22px); }
    #reportes .report-metric small { font-size: 12px; }
    #reportes .report-device-image { position: static; inset: auto; grid-column: 1 / -1; width: 100%; max-width: 920px; height: auto; justify-self: center; margin-top: 8px; }
    #reportes .report-product figcaption { position: static; grid-column: 1 / -1; padding: 0; font-size: 10px; line-height: 1.5; text-align: center; }

    #seguridad .security-benefits { gap: 16px; }
    #seguridad .security-benefits article { flex-direction: column; padding: 20px; }
    #seguridad .security-benefits h3 { font-size: 15px; }
    #seguridad .security-benefits p { font-size: 13px; }

    /* Contacto: formulario amplio y texto sin invadir el panel. */
    #contacto .contact-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'form'; gap: 36px; }
    #contacto .contact-hands { width: 100%; max-width: 820px; margin: 24px 0; }
    #contacto .contact-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    #contacto .contact-benefits li { padding: 0; border: 0; gap: 10px; }
    #contacto .contact-benefits b { font-size: 12px; }
    #contacto .contact-quote { min-height: 48px; font-size: 14px; }
    #contacto .contact-form { width: 100%; max-width: 760px; padding: 32px; margin: 0; justify-self: center; }
    #contacto .contact-form > h3 { font-size: 30px; text-wrap: balance; }
    #contacto .form-grid { gap: 20px; }
    #contacto .form-field label { font-size: 14px; }
    #contacto .form-field input, #contacto .form-field textarea { font-size: 16px; line-height: 1.5; padding: 14px; }
    #contacto .form-field input { min-height: 52px; }
    #contacto .form-field textarea { min-height: 130px; }
    #contacto .field-error { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
    #contacto .form-submit { min-height: 52px; font-size: 16px; }
    #contacto .form-privacy { font-size: 12px; line-height: 1.5; }
    #contacto .form-status { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }

    .footer-premium .footer-main { gap: 28px; padding-block: 48px; }
    .footer-premium .footer-column { gap: 6px; }
    .footer-premium .footer-column a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
    .footer-premium .footer-column h3, .footer-premium .footer-follow > p { font-size: 15px; }
    .footer-premium .footer-follow a { width: 48px; height: 48px; }
    .footer-premium .footer-bottom a { min-height: 44px; }
}

@media (max-width: 600px) {
    .exact-hero-page { --mobile-gutter: 20px; }
    #que-es, #funciones, #integraciones, #reportes.reports-premium,
    #pymes.pymes-premium, #seguridad.security-premium, #contacto.contact-premium { padding-block: 52px; }
    #funciones h2, #integraciones h2, #reportes h2, #pymes h2, #seguridad h2, #contacto h2 { font-size: clamp(30px, 7.8vw, 38px); line-height: 1.12; letter-spacing: -.04em; }
    #que-es .section-heading h2 { font-size: clamp(29px, 7.8vw, 37px); line-height: 1.12; }
    #que-es .section-heading h2 span { display: block; }
    :is(#que-es, #funciones, #integraciones, #reportes, #pymes, #seguridad, #contacto) .section-heading > p:not(.eyebrow) { font-size: 15px; line-height: 1.65; margin-top: 20px; }
    :is(#que-es, #funciones, #integraciones, #reportes, #pymes, #seguridad, #contacto) .section-heading .eyebrow { font-size: 10px; letter-spacing: 1.4px; margin-bottom: 18px; }
    .exact-hero-page .site-header .header-inner { padding-inline: 12px; }
    .site-header .brand { font-size: 18px; gap: 6px; }
    .site-header .header-actions { gap: 8px; }
    .site-header .header-login { min-height: 44px; font-size: 12px; gap: 8px; padding-inline: 10px; }
    .site-header .header-login > i { font-size: 14px; }
    .hero-exact { padding-top: 112px; padding-bottom: 32px; }
    .hero-exact h1 { font-size: clamp(31px, 8.5vw, 42px); letter-spacing: -.05em; }
    .hero-exact .hero-exact-description { font-size: 15px; margin-top: 18px; }
    .hero-exact .hero-exact-buttons { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px; margin-top: 24px; }
    .hero-exact .hero-exact-art { width: 100%; margin: 26px 0 0; }

    #que-es .ecosystem { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'core core' 'purchases stock' 'sales billing' 'clients commerce' 'reports reports'; gap: 16px 12px; margin-top: 28px; }
    #que-es .ecosystem .ecosystem-core { width: min(230px, 100%); max-width: none; min-height: 132px; border-radius: 20px; }
    #que-es .ecosystem .ecosystem-core > b { font-size: 19px; }
    #que-es .ecosystem .ecosystem-core > small { font-size: 11px; }
    #que-es .ecosystem .ecosystem-node { width: 100%; min-height: 112px; padding: 15px 10px; }
    #que-es .ecosystem .ecosystem-node > i { width: 42px; height: 42px; font-size: 24px; }
    #que-es .ecosystem .ecosystem-node[data-node='6'] { width: calc(50% - 6px); }
    #que-es .ecosystem-canvas { opacity: .2; }

    #funciones .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    #funciones .feature-card .feature-name { font-size: 16px; }
    #funciones .feature-card .feature-icon { width: 40px; height: 42px; }
    #funciones .feature-grid > .feature-card { padding: 20px; }
    #funciones .feature-benefits { font-size: 14px; gap: 14px; }
    #funciones .feature-static-cta { display: flex; width: 100%; font-size: 14px; padding-inline: 16px; }
    #funciones .sales-bars { gap: 6px; }
    #funciones .feature-cash .preview-value { font-size: 28px; }

    #integraciones .omni-layout, #pymes .pymes-layout, #seguridad .security-layout,
    #reportes .reports-layout, #contacto .contact-layout { gap: 28px; }
    #integraciones .omni-brands { width: 100%; gap: 12px; }
    #integraciones .omni-brands > span { flex-direction: column; align-items: center; justify-content: center; padding: 15px 10px; gap: 10px; text-align: center; }
    #integraciones .omni-brands strong { font-size: 13px; }
    #integraciones .omni-brands > span:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
    #integraciones .omni-logo { transform: none; margin: 0; }
    #integraciones .omni-flow { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); gap: 5px; }
    #integraciones .omni-flow > div > span { width: 44px; height: 44px; font-size: 20px; }
    #integraciones .omni-flow b { font-size: 11px; line-height: 1.45; }
    #integraciones .text-link { font-size: 14px; gap: 12px; }
    #pymes .pymes-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #pymes .pymes-sectors > div { padding: 12px; gap: 9px; min-height: 54px; }
    #pymes .pymes-sectors i { font-size: 22px; }
    #pymes .pymes-sectors span { font-size: 12px; line-height: 1.45; }
    #reportes .report-benefits { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    #reportes .report-benefits li { gap: 12px; }
    #reportes .report-benefits b { font-size: 13px; }
    #reportes .section-heading .button { width: 100%; font-size: 14px; padding: 14px 18px; }
    #reportes .report-product { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #reportes .report-metric-sales { grid-column: 1 / -1; }
    #reportes .report-metric strong { font-size: 22px; }
    #reportes .report-metric span { font-size: 12px; }
    #reportes .report-metric > i { font-size: 24px; }
    #seguridad .security-benefits { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 26px; }
    #seguridad .security-benefits article { flex-direction: row; gap: 14px; padding: 18px; }
    #seguridad .security-benefits h3 { margin: 0 0 8px; font-size: 15px; }
    #contacto .contact-benefits { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    #contacto .contact-benefits li { gap: 12px; }
    #contacto .contact-benefits b { font-size: 13px; }
    #contacto .contact-benefits li > span { width: 44px; height: 44px; }
    #contacto .contact-hands { margin-block: 22px; aspect-ratio: 2.5 / 1; }
    #contacto .contact-quote { width: 100%; justify-content: center; padding-inline: 16px; }
    #contacto .contact-form { padding: 24px 20px; border-radius: 20px; }
    #contacto .contact-form > h3 { font-size: 26px; }
    #contacto .contact-form > p:not(.form-note):not(.form-status) { font-size: 14px; line-height: 1.5; }
    #contacto .form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    #contacto .form-wide { grid-column: auto; }
    .footer-premium .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-block: 42px; }
    .footer-premium .footer-identity { grid-column: 1 / -1; }
    .footer-premium .footer-tagline { font-size: 16px; }
    .footer-premium .footer-description { font-size: 14px; }
    .footer-premium .footer-bottom { flex-direction: column; align-items: start; gap: 10px; padding-block: 24px; }
    .footer-premium .footer-bottom p, .footer-premium .footer-bottom a { font-size: 12px; line-height: 1.6; }
}

/* Evitar decoraciones circulares y el hover persistente en pantallas táctiles. */
@media (max-width: 1100px) {
    .exact-hero-page .orb, #funciones::after, #funciones .feature-card::before { display: none; }
}
@media (hover: none) {
    #funciones .feature-card::before { display: none; }
}