/* Barra fija de abajo con UNA salida clara: «Crear mi web gratis» (estilos, ejemplos y panel de ejemplo). Nunca un callejón sin salida. */
body.con-barra-crear { padding-bottom: 5.4rem; }
.barra-crear { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem 1rem;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px)); background: var(--color-neutral-surface, #fff); color: var(--color-primary, #1E3D33);
  border-top: 1px solid var(--color-neutral-line, #D6DBD4); box-shadow: 0 -6px 20px rgb(30 61 51 / .1);
  font: 600 .95rem/1.2 var(--font-text, 'Albert Sans', system-ui, sans-serif); }
.barra-crear p { margin: 0; flex: 1 1 auto; text-align: center; max-width: 24rem; }
.barra-crear a { box-sizing: border-box; flex: 0 1 17rem; display: grid; place-items: center; min-height: 46px; padding: .3rem 1.2rem; border-radius: 999px; text-align: center;
  background: var(--color-primary, #1E3D33); color: var(--color-neutral-bg, #F3F4EF); border: 1.5px solid var(--color-primary, #1E3D33); text-decoration: none; }
.barra-crear a:hover { background: var(--color-accent, #9A4A52); border-color: var(--color-accent, #9A4A52); color: #fff; }
.barra-crear a:focus-visible { outline: 3px solid var(--color-accent, #9A4A52); outline-offset: 2px; }
@media (max-width: 30rem) { .barra-crear { flex-direction: column; } .barra-crear a { flex: none; width: 100%; max-width: 20rem; } }
@media (max-width: 30rem) { body.con-barra-crear { padding-bottom: 7.4rem; } }