/* SKIN DE APP — convierte los mockups (con marco de teléfono) en una app WEB a pantalla completa.
   No toca el diseño interno; saca el "andamiaje" de presentación, estira la pantalla y respeta los bordes del teléfono (notch + indicador de inicio). */
html,body{margin:0!important;padding:0!important;height:100%!important;background:#F4F4F2!important}
body{display:block!important;overflow:hidden!important}

/* fuera el andamiaje de mockup (textos explicativos, etiquetas, isla falsa) */
.intro,.foot,.botfoot,.lab,.dyn{display:none!important}

/* IA y comparativas traen 2 teléfonos: en la app se muestra solo el primero */
.col{width:100%!important;gap:0!important;align-items:stretch!important}
.col ~ .col{display:none!important}

/* el teléfono pasa a ocupar TODA la pantalla (centrado en desktop, full en móvil) */
.phone{width:100%!important;max-width:480px!important;height:100dvh!important;margin:0 auto!important;
  padding:0!important;border:0!important;border-radius:0!important;background:#000!important;box-shadow:none!important;position:relative!important}
.screen{width:100%!important;height:100dvh!important;border-radius:0!important}

/* la barra de estado FALSA (9:41) se vuelve un espaciador invisible que respeta el notch real */
.status, .status *{color:transparent!important}
.status{padding-top:calc(6px + env(safe-area-inset-top))!important;pointer-events:none!important}

/* elementos fijos: por encima del indicador de inicio (la barrita de abajo del iPhone) */
.tabbar{bottom:calc(14px + env(safe-area-inset-bottom))!important}
.cta{bottom:calc(20px + env(safe-area-inset-bottom))!important}
.inputbar{bottom:calc(90px + env(safe-area-inset-bottom))!important}