/* ===== Ask3d.ai — responsive layer + demo player (loaded by every page) ===== */
html{-webkit-text-size-adjust:100%}
img,video,iframe{max-width:100%}

/* --- Demo stage: the iframe fills the 16:9 box --- */
#ask3d-demo-stage.ask3d-has-media{padding:0 !important}
#ask3d-demo-stage .ask3d-media{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#060A13}
#ask3d-demo-stage img.ask3d-media,#ask3d-demo-stage video.ask3d-media{object-fit:contain}
[data-ask3d-tab]{cursor:pointer}
[data-ask3d-tab]:focus-visible,.ask3d-menu-btn:focus-visible{outline:2px solid #6FA8FF;outline-offset:2px}

/* --- Mobile header: collapse the menu behind a button --- */
.ask3d-menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid #24324D;background:transparent;color:#E8EEF8;cursor:pointer}
@media (max-width: 860px){
  header nav{flex-wrap:nowrap !important}
  .ask3d-menu-btn{display:inline-flex}
  .ask3d-menu{display:none !important}
  header.ask3d-open .ask3d-menu{display:flex !important;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch !important;gap:0 !important;padding:8px 16px 16px;background:#04060B;border-bottom:1px solid #121B2C;box-shadow:0 24px 40px -12px #000}
  header.ask3d-open .ask3d-menu > a{min-height:48px;display:flex;align-items:center;padding:0 8px;border-bottom:1px solid #121B2C}
  header.ask3d-open .ask3d-menu > a.btn{justify-content:center;margin-top:12px;border-bottom:0}
  /* demo tabs become a horizontal, swipeable row above the 16:9 box */
  .ask3d-tabs{flex-direction:row !important;flex:1 1 100% !important;overflow-x:auto;gap:8px !important;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .ask3d-tabs > button{flex:none !important;width:auto !important;white-space:nowrap;scroll-snap-align:start}
}
/* --- PRUEBA con Ana (27 de octubre): casi a todo lo ancho. Lo pidio el
   usuario: «los margenes laterales son muy grandes, deja un poquito, unos
   2 cm». El contenido iba a 1200 px como mucho, centrado (con 1600 de
   pantalla, unos 200 px de margen a cada lado). Ahora sin tope, con 2 cm
   de margen. Tambien los contenedores con el tope escrito en la etiqueta
   (la cabecera de cada pagina y los blogs). Fueron 2 cm, el mismo dia 5
   («no cabe el avatar completo en pantalla») y el 28 de octubre otra vez 2
   (lo pidio el usuario): que Ana quepa lo resuelve ya el tope de alto del
   recuadro, mas abajo.
   En una ventana estrecha el margen encoge para que el contenido no baje de
   885 px (la ventana menos 900, entre dos; 5vw si ni eso): con 12vw, a 1000
   px el recuadro de Ana se quedaba en 745 y su ventana pasaba a la maqueta
   de movil (Ana debajo del modelo, de 182 px de alto). */
.wrap,div[style*="max-width: 1200px"]{--margen:min(2cm,max(5vw,calc((100vw - 900px) / 2)));max-width:none !important;padding-left:var(--margen) !important;padding-right:var(--margen) !important}
/* Y aun asi, el recuadro con Ana nunca mas alto que lo que deja ver su
   cabecera fija (73 px de alto, mas 8 de aire arriba y abajo): a 1920 x 950
   el 16:9 cabe con 18 px de sobra, y con una ventana mas baja (la barra de
   marcadores, una pantalla al 125 %) ya no. Si no cabe, el recuadro es mas
   apaisado que 16:9 (con el ancho entero: sin el 100 %, Chrome guarda el
   16:9 estrechandolo, y quedaba un hueco a la derecha); Ana se encaja en
   el alto que haya. Al pulsar el boton, el recuadro se desplaza a la vista
   sin quedar bajo la cabecera.
   Y con la proporcion de su imagen (1552 x 669, 2,32:1), no 16:9 (28 de
   octubre, lo pidio el usuario: primero «un poco mas panoramico, 3 cm a
   ojo» y despues «aun menos alto, como la imagen de referencia»): al pulsar
   el boton el recuadro no cambia de tamaño, y al cerrar a Ana la imagen lo
   llena entero. Con .wrap delante, para ganar al 16:9 que pone la pagina
   despues de esta hoja. */
#demo{scroll-margin-top:81px;scroll-margin-bottom:8px}
@media (min-width: 761px){.wrap > #demo.ana-en-vivo{width:100%;height:auto;aspect-ratio:1552 / 669;max-height:calc(100vh - 89px)}}
/* En el movil, los 16 px de su regla de abajo, tambien en los de la etiqueta
   (esa regla solo nombra .wrap, y quedaban a 19). */
@media (max-width: 480px){div[style*="max-width: 1200px"]{padding-left:16px !important;padding-right:16px !important}}
@media (max-width: 480px){
  .wrap{padding-left:16px !important;padding-right:16px !important}
}