/* Allow creator controls to wrap when switching between monitor sizes. */
[data-omni-surface="creator"] .workspace { min-width: 0; }
[data-omni-surface="creator"] .topbar { flex-wrap: wrap; }
[data-omni-surface="creator"] .voice-controls { flex: 1 1 28rem; min-width: 0; max-width: 100%; }
/* Automatic layout from mobile/720p through Full HD, QHD and 4K.
   CSS pixels follow browser/OS scaling; exports retain their original size. */
@media (min-width: 1921px) {
  :root {
    --omni-display-font: clamp(16px, calc(8px + .416667vw), 24px);
    --omni-display-gap: clamp(24px, 1.25vw, 48px);
    --omni-display-gutter: clamp(32px, 2.5vw, 96px);
  }
  html[data-omni-surface] { font-size: var(--omni-display-font); }

  /* Public website: full-width sections with a legible hierarchy. */
  [data-omni-surface="web"] #inicio h1 { font-size: clamp(80px, 3.125vw, 120px) !important; }
  [data-omni-surface="web"] #app section h2 { font-size: clamp(52px, 2vw, 76px) !important; }
  [data-omni-surface="web"] #inicio > div:first-child > p {
    font-size: clamp(19px, .68vw, 26px) !important; max-width: 54ch !important;
  }
  [data-omni-surface="web"] #inicio > div:first-child > div > a {
    font-size: var(--omni-display-font) !important; padding: 1em 1.6em !important;
  }
  [data-omni-surface="web"] :is(#modulos,#crear,#privacidad,#descargar,.omf-wrap,.omf-contact,.omt-wrap) {
    padding-inline: var(--omni-display-gutter) !important; box-sizing: border-box;
  }
  [data-omni-surface="web"] :is(#prueba,#watch,#dispositivos,#motor,#mundo) > div {
    padding-inline: var(--omni-display-gutter) !important; box-sizing: border-box;
  }
  [data-omni-surface="web"] :is(#modulos,#motor) :is(h3,p),
  [data-omni-surface="web"] .omf-col {
    font-size: var(--omni-display-font) !important;
  }
  [data-omni-surface="web"] #crear .omni-top9 {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: var(--omni-display-gap) !important;
  }
  /* Keep raster artwork at its existing size; text, SVG and CSS graphics
     stay sharp without inventing detail or replacing the brand. */

  /* Chat app, including the interface loaded by WKWebView. */
  html[data-omni-surface="app"] {
    --fs: var(--omni-display-font);
    --omni-sidebar: clamp(280px, 9.375vw, 360px);
    --omni-chat: clamp(820px, 33.334vw, 1280px);
    --omni-composer: clamp(960px, 37.5vw, 1440px);
  }
  [data-omni-surface="app"] .side { width: var(--omni-sidebar); flex-basis: var(--omni-sidebar); }
  [data-omni-surface="app"] .side.closed { margin-left: calc(-1 * var(--omni-sidebar)); }
  [data-omni-surface="app"] .msgs { width: 100%; max-width: var(--omni-chat); padding-inline: 1em; gap: 1.1em; }
  [data-omni-surface="app"] :is(.box,.consent) { max-width: var(--omni-composer); }
  [data-omni-surface="app"] .top { padding: 1em 1.25em; }
  [data-omni-surface="app"] .foot { padding-inline: 1.25em; }
  [data-omni-surface="app"] :is(.nav button,.convs button,.search input,.side-top span,.pill,.menu button,.menu a) { font-size: .95em; }
  [data-omni-surface="app"] .iconbtn { width: 2.9em; height: 2.9em; }
  [data-omni-surface="app"] .pill { height: 2.9em; }
  [data-omni-surface="app"] .brand b { font-size: 1em; }
  [data-omni-surface="app"] .brand small { font-size: .66em; }
  [data-omni-surface="app"] .brand img { width: 2.75em; height: 2.75em; }
  [data-omni-surface="app"] .hello h1 { font-size: clamp(60px, 2.35vw, 90px); }
  [data-omni-surface="app"] .hello p { font-size: .9em; }
  [data-omni-surface="app"] .hello img { width: 6.5em; height: 6.5em; }
  [data-omni-surface="app"] .priv { font-size: .8em; }
  [data-omni-surface="app"] .tool { width: 3.9em; height: 3.6em; font-size: var(--omni-display-font); gap: .2em; }
  [data-omni-surface="app"] .tool > span { font-size: .72em; }
  [data-omni-surface="app"] .tool svg { width: 1.1em; height: 1.1em; }
  [data-omni-surface="app"] .tool .aa { font-size: 1.125em; }
  [data-omni-surface="app"] .menu { top: 5em; right: 1.25em; min-width: 15em; }
  [data-omni-surface="app"] .b img { width: 1.9em; height: 1.9em; }
  [data-omni-surface="app"] .b .lab { font-size: .78em; }
  [data-omni-surface="app"] .cr-in { max-width: min(92vw, 1600px); }

  /* Account and creator workspace. */
  [data-omni-surface="creator"] .app-frame { grid-template-columns: clamp(260px,9.375vw,360px) minmax(0,1fr); }
  [data-omni-surface="creator"] .workspace { width: min(100%,clamp(1220px,62.5vw,2400px)); padding-inline: var(--omni-display-gutter); }

  /* Gallery: use the available area for more cards, not stretched thumbnails. */
  [data-omni-surface="inspiration"] :is(main,.bar) {
    max-width: none; width: 100%; padding-inline: var(--omni-display-gutter); box-sizing: border-box;
  }
  [data-omni-surface="inspiration"] .grid { columns: auto 340px; column-gap: var(--omni-display-gap); }
  [data-omni-surface="inspiration"] .card { margin-bottom: var(--omni-display-gap); }
  [data-omni-surface="inspiration"] :is(.btn,.chip,.search input,.cap strong) { font-size: .85em; }
  [data-omni-surface="inspiration"] .lead { max-width: 60ch; font-size: 1em; }
  [data-omni-surface="inspiration"] h1 { font-size: clamp(64px,2.5vw,96px); }
  [data-omni-surface="inspiration"] dialog { max-width: min(1600px,calc(100vw - 64px)); }
  [data-omni-surface="inspiration"] .info { font-size: 1em; }

  [data-omni-surface="legal"] main { max-width: 80ch; }
}
@media (min-width: 3200px) {
  [data-omni-surface="web"] #crear .omni-top9 { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
}
/* Short windows and landscape phones retain access to navigation and typing. */
[data-omni-surface="app"] .menu { max-height: calc(100dvh - 5.5em); overflow-y: auto; }
@media (max-height: 600px) {
  [data-omni-surface="app"] .hello { padding: 8px 16px 24px; gap: 6px; }
  [data-omni-surface="app"] .hello img { width: 56px; height: 56px; margin-bottom: 0; border-radius: 16px; }
  [data-omni-surface="app"] .hello h1 { font-size: clamp(28px,6vh,40px); }
  [data-omni-surface="app"] .hello p { font-size: 12px; }
  [data-omni-surface="app"] .side { overflow-y: auto; }
  [data-omni-surface="app"] .convs { flex: 1 0 48px; }
  [data-omni-surface="app"] .earth { display: none; }
}
@media (prefers-reduced-motion: reduce), (update: slow) {
  [data-omni-surface="app"] :is(.map,.oc-coin,.oc-coin-in) { animation: none; }
}

/* Nivel del dispositivo (display-tier.js): 720p, 1080p, 2K o 4K según la pantalla, limitado por la potencia.
   Equipos poco potentes o con ahorro de datos: sin desenfoques de fondo ni sombras difuminadas, que son
   lo que más cuesta pintar; el diseño y las animaciones principales se mantienen. */
html[data-omni-power="low"] *,
html[data-omni-power="low"] *::before,
html[data-omni-power="low"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-omni-power="low"] :is(.oc-coin,.og-hero img) { filter: none !important; }
html[data-omni-power="low"] .globe { box-shadow: none !important; }
/* Pantallas 2K y 4K: texto con el suavizado fino y escalado de imágenes de máxima calidad. */
html:is([data-omni-tier="2k"],[data-omni-tier="4k"]) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html:is([data-omni-tier="2k"],[data-omni-tier="4k"]) img { image-rendering: high-quality; }