/* Isolated mobile layout correction; desktop and tablet retain their composition. */
@media (max-width: 650px) {
  .scene.scene-auralis {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 34px !important;
    overflow: hidden !important;
  }
  .scene.scene-auralis header {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 20px 18px 0 !important;
    flex: none !important;
  }
  .scene.scene-auralis header .brand { display: inline-block; font-size: 36px !important; }
  /* v89: on phones the hero keeps only the brand and the "Hablemos" CTA;
     the sticky section menu right below the hero covers the rest. */
  .scene.scene-auralis header nav {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  .scene.scene-auralis header nav button:not(.install) { display: none !important; }
  .scene.scene-auralis header nav button.install {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
    border: 1px solid #161412 !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .scene.scene-auralis h1 {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    width: calc(100% - 36px) !important;
    margin: 36px 18px 24px !important;
    font-size: clamp(39px, 10.4vw, 62px) !important;
    line-height: .99 !important;
    letter-spacing: -.052em !important;
    white-space: normal !important;
  }
  .scene.scene-auralis .eye {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    width: calc(100% - 36px) !important;
    height: clamp(180px, 48vw, 280px) !important;
    margin: 0 18px !important;
    transform: none !important;
  }
  .scene.scene-auralis .copy {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 25px 18px 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.48 !important;
  }
  .scene.scene-auralis .copy p { margin: 0 0 14px !important; }
}
.new-footer .legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.new-footer .legal-links a { font: inherit; white-space: nowrap; }
@media (max-width: 850px) {
  .new-footer .legal-links { flex-basis: 100%; }
}
.arrow-icon{display:inline-block;width:.9em;height:.9em;vertical-align:-.07em;flex:none;color:inherit}
.button-arrow .arrow-icon{width:1em;height:1em}

/* v89 — Ejemplos on touch screens: neighbouring cards keep their outline as a
   swipe cue, but their text is hidden so it no longer peeks in at the edges. */
@media (max-width: 650px) {
  #ejemplos.examples-section .case-frame:not(.is-active) .case-painting > * { visibility: hidden !important; }
}
/* v89 — headings flow as one sentence on narrow screens; balance the lines
   so a single word is never left alone on the last line. */
@media (max-width: 850px) {
  .pulso-content .section-lead h2 { text-wrap: balance; }
}
/* v89 — tablet and small-laptop hero (651–1100 px). responsive.css puts the
   hero blocks back in normal flow, but older offsets in refinement.css
   (top/bottom/left with !important) were still shifting them, so the title,
   menu, image and copy overlapped. Clearing the offsets restores the flow. */
@media (min-width: 651px) and (max-width: 1100px) {
  .scene.scene-auralis header,
  .scene.scene-auralis h1,
  .scene.scene-auralis .eye,
  .scene.scene-auralis .copy { inset: auto !important; transform: none !important; }
  .scene.scene-auralis h1 { margin: 36px 22px 0 !important; }
  .scene.scene-auralis .eye { width: calc(100% - 44px) !important; margin: 32px 22px 30px !important; }
  .scene.scene-auralis .copy { padding: 0 22px !important; }
  .scene.scene-auralis header nav { gap: 4px 22px !important; }
}