/* Recorrido móvil: conserva las secciones clave sin arrastrar los gestos de escritorio. */
@media (max-width: 720px) {
  :root { --page-x: 20px; }

  html { scroll-padding-top: 68px; }
  body { padding-bottom: 0; }

  .site-header {
    height: 64px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .site-nav {
    left: 50%;
    right: auto;
    width: 100vw;
    max-width: none;
    padding: 86px 22px 92px;
    justify-content: flex-start;
    justify-self: stretch;
    transform: translate(-50%, -20px);
  }

  .site-nav.is-open {
    transform: translate(-50%, 0);
  }

  .site-nav > a,
  .nav-services-toggle {
    padding-top: 14px;
    padding-bottom: 14px;
    color: var(--ink) !important;
    font-size: clamp(29px, 8.5vw, 38px);
    text-shadow: none !important;
  }

  body.menu-open .menu-toggle { color: var(--ink); }

  .nav-services {
    width: 100%;
    display: block !important;
  }

  .nav-services.is-open .nav-services-panel { max-height: 430px; }

  .mobile-dock {
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    min-height: 60px;
    padding: 5px;
    border-radius: 18px;
  }

  .mobile-dock a {
    min-width: 0;
    font-size: 6px;
  }

  /* Portada */
  .hero,
  .hero-copy,
  .hero-media { min-height: 100svh; }

  .hero-copy { padding: 94px 20px 118px; }
  .hero .eyebrow { font-size: 7px; }

  .hero h1.hero-title-statement {
    max-width: 345px;
    margin-top: 22px;
    font-size: clamp(40px, 11.6vw, 51px);
    line-height: 0.94;
  }

  .hero-lede {
    max-width: 32ch;
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.45;
  }

  .hero-actions {
    margin-top: 22px;
    gap: 12px;
  }

  .hero-actions .button { min-height: 54px; }
  .hero-rail { min-height: 76px; }

  .hero-rail > a {
    padding: 0 6px;
    font-size: 6px;
  }

  /* Cómo funciona */
  .clarity-lateral-chapter,
  .clarity-lateral-sticky,
  .clarity-lateral-track {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    transform: none !important;
  }

  .clarity-journey { padding: 68px 20px 54px; }

  .clarity-head h2 {
    margin-top: 24px;
    font-size: clamp(41px, 12.5vw, 52px);
    line-height: 0.92;
  }

  .clarity-head > p:last-child {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.45;
  }

  .clarity-flow { margin-top: 30px; }

  .clarity-flow li,
  .clarity-flow li:first-child,
  .clarity-flow li:last-child {
    padding: 16px 0;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 13px;
  }

  .clarity-flow li > span {
    width: 32px;
    height: 32px;
  }

  .clarity-flow h3 {
    margin-top: 5px;
    font-size: 23px;
    line-height: 1;
  }

  .clarity-flow p {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.38;
  }

  .clarity-result {
    margin-top: 22px;
    padding: 22px 18px 16px;
    border-radius: 18px;
  }

  .clarity-result h3 {
    font-size: 26px;
    line-height: 1;
  }

  .clarity-result ul { margin-top: 18px; }
  .clarity-result li { min-height: 66px; }
  .clarity-result li strong { font-size: 28px; }
  .clarity-cta { min-height: 54px; }
  .clarity-integrations { margin-top: 22px; }

  /* CRM: dashboard reordenado y legible */
  .feature-crm {
    min-height: 0;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .feature-crm .feature-copy {
    order: 0;
    padding: 68px 20px 34px;
  }

  .feature-crm .feature-copy .crm-title {
    margin-top: 20px;
    font-size: clamp(43px, 12.6vw, 54px);
    line-height: 0.9;
  }

  .feature-crm .feature-copy > p:not(.feature-number) {
    margin-top: 22px;
    font-size: 13px;
  }

  .feature-crm .text-link { margin-top: 24px; }

  .crm-canvas {
    min-height: 0;
    padding: 0 20px 52px;
    align-items: flex-start;
  }

  .crm-window {
    width: 100%;
    min-height: 0;
    border-radius: 18px;
    transform: none;
  }

  .crm-bar { min-height: 52px; }

  .crm-body {
    min-height: 0;
    display: block;
  }

  .crm-body aside { display: none; }
  .crm-main { padding: 17px; }
  .crm-main-head strong { font-size: 20px; }

  .crm-stats {
    margin-top: 17px;
    gap: 7px;
  }

  .crm-stats div {
    min-height: 88px;
    padding: 10px;
  }

  .crm-stats strong { font-size: 20px; }

  .crm-row {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto;
    font-size: 8px;
  }

  .crm-row-head,
  .crm-row > span:nth-child(2),
  .crm-row > span:nth-child(3),
  .crm-row:nth-child(n + 4) { display: none; }

  /* WhatsApp + pedido: el scroll lateral se convierte en recorrido vertical */
  .growth-lateral-chapter {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .growth-lateral-sticky,
  .growth-lateral-track {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    display: block !important;
    overflow: visible !important;
    transform: none !important;
  }

  .feature-growth {
    min-height: 0;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .feature-growth .feature-copy { padding: 68px 20px 34px; }

  .feature-growth .feature-copy h2.whatsapp-headline {
    margin-top: 24px;
    font-size: clamp(33px, 9.8vw, 42px);
    line-height: 0.98;
  }

  .whatsapp-title-line { white-space: normal; }

  .feature-growth .feature-copy > p:not(.feature-number) {
    margin-top: 22px;
    font-size: 13px;
    line-height: 1.45;
  }

  .growth-tags {
    margin-top: 24px;
    gap: 7px;
  }

  .growth-tags span {
    padding: 7px 9px;
    font-size: 7px;
  }

  .growth-lateral-chapter .growth-media { min-height: 590px; }

  .message-stack {
    top: 5%;
    right: 12px;
    bottom: 5%;
    left: 12px;
    gap: 5px;
  }

  .chat-status {
    width: 100%;
    min-height: 48px;
  }

  .message-bubble { max-width: 88%; }

  .order-sync {
    min-height: 0;
    padding: 68px 20px 54px;
  }

  .order-sync-head { min-height: 40px; }
  .order-sync-head > p:last-child { display: none; }

  .order-sync-layout {
    height: auto;
    margin-top: 26px;
    padding: 0;
    gap: 28px;
  }

  .order-sync-copy h2 {
    margin-top: 18px;
    font-size: clamp(40px, 12.3vw, 50px);
  }

  .order-sync-copy > p:not(.order-sync-kicker) {
    margin-top: 20px;
    font-size: 12px;
  }

  .order-sync-live { margin-top: 22px; }

  .order-crm-window {
    min-height: 0;
    border-radius: 18px;
  }

  .order-crm-bar {
    min-height: 58px;
    padding: 0 14px;
  }

  .order-crm-bar > b {
    max-width: 120px;
    text-align: center;
  }

  .order-notification { margin: 10px; }
  .order-crm-body { min-height: 0; }
  .order-customer-card { padding: 18px; }
  .order-customer-card dl { margin-top: 16px; }
  .order-customer-card dl > div { padding: 8px 0; }
  .order-detail { padding: 18px; }
  .order-meta { display: none; }
  .order-products { margin-top: 14px; }
  .order-timeline { display: none; }

  /* Voz: carrusel táctil en lugar de círculo diminuto y scroll largo */
  .home-voice-morph { height: auto !important; }

  .home-voice-morph::before,
  .home-voice-morph::after,
  .home-voice-morph-stage::before,
  .home-voice-morph-stage::after { display: none; }

  .home-voice-morph-stage {
    height: auto;
    min-height: 0;
    padding: 82px 0 42px;
    position: relative;
    top: auto;
    overflow: hidden;
  }

  .home-voice-morph-topline {
    margin: 0 20px;
    padding: 0;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
  }

  .home-voice-morph-topline span:last-child { display: none; }

  .home-voice-morph-copy {
    margin-top: 34px;
    padding: 0 20px;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    align-items: flex-start;
    text-align: left;
    opacity: 1 !important;
    transform: none !important;
  }

  .home-voice-morph-copy--intro h2 {
    max-width: 340px;
    font-size: clamp(43px, 13vw, 54px);
    line-height: 0.9;
  }

  .home-voice-morph-copy--result { display: none; }

  .home-voice-morph-copy > span {
    margin-top: 16px;
    font-size: 11px;
  }

  .home-voice-morph-cards {
    margin-top: 30px;
    padding: 10px 20px 26px;
    position: relative;
    inset: auto;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    pointer-events: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .home-voice-morph-cards::-webkit-scrollbar { display: none; }

  .home-voice-morph-card {
    width: 104px;
    height: 148px;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 104px;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    scroll-snap-align: start;
  }

  .home-voice-morph-card-front,
  .home-voice-morph-card-back { padding: 10px; }

  .home-voice-morph-card-front span,
  .home-voice-morph-card-back small { font-size: 5px; }

  .home-voice-morph-card-front strong,
  .home-voice-morph-card-back strong { font-size: 11px; }

  .home-voice-morph-card-back p { font-size: 7px; }
  .home-voice-morph-hint { display: none; }

  .home-voice-explainer { padding: 52px 20px 58px; }

  .home-voice-explainer-head h2 {
    font-size: clamp(38px, 11.3vw, 46px);
    line-height: 0.94;
  }

  .home-voice-explainer-head h2 em {
    color: var(--ink);
    font-family: inherit;
    font-style: normal;
    font-weight: 780;
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-decoration-thickness: 0.14em;
    text-underline-offset: 0.08em;
    text-decoration-skip-ink: none;
  }

  .home-voice-explainer-head > div > p {
    margin-top: 16px;
    font-size: 13px;
  }

  .home-voice-explainer-steps { margin-top: 26px; }
  .home-voice-explainer-steps li { padding: 16px 0; }

  .home-voice-explainer-steps h3 {
    margin-top: 10px;
    font-size: 24px;
  }

  .home-voice-explainer-steps p {
    margin-top: 6px;
    font-size: 11px;
  }

  .home-voice-explainer-result {
    margin-top: 24px;
    padding: 18px;
  }

  .home-voice-explainer-result strong { font-size: 22px; }

  /* Cierre y pie */
  .closing {
    min-height: 640px;
    display: flex !important;
  }

  .closing > img { object-position: 62% 42%; }

  .closing-overlay {
    background: linear-gradient(0deg, rgba(8, 15, 11, 0.94), rgba(8, 15, 11, 0.32));
  }

  .closing-copy {
    padding: 86px 20px 106px;
    text-align: center;
  }

  .closing .eyebrow { justify-content: center; }

  .closing h2 {
    margin-top: 26px;
    font-size: clamp(48px, 14vw, 60px);
    line-height: 0.9;
  }

  .closing-copy > p:not(.eyebrow) {
    margin: 24px auto 0;
    font-size: 13px;
  }

  .closing .button {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    margin-top: 30px;
    justify-content: space-between;
  }

  .site-footer {
    padding: 28px 20px 104px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .site-footer > p {
    justify-self: start;
    font-family: var(--sans);
    font-size: 13px;
    font-style: normal;
    text-align: left;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-nav,
  .footer-legal {
    display: flex !important;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .footer-nav { font-size: 10px; }
}

@media (max-width: 360px) {
  .hero h1.hero-title-statement { font-size: 39px; }

  .clarity-head h2,
  .feature-crm .feature-copy .crm-title,
  .home-voice-morph-copy--intro h2 { font-size: 40px; }

  .message-stack {
    right: 8px;
    left: 8px;
  }
}

@media (max-width: 720px) and (max-height: 760px) {
  .hero-copy {
    padding-top: 82px;
    padding-bottom: 112px;
  }

  .hero h1.hero-title-statement {
    margin-top: 17px;
    font-size: clamp(36px, 11.3vw, 44px);
  }

  .hero-lede {
    margin-top: 15px;
    font-size: 12px;
  }

  .hero-actions { margin-top: 16px; }
  .hero-actions .text-link { display: none; }
  .hero-rail { min-height: 68px; }
}