/* Vistio Business v1.1.79 — composición móvil, sin cambiar escritorio.
   No se alteran plantillas publicadas, modales de verificación, rutas ni scroll de Agenda.
   Los componentes de vista previa se mantienen desplazables, nunca se comprimen mediante zoom. */
.vb179-nav-toggle{display:none}
.vb179-mobile-links{display:contents}

@media(max-width:820px){
  /* Cabecera: menú real y compacto, sin esconder enlaces de navegación. */
  body > header.header{box-sizing:border-box;position:relative;z-index:30;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;padding-inline:clamp(12px,3.5vw,20px);min-width:0}
  body > header.header .brand{min-width:0;flex:0 1 auto;gap:7px}
  body > header.header .brand-words{min-width:0}
  body > header.header .brand-words strong{font-size:clamp(13px,3.8vw,17px);letter-spacing:.12em}
  body > header.header .brand-words small{font-size:9px;letter-spacing:.13em}
  body > header.header .headeractions{position:static;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;width:auto;gap:7px;min-width:0}
  body > header.header .headeractions #btn-access{min-height:40px;padding:9px 12px;font-size:12px;line-height:1.2;white-space:nowrap}
  .vb179-nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 11px;border:1px solid rgba(207,169,98,.43);border-radius:12px;background:#201b17;color:#edcf9c;font-family:inherit;font-size:12px;font-weight:750;cursor:pointer}
  .vb179-nav-toggle:focus-visible{outline:2px solid #edcb8a;outline-offset:3px}
  .vb179-nav-toggle svg{width:16px;height:16px;flex:none}
  body > header.header .vb179-mobile-links{position:absolute;top:calc(100% - 1px);left:12px;right:12px;display:flex;flex-direction:column;gap:5px;max-height:min(68svh,460px);overflow-y:auto;padding:11px;border:1px solid rgba(217,170,92,.36);border-radius:0 0 17px 17px;background:linear-gradient(155deg,#191714,#0b0c0e);box-shadow:0 18px 35px rgba(0,0,0,.65);z-index:35}
  body > header.header .vb179-mobile-links:not(.is-open){display:none!important}
  body > header.header .vb179-mobile-links > .navlink,
  body > header.header .vb179-mobile-links > #btn-home{box-sizing:border-box;display:flex;align-items:center;min-height:43px;padding:11px 13px;margin:0;width:100%;max-width:100%;text-align:left;white-space:normal;text-decoration:none;border-radius:10px;color:#f2e5cf;font-size:14px;letter-spacing:0}
  body > header.header .vb179-mobile-links > .navlink:hover,
  body > header.header .vb179-mobile-links > #btn-home:hover{background:rgba(221,179,95,.11)}
  body > header.header .vb179-mobile-links > [hidden]{display:none!important}

  /* Contenedor y flujo de portada; se conservan los tamaños de imágenes internas. */
  #landing{min-width:0}
  #landing .wrap{box-sizing:border-box;max-width:100%;width:100%;padding-inline:clamp(14px,4.2vw,25px)}
  #landing .hero.wrap{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:start;gap:26px;padding-top:clamp(26px,6vw,45px);padding-bottom:32px}
  #landing .hero-copy{min-width:0;max-width:100%;width:100%}
  #landing .hero-copy h1{font-size:clamp(40px,10vw,64px);line-height:1.07;letter-spacing:-.055em;overflow-wrap:normal}
  #landing .hero-copy .lead{max-width:58ch;font-size:clamp(14px,3.65vw,17px);line-height:1.65}
  #landing .hero .heroactions{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
  #landing .hero .heroactions > *{box-sizing:border-box;min-height:47px}
  #landing .hero .hero-art.vb-hero-immersive{box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin:0}
  #landing .hero .hero-art.vb-hero-immersive .vb146-stage{max-width:100%;min-width:0}
  #landing .hero .hero-art.vb-hero-immersive .vb146-gallery,
  #landing .hero .hero-art.vb-hero-immersive .vb146-secondary{min-width:0}
  #landing #herramientas{padding-block:42px}
  #landing #herramientas .vbtools-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px}
  #landing #herramientas .vbtools-card{box-sizing:border-box;min-width:0;width:100%;max-width:100%;height:auto;max-height:none}
  #landing #herramientas .vbtools-heading{max-width:100%;min-width:0}
  #landing #herramientas .vbtools-heading h2{font-size:clamp(30px,6.5vw,44px);line-height:1.12;overflow-wrap:normal}
  #landing #herramientas .vbtools-card-content,
  #landing #herramientas .vbtools-card-content > p,
  #landing #herramientas .vbtools-footnote{min-width:0;max-width:100%}
  #landing #herramientas .vbtools-card .vbtools-metrics{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
  #landing #herramientas .vbtools-card .vbtools-metrics > span{min-width:0;flex:1 1 86px}
  #landing #herramientas .vbtools-stage,
  #landing #herramientas .vbtools-showcase,
  #landing #herramientas .vbtools-phone{max-width:100%;min-width:0}
  #landing #experiencia.vb122-experience-section > .vb122-experience-grid,
  #landing #experiencia .experience-grid{box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:28px;align-items:start;width:100%}
  #landing #experiencia .vb122-experience-window,
  #landing #experiencia .vb122-desktop-frame,
  #landing #experiencia .experience-window{box-sizing:border-box;width:100%;max-width:100%;min-width:0;transform:none!important}
  #landing #experiencia .window-stats{display:flex;flex-wrap:wrap;gap:10px}
  #landing #experiencia .window-stats > span{min-width:0;flex:1 1 85px}
  #landing #experiencia .vb122-experience-copy h2{font-size:clamp(35px,8vw,52px);line-height:1.09}
  #landing #planes .sectionhead{display:flex;flex-direction:column;gap:16px;align-items:stretch}
  #landing #planes .sectionhead h2{font-size:clamp(31px,7.5vw,47px)}
  #landing #planes .plans{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px}
  #landing #planes .plan{box-sizing:border-box;width:100%;min-width:0;max-width:none;height:auto;min-height:0}
  #landing .footer{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}

  /* Panel de usuario: barra de navegación horizontal deslizable y formularios en columna. */
  #workspace .workspace-shell.wrap{box-sizing:border-box;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:15px;width:100%;max-width:100%;padding:12px clamp(12px,3.6vw,24px) 30px;min-width:0}
  #workspace .workspace-shell > .sidebar{box-sizing:border-box;display:block;position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;max-height:none!important;margin:0!important;padding:12px!important;overflow:visible!important;border-radius:18px}
  #workspace .sidebar .side-brand{margin-bottom:10px}
  #workspace .sidebar .side-user{box-sizing:border-box;min-width:0;margin-bottom:10px}
  #workspace .sidebar .side-user > div:last-child{min-width:0}
  #workspace .sidebar #user-email,
  #workspace .sidebar #user-handle{display:block;max-width:100%;overflow-wrap:anywhere}
  #workspace .sidebar .side-label{display:none}
  #workspace .sidebar nav.sidenav{box-sizing:border-box;display:flex!important;flex-flow:row nowrap!important;align-items:stretch;gap:7px;min-width:0;width:100%;max-width:100%;margin:0;padding:2px 2px 10px;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;touch-action:pan-x}
  #workspace .sidebar nav.sidenav > button{box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;flex:0 0 auto!important;width:auto!important;max-width:none;min-height:43px;padding:10px 13px!important;white-space:nowrap;font-size:12px;line-height:1.2;scroll-snap-align:start}
  #workspace .sidebar nav.sidenav > button .nav-glyph{flex:0 0 auto}
  #workspace .sidebar .sidebar-bottom{box-sizing:border-box;display:flex!important;justify-content:flex-end;align-items:center;margin:8px 0 0;min-width:0}
  #workspace .sidebar .sidebar-bottom .side-help{display:none!important}
  #workspace .sidebar .sidebar-bottom #logout.vb125-logout{width:auto!important;min-height:41px;margin:0;padding:9px 35px 9px 12px;font-size:12px}
  #workspace .workspace-shell > .workspace-body{box-sizing:border-box;min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
  #workspace .workspace-top{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
  #workspace .workspace-right{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
  #workspace #view-content{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
  #workspace .view-head{box-sizing:border-box;display:flex;flex-direction:column;gap:13px;align-items:stretch;min-width:0}
  #workspace .view-head > div{min-width:0}
  #workspace .view-head .view-title{font-size:clamp(28px,6.5vw,43px);line-height:1.13;overflow-wrap:normal}
  #workspace .view-head .view-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
  #workspace .view-head .view-toolbar .button{max-width:100%;white-space:normal}
  #workspace .dashboard-hero.v03-hero{box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:20px;width:100%;max-width:100%;height:auto!important;min-height:0!important;padding:clamp(18px,4vw,27px)}
  #workspace .dashboard-hero.v03-hero > div{min-width:0}
  #workspace .dashboard-hero.v03-hero h2{font-size:clamp(30px,7.2vw,45px);line-height:1.13;max-width:100%}
  #workspace .dashboard-hero.v03-hero .actions{display:flex;flex-wrap:wrap;gap:9px}
  #workspace .dashboard-hero .dash-phone-sample{box-sizing:border-box;justify-self:center;max-width:min(100%,340px);width:100%;margin:0 auto}
  #workspace .statgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  #workspace .statgrid .stat{box-sizing:border-box;min-width:0;overflow-wrap:anywhere}
  #workspace .statgrid .stat .number{font-size:clamp(27px,6vw,39px)}
  #workspace .module-grid,
  #workspace .resource-grid,
  #workspace .resources-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  #workspace .module-grid > *,#workspace .resource-grid > *,#workspace .resources-grid > *{box-sizing:border-box;min-width:0;width:100%}
  #workspace .account-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px}
  #workspace .account-forms{box-sizing:border-box;min-width:0;width:100%;max-width:100%}
  #workspace .account-form,#workspace .account-showcase{box-sizing:border-box;max-width:100%;min-width:0}
  #workspace .account-card-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
  #workspace .formgrid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px}
  #workspace .formbox,#workspace .premium-editor{box-sizing:border-box;max-width:100%;min-width:0}
  #workspace #resource-form .editor-split.v03-editor-split,
  #workspace #resource-form .editor-split{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch;gap:22px;min-width:0}
  #workspace #resource-form .form-content,
  #workspace #resource-form .live-preview-column.preview-studio{box-sizing:border-box;min-width:0!important;width:100%!important;max-width:100%!important;position:static!important;inset:auto!important;transform:none!important}
  #workspace #resource-form .form-actions{display:flex;flex-wrap:wrap;gap:10px}
  #workspace #resource-form .preview-shell,
  #workspace #resource-form .preview-canvas{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
  #workspace #resource-form .preview-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
  #workspace #resource-form .preview-canvas{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  #workspace #resource-form .preview-stage{margin-inline:auto}
  #workspace #resource-form .preview-insights{display:flex;flex-wrap:wrap;gap:8px}
  #workspace #resource-form .vb102-design-promo{box-sizing:border-box;max-width:100%}
  #workspace .section-divider{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
  #workspace .v101-studio-guide{box-sizing:border-box;max-width:100%;min-width:0}
  #workspace .v101-guide-steps{display:flex;flex-wrap:wrap;gap:8px}
}
@media(max-width:600px){
  #landing .hero .heroactions{display:grid;grid-template-columns:minmax(0,1fr)}
  #landing .hero .heroactions > .button{width:100%;justify-content:center;text-align:center}
  #landing #planes .plans{grid-template-columns:minmax(0,1fr)!important}
  #landing #experiencia .vb122-desktop-shell{grid-template-columns:44px minmax(0,1fr)}
  #landing #experiencia .vb122-desktop-sidebar{padding:12px 7px;gap:9px}
  #landing #experiencia .vb122-desktop-main{min-width:0;padding:12px 11px;gap:9px}
  #landing #experiencia .vb122-hero-card{grid-template-columns:minmax(0,1fr)!important}
  #landing #experiencia .vb122-side-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #landing #experiencia .vb122-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #landing #experiencia .vb122-desktop-head h3{font-size:clamp(22px,6vw,30px)}
  #landing #experiencia .vb122-head-badge{white-space:normal}
  #landing #experiencia .vb122-work-grid{grid-template-columns:minmax(0,1fr)}
  #workspace .statgrid,
  #workspace .module-grid,
  #workspace .resource-grid,
  #workspace .resources-grid{grid-template-columns:minmax(0,1fr)!important}
  #workspace .dashboard-hero.v03-hero .actions{display:grid;grid-template-columns:minmax(0,1fr)}
  #workspace .dashboard-hero.v03-hero .actions > button{width:100%;max-width:100%;white-space:normal}
  #workspace #resource-form .form-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  #workspace #resource-form .form-actions > .button{width:100%;max-width:100%}
  #workspace .formbox-head h3{font-size:clamp(24px,6vw,33px)}
  #workspace .view-head .view-toolbar .button{width:100%}
}
@media(max-width:360px){
  #landing .hero-copy h1{font-size:38px}
  #landing #herramientas .vbtools-heading h2{font-size:29px}
  body > header.header .headeractions{gap:5px}
  body > header.header .headeractions #btn-access{font-size:11px;padding-inline:9px}
  .vb179-nav-toggle{font-size:11px;padding-inline:9px}
  #landing #herramientas .vbtools-card .vbtools-metrics > span{flex-basis:100px}
}
@media(prefers-reduced-motion:reduce){
  #workspace .sidebar nav.sidenav{scroll-behavior:auto}
}